forms: style user-facing file-upload input

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;
+}

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";

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";

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>