CP-40638: Modify the course detail page UI

theme/photo/config.php

@@ -72,4 +72,4 @@
     return theme_photo_get_main_scss_content($theme);
 };
 
-$THEME->javascripts_footer = array('header');
+$THEME->javascripts_footer = array('customization');

theme/photo/javascript/customization.js

@@ -0,0 +1,28 @@
+(function() {
+    /**
+     * Make sure to also set all of the following elements to 'display: none;' in ./scss/post.scss because
+     * loading JS takes time and we'll see the elements on the page for that time and then
+     * they'll be removed AFTER that.
+     */
+    let navbar = document.querySelector('nav.navbar');
+    let drawers = document.querySelectorAll('.drawer');
+    let leftDrawerToggler = document.querySelector('.drawer-toggles');
+    let secondaryNavigation = document.querySelector('.secondary-navigation');
+    let pageHeader = document.getElementById('page-header');
+    let pageFooter = document.getElementById('page-footer');
+
+    let elementsToRemove = [
+        navbar,
+        ...drawers,
+        leftDrawerToggler,
+        secondaryNavigation,
+        pageHeader,
+        pageFooter
+    ];
+
+    window.onload = function () {
+        for (const element of elementsToRemove) {
+            element.remove();
+        }
+    };
+})();

theme/photo/lib.php

@@ -117,33 +117,3 @@ function theme_photo_update_settings_images($settingname) {
     // Reset theme caches.
     theme_reset_all_caches();
 }
-
-// function add_item_in_course_nav() {
-//     Adds breadcrumbs at the top of the theme page
-//     global $PAGE;
-
-//     $previewnode = $PAGE->navigation->add(
-//     get_string('preview'),
-//     new moodle_url('/a/link/if/you/want/one.php'),
-//     navigation_node::TYPE_CONTAINER
-//     );
-
-//     $thingnode = $previewnode->add(
-//         get_string('thingname'),
-//         new moodle_url('/a/link/if/you/want/one.php')
-//     );
-
-//     $thingnode->make_active();
-
-// }
-
-function photo_extend_navigation_course(navigation_node $navigation) {
-    global $PAGE;
-    $node = navigation_node::create(get_string('pluginname', 'plugintype_pluginname'),
-        new moodle_url('/plugintype/pluginname/index.php', array('courseid' => $PAGE->course->id)),
-        navigation_node::TYPE_SETTING,
-        null,
-        null,
-        new pix_icon('i/competencies', ''));
-    $navigation->add_node($node);
-}

theme/photo/scss/post.scss

@@ -38,7 +38,13 @@ button.close:focus,
     box-shadow: 0 0 0 1px $primary;
 }
 
-.navbar {
+nav.navbar,
+.drawer,
+.drawer-toggles,
+.drawer-toggler,
+.secondary-navigation,
+#page-header
+#page-footer {
     display: none;
 }
 
@@ -51,6 +57,26 @@ button.close:focus,
     height: 100vh;
 }
 
+// To set container width to 100% and reset and all margin and padding
+#page-wrapper #page {
+    padding: 0 !important;
+}
+
+#page.drawers .main-inner {
+    padding: 0;
+    margin: 0;
+    width: 100%;
+    max-width: none !important;
+}
+
+#page-wrapper #page #page-content {
+    padding: 0 !important;
+}
+
+#page.drawers div[role="main"] {
+    padding: 0 !important;
+}
+
 body.pagelayout-login {
     background-image: url([[pix:theme_photo|loginbackgroundimage]]);
     background-size: cover;

theme/photo/scss/pre.scss

@@ -2,3 +2,6 @@
 
 $card-bg: rgba(255, 255, 255, 0.98);
 
+#page-header {
+    display: none !important;
+}

theme/photo/settings.php

@@ -159,7 +159,5 @@
     $setting->set_updatedcallback('theme_reset_all_caches');
     $page->add($setting);
 
-    // photo_extend_navigation_course();
-
     $settings->add($page);
 }