💄 [#1898] Made some sections conform more to profile design

maykinmedia · Dec 18, 2023 · 28c4aaf · 28c4aaf
1 parent fc0d9d5
commit 28c4aaf
Show file tree

Hide file tree

Showing 6 changed files with 200 additions and 205 deletions.
diff --git a/src/open_inwoner/components/templatetags/button_tags.py b/src/open_inwoner/components/templatetags/button_tags.py
@@ -19,8 +19,8 @@ def button_row(parser, token):
         {% endbutton_row %}
 
     Variables:
-        - align: enum[right] | if the buttons should be aligned left (no align should be given) or alinged right side.
-        - mobile: booleam | If the button row should only be displayed on mobile screens.
+        - align: enum[right] | if the buttons should be aligned left (no align should be given) or aligned right side.
+        - mobile: boolean | If the button row should only be displayed on mobile screens.
 
     Extra context:
         - contents: string (HTML) | this is the context between the button_row and endbutton_row tags

diff --git a/src/open_inwoner/scss/components/Button/Button.scss b/src/open_inwoner/scss/components/Button/Button.scss
@@ -68,6 +68,10 @@
     width: 100%;
   }
 
+  &--spaceless {
+    padding: 0;
+  }
+
   &#{&}--primary {
     background-color: var(--color-primary);
     border: 1px solid var(--color-primary);
@@ -160,6 +164,10 @@
     color: var(--color-danger-lighter);
   }
 
+  &--error {
+    color: var(--color-error-darker);
+  }
+
   &--borderless {
     background-color: rgba(0, 0, 0, 0);
     border: none;

diff --git a/src/open_inwoner/scss/components/Card/Card.scss b/src/open_inwoner/scss/components/Card/Card.scss
@@ -12,6 +12,7 @@
   display: flex;
   flex-direction: column;
   min-height: 70px;
+  min-width: 200px;
   position: relative;
   text-decoration: none;
 
@@ -123,6 +124,13 @@
     .plan-list {
       text-decoration: none;
     }
+
+    span,
+    p {
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+    }
   }
 
   &__body--grid {
@@ -275,10 +283,8 @@
   }
 
   &--stretch .list + .link:first-of-type:last-of-type,
-  &--stretch .profile__link > .link:first-of-type:last-of-type {
+  &--stretch .profile-card__button {
     bottom: var(--card-spacing);
-    bottom: var(--card-spacing);
-    position: absolute;
     position: static;
 
     @media (min-width: 768px) {

diff --git a/src/open_inwoner/scss/components/Profile/_personal-overview.scss b/src/open_inwoner/scss/components/Profile/_personal-overview.scss
@@ -1,7 +1,17 @@
 .profile-section {
+  &--bordered {
+    border-bottom: 1px solid var(--color-gray-light);
+    padding-bottom: var(--spacing-large);
+  }
+
   h2,
   .h2 {
-    margin: calc(var(--row-height) * 1.5) 0 0 0;
+    height: var(--row-height);
+    margin: calc(var(--row-height)) 0 0 0;
+  }
+
+  .h2 + .grid {
+    margin-top: 0;
   }
 
   .profile-list {

diff --git a/src/open_inwoner/scss/components/Table/Tabled.scss b/src/open_inwoner/scss/components/Table/Tabled.scss
@@ -2,12 +2,6 @@
   display: flex;
   flex-direction: column;
 
-  .h2 {
-    &.title--extra-padding {
-      padding-bottom: var(--spacing-large);
-    }
-  }
-
   &__key {
     color: var(--color-gray-90);
   }
@@ -41,24 +35,6 @@
     margin: var(--row-height) 0 0 0;
   }
 
-  .card {
-    .h4 .link {
-      color: var(--color-black);
-    }
-
-    .profile__link {
-      text-decoration: none;
-    }
-
-    .list-item {
-      p {
-        white-space: nowrap;
-        overflow: hidden;
-        text-overflow: ellipsis;
-      }
-    }
-  }
-
   .tabled__header {
     display: grid;
     grid-template-columns: 1fr 1fr;