Adding new feature for company logo in the navbar header img.maxwidth…

… through settings.php moodle-an-hochschulen#544 #MT-4714

CHANGES.md

@@ -12,6 +12,7 @@ Changes
 ### v4.4-r1
 
 * 2024-07-15 - Development: Rename master branch to main, please update your clones.
+* 2024-05-14 - Improvement: Limit the max-width of the navbar logo if it is too broad or has a special aspect ratio #544
 * 2024-07-13 - Upgrade: Make the \theme_boost_union\task\purge_cache task non-blocking as this has been deprecated in Moodle core.
 * 2024-07-13 - Bugfix: Adopt fix for MDL-82397 before its integration into Moodle core, relates to #691.
 * 2024-07-12 - Upgrade: Adapt the course index icon feature visually to the new icon sizes.

README.md

@@ -109,6 +109,10 @@ Here, you can upload a full logo to be used as decoration. This image is especia
 
 Here, you can upload a compact version of the same logo as above, such as an emblem, shield or icon. This image is especially used in the navigation bar at the top of each Moodle page. The image should be clear even at small sizes.
 
+###### Logo Maxwidth
+
+If the logo for the navbar on the top left is too wide or has a special aspect ratio, you can limit the logo's maximum width. Use css definition to limit the max-width.
+
 ##### Favicon
 
 ###### Favicon

lang/en/theme_boost_union.php

@@ -170,6 +170,9 @@
 $string['bootstrapcolordangersetting_desc'] = 'The Bootstrap color for "Danger"';
 // ... Section: Navbar.
 $string['navbarheading'] = 'Navbar';
+// ... Section: Navbar logo max width.
+$string['maxlogowidth'] = 'Maximal width of logo';
+$string['maxlogowidth_desc'] = 'If the logo is too broad or has a special aspect ratio, you can set the maximal width of the logo in the navbar header. Use CSS notation. Possible values can have some digits and end with `px`, `%`, `vw` or the field can be left empty, if you do not want to use this setting.';
 // ... ... Setting: Navbar color.
 $string['navbarcolorsetting'] = 'Navbar color';
 $string['navbarcolorsetting_desc'] = 'With this setting, you can change the navbar color from the default light navbar to a dark one or a colored one.';

lib.php

@@ -365,6 +365,9 @@ function theme_boost_union_get_extra_scss($theme) {
     // Setting: Activity icon purpose.
     $content .= theme_boost_union_get_scss_for_activity_icon_purpose($theme);
 
+    // Setting: Navbar and icon styles.
+    $content .= theme_boost_union_get_scss_navbar($theme);
+
     // Setting: Mark external links.
     $content .= theme_boost_union_get_scss_to_mark_external_links($theme);
 

locallib.php

@@ -1667,6 +1667,25 @@ function theme_boost_union_get_scss_courseoverview_block($theme) {
     return $scss;
 }
 
+/**
+ * Returns the SCSS code to be used in the navbar. The first usage is a logo icon that is possibly too broad and needs
+ * reduced to fit the navbar. See theme_boost_union_maxlogowidth for further details
+ *
+ * @param theme_config $theme The theme config object.
+ * @return string
+ */
+function theme_boost_union_get_scss_navbar($theme) {
+    // Initialize SCSS snippet.
+    $scss = '';
+
+    // Set variables which are read in settings by the logo maxwidth values.
+    if (get_config('theme_boost_union', 'maxlogowidth')) {
+        $scss .= ".navbar-brand img.logo{max-width:".get_config('theme_boost_union', 'maxlogowidth').";height:auto;}\n";
+    }
+
+    return $scss;
+}
+
 /**
  * Helper function which returns an array of login methods on the login page.
  *

settings.php

@@ -126,6 +126,10 @@
         // (with 3 or 4 digits) or a viewport width number (from 0 to 100).
         $widthregex = '/^((\d{1,2}|100)%)|((\d{1,2}|100)vw)|(\d{3,4}px)$/';
 
+        // Prepare regular expression for checking if the value is a percent number (from 0% to 100%) or a pixel number
+        // (with 2 or 3 digits) or a viewport width number (from 0 to 100). Additionally the field can be left blank.
+        $smallsizeoremptyregex = '/^((\d{1,2}|100)%)|((\d{1,2}|100)vw)|(\d{2,3}px)|(^(?!.*\S))$/';
+
         // Create Look settings page with tabs
         // (and allow users with the theme/boost_union:configure capability to access it).
         $page = new theme_boost_admin_settingspage_tabs('theme_boost_union_look',
@@ -396,6 +400,15 @@
         $setting->set_updatedcallback('theme_reset_all_caches');
         $tab->add($setting);
 
+        // Setting: add extra SCSS if logo icon is too broad / wrong aspect ratio.
+        $name = 'theme_boost_union/maxlogowidth';
+        $title = get_string('maxlogowidth', 'theme_boost_union', null, true);
+        $description = get_string('maxlogowidth_desc', 'theme_boost_union', null, true);
+        $default = '';
+        $setting = new admin_setting_configtext($name, $title, $description, $default, $smallsizeoremptyregex, 6);
+        $setting->set_updatedcallback('theme_reset_all_caches');
+        $tab->add($setting);
+
         // Create favicon heading.
         $name = 'theme_boost_union/faviconheading';
         $title = get_string('faviconheading', 'theme_boost_union', null, true);