From 5a67421b303b5e18870f2d522f6d4151d4aa2693 Mon Sep 17 00:00:00 2001 From: Felix Hamann Date: Sat, 26 Jan 2019 12:07:03 +0100 Subject: [PATCH 01/11] reduce asidenav width on large screens --- templates/default-layout.lucius | 23 ++++++++---------- templates/widgets/asidenav.lucius | 40 +++++++++++++------------------ templates/widgets/navbar.lucius | 11 ++------- 3 files changed, 28 insertions(+), 46 deletions(-) diff --git a/templates/default-layout.lucius b/templates/default-layout.lucius index 32c8abac0..c5e76804c 100644 --- a/templates/default-layout.lucius +++ b/templates/default-layout.lucius @@ -19,6 +19,10 @@ /* DIMENSIONS */ --header-height: 100px; --header-height-collapsed: 60px; + + --asidenav-width-xl: 250px; + --asidenav-width-lg: 20%; + --asidenav-width-md: 50px; } * { @@ -196,21 +200,14 @@ h4 { .main__content { margin: 0; max-width: none; + padding-left: 0; } } -@media (max-width: 768px) { +@media (min-width: 425px) { .logged-in:not(.modal) { .main__content { - padding-left: 60px; - } - } -} - -@media (max-width: 425px) { - .logged-in:not(.modal) { - .main__content { - padding-left: 0; + padding-left: calc(var(--asidenav-width-md, 50px) + 10px); } } } @@ -218,7 +215,7 @@ h4 { @media (min-width: 769px) { .logged-in:not(.modal) { .main__content { - padding-left: calc(24% + 30px); + padding-left: calc(var(--asidenav-width-lg, 20%) + 20px); } } } @@ -226,7 +223,7 @@ h4 { @media (min-width: 1200px) { .logged-in:not(.modal) { .main__content { - padding-left: 320px; + padding-left: calc(var(--asidenav-width-xl, 250px) + 20px); } } } @@ -450,7 +447,7 @@ input[type="button"].btn-info:hover, } ul.list--inline { - + display: inline-block; margin-left: 0; diff --git a/templates/widgets/asidenav.lucius b/templates/widgets/asidenav.lucius index 37db31849..6f05668a7 100644 --- a/templates/widgets/asidenav.lucius +++ b/templates/widgets/asidenav.lucius @@ -6,29 +6,17 @@ z-index: 1; top: 0; left: 0; - flex: 0 0 300px; + flex: 0 0 0; + flex-basis: var(--asidenav-width-lg, 20%); min-height: calc(100% - var(--header-height)); transition: all .2s ease-out; - width: 24%; + width: var(--asidenav-width-lg, 20%); height: 100%; } .logged-in { .main__aside { display: block; - } -} - -/* maximum width of 300px for wide screens */ -@media (min-width: 1200px) { - .main__aside { - width: 300px; - } -} - -@media (max-width: 768px) { - - .main__aside { min-height: calc(100% - var(--header-height-collapsed)); } } @@ -44,14 +32,12 @@ height: 100% !important; width: 100%; z-index: 5; - box-shadow: 0 0 13px var(--color-dark); - white-space: nowrap; overflow: hidden; - transform: translateX(0); + transform: translateX(-110%); transition: transform .2s ease-out; - &:not(.main__aside--expanded) { - transform: translateX(-110%); + &.main__aside--expanded { + transform: translateX(0%); } .asidenav__box-title { @@ -65,6 +51,12 @@ } } +@media (min-width: 1200px) { + .main__aside { + width: var(--asidenav-width-xl, 250px) + } +} + .asidenav { color: white; } @@ -213,13 +205,13 @@ @media (min-width: 425px) and (max-width: 768px) { .main__aside { - width: 50px; - flex-basis: 50px; + width: var(--asidenav-width-md, 50px); + flex-basis: var(--asidenav-width-md, 50px); overflow: hidden; min-height: calc(100% - var(--header-height-collapsed)); .asidenav__box-title { - width: 50px; + width: var(--asidenav-width-md, 50px); font-size: 18px; text-align: center; padding: 10px 1px; @@ -231,7 +223,7 @@ display: flex; position: static; height: 50px; - width: 50px; + width: var(--asidenav-width-md, 50px); text-align: center; opacity: 1; font-size: 15px; diff --git a/templates/widgets/navbar.lucius b/templates/widgets/navbar.lucius index 81200d4e8..6a49d2099 100644 --- a/templates/widgets/navbar.lucius +++ b/templates/widgets/navbar.lucius @@ -61,7 +61,7 @@ height: 80px; padding: 0 20px; display: flex; - flex-basis: 300px; + flex-basis: var(--asidenav-width-xl, 250px); font-size: 16px; align-items: center; color: var(--color-lightwhite); @@ -110,7 +110,7 @@ @media (max-width: 1199px) { .navbar__logo { - flex-basis: 24%; + flex-basis: var(--asidenav-width-lg, 20%); font-size: 16px; } } @@ -180,13 +180,6 @@ } } -@media (max-width: 500px) { - - .navbar__link-label { - font-size: 12px; - } -} - /* navbar list */ .navbar__list { white-space: nowrap; From 5df70ad45d346313e08d0d581596d8bf08c54aa9 Mon Sep 17 00:00:00 2001 From: Felix Hamann Date: Sat, 26 Jan 2019 12:07:13 +0100 Subject: [PATCH 02/11] bright asidenav that spans whole height --- templates/default-layout.hamlet | 8 +- templates/default-layout.lucius | 24 +++-- templates/widgets/asidenav.hamlet | 5 ++ templates/widgets/asidenav.lucius | 107 +++++++++++++++++++++-- templates/widgets/breadcrumbs.lucius | 14 +-- templates/widgets/navbar.hamlet | 4 - templates/widgets/navbar.lucius | 101 +++------------------ templates/widgets/pageactionprime.lucius | 2 +- 8 files changed, 131 insertions(+), 134 deletions(-) diff --git a/templates/default-layout.hamlet b/templates/default-layout.hamlet index f9885fac9..c9c6c69e7 100644 --- a/templates/default-layout.hamlet +++ b/templates/default-layout.hamlet @@ -1,13 +1,13 @@ +$if not isModal + +^{asidenav} + $if not isModal ^{navbar}
- $if not isModal - - ^{asidenav} -
$if not isModal diff --git a/templates/default-layout.lucius b/templates/default-layout.lucius index c5e76804c..74753907e 100644 --- a/templates/default-layout.lucius +++ b/templates/default-layout.lucius @@ -7,7 +7,8 @@ --color-lightblack: #1A2A36; --color-lightwhite: #fcfffa; --color-grey: #B1B5C0; - --color-grey-light: #f4f5f6; + --color-grey-light: #efefef; + --color-grey-medium: #9A989E; --color-font: #34303a; --color-fontsec: #5b5861; @@ -45,7 +46,8 @@ body { body { /* DEFAULT LMU THEME */ - --color-primary: #0a9342; + --color-lmu-green: #0a9342; + --color-primary: var(--color-lmu-green); --color-light: #31cc72; --color-lighter: #35db7a; --color-dark: #087536; @@ -160,15 +162,12 @@ h4 { .main { position: relative; min-height: calc(100vh - var(--header-height)); - padding: 20px; - overflow: hidden; } @media (max-width: 768px) { .main { min-height: calc(100vh - var(--header-height-collapsed)); - padding: 10px; } } @@ -178,6 +177,7 @@ h4 { transition: padding-left .2s ease-out; max-width: 1200px; margin: 0 auto; + margin-top: var(--header-height); > .container { margin: 20px 0; @@ -198,16 +198,15 @@ h4 { .logged-in { .main__content { - margin: 0; max-width: none; - padding-left: 0; + margin-left: 0; } } @media (min-width: 425px) { .logged-in:not(.modal) { .main__content { - padding-left: calc(var(--asidenav-width-md, 50px) + 10px); + margin-left: var(--asidenav-width-md, 50px); } } } @@ -215,7 +214,7 @@ h4 { @media (min-width: 769px) { .logged-in:not(.modal) { .main__content { - padding-left: calc(var(--asidenav-width-lg, 20%) + 20px); + margin-left: var(--asidenav-width-lg, 20%); } } } @@ -223,14 +222,13 @@ h4 { @media (min-width: 1200px) { .logged-in:not(.modal) { .main__content { - padding-left: calc(var(--asidenav-width-xl, 250px) + 20px); + margin-left: var(--asidenav-width-xl, 250px); } } } -/* sepcial case for breadcrumbs */ -.breadcrumbs__container + .main__content-body { - padding-top: 0; +.main__content-body { + padding: 40px; } .pseudo-focus { diff --git a/templates/widgets/asidenav.hamlet b/templates/widgets/asidenav.hamlet index fe8a7e8f5..ac8a1de6b 100644 --- a/templates/widgets/asidenav.hamlet +++ b/templates/widgets/asidenav.hamlet @@ -1,5 +1,10 @@ $newline never