💄 [#2272] Changed heading structures and ellipsis

maykinmedia · Apr 11, 2024 · 631ea4c · 631ea4c
1 parent d55bfb2
commit 631ea4c
Show file tree

Hide file tree

Showing 6 changed files with 32 additions and 10 deletions.
diff --git a/src/open_inwoner/components/templates/components/File/File.html b/src/open_inwoner/components/templates/components/File/File.html
@@ -50,7 +50,7 @@
                 {% enddropdown %}
             {% elif show_download %}
                 {% trans "Download" as download %}
-                {% link href=url text=download secondary=True download=True hide_text=True icon="file_download" icon_outlined=True icon_position="before" %}
+                {% link href=url text=download secondary=True download=True hide_text=True extra_classes="file__download" icon="file_download" icon_outlined=True icon_position="before" %}
             {% endif %}
             {% if description %}<p class="p p--small">{{ description }}</p>{% endif %}
         </div>

diff --git a/src/open_inwoner/scss/components/File/File.scss b/src/open_inwoner/scss/components/File/File.scss
@@ -7,7 +7,7 @@
 
   &__file {
     align-items: center;
-    justify-content: space-between;
+    justify-content: flex-start;
     border: var(--border-width-thin) solid var(--color-gray);
     border-radius: var(--border-radius);
     box-sizing: border-box;
@@ -33,9 +33,12 @@
     flex-direction: column;
 
     > * {
+      display: inline-block;
       white-space: nowrap;
       text-overflow: ellipsis;
       overflow: hidden;
+      min-width: 0;
+      flex: 1;
     }
   }
 
@@ -45,13 +48,18 @@
     box-sizing: border-box;
   }
 
+  .file__download {
+    margin-left: auto;
+  }
+
   &__file .link:hover {
     color: var(--font-color-body);
     text-decoration: none;
   }
 
   &__file .file__data {
-    width: 100%;
+    //width: 100%;
+    align-items: flex-start;
     white-space: nowrap;
     overflow: hidden;
     text-overflow: ellipsis;

diff --git a/src/open_inwoner/scss/components/Typography/H2.scss b/src/open_inwoner/scss/components/Typography/H2.scss
@@ -36,7 +36,8 @@
   }
 
   &.indicator {
-    display: inline-block;
+    //display: inline-block;
+    justify-content: flex-start;
     overflow: visible;
     position: relative;
 
@@ -46,7 +47,7 @@
       border-radius: 100px;
       display: inline-block;
       height: 8px;
-      position: absolute;
+      //position: absolute;
       right: -12px;
       top: 6px;
       width: 8px;

diff --git a/src/open_inwoner/scss/components/UserFeed/UserFeed.scss b/src/open_inwoner/scss/components/UserFeed/UserFeed.scss
@@ -26,10 +26,14 @@
       &:after {
         content: ' ';
         position: absolute;
-        border-right: 1px solid var(--color-red-notification);
+        border-right: none;
         right: -4px;
         top: 2px;
         height: 16px;
+
+        @media (min-width: 768px) {
+          border-right: 1px solid var(--color-red-notification);
+        }
       }
 
       &:first-child {

diff --git a/src/open_inwoner/templates/cms/plugins/userfeed/userfeed.html b/src/open_inwoner/templates/cms/plugins/userfeed/userfeed.html
@@ -2,9 +2,13 @@
 
 {% if userfeed %}
 <section class="plugin userfeed">
-    <h2 class="h2 {% if userfeed.action_required %}indicator{% endif %}">
-        {{ instance.title }}
-    </h2>
+    <div class="userfeed__heading">
+        <h2 class="h2 {% if userfeed.action_required %}indicator{% endif %}">
+            <span class="userfeed__heading-title">{{ instance.title }}</span>
+            {% if userfeed.action_required %}<span class="userfeed__heading-indicator"></span>{% endif %}
+        </h2>
+    </div>
+
     <div class="userfeed__summary">
         <ul class="userfeed__list">
             {% for line in userfeed.summary %}

diff --git a/src/open_inwoner/templates/pages/cases/status_inner.html b/src/open_inwoner/templates/pages/cases/status_inner.html
@@ -60,7 +60,12 @@ <h2 class="h2" id="documents-upload">{% trans "Document toevoegen" %}</h2>
 
             {#  Documents #}
             {% if case.documents %}
-                <h2 class="h2 {% if case.new_docs %}indicator{% endif %}" id="documents">{% trans 'Eerder toegevoegde documenten' %}</h2>
+                <div class="file-list__heading">
+                    <h2 class="h2 file-list__h2 {% if case.new_docs %}indicator{% endif %}" id="documents">
+                        <span class="file-list__heading-title">{% trans 'Eerder toegevoegde documenten' %}</span>
+                        <span class="file-list__heading-indicator indicator"></span>
+                    </h2>
+                </div>
                 {% case_document_list case.documents %}
             {% endif %}