Improve rendering of reservation labels

They were just put in roughly everywhere needed in dpl-react so the different views in group-modal and reservation-list had to be adjusted.
danskernesdigitalebibliotek · Dec 1, 2023 · 35495a0 · 35495a0
1 parent 2e66cb7
commit 35495a0
Show file tree

Hide file tree

Showing 3 changed files with 16 additions and 6 deletions.
diff --git a/src/stories/Library/Lists/list-materials/list-materials.scss b/src/stories/Library/Lists/list-materials/list-materials.scss
@@ -1,12 +1,11 @@
 .list-materials {
   display: flex;
-  min-height: 72px;
+  min-height: 96px;
   padding: 16px;
   background-color: $c-text-primary-white;
   justify-content: space-between;
 
   @include breakpoint-s {
-    height: 96px;
     padding: 16px 32px;
     align-items: center;
     flex-direction: row;
@@ -80,3 +79,14 @@
     display: none;
   }
 }
+
+.list-materials__arrow {
+  margin-left: $s-xl;
+  margin-right: $s-md;
+  cursor: pointer;
+  display: none;
+
+  @include breakpoint-s {
+    display: block;
+  }
+}
diff --git a/src/stories/Library/Lists/list-reservation/list-reservation.scss b/src/stories/Library/Lists/list-reservation/list-reservation.scss
@@ -27,7 +27,7 @@ $list-reservation-space-desktop: 24px;
 }
 
 .list-reservation__material {
-  height: 100%;
+  min-height: 120px;
   display: flex;
   align-items: center;
 }
@@ -155,10 +155,10 @@ $list-reservation-space-desktop: 24px;
 .list-reservation__deadline {
   display: inline-grid;
   grid-row-gap: 8px;
-  margin-left: 88px;
+  margin-left: 2px;
 
   @include breakpoint-s {
-    margin-left: 32px;
+    margin-left: 15px;
   }
 }
 

diff --git a/src/stories/Library/status-label/status-label.scss b/src/stories/Library/status-label/status-label.scss
@@ -1,5 +1,5 @@
 .status-label {
-  height: 24px;
+  min-height: 28px;
   padding: 0 4px;
   display: inline-flex;
   justify-content: center;