story-22785 task-23312 admin header

      behatnotneeded

      Bug 1465107

Change-Id: Idff88d30c6a7a7b0abbbb4376ae25a7bfc3cfc7b

htdocs/js/mahara.js

@@ -273,7 +273,7 @@ function processingStart(msg) {
         $('loading-box'),
         DIV({'class': 'loading-inner'},
             SPAN({'class': 'icon-spinner icon-pulse icon icon-lg'}),
-            SPAN({'class': 'plm'}, msg))
+            SPAN({'class': 'loading-message'}, msg))
     );
 
     showElement('loading-box');

htdocs/js/tablerenderer.js

@@ -37,7 +37,7 @@ function TableRenderer(target, source, columns, options) {
             {'class': 'loading-box'}, 
                 DIV({'class':'loading-inner'}, 
                     SPAN({'class':'icon-spinner icon-pulse icon icon-lg'}), 
-                    SPAN({'class':'plm'}, get_string('loading'))
+                    SPAN({'class':'loading-message'}, get_string('loading'))
                 )
 
             );

htdocs/theme/raw/sass/components/_loading-inner.scss

 .loading-inner {
-    float: left;
-    background: $navbar-default-bg;
-    width:150px;
-    font-size: 16px;
-    line-height:20px;
-    color: #555;
-    padding: 14px 5px 14px 35px;
+    margin: 15px 10px 5px 0;
+    @media (max-width: $screen-sm-min) {
+        margin-top: 10px;
+    }
 }
+.loading-message {
+    margin-left: 5px;
+    display: none;
+}
\ No newline at end of file

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

 .header {
     top: 30px;
     @media (max-width: $screen-sm-min) {
-        top: 0;;
+        top: 0;
     }
-    .site-logo{
-        padding-top: 3px;
+
+    .logo-area,
+    .logo,
+    .admin-title,
+    .loading-box {
         float: left;
-        padding-left: 5px;
-        margin-top: 21px;
-        a {
-            float:left
-        }
+    }
+    .logo {
+        margin-right: 15px;
+        // logo restricted to 45px - custom work required for a larger version
         img {
             max-height: 45px;
         }
-        @media (min-width: 768px) {
-            margin-top: 0;
-            top: 0;
-        }
     }
-
     .admin-title {
-        display:none;
-        position: absolute;
-        height: 65px;
-        top: 0;
-        clear: none;
-        line-height: 1em;
-        margin-left: 25px;
-        background-color: $admin-title-bg;
-        padding: 25px 15px 5px 40px;
-        @media (min-width: 768px) {
-            display: inline-block;
-        }
-        a {
-            color: $admin-title-color;
-        }
-        &:before {
-            position: absolute;
-            left: 0;
-            top: 0px;
-            content: "";
-            width: 0;
-            height: 0;
-            border-style: solid;
-            border-width: 32.5px 0 32.5px 20px;
-            border-color: transparent transparent transparent #fff;
-        }
-
-        &:after {
-            position: absolute;
-            right: -20px;
-            top: 0px;
-            content: "";
-            width: 0;
-            height: 0;
-            border-style: solid;
-            border-width: 32.5px 0 32.5px 20px;
-            border-color: transparent transparent transparent $admin-title-bg;
+        margin: 15px 10px 5px 0;
+        @media (max-width: $screen-sm-min) {
+            clear: both;
+            margin-top: 10px;
         }
     }
+    // see _loading-inner for more realting to .logo-area
 
     + .container {
         // if container is directly after header, then it will need a margin

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

@@ -16,7 +16,7 @@ body {
         }
         @media (max-width: $screen-sm-min) {
             .container {
-                margin-top: 20px;
+                margin-top: 35px;
             }
          }
     }

htdocs/theme/raw/sass/utilities/_custom-variables.scss

 // Custom component variables (non-bootstrap components)
 
-//Arrow compoanent variables
+//Arrow component variables
 $arrow-color: lighten(desaturate($brand-primary, 80%), 55%);
 $arrow-text-color: $text-color;
 $arrow-link-color: $link-color;
@@ -10,9 +10,6 @@ $arrow-link-active-color: $text-color;
 // color for the secondary title in sections (cf. groups)
 $section-heading-color: #999;
 
-$admin-title-color: #fff;
-$admin-title-bg: $brand-primary;
-
 $dashboard-widget-bg: darken(#f9f9f9, 2%);
 $dashboard-widget-color: $brand-primary;
 

htdocs/theme/raw/templates/header.tpl

@@ -52,17 +52,17 @@
                 <span class="nav-title sr-only">{str tag="show"} {str tag="search"}</span>
             </button>
             {/if}
-            <span id="site-logo" class="site-logo">
-                    <a href="{$WWWROOT}">
-                        <img src="{$sitelogo}" alt="{$sitename}">
-                    </a>
-                    {if $ADMIN || $INSTITUTIONALADMIN || $STAFF || $INSTITUTIONALSTAFF}
-                        <div class="admin-title">
-                            <a href="{$WWWROOT}admin/" accesskey="a" class="admin-site">{str tag="administration"}</a>
-                        </div>
-                    {/if}
-            </span>
-            <div id="loading-box" class="loading-box" style='display:none'></div>
+            <div id="logo-area" class="logo-area">
+                <a href="{$WWWROOT}" class="logo">
+                    <img src="{$sitelogo}" alt="{$sitename}">
+                </a>
+                {if $ADMIN || $INSTITUTIONALADMIN || $STAFF || $INSTITUTIONALSTAFF}
+                    <div class="admin-title">
+                        <a href="{$WWWROOT}admin/" accesskey="a" class="admin-site">{str tag="administration"}</a>
+                    </div>
+                {/if}
+                <div id="loading-box" class="loading-box" style='display:none'></div>
+            </div>
             {include file="header/topright.tpl"}
 
         </div>