From de047f3767e6276169eec5fa769275057f0bbac6 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Mikel=20Mart=C3=ADn?= Date: Thu, 18 Jan 2024 19:37:23 +0100 Subject: [PATCH] MDL-80621 core_courseformat: Add new activity separator styles - Created a new divider template to generate activity and section dividers - Refactored templates and styles for the course sections for the new section dividers - Changed the topics format 'hasaddsection' property to 'true' so now adding sections to the bottom of the course will be handled by the format instead of the last section. Also re-styled this 'Add topic' button. - Refactored templates and styles for the course activities for the new activity dividers - Fixed some related behat that failed because of these changes - Moved blocks related SCSS to the blocks file and removed some unused SCSS --- .../format/templates/local/content.mustache | 8 +- .../local/content/addsection.mustache | 12 +- .../templates/local/content/cm.mustache | 9 +- .../templates/local/content/divider.mustache | 34 ++ .../templates/local/content/section.mustache | 26 +- .../section/addsectiondivider.mustache | 55 +++ .../local/content/section/content.mustache | 7 - .../tests/behat/course_courseindex.feature | 2 +- .../format/tests/behat/section_page.feature | 5 + .../classes/output/courseformat/content.php | 6 +- .../tests/behat/edit_delete_sections.feature | 5 +- .../templates/activitychooserbutton.mustache | 22 +- .../activitychooserbuttonactivity.mustache | 15 +- .../tests/behat/activity_chooser_plus.feature | 4 +- theme/boost/scss/moodle/blocks.scss | 23 ++ theme/boost/scss/moodle/course.scss | 375 +++++++++--------- theme/boost/style/moodle.css | 332 +++++++--------- theme/classic/style/moodle.css | 332 +++++++--------- 18 files changed, 668 insertions(+), 604 deletions(-) create mode 100644 course/format/templates/local/content/divider.mustache create mode 100644 course/format/templates/local/content/section/addsectiondivider.mustache diff --git a/course/format/templates/local/content.mustache b/course/format/templates/local/content.mustache index 8c27b50bc7d..de857678c25 100644 --- a/course/format/templates/local/content.mustache +++ b/course/format/templates/local/content.mustache @@ -203,9 +203,11 @@ {{/hasnavigation}} {{#numsections}} - {{$ core_courseformat/local/content/addsection}} - {{> core_courseformat/local/content/addsection}} - {{/ core_courseformat/local/content/addsection}} + {{^singlesection}} + {{$ core_courseformat/local/content/addsection}} + {{> core_courseformat/local/content/addsection}} + {{/ core_courseformat/local/content/addsection}} + {{/singlesection}} {{/numsections}} {{#bulkedittools}} {{$ core_courseformat/local/content/bulkedittools}} diff --git a/course/format/templates/local/content/addsection.mustache b/course/format/templates/local/content/addsection.mustache index 623911a88b9..ffd8064037d 100644 --- a/course/format/templates/local/content/addsection.mustache +++ b/course/format/templates/local/content/addsection.mustache @@ -39,7 +39,7 @@ } }} {{#showaddsection}} -
+ {{/showaddsection}} diff --git a/course/format/templates/local/content/cm.mustache b/course/format/templates/local/content/cm.mustache index b22295ffc55..8e2102b6ac6 100644 --- a/course/format/templates/local/content/cm.mustache +++ b/course/format/templates/local/content/cm.mustache @@ -58,13 +58,10 @@ } }} {{#editing}} -
- {{> core_course/activitychooserbuttonactivity}} -
+ {{< core_courseformat/local/content/divider}} + {{$content}}{{> core_course/activitychooserbuttonactivity}}{{/content}} + {{/ core_courseformat/local/content/divider}} {{/editing}} - -
-
diff --git a/course/format/templates/local/content/divider.mustache b/course/format/templates/local/content/divider.mustache new file mode 100644 index 00000000000..04d646e07c0 --- /dev/null +++ b/course/format/templates/local/content/divider.mustache @@ -0,0 +1,34 @@ +{{! + This file is part of Moodle - http://moodle.org/ + + Moodle is free software: you can redistribute it and/or modify + it under the terms of the GNU General Public License as published by + the Free Software Foundation, either version 3 of the License, or + (at your option) any later version. + + Moodle is distributed in the hope that it will be useful, + but WITHOUT ANY WARRANTY; without even the implied warranty of + MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the + GNU General Public License for more details. + + You should have received a copy of the GNU General Public License + along with Moodle. If not, see . +}} +{{! + @template core_courseformat/local/content/divider + + Displays a dashed divider. + + Example context (json): + { + "extraclasses": "mt-3", + "content": "" + } +}} + +
+
+
+ {{$content}}{{content}}{{/content}} +
+
diff --git a/course/format/templates/local/content/section.mustache b/course/format/templates/local/content/section.mustache index 0e33a56e7ec..3132864fcee 100644 --- a/course/format/templates/local/content/section.mustache +++ b/course/format/templates/local/content/section.mustache @@ -96,13 +96,23 @@ data-id="{{id}}" data-number="{{num}}" > -
- {{$ core_courseformat/local/content/section/content }} - {{> core_courseformat/local/content/section/content }} - {{/ core_courseformat/local/content/section/content }} +
+
+ {{$ core_courseformat/local/content/section/content }} + {{> core_courseformat/local/content/section/content }} + {{/ core_courseformat/local/content/section/content }} +
+ + {{#insertafter}} + {{#numsections}} + {{$ core_courseformat/local/content/addsection}} + {{> core_courseformat/local/content/section/addsectiondivider }} + {{/ core_courseformat/local/content/addsection}} + {{/numsections}} + {{/insertafter}} diff --git a/course/format/templates/local/content/section/addsectiondivider.mustache b/course/format/templates/local/content/section/addsectiondivider.mustache new file mode 100644 index 00000000000..ccdaa5cc67b --- /dev/null +++ b/course/format/templates/local/content/section/addsectiondivider.mustache @@ -0,0 +1,55 @@ +{{! + This file is part of Moodle - http://moodle.org/ + + Moodle is free software: you can redistribute it and/or modify + it under the terms of the GNU General Public License as published by + the Free Software Foundation, either version 3 of the License, or + (at your option) any later version. + + Moodle is distributed in the hope that it will be useful, + but WITHOUT ANY WARRANTY; without even the implied warranty of + MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the + GNU General Public License for more details. + + You should have received a copy of the GNU General Public License + along with Moodle. If not, see . +}} +{{! + @template core_courseformat/local/content/section/addsectiondivider + + Displays the add section divider inside a section. + + Example context (json): + { + "showaddsection": true, + "id": 42, + "insertafter": true, + "num": 0, + "addsections": { + "url": "#", + "title": "Add section", + "newsection": 3 + } + } +}} +{{#showaddsection}} +
+ {{#addsections}} + {{< core_courseformat/local/content/divider}} + {{$extraclasses}}always-hidden mt-2{{/extraclasses}} + {{$content}} + + {{#pix}} t/add, core {{/pix}} + {{title}} + + {{/content}} + {{/ core_courseformat/local/content/divider}} + {{/addsections}} +
+{{/showaddsection}} diff --git a/course/format/templates/local/content/section/content.mustache b/course/format/templates/local/content/section/content.mustache index 3e776a1eaa0..b73e5343332 100644 --- a/course/format/templates/local/content/section/content.mustache +++ b/course/format/templates/local/content/section/content.mustache @@ -178,10 +178,3 @@ {{/ core_courseformat/local/content/section/cmlist }} {{/cmlist}} {{{cmcontrols}}} -{{#insertafter}} - {{#numsections}} - {{$ core_courseformat/local/content/addsection}} - {{> core_courseformat/local/content/addsection}} - {{/ core_courseformat/local/content/addsection}} - {{/numsections}} -{{/insertafter}} diff --git a/course/format/tests/behat/course_courseindex.feature b/course/format/tests/behat/course_courseindex.feature index 9aee7ea6444..ca477a46dd3 100644 --- a/course/format/tests/behat/course_courseindex.feature +++ b/course/format/tests/behat/course_courseindex.feature @@ -257,7 +257,7 @@ Feature: Course index depending on role Scenario: Adding section should alter the course index Given I log in as "teacher1" And I am on "Course 1" course homepage with editing mode on - When I click on "Add section" "link" in the "Topic 4" "section" + When I click on "Add section" "link" in the "course-addsection" "region" Then I should see "Topic 5" in the "courseindex-content" "region" @javascript diff --git a/course/format/tests/behat/section_page.feature b/course/format/tests/behat/section_page.feature index 420e91deb82..39eb1e78498 100644 --- a/course/format/tests/behat/section_page.feature +++ b/course/format/tests/behat/section_page.feature @@ -84,3 +84,8 @@ Feature: Single section course page And I am on "Course 1" course homepage And I navigate to "Reports > Live logs" in current page administration And I should see "Section viewed" + + Scenario: The add section button is not displayed in the single section page + Given I turn editing mode on + When I click on "View" "link" in the "Topic 1" "section" + Then "Add section" "link" should not exist in the "region-main" "region" diff --git a/course/format/topics/classes/output/courseformat/content.php b/course/format/topics/classes/output/courseformat/content.php index 68a12ce8002..3f529a2b428 100644 --- a/course/format/topics/classes/output/courseformat/content.php +++ b/course/format/topics/classes/output/courseformat/content.php @@ -37,11 +37,9 @@ use renderer_base; class content extends content_base { /** - * @var bool Topic format has add section after each topic. - * - * The responsible for the buttons is core_courseformat\output\local\content\section. + * @var bool Topic format has also add section after each topic. */ - protected $hasaddsection = false; + protected $hasaddsection = true; /** * Export this data so it can be used as the context for a mustache template (core/inplace_editable). diff --git a/course/format/topics/tests/behat/edit_delete_sections.feature b/course/format/topics/tests/behat/edit_delete_sections.feature index d2cc179689d..839e192e36c 100644 --- a/course/format/topics/tests/behat/edit_delete_sections.feature +++ b/course/format/topics/tests/behat/edit_delete_sections.feature @@ -79,12 +79,13 @@ Feature: Sections can be edited and deleted in custom sections format @javascript Scenario: Adding sections at the end of a custom sections format - When I click on "Add section" "link" in the "Topic 5" "section" + When I click on "Add section" "link" in the "course-addsection" "region" Then I should see "Topic 6" in the "Topic 6" "section" And I should see "Test choice name" in the "Topic 5" "section" @javascript Scenario: Adding sections between topics in custom sections format + Given I hover over the "Add section" "link" in the "Topic 4" "section" When I click on "Add section" "link" in the "Topic 4" "section" Then I should see "Topic 6" in the "Topic 6" "section" And I should not see "Test choice name" in the "Topic 5" "section" @@ -92,7 +93,7 @@ Feature: Sections can be edited and deleted in custom sections format @javascript Scenario: Add a topic and then add an activity in it - When I click on "Add section" "link" in the "Topic 5" "section" + When I click on "Add section" "link" in the "course-addsection" "region" And I add an assign activity to course "Course 1" section "6" and I fill the form with: | Assignment name | Very new activity | | Description | Test | diff --git a/course/templates/activitychooserbutton.mustache b/course/templates/activitychooserbutton.mustache index fc15a37c873..2445e72f5f4 100644 --- a/course/templates/activitychooserbutton.mustache +++ b/course/templates/activitychooserbutton.mustache @@ -29,12 +29,16 @@ "sectionreturn": 0 } }} - +{{< core_courseformat/local/content/divider}} + {{$extraclasses}}always-visible my-3{{/extraclasses}} + {{$content}} + + {{/content}} +{{/ core_courseformat/local/content/divider}} diff --git a/course/templates/activitychooserbuttonactivity.mustache b/course/templates/activitychooserbuttonactivity.mustache index 773e6657307..bfdd774c75b 100644 --- a/course/templates/activitychooserbuttonactivity.mustache +++ b/course/templates/activitychooserbuttonactivity.mustache @@ -31,12 +31,13 @@ "sectionreturn": 5 } }} - diff --git a/course/tests/behat/activity_chooser_plus.feature b/course/tests/behat/activity_chooser_plus.feature index 0599b93e02f..468d8d289b3 100644 --- a/course/tests/behat/activity_chooser_plus.feature +++ b/course/tests/behat/activity_chooser_plus.feature @@ -24,9 +24,9 @@ Feature: Use the activity chooser to insert activities anywhere in a section Scenario: The activity chooser icon is hidden by default and be made visible on hover Given I hover ".navbar-brand" "css_element" - And "[data-action='insert-before-Test Forum'] button" "css_element" should not be visible + And "Insert an activity or resource before 'Test Forum'" "button" should not be visible When I hover "Insert an activity or resource before 'Test Forum'" "button" - Then "[data-action='insert-before-Test Forum'] button" "css_element" should be visible + Then "Insert an activity or resource before 'Test Forum'" "button" should be visible Scenario: The activity chooser can be used to insert modules before existing modules Given I hover "Insert an activity or resource before 'Test Forum'" "button" diff --git a/theme/boost/scss/moodle/blocks.scss b/theme/boost/scss/moodle/blocks.scss index 8f730f59b52..e0e30826fae 100644 --- a/theme/boost/scss/moodle/blocks.scss +++ b/theme/boost/scss/moodle/blocks.scss @@ -386,3 +386,26 @@ $card-gutter : $card-deck-margin * 2; } } } + +// +// Block add button +// +.block-add { + @include alert-variant($primary-light-background, $primary-light-border, $primary); + @include border-radius(); + width: 100%; + border-width: $border-width; + .pluscontainer { + border: $border-width solid $primary-light-border; + border-radius: 50%; + width: map-get($iconsizes, 5); + height: map-get($iconsizes, 5); + } + &:hover { + cursor: pointer; + background-color: $primary-light-background; + .activity-add-text { + text-decoration: underline; + } + } +} diff --git a/theme/boost/scss/moodle/course.scss b/theme/boost/scss/moodle/course.scss index 0eac18a9b95..095b00bb12e 100644 --- a/theme/boost/scss/moodle/course.scss +++ b/theme/boost/scss/moodle/course.scss @@ -2,34 +2,10 @@ /* COURSE CONTENT */ -.section_add_menus { - text-align: right; - clear: both; -} - .block_tree .tree_item.branch { margin-left: 8px; } -.section_add_menus .horizontal div, -.section_add_menus .horizontal form { - display: inline; -} - -.section_add_menus optgroup { - font-weight: normal; - font-style: italic; -} -/*rtl:ignore*/ -.section_add_menus .urlselect { - text-align: left; - margin-left: .4em; -} -/*rtl:ignore*/ -.section_add_menus .urlselect select { - margin-left: .2em; -} - .section { .side { &.left { @@ -325,24 +301,6 @@ top: 0; } -.course-content .section-summary { - border: 1px solid $table-border-color; - margin-top: 5px; - list-style: none; -} - -.course-content .section-summary .section-title { - margin: 2px 5px 10px 5px; -} - -.course-content .section-summary .summarytext { - margin: 2px 5px 2px 5px; -} - -.course-content .section-summary .summary { - margin-top: 5px; -} - .course-content .single-section .section-navigation { display: block; padding: 0.5em; @@ -403,8 +361,6 @@ list-style: none; li.section { - padding-top: $spacer; - padding-bottom: $spacer; .content { margin: 0; padding: 0; @@ -1163,12 +1119,12 @@ span.editinstructions { /* Variables definition*/ -$activity-item-background: theme-color-level('primary', -12) !default; -$activity-item-border: theme-color-level('primary', -2) !default; -$activity-item-color: $body-color !default; -$activity-item-hover: theme-color-level('primary', -12) !default; -$activity-item-border-radius: 1rem !default; -$activity-add-hover: theme-color-level('primary', -10) !default; +$activity-border-radius: 1rem !default; +$activity-border-width: 2px !default; +$activity-hover-border-color: $primary !default; +$divider-color: $gray-300 !default; +$divider-width: 2px !default; +$divider-hover-color: $primary !default; /* Functions/Mixins definition */ @@ -1195,49 +1151,6 @@ $activity-add-hover: theme-color-level('primary', -10) !default; } } -/* Activity & Block 'add' buttons */ - -.activity-add, -.block-add { - @include alert-variant($primary-light-background, $primary-light-border, $primary); - border-width: $border-width; - .pluscontainer { - border: $border-width solid $primary-light-border; - border-radius: 50%; - width: map-get($iconsizes, 5); - height: map-get($iconsizes, 5); - } - &:hover { - cursor: pointer; - background-color: $activity-add-hover; - .activity-add-text { - text-decoration: underline; - } - } - width: 100%; -} - -.block-add { - @include border-radius(); -} - -.activity-add { - @include border-radius($activity-item-border-radius); -} - -/* Add section */ - -.changenumsections { - border-top: $border-width solid $primary-light-border; -} - -.add-sections { - .icon { - margin-right: map-get($spacers, 1); - font-size: inherit; - } -} - /* Section Expand all/Collapse all */ .section-collapsemenu { @@ -1264,13 +1177,22 @@ $activity-add-hover: theme-color-level('primary', -10) !default; .course-section { list-style: none; - padding: map-get($spacers, 3); margin-top: map-get($spacers, 3); - border: $border-width solid $border-color; - @include border-radius($activity-item-border-radius); + // Custom styles for course sections while editing. + .editing & { + margin-top: map-get($spacers, 2); + } + + .section-item { + padding: map-get($spacers, 3); + border: $border-width solid $border-color; + @include border-radius($activity-border-radius); + } &.hidden { - background-color: $gray-100; + .section-item { + background-color: $gray-100; + } } .sectionname > a { @@ -1297,7 +1219,7 @@ $activity-add-hover: theme-color-level('primary', -10) !default; .summarytext { // Add rounded borders to images. img { - @include border-radius($activity-item-border-radius); + @include border-radius($activity-border-radius); } } @@ -1307,7 +1229,7 @@ $activity-add-hover: theme-color-level('primary', -10) !default; padding: map-get($spacers, 1) map-get($spacers, 3); background-color: $gray-200; @include font-size($small-font-size); - @include border-radius($activity-item-border-radius); + @include border-radius($activity-border-radius); .editavailability { a { @include border-radius(); @@ -1330,16 +1252,6 @@ $activity-add-hover: theme-color-level('primary', -10) !default; @include border-radius(); } - &.section-summary { - padding-left: map-get($spacers, 3); - padding-right: map-get($spacers, 3); - margin-bottom: map-get($spacers, 2); - margin-top: map-get($spacers, 2); - @if $enable-rounded { - @include border-radius(); - } - } - .section-summary-activities { .icon { width: inherit; @@ -1359,16 +1271,33 @@ $activity-add-hover: theme-color-level('primary', -10) !default; } } +// Course 'add section' button. +.btn.add-section { + @include border-radius($activity-border-radius); + border: $divider-width dashed $border-color; + color: $primary; + font-size: $font-size-sm; + font-weight: bold; + &:hover, + &:focus { + background-color: $primary-light-background; + border: $divider-width solid $primary; + color: $primary; + } +} + /* Single section page specific styles */ .single-section { // Revert main section's styles. > ul > .course-section { - padding: 0; - border: none; - &.hidden { + &.hidden .section-item { background-color: inherit; } + .section-item { + padding: 0; + border: none; + } } } @@ -1390,14 +1319,22 @@ $activity-add-hover: theme-color-level('primary', -10) !default; .activity { list-style: none; position: relative; + padding-top: map-get($spacers, 1); + margin-top: map-get($spacers, 1); + border-top: $border-width solid $border-color; + // Custom styles for activity while editing. + .editing & { + // Remove activity top border and spacing, while editing a separator is displayed. + padding-top: 0; + margin-top: 0; + border-top: none; + } } .activity-item { position: relative; - @include border-radius($activity-item-border-radius); - &:not(.activityinline) { - padding: .75rem; - } + padding: .75rem; + background-color: $white; &.activityinline { padding: .75rem 0; } @@ -1408,6 +1345,24 @@ $activity-add-hover: theme-color-level('primary', -10) !default; mix-blend-mode: multiply; } } + // Custom styles for activity cards while editing. + .editing & { + cursor: move; + border: $activity-border-width solid transparent; + @include border-radius($activity-border-radius); + .a { + cursor: pointer; + } + &:hover, + &.selected { + border: $activity-border-width solid $activity-hover-border-color; + box-shadow: $box-shadow-sm; + .activityiconcontainer, + .badge { + mix-blend-mode: multiply; + } + } + } // Activity card grid layout. .activity-grid { @@ -1483,12 +1438,12 @@ $activity-add-hover: theme-color-level('primary', -10) !default; // Prevent bootstrap strech-link from covering the inplace editable button using z-index. .activityname { .afterlink { - margin-left: 0.5rem; + margin-left: map-get($spacers, 2); } .inplaceeditable .quickeditlink { position: relative; z-index: 2; - margin-left: 0.5rem; + margin-left: map-get($spacers, 2); } } .activitybadge { @@ -1592,7 +1547,7 @@ $activity-add-hover: theme-color-level('primary', -10) !default; } // Add rounded borders to images. img { - @include border-radius($activity-item-border-radius); + @include border-radius($activity-border-radius); } } @@ -1612,97 +1567,129 @@ $activity-add-hover: theme-color-level('primary', -10) !default; } } -/* Activity card in editing mode */ - -.editing .activity-item { - cursor: move; - - .a { - cursor: pointer; - } - - &:hover, - &.selected { - @include alert-variant($activity-item-hover, $activity-item-border, $activity-item-color); - - .activityiconcontainer, - .badge { - mix-blend-mode: multiply; - } - } -} - .section .draggable .activity-item .dragicon { display: none; } -/* Activity divider */ +/* Dividers */ -.activity:focus-within + .activity div.divider button, -.course-section-header:focus-within + .content .section .activity:first-child div.divider button, -.content .section .activity:focus-within div.divider button { - visibility: visible; -} - -.activity { - div.divider { - position: absolute; +.divider { + position: relative; + hr { width: 100%; - height: 2rem; - margin-top: -1rem; - margin-bottom: -1rem; - z-index: 5; - button { - border-radius: 100%; - width: 2rem; - height: 2rem; - position: relative; - left: calc(50%); - opacity: 0; - visibility: hidden; - transition: visibility 0.1s; - margin: 0; - padding: 0; - i.icon { - height: 1.5rem; - width: 1.5rem; - font-size: 1.5rem; - position: absolute; - left: calc(0.25rem - 1px); - top: calc(0.25rem - 0.5px); - } + margin: map-get($spacers, 2) map-get($spacers, 1); + border-top: $divider-width dashed $divider-color; + } + .divider-content { + opacity: 0; + visibility: hidden; + transition: visibility 0.1s; + position: absolute; + background: linear-gradient(transparent 40%, $white 40%, $white 60%, transparent 60%); + .section.hidden & { + background: linear-gradient(transparent 40%, $gray-100 40%, $gray-100 60%, transparent 60%); } } - &:not(.dragging) div.divider { - &:hover button, - &:focus button, - &:focus-within button { + &.always-visible { + .divider-content { opacity: 1; visibility: visible; } } + &.always-hidden { + hr { + opacity: 0; + visibility: hidden; + } + } + &:hover, + &:focus, + &:focus-within { + .divider-content { + opacity: 1; + visibility: visible; + } + hr { + opacity: 1; + visibility: visible; + } + } + // Style the hr divider when the "Add content" button is hovered. + &:has(.btn.add-content:hover) { + hr { + border-color: $divider-hover-color; + } + } +} + +// These styles will make the activity and section dividers buttons visible (but still without opacity) so +// buttons can be keyboard focusable. +.activity:focus-within + .activity .divider .divider-content, +.course-section-header:focus-within + .content .section .activity:first-child .divider .divider-content, +.content .section .activity:focus-within .divider .divider-content, +.course-content:focus-within .changenumsections .divider .divider-content { + visibility: visible; +} + +// Hide last section "Add section". It will rely on the course format general "Add section" button. +.course-content ul.topics > li:last-child .changenumsections { + display: none; +} + +// Custom buttons for dividers. +.btn.add-content { + position: relative; + z-index: 1; + @include border-radius($rounded-pill); + font-size: $font-size-sm; + font-weight: bold; + color: theme-color-level("primary", $alert-color-level); + background-color: theme-color-level("primary", $alert-bg-level); + &:hover, + &:focus { + color: color-yiq($primary); + background-color: $primary; + } + .icon { + width: 14px; + height: 14px; + font-size: 14px; + } } /* Bulk editing */ -.bulkenabled .bulk-hidden { - display: none !important; // stylelint-disable-line declaration-no-important -} - -.activity-item .bulkselect { - position: absolute; - left: -2rem; -} - -.course-section-header .bulkselect { - left: -2rem; - position: relative; - width: 0; -} - -@include media-breakpoint-down(sm) { - .bulkenabled .course-content { +.bulkenabled { + .bulk-hidden { + display: none !important; // stylelint-disable-line declaration-no-important + } + .section:not(:first-child) { + margin-top: map-get($spacers, 4); + } + .activity { + margin-top: map-get($spacers, 2); margin-left: 2rem; + padding-top: map-get($spacers, 2); + border-top: $divider-width dashed $divider-color; + &:first-child { + margin-top: map-get($spacers, 4); + } + } + .activity-item { + .bulkselect { + position: absolute; + left: -2rem; + } + } + .course-section-header .bulkselect { + left: -2.75rem; + position: relative; + width: 0; + } + @include media-breakpoint-down(sm) { + .course-content { + margin-left: 2rem; + } } } @@ -1726,7 +1713,7 @@ $activity-add-hover: theme-color-level('primary', -10) !default; .activity:first-of-type hr { display: none; } - .section { + .section-item { margin-bottom: map-get($spacers, 4); @include border-radius(); } diff --git a/theme/boost/style/moodle.css b/theme/boost/style/moodle.css index 06cbfe8dccf..a58096a1821 100644 --- a/theme/boost/style/moodle.css +++ b/theme/boost/style/moodle.css @@ -27207,6 +27207,34 @@ aside[id^=block-region-side-] .block_recentlyaccesseditems .dashboard-card-deck } } +.block-add { + color: #0f6cbf; + background-color: #f5f9fc; + border-color: #3584c9; + border-radius: 0.5rem; + width: 100%; + border-width: 1px; +} +.block-add hr { + border-top-color: #3077b5; +} +.block-add .alert-link { + color: #0b5190; +} +.block-add .pluscontainer { + border: 1px solid #3584c9; + border-radius: 50%; + width: 32px; + height: 32px; +} +.block-add:hover { + cursor: pointer; + background-color: #f5f9fc; +} +.block-add:hover .activity-add-text { + text-decoration: underline; +} + /* calendar.less */ .calendar_event_category { background-color: #e0cbe0; @@ -27896,36 +27924,10 @@ table.calendartable caption { /* course.less */ /* COURSE CONTENT */ -.section_add_menus { - text-align: right; - clear: both; -} - .block_tree .tree_item.branch { margin-left: 8px; } -.section_add_menus .horizontal div, -.section_add_menus .horizontal form { - display: inline; -} - -.section_add_menus optgroup { - font-weight: normal; - font-style: italic; -} - -/*rtl:ignore*/ -.section_add_menus .urlselect { - text-align: left; - margin-left: 0.4em; -} - -/*rtl:ignore*/ -.section_add_menus .urlselect select { - margin-left: 0.2em; -} - .section .side { margin-top: 0.5rem; } @@ -28158,24 +28160,6 @@ table.calendartable caption { top: 0; } -.course-content .section-summary { - border: 1px solid #dee2e6; - margin-top: 5px; - list-style: none; -} - -.course-content .section-summary .section-title { - margin: 2px 5px 10px 5px; -} - -.course-content .section-summary .summarytext { - margin: 2px 5px 2px 5px; -} - -.course-content .section-summary .summary { - margin-top: 5px; -} - .course-content .single-section .section-navigation { display: block; padding: 0.5em; @@ -28232,11 +28216,6 @@ table.calendartable caption { margin: 0; list-style: none; } -.course-content ul.topics li.section, -.course-content ul.weeks li.section { - padding-top: 1rem; - padding-bottom: 1rem; -} .course-content ul.topics li.section .content, .course-content ul.weeks li.section .content { margin: 0; @@ -28922,58 +28901,6 @@ span.editinstructions .alert-link { /* Variables definition*/ /* Functions/Mixins definition */ -/* Activity & Block 'add' buttons */ -.activity-add, -.block-add { - color: #0f6cbf; - background-color: #f5f9fc; - border-color: #3584c9; - border-width: 1px; - width: 100%; -} -.activity-add hr, -.block-add hr { - border-top-color: #3077b5; -} -.activity-add .alert-link, -.block-add .alert-link { - color: #0b5190; -} -.activity-add .pluscontainer, -.block-add .pluscontainer { - border: 1px solid #3584c9; - border-radius: 50%; - width: 32px; - height: 32px; -} -.activity-add:hover, -.block-add:hover { - cursor: pointer; - background-color: #cfe2f2; -} -.activity-add:hover .activity-add-text, -.block-add:hover .activity-add-text { - text-decoration: underline; -} - -.block-add { - border-radius: 0.5rem; -} - -.activity-add { - border-radius: 1rem; -} - -/* Add section */ -.changenumsections { - border-top: 1px solid #3584c9; -} - -.add-sections .icon { - margin-right: 0.25rem; - font-size: inherit; -} - /* Section Expand all/Collapse all */ .section-collapsemenu .collapseall { display: block; @@ -28991,12 +28918,17 @@ span.editinstructions .alert-link { /* Course section */ .course-section { list-style: none; - padding: 1rem; margin-top: 1rem; +} +.editing .course-section { + margin-top: 0.5rem; +} +.course-section .section-item { + padding: 1rem; border: 1px solid #dee2e6; border-radius: 1rem; } -.course-section.hidden { +.course-section.hidden .section-item { background-color: #f8f9fa; } .course-section .sectionname > a { @@ -29040,13 +28972,6 @@ span.editinstructions .alert-link { width: 32px; border-radius: 0.5rem; } -.course-section.section-summary { - padding-left: 1rem; - padding-right: 1rem; - margin-bottom: 0.5rem; - margin-top: 0.5rem; - border-radius: 0.5rem; -} .course-section .section-summary-activities .icon { width: inherit; color: #0f6cbf; @@ -29061,14 +28986,27 @@ span.editinstructions .alert-link { color: #0f6cbf; } +.btn.add-section { + border-radius: 1rem; + border: 2px dashed #dee2e6; + color: #0f6cbf; + font-size: 0.8203125rem; + font-weight: bold; +} +.btn.add-section:hover, .btn.add-section:focus { + background-color: #f5f9fc; + border: 2px solid #0f6cbf; + color: #0f6cbf; +} + /* Single section page specific styles */ -.single-section > ul > .course-section { +.single-section > ul > .course-section.hidden .section-item { + background-color: inherit; +} +.single-section > ul > .course-section .section-item { padding: 0; border: none; } -.single-section > ul > .course-section.hidden { - background-color: inherit; -} /* Re-style ordered list in course content */ .course-content .activity-altcontent ul { @@ -29085,14 +29023,20 @@ span.editinstructions .alert-link { .activity { list-style: none; position: relative; + padding-top: 0.25rem; + margin-top: 0.25rem; + border-top: 1px solid #dee2e6; +} +.editing .activity { + padding-top: 0; + margin-top: 0; + border-top: none; } .activity-item { position: relative; - border-radius: 1rem; -} -.activity-item:not(.activityinline) { padding: 0.75rem; + background-color: #fff; } .activity-item.activityinline { padding: 0.75rem 0; @@ -29104,6 +29048,23 @@ span.editinstructions .alert-link { .activity-item.hiddenactivity .badge { mix-blend-mode: multiply; } +.editing .activity-item { + cursor: move; + border: 2px solid transparent; + border-radius: 1rem; +} +.editing .activity-item .a { + cursor: pointer; +} +.editing .activity-item:hover, .editing .activity-item.selected { + border: 2px solid #0f6cbf; + box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075); +} +.editing .activity-item:hover .activityiconcontainer, +.editing .activity-item:hover .badge, .editing .activity-item.selected .activityiconcontainer, +.editing .activity-item.selected .badge { + mix-blend-mode: multiply; +} .activity-item .activity-grid { display: grid; align-items: center; @@ -29684,95 +29645,110 @@ span.editinstructions .alert-link { width: 100%; } -/* Activity card in editing mode */ -.editing .activity-item { - cursor: move; -} -.editing .activity-item .a { - cursor: pointer; -} -.editing .activity-item:hover, .editing .activity-item.selected { - color: #1d2125; - background-color: #f5f9fc; - border-color: #3584c9; -} -.editing .activity-item:hover hr, .editing .activity-item.selected hr { - border-top-color: #3077b5; -} -.editing .activity-item:hover .alert-link, .editing .activity-item.selected .alert-link { - color: #070808; -} -.editing .activity-item:hover .activityiconcontainer, -.editing .activity-item:hover .badge, .editing .activity-item.selected .activityiconcontainer, -.editing .activity-item.selected .badge { - mix-blend-mode: multiply; -} - .section .draggable .activity-item .dragicon { display: none; } -/* Activity divider */ -.activity:focus-within + .activity div.divider button, -.course-section-header:focus-within + .content .section .activity:first-child div.divider button, -.content .section .activity:focus-within div.divider button { - visibility: visible; -} - -.activity div.divider { - position: absolute; - width: 100%; - height: 2rem; - margin-top: -1rem; - margin-bottom: -1rem; - z-index: 5; -} -.activity div.divider button { - border-radius: 100%; - width: 2rem; - height: 2rem; +/* Dividers */ +.divider { position: relative; - left: 50%; +} +.divider hr { + width: 100%; + margin: 0.5rem 0.25rem; + border-top: 2px dashed #dee2e6; +} +.divider .divider-content { opacity: 0; visibility: hidden; transition: visibility 0.1s; - margin: 0; - padding: 0; -} -.activity div.divider button i.icon { - height: 1.5rem; - width: 1.5rem; - font-size: 1.5rem; position: absolute; - left: calc(0.25rem - 1px); - top: calc(0.25rem - 0.5px); + background: linear-gradient(transparent 40%, #fff 40%, #fff 60%, transparent 60%); } -.activity:not(.dragging) div.divider:hover button, .activity:not(.dragging) div.divider:focus button, .activity:not(.dragging) div.divider:focus-within button { +.section.hidden .divider .divider-content { + background: linear-gradient(transparent 40%, #f8f9fa 40%, #f8f9fa 60%, transparent 60%); +} +.divider.always-visible .divider-content { opacity: 1; visibility: visible; } +.divider.always-hidden hr { + opacity: 0; + visibility: hidden; +} +.divider:hover .divider-content, .divider:focus .divider-content, .divider:focus-within .divider-content { + opacity: 1; + visibility: visible; +} +.divider:hover hr, .divider:focus hr, .divider:focus-within hr { + opacity: 1; + visibility: visible; +} +.divider:has(.btn.add-content:hover) hr { + border-color: #0f6cbf; +} + +.activity:focus-within + .activity .divider .divider-content, +.course-section-header:focus-within + .content .section .activity:first-child .divider .divider-content, +.content .section .activity:focus-within .divider .divider-content, +.course-content:focus-within .changenumsections .divider .divider-content { + visibility: visible; +} + +.course-content ul.topics > li:last-child .changenumsections { + display: none; +} + +.btn.add-content { + position: relative; + z-index: 1; + border-radius: 50rem; + font-size: 0.8203125rem; + font-weight: bold; + color: #083863; + background-color: #cfe2f2; +} +.btn.add-content:hover, .btn.add-content:focus { + color: #fff; + background-color: #0f6cbf; +} +.btn.add-content .icon { + width: 14px; + height: 14px; + font-size: 14px; +} /* Bulk editing */ .bulkenabled .bulk-hidden { display: none !important; } - -.activity-item .bulkselect { +.bulkenabled .section:not(:first-child) { + margin-top: 1.5rem; +} +.bulkenabled .activity { + margin-top: 0.5rem; + margin-left: 2rem; + padding-top: 0.5rem; + border-top: 2px dashed #dee2e6; +} +.bulkenabled .activity:first-child { + margin-top: 1.5rem; +} +.bulkenabled .activity-item .bulkselect { position: absolute; left: -2rem; } - -.course-section-header .bulkselect { - left: -2rem; +.bulkenabled .course-section-header .bulkselect { + left: -2.75rem; position: relative; width: 0; } - @media (max-width: 767.98px) { .bulkenabled .course-content { margin-left: 2rem; } } + /* Activity completion */ .defaultactivitycompletion-item a { color: #000; @@ -29787,7 +29763,7 @@ span.editinstructions .alert-link { .sitetopic .activity:first-of-type hr { display: none; } -.sitetopic .section { +.sitetopic .section-item { margin-bottom: 1.5rem; border-radius: 0.5rem; } diff --git a/theme/classic/style/moodle.css b/theme/classic/style/moodle.css index d6adb76f1e5..970cd6a39e2 100644 --- a/theme/classic/style/moodle.css +++ b/theme/classic/style/moodle.css @@ -27207,6 +27207,34 @@ aside[id^=block-region-side-] .block_recentlyaccesseditems .dashboard-card-deck } } +.block-add { + color: #0f6cbf; + background-color: #f5f9fc; + border-color: #3584c9; + border-radius: 0.25rem; + width: 100%; + border-width: 1px; +} +.block-add hr { + border-top-color: #3077b5; +} +.block-add .alert-link { + color: #0b5190; +} +.block-add .pluscontainer { + border: 1px solid #3584c9; + border-radius: 50%; + width: 32px; + height: 32px; +} +.block-add:hover { + cursor: pointer; + background-color: #f5f9fc; +} +.block-add:hover .activity-add-text { + text-decoration: underline; +} + /* calendar.less */ .calendar_event_category { background-color: #e0cbe0; @@ -27896,36 +27924,10 @@ table.calendartable caption { /* course.less */ /* COURSE CONTENT */ -.section_add_menus { - text-align: right; - clear: both; -} - .block_tree .tree_item.branch { margin-left: 8px; } -.section_add_menus .horizontal div, -.section_add_menus .horizontal form { - display: inline; -} - -.section_add_menus optgroup { - font-weight: normal; - font-style: italic; -} - -/*rtl:ignore*/ -.section_add_menus .urlselect { - text-align: left; - margin-left: 0.4em; -} - -/*rtl:ignore*/ -.section_add_menus .urlselect select { - margin-left: 0.2em; -} - .section .side { margin-top: 0.5rem; } @@ -28158,24 +28160,6 @@ table.calendartable caption { top: 0; } -.course-content .section-summary { - border: 1px solid #dee2e6; - margin-top: 5px; - list-style: none; -} - -.course-content .section-summary .section-title { - margin: 2px 5px 10px 5px; -} - -.course-content .section-summary .summarytext { - margin: 2px 5px 2px 5px; -} - -.course-content .section-summary .summary { - margin-top: 5px; -} - .course-content .single-section .section-navigation { display: block; padding: 0.5em; @@ -28232,11 +28216,6 @@ table.calendartable caption { margin: 0; list-style: none; } -.course-content ul.topics li.section, -.course-content ul.weeks li.section { - padding-top: 1rem; - padding-bottom: 1rem; -} .course-content ul.topics li.section .content, .course-content ul.weeks li.section .content { margin: 0; @@ -28922,58 +28901,6 @@ span.editinstructions .alert-link { /* Variables definition*/ /* Functions/Mixins definition */ -/* Activity & Block 'add' buttons */ -.activity-add, -.block-add { - color: #0f6cbf; - background-color: #f5f9fc; - border-color: #3584c9; - border-width: 1px; - width: 100%; -} -.activity-add hr, -.block-add hr { - border-top-color: #3077b5; -} -.activity-add .alert-link, -.block-add .alert-link { - color: #0b5190; -} -.activity-add .pluscontainer, -.block-add .pluscontainer { - border: 1px solid #3584c9; - border-radius: 50%; - width: 32px; - height: 32px; -} -.activity-add:hover, -.block-add:hover { - cursor: pointer; - background-color: #cfe2f2; -} -.activity-add:hover .activity-add-text, -.block-add:hover .activity-add-text { - text-decoration: underline; -} - -.block-add { - border-radius: 0.25rem; -} - -.activity-add { - border-radius: 1rem; -} - -/* Add section */ -.changenumsections { - border-top: 1px solid #3584c9; -} - -.add-sections .icon { - margin-right: 0.25rem; - font-size: inherit; -} - /* Section Expand all/Collapse all */ .section-collapsemenu .collapseall { display: block; @@ -28991,12 +28918,17 @@ span.editinstructions .alert-link { /* Course section */ .course-section { list-style: none; - padding: 1rem; margin-top: 1rem; +} +.editing .course-section { + margin-top: 0.5rem; +} +.course-section .section-item { + padding: 1rem; border: 1px solid #dee2e6; border-radius: 1rem; } -.course-section.hidden { +.course-section.hidden .section-item { background-color: #f8f9fa; } .course-section .sectionname > a { @@ -29040,13 +28972,6 @@ span.editinstructions .alert-link { width: 32px; border-radius: 0.25rem; } -.course-section.section-summary { - padding-left: 1rem; - padding-right: 1rem; - margin-bottom: 0.5rem; - margin-top: 0.5rem; - border-radius: 0.25rem; -} .course-section .section-summary-activities .icon { width: inherit; color: #0f6cbf; @@ -29061,14 +28986,27 @@ span.editinstructions .alert-link { color: #0f6cbf; } +.btn.add-section { + border-radius: 1rem; + border: 2px dashed #dee2e6; + color: #0f6cbf; + font-size: 0.8203125rem; + font-weight: bold; +} +.btn.add-section:hover, .btn.add-section:focus { + background-color: #f5f9fc; + border: 2px solid #0f6cbf; + color: #0f6cbf; +} + /* Single section page specific styles */ -.single-section > ul > .course-section { +.single-section > ul > .course-section.hidden .section-item { + background-color: inherit; +} +.single-section > ul > .course-section .section-item { padding: 0; border: none; } -.single-section > ul > .course-section.hidden { - background-color: inherit; -} /* Re-style ordered list in course content */ .course-content .activity-altcontent ul { @@ -29085,14 +29023,20 @@ span.editinstructions .alert-link { .activity { list-style: none; position: relative; + padding-top: 0.25rem; + margin-top: 0.25rem; + border-top: 1px solid #dee2e6; +} +.editing .activity { + padding-top: 0; + margin-top: 0; + border-top: none; } .activity-item { position: relative; - border-radius: 1rem; -} -.activity-item:not(.activityinline) { padding: 0.75rem; + background-color: #fff; } .activity-item.activityinline { padding: 0.75rem 0; @@ -29104,6 +29048,23 @@ span.editinstructions .alert-link { .activity-item.hiddenactivity .badge { mix-blend-mode: multiply; } +.editing .activity-item { + cursor: move; + border: 2px solid transparent; + border-radius: 1rem; +} +.editing .activity-item .a { + cursor: pointer; +} +.editing .activity-item:hover, .editing .activity-item.selected { + border: 2px solid #0f6cbf; + box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075); +} +.editing .activity-item:hover .activityiconcontainer, +.editing .activity-item:hover .badge, .editing .activity-item.selected .activityiconcontainer, +.editing .activity-item.selected .badge { + mix-blend-mode: multiply; +} .activity-item .activity-grid { display: grid; align-items: center; @@ -29684,95 +29645,110 @@ span.editinstructions .alert-link { width: 100%; } -/* Activity card in editing mode */ -.editing .activity-item { - cursor: move; -} -.editing .activity-item .a { - cursor: pointer; -} -.editing .activity-item:hover, .editing .activity-item.selected { - color: #1d2125; - background-color: #f5f9fc; - border-color: #3584c9; -} -.editing .activity-item:hover hr, .editing .activity-item.selected hr { - border-top-color: #3077b5; -} -.editing .activity-item:hover .alert-link, .editing .activity-item.selected .alert-link { - color: #070808; -} -.editing .activity-item:hover .activityiconcontainer, -.editing .activity-item:hover .badge, .editing .activity-item.selected .activityiconcontainer, -.editing .activity-item.selected .badge { - mix-blend-mode: multiply; -} - .section .draggable .activity-item .dragicon { display: none; } -/* Activity divider */ -.activity:focus-within + .activity div.divider button, -.course-section-header:focus-within + .content .section .activity:first-child div.divider button, -.content .section .activity:focus-within div.divider button { - visibility: visible; -} - -.activity div.divider { - position: absolute; - width: 100%; - height: 2rem; - margin-top: -1rem; - margin-bottom: -1rem; - z-index: 5; -} -.activity div.divider button { - border-radius: 100%; - width: 2rem; - height: 2rem; +/* Dividers */ +.divider { position: relative; - left: 50%; +} +.divider hr { + width: 100%; + margin: 0.5rem 0.25rem; + border-top: 2px dashed #dee2e6; +} +.divider .divider-content { opacity: 0; visibility: hidden; transition: visibility 0.1s; - margin: 0; - padding: 0; -} -.activity div.divider button i.icon { - height: 1.5rem; - width: 1.5rem; - font-size: 1.5rem; position: absolute; - left: calc(0.25rem - 1px); - top: calc(0.25rem - 0.5px); + background: linear-gradient(transparent 40%, #fff 40%, #fff 60%, transparent 60%); } -.activity:not(.dragging) div.divider:hover button, .activity:not(.dragging) div.divider:focus button, .activity:not(.dragging) div.divider:focus-within button { +.section.hidden .divider .divider-content { + background: linear-gradient(transparent 40%, #f8f9fa 40%, #f8f9fa 60%, transparent 60%); +} +.divider.always-visible .divider-content { opacity: 1; visibility: visible; } +.divider.always-hidden hr { + opacity: 0; + visibility: hidden; +} +.divider:hover .divider-content, .divider:focus .divider-content, .divider:focus-within .divider-content { + opacity: 1; + visibility: visible; +} +.divider:hover hr, .divider:focus hr, .divider:focus-within hr { + opacity: 1; + visibility: visible; +} +.divider:has(.btn.add-content:hover) hr { + border-color: #0f6cbf; +} + +.activity:focus-within + .activity .divider .divider-content, +.course-section-header:focus-within + .content .section .activity:first-child .divider .divider-content, +.content .section .activity:focus-within .divider .divider-content, +.course-content:focus-within .changenumsections .divider .divider-content { + visibility: visible; +} + +.course-content ul.topics > li:last-child .changenumsections { + display: none; +} + +.btn.add-content { + position: relative; + z-index: 1; + border-radius: 50rem; + font-size: 0.8203125rem; + font-weight: bold; + color: #083863; + background-color: #cfe2f2; +} +.btn.add-content:hover, .btn.add-content:focus { + color: #fff; + background-color: #0f6cbf; +} +.btn.add-content .icon { + width: 14px; + height: 14px; + font-size: 14px; +} /* Bulk editing */ .bulkenabled .bulk-hidden { display: none !important; } - -.activity-item .bulkselect { +.bulkenabled .section:not(:first-child) { + margin-top: 1.5rem; +} +.bulkenabled .activity { + margin-top: 0.5rem; + margin-left: 2rem; + padding-top: 0.5rem; + border-top: 2px dashed #dee2e6; +} +.bulkenabled .activity:first-child { + margin-top: 1.5rem; +} +.bulkenabled .activity-item .bulkselect { position: absolute; left: -2rem; } - -.course-section-header .bulkselect { - left: -2rem; +.bulkenabled .course-section-header .bulkselect { + left: -2.75rem; position: relative; width: 0; } - @media (max-width: 767.98px) { .bulkenabled .course-content { margin-left: 2rem; } } + /* Activity completion */ .defaultactivitycompletion-item a { color: #000; @@ -29787,7 +29763,7 @@ span.editinstructions .alert-link { .sitetopic .activity:first-of-type hr { display: none; } -.sitetopic .section { +.sitetopic .section-item { margin-bottom: 1.5rem; border-radius: 0.25rem; }