From 4b757dfaa1ae4dba3ceb685d73985d6c4f27a707 Mon Sep 17 00:00:00 2001 From: Alexander Bias <alexander.bias@uni-ulm.de> Date: Tue, 17 Aug 2021 12:36:20 +0200 Subject: [PATCH] Improvement: Adjusted tab appearance for in-course settings. --- CHANGES.md | 1 + scss/post.scss | 37 ++++++++++++++++++++++++++++++------- 2 files changed, 31 insertions(+), 7 deletions(-) diff --git a/CHANGES.md b/CHANGES.md index a6aa7e0..d6bcf2f 100644 --- a/CHANGES.md +++ b/CHANGES.md @@ -6,6 +6,7 @@ Changes ### Unreleased +* 2021-08-16 - Improvement: Adjusted tab appearance for in-course settings. * 2021-08-16 - Adjusted settings_link_page.mustache template due to upstream changes in theme Boost. * 2021-08-16 - Adjusted loginform.mustache template due to upstream changes in theme Boost. * 2021-08-16 - Bugfix: Remove overwritten template full_header.mustache. If the setting showsettingsincourse is enabled, this will place the cog icon _over_ instead of _near_ the edit button. This will fix a presentation issue with the in-course settings menu on smaller screens. diff --git a/scss/post.scss b/scss/post.scss index e4967fc..1f82410 100644 --- a/scss/post.scss +++ b/scss/post.scss @@ -952,21 +952,44 @@ body.scrolled #goto-top-link { #boost-campus-activity-settings { /* Initially do not display the settings. Visibility will be changed on click with incoursesettings.js. */ display: none; + + /* Improve layout and look of the settings as they are now placed within the page header. */ margin-bottom: 1rem; - padding: 0 1rem 1.3rem 1rem; + .tab-content .card { + border: none; + } + /* Improve styling of the tabs so that they look more like real tabs. */ .nav-tabs { border: none; - .active { - background-color: darken($body-bg, 5%); - border-color: darken($body-bg, 5%); - } } - /* Improve color of tab content so it looks more like a real tab. */ .tab-content .card { background-color: darken($body-bg, 5%); - border: none; } + + /* Do some more tweaks on smaller screens and bigger screens differently as Moodle uses different styles. */ + @include media-breakpoint-up(md) { + /* Add some space. */ + padding: 0 1rem 1.3rem 1rem; + + /* Highlight the active tab. */ + .nav-tabs { + .active { + background-color: darken($body-bg, 5%); + border-color: darken($body-bg, 5%); + } + } + } + @include media-breakpoint-down(sm) { + /* Add some space. */ + padding: 1rem 0 1.3rem 0; + + /* Remove the border around the course settings card as it would be incomplete. */ + &.card { + border: none; + } + } + } /* As this is already placed within the activity content card, the border around the settings card should be removed. */ -- GitLab