From 7303a6e5a3c9ec6be3c6031555953c51802c49f9 Mon Sep 17 00:00:00 2001
From: Ramon Wenger <ramon.wenger@iterativ.ch>
Date: Wed, 1 May 2024 15:13:45 +0200
Subject: [PATCH] Update mobile styling for assignment submission form

---
 .../content-blocks/DocumentBlock.vue          | 20 +++++++++++--------
 .../assignment/FinalSubmission.vue            | 19 +++++++++++++-----
 .../assignment/SubmissionForm.vue             |  4 +++-
 .../components/ui/file-upload/FileUpload.vue  | 11 ++++++++--
 4 files changed, 38 insertions(+), 16 deletions(-)

diff --git a/client/src/components/content-blocks/DocumentBlock.vue b/client/src/components/content-blocks/DocumentBlock.vue
index e2c8500a..2207f504 100644
--- a/client/src/components/content-blocks/DocumentBlock.vue
+++ b/client/src/components/content-blocks/DocumentBlock.vue
@@ -19,9 +19,7 @@
 
 <script>
 import { defineAsyncComponent } from 'vue';
-const DocumentIcon = defineAsyncComponent(() =>
-  import('@/components/icons/DocumentIcon.vue')
-);
+const DocumentIcon = defineAsyncComponent(() => import('@/components/icons/DocumentIcon.vue'));
 const TrashIcon = defineAsyncComponent(() => import('@/components/icons/TrashIcon.vue'));
 
 export default {
@@ -47,12 +45,16 @@ export default {
 };
 </script>
 
-<style scoped lang="scss">
-@import 'styles/helpers';
+<style scoped lang="postcss">
+@import 'styles/css/mixins/desktop.css';
 
 .document-block {
-  display: grid;
-  grid-template-columns: 50px 1fr 50px;
+  display: flex;
+  gap: var(--small-spacing);
+  @mixin desktop {
+    display: grid;
+    grid-template-columns: 50px 1fr 50px;
+  }
   align-items: center;
 
   &__icon {
@@ -68,14 +70,16 @@ export default {
     display: flex;
     justify-content: center;
     align-items: center;
+    align-self: flex-end;
     width: 50px;
     height: 50px;
+    margin-left: auto;
   }
 
   &__trash-icon {
     width: 25px;
     height: 25px;
-    fill: $color-silver-dark;
+    fill: var(--color-silver-dark);
     cursor: pointer;
     justify-self: center;
   }
diff --git a/client/src/components/content-blocks/assignment/FinalSubmission.vue b/client/src/components/content-blocks/assignment/FinalSubmission.vue
index a975709f..360ddb74 100644
--- a/client/src/components/content-blocks/assignment/FinalSubmission.vue
+++ b/client/src/components/content-blocks/assignment/FinalSubmission.vue
@@ -86,28 +86,37 @@ export default {
   }
 
   &__explanation {
-    display: flex;
+    display: grid;
+    grid-template-columns: auto 1fr;
+    gap: $small-spacing;
     align-items: center;
+    @include desktop {
+      display: flex;
+      align-items: center;
+    }
   }
 
   &__explanation-icon {
-    width: $large-icon-dimension;
-    height: $large-icon-dimension;
+    width: $default-icon-dimension;
+    height: $default-icon-dimension;
+    @include desktop {
+      width: $large-icon-dimension;
+      height: $large-icon-dimension;
+    }
     fill: $color-brand;
-    margin-right: $small-spacing;
   }
 
   &__explanation-text {
     color: $color-brand;
     font-family: $sans-serif-font-family;
     font-weight: $font-weight-regular;
-    margin-right: $medium-spacing;
   }
 
   &__reopen {
     @include small-text;
     cursor: pointer;
     color: $color-charcoal-light;
+    grid-column: 1 / span 2;
   }
 }
 </style>
diff --git a/client/src/components/content-blocks/assignment/SubmissionForm.vue b/client/src/components/content-blocks/assignment/SubmissionForm.vue
index 92ee5cfc..7d51b5ee 100644
--- a/client/src/components/content-blocks/assignment/SubmissionForm.vue
+++ b/client/src/components/content-blocks/assignment/SubmissionForm.vue
@@ -122,13 +122,15 @@ const changeDocumentUrl = (documentUrl: string) => {
 
   &__actions {
     display: flex;
-    align-items: center;
     gap: var(--small-spacing);
 
     flex-direction: column;
+
+    align-items: flex-start;
     @mixin desktop {
       gap: var(--medium-spacing);
       flex-direction: row;
+      align-items: center;
     }
   }
 
diff --git a/client/src/components/ui/file-upload/FileUpload.vue b/client/src/components/ui/file-upload/FileUpload.vue
index 4328e0f3..c389f741 100644
--- a/client/src/components/ui/file-upload/FileUpload.vue
+++ b/client/src/components/ui/file-upload/FileUpload.vue
@@ -45,6 +45,13 @@ export default {
 };
 </script>
 
-<style scoped lang="scss">
-@import 'styles/helpers';
+<style scoped lang="postcss">
+@import 'styles/css/mixins/desktop.css';
+
+.file-upload {
+  width: 100%;
+  @mixin desktop {
+    width: auto;
+  }
+}
 </style>