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;
+
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;
}
}