From 20000020e28a4d846b29f4d1cf5f73e87aade293 Mon Sep 17 00:00:00 2001
From: phillimorland <5871230+phillimorland@users.noreply.github.com>
Date: Mon, 12 Dec 2022 10:29:19 +0100
Subject: [PATCH] stuff

---
 .../meinberlin_contrib/component_library.html    |  2 +-
 .../assets/scss/components/_input_group.scss     |  4 ----
 .../scss/components/_participation_tile.scss     |  4 ++--
 meinberlin/assets/scss/components/_upload.scss   | 16 +---------------
 .../templates/a4images/image_upload_widget.html  | 14 ++++++++------
 5 files changed, 12 insertions(+), 28 deletions(-)

diff --git a/meinberlin/apps/contrib/templates/meinberlin_contrib/component_library.html b/meinberlin/apps/contrib/templates/meinberlin_contrib/component_library.html
index b812199dc9..eb314b8af3 100644
--- a/meinberlin/apps/contrib/templates/meinberlin_contrib/component_library.html
+++ b/meinberlin/apps/contrib/templates/meinberlin_contrib/component_library.html
@@ -2277,7 +2277,7 @@ <h2 id="cl-upload">Upload</h2>
                                 <div class="upload-wrapper__fields input-group">
                                     <input name="logo" id="id_logo" class="form-control form-control-file" type="file">
                                     <input name="__noname__" class="form-control form-control-file-dummy" placeholder="Select a picture from your local folder." tabindex="-1" id="text-id_logo" type="text">
-                                    <label for="id_logo" class="upload-wrapper__action input-group__after btn" title="Upload a picture">
+                                    <label for="id_logo" class="upload-wrapper__action input-group__after btn btn--primary" title="Upload a picture">
                                         <i class="fas fa-cloud-upload-alt" aria-label="Upload a picture"></i>
                                     </label>
                                 </div>
diff --git a/meinberlin/assets/scss/components/_input_group.scss b/meinberlin/assets/scss/components/_input_group.scss
index dadd10e570..c4dd6006e6 100644
--- a/meinberlin/assets/scss/components/_input_group.scss
+++ b/meinberlin/assets/scss/components/_input_group.scss
@@ -1,9 +1,5 @@
 // FIXME: this only works with buttons if it is included *afterwards*
 
-// .input-group {
-//     display: flex;
-// }
-
 .input-group__input {
     flex: 1 1 auto;
     background-clip: unset;
diff --git a/meinberlin/assets/scss/components/_participation_tile.scss b/meinberlin/assets/scss/components/_participation_tile.scss
index 329128af0b..5d976f02b9 100644
--- a/meinberlin/assets/scss/components/_participation_tile.scss
+++ b/meinberlin/assets/scss/components/_participation_tile.scss
@@ -16,10 +16,10 @@
 }
 
 .participation-tile__list-container {
-    flex: 0 1 44vh;
+    flex: 0 1 auto;
 
     @media (min-width: $breakpoint-xs) {
-        flex-grow: 2;
+        flex: 0 2 44vh;
         overflow-y: visible;
     }
 }
diff --git a/meinberlin/assets/scss/components/_upload.scss b/meinberlin/assets/scss/components/_upload.scss
index d1a1340f6d..f4abded8be 100644
--- a/meinberlin/assets/scss/components/_upload.scss
+++ b/meinberlin/assets/scss/components/_upload.scss
@@ -20,7 +20,7 @@
 .upload-wrapper__fields,
 .upload-wrapper__preview {
     margin-bottom: $padding;
-    position: relative;
+    // position: relative;
 }
 
 // This is actually a label that looks like a button.  It is used to trigger
@@ -39,17 +39,3 @@
     opacity: 0.2;
     filter: grayscale(100%);
 }
-
-.upload-wrapper__alert {
-    clear: left;
-}
-
-@media (min-width: $breakpoint) {
-    .upload-wrapper__fields {
-        // @include grid-span(5, 0, ("columns": 9));
-    }
-
-    .upload-wrapper__preview {
-        // @include grid-span(4, 5, ("columns": 9));
-    }
-}
diff --git a/meinberlin/templates/a4images/image_upload_widget.html b/meinberlin/templates/a4images/image_upload_widget.html
index 9178f188ce..a5718763fe 100644
--- a/meinberlin/templates/a4images/image_upload_widget.html
+++ b/meinberlin/templates/a4images/image_upload_widget.html
@@ -1,6 +1,6 @@
 {% load i18n %}
-<div class="upload-wrapper form-control-upload">
-    <div class="upload-wrapper__fields input-group">
+<div class="upload-wrapper form-control-upload row">
+    <div class="upload-wrapper__fields input-group col">
         {{ file_input }}
         {{ text_input }}
         {% if has_image_set and not is_required %}
@@ -11,13 +11,13 @@
             </label>
         {% else %}
             <label for="{{ id }}"
-                class="upload-wrapper__action input-group__after btn"
+                class="upload-wrapper__action input-group__after btn btn--primary"
                 title="{% trans 'Upload a picture' %}">
                 <i class="fas fa-cloud-upload-alt" aria-label="{% trans 'Upload a picture' %}"></i>
             </label>
         {% endif %}
     </div>
-    <div class="form-{{ id }} upload-wrapper__preview">
+    <div class="form-{{ id }} upload-wrapper__preview col">
         {{ checkbox_input }}
         <img id="{{ file_id }}"
              src="{% if has_image_set %}{{ file_url }}{% else %}data:image/gif;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs={% endif %}"
@@ -25,7 +25,9 @@
              alt=""
         >
     </div>
-    <div class="alert alert--info upload-wrapper__alert" role="alert">
-        {% trans 'Your image will be uploaded/removed once you save your changes at the end of this page.' %}
+    <div class="col-12">
+        <div class="alert alert--info upload-wrapper__alert" aria-live="polite">
+            {% trans 'Your image will be uploaded/removed once you save your changes at the end of this page.' %}
+        </div>
     </div>
 </div>