diff --git a/src/Model/Navigation/NaviEntry.php b/src/Model/Navigation/NaviEntry.php index 2609c892b..2b02db9a8 100644 --- a/src/Model/Navigation/NaviEntry.php +++ b/src/Model/Navigation/NaviEntry.php @@ -58,8 +58,9 @@ class NaviEntry extends NaviEntryBase { ); } else { return $self->Html->Link( - ''. $this->iconClass .''. - '' . $this->title . '', + ''. $this->iconClass .'' + .'' . $this->title . '', ['controller' => $this->controller, 'action' => $this->action, $this->param], ['class' => $this->bgColorClass, 'escape' => false]); } diff --git a/src/Model/Navigation/NaviEntryAbsoluteLink.php b/src/Model/Navigation/NaviEntryAbsoluteLink.php index 1c9b82d46..7d467ed69 100644 --- a/src/Model/Navigation/NaviEntryAbsoluteLink.php +++ b/src/Model/Navigation/NaviEntryAbsoluteLink.php @@ -55,7 +55,8 @@ class NaviEntryAbsoluteLink extends NaviEntryBase ); } else { return '' - . ''. $this->iconClass .'' + .''. $this->iconClass .'' . '' . $this->title . '' . ''; } diff --git a/src/Model/Navigation/NaviEntryExternLink.php b/src/Model/Navigation/NaviEntryExternLink.php index ea9c229b4..8ace7fb4c 100644 --- a/src/Model/Navigation/NaviEntryExternLink.php +++ b/src/Model/Navigation/NaviEntryExternLink.php @@ -18,8 +18,9 @@ class NaviEntryExternLink extends NaviEntryAbsoluteLink $self = $GLOBALS["self"]; return '' - . ''. $this->iconClass .'' - . '' . $this->title . '' + .''. $this->iconClass .'' + . '' . $this->title . '' . ''; } } diff --git a/src/Model/Navigation/NaviEntrySub.php b/src/Model/Navigation/NaviEntrySub.php index fd843b715..ae79aa433 100644 --- a/src/Model/Navigation/NaviEntrySub.php +++ b/src/Model/Navigation/NaviEntrySub.php @@ -65,7 +65,8 @@ class NaviEntrySub extends NaviEntryBase return $self->Html->Link( '' .'' . $this->title . '' - .''. $this->iconClass .'', + .''. $this->iconClass .'', ['controller' => $this->controller, 'action' => $this->action, $this->param], ['class' => $this->bgColorClass, 'escape' => false] ); diff --git a/src/Template/Element/navi.ctp b/src/Template/Element/navi.ctp index 849ea405e..1e03e2ae1 100644 --- a/src/Template/Element/navi.ctp +++ b/src/Template/Element/navi.ctp @@ -21,7 +21,9 @@ $navi = []; array_push($navi, $errorNaviEntry); }*/ $balanceNaviEntry = new NaviEntry( - __('Kontoübersicht') . ' (' . $this->element('printGradido', ['number' => $balance]) . ')', + __('Kontoübersicht') . ' (' . + str_replace(array("\r", "\n"), '', strip_tags($this->element('printGradido', ['number' => $balance]))) + . ' )', 'account_balance_wallet', 'StateBalances', 'overview' ); if($balance < 0 ) { diff --git a/src/Template/Layout/frontend_ripple.ctp b/src/Template/Layout/frontend_ripple.ctp index 1826a7ad5..8b908b577 100644 --- a/src/Template/Layout/frontend_ripple.ctp +++ b/src/Template/Layout/frontend_ripple.ctp @@ -42,65 +42,63 @@ $GLOBALS["self"] = $this;
-
- - - - + + +
+ + + +
-
- menu - -
- Flash->render() ?> -
- element('navi_header'); ?> -
-
- element('navi'); ?> -
+ menu +
+ +
+ element('navi'); ?>
Html->link(__('Startseite'), ['controller' => 'Dashboard']); ?> fetch('content') ?>
-
-

-

Alpha 0.21.KW21.05

-
-
- -

- ms -

- -
-
- Copyright © 2020 Gradido -
-
-
    +
    +
    +
    + Copyright © 2020 Gradido +
    +
    + + ms + +
    +
    +

    +

    Alpha 0.21.KW21.05

    +
\ No newline at end of file diff --git a/webroot/css/grd_styles.css b/webroot/css/grd_styles.css index ac9020a6b..591d761b9 100644 --- a/webroot/css/grd_styles.css +++ b/webroot/css/grd_styles.css @@ -12,32 +12,28 @@ /* GRID */ .layout { display: grid; - grid-template-rows: 12vh 70vh 10vh 5vh; - grid-template-columns: 1fr 6fr 1fr; - /*grid-gap: .25em;*/ - grid-template-areas: "topleft topcenter topright" "navleft center navright" "bottomleft bottomcenter bottomright"; + grid-template-rows: [top] 8vh [line2] 80vh [footer1] 7vh [footer2] 5vh [end]; + grid-template-columns: [left1] 1fr [left2] 1fr [left3] 6fr [right3] 1fr [right2] 1fr [right1]; + grid-template-areas: "header header header header header" "left . center center center" "footer footer footer footer footer" "bottom bottom bottom bottom bottom"; margin: 0; padding: 0; } -.header, -.footer { - grid-column-start: 1; - grid-column-end: 4; -} +/*.header { + grid-area: header; +}*/ .sidebar1 { - grid-area: navleft; + grid-area: left; + grid-row-start: top; + grid-row-end: end; } .content { grid-area: center; } -.sidebar2 { - grid-area: navright; -} -.bottomleft { - grid-area: bottomleft; +.footer { + grid-area: footer; } .nav-bottom { - grid-area: bottomcenter; + grid-area: bottom; } /* ============================================================ @@ -92,28 +88,40 @@ display: flex; justify-content: space-between; align-items: center; + flex: flex-grow; width: 100%; padding: 1em; background-color: #fff; } - .header img { - vertical-align: middle; - width: 150px; - } /* ======================= Fußbereich =======================*/ .footer { display: flex; - justify-content: center; + flex-direction: column; + justify-content: flex-start; align-items: center; - padding-top: 10px; font-size: 70%; font-style: italic; } + .bottomright { + position: fixed; + bottom: 0; + right: 0; + color: grey; + font-size: smaller; + line-height: 1.125em; + padding-right: 0.25em; + text-align: right; + } .bottomleft { - background-color: #fff; - vertical-align: bottom; + position: fixed; + bottom: 0; + left: 0; + color: grey; + font-size: smaller; + line-height: 1.125em; + padding-left: 0.25em; } /* ======================= Gradido @@ -195,49 +203,108 @@ Copyright : Gradio ============================================================*/ -/* TODO - dropdown - subnav - text-muted - block-btn (?) - caret (?) - -> für Kinder -*/ @media screen { /* SIDEBARS */ - .sidebar1, - .sidebar2 { - padding: 1em; - } .sidebar1 { - color: #4F4F4F; background-color: #fff; font-weight: 500; line-height: 2.5em; + padding: 0; + border-right: 1px solid #f2f4f5; } .sidebar2 { + padding: 1em; background-color: #f9fafb; } - .nav-icon { - font-size: 1.2em; - padding-right: 1em; - color: grey; - } .sidebar1-header { font-size: 0.75em; font-style: italic; color: grey; } - /* navbar */ - .material-icons-outlined { + /* set general icons size here! */ + .nav-icon { font-size: 18px !important; + color: #4F4F4F; vertical-align: middle; padding-right: 1em; } + /* important! order matters! we need to overwrite the main button's size here */ .nav-main-button { - font-size: 24px !important; + font-size: 32px !important; + color: grey; + margin: 0.3em; + } + .nav-menu { + width: 210px; + height: 100%; + } + .nav-menu-maximized { + -webkit-animation: slide-out 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) both; + animation: slide-out 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) both; + } + .nav-menu-minimized { + -webkit-animation: slide-in 0.1s cubic-bezier(0.25, 0.46, 0.45, 0.94) both; + animation: slide-in 0.1s cubic-bezier(0.25, 0.46, 0.45, 0.94) both; + } + .nav-menu-minimized .link-title { + display: none; + } + .nav-menu-minimized .nav-icon, + .nav-menu-minimized .nav-main-button { + padding-left: 154px; + } + /** + * ---------------------------------------- + * animations slide-in / slide-out + * ---------------------------------------- + */ + /* slide-in */ + @-webkit-keyframes slide-in { + 0% { + -webkit-transform: translateX(0); + transform: translateX(0); + opacity: 0; + } + 100% { + -webkit-transform: translateX(-154px); + transform: translateX(-154px); + opacity: 1; + } + } + @keyframes slide-in { + 0% { + -webkit-transform: translateX(0); + transform: translateX(0); + opacity: 0; + } + 100% { + -webkit-transform: translateX(-154px); + transform: translateX(-154px); + opacity: 1; + } + } + /* slide-out */ + @-webkit-keyframes slide-out { + 0% { + -webkit-transform: translateX(-154px); + transform: translateX(-154px); + } + 100% { + -webkit-transform: translateX(0); + transform: translateX(0); + } + } + @keyframes slide-out { + 0% { + -webkit-transform: translateX(-154px); + transform: translateX(-154px); + } + 100% { + -webkit-transform: translateX(0); + transform: translateX(0); + } } .selected { color: #047006; @@ -247,16 +314,19 @@ line-height: normal; background-color: transparent; } - .nav-horizontal > ul { + .nav-horizontal { display: flex; flex-direction: row; flex-wrap: nowrap; justify-content: center; - align-items: baseline; + align-items: flex-end; list-style-type: none; gap: 5%; padding: 1em; } + .nav-vertical { + margin-top: -2em; + } .nav-horizontal li { padding: 0.5em; } @@ -280,8 +350,6 @@ justify-content: center; align-items: center; list-style-type: none; - gap: 5%; - padding: 1em; } .nav-bottom p { font-size: 0.9em; @@ -324,6 +392,29 @@ text-decoration: none; } } +@media screen and (min-width:640px) { + .logo { + display: none; + vertical-align: middle; + height: 30px; + padding: 0.5em; + } + .logo.big.visible, + .logo.small.visible { + display: block !important; + } + .logo.small.visible { + padding-left: 83px; + } +} +@media screen and (max-width:639px) { + .logo.big { + display: none; + } + .logo.small { + display: block; + } +} /* ============================================================ Screen styles for center part. @@ -337,14 +428,17 @@ @media screen { .content { display: flex; - justify-content: center; + justify-content: flex-start; flex-direction: column; overflow: auto; line-height: 1.5em; - padding: 1.5em; background-color: #f9fafb; - width: 70%; - margin: auto; + width: 100%; + letter-spacing: 0.03rem; + font-family: Roboto, sans-serif; + font-weight: 500; + font-size: 1rem; + padding-top: 5em; } /* content container */ .grd_container { @@ -364,7 +458,7 @@ max-width: 550px; } } -@media screen and (max-width:619px) { +@media screen and (max-width:639px) { .content { flex-direction: column; } @@ -554,22 +648,6 @@ To change this license header, choose License Headers in Project Properties. To change this template file, choose Tools | Templates and open the template in the editor. */ -/* - Created on : 13.10.2019, 15:43:58 - Author : einhornimmond -*/ -.grd-time-used { - position: fixed; - bottom: 0; - left: 0; - color: grey; - font-size: smaller; -} -/* -To change this license header, choose License Headers in Project Properties. -To change this template file, choose Tools | Templates -and open the template in the editor. -*/ /* Created on : 30.10.2019, 16:04:16 Author : einhornimmond diff --git a/webroot/js/basic.js b/webroot/js/basic.js index 5268b11e0..0d6acf484 100644 --- a/webroot/js/basic.js +++ b/webroot/js/basic.js @@ -1,4 +1,4 @@ -// cross browser dom is ready module from: +// cross browser dom is ready module from: // https://www.competa.com/blog/cross-browser-document-ready-with-vanilla-javascript/ var domIsReady = (function(domIsReady) { var isBrowserIeOrNot = function() { @@ -30,7 +30,7 @@ var domIsReady = (function(domIsReady) { // vanilla ajax request, json get function getJson(basisUrl, method, successFunction, errorFunction, timeoutFunction) { var xhr = new XMLHttpRequest(); - + xhr.onload = function(e) { var xhr = e.target; //console.log(xhr); @@ -48,12 +48,12 @@ function getJson(basisUrl, method, successFunction, errorFunction, timeoutFuncti xhr.ontimeout = function(e) { timeoutFunction(e); } - + var bustCache = '&' + new Date().getTime(); //oReq.open('GET', e.target.dataset.url + bustCache, true); xhr.open('GET', basisUrl + '?method='+method + bustCache, true); xhr.setRequestHeader('X-Requested-With', 'XMLHttpRequest'); - xhr.responseType = 'json'; + xhr.responseType = 'json'; xhr.send(); } @@ -71,18 +71,28 @@ el.onclick = function() { domIsReady(function() { //console.log('My DOM is ready peeps!'); //document.querySelector('#page').style.background = 'blue'; - + //var Body = $("body"); - var DesktopToggler = document.querySelector('.t-header-desk-toggler'); + var DesktopToggler = document.querySelector('.nav-main-button'); var MobileToggler = document.querySelector('.t-header-mobile-toggler'); - var HeaderToggle = document.querySelector('.t-header-toggler'); - + var HeaderToggle = document.querySelector('.t-header-toggler'); + // SIDEBAR TOGGLE FUNCTION FOR LARGE SCREENS (SCREEN "LG" AND UP) if(DesktopToggler) { - DesktopToggler.addEventListener('click', function () + DesktopToggler.addEventListener('click', function () { + console.log('toggler clicked / Desktop'); //$(Body).toggleClass("sidebar-minimized"); - document.body.classList.toggle('sidebar-minimized'); + document.querySelector('.nav-menu').classList.toggle('nav-menu-minimized'); + document.querySelector('.nav-menu').classList.toggle('nav-menu-maximized'); + let big = document.querySelectorAll('.logo.big'); + big.forEach(function(el) { + el.classList.toggle('visible'); + }); + let small = document.querySelectorAll('.logo.small'); + small.forEach(function(el) { + el.classList.toggle('visible'); + }); }); } diff --git a/websrc/src/less-files.css b/websrc/src/less-files.css index ac9020a6b..591d761b9 100644 --- a/websrc/src/less-files.css +++ b/websrc/src/less-files.css @@ -12,32 +12,28 @@ /* GRID */ .layout { display: grid; - grid-template-rows: 12vh 70vh 10vh 5vh; - grid-template-columns: 1fr 6fr 1fr; - /*grid-gap: .25em;*/ - grid-template-areas: "topleft topcenter topright" "navleft center navright" "bottomleft bottomcenter bottomright"; + grid-template-rows: [top] 8vh [line2] 80vh [footer1] 7vh [footer2] 5vh [end]; + grid-template-columns: [left1] 1fr [left2] 1fr [left3] 6fr [right3] 1fr [right2] 1fr [right1]; + grid-template-areas: "header header header header header" "left . center center center" "footer footer footer footer footer" "bottom bottom bottom bottom bottom"; margin: 0; padding: 0; } -.header, -.footer { - grid-column-start: 1; - grid-column-end: 4; -} +/*.header { + grid-area: header; +}*/ .sidebar1 { - grid-area: navleft; + grid-area: left; + grid-row-start: top; + grid-row-end: end; } .content { grid-area: center; } -.sidebar2 { - grid-area: navright; -} -.bottomleft { - grid-area: bottomleft; +.footer { + grid-area: footer; } .nav-bottom { - grid-area: bottomcenter; + grid-area: bottom; } /* ============================================================ @@ -92,28 +88,40 @@ display: flex; justify-content: space-between; align-items: center; + flex: flex-grow; width: 100%; padding: 1em; background-color: #fff; } - .header img { - vertical-align: middle; - width: 150px; - } /* ======================= Fußbereich =======================*/ .footer { display: flex; - justify-content: center; + flex-direction: column; + justify-content: flex-start; align-items: center; - padding-top: 10px; font-size: 70%; font-style: italic; } + .bottomright { + position: fixed; + bottom: 0; + right: 0; + color: grey; + font-size: smaller; + line-height: 1.125em; + padding-right: 0.25em; + text-align: right; + } .bottomleft { - background-color: #fff; - vertical-align: bottom; + position: fixed; + bottom: 0; + left: 0; + color: grey; + font-size: smaller; + line-height: 1.125em; + padding-left: 0.25em; } /* ======================= Gradido @@ -195,49 +203,108 @@ Copyright : Gradio ============================================================*/ -/* TODO - dropdown - subnav - text-muted - block-btn (?) - caret (?) - -> für Kinder -*/ @media screen { /* SIDEBARS */ - .sidebar1, - .sidebar2 { - padding: 1em; - } .sidebar1 { - color: #4F4F4F; background-color: #fff; font-weight: 500; line-height: 2.5em; + padding: 0; + border-right: 1px solid #f2f4f5; } .sidebar2 { + padding: 1em; background-color: #f9fafb; } - .nav-icon { - font-size: 1.2em; - padding-right: 1em; - color: grey; - } .sidebar1-header { font-size: 0.75em; font-style: italic; color: grey; } - /* navbar */ - .material-icons-outlined { + /* set general icons size here! */ + .nav-icon { font-size: 18px !important; + color: #4F4F4F; vertical-align: middle; padding-right: 1em; } + /* important! order matters! we need to overwrite the main button's size here */ .nav-main-button { - font-size: 24px !important; + font-size: 32px !important; + color: grey; + margin: 0.3em; + } + .nav-menu { + width: 210px; + height: 100%; + } + .nav-menu-maximized { + -webkit-animation: slide-out 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) both; + animation: slide-out 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) both; + } + .nav-menu-minimized { + -webkit-animation: slide-in 0.1s cubic-bezier(0.25, 0.46, 0.45, 0.94) both; + animation: slide-in 0.1s cubic-bezier(0.25, 0.46, 0.45, 0.94) both; + } + .nav-menu-minimized .link-title { + display: none; + } + .nav-menu-minimized .nav-icon, + .nav-menu-minimized .nav-main-button { + padding-left: 154px; + } + /** + * ---------------------------------------- + * animations slide-in / slide-out + * ---------------------------------------- + */ + /* slide-in */ + @-webkit-keyframes slide-in { + 0% { + -webkit-transform: translateX(0); + transform: translateX(0); + opacity: 0; + } + 100% { + -webkit-transform: translateX(-154px); + transform: translateX(-154px); + opacity: 1; + } + } + @keyframes slide-in { + 0% { + -webkit-transform: translateX(0); + transform: translateX(0); + opacity: 0; + } + 100% { + -webkit-transform: translateX(-154px); + transform: translateX(-154px); + opacity: 1; + } + } + /* slide-out */ + @-webkit-keyframes slide-out { + 0% { + -webkit-transform: translateX(-154px); + transform: translateX(-154px); + } + 100% { + -webkit-transform: translateX(0); + transform: translateX(0); + } + } + @keyframes slide-out { + 0% { + -webkit-transform: translateX(-154px); + transform: translateX(-154px); + } + 100% { + -webkit-transform: translateX(0); + transform: translateX(0); + } } .selected { color: #047006; @@ -247,16 +314,19 @@ line-height: normal; background-color: transparent; } - .nav-horizontal > ul { + .nav-horizontal { display: flex; flex-direction: row; flex-wrap: nowrap; justify-content: center; - align-items: baseline; + align-items: flex-end; list-style-type: none; gap: 5%; padding: 1em; } + .nav-vertical { + margin-top: -2em; + } .nav-horizontal li { padding: 0.5em; } @@ -280,8 +350,6 @@ justify-content: center; align-items: center; list-style-type: none; - gap: 5%; - padding: 1em; } .nav-bottom p { font-size: 0.9em; @@ -324,6 +392,29 @@ text-decoration: none; } } +@media screen and (min-width:640px) { + .logo { + display: none; + vertical-align: middle; + height: 30px; + padding: 0.5em; + } + .logo.big.visible, + .logo.small.visible { + display: block !important; + } + .logo.small.visible { + padding-left: 83px; + } +} +@media screen and (max-width:639px) { + .logo.big { + display: none; + } + .logo.small { + display: block; + } +} /* ============================================================ Screen styles for center part. @@ -337,14 +428,17 @@ @media screen { .content { display: flex; - justify-content: center; + justify-content: flex-start; flex-direction: column; overflow: auto; line-height: 1.5em; - padding: 1.5em; background-color: #f9fafb; - width: 70%; - margin: auto; + width: 100%; + letter-spacing: 0.03rem; + font-family: Roboto, sans-serif; + font-weight: 500; + font-size: 1rem; + padding-top: 5em; } /* content container */ .grd_container { @@ -364,7 +458,7 @@ max-width: 550px; } } -@media screen and (max-width:619px) { +@media screen and (max-width:639px) { .content { flex-direction: column; } @@ -554,22 +648,6 @@ To change this license header, choose License Headers in Project Properties. To change this template file, choose Tools | Templates and open the template in the editor. */ -/* - Created on : 13.10.2019, 15:43:58 - Author : einhornimmond -*/ -.grd-time-used { - position: fixed; - bottom: 0; - left: 0; - color: grey; - font-size: smaller; -} -/* -To change this license header, choose License Headers in Project Properties. -To change this template file, choose Tools | Templates -and open the template in the editor. -*/ /* Created on : 30.10.2019, 16:04:16 Author : einhornimmond diff --git a/websrc/src/less/01-layout.less b/websrc/src/less/01-layout.less index e56eb69ae..edd3d6b65 100644 --- a/websrc/src/less/01-layout.less +++ b/websrc/src/less/01-layout.less @@ -10,42 +10,40 @@ ============================================================*/ /* BREAKPOINTS */ -@maxMobile: ~"(max-width:619px)"; +@maxMobile: ~"(max-width:639px)"; +@minDesktop: ~"(min-width:640px)"; /* GRID */ .layout { display: grid; - grid-template-rows: 12vh 70vh 10vh 5vh; - grid-template-columns: 1fr 6fr 1fr; /*grid-gap: .25em;*/ - grid-template-areas: "topleft topcenter topright" - "navleft center navright" - "bottomleft bottomcenter bottomright"; + grid-template-rows: [top] 8vh [line2] 80vh [footer1] 7vh [footer2] 5vh [end]; + grid-template-columns: [left1] 1fr [left2] 1fr [left3] 6fr [right3] 1fr [right2] 1fr [right1]; + grid-template-areas: "header header header header header" + "left . center center center" + "footer footer footer footer footer" + "bottom bottom bottom bottom bottom"; margin: 0; padding: 0; } -.header, -.footer { - grid-column-start: 1; - grid-column-end: 4; -} +/*.header { + grid-area: header; +}*/ .sidebar1 { - grid-area: navleft; + grid-area: left; + grid-row-start: top; + grid-row-end: end; } .content { grid-area: center; } -.sidebar2 { - grid-area: navright; -} - -.bottomleft { - grid-area: bottomleft; +.footer { + grid-area: footer; } .nav-bottom { - grid-area: bottomcenter; + grid-area: bottom; } diff --git a/websrc/src/less/02-colors.less b/websrc/src/less/02-colors.less index 3590b1046..3e07cdc10 100644 --- a/websrc/src/less/02-colors.less +++ b/websrc/src/less/02-colors.less @@ -16,6 +16,7 @@ @menu-background: #fff; @menu-link-text: #4F4F4F; @menu-link-selected: #047006; +@menu-border-color: #f2f4f5; @dialog-background: #fff; /*rgba(0, 0, 0, 0.5) ??? */ diff --git a/websrc/src/less/03-typography.less b/websrc/src/less/03-typography.less index c4396f4e8..58979667a 100644 --- a/websrc/src/less/03-typography.less +++ b/websrc/src/less/03-typography.less @@ -19,7 +19,7 @@ @nav-btn-large-fs: 35px; @nav-icon-fs: 1.2em; @nav-icons-fs: 18px; -@nav-icon-main-fs: 24px; +@nav-icon-main-fs: 32px; @footer-fs: 70%; diff --git a/websrc/src/less/05-screen.less b/websrc/src/less/05-screen.less index 860048584..610baa111 100644 --- a/websrc/src/less/05-screen.less +++ b/websrc/src/less/05-screen.less @@ -31,31 +31,43 @@ display: flex; justify-content: space-between; align-items: center; + flex: flex-grow; width: 100%; padding: 1em; background-color: @menu-background; } - .header img { - vertical-align: middle; - width: 150px; - } - /* ======================= Fußbereich =======================*/ .footer { display: flex; - justify-content: center; + flex-direction: column; + justify-content: flex-start; align-items: center; - padding-top: 10px; font-size: @footer-fs; font-style: italic; } + .bottomright { + position: fixed; + bottom: 0; + right: 0; + color: @unobtrusive; + font-size: @devinfo-fs; + line-height: 1.125em; + padding-right: 0.25em; + text-align: right; + } + .bottomleft { - background-color: @menu-background; - vertical-align: bottom; + position: fixed; + bottom: 0; + left: 0; + color: @unobtrusive; + font-size: @devinfo-fs; + line-height: 1.125em; + padding-left: 0.25em; } /* ======================= diff --git a/websrc/src/less/08-navi.less b/websrc/src/less/08-navi.less index 7d2fdb84b..e0b408740 100644 --- a/websrc/src/less/08-navi.less +++ b/websrc/src/less/08-navi.less @@ -8,60 +8,160 @@ Copyright : Gradio ============================================================*/ - -/* TODO - dropdown - subnav - text-muted - block-btn (?) - caret (?) - -> für Kinder -*/ @media screen { + @media @minDesktop { + .logo { + display: none; + vertical-align: middle; + height: 30px; + padding: .5em; + } + + .logo.big.visible, + .logo.small.visible { + display: block !important; + } + + .logo.small.visible { + padding-left: 83px; + } + + } + + @media @maxMobile { + .logo.big { + display: none; + } + + .logo.small { + display: block; + } + + } /* SIDEBARS */ - .sidebar1, - .sidebar2 { - padding: 1em; - } - .sidebar1 { - color: @menu-link-text; background-color: @menu-background; font-weight: 500; line-height: @sidebar1-lh; + padding: 0; + border-right: 1px solid @menu-border-color; } .sidebar2 { + padding: 1em; background-color: @main-background; } - .nav-icon { - font-size: @nav-icon-fs; - padding-right: 1em; - color: @unobtrusive; - } - .sidebar1-header { font-size: @sidebar1-header-fs; font-style: italic; color: @unobtrusive; } - @media @maxMobile { - } - - /* navbar */ - .material-icons-outlined { + /* set general icons size here! */ + .nav-icon { font-size: @nav-icons-fs !important; + color: @menu-link-text; vertical-align: middle; padding-right: 1em; } + /* important! order matters! we need to overwrite the main button's size here */ .nav-main-button { font-size: @nav-icon-main-fs !important; + color: @unobtrusive; + margin: .3em; + } + + .nav-menu { + width: 210px; + height: 100%; + } + + .nav-menu-maximized { + -webkit-animation: slide-out 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both; + animation: slide-out 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both; + } + + .nav-menu-minimized { + -webkit-animation: slide-in 0.1s cubic-bezier(0.250, 0.460, 0.450, 0.940) both; + animation: slide-in 0.1s cubic-bezier(0.250, 0.460, 0.450, 0.940) both; + } + + .nav-menu-minimized .link-title { + display: none; + } + + .nav-menu-minimized .nav-icon, + .nav-menu-minimized .nav-main-button { + padding-left: 154px; + } + + /** + * ---------------------------------------- + * animations slide-in / slide-out + * ---------------------------------------- + */ + + /* slide-in */ + @-webkit-keyframes slide-in { + 0% { + -webkit-transform: translateX(0); + transform: translateX(0); + opacity: 0; + } + + 100% { + -webkit-transform: translateX(-154px); + transform: translateX(-154px); + opacity: 1; + } + + } + + @keyframes slide-in { + 0% { + -webkit-transform: translateX(0); + transform: translateX(0); + opacity: 0; + } + + 100% { + -webkit-transform: translateX(-154px); + transform: translateX(-154px); + opacity: 1; + } + + } + + /* slide-out */ + @-webkit-keyframes slide-out { + 0% { + -webkit-transform: translateX(-154px); + transform: translateX(-154px); + } + + 100% { + -webkit-transform: translateX(0); + transform: translateX(0); + } + + } + + @keyframes slide-out { + 0% { + -webkit-transform: translateX(-154px); + transform: translateX(-154px); + } + + 100% { + -webkit-transform: translateX(0); + transform: translateX(0); + } + } .selected { @@ -74,17 +174,21 @@ background-color: transparent; } - .nav-horizontal > ul { + .nav-horizontal { display: flex; flex-direction: row; flex-wrap: nowrap; justify-content: center; - align-items: baseline; + align-items: flex-end; list-style-type: none; gap: 5%; padding: 1em; } + .nav-vertical { + margin-top: -2em; + } + .nav-horizontal li { padding: .5em; } @@ -112,8 +216,6 @@ justify-content: center; align-items: center; list-style-type: none; - gap: 5%; - padding: 1em; } .nav-bottom p { diff --git a/websrc/src/less/10-center.less b/websrc/src/less/10-center.less index 202264a43..62a06c19d 100644 --- a/websrc/src/less/10-center.less +++ b/websrc/src/less/10-center.less @@ -11,14 +11,17 @@ @media screen { .content { display: flex; - justify-content: center; + justify-content: flex-start; flex-direction: column; overflow: auto; line-height: @content-lh; - padding: 1.5em; background-color: @main-background; - width: 70%; - margin: auto; + width: 100%; + letter-spacing: .03rem; + font-family: Roboto, sans-serif; + font-weight: 500; + font-size: 1rem; + padding-top: 5em; } @media @maxMobile { diff --git a/websrc/src/less/loginServer.less b/websrc/src/less/loginServer.less deleted file mode 100644 index b9e43e3d5..000000000 --- a/websrc/src/less/loginServer.less +++ /dev/null @@ -1,18 +0,0 @@ -/* -To change this license header, choose License Headers in Project Properties. -To change this template file, choose Tools | Templates -and open the template in the editor. -*/ - -/* - Created on : 13.10.2019, 15:43:58 - Author : einhornimmond -*/ - -.grd-time-used { - position: fixed; - bottom: 0; - left: 0; - color: @unobtrusive; - font-size: @devinfo-fs; -}