From fe3db0ca088b44095cfa0c891a481c147ee288c0 Mon Sep 17 00:00:00 2001 From: Damyon Wiese 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; -}