mirror of
https://github.com/IT4Change/gradido.git
synced 2025-12-13 07:45:54 +00:00
start profile
This commit is contained in:
Christine Slotty
parent
235fd6285f
commit
ceffc923f2
4
.gitignore
vendored
4
.gitignore
vendored
@ -4,3 +4,7 @@ src/GPBMetadata/
|
||||
tmp/
|
||||
vendor/
|
||||
composer.lock
|
||||
websrc/node_modules/
|
||||
websrc/gulpfile.js
|
||||
websrc/package-lock.json
|
||||
mithril_client/
|
||||
|
||||
@ -1 +1 @@
|
||||
Subproject commit 21d4a0a5e9a19f251e26c0ae07ce74be2fa99bbf
|
||||
Subproject commit a04d4769974b9d93ba72e490ed7dca3fbaed768c
|
||||
23
src/Template/Element/user_menu.ctp
Normal file
23
src/Template/Element/user_menu.ctp
Normal file
@ -0,0 +1,23 @@
|
||||
<?php
|
||||
/*
|
||||
* 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.
|
||||
*/
|
||||
use Model\Navigation\NaviEntry;
|
||||
$session = $this->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'));
|
||||
?>
|
||||
<span class="user-name">
|
||||
<?=$user['first_name'].' '.$user['last_name']?>
|
||||
</span>
|
||||
<i class="material-icons-outlined user-icon">account_circle</i>
|
||||
<div id="user-menu-id" class="nav-vertical user-menu">
|
||||
<ul>
|
||||
<?php foreach($navi as $n) echo $n; ?>
|
||||
</ul>
|
||||
</div>
|
||||
@ -40,6 +40,9 @@ $GLOBALS["self"] = $this;
|
||||
<div class="header-notify">
|
||||
<?= $this->element('navi_notify'); ?>
|
||||
</div>
|
||||
<div class="header-user">
|
||||
<?= $this->element('user_menu'); ?>
|
||||
</div>
|
||||
<div>
|
||||
<i id="nav-action-mobile" class="material-icons-outlined nav-main-button mobile">menu</i>
|
||||
</div>
|
||||
@ -94,7 +97,7 @@ $GLOBALS["self"] = $this;
|
||||
</ul>
|
||||
</div>
|
||||
<div class="nav-bottom">
|
||||
<small class="">Copyright © 2020 Gradido</small>
|
||||
<p>Copyright © 2020 Gradido</p>
|
||||
</div>
|
||||
<div class="bottomleft">
|
||||
<?php if(isset($timeUsed)) : ?>
|
||||
|
||||
@ -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);
|
||||
}
|
||||
|
||||
@ -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",
|
||||
|
||||
@ -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);
|
||||
}
|
||||
|
||||
@ -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 {
|
||||
|
||||
@ -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;
|
||||
|
||||
91
websrc/src/less/07-user.less
Normal file
91
websrc/src/less/07-user.less
Normal file
@ -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;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
@ -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 {
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
@ -21,7 +21,8 @@
|
||||
@media @tablet-down {
|
||||
.header-notify {
|
||||
justify-content: flex-end;
|
||||
margin-right: 70px;
|
||||
margin-right: 93px;
|
||||
margin-top: 8px;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user