Upgrade: Adapt the course index icon feature visually to the new icon…

… sizes.
NJahreis · Jul 13, 2024 · 523004e · 523004e
1 parent 3c7a883
commit 523004e
Show file tree

Hide file tree

Showing 2 changed files with 20 additions and 2 deletions.
diff --git a/CHANGES.md b/CHANGES.md
@@ -6,6 +6,7 @@ Changes
 
 ### Unreleased
 
+* 2024-07-12 - Upgrade: Adapt the course index icon feature visually to the new icon sizes.
 * 2024-07-12 - Upgrade: Adopt changes for coloring the activity icons when modifying the activity purpose.
 * 2024-07-12 - Upgrade: Adopt new activity purpose "Interactive content" when coloring activity icons, resolves #611.
 * 2024-07-07 - Upgrade: Adopt changes for coloring the activity icons, moving from background-colors to CSS filters, resolves #631.

diff --git a/scss/boost_union/post.scss b/scss/boost_union/post.scss
@@ -333,6 +333,12 @@ body.hascourseindexcmicons {
             .courseindex-cmicon-icon .completioninfo {
                 display: none;
             }
+
+            /* And move the section title in the course index slightly to the right to align it vertically with the
+               activity title (which is now slightly more right as well) again. */
+            .courseindex-chevron {
+                padding-right: 14px;
+            }
         }
     }
 
@@ -349,6 +355,12 @@ body.hascourseindexcmicons {
             .courseindex-item .dragicon {
                 display: none;
             }
+
+            /* And move the section title in the course index slightly to the right to align it vertically with the
+               activity title (which is now slightly more right as well) again. */
+            .courseindex-chevron {
+                padding-right: 14px;
+            }
         }
     }
 
@@ -388,8 +400,7 @@ body.hascourseindexcmicons {
 
         /* General style of the course index activity type icon. */
         .courseindex-cmicon {
-            margin: 0.2rem;
-            margin-top: 0;
+            margin: 0.1rem;
             display: inline-flex;
             justify-content: center;
             align-items: center;
@@ -398,6 +409,12 @@ body.hascourseindexcmicons {
             }
         }
 
+        /* Gain back the vertical space which was given to the icon by reducing the vertical padding of each courseindex
+           element by 0.1rem. */
+        .courseindex-item {
+            padding: .45rem .5rem;
+        }
+
         /* Overwrite activity type icon style for dimmed activities. */
         .courseindex-item.dimmed .courseindex-cmicon-icon {
             filter: invert(0.5);