From ceffc923f2cd4a332b4626af8ad551621ec9f41b Mon Sep 17 00:00:00 2001 From: Christine Slotty Date: Fri, 3 Jul 2020 18:25:41 +0200 Subject: [PATCH] start profile --- .gitignore | 4 + mithril_client | 2 +- src/Template/Element/user_menu.ctp | 23 +++ src/Template/Layout/frontend.ctp | 5 +- webroot/css/grd_styles.css | 241 +++++++++++++-------------- websrc/package.json | 5 +- websrc/src/less-files.css | 241 +++++++++++++-------------- websrc/src/less/01-layout.less | 12 +- websrc/src/less/03-typography.less | 1 + websrc/src/less/07-user.less | 91 ++++++++++ websrc/src/less/08-navi.less | 57 ++++--- websrc/src/less/09-notification.less | 3 +- 12 files changed, 392 insertions(+), 293 deletions(-) create mode 100644 src/Template/Element/user_menu.ctp create mode 100644 websrc/src/less/07-user.less diff --git a/.gitignore b/.gitignore index b0edef2c2..ce74b5561 100644 --- a/.gitignore +++ b/.gitignore @@ -4,3 +4,7 @@ src/GPBMetadata/ tmp/ vendor/ composer.lock +websrc/node_modules/ +websrc/gulpfile.js +websrc/package-lock.json +mithril_client/ diff --git a/mithril_client b/mithril_client index 21d4a0a5e..a04d47699 160000 --- a/mithril_client +++ b/mithril_client @@ -1 +1 @@ -Subproject commit 21d4a0a5e9a19f251e26c0ae07ce74be2fa99bbf +Subproject commit a04d4769974b9d93ba72e490ed7dca3fbaed768c diff --git a/src/Template/Element/user_menu.ctp b/src/Template/Element/user_menu.ctp new file mode 100644 index 000000000..07e4c3c84 --- /dev/null +++ b/src/Template/Element/user_menu.ctp @@ -0,0 +1,23 @@ +getRequest()->getSession(); +$user = $session->read('StateUser'); +$this->set('user', $user); +$navi = []; +array_push($navi, new NaviEntry(__('Startseite'), 'home', 'Dashboard', 'index')); +array_push($navi, new NaviEntry(__('Startseite'), 'home', 'Dashboard', 'index')); +?> + + + +account_circle + \ No newline at end of file diff --git a/src/Template/Layout/frontend.ctp b/src/Template/Layout/frontend.ctp index 673ecb95c..7ad146bed 100644 --- a/src/Template/Layout/frontend.ctp +++ b/src/Template/Layout/frontend.ctp @@ -40,6 +40,9 @@ $GLOBALS["self"] = $this;
element('navi_notify'); ?>
+
+ element('user_menu'); ?> +
menu
@@ -94,7 +97,7 @@ $GLOBALS["self"] = $this;
- Copyright © 2020 Gradido +

Copyright © 2020 Gradido

diff --git a/webroot/css/grd_styles.css b/webroot/css/grd_styles.css index 6685d1034..06d1a6b5e 100644 --- a/webroot/css/grd_styles.css +++ b/webroot/css/grd_styles.css @@ -16,7 +16,7 @@ .layout { display: grid; grid-template-rows: [top] 6vh [line2] 86vh [footer1] 3vh [footer2] 5vh [end]; - grid-template-columns: [left1] 1fr [left2] 1fr [left3] 12fr [right3] 1fr [right2] 1fr [right1]; + grid-template-columns: [left1] auto [left2] 1fr [left3] 12fr [right3] 1fr [right2] auto [right1]; grid-template-areas: "header header header header header" "left . center . ." "footer footer footer footer footer" "bottom bottom bottom bottom bottom"; margin: 0; padding: 0; @@ -25,7 +25,7 @@ .layout { position: relative; display: grid; - grid-template-rows: [top] 12vh [line2] 86vh [footer1] 3vh [footer2] 8vh [end]; + grid-template-rows: [top] 12vh [line2] 80vh [footer1] 3vh [footer2] 8vh [end]; grid-template-columns: [left1] 100vw [right1]; grid-template-areas: "header" "center" "footer" "bottom"; margin: 0; @@ -37,6 +37,11 @@ grid-column-start: right3; grid-column-end: right2; } +.header-user { + grid-area: header; + grid-column-start: right2; + grid-column-end: right1; +} .sidebar1 { grid-area: left; grid-row-start: top; @@ -50,6 +55,7 @@ top: -300px; right: 0px; } + .header-user, .header-notify { grid-area: header; } @@ -364,6 +370,84 @@ and open the template in the editor. text-align: center; } } +/* ============================================================ + + User Menu + + Datei : user.less + Datum : 2020-07-03 + Autor : Christine Slotty + Copyright : Gradido + + ============================================================*/ +@media screen { + .header-user { + display: flex; + justify-content: flex-end; + align-items: center; + align-content: center; + background-color: #fff; + padding: 0.75em; + border-radius: 0 0 0 18px; + z-index: 2; + } + .user-name { + display: block; + font-size: 0.8em; + font-weight: 300; + line-height: 1em; + text-align: right; + padding-right: 0.25em; + } + .user-icon { + display: block; + } + .nav-vertical.user-menu { + position: fixed; + top: 0; + right: 33px; + background-color: #fff; + margin-top: 1em; + z-index: -1; + font-size: 0.9em; + border-radius: 0 0 16px 16px; + } + .nav-vertical.user-menu > ul { + padding: 1em 2em; + margin-block-end: 0; + } + .nav-vertical.user-menu li { + padding: 0.0125em; + } + .nav-top > ul { + padding: 0; + padding-right: 2em; + } +} +@media screen and (max-width:767px) { + .header-user { + align-items: flex-start; + align-content: flex-start; + background-color: transparent; + padding: 0.75em; + z-index: 15; + } + .user-name { + display: none; + } + .nav-vertical { + margin-top: 55px; + } + .nav-vertical.user-menu { + top: 0; + right: 3px; + margin-top: 0; + } + .nav-vertical.user-menu > ul { + padding: 1em 1em; + padding-top: 2em; + } +} /* ============================================================ Navigation @@ -389,7 +473,7 @@ and open the template in the editor. display: none; } .logo.small.visible { - padding-left: 118px; + padding-left: 41px; } /* SIDEBARS @@ -428,10 +512,14 @@ and open the template in the editor. .nav-main-button.mobile { display: none; } - .nav-menu { + .nav-menu.nav-menu-maximized { width: 280px; height: 100%; } + .nav-menu.nav-menu-minimized { + width: 120px; + 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; @@ -445,7 +533,7 @@ and open the template in the editor. } .nav-menu-minimized .nav-icon, .nav-menu-minimized .nav-main-button { - padding-left: 224px; + padding-left: 72px; } /** * ---------------------------------------- @@ -460,8 +548,8 @@ and open the template in the editor. opacity: 0; } 100% { - -webkit-transform: translateX(-224px); - transform: translateX(-224px); + -webkit-transform: translateX(-74px); + transform: translateX(-74px); opacity: 1; } } @@ -472,16 +560,16 @@ and open the template in the editor. opacity: 0; } 100% { - -webkit-transform: translateX(-224px); - transform: translateX(-224px); + -webkit-transform: translateX(-74px); + transform: translateX(-74px); opacity: 1; } } /* slide-out */ @-webkit-keyframes slide-out { 0% { - -webkit-transform: translateX(-224px); - transform: translateX(-224px); + -webkit-transform: translateX(-74px); + transform: translateX(-74px); } 100% { -webkit-transform: translateX(0); @@ -490,8 +578,8 @@ and open the template in the editor. } @keyframes slide-out { 0% { - -webkit-transform: translateX(-224px); - transform: translateX(-224px); + -webkit-transform: translateX(-74px); + transform: translateX(-74px); } 100% { -webkit-transform: translateX(0); @@ -640,16 +728,14 @@ and open the template in the editor. display: block; position: fixed; top: 2px; - right: 0px; + right: 46px; z-index: 3; } - .nav-menu { + .nav-menu.nav-menu-minimized, + .nav-menu.nav-menu-maximized { width: 280px; height: 300px; } - .nav-menu-minimized .link-title { - display: inherit; - } .nav-menu-minimized .nav-icon, .nav-menu-minimized .nav-main-button { padding-left: 0; @@ -712,6 +798,12 @@ and open the template in the editor. margin-top: 55px; } } +@media screen and (max-width:767px) { + .nav-bottom p { + font-size: 0.8em; + margin-top: -10px; + } +} /* ============================================================ Notification @@ -851,7 +943,8 @@ and open the template in the editor. @media screen and (max-width:767px) { .header-notify { justify-content: flex-end; - margin-right: 70px; + margin-right: 93px; + margin-top: 8px; } } /* ============================================================ @@ -1424,113 +1517,3 @@ width: 80px; display: inline-block; } */ -/* ============================================================ - - Print styles. - - Datei : print.css - Datum : 2020-04-30 - Autor : Christine Slotty - Copyright : Gradio - - ============================================================*/ -/* --------------------------------------------------------- - Print styles - ---------------------------------------------------------*/ -@media print { - * { - color: #000 !important; - box-shadow: none !important; - text-shadow: none !important; - background: transparent !important; - } - html { - background-color: #111; - } - /* Hide navigation */ - nav { - display: none; - } - /* Show link destinations in brackets after the link text */ - a[href]:after { - content: " (" attr(href) ") "; - } - a[href] { - font-weight: bold; - text-decoration: underline; - color: #06c; - border: none; - } - /* Don't show link destinations for JavaScript or internal links */ - a[href^="javascript:"]:after, - a[href^="#"]:after { - content: ""; - } - /* Show abbr title value in brackets after the text */ - abbr[title]:after { - content: " (" attr(title) ")"; - } - figure { - margin-bottom: 1em; - overflow: hidden; - } - figure img { - border: 1px solid #000; - } -} -/* -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 : 12.07.2019, 07:59:32 - Author : einhornimmond -*/ -div[role='grd_dialog'] { - position: fixed; - width: 100%; - height: 100%; - background-color: #fff; - top: 0; - left: 0; -} -div.grd_modal-dialog { - margin-top: 100px; - min-height: 200px; - max-width: 1000px; - margin-left: auto; - margin-right: auto; - background-color: #fff; - color: #000; - border: 1px solid grey; -} -div.grd_modal-dialog.grd_dialog-large { - margin-top: 5px; - width: 90%; -} -div.grd_modal-body { - padding: 25px; -} -div.grd_modal-header { - background-color: rgba(0, 0, 0, 0.1); - padding: 5px; - padding-left: 15px; - border: 1px solid grey; - color: #000; -} -div.grd_modal-footer { - background-color: rgba(0, 0, 0, 0.1); - height: 40px; -} -.grd_modal-footer a, -.grd_modal-footer button { - float: right; - padding: 9px; - margin-right: 10px; - border: 1px solid grey; -} -.grd_modal-footer a:hover, -.grd_modal-footer button:hover { - background-color: rgba(255, 255, 255, 0.5); -} diff --git a/websrc/package.json b/websrc/package.json index 1b895c0c8..9570a5f0f 100644 --- a/websrc/package.json +++ b/websrc/package.json @@ -7,8 +7,7 @@ "watch:js": "watchify ./src/js/app.js -t [ babelify --presets [ @babel/preset-env ] ] -o ../webroot/js/app.js -v", "watch:css": "gulp watchStyles", "prebuild": "browserify ./src/js/app.js -t [ babelify --presets [ @babel/preset-env ] ] -o ./public/app.rl.js -v", - "build": "gulp compressStyles && browserify ./public/app.rl.js -g uglifyify -p bundle-collapser/plugin | uglifyjs --compress --mangle toplevel,eval > ../webroot/js/app.min.js", - "build:css": "gulp compressStyles" + "build": "gulp compressStyles && browserify ./public/app.rl.js -g uglifyify -p bundle-collapser/plugin | uglifyjs --compress --mangle toplevel,eval > ../webroot/js/app.min.js" }, "author": "Dario Rekowski", "license": "ISC", @@ -24,7 +23,7 @@ "bs58check": "^2.1.2", "bundle-collapser": "^1.3.0", "gulp": "^4.0.2", - "gulp-clean-css": "^4.2.0", + "gulp-clean-css": "^4.3.0", "gulp-concat": "^2.6.1", "gulp-less": "^4.0.1", "gulp-minify": "^3.1.0", diff --git a/websrc/src/less-files.css b/websrc/src/less-files.css index 6685d1034..06d1a6b5e 100644 --- a/websrc/src/less-files.css +++ b/websrc/src/less-files.css @@ -16,7 +16,7 @@ .layout { display: grid; grid-template-rows: [top] 6vh [line2] 86vh [footer1] 3vh [footer2] 5vh [end]; - grid-template-columns: [left1] 1fr [left2] 1fr [left3] 12fr [right3] 1fr [right2] 1fr [right1]; + grid-template-columns: [left1] auto [left2] 1fr [left3] 12fr [right3] 1fr [right2] auto [right1]; grid-template-areas: "header header header header header" "left . center . ." "footer footer footer footer footer" "bottom bottom bottom bottom bottom"; margin: 0; padding: 0; @@ -25,7 +25,7 @@ .layout { position: relative; display: grid; - grid-template-rows: [top] 12vh [line2] 86vh [footer1] 3vh [footer2] 8vh [end]; + grid-template-rows: [top] 12vh [line2] 80vh [footer1] 3vh [footer2] 8vh [end]; grid-template-columns: [left1] 100vw [right1]; grid-template-areas: "header" "center" "footer" "bottom"; margin: 0; @@ -37,6 +37,11 @@ grid-column-start: right3; grid-column-end: right2; } +.header-user { + grid-area: header; + grid-column-start: right2; + grid-column-end: right1; +} .sidebar1 { grid-area: left; grid-row-start: top; @@ -50,6 +55,7 @@ top: -300px; right: 0px; } + .header-user, .header-notify { grid-area: header; } @@ -364,6 +370,84 @@ and open the template in the editor. text-align: center; } } +/* ============================================================ + + User Menu + + Datei : user.less + Datum : 2020-07-03 + Autor : Christine Slotty + Copyright : Gradido + + ============================================================*/ +@media screen { + .header-user { + display: flex; + justify-content: flex-end; + align-items: center; + align-content: center; + background-color: #fff; + padding: 0.75em; + border-radius: 0 0 0 18px; + z-index: 2; + } + .user-name { + display: block; + font-size: 0.8em; + font-weight: 300; + line-height: 1em; + text-align: right; + padding-right: 0.25em; + } + .user-icon { + display: block; + } + .nav-vertical.user-menu { + position: fixed; + top: 0; + right: 33px; + background-color: #fff; + margin-top: 1em; + z-index: -1; + font-size: 0.9em; + border-radius: 0 0 16px 16px; + } + .nav-vertical.user-menu > ul { + padding: 1em 2em; + margin-block-end: 0; + } + .nav-vertical.user-menu li { + padding: 0.0125em; + } + .nav-top > ul { + padding: 0; + padding-right: 2em; + } +} +@media screen and (max-width:767px) { + .header-user { + align-items: flex-start; + align-content: flex-start; + background-color: transparent; + padding: 0.75em; + z-index: 15; + } + .user-name { + display: none; + } + .nav-vertical { + margin-top: 55px; + } + .nav-vertical.user-menu { + top: 0; + right: 3px; + margin-top: 0; + } + .nav-vertical.user-menu > ul { + padding: 1em 1em; + padding-top: 2em; + } +} /* ============================================================ Navigation @@ -389,7 +473,7 @@ and open the template in the editor. display: none; } .logo.small.visible { - padding-left: 118px; + padding-left: 41px; } /* SIDEBARS @@ -428,10 +512,14 @@ and open the template in the editor. .nav-main-button.mobile { display: none; } - .nav-menu { + .nav-menu.nav-menu-maximized { width: 280px; height: 100%; } + .nav-menu.nav-menu-minimized { + width: 120px; + 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; @@ -445,7 +533,7 @@ and open the template in the editor. } .nav-menu-minimized .nav-icon, .nav-menu-minimized .nav-main-button { - padding-left: 224px; + padding-left: 72px; } /** * ---------------------------------------- @@ -460,8 +548,8 @@ and open the template in the editor. opacity: 0; } 100% { - -webkit-transform: translateX(-224px); - transform: translateX(-224px); + -webkit-transform: translateX(-74px); + transform: translateX(-74px); opacity: 1; } } @@ -472,16 +560,16 @@ and open the template in the editor. opacity: 0; } 100% { - -webkit-transform: translateX(-224px); - transform: translateX(-224px); + -webkit-transform: translateX(-74px); + transform: translateX(-74px); opacity: 1; } } /* slide-out */ @-webkit-keyframes slide-out { 0% { - -webkit-transform: translateX(-224px); - transform: translateX(-224px); + -webkit-transform: translateX(-74px); + transform: translateX(-74px); } 100% { -webkit-transform: translateX(0); @@ -490,8 +578,8 @@ and open the template in the editor. } @keyframes slide-out { 0% { - -webkit-transform: translateX(-224px); - transform: translateX(-224px); + -webkit-transform: translateX(-74px); + transform: translateX(-74px); } 100% { -webkit-transform: translateX(0); @@ -640,16 +728,14 @@ and open the template in the editor. display: block; position: fixed; top: 2px; - right: 0px; + right: 46px; z-index: 3; } - .nav-menu { + .nav-menu.nav-menu-minimized, + .nav-menu.nav-menu-maximized { width: 280px; height: 300px; } - .nav-menu-minimized .link-title { - display: inherit; - } .nav-menu-minimized .nav-icon, .nav-menu-minimized .nav-main-button { padding-left: 0; @@ -712,6 +798,12 @@ and open the template in the editor. margin-top: 55px; } } +@media screen and (max-width:767px) { + .nav-bottom p { + font-size: 0.8em; + margin-top: -10px; + } +} /* ============================================================ Notification @@ -851,7 +943,8 @@ and open the template in the editor. @media screen and (max-width:767px) { .header-notify { justify-content: flex-end; - margin-right: 70px; + margin-right: 93px; + margin-top: 8px; } } /* ============================================================ @@ -1424,113 +1517,3 @@ width: 80px; display: inline-block; } */ -/* ============================================================ - - Print styles. - - Datei : print.css - Datum : 2020-04-30 - Autor : Christine Slotty - Copyright : Gradio - - ============================================================*/ -/* --------------------------------------------------------- - Print styles - ---------------------------------------------------------*/ -@media print { - * { - color: #000 !important; - box-shadow: none !important; - text-shadow: none !important; - background: transparent !important; - } - html { - background-color: #111; - } - /* Hide navigation */ - nav { - display: none; - } - /* Show link destinations in brackets after the link text */ - a[href]:after { - content: " (" attr(href) ") "; - } - a[href] { - font-weight: bold; - text-decoration: underline; - color: #06c; - border: none; - } - /* Don't show link destinations for JavaScript or internal links */ - a[href^="javascript:"]:after, - a[href^="#"]:after { - content: ""; - } - /* Show abbr title value in brackets after the text */ - abbr[title]:after { - content: " (" attr(title) ")"; - } - figure { - margin-bottom: 1em; - overflow: hidden; - } - figure img { - border: 1px solid #000; - } -} -/* -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 : 12.07.2019, 07:59:32 - Author : einhornimmond -*/ -div[role='grd_dialog'] { - position: fixed; - width: 100%; - height: 100%; - background-color: #fff; - top: 0; - left: 0; -} -div.grd_modal-dialog { - margin-top: 100px; - min-height: 200px; - max-width: 1000px; - margin-left: auto; - margin-right: auto; - background-color: #fff; - color: #000; - border: 1px solid grey; -} -div.grd_modal-dialog.grd_dialog-large { - margin-top: 5px; - width: 90%; -} -div.grd_modal-body { - padding: 25px; -} -div.grd_modal-header { - background-color: rgba(0, 0, 0, 0.1); - padding: 5px; - padding-left: 15px; - border: 1px solid grey; - color: #000; -} -div.grd_modal-footer { - background-color: rgba(0, 0, 0, 0.1); - height: 40px; -} -.grd_modal-footer a, -.grd_modal-footer button { - float: right; - padding: 9px; - margin-right: 10px; - border: 1px solid grey; -} -.grd_modal-footer a:hover, -.grd_modal-footer button:hover { - background-color: rgba(255, 255, 255, 0.5); -} diff --git a/websrc/src/less/01-layout.less b/websrc/src/less/01-layout.less index 834c58d6e..bc58357fc 100644 --- a/websrc/src/less/01-layout.less +++ b/websrc/src/less/01-layout.less @@ -24,7 +24,7 @@ .layout { display: grid; grid-template-rows: [top] 6vh [line2] 86vh [footer1] 3vh [footer2] 5vh [end]; - grid-template-columns: [left1] 1fr [left2] 1fr [left3] 12fr [right3] 1fr [right2] 1fr [right1]; + grid-template-columns: [left1] auto [left2] 1fr [left3] 12fr [right3] 1fr [right2] auto [right1]; grid-template-areas: "header header header header header" "left . center . ." "footer footer footer footer footer" @@ -37,7 +37,7 @@ .layout { position: relative; display: grid; - grid-template-rows: [top] 12vh [line2] 86vh [footer1] 3vh [footer2] 8vh [end]; + grid-template-rows: [top] 12vh [line2] 80vh [footer1] 3vh [footer2] 8vh [end]; grid-template-columns: [left1] 100vw [right1]; grid-template-areas: "header" "center" @@ -55,6 +55,12 @@ grid-column-end: right2; } +.header-user { + grid-area: header; + grid-column-start: right2; + grid-column-end: right1; +} + .sidebar1 { grid-area: left; grid-row-start: top; @@ -70,10 +76,10 @@ right: 0px; } + .header-user, .header-notify { grid-area: header; } - } .content { diff --git a/websrc/src/less/03-typography.less b/websrc/src/less/03-typography.less index 828458ba8..49a997fad 100644 --- a/websrc/src/less/03-typography.less +++ b/websrc/src/less/03-typography.less @@ -14,6 +14,7 @@ @content-letter-spacing: .03rem; @nav-fs: .8em; @nav-bottom-fs: .9em; +@nav-bottom-fs-mobile: .8em; @nav-btn-large-fs: 35px; @nav-icon-fs: 1.2em; @nav-icons-fs: 18px; diff --git a/websrc/src/less/07-user.less b/websrc/src/less/07-user.less new file mode 100644 index 000000000..887a94458 --- /dev/null +++ b/websrc/src/less/07-user.less @@ -0,0 +1,91 @@ +/* ============================================================ + + User Menu + + Datei : user.less + Datum : 2020-07-03 + Autor : Christine Slotty + Copyright : Gradido + + ============================================================*/ +@media screen { + .header-user { + display: flex; + justify-content: flex-end; + align-items: center; + align-content: center; + background-color: @container-background; + padding: .75em; + border-radius: 0 0 0 18px; + z-index: 2; + } + + .user-name { + display: block; + font-size: .8em; + font-weight: 300; + line-height: 1em; + text-align: right; + padding-right: .25em; + } + + .user-icon { + display: block; + } + + .nav-vertical.user-menu { + position: fixed; + top: 0; + right: 33px; + background-color: @container-background; + margin-top: 1em; + z-index: -1; + font-size: .9em; + border-radius: 0 0 16px 16px; + } + + .nav-vertical.user-menu > ul { + padding: 1em 2em; + margin-block-end: 0; + } + + .nav-vertical.user-menu li { + padding: .0125em; + } + + .nav-top > ul { + padding: 0; + padding-right: 2em; + } + + @media @tablet-down { + .header-user { + align-items: flex-start; + align-content: flex-start; + background-color: transparent; + padding: .75em; + z-index: 15; + } + + .user-name { + display: none; + } + + .nav-vertical { + margin-top: 55px; + } + + .nav-vertical.user-menu { + top: 0; + right: 3px; + margin-top: 0; + } + + .nav-vertical.user-menu > ul { + padding: 1em 1em; + padding-top: 2em; + } + + } + +} diff --git a/websrc/src/less/08-navi.less b/websrc/src/less/08-navi.less index 786504660..b54073741 100644 --- a/websrc/src/less/08-navi.less +++ b/websrc/src/less/08-navi.less @@ -26,7 +26,7 @@ } .logo.small.visible { - padding-left: 118px; + padding-left: 41px; } /* @@ -72,11 +72,16 @@ display: none; } - .nav-menu { + .nav-menu.nav-menu-maximized { width: 280px; height: 100%; } + .nav-menu.nav-menu-minimized { + width: 120px; + 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; @@ -93,7 +98,7 @@ .nav-menu-minimized .nav-icon, .nav-menu-minimized .nav-main-button { - padding-left: 224px; + padding-left: 72px; } /** @@ -111,8 +116,8 @@ } 100% { - -webkit-transform: translateX(-224px); - transform: translateX(-224px); + -webkit-transform: translateX(-74px); + transform: translateX(-74px); opacity: 1; } @@ -126,8 +131,8 @@ } 100% { - -webkit-transform: translateX(-224px); - transform: translateX(-224px); + -webkit-transform: translateX(-74px); + transform: translateX(-74px); opacity: 1; } @@ -136,8 +141,8 @@ /* slide-out */ @-webkit-keyframes slide-out { 0% { - -webkit-transform: translateX(-224px); - transform: translateX(-224px); + -webkit-transform: translateX(-74px); + transform: translateX(-74px); } 100% { @@ -149,8 +154,8 @@ @keyframes slide-out { 0% { - -webkit-transform: translateX(-224px); - transform: translateX(-224px); + -webkit-transform: translateX(-74px); + transform: translateX(-74px); } 100% { @@ -195,19 +200,20 @@ display: block; position: fixed; top: 2px; - right: 0px; + right: 46px; z-index: 3; } - .nav-menu { + .nav-menu.nav-menu-minimized, + .nav-menu.nav-menu-maximized { width: 280px; height: 300px; } - .nav-menu-minimized .link-title { - display: inherit; - } - + /* .nav-menu-minimized .link-title { + display: inherit; + } + */ .nav-menu-minimized .nav-icon, .nav-menu-minimized .nav-main-button { padding-left: 0; @@ -388,15 +394,20 @@ margin: 0; } + @media @tablet-down { + .nav-bottom p { + font-size: @nav-bottom-fs-mobile; + margin-top: -10px; + } + + } + nav { &.grd-left-bar { position: fixed; top: 80.5px; } - &.grd-left-bar-section { - } - .grd-nav-bn { width: 100px; } @@ -436,10 +447,4 @@ text-decoration: none; } - .grd-nav-bn-succeed { - } - - .grd-nav-bn-discard { - } - } diff --git a/websrc/src/less/09-notification.less b/websrc/src/less/09-notification.less index 9f1b501b7..a9bf74c0a 100644 --- a/websrc/src/less/09-notification.less +++ b/websrc/src/less/09-notification.less @@ -21,7 +21,8 @@ @media @tablet-down { .header-notify { justify-content: flex-end; - margin-right: 70px; + margin-right: 93px; + margin-top: 8px; } }