From 6a60ffd7231281804d20f8b5df2a5baa3c4d7097 Mon Sep 17 00:00:00 2001
From: Abel Soares Siqueira <abel.s.siqueira@gmail.com>
Date: Fri, 12 Aug 2022 19:25:20 +0200
Subject: [PATCH 1/2] Change the preview to a drawer when the screen is md or
 smaller

---
 src/components/Header.vue                 | 10 +++++-
 src/components/LayoutStepper.vue          | 40 ++++++++++++++++++++---
 src/components/ScreenAbstract.vue         |  2 +-
 src/components/ScreenAuthors.vue          |  2 +-
 src/components/ScreenFinishAdvanced.vue   |  2 +-
 src/components/ScreenFinishMinimum.vue    |  2 +-
 src/components/ScreenIdentifiers.vue      |  2 +-
 src/components/ScreenKeywords.vue         |  2 +-
 src/components/ScreenLicense.vue          |  2 +-
 src/components/ScreenRelatedResources.vue |  2 +-
 src/components/ScreenStart.vue            |  2 +-
 src/components/ScreenVersionSpecific.vue  |  2 +-
 src/css/app.css                           | 10 +++++-
 13 files changed, 63 insertions(+), 17 deletions(-)

diff --git a/src/components/Header.vue b/src/components/Header.vue
index ee41a68a..4991af41 100644
--- a/src/components/Header.vue
+++ b/src/components/Header.vue
@@ -20,6 +20,13 @@
             target="_blank"
             type="a"
         />
+        <q-btn
+            class="lt-lg"
+            icon="menu"
+            v-on:click="$emit('togglePreview')"
+        >
+            Preview
+        </q-btn>
     </q-btn-group>
 </template>
 
@@ -27,7 +34,8 @@
 import { defineComponent } from 'vue'
 
 export default defineComponent({
-    name: 'Header'
+    name: 'Header',
+    emits: ['togglePreview']
 })
 </script>
 
diff --git a/src/components/LayoutStepper.vue b/src/components/LayoutStepper.vue
index d6c9d4c3..30a0733a 100644
--- a/src/components/LayoutStepper.vue
+++ b/src/components/LayoutStepper.vue
@@ -2,8 +2,35 @@
     <q-layout view="hHh lpR fFf">
         <div id="app">
             <q-header id="header-inner">
-                <Header />
+                <Header v-on:togglePreview="togglePreview" />
             </q-header>
+
+            <q-drawer
+                id="preview-drawer"
+                elevated
+                overlay
+                side="right"
+                v-model="previewDrawer"
+                width="600"
+            >
+                <div id="preview-button-close">
+                    <q-btn
+                        icon="close"
+                        v-on:click="togglePreview"
+                    >
+                        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"
@@ -11,8 +38,8 @@
                 >
                     <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 previewDrawer = ref(false)
         return {
             isNotFinish: computed(() => {
                 const currentPath = useRoute().path
                 return currentPath !== '/finish-minimum' && currentPath !== '/finish-advanced'
-            })
+            }),
+            previewDrawer,
+            togglePreview: () => { previewDrawer.value = !previewDrawer.value }
         }
     }
 })
diff --git a/src/components/ScreenAbstract.vue b/src/components/ScreenAbstract.vue
index 747eafd5..6fbad59c 100644
--- a/src/components/ScreenAbstract.vue
+++ b/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">
diff --git a/src/components/ScreenAuthors.vue b/src/components/ScreenAuthors.vue
index eab18e64..5300541d 100644
--- a/src/components/ScreenAuthors.vue
+++ b/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">
diff --git a/src/components/ScreenFinishAdvanced.vue b/src/components/ScreenFinishAdvanced.vue
index 2d42a9cf..7e3831e4 100644
--- a/src/components/ScreenFinishAdvanced.vue
+++ b/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
diff --git a/src/components/ScreenFinishMinimum.vue b/src/components/ScreenFinishMinimum.vue
index 838aa6f6..5e37fc3e 100644
--- a/src/components/ScreenFinishMinimum.vue
+++ b/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
diff --git a/src/components/ScreenIdentifiers.vue b/src/components/ScreenIdentifiers.vue
index e78eb0a5..f2cc6b0e 100644
--- a/src/components/ScreenIdentifiers.vue
+++ b/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">
diff --git a/src/components/ScreenKeywords.vue b/src/components/ScreenKeywords.vue
index 486918af..161d56de 100644
--- a/src/components/ScreenKeywords.vue
+++ b/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">
diff --git a/src/components/ScreenLicense.vue b/src/components/ScreenLicense.vue
index 717c4b4b..c3f5c72a 100644
--- a/src/components/ScreenLicense.vue
+++ b/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">
diff --git a/src/components/ScreenRelatedResources.vue b/src/components/ScreenRelatedResources.vue
index ffe84bb8..79b0e179 100644
--- a/src/components/ScreenRelatedResources.vue
+++ b/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">
diff --git a/src/components/ScreenStart.vue b/src/components/ScreenStart.vue
index c468129b..cf283849 100644
--- a/src/components/ScreenStart.vue
+++ b/src/components/ScreenStart.vue
@@ -3,7 +3,7 @@
 
     <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">
diff --git a/src/components/ScreenVersionSpecific.vue b/src/components/ScreenVersionSpecific.vue
index 9813b869..9fb8b724 100644
--- a/src/components/ScreenVersionSpecific.vue
+++ b/src/components/ScreenVersionSpecific.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">
diff --git a/src/css/app.css b/src/css/app.css
index 71167084..b21db81e 100644
--- a/src/css/app.css
+++ b/src/css/app.css
@@ -66,7 +66,7 @@ body {
     max-height: 80px;
     min-height: 80px;
 }
-#preview {
+#preview-drawer, #preview-static {
     background-color: var(--fgcolor, limegreen);
     display: flex;
     flex-direction: column;
@@ -76,6 +76,14 @@ body {
     padding-top: 30px;
     border-radius: 0px 7px 7px 0px;
 }
+#preview-button-close {
+    align-items: center;
+    display: flex;
+    flex-direction: row;
+    justify-content: center;
+    max-height: 80px;
+    min-height: 80px;
+}
 #preview-content {
     background-color: var(--fgcolor, lightcoral);
     display: flex;

From 6ea18a9d67c467bf30bbe37bd8766b4874c9611e Mon Sep 17 00:00:00 2001
From: Abel Soares Siqueira <abel.s.siqueira@gmail.com>
Date: Wed, 17 Aug 2022 15:32:21 +0200
Subject: [PATCH 2/2] Change Preview drawer variable names based on @fdiblen's
 review

---
 src/components/LayoutStepper.vue | 12 ++++++------
 1 file changed, 6 insertions(+), 6 deletions(-)

diff --git a/src/components/LayoutStepper.vue b/src/components/LayoutStepper.vue
index 30a0733a..f471af4f 100644
--- a/src/components/LayoutStepper.vue
+++ b/src/components/LayoutStepper.vue
@@ -2,7 +2,7 @@
     <q-layout view="hHh lpR fFf">
         <div id="app">
             <q-header id="header-inner">
-                <Header v-on:togglePreview="togglePreview" />
+                <Header v-on:togglePreview="onTogglePreview" />
             </q-header>
 
             <q-drawer
@@ -10,13 +10,13 @@
                 elevated
                 overlay
                 side="right"
-                v-model="previewDrawer"
+                v-model="isPreviewDrawerEnabled"
                 width="600"
             >
                 <div id="preview-button-close">
                     <q-btn
                         icon="close"
-                        v-on:click="togglePreview"
+                        v-on:click="onTogglePreview"
                     >
                         Close preview
                     </q-btn>
@@ -75,14 +75,14 @@ export default defineComponent({
         Footer
     },
     setup () {
-        const previewDrawer = ref(false)
+        const isPreviewDrawerEnabled = ref(false)
         return {
             isNotFinish: computed(() => {
                 const currentPath = useRoute().path
                 return currentPath !== '/finish-minimum' && currentPath !== '/finish-advanced'
             }),
-            previewDrawer,
-            togglePreview: () => { previewDrawer.value = !previewDrawer.value }
+            isPreviewDrawerEnabled,
+            onTogglePreview: () => { isPreviewDrawerEnabled.value = !isPreviewDrawerEnabled.value }
         }
     }
 })