projects / moodle.git / commitdiff
? search:
summary | shortlog | log | commit | commitdiff | tree
raw | patch | inline | side by side (parent: bc8594b)
MDL-55805 theme_noname: Footer adjusments and made sticky
authorFrederic Massart <fred@moodle.com>
Mon, 29 Aug 2016 07:43:44 +0000 (15:43 +0800)
committerDan Poltawski <dan@moodle.com>
Fri, 23 Sep 2016 09:55:15 +0000 (10:55 +0100)
Conflicts:
theme/noname/templates/columns1.mustache
theme/noname/templates/columns2.mustache
theme/noname/templates/columns3.mustache

Part of MDL-55071

theme/noname/scss/moodle.scss patch | blob | blame | history
theme/noname/scss/moodle/debug.scss patch | blob | blame | history
theme/noname/scss/moodle/modules.scss patch | blob | blame | history
theme/noname/scss/moodle/sticky-footer.scss [new file with mode: 0644] patch | blob
theme/noname/templates/columns1.mustache patch | blob | blame | history
theme/noname/templates/columns2.mustache patch | blob | blame | history
theme/noname/templates/columns3.mustache patch | blob | blame | history
theme/noname/templates/maintenance.mustache patch | blob | blame | history

diff --git a/theme/noname/scss/moodle.scss b/theme/noname/scss/moodle.scss
index 549a301..3c90690 100644 (file)
--- a/theme/noname/scss/moodle.scss
+++ b/theme/noname/scss/moodle.scss
@@ -36,3 +36,4 @@ $breadcrumb-divider-rtl: "◀" !default;
 @import "moodle/undo";
 @import "moodle/debug";
 @import "moodle/expendable";
+@import "moodle/sticky-footer";
diff --git a/theme/noname/scss/moodle/debug.scss b/theme/noname/scss/moodle/debug.scss
index 75c2de7..b998666 100644 (file)
--- a/theme/noname/scss/moodle/debug.scss
+++ b/theme/noname/scss/moodle/debug.scss
@@ -33,7 +33,7 @@ body.behat-site {
     font-weight: bold;
 }
 #page-footer .performanceinfo {
-    margin: 10px 20%;
+    margin: 0 20%;
 }
 #page-footer .performanceinfo span {
     display: block;
diff --git a/theme/noname/scss/moodle/modules.scss b/theme/noname/scss/moodle/modules.scss
index 3487e6a..7cda361 100644 (file)
--- a/theme/noname/scss/moodle/modules.scss
+++ b/theme/noname/scss/moodle/modules.scss
@@ -126,8 +126,6 @@ select {
 }
 
 #page-footer {
-    margin-top: 1em;
-    padding: 1em 0;
     border-top: 2px solid $table-border-color;
 }
 
diff --git a/theme/noname/scss/moodle/sticky-footer.scss b/theme/noname/scss/moodle/sticky-footer.scss
new file mode 100644 (file)
index 0000000..f09d366
--- /dev/null
+++ b/theme/noname/scss/moodle/sticky-footer.scss
@@ -0,0 +1,25 @@
+/**
+ * This file contains the styles required to make the footer sticky.
+ */
+$footer-min-height: 130px !default;
+
+html,
+body {
+    height: 100%;
+}
+
+#page-wrapper {
+    min-height: 100%;
+    padding-bottom: $spacer;
+    margin-bottom: -$footer-min-height;
+}
+
+#page-wrapper::after {
+    content: "";
+    display: block;
+    min-height: $footer-min-height;
+}
+
+#page-footer {
+    min-height: $footer-min-height;
+}
\ No newline at end of file
diff --git a/theme/noname/templates/columns1.mustache b/theme/noname/templates/columns1.mustache
index 801baf2..af1221e 100644 (file)
--- a/theme/noname/templates/columns1.mustache
+++ b/theme/noname/templates/columns1.mustache
@@ -9,61 +9,70 @@
 
 <body {{{ output.body_attributes }}}>
 
-{{{ output.standard_top_of_body_html }}}
+<div id="page-wrapper">
 
-<header role="banner" class="navbar navbar-light bg-faded navbar-static-top moodle-has-zindex">
-    <div class="clearfix">
-        <button class="navbar-toggler pull-xs-right hidden-sm-up" data-toggle="collapse" data-target="#bd-main-mav">☰<span class="sr-only">{{#str}}expand{{/str}}</span></button>
-    </div>
+    {{{ output.standard_top_of_body_html }}}
 
-    <a href="{{{ config.wwwroot }}}" class="navbar-brand">
-        {{# output.should_display_navbar_logo }}
-            <div class="logo">
-                <img src="{{output.get_compact_logo_url}}" alt={{#quote}}{{sitename}}{{/quote}}>
-            </div>
-        {{/ output.should_display_navbar_logo }}
-        <div class="site-name">{{{ sitename }}}</div>
-    </a>
+    <header role="banner" class="navbar navbar-light bg-faded navbar-static-top moodle-has-zindex">
+        <div class="clearfix">
+            <button class="navbar-toggler pull-xs-right hidden-sm-up" data-toggle="collapse" data-target="#bd-main-mav">☰<span class="sr-only">{{#str}}expand{{/str}}</span></button>
+        </div>
 
-    <!-- user_menu -->
-    {{{ output.user_menu }}}
+        <a href="{{{ config.wwwroot }}}" class="navbar-brand">
+            {{# output.should_display_navbar_logo }}
+                <div class="logo">
+                    <img src="{{output.get_compact_logo_url}}" alt={{#quote}}{{sitename}}{{/quote}}>
+                </div>
+            {{/ output.should_display_navbar_logo }}
+            <div class="site-name">{{{ sitename }}}</div>
+        </a>
 
-    <div class="collapse navbar-toggleable-xs" id="bd-main-nav">
-        <nav class="nav navbar-nav">
-            <!-- search_box -->
-            {{{ output.search_box }}}
-            <!-- custom_menu -->
-            {{{ output.custom_menu }}}
-            <!-- page_heading_menu -->
-            {{{ output.page_heading_menu }}}
-        </div>
-    </nav>
-</header>
+        <!-- user_menu -->
+        {{{ output.user_menu }}}
 
-<div id="page" class="container-fluid">
-    {{{ output.full_header }}}
+        <div class="collapse navbar-toggleable-xs" id="bd-main-nav">
+            <nav class="nav navbar-nav">
+                <!-- search_box -->
+                {{{ output.search_box }}}
+                <!-- custom_menu -->
+                {{{ output.custom_menu }}}
+                <!-- page_heading_menu -->
+                {{{ output.page_heading_menu }}}
+            </div>
+        </nav>
+    </header>
 
-    <div id="page-content" class="row">
-        <div id="region-main-box" class="col-xs-12">
-            <div class="row">
-                <section id="region-main" class="col-xs-12">
-                    {{{ output.course_content_header }}}
-                    {{{ output.main_content }}}
-                    {{{ output.course_content_footer }}}
-                </section>
+    <div id="page" class="container-fluid">
+        {{{ output.full_header }}}
+
+        <div id="page-content" class="row">
+            <div id="region-main-box" class="col-xs-12">
+                <div class="row">
+                    <section id="region-main" class="col-xs-12">
+                        {{{ output.course_content_header }}}
+                        {{{ output.main_content }}}
+                        {{{ output.course_content_footer }}}
+                    </section>
+                </div>
             </div>
         </div>
     </div>
 </div>
+<footer id="page-footer" class="p-y-1">
+    <div class="container-fluid">
+        <div id="course-footer">{{{ output.course_footer }}}</div>
+
+        {{# output.page_doc_link }}
+            <p class="helplink">{{{ output.page_doc_link }}}</p>
+        {{/ output.page_doc_link }}
 
-<footer id="page-footer">
-    <div id="course-footer">{{{ output.course_footer }}}</div>
-    <p class="helplink">{{{ output.page_doc_link }}}</p>
-    {{{ output.login_info }}}
-    {{{ output.home_link }}}
-    {{{ output.standard_footer_html }}}
+        {{{ output.login_info }}}
+        {{{ output.home_link }}}
+        {{{ output.standard_footer_html }}}
+
+        {{{ output.standard_end_of_body_html }}}
+    </div>
 </footer>
-{{{ output.standard_end_of_body_html }}}
 
 </body>
 </html>
diff --git a/theme/noname/templates/columns2.mustache b/theme/noname/templates/columns2.mustache
index 24554ab..72586da 100644 (file)
--- a/theme/noname/templates/columns2.mustache
+++ b/theme/noname/templates/columns2.mustache
@@ -9,62 +9,71 @@
 
 <body {{{ output.body_attributes }}}>
 
-{{{ output.standard_top_of_body_html }}}
+<div id="page-wrapper">
 
-<header role="banner" class="navbar navbar-light bg-faded navbar-static-top moodle-has-zindex">
-    <div class="clearfix">
-        <button class="navbar-toggler pull-xs-right hidden-sm-up" data-toggle="collapse" data-target="#bd-main-mav">☰<span class="sr-only">{{#str}}expand{{/str}}</span></button>
-    </div>
+    {{{ output.standard_top_of_body_html }}}
 
-    <a href="{{{ config.wwwroot }}}" class="navbar-brand">
-        {{# output.should_display_navbar_logo }}
-            <div class="logo">
-                <img src="{{output.get_compact_logo_url}}" alt={{#quote}}{{sitename}}{{/quote}}>
-            </div>
-        {{/ output.should_display_navbar_logo }}
-        <div class="site-name">{{{ sitename }}}</div>
-    </a>
+    <header role="banner" class="navbar navbar-light bg-faded navbar-static-top moodle-has-zindex">
+        <div class="clearfix">
+            <button class="navbar-toggler pull-xs-right hidden-sm-up" data-toggle="collapse" data-target="#bd-main-mav">☰<span class="sr-only">{{#str}}expand{{/str}}</span></button>
+        </div>
 
-    <!-- user_menu -->
-    {{{ output.user_menu }}}
+        <a href="{{{ config.wwwroot }}}" class="navbar-brand">
+            {{# output.should_display_navbar_logo }}
+                <div class="logo">
+                    <img src="{{output.get_compact_logo_url}}" alt={{#quote}}{{sitename}}{{/quote}}>
+                </div>
+            {{/ output.should_display_navbar_logo }}
+            <div class="site-name">{{{ sitename }}}</div>
+        </a>
 
-    <div class="collapse navbar-toggleable-xs" id="bd-main-nav">
-        <nav class="nav navbar-nav">
-            <!-- search_box -->
-            {{{ output.search_box }}}
-            <!-- custom_menu -->
-            {{{ output.custom_menu }}}
-            <!-- page_heading_menu -->
-            {{{ output.page_heading_menu }}}
-        </div>
-    </nav>
-</header>
+        <!-- user_menu -->
+        {{{ output.user_menu }}}
+
+        <div class="collapse navbar-toggleable-xs" id="bd-main-nav">
+            <nav class="nav navbar-nav">
+                <!-- search_box -->
+                {{{ output.search_box }}}
+                <!-- custom_menu -->
+                {{{ output.custom_menu }}}
+                <!-- page_heading_menu -->
+                {{{ output.page_heading_menu }}}
+            </div>
+        </nav>
+    </header>
 
-<div id="page" class="container-fluid">
-    {{{ output.full_header }}}
+    <div id="page" class="container-fluid">
+        {{{ output.full_header }}}
 
-    <div id="page-content" class="row">
-        <div id="region-main-box" class="col-md-9 push-md-3">
-            <div class="row">
-                <section id="region-main" class="col-xs-12">
-                    {{{ output.course_content_header }}}
-                    {{{ output.main_content }}}
-                    {{{ output.course_content_footer }}}
-                </section>
+        <div id="page-content" class="row">
+            <div id="region-main-box" class="col-md-9 push-md-3">
+                <div class="row">
+                    <section id="region-main" class="col-xs-12">
+                        {{{ output.course_content_header }}}
+                        {{{ output.main_content }}}
+                        {{{ output.course_content_footer }}}
+                    </section>
+                </div>
             </div>
+            {{{ sidepreblocks }}}
         </div>
-        {{{ sidepreblocks }}}
-    </div>
 
+    </div>
 </div>
-<footer id="page-footer">
-    <div id="course-footer">{{{ output.course_footer }}}</div>
-    <p class="helplink">{{{ output.page_doc_link }}}</p>
-    {{{ output.login_info }}}
-    {{{ output.home_link }}}
-    {{{ output.standard_footer_html }}}
+<footer id="page-footer" class="p-y-1">
+    <div class="container-fluid">
+        <div id="course-footer">{{{ output.course_footer }}}</div>
+
+        {{# output.page_doc_link }}
+            <p class="helplink">{{{ output.page_doc_link }}}</p>
+        {{/ output.page_doc_link }}
+
+        {{{ output.login_info }}}
+        {{{ output.home_link }}}
+        {{{ output.standard_footer_html }}}
+        {{{ output.standard_end_of_body_html }}}
+    </div>
 </footer>
-{{{ output.standard_end_of_body_html }}}
 
 </body>
 </html>
diff --git a/theme/noname/templates/columns3.mustache b/theme/noname/templates/columns3.mustache
index abd818d..c09b8d7 100644 (file)
--- a/theme/noname/templates/columns3.mustache
+++ b/theme/noname/templates/columns3.mustache
@@ -9,62 +9,71 @@
 
 <body {{{ output.body_attributes }}}>
 
-{{{ output.standard_top_of_body_html }}}
+<div id="page-wrapper">
 
-<header role="banner" class="navbar navbar-light bg-faded navbar-static-top moodle-has-zindex">
-    <div class="clearfix">
-        <button class="navbar-toggler pull-xs-right hidden-sm-up" data-toggle="collapse" data-target="#bd-main-mav">☰<span class="sr-only">{{#str}}expand{{/str}}</span></button>
-    </div>
+    {{{ output.standard_top_of_body_html }}}
 
-    <a href="{{{ config.wwwroot }}}" class="navbar-brand">
-        {{# output.should_display_navbar_logo }}
-            <div class="logo">
-                <img src="{{output.get_compact_logo_url}}" alt={{#quote}}{{sitename}}{{/quote}}>
-            </div>
-        {{/ output.should_display_navbar_logo }}
-        <div class="site-name">{{{ sitename }}}</div>
-    </a>
+    <header role="banner" class="navbar navbar-light bg-faded navbar-static-top moodle-has-zindex">
+        <div class="clearfix">
+            <button class="navbar-toggler pull-xs-right hidden-sm-up" data-toggle="collapse" data-target="#bd-main-mav">☰<span class="sr-only">{{#str}}expand{{/str}}</span></button>
+        </div>
 
-    <!-- user_menu -->
-    {{{ output.user_menu }}}
+        <a href="{{{ config.wwwroot }}}" class="navbar-brand">
+            {{# output.should_display_navbar_logo }}
+                <div class="logo">
+                    <img src="{{output.get_compact_logo_url}}" alt={{#quote}}{{sitename}}{{/quote}}>
+                </div>
+            {{/ output.should_display_navbar_logo }}
+            <div class="site-name">{{{ sitename }}}</div>
+        </a>
 
-    <div class="collapse navbar-toggleable-xs" id="bd-main-nav">
-        <nav class="nav navbar-nav">
-            <!-- search_box -->
-            {{{ output.search_box }}}
-            <!-- custom_menu -->
-            {{{ output.custom_menu }}}
-            <!-- page_heading_menu -->
-            {{{ output.page_heading_menu }}}
-        </div>
-    </nav>
-</header>
+        <!-- user_menu -->
+        {{{ output.user_menu }}}
 
-<div id="page" class="container-fluid">
-    {{{ output.full_header }}}
+        <div class="collapse navbar-toggleable-xs" id="bd-main-nav">
+            <nav class="nav navbar-nav">
+                <!-- search_box -->
+                {{{ output.search_box }}}
+                <!-- custom_menu -->
+                {{{ output.custom_menu }}}
+                <!-- page_heading_menu -->
+                {{{ output.page_heading_menu }}}
+            </div>
+        </nav>
+    </header>
 
-    <div id="page-content" class="row">
-        <div id="region-main-box" class="col-md-9">
-            <div class="row">
-                <section id="region-main" class="col-md-8 push-md-4">
-                    {{{ output.course_content_header }}}
-                    {{{ output.main_content }}}
-                    {{{ output.course_content_footer }}}
-                </section>
-                {{{ sidepreblocks }}}
+    <div id="page" class="container-fluid">
+        {{{ output.full_header }}}
+
+        <div id="page-content" class="row">
+            <div id="region-main-box" class="col-md-9">
+                <div class="row">
+                    <section id="region-main" class="col-md-8 push-md-4">
+                        {{{ output.course_content_header }}}
+                        {{{ output.main_content }}}
+                        {{{ output.course_content_footer }}}
+                    </section>
+                    {{{ sidepreblocks }}}
+                </div>
             </div>
+            {{{ sidepostblocks }}}
         </div>
-        {{{ sidepostblocks }}}
     </div>
 </div>
-<footer id="page-footer">
-    <div id="course-footer">{{{ output.course_footer }}}</div>
-    <p class="helplink">{{{ output.page_doc_link }}}</p>
-    {{{ output.login_info }}}
-    {{{ output.home_link }}}
-    {{{ output.standard_footer_html }}}
+<footer id="page-footer" class="p-y-1">
+    <div class="container-fluid">
+        <div id="course-footer">{{{ output.course_footer }}}</div>
+
+        {{# output.page_doc_link }}
+            <p class="helplink">{{{ output.page_doc_link }}}</p>
+        {{/ output.page_doc_link }}
+
+        {{{ output.login_info }}}
+        {{{ output.home_link }}}
+        {{{ output.standard_footer_html }}}
+        {{{ output.standard_end_of_body_html }}}
+    </div>
 </footer>
-{{{ output.standard_end_of_body_html }}}
 
 </body>
 </html>
diff --git a/theme/noname/templates/maintenance.mustache b/theme/noname/templates/maintenance.mustache
index 7a1d36d..af4f3f7 100644 (file)
--- a/theme/noname/templates/maintenance.mustache
+++ b/theme/noname/templates/maintenance.mustache
@@ -9,24 +9,30 @@
 
 <body {{{ output.body_attributes }}}>
 
-{{{ output.standard_top_of_body_html }}}
+<div id="page-wrapper">
 
-<div id="page" class="container-fluid">
-    {{{ output.page_heading }}}
+    {{{ output.standard_top_of_body_html }}}
 
-    <div id="page-content" class="row">
-        <div id="region-main-box">
-            <section id="region-main">
-                {{{ output.main_content }}}
-            </section>
+    <div id="page" class="container-fluid">
+        {{{ output.page_heading }}}
+
+        <div id="page-content" class="row">
+            <div id="region-main-box">
+                <section id="region-main">
+                    {{{ output.main_content }}}
+                </section>
+            </div>
         </div>
-    </div>
 
+    </div>
 </div>
-<footer id="page-footer">
-    {{{ output.standard_footer_html }}}
+
+<footer id="page-footer" class="p-y-1">
+    <div class="container-fluid">
+        {{{ output.standard_footer_html }}}
+        {{{ output.standard_end_of_body_html }}}
+    </div>
 </footer>
-{{{ output.standard_end_of_body_html }}}
 
 </body>
 </html>
Moodle official production repository