From 73aa08c8f36be05859b01f67aff0daf437d8faae Mon Sep 17 00:00:00 2001
From: hom3mad3 <8156337+hom3mad3@users.noreply.github.com>
Date: Tue, 14 Jan 2025 18:20:21 +0100
Subject: [PATCH] forms: style user-facing file-upload input

---
 .../_upload.scss                              |  0
 .../_upload-wrapper.scss                      | 49 +++++++++++++++++++
 meinberlin/assets/scss/style_dashboard.scss   |  2 +-
 meinberlin/assets/scss/style_user_facing.scss |  3 +-
 .../a4images/image_upload_widget.html         |  7 +--
 5 files changed, 56 insertions(+), 5 deletions(-)
 rename meinberlin/assets/scss/{components => components_dashboard}/_upload.scss (100%)
 create mode 100644 meinberlin/assets/scss/components_user_facing/_upload-wrapper.scss

diff --git a/meinberlin/assets/scss/components/_upload.scss b/meinberlin/assets/scss/components_dashboard/_upload.scss
similarity index 100%
rename from meinberlin/assets/scss/components/_upload.scss
rename to meinberlin/assets/scss/components_dashboard/_upload.scss
diff --git a/meinberlin/assets/scss/components_user_facing/_upload-wrapper.scss b/meinberlin/assets/scss/components_user_facing/_upload-wrapper.scss
new file mode 100644
index 0000000000..36276d99d3
--- /dev/null
+++ b/meinberlin/assets/scss/components_user_facing/_upload-wrapper.scss
@@ -0,0 +1,49 @@
+.upload-wrapper {
+    position: relative;
+
+    .form-control-file {
+        cursor: pointer;
+        left: 0;
+        position: absolute;
+        opacity: 0;
+        top: 0;
+    }
+}
+
+.upload-wrapper__fields {
+    .form-hint {
+        margin-top: 0.4em;
+    }
+
+    .form-control-file-dummy {
+        padding-left: 60px;
+    }
+}
+
+.clear-image {
+    @extend .aural;
+}
+
+.clear-image:checked + img {
+    opacity: 0.2;
+    filter: grayscale(100%);
+}
+
+.upload-wrapper__action {
+    position: absolute;
+    top: 12px;
+    right: 15px;
+    z-index: 1;
+    cursor: pointer;
+}
+
+.upload-wrapper__preview {
+    position: absolute;
+    overflow: hidden;
+    background-color: $gray-lightest;
+    width: 50px;
+    height: 33px;
+    top: 5px;
+    left: 5px;
+    z-index: 1;
+}
\ No newline at end of file
diff --git a/meinberlin/assets/scss/style_dashboard.scss b/meinberlin/assets/scss/style_dashboard.scss
index 1ed7c9ff0a..67a9514e9b 100644
--- a/meinberlin/assets/scss/style_dashboard.scss
+++ b/meinberlin/assets/scss/style_dashboard.scss
@@ -42,6 +42,7 @@
 @import "components_dashboard/list_item";
 @import "components_dashboard/pagination";
 @import "components_dashboard/tabs";
+@import "components_dashboard/upload";
 
 // Components - General
 @import "components/action";
@@ -70,7 +71,6 @@
 @import "components/switch";
 @import "components/table";
 @import "components/tile";
-@import "components/upload";
 
 // Additional Styles
 @import "../extra_css/ckeditor";
\ No newline at end of file
diff --git a/meinberlin/assets/scss/style_user_facing.scss b/meinberlin/assets/scss/style_user_facing.scss
index c0380418c9..cd17830362 100644
--- a/meinberlin/assets/scss/style_user_facing.scss
+++ b/meinberlin/assets/scss/style_user_facing.scss
@@ -50,9 +50,10 @@
 @import "components_user_facing/searchform-slot";
 @import "components_user_facing/service-panel";
 @import "components_user_facing/tabnavigation";
+@import "components_user_facing/toggle_switch";
 @import "components_user_facing/typeahead";
+@import "components_user_facing/upload-wrapper";
 @import "components_user_facing/user_indicator";
-@import "components_user_facing/toggle_switch";
 @import "components_user_facing/icon_switch";
 @import "components_user_facing/projects-list";
 @import "components_user_facing/projects_map";
diff --git a/meinberlin/templates/a4images/image_upload_widget.html b/meinberlin/templates/a4images/image_upload_widget.html
index 823ce00d6c..10ce299f56 100644
--- a/meinberlin/templates/a4images/image_upload_widget.html
+++ b/meinberlin/templates/a4images/image_upload_widget.html
@@ -16,7 +16,11 @@
                 <i class="fas fa-cloud-upload-alt" aria-label="{% translate 'Upload a picture' %}"></i>
             </label>
         {% endif %}
+        <span class="formgroup__help form-hint">
+            {% translate 'Your image will be uploaded/removed once you save your changes at the end of this page. ' %}
+        </span>
     </div>
+
     <div class="form-{{ id }} upload-wrapper__preview col-sm">
         {{ checkbox_input }}
         <img id="{{ file_id }}"
@@ -27,7 +31,4 @@
              height=""
         >
     </div>
-    <div class="col-12">
-        {% include 'meinberlin_contrib/components/alert.html' with alert_message='Your image will be uploaded/removed once you save your changes at the end of this page.' alert_type='info' %}
-    </div>
 </div>