Review changes

moodle-an-hochschulen · Dec 6, 2023 · 9056abb · 9056abb
1 parent 18c6b47
commit 9056abb
Show file tree

Hide file tree

Showing 14 changed files with 213 additions and 160 deletions.
diff --git a/CHANGES.md b/CHANGES.md
@@ -6,7 +6,7 @@ Changes
 
 ### Unreleased
 
-* 2023-12-05 - Improvement: Option to suppress footer button, solves #444.
+* 2023-12-05 - Improvement: Option to suppress footer (circle containing the question mark) button, solves #444.
 * 2023-12-01 - Bugfix: Static pages unnecessarily cleaned configured content, solves #486.
 * 2023-11-23 - Bugfix: Add background color to OAuth2 login button, solves #473.
 

diff --git a/README.md b/README.md
@@ -381,7 +381,7 @@ Whatever you add to this textarea will be displayed at the end of a page, in the
 
 ###### Footer
 
-With these settings, you can show where to show or whether to suppress the footer (circle containing the question mark) button.
+With these settings, you can control whether to show or to suppress the footer (circle containing the question mark) button at the bottom of the page.
 
 #### Tab "Static pages"
 

diff --git a/classes/output/core_renderer.php b/classes/output/core_renderer.php
@@ -324,6 +324,27 @@ public function body_attributes($additionalclasses = []) {
             $additionalclasses[] = 'flavour'.'-'.$flavour->id;
         }
 
+        // If the admin decided to change the breakpoints of the footer button,
+        // add the setting as additional body class.
+        // With this setting, we show and hide the footer button as well as move the button
+        // (back-to-top) which is stacked on top of the footer button upwards.
+        $footerbutton = get_config('theme_boost_union', 'enablefooterbutton');
+        switch ($footerbutton) {
+            case THEME_BOOST_UNION_SETTING_ENABLEFOOTER_NONE:
+                $additionalclasses[] = 'theme_boost-union-footerbuttonnone';
+                break;
+            case THEME_BOOST_UNION_SETTING_ENABLEFOOTER_ALL:
+                $additionalclasses[] = 'theme_boost-union-footerbuttonall';
+                break;
+            case THEME_BOOST_UNION_SETTING_ENABLEFOOTER_MOBILE:
+                $additionalclasses[] = 'theme_boost-union-footerbuttonmobile';
+                break;
+            case THEME_BOOST_UNION_SETTING_ENABLEFOOTER_DESKTOP:
+            default:
+                $additionalclasses[] = 'theme_boost-union-footerbuttondesktop';
+                break;
+        }
+
         return ' id="'. $this->body_id().'" class="'.$this->body_css_classes($additionalclasses).'"';
     }
 

diff --git a/lang/en/theme_boost_union.php b/lang/en/theme_boost_union.php
@@ -441,14 +441,13 @@
 $string['footnotesetting_desc'] = 'Whatever you add to this textarea will be displayed at the end of a page, in the footer (not the floating footer) on every page which uses the layouts "drawers", "columns2" or "login". Content in this area could be for example the copyright, the terms of use or the name of your organisation. <br/> If you want to remove the footnote again, just empty the text area.';
 // ... Section: Footer.
 $string['footerheading'] = 'Footer';
-// ... ... Setting: Footer.
+// ... ... Setting: Enable footer.
 $string['enablefooterbutton'] = 'Enable footer';
-$string['enablefooterbutton_desc'] = 'With "footer", the circle containing the question mark at the bottom of the page is meant.<br />Upon click, the user is presented with an overlay. Depending on the site configuration the links
-Help and documentation, Services and support, Contact site support, Login information, Reset user tour on this page, Data retention summary, Get the mobile app, Policies and Powered by Moodle could be shown.<br />With this setting it is possible to choose on which device to show or entirely suppress this footer button.';
-$string['enablefooterbuttonboth'] = 'Desktop and mobile';
-$string['enablefooterbuttondesktop'] = 'Desktop only';
-$string['enablefooterbuttonmobile'] = 'Mobile only';
-$string['enablefooterbuttonhidden'] = 'Hidden';
+$string['enablefooterbutton_desc'] = 'With "footer", the circle containing the question mark at the bottom of the page is meant.<br />Upon click, the user is presented with an overlay. Depending on the site configuration Moodle shows several links (like "Help and documentation" or "Data retention summary") are shown in this overlay.<br />With this setting, you can control whether to show or to suppress the footer button at the bottom of the page.';
+$string['enablefooterbuttonboth'] = 'Enable on desktop, tablet and mobile';
+$string['enablefooterbuttondesktop'] = 'Enable on desktop and tablet only, hide on mobile (unchanged as presented by Moodle core)';
+$string['enablefooterbuttonmobile'] = 'Enable on mobile only, hide on desktop and tablet';
+$string['enablefooterbuttonhidden'] = 'Hide on all devices';
 
 // Settings: Static pages tab.
 $string['staticpagestab'] = 'Static pages';

diff --git a/layout/columns2.php b/layout/columns2.php
@@ -78,6 +78,9 @@
 if (isset($primarymenu['includesmartmenu']) && $primarymenu['includesmartmenu'] == true) {
     $extraclasses[] = 'theme-boost-union-smartmenu';
 }
+if (isset($primarymenu['bottombar']) && !empty($primarymenu['includesmartmenu'])) {
+    $extraclasses[] = 'theme-boost-union-bottombar';
+}
 
 $buildregionmainsettings = !$PAGE->include_region_main_settings_in_header_actions()  && !$PAGE->has_secondary_navigation();
 // If the settings menu will be included in the header then don't add it here.

diff --git a/layout/drawers.php b/layout/drawers.php
@@ -130,10 +130,13 @@
 $renderer = $PAGE->get_renderer('core');
 $primarymenu = $primary->export_for_template($renderer);
 
-// Add a special class selector to improve the Smart menus SCSS selectors.
+// Add special class selectors to improve the Smart menus SCSS selectors.
 if (isset($primarymenu['includesmartmenu']) && $primarymenu['includesmartmenu'] == true) {
     $extraclasses[] = 'theme-boost-union-smartmenu';
 }
+if (isset($primarymenu['bottombar']) && !empty($primarymenu['includesmartmenu'])) {
+    $extraclasses[] = 'theme-boost-union-bottombar';
+}
 
 $buildregionmainsettings = !$PAGE->include_region_main_settings_in_header_actions() && !$PAGE->has_secondary_navigation();
 // If the settings menu will be included in the header then don't add it here.

diff --git a/layout/includes/footer.php b/layout/includes/footer.php
@@ -24,15 +24,11 @@
 
 defined('MOODLE_INTERNAL') || die();
 
-// Require the necessary libraries.
-require_once($CFG->dirroot.'/theme/boost_union/locallib.php');
+$footersetting = get_config('theme_boost_union', 'enablefooterbutton');
 
-$config = get_config('theme_boost_union');
-
-// If the footerbutton is enabled.
-$footerquestionmark = isset($config->enablefooterbutton) ? $config->enablefooterbutton :
-    THEME_BOOST_UNION_SETTING_ENABLEFOOTER_BOTH;
-
-if ($footerquestionmark != THEME_BOOST_UNION_SETTING_ENABLEFOOTER_HIDDEN) {
+// If the footer button is enabled.
+$footerquestionmark = isset($footersetting) ? $footersetting : THEME_BOOST_UNION_SETTING_ENABLEFOOTER_ALL;
+if ($footerquestionmark != THEME_BOOST_UNION_SETTING_ENABLEFOOTER_NONE) {
+    // Add marker to show the footer button to templatecontext.
     $templatecontext['footerbutton'] = true;
 }
diff --git a/lib.php b/lib.php
@@ -92,10 +92,10 @@
 define('THEME_BOOST_UNION_SETTING_OUTSIDEREGIONSWITH_COURSECONTENTWIDTH', 'coursecontentwidth');
 define('THEME_BOOST_UNION_SETTING_OUTSIDEREGIONSWITH_HEROWIDTH', 'herowidth');
 
-define('THEME_BOOST_UNION_SETTING_ENABLEFOOTER_BOTH', 'enablefooterbuttonall');
+define('THEME_BOOST_UNION_SETTING_ENABLEFOOTER_ALL', 'enablefooterbuttonall');
 define('THEME_BOOST_UNION_SETTING_ENABLEFOOTER_DESKTOP', 'enablefooterbuttondesktop');
 define('THEME_BOOST_UNION_SETTING_ENABLEFOOTER_MOBILE', 'enablefooterbuttonmobile');
-define('THEME_BOOST_UNION_SETTING_ENABLEFOOTER_HIDDEN', 'enablefooterbuttonhidden');
+define('THEME_BOOST_UNION_SETTING_ENABLEFOOTER_NONE', 'enablefooterbuttonnone');
 
 /**
  * Returns the main SCSS content.
@@ -316,34 +316,6 @@ function theme_boost_union_get_extra_scss($theme) {
     // Setting: Mark external links.
     $content .= theme_boost_union_get_scss_to_mark_external_links($theme);
 
-    // If the footerbutton is enabled.
-    $footerquestionmark = get_config('theme_boost_union', 'enablefooterbutton');
-
-    switch ($footerquestionmark) {
-        case THEME_BOOST_UNION_SETTING_ENABLEFOOTER_BOTH:
-            $content .= '@media (max-width: 575px) { #page-footer [data-region="footer-container-popover"] .btn-footer-popover ' .
-            '{ display: block !important; } }' . PHP_EOL;
-            break;
-        case THEME_BOOST_UNION_SETTING_ENABLEFOOTER_DESKTOP:
-            $content .= '@media (min-width: 576px) { #page-footer [data-region="footer-container-popover"] .btn-footer-popover ' .
-            '{ display: block !important; } }' . PHP_EOL;
-            $content .= '#page-footer .footer-content-popover.container { display: none !important; }' . PHP_EOL;
-            break;
-        case THEME_BOOST_UNION_SETTING_ENABLEFOOTER_MOBILE:
-            $content .= '@media (min-width: 576px) { #page-footer [data-region="footer-container-popover"] .btn-footer-popover ' .
-            '{ display: none !important; } }' . PHP_EOL;
-            $content .= '@media (max-width: 575px) { #page-footer [data-region="footer-container-popover"] .btn-footer-popover ' .
-            '{ display: block !important; bottom: 5rem; } }' . PHP_EOL;
-            $content .= '#page-footer .footer-content-popover.container { display: none !important; }' . PHP_EOL;
-            break;
-        default:
-            $content .= '@media (max-width: 575px) { #page-footer [data-region="footer-container-popover"] .btn-footer-popover ' .
-            '{ display: none !important; } }' . PHP_EOL;
-            $content .= '@media (max-width: 575px) { #page-footer .footer-content-popover.container ' .
-                '{ display: none !important; } }' . PHP_EOL;
-            break;
-    }
-
     return $content;
 }
 

diff --git a/scss/boost_union/post.scss b/scss/boost_union/post.scss
@@ -325,22 +325,59 @@
     /* Place the back to top button at a fixed place. */
     position: fixed;
     right: 2rem;
-    /* As a start = on really small screens, the back to top button is shown in the bottom right corner. */
+    /* As a start, the back to top button is shown in the bottom right corner. */
     bottom: 2rem;
-    /* On larger screens, there is the footer button already in the bottom right corner and
-       the back to top button has to be shown above of the footer button. */
-    @include media-breakpoint-up(sm) {
-        bottom: 5rem;
-    }
     /* Make sure that the back to top button is not covered by anything else. */
     z-index: $zindex-dropdown;
     /* Animate position together with footer button. */
     @include transition(0.2s);
 }
+/* If the sticky footer is shown by Moodle core, the back to top button has to have a higher starting position. */
+body.hasstickyfooter #back-to-top {
+    bottom: 7rem;
+}
 #back-to-top i::before {
     /* Move the caret icon slightly up for a nicer look. */
     vertical-align: 0.3rem;
 }
+
+/* If we are on a small screen and the footer button is shown in the bottom right corner,
+   the back to top button has to be shown above of the footer button. */
+body.theme_boost-union-footerbuttonall.jsenabled,
+body.theme_boost-union-footerbuttonmobile.jsenabled {
+    @include media-breakpoint-down(xs) {
+        #back-to-top {
+            bottom: 5rem;
+        }
+    }
+    /* And if the sticky footer is shown by Moodle core, move the back to top button more upwards. */
+    &.hasstickyfooter {
+        @include media-breakpoint-down(xs) {
+            #back-to-top {
+                bottom: 10rem;
+            }
+        }
+    }
+}
+/* If we are on a larger screen and the footer button is shown in the bottom right corner,
+   the back to top button has to be shown above of the footer button. */
+body.theme_boost-union-footerbuttonall.jsenabled,
+body.theme_boost-union-footerbuttondesktop.jsenabled {
+    @include media-breakpoint-up(sm) {
+        #back-to-top {
+            bottom: 5rem;
+        }
+    }
+    /* And if the sticky footer is shown by Moodle core, move the back to top button more upwards. */
+    &.hasstickyfooter {
+        @include media-breakpoint-up(sm) {
+            #back-to-top {
+                bottom: 10rem;
+            }
+        }
+    }
+}
+
 /* If the right-hand drawer is opened. */
 #page.drawers.show-drawer-right #back-to-top {
     /* On larger screens, the drawer opens near the main content.
@@ -356,27 +393,6 @@
         display: none;
     }
 }
-/* If the smart menu bottom bar is shown, the back to top button has to be moved even more upwards. */
-@include media-breakpoint-down(sm) {
-    #page-wrapper #page.footer-bottom-menu #back-to-top {
-        bottom: calc(60px + 1rem);
-        /* On larger screens. */
-        @include media-breakpoint-up(sm) {
-            bottom: calc(60px + 4rem);
-        }
-    }
-}
-
-/* As soon as the sticky footer is shown (especially in the database activity),
-   the back to top button has to be moved further up.
-   Again, we have to distinguish between really small screens and larger screens
-   (where the fotter button is shown as well). */
-body.hasstickyfooter #back-to-top {
-    bottom: 7rem;
-    @include media-breakpoint-up(sm) {
-        bottom: 10rem;
-    }
-}
 
 
 /*=======================================
@@ -716,9 +732,13 @@ body.limitedwidth .theme-block-region-footer-coursecontentwidth {
 
 
 /*=======================================
- * Settings: Content -> Footnote.
+ * Settings: Content -> Footer.
  ======================================*/
 
+/*---------------------------------------
+ * Settings: Footnote.
+ --------------------------------------*/
+
 /* Static pages links dividers. */
 #footnote {
     .theme_boost_union_footnote_link {
@@ -860,6 +880,45 @@ body.pagelayout-login:not(.loginbackgroundimage) #footnote {
     border-top: none;
 }
 
+/*---------------------------------------
+ * Settings: Footer.
+ --------------------------------------*/
+
+/* If the admin decided to show the footer button on all screen sizes. */
+body.theme_boost-union-footerbuttonall.jsenabled {
+    /* Show the footer button on all screen sizes.
+       This uses !important to make really sure that the element is shown regardless of other CSS rules. */
+    .btn-footer-popover {
+        display: block !important;  /* stylelint-disable-line declaration-no-important */
+    }
+}
+
+/* If the admin decided to show the footer button on desktop + tablet only. */
+body.theme_boost-union-footerbuttondesktop.jsenabled {
+    /* Do not do anything with the footer button as Boost core is taking care of everything already . */
+}
+
+/* If the admin decided to show the footer button on mobile only. */
+body.theme_boost-union-footerbuttonmobile.jsenabled {
+    /* On larger screens. */
+    @include media-breakpoint-up(sm) {
+        /* Hide the footer button.
+           This uses !important to make really sure that the element is hidden regardless of other CSS rules. */
+        .btn-footer-popover,
+        #page-footer .footer-content-popover {
+            display: none !important;  /* stylelint-disable-line declaration-no-important */
+        }
+    }
+    /* On smaller screens. */
+    @include media-breakpoint-down(xs) {
+        /* Show the footer button.
+           This uses !important to make really sure that the element is shown regardless of other CSS rules. */
+        .btn-footer-popover {
+            display: block !important;  /* stylelint-disable-line declaration-no-important */
+        }
+    }
+}
+
 
 /*=======================================
  * Settings: Content -> Info banner.
@@ -1939,23 +1998,57 @@ body.pagelayout-login:not(.loginbackgroundimage) #footnote {
 }
 /* End of Footer Menu */
 
-/* On small screens where the bottom bar is shown. */
-@include media-breakpoint-down(sm) {
-    /* Boost union footer bottom menu style when the smart menu is enabled */
-    .theme-boost-union-smartmenu #page-wrapper #page {
-        &.footer-bottom-menu {
-            /* Increase the space at the bottom for the footer popover, as the bottom menu bar might hide it. */
+/* On small screens (where the bottom bar could be visible). */
+@include media-breakpoint-down(xs) {
+    /* If the bottom bar is shown. */
+    body.theme-boost-union-bottombar {
+        /* The back to top button has to be moved more upwards. */
+        #back-to-top {
+            bottom: calc(60px + 1rem);
+        }
+
+        /* If the footer button is shown. */
+        &.theme_boost-union-footerbuttonall.jsenabled,
+        &.theme_boost-union-footerbuttonmobile.jsenabled {
+            /* The footer button has to be moved more upwards. */
+            .btn-footer-popover {
+                bottom: calc(60px + 1rem);
+            }
+            /* And the back to top button has to be moved even more upwards. */
+            #back-to-top {
+                bottom: calc(60px + 4rem);
+            }
+        }
+    }
+}
+/* On screens between xs and sm (where the bottom bar could be visible). */
+@include media-breakpoint-only(sm) {
+    /* If the bottom bar is shown. */
+    body.theme-boost-union-bottombar {
+        /* The back to top button has to be moved more upwards. */
+        #back-to-top {
+            bottom: calc(60px + 1rem);
+        }
+
+        /* If the footer button is shown. */
+        &.theme_boost-union-footerbuttonall.jsenabled,
+        &.theme_boost-union-footerbuttondesktop.jsenabled {
+            /* The footer button has to be moved more upwards. */
             .btn-footer-popover {
                 bottom: calc(60px + 1rem);
             }
+            /* And the back to top button has to be moved even more upwards. */
+            #back-to-top {
+                bottom: calc(60px + 4rem);
+            }
         }
     }
 }
 
 @include media-breakpoint-down(sm) {
     /* The padding for the footer to visible the footer bottom menu because it is in the position style */
     /* Boost union footer bottom menu style when the smart menu is enabled */
-    .theme-boost-union-smartmenu #page-wrapper #page .footer-bottom-menu {
+    body.theme-boost-union-bottombar #page-wrapper #page {
         padding-bottom: 75px;
     }
     /* The nav drawer width is extend to full screen in the mobile view when the boost union smart menu is enabled */
@@ -1964,7 +2057,7 @@ body.pagelayout-login:not(.loginbackgroundimage) #footnote {
         width: 100%;
     }
     /* Drawer content list group when the boost union smart menu is enabled */
-    .theme-boost-union-smartmenu .drawer-primary .drawercontent .list-group .list-group-item {
+    body.theme-boost-union-smartmenu .drawer-primary .drawercontent .list-group .list-group-item {
         /* The padding left is added to the nav drawer menu dropdown menu in the mobile view */
         .list-group-item-action {
             padding-left: 32px;
@@ -2054,7 +2147,7 @@ body.pagelayout-login:not(.loginbackgroundimage) #footnote {
 /* On smaller screens. */
 @include media-breakpoint-down(sm) {
     /* Move the learning tools floating button up as soon as the bottom menu is shown. */
-    #page.footer-bottom-menu .learningtools-action-info .floating-button {
+    body.theme-boost-union-bottombar .learningtools-action-info .floating-button {
         bottom: 4rem;
     }
 }