Merge pull request #687 from citation-file-format/684-download-button

Adding full-width to 'Download' and 'Add more'  button

Author: recap

src/components/DownloadButton.vue

@@ -8,12 +8,14 @@
         type="a"
         download="CITATION.cff"
         v-bind:href="downloadUrl"
+        v-bind:class="$q.platform.is.mobile ? 'full-width' : ''"
     />
 </template>
 
 <script lang="ts">
 import { computed, defineComponent } from 'vue'
 import { useCffstr } from 'src/store/cffstr'
+import { useQuasar } from 'quasar'
 
 const toDownloadUrl = (body: string) => {
     return `data:text/vnd.yaml,${encodeURIComponent(body)}`
@@ -23,8 +25,9 @@ export default defineComponent({
     name: 'DownloadButton',
     setup () {
         const { cffstr } = useCffstr()
-
+        const $q = useQuasar()
         return {
+            $q,
             downloadUrl: computed(() => toDownloadUrl(cffstr.value))
         }
     }

src/components/ScreenFinishMinimum.vue

@@ -33,6 +33,7 @@
                     size="xl"
                     to="/identifiers"
                     v-on:click="showAdvanced"
+                    v-bind:class="$q.platform.is.mobile ? 'full-width' : ''"
                 />
             </div>
         </div>
@@ -48,6 +49,7 @@
 import { computed, defineComponent } from 'vue'
 import DownloadButton from 'components/DownloadButton.vue'
 import { useApp } from 'src/store/app'
+import { useQuasar } from 'quasar'
 import { useValidation } from 'src/store/validation'
 
 export default defineComponent({
@@ -58,7 +60,9 @@ export default defineComponent({
     setup () {
         const { setShowAdvanced, setStepName } = useApp()
         const { errors } = useValidation()
+        const $q = useQuasar()
         return {
+            $q,
             isValidCFF: computed(() => errors.value.length === 0),
             showAdvanced: async () => {
                 setShowAdvanced(true)