From 523004e8c3234db9aa4c1ed0a76b474922ad9815 Mon Sep 17 00:00:00 2001
From: Alexander Bias <alexander.bias@lernlink.de>
Date: Fri, 12 Jul 2024 16:04:10 +0200
Subject: [PATCH] Upgrade: Adapt the course index icon feature visually to the
 new icon sizes.

---
 CHANGES.md                 |  1 +
 scss/boost_union/post.scss | 21 +++++++++++++++++++--
 2 files changed, 20 insertions(+), 2 deletions(-)

diff --git a/CHANGES.md b/CHANGES.md
index 913c3e028e4..e4f0d8ab0c3 100644
--- 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
index 19a1d601c54..81a67237bdd 100644
--- 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);