From fed0daf0a77d92001e06ff078a58fae48d789777 Mon Sep 17 00:00:00 2001
From: Corentin Thomasset <corentin.thomasset74@gmail.com>
Date: Mon, 17 May 2021 23:33:50 +0200
Subject: [PATCH] fix(ui): responsive qr-code generator

---
 pages/tools/web/qrcode-generator.vue | 67 +++++++++++++++-------------
 1 file changed, 36 insertions(+), 31 deletions(-)

diff --git a/pages/tools/web/qrcode-generator.vue b/pages/tools/web/qrcode-generator.vue
index d3165796..b1a9980f 100644
--- a/pages/tools/web/qrcode-generator.vue
+++ b/pages/tools/web/qrcode-generator.vue
@@ -1,40 +1,45 @@
 <template>
   <ToolWrapper :config="config()">
-    <v-text-field
-      v-model="value"
-      outlined
-      label="Data"
-      :rules="rules.value"
-    />
-    <v-slider v-model="size" min="100" max="1920" label="Size (preview will not change): " thumb-label />
-    <v-select
-      v-model="level"
-      outlined
-      :items="levels"
-      label="Error resistance"
-    />
-    <v-row>
-      <v-col cols="12" md="6" sm="12">
-        <ColorInput v-model="fgColor" label="Foreground color" />
+    <v-row justify="center" align="center">
+      <v-col cols="12" lg="6" sm="12">
+        <v-text-field
+          v-model="value"
+          outlined
+          label="Data"
+          :rules="rules.value"
+        />
+        <v-slider v-model="size" min="100" max="1920" label="Size (preview will not change): " thumb-label/>
+        <v-select
+          v-model="level"
+          outlined
+          :items="levels"
+          label="Error resistance"
+        />
+        <v-row>
+          <v-col cols="12" md="6" sm="12">
+            <ColorInput v-model="fgColor" label="Foreground color"/>
+          </v-col>
+          <v-col cols="12" md="6" sm="12">
+            <ColorInput v-model="bgColor" label="Background color"/>
+          </v-col>
+        </v-row>
+
       </v-col>
-      <v-col cols="12" md="6" sm="12">
-        <ColorInput v-model="bgColor" label="Background color" />
+
+      <v-col cols="12" lg="6" sm="12" class="text-center mt-5 ">
+        <qrcode-vue
+          :value="value"
+          :size="size"
+          :level="level"
+          :background="bgColor"
+          :foreground="fgColor"
+          render-as="svg"
+          class-name="qrcode-wrapper"
+        />
       </v-col>
     </v-row>
 
-    <div class="text-center mt-5 mb-5">
-      <qrcode-vue
-        :value="value"
-        :size="size"
-        :level="level"
-        :background="bgColor"
-        :foreground="fgColor"
-        render-as="svg"
-        class-name="qrcode-wrapper"
-      />
-    </div>
-
-    <div class="text-center mb-sm-2">
+    <div class="text-center mb-sm-2 mt-4">
       <v-btn class="mr-1" color="primary" @click="download('png')">
         download as png
       </v-btn>