Exam mode: Reduce width of sidebar (#9171)

ls1intum · Oct 5, 2024 · 73e94ec · 73e94ec
1 parent 1079a81
commit 73e94ec
Show file tree

Hide file tree

Showing 2 changed files with 27 additions and 10 deletions.
diff --git a/...ebapp/app/exam/participate/exam-navigation-sidebar/exam-navigation-sidebar.component.html b/...ebapp/app/exam/participate/exam-navigation-sidebar/exam-navigation-sidebar.component.html
@@ -2,16 +2,16 @@
     class="d-flex sidebar justify-content-between flex-column rounded-3"
     [ngClass]="{ 'content-height-dev sidebar-height-testRun-dev': !isProduction || isTestServer, collapsed: isCollapsed, 'sidebar-height-testRun': isTestRun }"
 >
-    <div class="px-3 py-3">
+    <div class="py-3">
         <div class="w-100 bg-module">
             <!-- Since the exam navigation includes lots of functionalities and in-line adjustments, 
              we use duplicated code here in order to keep the functionality of exam navigation apart from 
              sidebar-card implementations.
               -->
             <div class="sidebar-content" [ngClass]="{ collapsed: isCollapsed }">
-                <div class="scrollable-item-content py-2 px-2 bg-body" [ngClass]="{ 'content-height-dev': !isProduction || isTestServer, 'sidebar-height-testRun': isTestRun }">
+                <div class="scrollable-item-content scrollable-column" [ngClass]="{ 'content-height-dev': !isProduction || isTestServer, 'sidebar-height-testRun': isTestRun }">
                     <div
-                        class="pointer rounded-3 col-12 px-1 pt-2 pb-1 mb-2 border-5 highlight-card bg-module"
+                        class="pointer rounded-3 col-12 px-2 pt-2 pb-1 mb-2 border-5 highlight-card bg-module"
                         [ngClass]="{ 'bg-selected border-selected': exerciseIndex === -1 }"
                         (click)="changePage(true, -1)"
                     >
@@ -30,7 +30,7 @@
                     @for (sidebarItem of sidebarData?.ungroupedData; track sidebarItem; let last = $last; let i = $index) {
                         <div [ngClass]="{ 'mb-2': !last }">
                             <div
-                                class="pointer rounded-3 col-12 px-1 pt-2 pb-1 border-5 highlight-card bg-module"
+                                class="pointer rounded-3 col-12 px-2 pt-2 pb-1 border-5 highlight-card bg-module"
                                 [ngClass]="{ 'bg-selected border-selected': i === exerciseIndex }"
                                 (click)="changePage(false, i, false)"
                             >

diff --git a/...ebapp/app/exam/participate/exam-navigation-sidebar/exam-navigation-sidebar.component.scss b/...ebapp/app/exam/participate/exam-navigation-sidebar/exam-navigation-sidebar.component.scss
@@ -1,6 +1,6 @@
 $collapse-container-height: 35px;
-$sidebar-width-open: 275px;
-$sidebar-width-closed: 110px;
+$sidebar-width-open: 235px;
+$sidebar-width-closed: 80px;
 $management-header-height: 230px;
 $exam-test-run-offset: 38px;
 
@@ -25,10 +25,16 @@ $exam-test-run-offset: 38px;
     background-color: var(--module-bg);
     height: calc(100vh - var(--exam-height-offset));
     width: $sidebar-width-open;
-    transition: width 0.2s ease-in-out !important;
+    transition:
+        width 0.2s ease-in-out,
+        padding 0.2s ease-in-out !important;
 
     &.collapsed {
         width: $sidebar-width-closed !important;
+
+        .scrollable-column {
+            padding: 0 0.25rem;
+        }
     }
 
     &.sidebar-height-testRun {
@@ -60,11 +66,18 @@ $exam-test-run-offset: 38px;
     .sidebar {
         width: $sidebar-width-closed !important;
     }
+    .scrollable-column {
+        padding: 0 0.25rem !important;
+    }
     .auto-collapse {
         display: none !important;
     }
 }
 
+.scrollable-column {
+    padding: 0 1rem;
+}
+
 .notSynced {
     --fa-secondary-color: var(--bs-body-color);
     --fa-secondary-opacity: 1; // necessary to set the opacity to 1, because it's 0.4 per default
@@ -94,12 +107,12 @@ $exam-test-run-offset: 38px;
 }
 
 .double-arrow.menu-closed {
-    transform: translate(40px) rotate(0deg);
+    transform: translate(24px) rotate(0deg);
 }
 
 .double-arrow {
-    transform: translate(235px) rotate(180deg);
-    transition: all ease 0.3s;
+    transform: translate(187px) rotate(180deg);
+    transition: all ease 0.2s;
     cursor: pointer;
     width: 30px;
     align-items: center;
@@ -110,3 +123,7 @@ $exam-test-run-offset: 38px;
 .me-negative {
     margin-right: -5px;
 }
+
+.highlight-card:hover {
+    background-color: var(--sidebar-card-selected-bg);
+}