mirror of
https://github.com/IT4Change/gradido.git
synced 2025-12-13 07:45:54 +00:00
Navi Layout pretty much done
This commit is contained in:
Christine Slotty
parent
5c1f88a9dc
commit
f424aa246a
@ -58,8 +58,9 @@ class NaviEntry extends NaviEntryBase {
|
||||
);
|
||||
} else {
|
||||
return $self->Html->Link(
|
||||
'<i class="material-icons-outlined ' . $this->iconColor .'">'. $this->iconClass .'</i>'.
|
||||
'<span class="link-title">' . $this->title . '</span>',
|
||||
'<i class="material-icons-outlined nav-icon ' . $this->iconColor
|
||||
.'" title="' . $this->title . '">'. $this->iconClass .'</i>'
|
||||
.'<span class="link-title">' . $this->title . '</span>',
|
||||
['controller' => $this->controller, 'action' => $this->action, $this->param],
|
||||
['class' => $this->bgColorClass, 'escape' => false]);
|
||||
}
|
||||
|
||||
@ -55,7 +55,8 @@ class NaviEntryAbsoluteLink extends NaviEntryBase
|
||||
);
|
||||
} else {
|
||||
return '<a href="' . Router::url('./', true). $this->link.'" class="' .$this->bgColorClass .'" >'
|
||||
. '<i class="material-icons-outlined ' . $this->iconColor .'">'. $this->iconClass .'</i>'
|
||||
.'<i class="material-icons-outlined nav-icon ' . $this->iconColor
|
||||
.'" title="' . $this->title . '">'. $this->iconClass .'</i>'
|
||||
. '<span class="link-title">' . $this->title . '</span>'
|
||||
. '</a>';
|
||||
}
|
||||
|
||||
@ -18,7 +18,8 @@ class NaviEntryExternLink extends NaviEntryAbsoluteLink
|
||||
$self = $GLOBALS["self"];
|
||||
|
||||
return '<a href="'.$this->link.'" class="' .$this->bgColorClass .'" target="_blank">'
|
||||
. '<i class="material-icons-outlined ' . $this->iconColor .'">'. $this->iconClass .'</i>'
|
||||
.'<i class="material-icons-outlined nav-icon ' . $this->iconColor
|
||||
.'" title="' . $this->title . '">'. $this->iconClass .'</i>'
|
||||
. '<span class="link-title">' . $this->title . '</span>'
|
||||
. '</a>';
|
||||
}
|
||||
|
||||
@ -65,7 +65,8 @@ class NaviEntrySub extends NaviEntryBase
|
||||
return $self->Html->Link(
|
||||
''
|
||||
.'<span class="link-title">' . $this->title . '</span>'
|
||||
.'<i class="material-icons-outlined ' . $this->iconColor .'">'. $this->iconClass .'</i>',
|
||||
.'<i class="material-icons-outlined nav-icon ' . $this->iconColor
|
||||
.'" title="' . $this->title . '">'. $this->iconClass .'</i>',
|
||||
['controller' => $this->controller, 'action' => $this->action, $this->param],
|
||||
['class' => $this->bgColorClass, 'escape' => false]
|
||||
);
|
||||
|
||||
@ -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 ) {
|
||||
|
||||
@ -42,65 +42,63 @@ $GLOBALS["self"] = $this;
|
||||
</head>
|
||||
<body>
|
||||
<div class="layout">
|
||||
<div class="header">
|
||||
<a href="/">
|
||||
<picture class="logo">
|
||||
<source srcset="/img/logo_schrift_half.webp" type="image/webp">
|
||||
<source srcset="/img/logo_schrift_half.png" type="image/png">
|
||||
<img src="/img/logo_schrift_half.png" class="logo" alt="Logo">
|
||||
</picture>
|
||||
<!--picture class="logo-mini">
|
||||
<source srcset="/img/logo_half.webp" type="image/webp">
|
||||
<source srcset="/img/logo_half.png" type="image/png">
|
||||
<img src="/img/logo_half.png" class="logo-mini" alt="Logo">
|
||||
</picture-->
|
||||
</a>
|
||||
<!--div class="header">
|
||||
<h1><?= $this->fetch('title') ?></h1>
|
||||
<nav class="nav-top nav-horizontal">
|
||||
<ul>
|
||||
<li>Mein Profil</li>
|
||||
</ul>
|
||||
</nav>
|
||||
</div>
|
||||
<div class="sidebar1">
|
||||
</div-->
|
||||
<!-- TODO save last state so that it remains unchanged, on reload! -->
|
||||
<div class="sidebar1 nav-menu nav-menu-maximized">
|
||||
<a href="/">
|
||||
<picture class="logo big visible">
|
||||
<source srcset="/img/logo_schrift_half.webp" type="image/webp">
|
||||
<source srcset="/img/logo_schrift_half.png" type="image/png">
|
||||
<img src="/img/logo_schrift_half.png" class="logo big visible" alt="Logo">
|
||||
</picture>
|
||||
<picture class="logo small">
|
||||
<source srcset="/img/logo_half.webp" type="image/webp">
|
||||
<source srcset="/img/logo_half.png" type="image/png">
|
||||
<img src="/img/logo_half.png" class="logo small" alt="Logo">
|
||||
</picture>
|
||||
</a>
|
||||
<div>
|
||||
<div class="sidebar1-header">
|
||||
<i class="material-icons-outlined nav-main-button">menu</i>
|
||||
<i class="mdi mdi-menu"></i>
|
||||
</div>
|
||||
<!--div class="sidebar1-header">
|
||||
<div class="flash-messages">
|
||||
<?= $this->Flash->render() ?>
|
||||
</div>
|
||||
<?= $this->element('navi_header'); ?>
|
||||
</div>
|
||||
</div-->
|
||||
<div class="nav-vertical">
|
||||
<?= $this->element('navi'); ?>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="content">
|
||||
<?= $this->Html->link(__('Startseite'), ['controller' => 'Dashboard']); ?>
|
||||
<?= $this->fetch('content') ?>
|
||||
</div>
|
||||
<div class="sidebar2">
|
||||
<p><?= __("Community Server in Entwicklung") ?></p>
|
||||
<p>Alpha 0.21.KW21.05</p>
|
||||
</div>
|
||||
<div class="bottomleft">
|
||||
<?php if(isset($timeUsed)) : ?>
|
||||
<p class="grd-time-used">
|
||||
<?=round($timeUsed * 1000.0, 4)?> ms
|
||||
</p>
|
||||
<?php endif; ?>
|
||||
</div>
|
||||
<div class="nav-bottom">
|
||||
<small class="">Copyright © 2020 Gradido</small>
|
||||
</div>
|
||||
<div class="footer nav-horizontal">
|
||||
<ul>
|
||||
<div class="footer">
|
||||
<ul class="nav-horizontal">
|
||||
<li><a href="https://gradido.net/de/datenschutz/" target="_blank"><?= __("Datenschutzerklärung") ?></a></li>
|
||||
<li><a href="https://gradido.net/de/impressum/" target="_blank"><?= __("Impressum") ?></a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="nav-bottom">
|
||||
<small class="">Copyright © 2020 Gradido</small>
|
||||
</div>
|
||||
<div class="bottomleft">
|
||||
<?php if(isset($timeUsed)) : ?>
|
||||
<?=round($timeUsed * 1000.0, 4)?> ms
|
||||
<?php endif; ?>
|
||||
</div>
|
||||
<div class="bottomright">
|
||||
<p><?= __("Community Server in Entwicklung") ?></p>
|
||||
<p>Alpha 0.21.KW21.05</p>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
@ -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
|
||||
|
||||
@ -73,7 +73,7 @@ el.onclick = function() {
|
||||
//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');
|
||||
|
||||
@ -81,8 +81,18 @@ el.onclick = function() {
|
||||
if(DesktopToggler) {
|
||||
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');
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
|
||||
@ -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
|
||||
|
||||
@ -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;
|
||||
}
|
||||
|
||||
@ -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) ??? */
|
||||
|
||||
@ -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%;
|
||||
|
||||
|
||||
@ -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;
|
||||
}
|
||||
|
||||
/* =======================
|
||||
|
||||
@ -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 {
|
||||
|
||||
@ -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 {
|
||||
|
||||
@ -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;
|
||||
}
|
||||
Loading…
x
Reference in New Issue
Block a user