Update navigation to Bootstrap 4.1

Signed-off-by: Michael Tremer <michael.tremer@ipfire.org>

diff --git a/Makefile.am b/Makefile.am
index 950b79eabb635ded7c35a1acc99e924a2277e0c4..692f41d497e32da6f39ec560d9638f4e977e8fdc 100644 (file)
--- 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 (file)
index 1ca57ec..0000000
--- 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 687d208994873c44c6fbe6123371af03f8d4e676..ee821ffbf1f1f62d3c4bb1ac32a4447b532e2229 100644 (file)
--- 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 0bcb06e2e33b69553df73865a404a4ba9a210786..56f292732dbf00e3e14b2853bfa1579c9af9eb0a 100644 (file)
--- 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 6a242bcd6ba4c7d712c84bb89c2a7d8324462962..e0fc35888de67abb40d5bb6afaca3af6a69109b4 100644 (file)
--- a/src/templates/base.html
+++ b/src/templates/base.html
@@ -19,44 +19,33 @@
                {% if rss_url %}
                        <link rel="alternate" type="application/rss+xml" title="RSS" href="{{ rss_url }}" />
                {% end %}
-
        </head>
 
        <body id="page-top" class="{% block title %}{% end block %}">
-               
-               <div class="fixed-top">
-                       <div class="container d-flex justify-content-between">
-                               <nav class="navbar navbar-toggleable-md align-items-md-start">
-                                       <button class="navbar-toggler navbar-toggler-left" type="button" data-toggle="slide-collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
-                                               <svg class="icon i_hamburger"><use xlink:href="#hamburger"/></svg>
-                                               <div class="visible-md-up menu-text">Menu</div>
-                                       </button>
-                                       
-                                       <a class="navbar-brand align-self-center" href="/">
-                                               <img src="{{ static_url("img/ipfire-tux.png") }}" alt="IPFire Tux" height="40px" />
-                                               {% if hostname in ("www.ipfire.org", "dev.ipfire.org") %}
-                                                       IP<strong>Fire</strong>
-                                               {% elif hostname  == "planet.ipfire.org" %}
-                                                       IP<strong>Fire</strong> Planet
-                                               {% else %}
-                                                       {{ hostname }}
-                                               {% end %}
-                                       </a>
-                                       
-                                       <div id="navbarSupportedContent" class="d-lg-flex justify-content-lg-end">
-                                               {% block menu %}
-                                                       {% module Menu() %}
-                                               {% end block %}
-                                       </div>
-                               </nav>
-                               <div class="align-self-start hidden-xs-down">
-                                       <a class="btn btn-red900 btn-sm btn-donate" href="/donate">
-                                               <svg class="icon i_heart"><use xlink:href="#heart"/></svg>
-                                               {{ _("Donate") }}
-                                       </a>
+               <nav class="navbar navbar-expand-lg fixed-top bg-white">
+                       <div class="container">
+                               <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbar"
+                                               aria-controls="navbar" aria-expanded="false" aria-label="Toggle navigation">
+                                       <svg class="icon i_hamburger"><use xlink:href="#hamburger"/></svg>
+                               </button>
+
+                               <a class="navbar-brand text-dark" href="/">
+                                       <img src="{{ static_url("img/ipfire-tux.png") }}" alt="IPFire" height="32px" />
+                                       IP<strong>Fire</strong>
+                               </a>
+
+                               <div class="collapse navbar-collapse" id="navbar">
+                                       {% block menu %}
+                                               {% module Menu() %}
+                                       {% end block %}
                                </div>
+
+                               <a class="btn btn-primary btn-donate d-none d-sm-block" href="/donate">
+                                       <svg class="icon i_heart"><use xlink:href="#heart"/></svg>
+                                       {{ _("Donate") }}
+                               </a>
                        </div>
-               </div>
+               </nav>
 
                {% block container %}
                        <div class="container">

diff --git a/src/templates/index.html b/src/templates/index.html
index 3e33db0149c534e6cc8857e2c65fdba5d1e7f045..134222bb20625e0c160d7830e09161cd699cbd4f 100644 (file)
--- a/src/templates/index.html
+++ b/src/templates/index.html
@@ -11,8 +11,8 @@
                        </div>
                                
                        <div class="row justify-content-center">
-                               <a class="btn btn-outline-primary btn-lg" href="/download">{{ _("Download") }}</a>
-                               <a class="btn btn-outline-secondary btn-lg" href="/features">{{ _("Features") }}</a>
+                               <a class="btn btn-outline-primary btn-lg mr-3" href="/download">{{ _("Download") }}</a>
+                               <a class="btn btn-outline-secondary btn-lg ml-3" href="/features">{{ _("Features") }}</a>
                        </div>
                </div>
                

diff --git a/src/templates/modules/menu.html b/src/templates/modules/menu.html
index 302290a940613856317790bf2a4b39e6605c7e2c..44135f0c0e90f2b97d68dcb1e5dc1fde0b5714de 100644 (file)
--- a/src/templates/modules/menu.html
+++ b/src/templates/modules/menu.html
@@ -1,10 +1,4 @@
-<div class="hidden-lg-up">
-       <div class="tux">
-               <h1>IP<strong>Fire</strong></h1>
-       </div>
-</div>
-
-<ul class="navbar-nav justify-content-lg-end">
+<ul class="navbar-nav ml-auto">
        {% if hostname in ("www.ipfire.org", "dev.ipfire.org") %}
                <li class="nav-item hidden-lg-up">
                        <a class="nav-link" href="/">{{ _("Home") }}</a>