Merge pull request #616 from citation-file-format/611-responsive

Author: abelsiqueira

src/components/Header.vue

@@ -20,14 +20,22 @@
             target="_blank"
             type="a"
         />
+        <q-btn
+            class="lt-lg"
+            icon="menu"
+            v-on:click="$emit('togglePreview')"
+        >
+            Preview
+        </q-btn>
     </q-btn-group>
 </template>
 
 <script lang="ts">
 import { defineComponent } from 'vue'
 
 export default defineComponent({
-    name: 'Header'
+    name: 'Header',
+    emits: ['togglePreview']
 })
 </script>
 

src/components/LayoutStepper.vue

@@ -2,17 +2,44 @@
     <q-layout view="hHh lpR fFf">
         <div id="app">
             <q-header id="header-inner">
-                <Header />
+                <Header v-on:togglePreview="onTogglePreview" />
             </q-header>
+
+            <q-drawer
+                id="preview-drawer"
+                elevated
+                overlay
+                side="right"
+                v-model="isPreviewDrawerEnabled"
+                width="600"
+            >
+                <div id="preview-button-close">
+                    <q-btn
+                        icon="close"
+                        v-on:click="onTogglePreview"
+                    >
+                        Close preview
+                    </q-btn>
+                </div>
+
+                <div id="preview-content">
+                    <Preview />
+                </div>
+
+                <div id="preview-button-bar">
+                    <DownloadButton v-if="isNotFinish" />
+                </div>
+            </q-drawer>
+
             <q-page-container>
                 <q-page
                     id="middle"
                     class="row"
                 >
                     <router-view />
                     <div
-                        id="preview"
-                        class="col-12 col-md-4 col-sm-3"
+                        id="preview-static"
+                        class="col-12 col-lg-5 gt-md"
                     >
                         <div id="preview-content">
                             <Preview />
@@ -32,7 +59,7 @@
 </template>
 
 <script lang="ts">
-import { computed, defineComponent } from 'vue'
+import { computed, defineComponent, ref } from 'vue'
 import DownloadButton from 'components/DownloadButton.vue'
 import Footer from 'components/Footer.vue'
 import Header from 'components/Header.vue'
@@ -48,11 +75,14 @@ export default defineComponent({
         Footer
     },
     setup () {
+        const isPreviewDrawerEnabled = ref(false)
         return {
             isNotFinish: computed(() => {
                 const currentPath = useRoute().path
                 return currentPath !== '/finish-minimum' && currentPath !== '/finish-advanced'
-            })
+            }),
+            isPreviewDrawerEnabled,
+            onTogglePreview: () => { isPreviewDrawerEnabled.value = !isPreviewDrawerEnabled.value }
         }
     }
 })

src/components/ScreenAbstract.vue

@@ -3,7 +3,7 @@
 
     <div
         id="form"
-        class="col-12 col-lg-5 col-md-4 col-sm-3"
+        class="col-12 col-lg-5 col-sm-10"
     >
         <div id="form-title">
             <h1 class="page-title">

src/components/ScreenAuthors.vue

@@ -2,7 +2,7 @@
     <Stepper />
     <div
         id="form"
-        class="col-12 col-lg-5 col-md-4 col-sm-3"
+        class="col-12 col-lg-5 col-sm-10"
     >
         <div id="form-title">
             <h1 class="page-title">

src/components/ScreenFinishAdvanced.vue

@@ -2,7 +2,7 @@
     <Stepper />
     <div
         id="form"
-        class="col-12 col-md-6 col-sm-7"
+        class="col-12 col-lg-5 col-sm-10"
     >
         <div id="form-title">
             <h1

src/components/ScreenFinishMinimum.vue

@@ -2,7 +2,7 @@
     <Stepper />
     <div
         id="form"
-        class="col-12 col-md-6 col-sm-7"
+        class="col-12 col-lg-5 col-sm-10"
     >
         <div id="form-title">
             <h1

src/components/ScreenIdentifiers.vue

@@ -2,7 +2,7 @@
     <Stepper />
     <div
         id="form"
-        class="col-12 col-md-6 col-sm-7"
+        class="col-12 col-lg-5 col-sm-10"
     >
         <div id="form-title">
             <h1 class="page-title">

src/components/ScreenKeywords.vue

@@ -2,7 +2,7 @@
     <Stepper />
     <div
         id="form"
-        class="col-12 col-md-6 col-sm-7"
+        class="col-12 col-lg-5 col-sm-10"
     >
         <div id="form-title">
             <h1 class="page-title">

src/components/ScreenLicense.vue

@@ -2,7 +2,7 @@
     <Stepper />
     <div
         id="form"
-        class="col-12 col-md-6 col-sm-7"
+        class="col-12 col-lg-5 col-sm-10"
     >
         <div id="form-title">
             <h1 class="page-title">

src/components/ScreenRelatedResources.vue

@@ -2,7 +2,7 @@
     <Stepper />
     <div
         id="form"
-        class="col-12 col-md-6 col-sm-7"
+        class="col-12 col-lg-5 col-sm-10"
     >
         <div id="form-title">
             <h1 class="page-title">