Merge pull request #271 from maykinmedia/fix/268-button-style

Small style improvements
maykinmedia · Dec 22, 2021 · 3bbb1ff · 3bbb1ff
2 parents a63a319 + 05c4871
commit 3bbb1ff
Show file tree

Hide file tree

Showing 4 changed files with 12 additions and 13 deletions.
diff --git a/src/archiefvernietigingscomponent/destruction/templates/destruction/recordmanager_list.html b/src/archiefvernietigingscomponent/destruction/templates/destruction/recordmanager_list.html
@@ -10,7 +10,7 @@ <h1 class="title">Mijn vernietigingslijsten</h1>
 <article class="destruction-list">
     <section class="destruction-list__filters">
         <form action="" method="get">
-            <label>{% trans "Status" %}</label>
+            <label>{% trans "Status filter" %}</label>
             {{ filter.form.list_status }}
             <button type="submit" class="btn">Filter</button>
         </form>
@@ -24,8 +24,8 @@ <h1 class="title">Mijn vernietigingslijsten</h1>
                 </a>
             </nav>
             <nav class="destruction-list__nav">
-                <a class="btn btn--centered-content" href="{% url 'destruction:zaken-without-archive-date' %}">
-                    <i class="material-icons btn__icon btn__icon--left">search</i> {% trans 'Cases without archive date' %}
+                <a class="btn btn--centered-content" href="{% url 'destruction:zaken-without-archive-date' %}" title="{% trans 'List cases without archive date' %}">
+                    <i class="material-icons btn__icon btn__icon--left">search</i> {% trans 'No archive date' %}
                 </a>
             </nav>
         </header>
@@ -80,7 +80,6 @@ <h1 class="title">Mijn vernietigingslijsten</h1>
     </section>
 
     <aside class="destruction-list__notif">
-        {# <h2 class="section-title section-title--highlight">Notificaties</h2> #}
         {% render_notifications request.user %}
     </aside>
 

diff --git a/src/archiefvernietigingscomponent/sass/_settings.scss b/src/archiefvernietigingscomponent/sass/_settings.scss
@@ -247,3 +247,6 @@ $util-shadow-default-offset-x: 0 !default;
 $util-shadow-default-offset-y: 0.5rem !default;
 $util-shadow-default-blur: 1rem !default;
 $util-shadow-default-spread: 0 !default;
+
+$scrollbar-width: 6px;
+$scrollbar-color: darken($color-primary, 10%);
diff --git a/src/archiefvernietigingscomponent/sass/components/_destruction-list.scss b/src/archiefvernietigingscomponent/sass/components/_destruction-list.scss
@@ -1,7 +1,5 @@
 @import "../lib/colors";
-
-$scrollbar-width: 6px;
-$scrollbar-color: darken($color-primary, 10%);
+@import "../settings";
 
 .destruction-list {
   display: flex;
@@ -25,6 +23,7 @@ $scrollbar-color: darken($color-primary, 10%);
 
   &__header {
     display: flex;
+    justify-content: space-between;
     align-items: center;
     margin-bottom: 2em;
   }
@@ -33,12 +32,6 @@ $scrollbar-color: darken($color-primary, 10%);
     flex: 1;
   }
 
-  &__nav {
-    flex: 1;
-    text-align: left;
-    margin-right: 1.5em;
-  }
-
   &__content {
     width: 50%;
     padding: 1em;

diff --git a/src/archiefvernietigingscomponent/sass/components/_zaaktype-select.scss b/src/archiefvernietigingscomponent/sass/components/_zaaktype-select.scss
@@ -7,6 +7,10 @@ $main-content-background-color: #fefefe;
   font-size: $typography-font-size-text-small;
   overflow-x: scroll;
 
+  // best effort - see https://caniuse.com/#feat=css-scrollbar
+  scrollbar-width: $scrollbar-width;
+  scrollbar-color: $scrollbar-color #eee;
+
   @include element("description") {
     display: flex;
     align-items: center;