mirror of
https://github.com/IT4Change/gradido.git
synced 2025-12-13 07:45:54 +00:00
mobile (WIP)
This commit is contained in:
Christine Slotty
parent
150ea986c9
commit
80b368fe3b
@ -40,6 +40,14 @@ $GLOBALS["self"] = $this;
|
||||
<div class="header-notify">
|
||||
<?= $this->element('navi_notify'); ?>
|
||||
</div>
|
||||
<div>
|
||||
<i id="nav-action-mobile" class="material-icons-outlined nav-main-button mobile">menu</i>
|
||||
</div>
|
||||
<picture class="logo mobile">
|
||||
<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" alt="Logo">
|
||||
</picture>
|
||||
<div class="sidebar1 nav-menu initial">
|
||||
<!-- TODO save last sidebar state so that it remains unchanged, on reload! -->
|
||||
<a href="/">
|
||||
@ -55,7 +63,7 @@ $GLOBALS["self"] = $this;
|
||||
</picture>
|
||||
</a>
|
||||
<div>
|
||||
<i class="material-icons-outlined nav-main-button">menu</i>
|
||||
<i id="nav-action" class="material-icons-outlined nav-main-button">menu</i>
|
||||
</div>
|
||||
<div class="nav-vertical">
|
||||
<ul>
|
||||
|
||||
@ -16,11 +16,22 @@
|
||||
.layout {
|
||||
display: grid;
|
||||
grid-template-rows: [top] 6vh [line2] 86vh [footer1] 3vh [footer2] 5vh [end];
|
||||
grid-template-columns: [left1] 1fr [left2] 1fr [left3] 8fr [right3] 1fr [right2] 1fr [right1];
|
||||
grid-template-columns: [left1] 1fr [left2] 1fr [left3] 12fr [right3] 1fr [right2] 1fr [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;
|
||||
}
|
||||
@media (max-width:767px) {
|
||||
.layout {
|
||||
position: relative;
|
||||
display: grid;
|
||||
grid-template-rows: [top] 12vh [line2] 86vh [footer1] 3vh [footer2] 8vh [end];
|
||||
grid-template-columns: [left1] 100vw [right1];
|
||||
grid-template-areas: "header" "center" "footer" "bottom";
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
}
|
||||
.header-notify {
|
||||
grid-area: header;
|
||||
grid-column-start: right3;
|
||||
@ -31,6 +42,15 @@
|
||||
grid-row-start: top;
|
||||
grid-row-end: end;
|
||||
}
|
||||
@media (max-width:767px) {
|
||||
.sidebar1 {
|
||||
position: relative;
|
||||
grid-area: header;
|
||||
z-index: 2;
|
||||
top: -300px;
|
||||
right: 0px;
|
||||
}
|
||||
}
|
||||
.content {
|
||||
grid-area: center;
|
||||
grid-row-start: line2;
|
||||
@ -203,7 +223,7 @@
|
||||
right: 0;
|
||||
color: grey;
|
||||
font-size: smaller;
|
||||
line-height: 1.125em;
|
||||
line-height: 0.125em;
|
||||
padding-right: 0.25em;
|
||||
text-align: right;
|
||||
}
|
||||
@ -252,6 +272,20 @@
|
||||
color: grey;
|
||||
}
|
||||
}
|
||||
@media screen and (max-width:767px) {
|
||||
.bottomright {
|
||||
font-size: 0.7em;
|
||||
font-weight: 300;
|
||||
line-height: 1em;
|
||||
width: 100px;
|
||||
}
|
||||
.bottomright p {
|
||||
margin-block-start: 0;
|
||||
margin-block-end: 2px;
|
||||
margin-inline-start: 0;
|
||||
margin-inline-end: 0;
|
||||
}
|
||||
}
|
||||
/* Ende @media screen */
|
||||
/*
|
||||
To change this license header, choose License Headers in Project Properties.
|
||||
@ -340,6 +374,9 @@ and open the template in the editor.
|
||||
.logo.small.visible {
|
||||
display: block !important;
|
||||
}
|
||||
.logo.mobile {
|
||||
display: none;
|
||||
}
|
||||
.logo.small.visible {
|
||||
padding-left: 118px;
|
||||
}
|
||||
@ -376,6 +413,10 @@ and open the template in the editor.
|
||||
color: grey;
|
||||
margin: 0.3em;
|
||||
}
|
||||
/* Hide mobile menu button! */
|
||||
.nav-main-button.mobile {
|
||||
display: none;
|
||||
}
|
||||
.nav-menu {
|
||||
width: 280px;
|
||||
height: 100%;
|
||||
@ -446,6 +487,10 @@ and open the template in the editor.
|
||||
transform: translateX(0);
|
||||
}
|
||||
}
|
||||
/*
|
||||
NAVI MOBILE
|
||||
*/
|
||||
/* END navi mobile base */
|
||||
.selected {
|
||||
color: #047006;
|
||||
}
|
||||
@ -557,12 +602,103 @@ and open the template in the editor.
|
||||
text-decoration: none;
|
||||
}
|
||||
}
|
||||
@media screen and (max-width:480px) {
|
||||
.logo.big {
|
||||
@media screen and (max-width:767px) {
|
||||
.logo.big,
|
||||
.logo.small {
|
||||
display: none;
|
||||
}
|
||||
.logo.small {
|
||||
.logo.visible {
|
||||
padding: 0 !important;
|
||||
}
|
||||
.logo,
|
||||
.logo.mobile,
|
||||
.logo.mobile.visible {
|
||||
display: block;
|
||||
position: fixed;
|
||||
top: 12px;
|
||||
left: 12px;
|
||||
}
|
||||
.logo.big,
|
||||
.logo.big.visible {
|
||||
display: none !important;
|
||||
}
|
||||
.nav-main-button {
|
||||
display: none;
|
||||
}
|
||||
.nav-main-button.mobile {
|
||||
display: block;
|
||||
position: fixed;
|
||||
top: 2px;
|
||||
right: 0px;
|
||||
z-index: 3;
|
||||
}
|
||||
.nav-menu {
|
||||
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;
|
||||
}
|
||||
.nav-menu-maximized {
|
||||
-webkit-animation: slide-down 0.1s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
|
||||
animation: slide-down 0.1s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
|
||||
}
|
||||
.nav-menu-minimized {
|
||||
-webkit-animation: slide-up 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
|
||||
animation: slide-up 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
|
||||
}
|
||||
@-webkit-keyframes slide-down {
|
||||
0% {
|
||||
-webkit-transform: translateY(0);
|
||||
transform: translateY(0);
|
||||
opacity: 0;
|
||||
}
|
||||
100% {
|
||||
-webkit-transform: translateY(300px);
|
||||
transform: translateX(300px);
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
@keyframes slide-down {
|
||||
0% {
|
||||
-webkit-transform: translateY(0);
|
||||
transform: translateY(0);
|
||||
opacity: 0;
|
||||
}
|
||||
100% {
|
||||
-webkit-transform: translateY(300px);
|
||||
transform: translateY(300px);
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
@-webkit-keyframes slide-up {
|
||||
0% {
|
||||
-webkit-transform: translateY(0);
|
||||
transform: translateY(0);
|
||||
}
|
||||
100% {
|
||||
-webkit-transform: translateY(-300px);
|
||||
transform: translateY(-300px);
|
||||
}
|
||||
}
|
||||
@keyframes slide-up {
|
||||
0% {
|
||||
-webkit-transform: translateY(0);
|
||||
transform: translateY(0);
|
||||
}
|
||||
100% {
|
||||
-webkit-transform: translateY(-300px);
|
||||
transform: translateY(-300px);
|
||||
}
|
||||
}
|
||||
}
|
||||
@media screen and (max-width:767px) {
|
||||
.nav-vertical {
|
||||
margin-top: 55px;
|
||||
}
|
||||
}
|
||||
/* ============================================================
|
||||
@ -834,9 +970,34 @@ and open the template in the editor.
|
||||
vertical-align: middle;
|
||||
}
|
||||
}
|
||||
@media screen and (max-width:480px) {
|
||||
.content {
|
||||
@media screen and (max-width:767px) {
|
||||
.nav-content-list {
|
||||
display: flex;
|
||||
font-size: small;
|
||||
margin-bottom: 0;
|
||||
justify-content: center;
|
||||
}
|
||||
}
|
||||
@media screen and (max-width:767px) {
|
||||
.info-container {
|
||||
max-width: 90%;
|
||||
}
|
||||
}
|
||||
@media screen and (max-width:767px) {
|
||||
.main-container {
|
||||
max-width: 100%;
|
||||
}
|
||||
}
|
||||
@media screen and (max-width:767px) {
|
||||
.content-collection {
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
}
|
||||
.content-item {
|
||||
margin: 0.5em 0;
|
||||
margin-right: 0;
|
||||
width: 160px;
|
||||
padding: 1em 2em;
|
||||
}
|
||||
}
|
||||
/* Ende @media screen */
|
||||
@ -966,7 +1127,7 @@ and open the template in the editor.
|
||||
vertical-align: middle;
|
||||
}
|
||||
/* =====================================
|
||||
FORM TOP CONTENT (checkTransaction)
|
||||
FORM TOP CONTENT (checkTransaction)
|
||||
=====================================*/
|
||||
.form-content {
|
||||
padding: 35px;
|
||||
@ -1001,6 +1162,31 @@ and open the template in the editor.
|
||||
font-size: 1.25em;
|
||||
}
|
||||
}
|
||||
@media screen and (max-width:767px) {
|
||||
.row {
|
||||
flex-direction: column;
|
||||
}
|
||||
}
|
||||
@media screen and (max-width:767px) {
|
||||
.cell {
|
||||
padding: 0.25em 1.5em;
|
||||
}
|
||||
.c1 {
|
||||
flex-basis: auto;
|
||||
}
|
||||
.c2 {
|
||||
flex-basis: auto;
|
||||
}
|
||||
.c3 {
|
||||
flex-basis: auto;
|
||||
}
|
||||
.c4 {
|
||||
flex-basis: auto;
|
||||
}
|
||||
.c5 {
|
||||
flex-basis: auto;
|
||||
}
|
||||
}
|
||||
/*
|
||||
To change this license header, choose License Headers in Project Properties.
|
||||
To change this template file, choose Tools | Templates
|
||||
|
||||
@ -1,102 +1,116 @@
|
||||
// cross browser dom is ready module from:
|
||||
// https://www.competa.com/blog/cross-browser-document-ready-with-vanilla-javascript/
|
||||
var domIsReady = (function(domIsReady) {
|
||||
var isBrowserIeOrNot = function() {
|
||||
return (!document.attachEvent || typeof document.attachEvent === "undefined" ? 'not-ie' : 'ie');
|
||||
}
|
||||
var isBrowserIeOrNot = function() {
|
||||
return (!document.attachEvent || typeof document.attachEvent === "undefined" ? 'not-ie' : 'ie');
|
||||
}
|
||||
|
||||
domIsReady = function(callback) {
|
||||
if(callback && typeof callback === 'function'){
|
||||
if(isBrowserIeOrNot() !== 'ie') {
|
||||
document.addEventListener("DOMContentLoaded", function() {
|
||||
return callback();
|
||||
});
|
||||
} else {
|
||||
document.attachEvent("onreadystatechange", function() {
|
||||
if(document.readyState === "complete") {
|
||||
return callback();
|
||||
}
|
||||
});
|
||||
}
|
||||
} else {
|
||||
console.error('The callback is not a function!');
|
||||
}
|
||||
}
|
||||
domIsReady = function(callback) {
|
||||
if (callback && typeof callback === 'function') {
|
||||
if (isBrowserIeOrNot() !== 'ie') {
|
||||
document.addEventListener("DOMContentLoaded", function() {
|
||||
return callback();
|
||||
});
|
||||
} else {
|
||||
document.attachEvent("onreadystatechange", function() {
|
||||
if (document.readyState === "complete") {
|
||||
return callback();
|
||||
}
|
||||
});
|
||||
}
|
||||
} else {
|
||||
console.error('The callback is not a function!');
|
||||
}
|
||||
}
|
||||
|
||||
return domIsReady;
|
||||
return domIsReady;
|
||||
})(domIsReady || {});
|
||||
|
||||
|
||||
// vanilla ajax request, json get
|
||||
function getJson(basisUrl, method, successFunction, errorFunction, timeoutFunction) {
|
||||
var xhr = new XMLHttpRequest();
|
||||
var xhr = new XMLHttpRequest();
|
||||
|
||||
xhr.onload = function(e) {
|
||||
var xhr = e.target;
|
||||
//console.log(xhr);
|
||||
var jsonReturn = [];
|
||||
if (xhr.responseType === 'json') {
|
||||
jsonReturn = xhr.response;
|
||||
} else {
|
||||
jsonReturn = JSON.parse(xhr.responseText);
|
||||
xhr.onload = function(e) {
|
||||
var xhr = e.target;
|
||||
//console.log(xhr);
|
||||
var jsonReturn = [];
|
||||
if (xhr.responseType === 'json') {
|
||||
jsonReturn = xhr.response;
|
||||
} else {
|
||||
jsonReturn = JSON.parse(xhr.responseText);
|
||||
}
|
||||
successFunction(jsonReturn);
|
||||
}
|
||||
xhr.onerror = function(e) {
|
||||
errorFunction(e);
|
||||
}
|
||||
xhr.ontimeout = function(e) {
|
||||
timeoutFunction(e);
|
||||
}
|
||||
successFunction(jsonReturn);
|
||||
}
|
||||
xhr.onerror = function(e) {
|
||||
errorFunction(e);
|
||||
}
|
||||
xhr.ontimeout = function(e) {
|
||||
timeoutFunction(e);
|
||||
}
|
||||
|
||||
var bustCache = '&' + new Date().getTime();
|
||||
//oReq.open('GET', e.target.dataset.url + bustCache, true);
|
||||
xhr.open('GET', basisUrl + '?method='+method + bustCache, true);
|
||||
xhr.setRequestHeader('X-Requested-With', 'XMLHttpRequest');
|
||||
xhr.responseType = 'json';
|
||||
xhr.send();
|
||||
var bustCache = '&' + new Date().getTime();
|
||||
//oReq.open('GET', e.target.dataset.url + bustCache, true);
|
||||
xhr.open('GET', basisUrl + '?method=' + method + bustCache, true);
|
||||
xhr.setRequestHeader('X-Requested-With', 'XMLHttpRequest');
|
||||
xhr.responseType = 'json';
|
||||
xhr.send();
|
||||
}
|
||||
|
||||
// cross browser dom is ready
|
||||
(function(document, window, domIsReady, undefined) {
|
||||
domIsReady(function() {
|
||||
var DesktopToggler = document.querySelector('.nav-main-button');
|
||||
var MobileToggler = document.querySelector('.t-header-mobile-toggler');
|
||||
var HeaderToggle = document.querySelector('.t-header-toggler');
|
||||
domIsReady(function() {
|
||||
var DesktopToggler = document.querySelector('#nav-action');
|
||||
var MobileToggler = document.querySelector('#nav-action-mobile');
|
||||
var HeaderToggle = document.querySelector('.t-header-toggler');
|
||||
|
||||
// SIDEBAR TOGGLE FUNCTION FOR LARGE SCREENS (SCREEN "LG" AND UP)
|
||||
if(DesktopToggler) {
|
||||
DesktopToggler.addEventListener('click', function ()
|
||||
{
|
||||
console.log('toggler clicked / Desktop');
|
||||
if(document.querySelector('.nav-menu').classList.contains('initial')){
|
||||
document.querySelector('.nav-menu').classList.remove('initial');
|
||||
document.querySelector('.nav-menu').classList.add('nav-menu-minimized');
|
||||
} else {
|
||||
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');
|
||||
});
|
||||
});
|
||||
}
|
||||
// SIDEBAR TOGGLE FUNCTION FOR LARGE SCREENS (SCREEN "LG" AND UP)
|
||||
if (DesktopToggler) {
|
||||
DesktopToggler.addEventListener('click', function() {
|
||||
console.log('toggler clicked / Desktop');
|
||||
if (document.querySelector('.nav-menu').classList.contains('initial')) {
|
||||
document.querySelector('.nav-menu').classList.remove('initial');
|
||||
document.querySelector('.nav-menu').classList.add('nav-menu-minimized');
|
||||
} else {
|
||||
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');
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
// SIDEBAR TOGGLE FUNCTION FOR MOBILE (SCREEN "MD" AND DOWN)
|
||||
if(MobileToggler) {
|
||||
MobileToggler.addEventListener('click', function () {
|
||||
document.querySelector('.page-body').classList.toggle('sidebar-collpased');
|
||||
});
|
||||
}
|
||||
if(HeaderToggle) {
|
||||
HeaderToggle.addEventListener('click', function () {
|
||||
HeaderToggle.classList.toggle('arrow');
|
||||
});
|
||||
}
|
||||
});
|
||||
// SIDEBAR TOGGLE FUNCTION FOR MOBILE (SCREEN "MD" AND DOWN)
|
||||
if (MobileToggler) {
|
||||
MobileToggler.addEventListener('click', function() {
|
||||
console.log('toggler clicked / Desktop');
|
||||
if (document.querySelector('.nav-menu').classList.contains('initial')) {
|
||||
document.querySelector('.nav-menu').classList.remove('initial');
|
||||
document.querySelector('.nav-menu').classList.toggle('nav-menu-maximized');
|
||||
} else {
|
||||
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');
|
||||
});
|
||||
});
|
||||
}
|
||||
if (HeaderToggle) {
|
||||
HeaderToggle.addEventListener('click', function() {
|
||||
HeaderToggle.classList.toggle('arrow');
|
||||
});
|
||||
}
|
||||
});
|
||||
})(document, window, domIsReady);
|
||||
@ -16,11 +16,22 @@
|
||||
.layout {
|
||||
display: grid;
|
||||
grid-template-rows: [top] 6vh [line2] 86vh [footer1] 3vh [footer2] 5vh [end];
|
||||
grid-template-columns: [left1] 1fr [left2] 1fr [left3] 8fr [right3] 1fr [right2] 1fr [right1];
|
||||
grid-template-columns: [left1] 1fr [left2] 1fr [left3] 12fr [right3] 1fr [right2] 1fr [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;
|
||||
}
|
||||
@media (max-width:767px) {
|
||||
.layout {
|
||||
position: relative;
|
||||
display: grid;
|
||||
grid-template-rows: [top] 12vh [line2] 86vh [footer1] 3vh [footer2] 8vh [end];
|
||||
grid-template-columns: [left1] 100vw [right1];
|
||||
grid-template-areas: "header" "center" "footer" "bottom";
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
}
|
||||
.header-notify {
|
||||
grid-area: header;
|
||||
grid-column-start: right3;
|
||||
@ -31,6 +42,15 @@
|
||||
grid-row-start: top;
|
||||
grid-row-end: end;
|
||||
}
|
||||
@media (max-width:767px) {
|
||||
.sidebar1 {
|
||||
position: relative;
|
||||
grid-area: header;
|
||||
z-index: 2;
|
||||
top: -300px;
|
||||
right: 0px;
|
||||
}
|
||||
}
|
||||
.content {
|
||||
grid-area: center;
|
||||
grid-row-start: line2;
|
||||
@ -203,7 +223,7 @@
|
||||
right: 0;
|
||||
color: grey;
|
||||
font-size: smaller;
|
||||
line-height: 1.125em;
|
||||
line-height: 0.125em;
|
||||
padding-right: 0.25em;
|
||||
text-align: right;
|
||||
}
|
||||
@ -252,6 +272,20 @@
|
||||
color: grey;
|
||||
}
|
||||
}
|
||||
@media screen and (max-width:767px) {
|
||||
.bottomright {
|
||||
font-size: 0.7em;
|
||||
font-weight: 300;
|
||||
line-height: 1em;
|
||||
width: 100px;
|
||||
}
|
||||
.bottomright p {
|
||||
margin-block-start: 0;
|
||||
margin-block-end: 2px;
|
||||
margin-inline-start: 0;
|
||||
margin-inline-end: 0;
|
||||
}
|
||||
}
|
||||
/* Ende @media screen */
|
||||
/*
|
||||
To change this license header, choose License Headers in Project Properties.
|
||||
@ -340,6 +374,9 @@ and open the template in the editor.
|
||||
.logo.small.visible {
|
||||
display: block !important;
|
||||
}
|
||||
.logo.mobile {
|
||||
display: none;
|
||||
}
|
||||
.logo.small.visible {
|
||||
padding-left: 118px;
|
||||
}
|
||||
@ -376,6 +413,10 @@ and open the template in the editor.
|
||||
color: grey;
|
||||
margin: 0.3em;
|
||||
}
|
||||
/* Hide mobile menu button! */
|
||||
.nav-main-button.mobile {
|
||||
display: none;
|
||||
}
|
||||
.nav-menu {
|
||||
width: 280px;
|
||||
height: 100%;
|
||||
@ -446,6 +487,10 @@ and open the template in the editor.
|
||||
transform: translateX(0);
|
||||
}
|
||||
}
|
||||
/*
|
||||
NAVI MOBILE
|
||||
*/
|
||||
/* END navi mobile base */
|
||||
.selected {
|
||||
color: #047006;
|
||||
}
|
||||
@ -557,12 +602,103 @@ and open the template in the editor.
|
||||
text-decoration: none;
|
||||
}
|
||||
}
|
||||
@media screen and (max-width:480px) {
|
||||
.logo.big {
|
||||
@media screen and (max-width:767px) {
|
||||
.logo.big,
|
||||
.logo.small {
|
||||
display: none;
|
||||
}
|
||||
.logo.small {
|
||||
.logo.visible {
|
||||
padding: 0 !important;
|
||||
}
|
||||
.logo,
|
||||
.logo.mobile,
|
||||
.logo.mobile.visible {
|
||||
display: block;
|
||||
position: fixed;
|
||||
top: 12px;
|
||||
left: 12px;
|
||||
}
|
||||
.logo.big,
|
||||
.logo.big.visible {
|
||||
display: none !important;
|
||||
}
|
||||
.nav-main-button {
|
||||
display: none;
|
||||
}
|
||||
.nav-main-button.mobile {
|
||||
display: block;
|
||||
position: fixed;
|
||||
top: 2px;
|
||||
right: 0px;
|
||||
z-index: 3;
|
||||
}
|
||||
.nav-menu {
|
||||
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;
|
||||
}
|
||||
.nav-menu-maximized {
|
||||
-webkit-animation: slide-down 0.1s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
|
||||
animation: slide-down 0.1s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
|
||||
}
|
||||
.nav-menu-minimized {
|
||||
-webkit-animation: slide-up 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
|
||||
animation: slide-up 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
|
||||
}
|
||||
@-webkit-keyframes slide-down {
|
||||
0% {
|
||||
-webkit-transform: translateY(0);
|
||||
transform: translateY(0);
|
||||
opacity: 0;
|
||||
}
|
||||
100% {
|
||||
-webkit-transform: translateY(300px);
|
||||
transform: translateX(300px);
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
@keyframes slide-down {
|
||||
0% {
|
||||
-webkit-transform: translateY(0);
|
||||
transform: translateY(0);
|
||||
opacity: 0;
|
||||
}
|
||||
100% {
|
||||
-webkit-transform: translateY(300px);
|
||||
transform: translateY(300px);
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
@-webkit-keyframes slide-up {
|
||||
0% {
|
||||
-webkit-transform: translateY(0);
|
||||
transform: translateY(0);
|
||||
}
|
||||
100% {
|
||||
-webkit-transform: translateY(-300px);
|
||||
transform: translateY(-300px);
|
||||
}
|
||||
}
|
||||
@keyframes slide-up {
|
||||
0% {
|
||||
-webkit-transform: translateY(0);
|
||||
transform: translateY(0);
|
||||
}
|
||||
100% {
|
||||
-webkit-transform: translateY(-300px);
|
||||
transform: translateY(-300px);
|
||||
}
|
||||
}
|
||||
}
|
||||
@media screen and (max-width:767px) {
|
||||
.nav-vertical {
|
||||
margin-top: 55px;
|
||||
}
|
||||
}
|
||||
/* ============================================================
|
||||
@ -834,9 +970,34 @@ and open the template in the editor.
|
||||
vertical-align: middle;
|
||||
}
|
||||
}
|
||||
@media screen and (max-width:480px) {
|
||||
.content {
|
||||
@media screen and (max-width:767px) {
|
||||
.nav-content-list {
|
||||
display: flex;
|
||||
font-size: small;
|
||||
margin-bottom: 0;
|
||||
justify-content: center;
|
||||
}
|
||||
}
|
||||
@media screen and (max-width:767px) {
|
||||
.info-container {
|
||||
max-width: 90%;
|
||||
}
|
||||
}
|
||||
@media screen and (max-width:767px) {
|
||||
.main-container {
|
||||
max-width: 100%;
|
||||
}
|
||||
}
|
||||
@media screen and (max-width:767px) {
|
||||
.content-collection {
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
}
|
||||
.content-item {
|
||||
margin: 0.5em 0;
|
||||
margin-right: 0;
|
||||
width: 160px;
|
||||
padding: 1em 2em;
|
||||
}
|
||||
}
|
||||
/* Ende @media screen */
|
||||
@ -966,7 +1127,7 @@ and open the template in the editor.
|
||||
vertical-align: middle;
|
||||
}
|
||||
/* =====================================
|
||||
FORM TOP CONTENT (checkTransaction)
|
||||
FORM TOP CONTENT (checkTransaction)
|
||||
=====================================*/
|
||||
.form-content {
|
||||
padding: 35px;
|
||||
@ -1001,6 +1162,31 @@ and open the template in the editor.
|
||||
font-size: 1.25em;
|
||||
}
|
||||
}
|
||||
@media screen and (max-width:767px) {
|
||||
.row {
|
||||
flex-direction: column;
|
||||
}
|
||||
}
|
||||
@media screen and (max-width:767px) {
|
||||
.cell {
|
||||
padding: 0.25em 1.5em;
|
||||
}
|
||||
.c1 {
|
||||
flex-basis: auto;
|
||||
}
|
||||
.c2 {
|
||||
flex-basis: auto;
|
||||
}
|
||||
.c3 {
|
||||
flex-basis: auto;
|
||||
}
|
||||
.c4 {
|
||||
flex-basis: auto;
|
||||
}
|
||||
.c5 {
|
||||
flex-basis: auto;
|
||||
}
|
||||
}
|
||||
/*
|
||||
To change this license header, choose License Headers in Project Properties.
|
||||
To change this template file, choose Tools | Templates
|
||||
|
||||
@ -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] 8fr [right3] 1fr [right2] 1fr [right1];
|
||||
grid-template-columns: [left1] 1fr [left2] 1fr [left3] 12fr [right3] 1fr [right2] 1fr [right1];
|
||||
grid-template-areas: "header header header header header"
|
||||
"left . center . ."
|
||||
"footer footer footer footer footer"
|
||||
@ -33,6 +33,22 @@
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
@media @tablet-down {
|
||||
.layout {
|
||||
position: relative;
|
||||
display: grid;
|
||||
grid-template-rows: [top] 12vh [line2] 86vh [footer1] 3vh [footer2] 8vh [end];
|
||||
grid-template-columns: [left1] 100vw [right1];
|
||||
grid-template-areas: "header"
|
||||
"center"
|
||||
"footer"
|
||||
"bottom";
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.header-notify {
|
||||
grid-area: header;
|
||||
grid-column-start: right3;
|
||||
@ -45,6 +61,17 @@
|
||||
grid-row-end: end;
|
||||
}
|
||||
|
||||
@media @tablet-down {
|
||||
.sidebar1 {
|
||||
position: relative;
|
||||
grid-area: header;
|
||||
z-index: 2;
|
||||
top: -300px;
|
||||
right: 0px;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.content {
|
||||
grid-area: center;
|
||||
grid-row-start: line2;
|
||||
|
||||
@ -23,6 +23,7 @@
|
||||
@sidebar1-lh: 2.5em;
|
||||
@link-title-lh: normal;
|
||||
@devinfo-fs: smaller;
|
||||
@devinfo-fs-mobile: .7em;
|
||||
|
||||
.small-font {
|
||||
font-size: .75em;
|
||||
|
||||
@ -81,11 +81,28 @@
|
||||
right: 0;
|
||||
color: @unobtrusive;
|
||||
font-size: @devinfo-fs;
|
||||
line-height: 1.125em;
|
||||
padding-right: 0.25em;
|
||||
line-height: .125em;
|
||||
padding-right: .25em;
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
@media @tablet-down {
|
||||
.bottomright {
|
||||
font-size: @devinfo-fs-mobile;
|
||||
font-weight: 300;
|
||||
line-height: 1em;
|
||||
width: 100px;
|
||||
}
|
||||
|
||||
.bottomright p {
|
||||
margin-block-start: 0;
|
||||
margin-block-end: 2px;
|
||||
margin-inline-start: 0;
|
||||
margin-inline-end: 0;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.bottomleft {
|
||||
position: fixed;
|
||||
bottom: 0;
|
||||
|
||||
@ -21,19 +21,12 @@
|
||||
display: block !important;
|
||||
}
|
||||
|
||||
.logo.small.visible {
|
||||
padding-left: 118px;
|
||||
.logo.mobile {
|
||||
display: none;
|
||||
}
|
||||
|
||||
@media @phone-down {
|
||||
.logo.big {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.logo.small {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.logo.small.visible {
|
||||
padding-left: 118px;
|
||||
}
|
||||
|
||||
/*
|
||||
@ -74,6 +67,11 @@
|
||||
margin: .3em;
|
||||
}
|
||||
|
||||
/* Hide mobile menu button! */
|
||||
.nav-main-button.mobile {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.nav-menu {
|
||||
width: 280px;
|
||||
height: 100%;
|
||||
@ -162,6 +160,137 @@
|
||||
|
||||
}
|
||||
|
||||
/*
|
||||
NAVI MOBILE
|
||||
*/
|
||||
@media @tablet-down {
|
||||
.logo.big,
|
||||
.logo.small {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.logo.visible {
|
||||
padding: 0 !important;
|
||||
}
|
||||
|
||||
.logo,
|
||||
.logo.mobile,
|
||||
.logo.mobile.visible {
|
||||
display: block;
|
||||
position: fixed;
|
||||
top: 12px;
|
||||
left: 12px;
|
||||
}
|
||||
|
||||
.logo.big,
|
||||
.logo.big.visible {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
.nav-main-button {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.nav-main-button.mobile {
|
||||
display: block;
|
||||
position: fixed;
|
||||
top: 2px;
|
||||
right: 0px;
|
||||
z-index: 3;
|
||||
}
|
||||
|
||||
.nav-menu {
|
||||
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;
|
||||
}
|
||||
|
||||
/* Here we "revert' maximized / minimized and change the animation */
|
||||
.nav-menu-maximized {
|
||||
-webkit-animation: slide-down 0.1s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
|
||||
animation: slide-down 0.1s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
|
||||
}
|
||||
|
||||
.nav-menu-minimized {
|
||||
-webkit-animation: slide-up 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
|
||||
animation: slide-up 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
|
||||
}
|
||||
|
||||
/**
|
||||
* ----------------------------------------
|
||||
* animations slide-down / slide-up
|
||||
* ----------------------------------------
|
||||
*/
|
||||
|
||||
/* slide-down */
|
||||
@-webkit-keyframes slide-down {
|
||||
0% {
|
||||
-webkit-transform: translateY(0);
|
||||
transform: translateY(0);
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
100% {
|
||||
-webkit-transform: translateY(300px);
|
||||
transform: translateX(300px);
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
@keyframes slide-down {
|
||||
0% {
|
||||
-webkit-transform: translateY(0);
|
||||
transform: translateY(0);
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
100% {
|
||||
-webkit-transform: translateY(300px);
|
||||
transform: translateY(300px);
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
/* slide-up */
|
||||
@-webkit-keyframes slide-up {
|
||||
0% {
|
||||
-webkit-transform: translateY(0);
|
||||
transform: translateY(0);
|
||||
}
|
||||
|
||||
100% {
|
||||
-webkit-transform: translateY(-300px);
|
||||
transform: translateY(-300px);
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
@keyframes slide-up {
|
||||
0% {
|
||||
-webkit-transform: translateY(0);
|
||||
transform: translateY(0);
|
||||
}
|
||||
|
||||
100% {
|
||||
-webkit-transform: translateY(-300px);
|
||||
transform: translateY(-300px);
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
/* END navi mobile base */
|
||||
.selected {
|
||||
color: @menu-link-selected;
|
||||
}
|
||||
@ -238,6 +367,13 @@
|
||||
padding-right: 2em;
|
||||
}
|
||||
|
||||
@media @tablet-down {
|
||||
.nav-vertical {
|
||||
margin-top: 55px;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.nav-bottom {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
@ -252,9 +388,6 @@
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
@media @phone-down {
|
||||
}
|
||||
|
||||
nav {
|
||||
&.grd-left-bar {
|
||||
position: fixed;
|
||||
|
||||
@ -35,10 +35,11 @@
|
||||
}
|
||||
|
||||
@media @phone-down {
|
||||
.content {
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
/* .content {
|
||||
flex-direction: column;
|
||||
}
|
||||
*/
|
||||
}
|
||||
|
||||
/* Center Navigation Top */
|
||||
@ -59,6 +60,16 @@
|
||||
margin: 0 1em;
|
||||
}
|
||||
|
||||
@media @tablet-down {
|
||||
.nav-content-list {
|
||||
display: flex;
|
||||
font-size: small;
|
||||
margin-bottom: 0;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
/* Center Content Container */
|
||||
.content-container {
|
||||
background-color: @container-background;
|
||||
@ -81,11 +92,25 @@
|
||||
padding: .5em 25px;
|
||||
}
|
||||
|
||||
@media @tablet-down {
|
||||
.info-container {
|
||||
max-width: 90%;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
/* Main Container */
|
||||
.main-container {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
@media @tablet-down {
|
||||
.main-container {
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.default-container {
|
||||
width: 90%;
|
||||
margin: auto;
|
||||
@ -147,6 +172,21 @@
|
||||
border-left: 2px solid @info-item-border;
|
||||
}
|
||||
|
||||
@media @tablet-down {
|
||||
.content-collection {
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.content-item {
|
||||
margin: .5em 0;
|
||||
margin-right: 0;
|
||||
width: 160px;
|
||||
padding: 1em 2em;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
/* OTHER */
|
||||
.info-item i,
|
||||
.info-item-link,
|
||||
|
||||
@ -43,6 +43,13 @@
|
||||
transition-duration: .5s;
|
||||
}
|
||||
|
||||
@media @tablet-down {
|
||||
.row {
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.row:hover {
|
||||
background-color: #f6f7f9;
|
||||
}
|
||||
@ -91,6 +98,33 @@
|
||||
flex: 0 0 320px;
|
||||
}
|
||||
|
||||
@media @tablet-down {
|
||||
.cell {
|
||||
padding: .25em 1.5em;
|
||||
}
|
||||
|
||||
.c1 {
|
||||
flex-basis: auto;
|
||||
}
|
||||
|
||||
.c2 {
|
||||
flex-basis: auto;
|
||||
}
|
||||
|
||||
.c3 {
|
||||
flex-basis: auto;
|
||||
}
|
||||
|
||||
.c4 {
|
||||
flex-basis: auto;
|
||||
}
|
||||
|
||||
.c5 {
|
||||
flex-basis: auto;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.header-cell {
|
||||
border-top: 1px solid @content-table-header-border;
|
||||
background-color: @content-table-header-bg;
|
||||
@ -151,7 +185,7 @@
|
||||
}
|
||||
|
||||
/* =====================================
|
||||
FORM TOP CONTENT (checkTransaction)
|
||||
FORM TOP CONTENT (checkTransaction)
|
||||
=====================================*/
|
||||
.form-content {
|
||||
padding: 35px;
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user