IT4Change/gradido
3
0
Fork 0
mirror of https://github.com/IT4Change/gradido.git synced 2025-12-13 07:45:54 +00:00
Code Issues Packages Projects Releases Wiki Activity

Navi Layout pretty much done

Browse Source
This commit is contained in:
Christine Slotty 2020-05-27 18:02:01 +02:00
parent 5c1f88a9dc
commit f424aa246a
16 changed files with 548 additions and 280 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
src/Model/Navigation/NaviEntry.php
View File

@ -58,8 +58,9 @@ class NaviEntry extends NaviEntryBase {
); );
} else { } else {
return $self->Html->Link( return $self->Html->Link(
'<i class="material-icons-outlined ' . $this->iconColor .'">'. $this->iconClass .'</i>'. '<i class="material-icons-outlined nav-icon ' . $this->iconColor
'<span class="link-title">' . $this->title . '</span>', .'" title="' . $this->title . '">'. $this->iconClass .'</i>'
.'<span class="link-title">' . $this->title . '</span>',
['controller' => $this->controller, 'action' => $this->action, $this->param], ['controller' => $this->controller, 'action' => $this->action, $this->param],
['class' => $this->bgColorClass, 'escape' => false]); ['class' => $this->bgColorClass, 'escape' => false]);
} }

3
src/Model/Navigation/NaviEntryAbsoluteLink.php
View File

@ -55,7 +55,8 @@ class NaviEntryAbsoluteLink extends NaviEntryBase
); );
} else { } else {
return '<a href="' . Router::url('./', true). $this->link.'" class="' .$this->bgColorClass .'" >' 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>' . '<span class="link-title">' . $this->title . '</span>'
. '</a>'; . '</a>';
} }

3
src/Model/Navigation/NaviEntryExternLink.php
View File

@ -18,7 +18,8 @@ class NaviEntryExternLink extends NaviEntryAbsoluteLink
$self = $GLOBALS["self"]; $self = $GLOBALS["self"];
return '<a href="'.$this->link.'" class="' .$this->bgColorClass .'" target="_blank">' 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>' . '<span class="link-title">' . $this->title . '</span>'
. '</a>'; . '</a>';
} }

3
src/Model/Navigation/NaviEntrySub.php
View File

@ -65,7 +65,8 @@ class NaviEntrySub extends NaviEntryBase
return $self->Html->Link( return $self->Html->Link(
'' ''
.'<span class="link-title">' . $this->title . '</span>' .'<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], ['controller' => $this->controller, 'action' => $this->action, $this->param],
['class' => $this->bgColorClass, 'escape' => false] ['class' => $this->bgColorClass, 'escape' => false]
); );

4
src/Template/Element/navi.ctp
View File

@ -21,7 +21,9 @@ $navi = [];
array_push($navi, $errorNaviEntry); array_push($navi, $errorNaviEntry);
}*/ }*/
$balanceNaviEntry = new NaviEntry( $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' 'account_balance_wallet', 'StateBalances', 'overview'
); );
if($balance < 0 ) { if($balance < 0 ) {

68
src/Template/Layout/frontend_ripple.ctp
View File

@ -42,65 +42,63 @@ $GLOBALS["self"] = $this;
</head> </head>
<body> <body>
<div class="layout"> <div class="layout">
<div class="header"> <!--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>
<h1><?= $this->fetch('title') ?></h1> <h1><?= $this->fetch('title') ?></h1>
<nav class="nav-top nav-horizontal"> <nav class="nav-top nav-horizontal">
<ul> <ul>
<li>Mein Profil</li> <li>Mein Profil</li>
</ul> </ul>
</nav> </nav>
</div> </div-->
<div class="sidebar1"> <!-- 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>
<div class="sidebar1-header">
<i class="material-icons-outlined nav-main-button">menu</i> <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"> <div class="flash-messages">
<?= $this->Flash->render() ?> <?= $this->Flash->render() ?>
</div> </div>
<?= $this->element('navi_header'); ?> <?= $this->element('navi_header'); ?>
</div> </div-->
<div class="nav-vertical"> <div class="nav-vertical">
<?= $this->element('navi'); ?> <?= $this->element('navi'); ?>
</div> </div>
</div> </div>
</div>
<div class="content"> <div class="content">
<?= $this->Html->link(__('Startseite'), ['controller' => 'Dashboard']); ?> <?= $this->Html->link(__('Startseite'), ['controller' => 'Dashboard']); ?>
<?= $this->fetch('content') ?> <?= $this->fetch('content') ?>
</div> </div>
<div class="sidebar2"> <div class="footer">
<p><?= __("Community Server in Entwicklung") ?></p> <ul class="nav-horizontal">
<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>
<li><a href="https://gradido.net/de/datenschutz/" target="_blank"><?= __("Datenschutzerklärung") ?></a></li> <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> <li><a href="https://gradido.net/de/impressum/" target="_blank"><?= __("Impressum") ?></a></li>
</ul> </ul>
</div> </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> </div>
</body> </body>
</html> </html>

218
webroot/css/grd_styles.css
View File

@ -12,32 +12,28 @@
/* GRID */ /* GRID */
.layout { .layout {
display: grid; display: grid;
grid-template-rows: 12vh 70vh 10vh 5vh; grid-template-rows: [top] 8vh [line2] 80vh [footer1] 7vh [footer2] 5vh [end];
grid-template-columns: 1fr 6fr 1fr; grid-template-columns: [left1] 1fr [left2] 1fr [left3] 6fr [right3] 1fr [right2] 1fr [right1];
/*grid-gap: .25em;*/ grid-template-areas: "header header header header header" "left . center center center" "footer footer footer footer footer" "bottom bottom bottom bottom bottom";
grid-template-areas: "topleft topcenter topright" "navleft center navright" "bottomleft bottomcenter bottomright";
margin: 0; margin: 0;
padding: 0; padding: 0;
} }
.header, /*.header {
.footer { grid-area: header;
grid-column-start: 1; }*/
grid-column-end: 4;
}
.sidebar1 { .sidebar1 {
grid-area: navleft; grid-area: left;
grid-row-start: top;
grid-row-end: end;
} }
.content { .content {
grid-area: center; grid-area: center;
} }
.sidebar2 { .footer {
grid-area: navright; grid-area: footer;
}
.bottomleft {
grid-area: bottomleft;
} }
.nav-bottom { .nav-bottom {
grid-area: bottomcenter; grid-area: bottom;
} }
/* ============================================================ /* ============================================================
@ -92,28 +88,40 @@
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
align-items: center; align-items: center;
flex: flex-grow;
width: 100%; width: 100%;
padding: 1em; padding: 1em;
background-color: #fff; background-color: #fff;
} }
.header img {
vertical-align: middle;
width: 150px;
}
/* ======================= /* =======================
Fußbereich Fußbereich
=======================*/ =======================*/
.footer { .footer {
display: flex; display: flex;
justify-content: center; flex-direction: column;
justify-content: flex-start;
align-items: center; align-items: center;
padding-top: 10px;
font-size: 70%; font-size: 70%;
font-style: italic; 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 { .bottomleft {
background-color: #fff; position: fixed;
vertical-align: bottom; bottom: 0;
left: 0;
color: grey;
font-size: smaller;
line-height: 1.125em;
padding-left: 0.25em;
} }
/* ======================= /* =======================
Gradido Gradido
@ -195,49 +203,108 @@
Copyright : Gradio Copyright : Gradio
============================================================*/ ============================================================*/
/* TODO
dropdown
subnav
text-muted
block-btn (?)
caret (?)
-> für Kinder
*/
@media screen { @media screen {
/* /*
SIDEBARS SIDEBARS
*/ */
.sidebar1,
.sidebar2 {
padding: 1em;
}
.sidebar1 { .sidebar1 {
color: #4F4F4F;
background-color: #fff; background-color: #fff;
font-weight: 500; font-weight: 500;
line-height: 2.5em; line-height: 2.5em;
padding: 0;
border-right: 1px solid #f2f4f5;
} }
.sidebar2 { .sidebar2 {
padding: 1em;
background-color: #f9fafb; background-color: #f9fafb;
} }
.nav-icon {
font-size: 1.2em;
padding-right: 1em;
color: grey;
}
.sidebar1-header { .sidebar1-header {
font-size: 0.75em; font-size: 0.75em;
font-style: italic; font-style: italic;
color: grey; color: grey;
} }
/* navbar */ /* set general icons size here! */
.material-icons-outlined { .nav-icon {
font-size: 18px !important; font-size: 18px !important;
color: #4F4F4F;
vertical-align: middle; vertical-align: middle;
padding-right: 1em; padding-right: 1em;
} }
/* important! order matters! we need to overwrite the main button's size here */
.nav-main-button { .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 { .selected {
color: #047006; color: #047006;
@ -247,16 +314,19 @@
line-height: normal; line-height: normal;
background-color: transparent; background-color: transparent;
} }
.nav-horizontal > ul { .nav-horizontal {
display: flex; display: flex;
flex-direction: row; flex-direction: row;
flex-wrap: nowrap; flex-wrap: nowrap;
justify-content: center; justify-content: center;
align-items: baseline; align-items: flex-end;
list-style-type: none; list-style-type: none;
gap: 5%; gap: 5%;
padding: 1em; padding: 1em;
} }
.nav-vertical {
margin-top: -2em;
}
.nav-horizontal li { .nav-horizontal li {
padding: 0.5em; padding: 0.5em;
} }
@ -280,8 +350,6 @@
justify-content: center; justify-content: center;
align-items: center; align-items: center;
list-style-type: none; list-style-type: none;
gap: 5%;
padding: 1em;
} }
.nav-bottom p { .nav-bottom p {
font-size: 0.9em; font-size: 0.9em;
@ -324,6 +392,29 @@
text-decoration: none; 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. Screen styles for center part.
@ -337,14 +428,17 @@
@media screen { @media screen {
.content { .content {
display: flex; display: flex;
justify-content: center; justify-content: flex-start;
flex-direction: column; flex-direction: column;
overflow: auto; overflow: auto;
line-height: 1.5em; line-height: 1.5em;
padding: 1.5em;
background-color: #f9fafb; background-color: #f9fafb;
width: 70%; width: 100%;
margin: auto; letter-spacing: 0.03rem;
font-family: Roboto, sans-serif;
font-weight: 500;
font-size: 1rem;
padding-top: 5em;
} }
/* content container */ /* content container */
.grd_container { .grd_container {
@ -364,7 +458,7 @@
max-width: 550px; max-width: 550px;
} }
} }
@media screen and (max-width:619px) { @media screen and (max-width:639px) {
.content { .content {
flex-direction: column; 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 To change this template file, choose Tools | Templates
and open the template in the editor. 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 Created on : 30.10.2019, 16:04:16
Author : einhornimmond Author : einhornimmond

14
webroot/js/basic.js
View File

@ -73,7 +73,7 @@ el.onclick = function() {
//document.querySelector('#page').style.background = 'blue'; //document.querySelector('#page').style.background = 'blue';
//var Body = $("body"); //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 MobileToggler = document.querySelector('.t-header-mobile-toggler');
var HeaderToggle = document.querySelector('.t-header-toggler'); var HeaderToggle = document.querySelector('.t-header-toggler');
@ -81,8 +81,18 @@ el.onclick = function() {
if(DesktopToggler) { if(DesktopToggler) {
DesktopToggler.addEventListener('click', function () DesktopToggler.addEventListener('click', function ()
{ {
console.log('toggler clicked / Desktop');
//$(Body).toggleClass("sidebar-minimized"); //$(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');
});
}); });
} }

218
websrc/src/less-files.css
View File

@ -12,32 +12,28 @@
/* GRID */ /* GRID */
.layout { .layout {
display: grid; display: grid;
grid-template-rows: 12vh 70vh 10vh 5vh; grid-template-rows: [top] 8vh [line2] 80vh [footer1] 7vh [footer2] 5vh [end];
grid-template-columns: 1fr 6fr 1fr; grid-template-columns: [left1] 1fr [left2] 1fr [left3] 6fr [right3] 1fr [right2] 1fr [right1];
/*grid-gap: .25em;*/ grid-template-areas: "header header header header header" "left . center center center" "footer footer footer footer footer" "bottom bottom bottom bottom bottom";
grid-template-areas: "topleft topcenter topright" "navleft center navright" "bottomleft bottomcenter bottomright";
margin: 0; margin: 0;
padding: 0; padding: 0;
} }
.header, /*.header {
.footer { grid-area: header;
grid-column-start: 1; }*/
grid-column-end: 4;
}
.sidebar1 { .sidebar1 {
grid-area: navleft; grid-area: left;
grid-row-start: top;
grid-row-end: end;
} }
.content { .content {
grid-area: center; grid-area: center;
} }
.sidebar2 { .footer {
grid-area: navright; grid-area: footer;
}
.bottomleft {
grid-area: bottomleft;
} }
.nav-bottom { .nav-bottom {
grid-area: bottomcenter; grid-area: bottom;
} }
/* ============================================================ /* ============================================================
@ -92,28 +88,40 @@
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
align-items: center; align-items: center;
flex: flex-grow;
width: 100%; width: 100%;
padding: 1em; padding: 1em;
background-color: #fff; background-color: #fff;
} }
.header img {
vertical-align: middle;
width: 150px;
}
/* ======================= /* =======================
Fußbereich Fußbereich
=======================*/ =======================*/
.footer { .footer {
display: flex; display: flex;
justify-content: center; flex-direction: column;
justify-content: flex-start;
align-items: center; align-items: center;
padding-top: 10px;
font-size: 70%; font-size: 70%;
font-style: italic; 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 { .bottomleft {
background-color: #fff; position: fixed;
vertical-align: bottom; bottom: 0;
left: 0;
color: grey;
font-size: smaller;
line-height: 1.125em;
padding-left: 0.25em;
} }
/* ======================= /* =======================
Gradido Gradido
@ -195,49 +203,108 @@
Copyright : Gradio Copyright : Gradio
============================================================*/ ============================================================*/
/* TODO
dropdown
subnav
text-muted
block-btn (?)
caret (?)
-> für Kinder
*/
@media screen { @media screen {
/* /*
SIDEBARS SIDEBARS
*/ */
.sidebar1,
.sidebar2 {
padding: 1em;
}
.sidebar1 { .sidebar1 {
color: #4F4F4F;
background-color: #fff; background-color: #fff;
font-weight: 500; font-weight: 500;
line-height: 2.5em; line-height: 2.5em;
padding: 0;
border-right: 1px solid #f2f4f5;
} }
.sidebar2 { .sidebar2 {
padding: 1em;
background-color: #f9fafb; background-color: #f9fafb;
} }
.nav-icon {
font-size: 1.2em;
padding-right: 1em;
color: grey;
}
.sidebar1-header { .sidebar1-header {
font-size: 0.75em; font-size: 0.75em;
font-style: italic; font-style: italic;
color: grey; color: grey;
} }
/* navbar */ /* set general icons size here! */
.material-icons-outlined { .nav-icon {
font-size: 18px !important; font-size: 18px !important;
color: #4F4F4F;
vertical-align: middle; vertical-align: middle;
padding-right: 1em; padding-right: 1em;
} }
/* important! order matters! we need to overwrite the main button's size here */
.nav-main-button { .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 { .selected {
color: #047006; color: #047006;
@ -247,16 +314,19 @@
line-height: normal; line-height: normal;
background-color: transparent; background-color: transparent;
} }
.nav-horizontal > ul { .nav-horizontal {
display: flex; display: flex;
flex-direction: row; flex-direction: row;
flex-wrap: nowrap; flex-wrap: nowrap;
justify-content: center; justify-content: center;
align-items: baseline; align-items: flex-end;
list-style-type: none; list-style-type: none;
gap: 5%; gap: 5%;
padding: 1em; padding: 1em;
} }
.nav-vertical {
margin-top: -2em;
}
.nav-horizontal li { .nav-horizontal li {
padding: 0.5em; padding: 0.5em;
} }
@ -280,8 +350,6 @@
justify-content: center; justify-content: center;
align-items: center; align-items: center;
list-style-type: none; list-style-type: none;
gap: 5%;
padding: 1em;
} }
.nav-bottom p { .nav-bottom p {
font-size: 0.9em; font-size: 0.9em;
@ -324,6 +392,29 @@
text-decoration: none; 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. Screen styles for center part.
@ -337,14 +428,17 @@
@media screen { @media screen {
.content { .content {
display: flex; display: flex;
justify-content: center; justify-content: flex-start;
flex-direction: column; flex-direction: column;
overflow: auto; overflow: auto;
line-height: 1.5em; line-height: 1.5em;
padding: 1.5em;
background-color: #f9fafb; background-color: #f9fafb;
width: 70%; width: 100%;
margin: auto; letter-spacing: 0.03rem;
font-family: Roboto, sans-serif;
font-weight: 500;
font-size: 1rem;
padding-top: 5em;
} }
/* content container */ /* content container */
.grd_container { .grd_container {
@ -364,7 +458,7 @@
max-width: 550px; max-width: 550px;
} }
} }
@media screen and (max-width:619px) { @media screen and (max-width:639px) {
.content { .content {
flex-direction: column; 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 To change this template file, choose Tools | Templates
and open the template in the editor. 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 Created on : 30.10.2019, 16:04:16
Author : einhornimmond Author : einhornimmond

36
websrc/src/less/01-layout.less
View File

@ -10,42 +10,40 @@
============================================================*/ ============================================================*/
/* BREAKPOINTS */ /* BREAKPOINTS */
@maxMobile: ~"(max-width:619px)"; @maxMobile: ~"(max-width:639px)";
@minDesktop: ~"(min-width:640px)";
/* GRID */ /* GRID */
.layout { .layout {
display: grid; display: grid;
grid-template-rows: 12vh 70vh 10vh 5vh; grid-template-rows: [top] 8vh [line2] 80vh [footer1] 7vh [footer2] 5vh [end];
grid-template-columns: 1fr 6fr 1fr; /*grid-gap: .25em;*/ grid-template-columns: [left1] 1fr [left2] 1fr [left3] 6fr [right3] 1fr [right2] 1fr [right1];
grid-template-areas: "topleft topcenter topright" grid-template-areas: "header header header header header"
"navleft center navright" "left . center center center"
"bottomleft bottomcenter bottomright"; "footer footer footer footer footer"
"bottom bottom bottom bottom bottom";
margin: 0; margin: 0;
padding: 0; padding: 0;
} }
.header, /*.header {
.footer { grid-area: header;
grid-column-start: 1; }*/
grid-column-end: 4;
}
.sidebar1 { .sidebar1 {
grid-area: navleft; grid-area: left;
grid-row-start: top;
grid-row-end: end;
} }
.content { .content {
grid-area: center; grid-area: center;
} }
.sidebar2 { .footer {
grid-area: navright; grid-area: footer;
}
.bottomleft {
grid-area: bottomleft;
} }
.nav-bottom { .nav-bottom {
grid-area: bottomcenter; grid-area: bottom;
} }

1
websrc/src/less/02-colors.less
View File

@ -16,6 +16,7 @@
@menu-background: #fff; @menu-background: #fff;
@menu-link-text: #4F4F4F; @menu-link-text: #4F4F4F;
@menu-link-selected: #047006; @menu-link-selected: #047006;
@menu-border-color: #f2f4f5;
@dialog-background: #fff; @dialog-background: #fff;
/*rgba(0, 0, 0, 0.5) ??? */ /*rgba(0, 0, 0, 0.5) ??? */

2
websrc/src/less/03-typography.less
View File

@ -19,7 +19,7 @@
@nav-btn-large-fs: 35px; @nav-btn-large-fs: 35px;
@nav-icon-fs: 1.2em; @nav-icon-fs: 1.2em;
@nav-icons-fs: 18px; @nav-icons-fs: 18px;
@nav-icon-main-fs: 24px; @nav-icon-main-fs: 32px;
@footer-fs: 70%; @footer-fs: 70%;

30
websrc/src/less/05-screen.less
View File

@ -31,31 +31,43 @@
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
align-items: center; align-items: center;
flex: flex-grow;
width: 100%; width: 100%;
padding: 1em; padding: 1em;
background-color: @menu-background; background-color: @menu-background;
} }
.header img {
vertical-align: middle;
width: 150px;
}
/* ======================= /* =======================
Fußbereich Fußbereich
=======================*/ =======================*/
.footer { .footer {
display: flex; display: flex;
justify-content: center; flex-direction: column;
justify-content: flex-start;
align-items: center; align-items: center;
padding-top: 10px;
font-size: @footer-fs; font-size: @footer-fs;
font-style: italic; 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 { .bottomleft {
background-color: @menu-background; position: fixed;
vertical-align: bottom; bottom: 0;
left: 0;
color: @unobtrusive;
font-size: @devinfo-fs;
line-height: 1.125em;
padding-left: 0.25em;
} }
/* ======================= /* =======================

162
websrc/src/less/08-navi.less
View File

@ -8,60 +8,160 @@
Copyright : Gradio Copyright : Gradio
============================================================*/ ============================================================*/
/* TODO
dropdown
subnav
text-muted
block-btn (?)
caret (?)
-> für Kinder
*/
@media screen { @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 SIDEBARS
*/ */
.sidebar1,
.sidebar2 {
padding: 1em;
}
.sidebar1 { .sidebar1 {
color: @menu-link-text;
background-color: @menu-background; background-color: @menu-background;
font-weight: 500; font-weight: 500;
line-height: @sidebar1-lh; line-height: @sidebar1-lh;
padding: 0;
border-right: 1px solid @menu-border-color;
} }
.sidebar2 { .sidebar2 {
padding: 1em;
background-color: @main-background; background-color: @main-background;
} }
.nav-icon {
font-size: @nav-icon-fs;
padding-right: 1em;
color: @unobtrusive;
}
.sidebar1-header { .sidebar1-header {
font-size: @sidebar1-header-fs; font-size: @sidebar1-header-fs;
font-style: italic; font-style: italic;
color: @unobtrusive; color: @unobtrusive;
} }
@media @maxMobile { /* set general icons size here! */
} .nav-icon {
/* navbar */
.material-icons-outlined {
font-size: @nav-icons-fs !important; font-size: @nav-icons-fs !important;
color: @menu-link-text;
vertical-align: middle; vertical-align: middle;
padding-right: 1em; padding-right: 1em;
} }
/* important! order matters! we need to overwrite the main button's size here */
.nav-main-button { .nav-main-button {
font-size: @nav-icon-main-fs !important; 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 { .selected {
@ -74,17 +174,21 @@
background-color: transparent; background-color: transparent;
} }
.nav-horizontal > ul { .nav-horizontal {
display: flex; display: flex;
flex-direction: row; flex-direction: row;
flex-wrap: nowrap; flex-wrap: nowrap;
justify-content: center; justify-content: center;
align-items: baseline; align-items: flex-end;
list-style-type: none; list-style-type: none;
gap: 5%; gap: 5%;
padding: 1em; padding: 1em;
} }
.nav-vertical {
margin-top: -2em;
}
.nav-horizontal li { .nav-horizontal li {
padding: .5em; padding: .5em;
} }
@ -112,8 +216,6 @@
justify-content: center; justify-content: center;
align-items: center; align-items: center;
list-style-type: none; list-style-type: none;
gap: 5%;
padding: 1em;
} }
.nav-bottom p { .nav-bottom p {

11
websrc/src/less/10-center.less
View File

@ -11,14 +11,17 @@
@media screen { @media screen {
.content { .content {
display: flex; display: flex;
justify-content: center; justify-content: flex-start;
flex-direction: column; flex-direction: column;
overflow: auto; overflow: auto;
line-height: @content-lh; line-height: @content-lh;
padding: 1.5em;
background-color: @main-background; background-color: @main-background;
width: 70%; width: 100%;
margin: auto; letter-spacing: .03rem;
font-family: Roboto, sans-serif;
font-weight: 500;
font-size: 1rem;
padding-top: 5em;
} }
@media @maxMobile { @media @maxMobile {

18
websrc/src/less/loginServer.less
View File

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