From cb402f4a2c1d97e4e7ef8d22f1facb7ec28011db Mon Sep 17 00:00:00 2001 From: Paul Rangger Date: Wed, 2 Oct 2024 18:45:32 +0200 Subject: [PATCH 1/3] Animated Sidebar --- .../course-conversations.component.html | 2 +- .../course-exams/course-exams.component.html | 2 +- .../course-exercises.component.html | 2 +- .../course-lectures.component.html | 2 +- .../overview/course-overview.component.html | 2 +- .../course-tutorial-groups.component.html | 2 +- .../app/shared/sidebar/sidebar.component.html | 140 +++++++++--------- .../app/shared/sidebar/sidebar.component.scss | 4 - src/main/webapp/content/scss/global.scss | 41 ++++- .../content/scss/themes/_dark-variables.scss | 3 + .../scss/themes/_default-variables.scss | 3 + 11 files changed, 123 insertions(+), 80 deletions(-) diff --git a/src/main/webapp/app/overview/course-conversations/course-conversations.component.html b/src/main/webapp/app/overview/course-conversations/course-conversations.component.html index 9979347728ec..90b2559fa81a 100644 --- a/src/main/webapp/app/overview/course-conversations/course-conversations.component.html +++ b/src/main/webapp/app/overview/course-conversations/course-conversations.component.html @@ -22,7 +22,7 @@ } @if (isCodeOfConductAccepted && isServiceSetUp && course) {
-
+
+
@if (course) {
diff --git a/src/main/webapp/app/overview/course-exercises/course-exercises.component.html b/src/main/webapp/app/overview/course-exercises/course-exercises.component.html index 6be118bf7475..830d3863c55e 100644 --- a/src/main/webapp/app/overview/course-exercises/course-exercises.component.html +++ b/src/main/webapp/app/overview/course-exercises/course-exercises.component.html @@ -1,4 +1,4 @@ -
+
@if (course) {
diff --git a/src/main/webapp/app/overview/course-lectures/course-lectures.component.html b/src/main/webapp/app/overview/course-lectures/course-lectures.component.html index ee245be3e109..29c7787fcc4a 100644 --- a/src/main/webapp/app/overview/course-lectures/course-lectures.component.html +++ b/src/main/webapp/app/overview/course-lectures/course-lectures.component.html @@ -1,4 +1,4 @@ -
+
@if (course) {
diff --git a/src/main/webapp/app/overview/course-overview.component.html b/src/main/webapp/app/overview/course-overview.component.html index ee6f77d51b5a..81962ccba524 100644 --- a/src/main/webapp/app/overview/course-overview.component.html +++ b/src/main/webapp/app/overview/course-overview.component.html @@ -63,7 +63,7 @@
diff --git a/src/main/webapp/app/overview/course-tutorial-groups/course-tutorial-groups.component.html b/src/main/webapp/app/overview/course-tutorial-groups/course-tutorial-groups.component.html index c2acc5bebdc0..c6f3864b47b7 100644 --- a/src/main/webapp/app/overview/course-tutorial-groups/course-tutorial-groups.component.html +++ b/src/main/webapp/app/overview/course-tutorial-groups/course-tutorial-groups.component.html @@ -1,4 +1,4 @@ -
+
@if (course) {
diff --git a/src/main/webapp/app/shared/sidebar/sidebar.component.html b/src/main/webapp/app/shared/sidebar/sidebar.component.html index ea513b48174e..a70e2a9e604f 100644 --- a/src/main/webapp/app/shared/sidebar/sidebar.component.html +++ b/src/main/webapp/app/shared/sidebar/sidebar.component.html @@ -1,74 +1,76 @@ -
-
-
- @if (searchFieldEnabled) { -
- - @if (showFilter) { -
- - @if (isFilterActive) { - - } @else { - - } - - -
- } -
- } - @if (!sidebarData?.ungroupedData || !(sidebarData?.ungroupedData | searchFilter: ['title', 'type'] : searchValue)?.length) { -
- } @else { -
- @if (sidebarData?.groupByCategory && sidebarData.groupedData) { - - } @else { - @for (sidebarItem of sidebarData?.ungroupedData | searchFilter: ['title', 'type'] : searchValue; track sidebarItem; let last = $last) { -
-
+
+
+
+
+ @if (searchFieldEnabled) { +
+ + @if (showFilter) { +
+ + @if (isFilterActive) { + + } @else { + + } + +
} - } -
- } +
+ } + @if (!sidebarData?.ungroupedData || !(sidebarData?.ungroupedData | searchFilter: ['title', 'type'] : searchValue)?.length) { +
+ } @else { +
+ @if (sidebarData?.groupByCategory && sidebarData.groupedData) { + + } @else { + @for (sidebarItem of sidebarData?.ungroupedData | searchFilter: ['title', 'type'] : searchValue; track sidebarItem; let last = $last) { +
+
+
+ } + } +
+ } +
diff --git a/src/main/webapp/app/shared/sidebar/sidebar.component.scss b/src/main/webapp/app/shared/sidebar/sidebar.component.scss index 7aa6c10477b1..ac8a40b229b1 100644 --- a/src/main/webapp/app/shared/sidebar/sidebar.component.scss +++ b/src/main/webapp/app/shared/sidebar/sidebar.component.scss @@ -32,10 +32,6 @@ background-color: var(--module-bg); } -.sidebar-width { - width: 275px !important; -} - @media print { .hide-on_print { display: none !important; diff --git a/src/main/webapp/content/scss/global.scss b/src/main/webapp/content/scss/global.scss index c449f7402ef4..c7f38171835d 100644 --- a/src/main/webapp/content/scss/global.scss +++ b/src/main/webapp/content/scss/global.scss @@ -1092,10 +1092,49 @@ body.transparent-background { } } -.sidebar-collapsed { +.sidebar-collapsed-course-overview { display: none; } +$transition-sidebar-content-opacity-length: 0.2s; +$transition-sidebar-width-length: 0.2s; +$transition-in-between-delay: 0.1s; + +.sidebar-content { + opacity: 1; + + transition: opacity $transition-sidebar-content-opacity-length ($transition-sidebar-width-length + $transition-in-between-delay) ease-in-out; +} + +.sidebar-collapsed .sidebar-content { + opacity: 0; + + transition: opacity $transition-sidebar-content-opacity-length 0s ease-in-out; +} + +.sidebar-wrap { + overflow: hidden; + max-width: $sidebar-width; + margin-right: $spacer; + + transition: + max-width $transition-sidebar-width-length 0s ease-in-out, + margin-right $transition-sidebar-width-length 0s ease-in-out; +} + +.sidebar-collapsed .sidebar-wrap { + max-width: 0; + margin-right: 0; + + transition: + max-width $transition-sidebar-width-length $transition-sidebar-content-opacity-length + $transition-in-between-delay ease-in-out, + margin-right $transition-sidebar-width-length $transition-sidebar-content-opacity-length + $transition-in-between-delay ease-in-out; +} + +.sidebar-width { + width: $sidebar-width !important; +} + .fs-xx-small { font-size: 0.625rem; } diff --git a/src/main/webapp/content/scss/themes/_dark-variables.scss b/src/main/webapp/content/scss/themes/_dark-variables.scss index b972c760771a..40789ff78781 100644 --- a/src/main/webapp/content/scss/themes/_dark-variables.scss +++ b/src/main/webapp/content/scss/themes/_dark-variables.scss @@ -129,6 +129,9 @@ $neutral-dark-l-20: lighten($neutral-dark, 20%); $footer-bg: $neutral-dark; $footer-height-dev: 3rem; $footer-height-prod: 2rem; + +// Sidebar +$sidebar-width: 275px; $sidebar-footer-height-dev: 134px; $sidebar-footer-height-prod: 118px; diff --git a/src/main/webapp/content/scss/themes/_default-variables.scss b/src/main/webapp/content/scss/themes/_default-variables.scss index 4490f3ad7ac4..92eca3165ea0 100644 --- a/src/main/webapp/content/scss/themes/_default-variables.scss +++ b/src/main/webapp/content/scss/themes/_default-variables.scss @@ -51,8 +51,11 @@ $border-color: #dee2e6; $footer-bg: $white; $footer-height-dev: 3rem; $footer-height-prod: 2rem; + +// Sidebar $sidebar-footer-height-dev: 134px; $sidebar-footer-height-prod: 118px; +$sidebar-width: 275px; //Module and Navigationbar $module-bg: $white; From 2d8359b966ecaecfa54e6fb6b49b95040f9e2075 Mon Sep 17 00:00:00 2001 From: Paul Rangger Date: Fri, 4 Oct 2024 08:37:33 +0200 Subject: [PATCH 2/3] Sped up animation --- .../app/overview/course-overview.component.scss | 9 ++++++--- src/main/webapp/content/scss/global.scss | 12 ++++++------ 2 files changed, 12 insertions(+), 9 deletions(-) diff --git a/src/main/webapp/app/overview/course-overview.component.scss b/src/main/webapp/app/overview/course-overview.component.scss index a5376a397fcd..633664e59c2a 100644 --- a/src/main/webapp/app/overview/course-overview.component.scss +++ b/src/main/webapp/app/overview/course-overview.component.scss @@ -3,7 +3,7 @@ $menu-width-open: 220px; $breadcrumb-height: 45px; // needed to make the exam fullscreen // Sidebar Button Transition Variables -$transition-delay: 0.1s; +$transition-delay: 0.3s; $transition-in-between-delay: 0.2s; $transition-chevron-rotate-length: 0.2s; $transition-chevron-max-width-length: 0.2s; @@ -290,11 +290,14 @@ jhi-secured-image { transition: opacity $transition-color-length $transition-delay + $transition-chevron-rotate-length * 2 ease-in-out; } -.btn-sidebar-collapse:hover::after, -.btn-sidebar-collapse:hover::before { +.btn-sidebar-collapse:hover::after { background-color: var(--sidebar-card-selected-bg); } +.btn-sidebar-collapse:hover::before { + background-color: var(--link-item-bg); +} + .btn-sidebar-collapse.is-collapsed { border-color: var(--bs-secondary); } diff --git a/src/main/webapp/content/scss/global.scss b/src/main/webapp/content/scss/global.scss index c7f38171835d..bf31699937ef 100644 --- a/src/main/webapp/content/scss/global.scss +++ b/src/main/webapp/content/scss/global.scss @@ -1096,14 +1096,14 @@ body.transparent-background { display: none; } -$transition-sidebar-content-opacity-length: 0.2s; -$transition-sidebar-width-length: 0.2s; -$transition-in-between-delay: 0.1s; +$transition-sidebar-content-opacity-length: 0.1s; +$transition-sidebar-width-length: 0.1s; +$transition-in-between-delay: 0.05s; .sidebar-content { opacity: 1; - transition: opacity $transition-sidebar-content-opacity-length ($transition-sidebar-width-length + $transition-in-between-delay) ease-in-out; + transition: opacity $transition-sidebar-content-opacity-length 0s ease-in-out; } .sidebar-collapsed .sidebar-content { @@ -1127,8 +1127,8 @@ $transition-in-between-delay: 0.1s; margin-right: 0; transition: - max-width $transition-sidebar-width-length $transition-sidebar-content-opacity-length + $transition-in-between-delay ease-in-out, - margin-right $transition-sidebar-width-length $transition-sidebar-content-opacity-length + $transition-in-between-delay ease-in-out; + max-width $transition-sidebar-width-length 0s ease-in-out, + margin-right $transition-sidebar-width-length 0s ease-in-out; } .sidebar-width { From fc1d2aee3c4b581a9e41eea2bbc4c005df479b26 Mon Sep 17 00:00:00 2001 From: Paul Rangger Date: Fri, 4 Oct 2024 13:27:57 +0200 Subject: [PATCH 3/3] Added more consistency between sidebars --- .../exam-navigation-sidebar.component.html | 2 +- .../exam-navigation-sidebar.component.scss | 16 ++++++++++--- .../overview/course-overview.component.html | 2 +- .../overview/course-overview.component.scss | 24 ++++++++++++++++--- 4 files changed, 36 insertions(+), 8 deletions(-) diff --git a/src/main/webapp/app/exam/participate/exam-navigation-sidebar/exam-navigation-sidebar.component.html b/src/main/webapp/app/exam/participate/exam-navigation-sidebar/exam-navigation-sidebar.component.html index 9bf53f757707..22b50581a1a4 100644 --- a/src/main/webapp/app/exam/participate/exam-navigation-sidebar/exam-navigation-sidebar.component.html +++ b/src/main/webapp/app/exam/participate/exam-navigation-sidebar/exam-navigation-sidebar.component.html @@ -73,7 +73,7 @@ [ngbTooltip]="(isCollapsed ? 'Expand' : 'Collapse') + ' Menu (Ctrl + M)'" (click)="toggleCollapseState()" > -
+
diff --git a/src/main/webapp/app/exam/participate/exam-navigation-sidebar/exam-navigation-sidebar.component.scss b/src/main/webapp/app/exam/participate/exam-navigation-sidebar/exam-navigation-sidebar.component.scss index f7e33ce93cf5..c6b3fb500ebe 100644 --- a/src/main/webapp/app/exam/participate/exam-navigation-sidebar/exam-navigation-sidebar.component.scss +++ b/src/main/webapp/app/exam/participate/exam-navigation-sidebar/exam-navigation-sidebar.component.scss @@ -94,12 +94,12 @@ $exam-test-run-offset: 38px; } .double-arrow.menu-closed { - transform: translate(40px) rotate(0deg); + transform: translate(40px); } .double-arrow { - transform: translate(235px) rotate(180deg); - transition: all ease 0.3s; + transform: translate(235px); + transition: transform ease 0.3s; cursor: pointer; width: 30px; align-items: center; @@ -107,6 +107,16 @@ $exam-test-run-offset: 38px; display: flex; } +.menu-closed .double-arrow-icon { + transform: rotate(0deg); +} + +.double-arrow-icon { + transform: rotate(180deg); + + transition: transform ease 0.3s 0.3s; +} + .me-negative { margin-right: -5px; } diff --git a/src/main/webapp/app/overview/course-overview.component.html b/src/main/webapp/app/overview/course-overview.component.html index e5b29df803cc..e5641f6db02f 100644 --- a/src/main/webapp/app/overview/course-overview.component.html +++ b/src/main/webapp/app/overview/course-overview.component.html @@ -121,7 +121,7 @@ [ngbTooltip]="(isNavbarCollapsed ? 'Expand' : 'Collapse') + ' Menu (Ctrl + M)'" (click)="toggleCollapseState()" > -
+
diff --git a/src/main/webapp/app/overview/course-overview.component.scss b/src/main/webapp/app/overview/course-overview.component.scss index 633664e59c2a..872969c33810 100644 --- a/src/main/webapp/app/overview/course-overview.component.scss +++ b/src/main/webapp/app/overview/course-overview.component.scss @@ -196,12 +196,12 @@ jhi-secured-image { } .double-arrow.menu-closed { - transform: translate(16px) rotate(0deg); + transform: translate(16px); } .double-arrow { - transform: translate(180px) rotate(180deg); - transition: all ease 0.3s; + transform: translate(180px); + transition: transform ease 0.3s; cursor: pointer; width: 30px; align-items: center; @@ -209,6 +209,16 @@ jhi-secured-image { display: flex; } +.menu-closed .double-arrow-icon { + transform: rotate(0deg); +} + +.double-arrow-icon { + transform: rotate(180deg); + + transition: transform ease 0.3s 0.3s; +} + .me-negative { margin-right: -5px; } @@ -298,6 +308,14 @@ jhi-secured-image { background-color: var(--link-item-bg); } +.btn-sidebar-collapse:active::after { + background-color: var(--link-item-bg); +} + +.btn-sidebar-collapse:active::before { + background-color: var(--sidebar-card-selected-bg); +} + .btn-sidebar-collapse.is-collapsed { border-color: var(--bs-secondary); }