From 6cee91981e4e0d906045854a7e4541ecd6c66874 Mon Sep 17 00:00:00 2001 From: Michael Tremer Date: Thu, 12 Jul 2018 22:28:26 +0100 Subject: [PATCH] Update navigation to Bootstrap 4.1 Signed-off-by: Michael Tremer --- Makefile.am | 1 - src/scss/_nav.scss | 345 -------------------------------- src/scss/_variables.scss | 27 +++ src/scss/style.scss | 2 - src/templates/base.html | 55 ++--- src/templates/index.html | 4 +- src/templates/modules/menu.html | 8 +- 7 files changed, 52 insertions(+), 390 deletions(-) delete mode 100644 src/scss/_nav.scss diff --git a/Makefile.am b/Makefile.am index 950b79ea..692f41d4 100644 --- a/Makefile.am +++ b/Makefile.am @@ -133,7 +133,6 @@ SCSS_FILES = \ src/scss/_donation.scss \ src/scss/_fonts.scss \ src/scss/_icons.scss \ - src/scss/_nav.scss \ src/scss/_variables.scss EXTRA_DIST += \ diff --git a/src/scss/_nav.scss b/src/scss/_nav.scss deleted file mode 100644 index 1ca57ec7..00000000 --- a/src/scss/_nav.scss +++ /dev/null @@ -1,345 +0,0 @@ -#mask { - width: 100vw; - height: 100vh; - position: fixed; - top: 0; - left: 0; - background-color: rgba(0, 0, 0, .4); - display: none; - visibility: hidden; - &.open { - display: block; - visibility: visible; - z-index: 250; - } -} - -.tux { - position: absolute; - top: 12px; - left:50%; - transform: translateX(-50%); - h1 { - font-weight: 300 !important; - color: $blue-grey-900; - font-size: 20px; - line-height: 28px; - margin-bottom: 0; - strong { - font-weight: 700 !important; - } - } - h1:before { - content: ""; - height: 32px; - width: 25px; - background-image: url('img/ipfire-tux.png'); - background-repeat: no-repeat; - background-position: center center; - background-size: contain; - display: inline-block; - position: relative; - } -} - -.menu-text { - transition: opacity .25s ease-in-out; -} - -.menu-text.hidden { - opacity: 0; - transition: opacity .35s ease-in-out; -} - -.fixed-top { - transition: background-color .25s linear; - height: 56px; - @include media-breakpoint-up(sm) { - height: 72px; - } - @include media-breakpoint-up(lg) { - height: 96px; - } - .navbar { - width: 100%; - z-index: 500; - a { - color: $blue-grey-900; - @include media-breakpoint-up(sm) { - margin-top: 8px; - } - } - .navbar-toggler-left { - left: -12px; - top: 8px; - @include media-breakpoint-up(sm) { - top: 17px; - } - } - .btn { - margin-top: .15rem; - } - } -} - -.navbar-brand { - font-size: 20px; - font-weight: 300; - opacity: 0; - margin: 0; - transition: opacity .7s linear; - @include media-breakpoint-up(lg) { - opacity: 1; - font-size: 36px; - } - strong { - font-weight: 900; - } - img { - margin-right: 4px; - transform: translateY(-5px); - height: 32px; - width: auto; - @include media-breakpoint-up(lg) { - height: 40px; - } - } -} - -.scrolled { - background-color: rgba(255, 255, 255, .96); - box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.15), 0 1px 2px 0 rgba(0, 0, 0, 0.25); - height: 56px; - @include media-breakpoint-up(sm) { - height: 72px; - } - @include media-breakpoint-up(lg) { - height: 96px; - } - .navbar-brand { - opacity: 1; - } -} - -.scrolled.fadeout { - background-color: rgba(100, 100, 100, .5); - a.btn-donate { - opacity: .5; - } - a.navbar-brand { - opacity: .5; - } -} - -#navbarSupportedContent { - width: 100%; - @include media-breakpoint-down(md) { - background: white; - position: fixed; - top: 0; - left: 0; - width: 256px; - height: 100vh; - padding-top: 64px; - transform: translateX(-256px); - transition: all .15s ease-in-out; - &.open { - transform: translateX(0); - transition: all .15s ease-in-out; - box-shadow: 14px 0 28px 0 rgba(0, 0, 0, 0.25), 10px 0 10px 0 rgba(0, 0, 0, 0.26); - } - } -} - -.navbar-nav { - @include media-breakpoint-up(lg) { - padding-top: 2px; - - } -} - -.navbar-nav .nav-link { - color: $blue-grey-900; - padding: 16px !important; - display: block; - position: relative; - @include media-breakpoint-up(lg) { - margin-right: 16px; - display: block; - position: relative; - &:after { - content: ""; - border-bottom: 2px solid $red_900; - position: absolute; - transform: scaleX(0); - width: 100%; - left: 0; - top: 44px; - padding: inherit; - transition: transform .3s ease-out, color .3s ease-out; - } - } -} - -.navbar-nav .nav-link:active { - @include media-breakpoint-down(lg) { - color: $red_900 - } -} - -.navbar-nav .nav-link:active:before { - @include media-breakpoint-down(lg) { - content: ""; - border-left: 2px solid $red_900; - position: absolute; - left: 0; - height: 36px; - transform: translateY(-4px); - } -} - -.navbar-nav .nav-link:hover { - @include media-breakpoint-up(lg) { - color: $red_900; - } -} - -.navbar-nav .nav-link:hover:after { - @include media-breakpoint-up(lg) { - transform: scaleX(1); - } -} - -body.About li.nav-item a.about, -body.Download li.nav-item a.download, -body.Support li.nav-item a.support, -body.Involved li.nav-item a.community, -body.Phonebook li.nav-item a.phonebook, -body.Diagnosis li.nav-item a.diagnosis { - @include media-breakpoint-up(lg) { - color: $red_900; - &:after { - content: ""; - border-bottom: 2px solid $red_900; - position: absolute; - width: 100%; - left: 0; - top: 44px; - padding: inherit; - transform: scale(1); - } - } -} - -#sidebar { - padding: 0; - @include media-breakpoint-down(sm) { - box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.16), - 0 1px 2px 0 rgba(0, 0, 0, 0.23); - position: fixed; - top: 52px; - z-index: 200; - background-color: white; - } - ul { - list-style: none; - &.features_nav { - padding: 0 0 24px 0; - overflow-x: auto; - &.fixed { - position: fixed; - top: 100px; - outline: 1px solid grey; - } - } - ul { - margin: 0; - padding-left: 0; - li:last-child { - margin-bottom: 0; - } - } - li { - padding: 0 16px; - margin: 8px 0; - a.nav-link { - padding: inherit; - color: $blue-grey-900; - height: 32px; - padding: 0 8px; - line-height: 2; - &.active { - color: $red_900; - border-left: 2px solid $red_900; - padding: 0 8px 0 6px; - } - } - } - } -} - -// Feature mobile Menu - -/* Fix for Android */ -body { - -webkit-animation: bugfix infinite 1s; -} -@-webkit-keyframes bugfix { - from { padding: 0; } - to { padding: 0; } -} - -/* default checkbox */ -input[type=checkbox] { - position: absolute; - top: -9999px; - left: -9999px; -} - -label { - cursor: pointer; - user-select: none; -} - -nav[role="dropdown"] { - label { display: none; } -} - -@media screen and (max-width: 44em) { - nav[role="dropdown"] { - ul { - height: 48px; - overflow: hidden; - } - - label { - position: relative; - display: block; - width: 100%; - } - - label:after { - font-family: FontAwesome; - font-size: 24px; - content: "\f107"; - position: absolute; - top: 0; - right: 0; - z-index: 9999; - width: 100%; - height: 56px; - padding: 12px 12px 0; - text-align: right; - } - - input:checked ~ label:after { - content: "\f106"; - } - - input:checked ~ ul { - display: block; - height: 40vh; - overflow-y: scroll; - } - } -} diff --git a/src/scss/_variables.scss b/src/scss/_variables.scss index 687d2089..ee821ffb 100644 --- a/src/scss/_variables.scss +++ b/src/scss/_variables.scss @@ -25,3 +25,30 @@ $cyan: #00bcd4; // Theme $primary: $red-900; +$dark: $blue-grey-900; + +// Breakpoints +$grid-breakpoints: ( + xs: 0, + sm: 600px, + md: 768px, + lg: 1024px, + xl: 1280px +); + +$border-radius: 2px; + +// Fonts +$font-family-sans-serif: "Ubuntu", sans-serif; + +// Navbar +$navbar-brand-font-size: 36px; +$navbar-brand-height: 32px; + +$nav-link-height: 24px; +$navbar-nav-link-padding-x: 16px; + +$navbar-padding-y: 1.1rem; + +// Buttons +$btn-border-width: 2px; diff --git a/src/scss/style.scss b/src/scss/style.scss index 0bcb06e2..56f29273 100644 --- a/src/scss/style.scss +++ b/src/scss/style.scss @@ -67,12 +67,10 @@ body { // Custom stuff @import '_fonts'; -@import '_nav'; @import '_buttons'; @import '_icons'; - // Colors .amber-800 { color: $amber-800; diff --git a/src/templates/base.html b/src/templates/base.html index 6a242bcd..e0fc3588 100644 --- a/src/templates/base.html +++ b/src/templates/base.html @@ -19,44 +19,33 @@ {% if rss_url %} {% end %} - - -
-
- -
- - - {{ _("Donate") }} - +
+ {% block container %}
diff --git a/src/templates/index.html b/src/templates/index.html index 3e33db01..134222bb 100644 --- a/src/templates/index.html +++ b/src/templates/index.html @@ -11,8 +11,8 @@
- {{ _("Download") }} - {{ _("Features") }} + {{ _("Download") }} + {{ _("Features") }}
diff --git a/src/templates/modules/menu.html b/src/templates/modules/menu.html index 302290a9..44135f0c 100644 --- a/src/templates/modules/menu.html +++ b/src/templates/modules/menu.html @@ -1,10 +1,4 @@ -
-
-

IPFire

-
-
- -
    +
      {% if hostname in ("www.ipfire.org", "dev.ipfire.org") %}
    • {{ _("Home") }} -- 2.39.2