Merge pull request #37 from TechnologyEnhancedLearning/feature/TD-5807-Content-area-seems-narrow

Increase course page content area width

Author: frank-hee

scss/nhse.scss

@@ -1369,6 +1369,54 @@ body.simulated-fullscreen .d-flex.flex-row-reverse.mb-2 a.btn.btn-secondary[titl
   fill: #005eb8;
 }
 
+/* Prevent width of white area of course pages being limited in width - to match header */
+@media (min-width: 768px) {
+    body.limitedwidth.pagelayout-course #page.drawers .main-inner,
+    body.limitedwidth.pagelayout-mycourses #page.drawers .main-inner,
+    body.pagelayout-incourse #page.drawers .main-inner {
+        max-width: unset;
+    }
+}
+
+/* Remove padding to maximise the width of the white area of course pages and match header */
+/* Rules to apply when the menu is NOT open */
+@media (min-width: 768px) {
+    body.pagelayout-course #page.drawers:not(.show-drawer-left),
+    body.pagelayout-mycourses #page.drawers:not(.show-drawer-left),
+    body.pagelayout-incourse #page.drawers:not(.show-drawer-left) {
+        padding-left: 0;
+    }
+}
+
+/* Rule to remove padding-right always */
+@media (min-width: 768px) {
+    body.pagelayout-course #page.drawers,
+    body.pagelayout-mycourses #page.drawers,
+    body.pagelayout-incourse #page.drawers {
+        padding-right: 0;
+    }
+}
+
+/* Limit width of content area to prevent wide text area on course pages */
+@media (min-width: 768px) {
+    body.limitedwidth.pagelayout-course #page-wrapper #page #page-content,
+    body.limitedwidth.pagelayout-mycourses #page-wrapper #page #page-content,
+    body.pagelayout-incourse #page-wrapper #page #page-content {
+        max-width: 830px;
+    }
+    /* No limit required when displaying SCORM content inline */
+    body#page-mod-scorm-player #page-wrapper #page #page-content {
+      max-width: unset;
+    }
+}
+
+/* Remove rounded corners on course page white content area */
+body.limitedwidth.pagelayout-course #page.drawers .main-inner,
+body.limitedwidth.pagelayout-mycourses #page.drawers .main-inner,
+body.pagelayout-incourse #page.drawers .main-inner {
+    border-radius: 0;
+}
+
 .course-section .section-item {
   padding: 0px;
   border: none;
@@ -1418,4 +1466,4 @@ a:not([class]):focus,
   background-color: #ffeb3b;
   box-shadow: 0 -2px #ffeb3b, 0 4px #212b32;
   text-decoration: none;
-}
+}