MDL-42017 theme_afterburner: Additional improvements to make afterbur…

…ner fully responsive.
NorthernMichU · Sep 29, 2013 · 0402812 · 0402812
1 parent d45e65c
commit 0402812
Show file tree

Hide file tree

Showing 4 changed files with 104 additions and 74 deletions.
diff --git a/theme/afterburner/layout/default.php b/theme/afterburner/layout/default.php
@@ -50,6 +50,8 @@
 <head>
     <title><?php echo $PAGE->title ?></title>
     <link rel="shortcut icon" href="<?php echo $OUTPUT->pix_url('favicon', 'theme')?>" />
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+
     <?php echo $OUTPUT->standard_head_html() ?>
 </head>
 

diff --git a/theme/afterburner/style/afterburner_responsive.css b/theme/afterburner/style/afterburner_responsive.css
@@ -1,4 +1,4 @@
-@media screen and (orientation:portrait) and (max-width: 767px) {
+@media screen and (max-width: 767px) {
    /* Custom Menu
     -------------------------- */
 
@@ -86,19 +86,20 @@
         border-bottom: 1px solid #c3d9e1;
         color: #50646d;
     }
-    .headermenu {
-        top: 10px;
-        right: 10px;
-    }
 }
-@media only screen and (orientation:portrait) and (max-width:767px) {
+@media screen and (max-width:767px) {
     /* Page Layout
     -------------------------*/
-    body.has_dock #dock {
-        display: none;
+    body.has_dock {
+        margin-left: 3%;
+        width: 97%;
+    }
+    #dock {
+        width: 30px;
     }
     #page-wrapper {
-        width: 96%;
+        width: 100%;
+        margin: 0;
     }
     #region-main-box,
     .side-pre-only #region-main-box,
@@ -134,20 +135,13 @@
         color:#50646d;
     }
     #page-header {
-        height: 100px;
-        background: #fff;
+        height: 110px;
     }
     a.logo {
-        background-size: 75% 75%;
+        background-size: 60%;
+        overflow: hidden;
     }
     .headermenu {
-        display: none;
+        padding-top: 0;
     }
-}
-@media screen and (max-width: 320px) {
-
-    a.logo {
-        background-size: 50% 50%;
-    }
-
 }
diff --git a/theme/afterburner/style/afterburner_rtl.css b/theme/afterburner/style/afterburner_rtl.css
@@ -9,62 +9,38 @@
 .dir-rtl .block .header .title h2 {
     margin-right: 10px;
 }
-
 .dir-rtl .course_category_tree .category > .header .name {
-    padding-left:0;
-    padding-right:20px;
+    padding-left: 0;
+    padding-right: 20px;
+}
+.dir-rtl .coursebox .summary {
+    float: right;
 }
-.dir-rtl .coursebox .summary {float:right;}
-
 .dir-rtl a.logo {
+    background-position: 100% 0;
     float: right;
+    left: auto;
+    right: 10px;
 }
-.dir-rtl .headermenu,
-.dir-rtl .langmenu {
+.dir-rtl .headermenu {
+    float: left;
     clear: left;
     right: auto;
+    left: 0;
 }
-.dir-rtl .headermenu {
-    left: 10px;
-}
-.dir-rtl .langmenu {
+.dir-rtl .headermenu .langmenu {
+    clear: left;
     float: left;
+    margin-left: 0;
 }
 .dir-rtl .langmenu select.select.menulang {
     margin-left: 0;
 }
 .dir-rtl .loginbox .loginform .form-label {
     width: 46%;
 }
-
-/* right align CUSTOMMENU
--------------------------*/
-.dir-rtl #custommenu ul.dropdown {
-    float: right;
-}
-.dir-rtl #custommenu ul.dropdown ul{
-    right: 0;
-    left: auto;
-}
-.dir-rtl #custommenu ul.dropdown ul ul {
-    right: 203px;
-    left: auto;
-}
-.dir-rtl #custommenu ul.dropdown ul span,
-.dir-rtl #custommenu ul.dropdown ul span a,
-.dir-rtl #custommenu ul.dropdown ul li.clickable-with-children > a {
-    background-image: url([[pix:theme|menu/nav-arrow-left]]);
-    background-position: 0 50%;
-    background-repeat: no-repeat;
-}
-.dir-rtl #custommenu ul.dropdown ul li:hover > span,
-.dir-rtl #custommenu ul.dropdown ul li:hover > span a {
-    background-color: #fff;
-    background-image: url([[pix:theme|menu/nav-arrowover-left]]);
-    color: #036;
-}
-.dir-rtl #custommenu ul.dropdown li.clickable-with-children:hover > a {
-    background-image: url([[pix:theme|menu/nav-arrowover-left]]);
+.dir-rtl #navcontainer {
+    clear: both;
 }
 
 /* RTL Docking Module
@@ -74,7 +50,7 @@
     top: 0;
     left: auto;
     right: 0;
-    }
+}
 .dir-rtl #dock .dockeditem.firstdockitem {
     margin-top: 2.3em;
     -webkit-border-top-left-radius: 6px;
@@ -119,4 +95,56 @@ Docked Item Panel
     -moz-border-radius-topright: 0;
     border-top-right-radius: 0;
 }
-.dir-rtl.has_dock.side-post-only  #region-main {margin-left:0;}
+.dir-rtl.has_dock.side-post-only  #region-main {
+    margin-left: 0;
+}
+/* @media Responsive styles
+-------------------------*/
+
+@media screen and (min-width: 768px) {
+/* right align CUSTOMMENU
+-------------------------*/
+    .dir-rtl #custommenu ul.dropdown {
+        float: right;
+    }
+    .dir-rtl #custommenu ul.dropdown ul{
+        right: 0;
+        left: auto;
+    }
+    .dir-rtl #custommenu ul.dropdown ul ul {
+        right: 203px;
+        left: auto;
+    }
+    .dir-rtl #custommenu ul.dropdown ul span,
+    .dir-rtl #custommenu ul.dropdown ul span a,
+    .dir-rtl #custommenu ul.dropdown ul li.clickable-with-children > a {
+        background-image: url([[pix:theme|menu/nav-arrow-left]]);
+        background-position: 0 50%;
+        background-repeat: no-repeat;
+    }
+    .dir-rtl #custommenu ul.dropdown ul li:hover > span,
+    .dir-rtl #custommenu ul.dropdown ul li:hover > span a {
+        background-color: #fff;
+        background-image: url([[pix:theme|menu/nav-arrowover-left]]);
+        color: #036;
+    }
+    .dir-rtl #custommenu ul.dropdown li.clickable-with-children:hover > a {
+        background-image: url([[pix:theme|menu/nav-arrowover-left]]);
+    }
+}
+@media screen and (orientation:portrait) and (min-width: 768px) and (max-width: 799px) {
+    /* Page Layout
+    -------------------------*/
+    body.has_dock {
+        margin-right: 3%;
+        width: 97%;
+    }
+}
+@media screen and (max-width: 767px) {
+    /* Page Layout
+    -------------------------*/
+    body.has_dock {
+        margin-right: 3%;
+        width: 97%;
+    }
+}
diff --git a/theme/afterburner/style/afterburner_styles.css b/theme/afterburner/style/afterburner_styles.css
@@ -32,7 +32,8 @@ Page
 -----------------------*/
 #page {
     font-size: 108%;
-    font-family: Helvetica, Arial, sans-serif
+    font-family: Helvetica, Arial, sans-serif;
+    background-color: #fff;
 }
 #page-content {
     border-bottom: 1px solid #ddd;
@@ -43,28 +44,33 @@ Header and Logo
 #page-header {
     height: 100px;
     width: 100%;
-    background: #fff;
+    background-color: #fff;
 }
 a.logo {
     background: url([[setting:logo]]) no-repeat 0 0;
     width: 320px;
     height: 75px;
-    display: block;
-    margin: 15px 10px 10px;
+    margin: 0;
     float: left;
+    position: relative;
+    top: 10px;
+    left: 10px;
 }
-.headermenu,
-.langmenu {
-    float:right;
+.headermenu {
+    float: right;
     clear: right;
-    font-size: 1em;
     margin: 0;
-    text-align: right;
+    padding: 10px;
     position: relative;
-    top: 10px;
+    top: 0;
+    right: 0;
 }
-.headermenu {
-    right: 10px;
+.headermenu .logininfo,
+.headermenu .langmenu {
+    font-size: 1em;
+}
+#navcontainer {
+    clear: both;
 }
 /*
 Page Footer