From a90bf11e1e07cc1f85540edbf587b3c5bedc74e9 Mon Sep 17 00:00:00 2001
From: Ron Lucke <lucke@elan-ev.de>
Date: Tue, 12 Nov 2024 09:27:20 +0000
Subject: Sidebar Layout Polishing

Closes #4719 and #4720

Merge request studip/studip!3527
---
 app/views/shared/filter.php                      |  2 +-
 resources/assets/stylesheets/mixins/colors.scss  |  2 ++
 resources/assets/stylesheets/scss/sidebar.scss   | 21 ++++++++++++++++-----
 resources/assets/stylesheets/scss/variables.scss |  2 ++
 4 files changed, 21 insertions(+), 6 deletions(-)

diff --git a/app/views/shared/filter.php b/app/views/shared/filter.php
index 2b1e027..d9df9a2 100644
--- a/app/views/shared/filter.php
+++ b/app/views/shared/filter.php
@@ -18,7 +18,7 @@
     </a>
 </div>
 <? endif; ?>
-<form id="index_filter" action="<?= $action ?>" method="post">
+<form class="default" id="index_filter" action="<?= $action ?>" method="post">
     <? if (!empty($name_search)) : ?>
         <label class="mvv-name-search">
             <?= $name_caption ?: _('Name') ?>
diff --git a/resources/assets/stylesheets/mixins/colors.scss b/resources/assets/stylesheets/mixins/colors.scss
index dc64b72..adac77f 100644
--- a/resources/assets/stylesheets/mixins/colors.scss
+++ b/resources/assets/stylesheets/mixins/colors.scss
@@ -242,6 +242,8 @@ $color--main-navigation-background: $color--gray-7;
 $color--main-navigation-border: $color--gray-5;
 
 $color--sidebar-marker-active: $color--gray-5;
+$color--sidebar-marker-active-navigation: $color--blue-1;
+$color--sidebar-marker-active-view: $color--yellow-1;
 $color--sidebar-marker-focus: $color--gray-5;
 $color--sidebar-marker-hover: $color--gray-5;
 $color--sidebar-active: $color--gray-6;
diff --git a/resources/assets/stylesheets/scss/sidebar.scss b/resources/assets/stylesheets/scss/sidebar.scss
index 8f270b0..028597d 100644
--- a/resources/assets/stylesheets/scss/sidebar.scss
+++ b/resources/assets/stylesheets/scss/sidebar.scss
@@ -95,7 +95,7 @@ $icon-size: 20px;
 
     // Prevent selects from growing too large
     select {
-        max-width: calc(100% - 1ex);
+        max-width: 100%;
     }
 }
 
@@ -113,10 +113,14 @@ ul.widget-list {
         background-color: var(--white);
         border-left: solid 4px var(--white);
 
-        > *:not(label) {
+        > *:not(label):not(.options-radio, .options-checkbox) {
             padding: 4px 0 4px 28px;
             line-height: $icon-size;
         }
+        
+        .label-text {
+            text-indent: 0;
+        }
 
         &:has(>button:not(.options-radio, .options-checkbox)), &:has(>a):not(:last-child) {
             border-bottom: solid thin  var(--color--sidebar-divider);
@@ -128,7 +132,7 @@ ul.widget-list {
             }
         }
 
-        &:hover {
+        &:hover:not(:has(>label)):not(:has(button.options-radio)) {
             background-color: var(--color--sidebar-active);
             border-left-color: var(--color--sidebar-marker-active);
 
@@ -191,7 +195,7 @@ div#sidebar-navigation {
     }
     &.sidebar-navigation > li.active {
         background-color: var(--color--sidebar-active);
-        border-left: solid 4px var(--color--sidebar-marker-active);
+        border-left: solid 4px var(--color--sidebar-marker-active-navigation);
         margin-left: -4px;
         padding-left: 1px;
 
@@ -202,7 +206,7 @@ div#sidebar-navigation {
     }
     &.sidebar-views > li.active {
         background-color: var(--color--sidebar-active);
-        border-left: solid 4px var(--color--sidebar-marker-active);
+        border-left: solid 4px var(--color--sidebar-marker-active-view);
         margin-left: -4px;
         padding-left: 1px;
 
@@ -251,6 +255,13 @@ div#sidebar-navigation {
             &:hover {
                 background-color: unset;
             }
+
+            .select2-wrapper {
+                width: 100% !important;
+                .select2-container {
+                    width: 100% !important;
+                }
+            }
         }
 
         .options-checkbox {
diff --git a/resources/assets/stylesheets/scss/variables.scss b/resources/assets/stylesheets/scss/variables.scss
index 3b8a73d..4deeeba 100644
--- a/resources/assets/stylesheets/scss/variables.scss
+++ b/resources/assets/stylesheets/scss/variables.scss
@@ -220,6 +220,8 @@ $grid-gap: 0;
     --color--main-navigation-border: #{$color--main-navigation-border};
 
     --color--sidebar-marker-active: #{$color--sidebar-marker-active};
+    --color--sidebar-marker-active-navigation: #{$color--sidebar-marker-active-navigation};
+    --color--sidebar-marker-active-view: #{$color--sidebar-marker-active-view};
     --color--sidebar-marker-focus: #{$color--sidebar-marker-focus};
     --color--sidebar-marker-hover: #{$color--sidebar-marker-hover};
     --color--sidebar-active: #{$color--sidebar-active};
-- 
cgit v1.0