restyled upload view

src/css/app.styl

@@ -86,9 +86,6 @@ p
   -webkit-box-shadow: $shadow $shadow-color;
   -moz-box-shadow: $shadow $shadow-color;
   box-shadow: $shadow $shadow-color;
-  padding-top $standard-padding
-  padding-bottom $standard-padding
-  margin-bottom $standard-margin;
   border-radius: $border-radius;
 
 a

src/css/uppy_adaptions.styl

@@ -40,6 +40,7 @@
   border-radius 0
   padding 0
   width auto
+  border: 1px $shadow-color dashed
 
   &:hover
     background-color darken($light-blue, 2.5%)
@@ -142,3 +143,6 @@
   line-height $body-line-height !important
   color: $light-font-color !important
   text-align center !important
+.uppy-dashboard-addFiles
+  flex none
+

src/pages/Upload.vue

 <template>
   <q-page padding>
-    <div class="row text-center main-upload-cont">
+    <div class="row text-center main-upload-cont justify-center">
+      <div
+        class="col col-12 justify-center"
+      >
+        <h1>{{ $t('remove_metadata') }}</h1>
+      </div>
+      <p class="xs-hide col-8 text-center">
+        {{ $t('the_file_you_see') }}
+      </p>
       <section
         v-show="supportedExtensions.length > 0"
         class="q-pa-sm q-pa-md col-xs-12
-          col-sm-6 offset-sm-3 col-md-8 offset-md-2
-          col-lg-6 offset-lg-3 p-1 mat-shadowed-box"
+          col-sm-6 col-md-8
+          col-lg-6 p-1"
       >
-        <h1>{{ $t('remove_metadata') }}</h1>
-        <p class="xs-hide">
-          {{ $t('the_file_you_see') }}
-        </p>
-        <div id="drag-drop-area" />
-        <span class="info-link">
-          <q-btn
-            color="secondary"
-            size="xs"
-            round
-            :to="{ name: 'info' }"
-            aria-label="help button"
-          >
-            ?
-          </q-btn>
-        </span>
+        <div
+          id="drag-drop-area"
+          class="mat-shadowed-box"
+        />
       </section>
       <section
         v-if="supportedExtensions.length == 0"
@@ -40,46 +36,23 @@
         />
       </section>
     </div>
+    <q-page-sticky position="bottom-right" :offset="[18, 18]">
+      <q-btn
+        color="secondary"
+        size="md"
+        round
+        :to="{ name: 'info' }"
+        aria-label="help button"
+      >
+        ?
+      </q-btn>
+    </q-page-sticky>
   </q-page>
 </template>
 
 <style lang="stylus">
-  #drag-drop-area
-    max-width: 95vw
-  .uppy-Dashboard-AddFilesPanel
-    height 45vh
-  .uppy-Dashboard-inner
-    min-height: 0 !important
-    background-color: white
-    border: unset
-    border-radius: 5px
-    width: auto !important
-  .uppy-DashboardAddFiles
-    border: unset
-    background-color: white
-    margin: 0;
-  .uppy-DashboardContent-bar
-    background-color: white
-  .uppy-StatusBar-actions
-    background-color white
-  .mat-shadowed-box
-    margin-bottom: 0
-  .info-link
-    color: $light-font-color
-    position absolute
-    right: 15px
-    bottom: 15px
-  .info-link a
-    font-weight: bold;
-  .mat-shadowed-box
-    position relative
-  .uppy-StatusBar-actions
-    padding unset
-  .uppy-size--md .uppy-DashboardAddFiles
-    border: unset
-  .uppy-DashboardTabs
-    height 100%
-    margin-top 1.5rem
+ .test
+  color grey
 </style>
 
 <script>
@@ -134,7 +107,8 @@ export default {
       }).use(Uppy.Dashboard, {
         inline: true,
         target: '#drag-drop-area',
-        height: '100%',
+        height: '40vh',
+        width: '100%',
         showProgressDetails: true,
         proudlyDisplayPoweredByUppy: false,
         showLinkToFileUploadResult: false
@@ -173,3 +147,10 @@ export default {
   }
 }
 </script>
+
+<style lang="stylus">
+  .info-link
+    position absolute
+    right 1rem
+    bottom: 1rem
+</style>