From 80b368fe3bb681c2031e201ece3347716001563f Mon Sep 17 00:00:00 2001 From: Christine Slotty Date: Fri, 19 Jun 2020 13:59:38 +0200 Subject: [PATCH] mobile (WIP) --- src/Template/Layout/frontend.ctp | 10 +- webroot/css/grd_styles.css | 202 +++++++++++++++++++++++++++-- webroot/js/basic.js | 178 +++++++++++++------------ websrc/src/less-files.css | 202 +++++++++++++++++++++++++++-- websrc/src/less/01-layout.less | 29 ++++- websrc/src/less/03-typography.less | 1 + websrc/src/less/05-screen.less | 21 ++- websrc/src/less/08-navi.less | 161 +++++++++++++++++++++-- websrc/src/less/10-center.less | 46 ++++++- websrc/src/less/20-list.less | 36 ++++- 10 files changed, 766 insertions(+), 120 deletions(-) diff --git a/src/Template/Layout/frontend.ctp b/src/Template/Layout/frontend.ctp index c46ca1247..790758e44 100644 --- a/src/Template/Layout/frontend.ctp +++ b/src/Template/Layout/frontend.ctp @@ -40,6 +40,14 @@ $GLOBALS["self"] = $this;
element('navi_notify'); ?>
+
+ menu +
+
@@ -55,7 +63,7 @@ $GLOBALS["self"] = $this;
- menu + menu
    diff --git a/webroot/css/grd_styles.css b/webroot/css/grd_styles.css index b00a890da..2e8fba0cb 100644 --- a/webroot/css/grd_styles.css +++ b/webroot/css/grd_styles.css @@ -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 diff --git a/webroot/js/basic.js b/webroot/js/basic.js index 57288ad1e..df53065fe 100644 --- a/webroot/js/basic.js +++ b/webroot/js/basic.js @@ -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); \ No newline at end of file diff --git a/websrc/src/less-files.css b/websrc/src/less-files.css index b00a890da..2e8fba0cb 100644 --- a/websrc/src/less-files.css +++ b/websrc/src/less-files.css @@ -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 diff --git a/websrc/src/less/01-layout.less b/websrc/src/less/01-layout.less index 7c663340d..5ae190084 100644 --- a/websrc/src/less/01-layout.less +++ b/websrc/src/less/01-layout.less @@ -24,7 +24,7 @@ .layout { display: grid; grid-template-rows: [top] 6vh [line2] 86vh [footer1] 3vh [footer2] 5vh [end]; - grid-template-columns: [left1] 1fr [left2] 1fr [left3] 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; diff --git a/websrc/src/less/03-typography.less b/websrc/src/less/03-typography.less index 63135e657..828458ba8 100644 --- a/websrc/src/less/03-typography.less +++ b/websrc/src/less/03-typography.less @@ -23,6 +23,7 @@ @sidebar1-lh: 2.5em; @link-title-lh: normal; @devinfo-fs: smaller; +@devinfo-fs-mobile: .7em; .small-font { font-size: .75em; diff --git a/websrc/src/less/05-screen.less b/websrc/src/less/05-screen.less index d9e936376..164126c9c 100644 --- a/websrc/src/less/05-screen.less +++ b/websrc/src/less/05-screen.less @@ -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; diff --git a/websrc/src/less/08-navi.less b/websrc/src/less/08-navi.less index e52e8156d..786504660 100644 --- a/websrc/src/less/08-navi.less +++ b/websrc/src/less/08-navi.less @@ -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; diff --git a/websrc/src/less/10-center.less b/websrc/src/less/10-center.less index dce91db58..5385d8aa9 100644 --- a/websrc/src/less/10-center.less +++ b/websrc/src/less/10-center.less @@ -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, diff --git a/websrc/src/less/20-list.less b/websrc/src/less/20-list.less index 29700bf60..415d8a149 100644 --- a/websrc/src/less/20-list.less +++ b/websrc/src/less/20-list.less @@ -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;