Bug 1698257: Make header height adjustable using navbar-height variable

- Fix header display with or without site messages

behatnotneeded

Change-Id: Ib93e2ad8a92050fe24557c44e0888af7ebfaacef

htdocs/theme/ocean/sass/layout/_header.scss

@@ -12,11 +12,4 @@
             }
         }
     }
-
-    + .container {
-        margin-top: 0;
-        @media (min-width: $screen-sm-min) {
-            margin-top: 50px;
-        }
-    }
 }

htdocs/theme/ocean/sass/layout/_layout.scss

@@ -16,13 +16,3 @@ body {
         }
     }
 }
-
-@for $i from 1 through 5 {
-    .header.message-count-#{$i} {
-        + .main-content {
-            @media (min-width: $screen-sm-min) {
-                margin-top: ($i * 33px) + 40px;
-            }
-        }
-    }
-}

htdocs/theme/primaryschool/sass/form/_site-messages.scss

-.site-messages {
-    ~ .header {
-        top: 33px;    //for one message
-
-        + .main-nav {
-            margin-top: 32px;    //for one message
-        }
-    }
-}
-
-
-//adjust header and fixed elements for sitemessages
-@for $i from 1 through 5 {
-    .header.message-count-#{$i} {
-        top: 33px * $i;
-
-        @media (max-width: $screen-sm-min) {
-            top: 0;
-        }
-
-        + .main-nav {
-            margin-top: $i * 32px;
-
-            @media (max-width: $screen-sm-min) {
-                margin-top: 0;
-            }
-        }
-
-        ~ .container {
-            .toolbar-affix.affix {
-                margin-top: $i * 33px;
-            }
-        }
-
-        + .container {
-            // if container is directly after header, then it will need a margin
-            margin-top: $i * 33px;
-        }
-    }
-}
\ No newline at end of file

htdocs/theme/primaryschool/sass/layout/_layout.scss

-/*
- * Base structure
- */
-body {
-
-    @media (max-width: $screen-sm-min - 1) {
-        padding-top: 0;
-    }
-
-    .main-content {
-        margin-top: 0;
-        padding-top: 20px;
-        .main {
-            padding-top: 20px;
-        }
-    }
-
-    &.admin {
-        .container {
-            margin-top: 0px;
-        }
-        .main-nav {
-            .container {
-                margin-top: 0px;
-            }
-        }
-        .main-content {
-            margin-top: 0;
-            padding-top: 20px;
-        }
-    }
-    .sidebar {
-        padding-top: 0px;
-    }
-}
\ No newline at end of file

htdocs/theme/primaryschool/sass/utilities/_index.scss

@@ -3,7 +3,6 @@
 
 // General customisation and component files go here...
 @import "../layout/col-collapse";
-@import "../layout/layout";
 @import "../layout/footer";
 @import "../layout/header";
 @import "../layout/profile-block";
@@ -19,7 +18,6 @@
 
 // Forms
 @import "../form/form-group";
-@import "../form/site-messages";
 
 // Components - small reusable design elements
 @import "../components/arrow-bar";

htdocs/theme/raw/sass/_custom.scss

@@ -49,11 +49,8 @@
 
 .toolbar-affix.affix {
     position: fixed;
-    top: 70px;
+    top: 30px;
     z-index: 1;
-    @media (max-width: $screen-sm-min) {
-        top: 0;
-    }
 }
 
 .layoutthumb {

htdocs/theme/raw/sass/form/_site-messages.scss

@@ -32,13 +32,15 @@
 
         ~ .container {
             .toolbar-affix.affix {
-                margin-top: $i * 33px;
+                @media (min-width: $screen-sm-min) {
+                    margin-top: $navbar-height + ($i * 33px);
+                }
             }
         }
 
         + .main-content {
             @media (min-width: $screen-sm-min) {
-                margin-top: $i * 33px;
+                margin-top: $navbar-height + ($i * 33px);
             }
         }
     }
@@ -48,6 +50,13 @@
 .no-site-messages {
     top: 0;
     padding-top: 0;
+
+    + .main-content,
+    + .main-content .toolbar-affix.affix {
+        @media (min-width: $screen-sm-min) {
+            margin-top: $navbar-height;
+        }
+    }
 }
 
 .errmsg {

htdocs/theme/raw/sass/layout/_header.scss

@@ -12,13 +12,13 @@
         float: left;
     }
 
+    // CHANGE this value to switch between large and small logo
     $screen-width-small-logo: 415px;
 
     .logo {
-        margin: 6px 15px 6px 0;
+        padding: 6px 15px 6px 0;
         display: inline-block;
-        // logo restricted to 45px - custom work required for a larger version
-        height: 45px;
+        height: $navbar-height; // CHANGE this value
 
         // When small logo is uploaded 'change-to-small' class is added.
         &.change-to-small {
@@ -57,10 +57,11 @@
             margin: 18px 10px 5px 0;
         }
     }
-    // if container is directly after header, then it will need a margin
-    + .container {
+
+    .navbar-main.navbar {
+        min-height: auto;
         @media (min-width: $screen-sm-min) {
-            margin-top: 30px;
+            height: $navbar-height; // CHANGE this value
         }
     }
 }

htdocs/theme/raw/sass/layout/_layout.scss

@@ -3,12 +3,9 @@
  */
 body {
     max-width: 100%;
-    @media (min-width: 768px) {
-        padding-top: 65px; // Move down content because we have a fixed navbar on desktop/tablet that is 50px tall
-    }
 
     .main {
-        margin: 0px 0 20px;
+        margin: 0 0 20px;
         padding-top: 30px;
         padding-bottom: 0;
         @media (min-width: $screen-sm-min) {

htdocs/theme/raw/sass/layout/nav/_main-nav.scss

@@ -18,10 +18,6 @@
         position: relative;
     }
 
-    @media (min-width: $screen-sm-min) {
-        max-height: $navbar-height;
-    }
-
     .nav-toggle-area {
         float: right;
         padding: 10px 0;

htdocs/theme/raw/templates/header.tpl

@@ -44,6 +44,7 @@
     {if $USERMASQUERADING || !$PRODUCTIONMODE || $SITECLOSED || $SITETOP}
         </div>
     {/if}
+
     <header class="header navbar-fixed-top no-site-messages">
         <div class="navbar navbar-default navbar-main">
             <div class="container">