From fe3db0ca088b44095cfa0c891a481c147ee288c0 Mon Sep 17 00:00:00 2001
From: Damyon Wiese <damyon@moodle.com>
Date: Tue, 1 Nov 2016 11:51:03 +0800
Subject: [PATCH] MDL-56618 theme_boost: Fix backup / restore pages (again)

I removed most of the layout styles and started again.
---
 backup/util/ui/renderer.php                 |  85 ++++--
 theme/boost/scss/moodle/backup-restore.scss | 291 +++++++-------------
 2 files changed, 173 insertions(+), 203 deletions(-)

diff --git a/backup/util/ui/renderer.php b/backup/util/ui/renderer.php
index a3901e585e4..e5e93c9e5dc 100644
--- a/backup/util/ui/renderer.php
+++ b/backup/util/ui/renderer.php
@@ -290,7 +290,8 @@ class core_backup_renderer extends plugin_renderer_base {
             } else {
                 $html .= $selectacategoryhtml;
             }
-            $html .= $this->backup_detail_pair('', html_writer::empty_tag('input', array('type' => 'submit', 'value' => get_string('continue'))));
+            $attrs = array('type' => 'submit', 'value' => get_string('continue'), 'class' => 'btn btn-primary');
+            $html .= $this->backup_detail_pair('', html_writer::empty_tag('input', $attrs));
             $html .= html_writer::end_tag('div');
             $html .= html_writer::end_tag('form');
         }
@@ -306,7 +307,8 @@ class core_backup_renderer extends plugin_renderer_base {
                 backup::TARGET_CURRENT_ADDING, array('checked' => 'checked'));
             $html .= $this->backup_detail_input(get_string('restoretocurrentcoursedeleting', 'backup'), 'radio', 'target',
                 backup::TARGET_CURRENT_DELETING);
-            $html .= $this->backup_detail_pair('', html_writer::empty_tag('input', array('type' => 'submit', 'value' => get_string('continue'))));
+            $attrs = array('type' => 'submit', 'value' => get_string('continue'), 'class' => 'btn btn-primary');
+            $html .= $this->backup_detail_pair('', html_writer::empty_tag('input', $attrs));
             $html .= html_writer::end_tag('div');
             $html .= html_writer::end_tag('form');
         }
@@ -340,7 +342,8 @@ class core_backup_renderer extends plugin_renderer_base {
             } else {
                 $html .= $selectacoursehtml;
             }
-            $html .= $this->backup_detail_pair('', html_writer::empty_tag('input', array('type' => 'submit', 'value' => get_string('continue'))));
+            $attrs = array('type' => 'submit', 'value' => get_string('continue'), 'class' => 'btn btn-primary');
+            $html .= $this->backup_detail_pair('', html_writer::empty_tag('input', $attrs));
             $html .= html_writer::end_tag('div');
             $html .= html_writer::end_tag('form');
         }
@@ -371,7 +374,8 @@ class core_backup_renderer extends plugin_renderer_base {
         $html .= html_writer::start_tag('div', array('class' => 'ics-existing-course backup-section'));
         $html .= $this->output->heading(get_string('importdatafrom'), 2, array('class' => 'header'));
         $html .= $this->backup_detail_pair(get_string('selectacourse', 'backup'), $this->render($courses));
-        $html .= $this->backup_detail_pair('', html_writer::empty_tag('input', array('type' => 'submit', 'value' => get_string('continue'))));
+        $attrs = array('type' => 'submit', 'value' => get_string('continue'), 'class' => 'btn btn-primary');
+        $html .= $this->backup_detail_pair('', html_writer::empty_tag('input', $attrs));
         $html .= html_writer::end_tag('div');
         $html .= html_writer::end_tag('form');
         $html .= html_writer::end_tag('div');
@@ -470,9 +474,11 @@ class core_backup_renderer extends plugin_renderer_base {
     public function substage_buttons($haserrors) {
         $output  = html_writer::start_tag('div', array('continuebutton'));
         if (!$haserrors) {
-            $output .= html_writer::empty_tag('input', array('type' => 'submit', 'value' => get_string('continue')));
+            $attrs = array('type' => 'submit', 'value' => get_string('continue'), 'class' => 'btn btn-primary');
+            $output .= html_writer::empty_tag('input', $attrs);
         }
-        $output .= html_writer::empty_tag('input', array('type' => 'submit', 'name' => 'cancel', 'value' => get_string('cancel')));
+        $attrs = array('type' => 'submit', 'name' => 'cancel', 'value' => get_string('cancel'), 'class' => 'btn btn-secondary');
+        $output .= html_writer::empty_tag('input', $attrs);
         $output .= html_writer::end_tag('div');
         return $output;
     }
@@ -601,7 +607,7 @@ class core_backup_renderer extends plugin_renderer_base {
     public function render_restore_course_search(restore_course_search $component) {
         $url = $component->get_url();
 
-        $output = html_writer::start_tag('div', array('class' => 'restore-course-search'));
+        $output = html_writer::start_tag('div', array('class' => 'restore-course-search form-inline m-b-1'));
         $output .= html_writer::start_tag('div', array('class' => 'rcs-results'));
 
         $table = new html_table();
@@ -641,8 +647,20 @@ class core_backup_renderer extends plugin_renderer_base {
         $output .= html_writer::end_tag('div');
 
         $output .= html_writer::start_tag('div', array('class' => 'rcs-search'));
-        $output .= html_writer::empty_tag('input', array('type' => 'text', 'name' => restore_course_search::$VAR_SEARCH, 'value' => $component->get_search()));
-        $output .= html_writer::empty_tag('input', array('type' => 'submit', 'name' => 'searchcourses', 'value' => get_string('search')));
+        $attrs = array(
+            'type' => 'text',
+            'name' => restore_course_search::$VAR_SEARCH,
+            'value' => $component->get_search(),
+            'class' => 'form-control'
+        );
+        $output .= html_writer::empty_tag('input', $attrs);
+        $attrs = array(
+            'type' => 'submit',
+            'name' => 'searchcourses',
+            'value' => get_string('search'),
+            'class' => 'btn btn-secondary'
+        );
+        $output .= html_writer::empty_tag('input', $attrs);
         $output .= html_writer::end_tag('div');
 
         $output .= html_writer::end_tag('div');
@@ -663,8 +681,20 @@ class core_backup_renderer extends plugin_renderer_base {
             $output .= $this->output->notification(get_string('nomatchingcourses', 'backup'));
 
             $output .= html_writer::start_tag('div', array('class' => 'ics-search'));
-            $output .= html_writer::empty_tag('input', array('type' => 'text', 'name' => restore_course_search::$VAR_SEARCH, 'value' => $component->get_search()));
-            $output .= html_writer::empty_tag('input', array('type' => 'submit', 'name' => 'searchcourses', 'value' => get_string('search')));
+            $attrs = array(
+                'type' => 'text',
+                'name' => restore_course_search::$VAR_SEARCH,
+                'value' => $component->get_search(),
+                'class' => 'form-control'
+            );
+            $output .= html_writer::empty_tag('input', $attrs);
+            $attrs = array(
+                'type' => 'submit',
+                'name' => 'searchcourses',
+                'value' => get_string('search'),
+                'class' => 'btn btn-secondary'
+            );
+            $output .= html_writer::empty_tag('input', $attrs);
             $output .= html_writer::end_tag('div');
 
             $output .= html_writer::end_tag('div');
@@ -709,8 +739,19 @@ class core_backup_renderer extends plugin_renderer_base {
         $output .= html_writer::end_tag('div');
 
         $output .= html_writer::start_tag('div', array('class' => 'ics-search'));
-        $output .= html_writer::empty_tag('input', array('type' => 'text', 'name' => restore_course_search::$VAR_SEARCH, 'value' => $component->get_search()));
-        $output .= html_writer::empty_tag('input', array('type' => 'submit', 'name' => 'searchcourses', 'value' => get_string('search')));
+        $attrs = array(
+            'type' => 'text',
+            'name' => restore_course_search::$VAR_SEARCH,
+            'value' => $component->get_search(),
+            'class' => 'form-control');
+        $output .= html_writer::empty_tag('input', $attrs);
+        $attrs = array(
+            'type' => 'submit',
+            'name' => 'searchcourses',
+            'value' => get_string('search'),
+            'class' => 'btn btn-secondary'
+        );
+        $output .= html_writer::empty_tag('input', $attrs);
         $output .= html_writer::end_tag('div');
 
         $output .= html_writer::end_tag('div');
@@ -726,7 +767,7 @@ class core_backup_renderer extends plugin_renderer_base {
     public function render_restore_category_search(restore_category_search $component) {
         $url = $component->get_url();
 
-        $output = html_writer::start_tag('div', array('class' => 'restore-course-search'));
+        $output = html_writer::start_tag('div', array('class' => 'restore-course-search form-inline m-b-1'));
         $output .= html_writer::start_tag('div', array('class' => 'rcs-results'));
 
         $table = new html_table();
@@ -767,8 +808,20 @@ class core_backup_renderer extends plugin_renderer_base {
         $output .= html_writer::end_tag('div');
 
         $output .= html_writer::start_tag('div', array('class' => 'rcs-search'));
-        $output .= html_writer::empty_tag('input', array('type' => 'text', 'name' => restore_category_search::$VAR_SEARCH, 'value' => $component->get_search()));
-        $output .= html_writer::empty_tag('input', array('type' => 'submit', 'name' => 'searchcourses', 'value' => get_string('search')));
+        $attrs = array(
+            'type' => 'text',
+            'name' => restore_category_search::$VAR_SEARCH,
+            'value' => $component->get_search(),
+            'class' => 'form-control'
+        );
+        $output .= html_writer::empty_tag('input', $attrs);
+        $attrs = array(
+            'type' => 'submit',
+            'name' => 'searchcourses',
+            'value' => get_string('search'),
+            'class' => 'btn btn-secondary'
+        );
+        $output .= html_writer::empty_tag('input', $attrs);
         $output .= html_writer::end_tag('div');
 
         $output .= html_writer::end_tag('div');
diff --git a/theme/boost/scss/moodle/backup-restore.scss b/theme/boost/scss/moodle/backup-restore.scss
index b0f60849266..efed01d08d9 100644
--- a/theme/boost/scss/moodle/backup-restore.scss
+++ b/theme/boost/scss/moodle/backup-restore.scss
@@ -1,64 +1,136 @@
 .path-backup .mform {
-    fieldset {
-        margin-left: 0;
-    }
-
     .grouped_settings {
         clear: both;
         overflow: hidden;
 
+        /* Use card styles but avoid extend because that brings in too much. */
         &.section_level {
-            @extend .card;
-            @extend .card-block;
+            background-color: $card-bg;
+            @include border-radius($card-border-radius);
+            border: $card-border-width solid $card-border-color;
+            @include clearfix;
+            padding: $card-spacer-x;
+            margin-bottom: $card-spacer-x;
         }
     }
+
+    /* These are long labels with checkboxes on the right. */
+    .include_setting {
+        width: 50%;
+        display: inline-block;
+        float: left;
+        padding: $table-sm-cell-padding;
+    }
+    .normal_setting {
+        width: 50%;
+        display: inline-block;
+        float: left;
+        padding: $table-sm-cell-padding;
+    }
 }
 
 .path-backup {
-    .include_setting,
-    .grouped_settings .normal_setting {
-        display: inline-block;
-        width: 50%;
-
-        .form-group {
-            margin-top: 0;
-            margin-bottom: 0;
-        }
+    /* Bold section labels */
+    .section_level {
+        font-weight: bold;
+    }
+    .section_level .activity_level {
+        font-weight: normal;
     }
 
-    .include_setting.section_level label {
-        font-weight: bold;
+    .proceedbutton {
+        float: right;
     }
 }
 
-@include media-breakpoint-up(md) {
-    /* Override the columns width to leave more room for the labels. */
-    .path-backup .mform {
-        .grouped_settings {
-            .form-group {
-                .col-md-3 {
-                    width: 75%;
-                }
-                .col-md-9 {
-                    width: 25%;
-                }
+/* Override the columns width to leave more room for the labels. */
+.path-backup .mform {
+    .root_setting,
+    .grouped_settings {
+        /* Striped rows like a table */
+        &:nth-of-type(odd) {
+            background-color: $table-bg-accent;
+        }
+        &:nth-of-type(even) {
+            background-color: $card-bg;
+        }
+        .form-group {
+            /* These checkboxes with no label on the left. */
+            .col-md-3.checkbox {
+                width: 0%;
+            }
+            .col-md-9.checkbox {
+                width: 100%;
+                left: 0;
+            }
+            /* These are labels with a value on the right */
+            .col-md-3 {
+                width: 50%;
+            }
+            .col-md-9 {
+                width: 50%;
+                left: 0;
+            }
+            .icon:first-of-type {
+                margin-left: 1rem;
             }
         }
     }
 }
 
-.path-backup .mform .fitem .fitemtitle {
-    width: 260px;
+/* Detail pair is (usually) some short label with a longer value */
+.path-backup .detail-pair {
+    .detail-pair-label {
+        width: 25%;
+        float: left;
+        clear: left;
+    }
+    .detail-pair-value {
+        width: 75%;
+        float: left;
+    }
+}
+
+.path-backup .backup-restore .singlebutton {
+    float: right;
+}
+/* Make these bits full width and work with the detail-pair */
+.path-backup .backup-section {
+    .sub-header,
+    .backup-sub-section,
+    .singlebutton,
+    .header {
+        width: 100%;
+        float: left;
+        clear: both;
+    }
+    /* Fix for nested table headers */
+    th.header {
+        width: auto;
+        float: none;
+    }
+
+    /* Add card styles to backup sections */
+    ::after {
+        content: "";
+        display: table;
+        clear: both;
+    }
+
+    background-color: $card-bg;
+    @include border-radius($card-border-radius);
+    border: $card-border-width solid $card-border-color;
+    @include clearfix;
+    padding: $card-spacer-x;
+    margin-bottom: $card-spacer-x;
 }
 
 .path-backup .notification.dependencies_enforced {
-    text-align: center;
     color: $state-danger-text;
     font-weight: bold;
 }
 
 .path-backup .backup_progress {
-    text-align: center;
     margin-top: $spacer-y;
     margin-bottom: $spacer-y;
 
@@ -80,151 +152,10 @@
     background-color: $state-danger-bg;
 
     .aliaseslist {
-        width: 90%;
-        margin: 0.8em auto;
         background-color: $body-bg;
-        border: 1px dotted #666;
     }
 }
 
-#page-backup-restorefile h2 + div {
-    margin-bottom: $spacer-y;
-}
-
-.backup-restore {
-    .backup-section,
-    .backup-sub-section {
-        margin-top: $spacer-y;
-    }
-
-    .backup-section {
-        span.error {
-            @extend .alert;
-            @extend .alert-danger;
-            display: inline-block;
-        }
-
-        fieldset.error {
-            border: $border-width solid $state-danger-border;
-        }
-
-        .noticebox {
-            margin: 1em auto;
-            width: 60%;
-            text-align: center;
-        }
-    }
-}
-
-.backup-restore .backup-section.settings-section {
-    .detail-pair {
-        width: 50%;
-        display: inline-block;
-    }
-
-    .detail-pair-label {
-        width: 75%;
-    }
-
-    .detail-pair-value {
-        width: 25%;
-    }
-}
-
-.backup-restore .activitytable {
-    min-width: 500px;
-
-    .modulename {
-        width: 100px;
-    }
-
-    .moduleincluded {
-        width: 50px;
-    }
-
-    .userinfoincluded {
-        width: 50px;
-    }
-}
-
-.backup-restore .detail-pair-label {
-    display: inline-block;
-    width: 25%;
-    padding: 8px;
-    margin: 0;
-    text-align: right;
-    font-weight: bold;
-    vertical-align: top;
-}
-
-.backup-restore .detail-pair-value {
-    display: inline-block;
-    width: 65%;
-    padding: 8px;
-    margin: 0;
-
-    > .sub-detail {
-        display: block;
-        font-size: $font-size-sm;
-        @extend .text-muted;
-    }
-}
-
-.backup-restore > .singlebutton {
-    float: right;
-}
-
-.path-backup .mform {
-    .proceedbutton,
-    .oneclickbackup {
-        float: right;
-    }
-}
-
-.restore-course-search .rcs-results {
-    width: 70%;
-    min-width: 400px;
-
-    table {
-        width: 100%;
-        margin: 0;
-        border-width: 0;
-
-        .no-overflow {
-            max-width: 600px;
-        }
-    }
-
-    .paging {
-        text-align: left;
-        margin: 0;
-        background-color: #eee;
-        padding: 3px;
-    }
-}
-
-.restore-course-category .rcs-results {
-    width: 70%;
-    min-width: 400px;
-    border: 1px solid #ddd;
-    margin: 5px 0;
-
-    table {
-        width: 100%;
-        margin: 0;
-        border-width: 0;
-        .no-overflow {
-            max-width: 600px;
-        }
-    }
-
-    .paging {
-        text-align: left;
-        margin: 0;
-        background-color: #eee;
-        padding: 3px;
-    }
-}
 
 .path-backup .wibbler {
     width: 500px;
@@ -284,17 +215,3 @@
     }
 }
 
-.path-backup .backup_log {
-    margin-top: 2em;
-
-    h2 {
-        font-size: 1em;
-    }
-}
-
-.path-backup .backup_log_contents {
-    border: $border-width solid $card-border-color;
-    padding: $spacer;
-    height: 300px;
-    overflow-y: scroll;
-}