[WIP] Converting dropzone

Resources/Private/Templates/Bootstrap5/Joblist/ApplyForm.html

@@ -320,14 +320,14 @@
                     </div>
                 </div>
                 <div class="row">
-                    <div class="col-md form-group jobs-upload-group">
+                    <div class="col-md">
                         <label for="apply-cover-letter" class="form-label filled">
                             <f:translate key="frontend.apply.cover_letter" />
                             (
                             <f:translate key="frontend.apply.allowed_file_extensions" />
                             {allowedFileExtensions})
                         </label>
-                        <div class="coverLetter-upload jobs-upload" data-max-file-amount="1"
+                        <div class="coverLetter-upload jobs-upload rounded" data-max-file-amount="1"
                             data-valid-file-extensions="{settings.fileUpload.fileTypes}"
                             data-max-file-size="{maxFileSize}" data-pid="{storagePid}"
                             data-inner-text="{f:translate(key: 'frontend.DropFiles', extensionName: 'sg_jobs')}"
@@ -360,7 +360,7 @@
                     </div>
                 </div>
                 <div class="row">
-                    <div class="col-md form-group jobs-upload-group">
+                    <div class="col-md">
                         <label for="apply-cv" class="form-label filled">
                             <f:translate key="frontend.apply.cv" />
                             (
@@ -368,7 +368,7 @@
                             {allowedFileExtensions})
                         </label>
 
-                        <div class="cv-upload jobs-upload" data-max-file-amount="1"
+                        <div class="cv-upload jobs-upload rounded" data-max-file-amount="1"
                             data-valid-file-extensions="{settings.fileUpload.fileTypes}"
                             data-max-file-size="{maxFileSize}" data-pid="{storagePid}"
                             data-inner-text="{f:translate(key: 'frontend.DropFiles', extensionName: 'sg_jobs')}"
@@ -403,7 +403,7 @@
                 </div>
 
                 <div class="row">
-                    <div class="col-md form-group jobs-upload-group">
+                    <div class="col-md">
                         <label for="apply-certificate" class="form-label filled">
                             <f:translate key="frontend.apply.certificate" />
                             (
@@ -411,7 +411,7 @@
                             {allowedFileExtensions})
                         </label>
 
-                        <div class="certificate-upload jobs-upload" data-max-file-amount="1"
+                        <div class="certificate-upload jobs-upload rounded" data-max-file-amount="1"
                             data-valid-file-extensions="{settings.fileUpload.fileTypes}"
                             data-max-file-size="{maxFileSize}" data-pid="{storagePid}"
                             data-inner-text="{f:translate(key: 'frontend.DropFiles', extensionName: 'sg_jobs')}"

Resources/Public/Sass/Bootstrap5/_sg-jobs.scss

+.dropzone {
+    border-color: $danger;
+    border-radius: $border-radius;
+    border-style: dashed;
+
+    &.dz-started {
+        border-color: $success;
+    }
+
+    .dz-message {
+        display: grid;
+
+        &::before {
+            content: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='30' height='16' viewBox='0 0 384 512'><path d='M64 0C28.7 0 0 28.7 0 64V448c0 35.3 28.7 64 64 64H320c35.3 0 64-28.7 64-64V160H256c-17.7 0-32-14.3-32-32V0H64zM256 0V128H384L256 0zM216 408c0 13.3-10.7 24-24 24s-24-10.7-24-24V305.9l-31 31c-9.4 9.4-24.6 9.4-33.9 0s-9.4-24.6 0-33.9l72-72c9.4-9.4 24.6-9.4 33.9 0l72 72c9.4 9.4 9.4 24.6 0 33.9s-24.6 9.4-33.9 0l-31-31V408z'/></svg>");
+        }
+    }
+}