💄 #1795 - fix: fix inconsistencies between upstream file component an…

…d file component rendered by file input.
maykinmedia · Nov 21, 2023 · 1b4007f · 1b4007f
1 parent 8971245
commit 1b4007f
Show file tree

Hide file tree

Showing 3 changed files with 23 additions and 13 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 icon="file_download" icon_outlined=True icon_position="before" %}
+                {% link href=url text=download secondary=True download=True hide_text=True 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/js/components/form/FileInput.js b/src/open_inwoner/js/components/form/FileInput.js
@@ -185,14 +185,20 @@ export class FileInput extends Component {
     return `
       <li class="file-list__list-item">
         <aside class="file">
-          <div class="file__file">
-              <span aria-hidden="true" class="material-icons-outlined">${
-                type.match('image') ? 'image' : 'description'
-              }</span>
-              <p class="p">${name} (${ext}, ${sizeMB}MB)</p>
-              <a class="link link--primary" href="#" role="button" aria-label="${labelDelete}">
-                <span aria-hidden="true" class="material-icons-outlined">delete</span>
-              </a>
+        <div class="file__container">
+            <div class="file__file">
+                <p class="file__symbol">
+                <span aria-hidden="true" class="material-icons-outlined">${
+                  type.match('image') ? 'image' : 'description'
+                }</span>
+                </p>
+                <p class="p file__data">
+                  <span class="file__name">${name} (${ext}, ${sizeMB}MB)</span>
+                </p>
+                <a class="link link--secondary" href="#" role="button" aria-label="${labelDelete}">
+                  <span aria-hidden="true" class="material-icons-outlined">delete</span>
+                </a>
+            </div>
           </div>
         </aside>
       </li>

diff --git a/src/open_inwoner/scss/components/Form/FileInput.scss b/src/open_inwoner/scss/components/Form/FileInput.scss
@@ -24,8 +24,8 @@
     height: 30px;
   }
 
-  &--drag-active .button {
-    pointer-events: none;
+  .link--secondary [class*='icon'] {
+    color: var(--color-secondary);
   }
 
   &__input {
@@ -44,7 +44,11 @@
   }
 
   .h4 {
-    margin-top: var(--gutter-width);
-    margin-bottom: calc(0.5 * var(--gutter-width));
+    margin-top: var(--spacing-large);
+    margin-bottom: calc(0.5 * var(--spacing-large));
+  }
+
+  & .file-list {
+    margin-bottom: var(--spacing-large)!important;
   }
 }