From 04028121618d22963c30e572713468776b0f3a0e Mon Sep 17 00:00:00 2001 From: Mary Evans Date: Sun, 29 Sep 2013 01:40:40 +0100 Subject: [PATCH] MDL-42017 theme_afterburner: Additional improvements to make afterburner fully responsive. --- theme/afterburner/layout/default.php | 2 + .../style/afterburner_responsive.css | 34 +++-- theme/afterburner/style/afterburner_rtl.css | 116 +++++++++++------- .../afterburner/style/afterburner_styles.css | 32 +++-- 4 files changed, 107 insertions(+), 77 deletions(-) diff --git a/theme/afterburner/layout/default.php b/theme/afterburner/layout/default.php index 7d28944517c..6c94529a825 100644 --- a/theme/afterburner/layout/default.php +++ b/theme/afterburner/layout/default.php @@ -50,6 +50,8 @@ echo $OUTPUT->doctype() ?> <?php echo $PAGE->title ?> + + standard_head_html() ?> diff --git a/theme/afterburner/style/afterburner_responsive.css b/theme/afterburner/style/afterburner_responsive.css index d6119e05d45..a669026c640 100644 --- 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%; - } - } \ No newline at end of file diff --git a/theme/afterburner/style/afterburner_rtl.css b/theme/afterburner/style/afterburner_rtl.css index a52030b99b2..bfc264150ef 100644 --- a/theme/afterburner/style/afterburner_rtl.css +++ b/theme/afterburner/style/afterburner_rtl.css @@ -9,26 +9,29 @@ .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 a.logo { +.dir-rtl .coursebox .summary { float: right; } -.dir-rtl .headermenu, -.dir-rtl .langmenu { - clear: left; - right: auto; +.dir-rtl a.logo { + background-position: 100% 0; + float: right; + left: auto; + right: 10px; } .dir-rtl .headermenu { - left: 10px; -} -.dir-rtl .langmenu { float: left; + clear: left; + right: auto; + left: 0; +} +.dir-rtl .headermenu .langmenu { + clear: left; + float: left; + margin-left: 0; } .dir-rtl .langmenu select.select.menulang { margin-left: 0; @@ -36,35 +39,8 @@ .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;} \ No newline at end of file +.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%; + } +} \ No newline at end of file diff --git a/theme/afterburner/style/afterburner_styles.css b/theme/afterburner/style/afterburner_styles.css index b8a42d23626..450e67a7691 100644 --- 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; - float: left; -} -.headermenu, -.langmenu { - float:right; - clear: right; - font-size: 1em; margin: 0; - text-align: right; + float: left; position: relative; top: 10px; + left: 10px; } .headermenu { - right: 10px; + float: right; + clear: right; + margin: 0; + padding: 10px; + position: relative; + top: 0; + right: 0; +} +.headermenu .logininfo, +.headermenu .langmenu { + font-size: 1em; +} +#navcontainer { + clear: both; } /* Page Footer