feat: declutter the list view

adil192 · Jan 28, 2024 · ee86b16 · ee86b16
1 parent 6cb00ed
commit ee86b16
Show file tree

Hide file tree

Showing 4 changed files with 137 additions and 41 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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