MDL-73562 core_contentbank: alignment fixes

contentbank/contenttype/h5p/classes/form/editor.php

@@ -69,6 +69,8 @@ class editor extends edit_content {
 
         $this->h5peditor = new h5peditor();
 
+        $this->set_display_vertical();
+
         if ($id) {
             // The H5P editor needs the H5P content id (h5p table).
             $record = $DB->get_record('contentbank_content', ['id' => $id]);

contentbank/edit.php

@@ -89,6 +89,7 @@ $PAGE->set_url(new \moodle_url('/contentbank/edit.php', $values));
 $PAGE->set_context($context);
 $PAGE->navbar->add(get_string('edit'));
 $PAGE->set_title($title);
+$PAGE->set_pagelayout('incourse');
 
 $PAGE->set_heading($heading);
 

contentbank/templates/bankcontent.mustache

@@ -102,19 +102,17 @@
 
 <div class="content-bank-container {{#viewlist}}view-list{{/viewlist}} {{^viewlist}}view-grid{{/viewlist}}"
 data-region="contentbank">
-    <div class="d-flex justify-content-between flex-column flex-sm-row">
-        <div class="d-flex">
-            <div class="cb-navigation-container mb-2 mr-2">
-                {{>core_contentbank/bankcontent/navigation}}
-            </div>
-            <div class="cb-search-container mb-2">
-                {{>core_contentbank/bankcontent/search}}
-            </div>
+    <div class="d-flex justify-content-between">
+        <div class="cb-search-container mb-2 mr-2">
+            {{>core_contentbank/bankcontent/search}}
         </div>
         <div class="cb-toolbar-container mb-2 d-flex">
             {{>core_contentbank/bankcontent/toolbar}}
         </div>
     </div>
+    <div class="cb-navigation-container mb-2">
+        {{>core_contentbank/bankcontent/navigation}}
+    </div>
     <div class="pb-3 border">
         <div class="content-bank">
             <div class="cb-navbar bg-light p-2 border-bottom">

contentbank/templates/viewcontent.mustache

@@ -40,13 +40,9 @@
     }
 }}
 <div class="core_contentbank_viewcontent">
-    <div class="d-flex justify-content-end flex-column flex-sm-row">
-        {{>core_contentbank/viewcontent/toolbarview}}
-    </div>
-    <div class="container mt-1 mb-1" data-region="viewcontent-content">
+    {{>core_contentbank/viewcontent/toolbarview}}
+    <div class="mt-1 mb-1" data-region="viewcontent-content">
         {{{ contenthtml }}}
     </div>
-    <div class="d-flex justify-content-end flex-column flex-sm-row">
-        {{>core_contentbank/viewcontent/toolbarview}}
-    </div>
+    {{>core_contentbank/viewcontent/toolbarview}}
 </div>

contentbank/templates/viewcontent/toolbarview.mustache

@@ -39,7 +39,7 @@ along with Moodle.  If not, see <http://www.gnu.org/licenses/>.
     }
 }}
 {{#usercanedit}}
-<div class="cb-toolbar-container mb-2">
+<div class="cb-toolbar-container my-2">
     <a href="{{editcontenturl}}" class="btn btn-primary" data-action="edit-content">
         {{#str}}edit{{/str}}
     </a>

contentbank/view.php

@@ -73,6 +73,7 @@ $PAGE->set_heading($pageheading);
 $title .= ": ".$record->name;
 $PAGE->set_title($title);
 $PAGE->set_pagetype('contentbank');
+$PAGE->set_pagelayout('incourse');
 
 // Create the cog menu with all the secondary actions, such as delete, rename...
 $actionmenu = new action_menu();

h5p/classes/form/editcontent_form.php

@@ -63,6 +63,8 @@ class editcontent_form extends \moodleform {
         $mformid = 'h5peditor';
         $mform->setAttributes(array('id' => $mformid) + $mform->getAttributes());
 
+        $this->set_display_vertical();
+
         $this->add_action_buttons();
 
         $editor->add_editor_to_form($mform);

h5p/edit.php

@@ -86,6 +86,7 @@ $PAGE->set_context($context);
 $PAGE->set_url($url);
 $PAGE->set_title($pagetitle);
 $PAGE->set_heading($pagetitle);
+$PAGE->set_pagelayout('course');
 
 $values = [
     'id' => $contentid,

theme/boost/scss/moodle/contentbank.scss

@@ -165,6 +165,7 @@
     max-height: 190px;
     overflow-y: auto;
 }
+.cb-navigation-container .singleselect,
 .cb-navigation-container .singleselect .custom-select {
     width: 100%;
 }

theme/boost/scss/moodle/core.scss

@@ -2511,6 +2511,15 @@ body.h5p-embed {
     vertical-align: middle;
 }
 
+#page.drawers {
+    form#h5peditor,
+    form#coolh5peditor,
+    .core_contentbank_viewcontent {
+        max-width: $h5p-content-maxwidth;
+        margin: 0 auto;
+    }
+}
+
 .text-decoration-none {
     text-decoration: none !important; /* stylelint-disable-line declaration-no-important */
 }

theme/boost/scss/moodle/variables.scss

@@ -24,6 +24,7 @@ $primary-nav-padding-x: ($spacer / 2) !default;
 
 $navbar-height: 60px !default;
 $course-content-maxwidth: 830px;
+$h5p-content-maxwidth: 960px;
 
 $box-shadow-drawer-left: -0.25rem .25rem .8rem rgba($black, .025) !default;
 $box-shadow-drawer-right: 0 .25rem .8rem rgba($black, .025) !default;

theme/boost/style/moodle.css

@@ -11897,6 +11897,12 @@ body.h5p-embed .h5pmessages {
 #h5pcontenttypes td {
   vertical-align: middle; }
 
+#page.drawers form#h5peditor,
+#page.drawers form#coolh5peditor,
+#page.drawers .core_contentbank_viewcontent {
+  max-width: 960px;
+  margin: 0 auto; }
+
 .text-decoration-none {
   text-decoration: none !important;
   /* stylelint-disable-line declaration-no-important */ }
@@ -13707,6 +13713,7 @@ table.calendartable caption {
   max-height: 190px;
   overflow-y: auto; }
 
+.cb-navigation-container .singleselect,
 .cb-navigation-container .singleselect .custom-select {
   width: 100%; }
 

theme/classic/style/moodle.css

@@ -11897,6 +11897,12 @@ body.h5p-embed .h5pmessages {
 #h5pcontenttypes td {
   vertical-align: middle; }
 
+#page.drawers form#h5peditor,
+#page.drawers form#coolh5peditor,
+#page.drawers .core_contentbank_viewcontent {
+  max-width: 960px;
+  margin: 0 auto; }
+
 .text-decoration-none {
   text-decoration: none !important;
   /* stylelint-disable-line declaration-no-important */ }
@@ -13707,6 +13713,7 @@ table.calendartable caption {
   max-height: 190px;
   overflow-y: auto; }
 
+.cb-navigation-container .singleselect,
 .cb-navigation-container .singleselect .custom-select {
   width: 100%; }