From ee86b167f1c9e880b7900efed3bed43c936a194c Mon Sep 17 00:00:00 2001 From: Adil Hanney Date: Sun, 28 Jan 2024 04:14:05 +0000 Subject: [PATCH] feat: declutter the list view --- CHANGELOG.md | 5 +- main.css | 81 ++++++++++++++----- styles/_online.manchester.ac.uk_ultra.scss | 90 +++++++++++++++++----- styles/_version.scss | 2 +- 4 files changed, 137 insertions(+), 41 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 4a4be0c..8a4632b 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -5,8 +5,9 @@ Here I will outline the changes I've made over time... ### 20240127 - Initial stylings for the course page of the new Blackboard Ultra website, including: - - Reduced the size of each course card to fit more on the screen. - - Decluttered the text in each course code, removing the internal module code and the course status (open vs closed). + - Reduced the size of each course card (in the grid view) to fit more on the screen. + - Decluttered the list view, removing mostly everything apart from the module title. + - Decluttered the grid view, removing the internal module code and the course status (open vs closed). - Stopped cards moving up on hover. - Performance optimisations for the add_course_images script. - Versions prior to today break the new Blackboard Ultra website. It'll get stuck on the loading screen. Please update to the latest version of the script as soon as possible. diff --git a/main.css b/main.css index ad7ab3f..c2c2d12 100644 --- a/main.css +++ b/main.css @@ -1,6 +1,6 @@ /* ==UserStyle== @name UoM Blackboard theme -@version 20240127.02.00 +@version 20240127.03.00 @namespace userstyles.world/user/adil192 @description Themes the blackboard UoM website to look more modern and use a consistent colour scheme. @author adil192 @@ -175,10 +175,11 @@ border: none; background-color: #f2e9f6; color: #1d1b1e; - margin: 0 !important; - transition: background-color 0.1 ease-out; + transition: background-color 0.1s ease-out; + box-shadow: none !important; height: auto !important; min-height: 0; + --box-shadow: 1rem; } .course-org-list .course-element-card .course-banner { border-top-left-radius: inherit; @@ -199,10 +200,9 @@ .course-org-list .course-element-card .summary { background-color: inherit; border-radius: inherit; - margin-top: -1rem !important; min-height: 7.5rem; z-index: 1; - transition: background-color 0.1 ease-out; + transition: background-color 0.1s ease-out; } .course-org-list .course-element-card .summary .course-title { color: inherit; @@ -213,6 +213,7 @@ color: inherit; } .course-org-list .course-element-card .summary .multi-column-course-id, + .course-org-list .course-element-card .summary .course-id, .course-org-list .course-element-card .summary .course-status { display: none !important; } @@ -230,35 +231,79 @@ margin: 0 !important; flex: 1; } + .course-org-list .course-element-card::after { + all: unset; + content: ""; + display: block !important; + position: absolute; + inset: 0; + border-radius: inherit; + pointer-events: none; + box-shadow: 0 calc(var(--box-shadow) / 4) var(--box-shadow) 0 #1d1b1e !important; + opacity: 0.1; + transition: opacity 0.1s ease-out; + } + .course-org-list .course-element-card:hover::after { + opacity: 0.2; + } .multi-column-view .course-org-list .course-element-card { transform: none !important; transition-duration: 0.1s !important; transition-timing-function: ease-out !important; position: relative; box-shadow: none !important; + margin: 0 !important; } .multi-column-view .course-org-list .course-element-card .summary { grid-template-rows: auto !important; grid-template-columns: 1fr auto !important; + margin-top: -1rem !important; } - .multi-column-view .course-org-list .course-element-card::before { - all: unset; - content: ""; - display: block !important; - position: absolute; - inset: 0; - border-radius: inherit; - pointer-events: none; - box-shadow: 0 0.25rem 1rem 0 #1d1b1e !important; - opacity: 0.1; - transition: opacity 0.1s ease-out; + .list-column-view .course-org-list .course-card-term-name { + margin-bottom: 0.5rem; } - .multi-column-view .course-org-list .course-element-card:hover::before { - opacity: 0.2; + .list-column-view .course-org-list .course-color-classic::before { + background-color: #1d1b1e !important; } .list-column-view .course-org-list .course-element-card { border-top-left-radius: 0; border-bottom-left-radius: 0; + margin-bottom: 0.5rem !important; + --box-shadow: 0.5rem; + } + .list-column-view .course-org-list .course-element-card .summary { + display: flex; + flex-flow: row-reverse nowrap; + gap: 1rem; + min-height: 0; + } + .list-column-view .course-org-list .course-element-card .summary > .small-12:first-child { + display: none; + } + .list-column-view .course-org-list .course-element-card .course-title { + flex-grow: 1; + display: flex; + flex-flow: row wrap; + justify-content: space-between; + } + .list-column-view .course-org-list .course-element-card .course-type { + color: #1d1b1e; + opacity: 0.5; + } + .list-column-view .course-org-list .course-element-card .course-type:not(:empty)::before { + content: "("; + } + .list-column-view .course-org-list .course-element-card .course-type:not(:empty)::after { + content: ")"; + } + .list-column-view .course-org-list .course-element-card .element-details .status-bar { + display: none; + } + .list-column-view .course-org-list .course-element-card .controls { + padding: 0; + margin: 0; + width: auto; + height: auto; } #__SVG_SPRITE_NODE__ #icon-small-star-press > path { fill: #8142a6; diff --git a/styles/_online.manchester.ac.uk_ultra.scss b/styles/_online.manchester.ac.uk_ultra.scss index 46ff865..e0b869a 100644 --- a/styles/_online.manchester.ac.uk_ultra.scss +++ b/styles/_online.manchester.ac.uk_ultra.scss @@ -91,8 +91,8 @@ nav.term-navigator { border: none; background-color: $surface-1; color: $on-surface; - margin: 0 !important; - transition: background-color 0.1 ease-out; + transition: background-color 0.1s ease-out; + box-shadow: none !important; height: auto !important; min-height: 0; @@ -122,10 +122,9 @@ nav.term-navigator { .summary { background-color: inherit; border-radius: inherit; - margin-top: -1rem !important; min-height: 7.5rem; z-index: 1; - transition: background-color 0.1 ease-out; + transition: background-color 0.1s ease-out; .course-title { color: inherit; @@ -137,6 +136,7 @@ nav.term-navigator { } .multi-column-course-id, + .course-id, .course-status { display: none !important; } @@ -156,6 +156,25 @@ nav.term-navigator { } } } + + --box-shadow: 1rem; + &::after { + all: unset; + content: ""; + display: block !important; + position: absolute; + inset: 0; + border-radius: inherit; + pointer-events: none; + box-shadow: 0 calc(var(--box-shadow) / 4) + var(--box-shadow) 0 + $header !important; + opacity: 0.1; + transition: opacity 0.1s ease-out; + } + &:hover::after { + opacity: 0.2; + } } } @@ -166,34 +185,65 @@ nav.term-navigator { transition-timing-function: ease-out !important; position: relative; box-shadow: none !important; + margin: 0 !important; .summary { grid-template-rows: auto !important; grid-template-columns: 1fr auto !important; - } - - &::before { - all: unset; - content: ""; - display: block !important; - position: absolute; - inset: 0; - border-radius: inherit; - pointer-events: none; - box-shadow: 0 0.25rem 1rem 0 $header !important; - opacity: 0.1; - transition: opacity 0.1s ease-out; - } - &:hover::before { - opacity: 0.2; + margin-top: -1rem !important; } } } .list-column-view .course-org-list { + .course-card-term-name { + margin-bottom: 0.5rem; + } + .course-color-classic::before { + background-color: $header !important; + } .course-element-card { border-top-left-radius: 0; border-bottom-left-radius: 0; + margin-bottom: 0.5rem !important; + --box-shadow: 0.5rem; + + .summary { + display: flex; + flex-flow: row-reverse nowrap; + gap: 1rem; + min-height: 0; + + > .small-12:first-child { + display: none; + } + } + + .course-title { + flex-grow: 1; + display: flex; + flex-flow: row wrap; + justify-content: space-between; + } + + .course-type { + color: $on-surface; + opacity: 0.5; + } + .course-type:not(:empty) { + &::before { content: '('; } + &::after { content: ')'; } + } + + .element-details .status-bar { + display: none; + } + .controls { + padding: 0; + margin: 0; + width: auto; + height: auto; + } } } diff --git a/styles/_version.scss b/styles/_version.scss index 3a47689..54bfb6b 100644 --- a/styles/_version.scss +++ b/styles/_version.scss @@ -1,6 +1,6 @@ /* ==UserStyle== @name UoM Blackboard theme -@version 20240127.02.00 +@version 20240127.03.00 @namespace userstyles.world/user/adil192 @description Themes the blackboard UoM website to look more modern and use a consistent colour scheme. @author adil192