From e21230bbd9550ba3315607b021a60a4f9f9e1b61 Mon Sep 17 00:00:00 2001
From: Corentin Thomasset <corentin.thomasset74@gmail.com>
Date: Sun, 24 Apr 2022 23:09:12 +0200
Subject: [PATCH] refactor(responsive): row layout for multicards on big
 screens

---
 src/layouts/tool.layout.vue                   |  18 ++-
 .../base64-converter/base64-converter.vue     |   3 +-
 src/tools/bcrypt/bcrypt.vue                   |   1 -
 .../crontab-generator/crontab-generator.vue   |   1 -
 .../device-information/device-information.vue |   2 +-
 src/tools/encryption/encryption.vue           | 133 +++++++++---------
 src/tools/html-entities/html-entities.vue     |   1 -
 src/tools/url-encoder/url-encoder.vue         | 107 +++++++-------
 8 files changed, 136 insertions(+), 130 deletions(-)

diff --git a/src/layouts/tool.layout.vue b/src/layouts/tool.layout.vue
index 188aa787..58e8fb88 100644
--- a/src/layouts/tool.layout.vue
+++ b/src/layouts/tool.layout.vue
@@ -33,20 +33,36 @@ useHead(head);
           {{ route.meta.description }}
         </div>
       </div>
+    </div>
 
+    <div class="tool-content">
       <slot />
     </div>
   </base-layout>
 </template>
 
 <style lang="less" scoped>
+.tool-content {
+  display: flex;
+  flex-direction: row;
+  justify-content: center;
+  align-items: flex-start;
+  flex-wrap: wrap;
+  gap: 16px;
+
+  ::v-deep(& > *) {
+    flex: 0 1 600px;
+  }
+}
+
 .tool-layout {
-  max-width: 700px;
+  max-width: 600px;
   margin: 0 auto;
   box-sizing: border-box;
 
   .tool-header {
     padding: 40px 0;
+    width: 100%;
 
     .n-h1 {
       opacity: 0.9;
diff --git a/src/tools/base64-converter/base64-converter.vue b/src/tools/base64-converter/base64-converter.vue
index 05b15e44..307ea2fc 100644
--- a/src/tools/base64-converter/base64-converter.vue
+++ b/src/tools/base64-converter/base64-converter.vue
@@ -50,8 +50,7 @@ async function onUpload({ file: { file } }: { file: UploadFileInfo }) {
 
 <style lang="less" scoped>
 .n-input,
-.n-upload,
-.n-card {
+.n-upload {
   margin-bottom: 15px;
 }
 
diff --git a/src/tools/bcrypt/bcrypt.vue b/src/tools/bcrypt/bcrypt.vue
index 17701126..32f56ac0 100644
--- a/src/tools/bcrypt/bcrypt.vue
+++ b/src/tools/bcrypt/bcrypt.vue
@@ -22,7 +22,6 @@
     </n-space>
   </n-card>
 
-  <br />
   <n-card title="Compare string with hash">
     <n-form label-width="120">
       <n-form-item label="Your string: " label-placement="left">
diff --git a/src/tools/crontab-generator/crontab-generator.vue b/src/tools/crontab-generator/crontab-generator.vue
index 1c8be02e..5028204e 100644
--- a/src/tools/crontab-generator/crontab-generator.vue
+++ b/src/tools/crontab-generator/crontab-generator.vue
@@ -28,7 +28,6 @@
       </n-form>
     </n-space>
   </n-card>
-  <br />
   <n-card>
     <pre>
 ┌──────────── [optional] seconds (0 - 59)
diff --git a/src/tools/device-information/device-information.vue b/src/tools/device-information/device-information.vue
index dfa42fea..77fe5d75 100644
--- a/src/tools/device-information/device-information.vue
+++ b/src/tools/device-information/device-information.vue
@@ -1,5 +1,5 @@
 <template>
-  <n-card v-for="{ name, information } in sections" :key="name" :title="name" style="margin-bottom: 15px">
+  <n-card v-for="{ name, information } in sections" :key="name" :title="name">
     <n-grid cols="1 400:2" x-gap="12" y-gap="12">
       <n-gi v-for="{ label, value } in information" :key="label" class="information">
         <n-card :bordered="false" embedded>
diff --git a/src/tools/encryption/encryption.vue b/src/tools/encryption/encryption.vue
index 0de59036..154ad52a 100644
--- a/src/tools/encryption/encryption.vue
+++ b/src/tools/encryption/encryption.vue
@@ -1,81 +1,78 @@
 <template>
-  <div>
-    <n-card title="Encrypt">
-      <n-space item-style="flex: 1 1 0">
-        <n-form-item label="Your text:" :show-feedback="false">
-          <n-input
-            v-model:value="cypherInput"
-            type="textarea"
-            placeholder="The string to cypher"
-            :autosize="{ minRows: 4 }"
-          />
-        </n-form-item>
-        <n-space vertical>
-          <n-form-item label="Your secret key:" :show-feedback="false">
-            <n-input v-model:value="cypherSecret" />
-          </n-form-item>
-          <n-form-item label="Encryption algorithm:" :show-feedback="false">
-            <n-select
-              v-model:value="cypherAlgo"
-              :options="Object.keys(algos).map((label) => ({ label, value: label }))"
-            />
-          </n-form-item>
-        </n-space>
-      </n-space>
-      <br />
-      <n-form-item label="Yout text encrypted:" :show-feedback="false">
+  <n-card title="Encrypt">
+    <n-space item-style="flex: 1 1 0">
+      <n-form-item label="Your text:" :show-feedback="false">
         <n-input
-          :value="cypherOutput"
+          v-model:value="cypherInput"
           type="textarea"
-          placeholder="Your string hash"
-          :autosize="{ minRows: 2 }"
-          readonly
-          autocomplete="off"
-          autocorrect="off"
-          autocapitalize="off"
-          spellcheck="false"
+          placeholder="The string to cypher"
+          :autosize="{ minRows: 4 }"
         />
       </n-form-item>
-    </n-card>
+      <n-space vertical>
+        <n-form-item label="Your secret key:" :show-feedback="false">
+          <n-input v-model:value="cypherSecret" />
+        </n-form-item>
+        <n-form-item label="Encryption algorithm:" :show-feedback="false">
+          <n-select
+            v-model:value="cypherAlgo"
+            :options="Object.keys(algos).map((label) => ({ label, value: label }))"
+          />
+        </n-form-item>
+      </n-space>
+    </n-space>
     <br />
-    <n-card title="Decrypt">
-      <n-space item-style="flex: 1 1 0">
-        <n-form-item label="Your encrypted text:" :show-feedback="false">
-          <n-input
-            v-model:value="decryptInput"
-            type="textarea"
-            placeholder="The string to cypher"
-            :autosize="{ minRows: 4 }"
-          />
-        </n-form-item>
-        <n-space vertical>
-          <n-form-item label="Your secret key:" :show-feedback="false">
-            <n-input v-model:value="decryptSecret" />
-          </n-form-item>
-          <n-form-item label="Encryption algorithm:" :show-feedback="false">
-            <n-select
-              v-model:value="decryptAlgo"
-              :options="Object.keys(algos).map((label) => ({ label, value: label }))"
-            />
-          </n-form-item>
-        </n-space>
-      </n-space>
-      <br />
-      <n-form-item label="Yout decrypted text:" :show-feedback="false">
+    <n-form-item label="Yout text encrypted:" :show-feedback="false">
+      <n-input
+        :value="cypherOutput"
+        type="textarea"
+        placeholder="Your string hash"
+        :autosize="{ minRows: 2 }"
+        readonly
+        autocomplete="off"
+        autocorrect="off"
+        autocapitalize="off"
+        spellcheck="false"
+      />
+    </n-form-item>
+  </n-card>
+  <n-card title="Decrypt">
+    <n-space item-style="flex: 1 1 0">
+      <n-form-item label="Your encrypted text:" :show-feedback="false">
         <n-input
-          :value="decryptOutput"
+          v-model:value="decryptInput"
           type="textarea"
-          placeholder="Your string hash"
-          :autosize="{ minRows: 2 }"
-          readonly
-          autocomplete="off"
-          autocorrect="off"
-          autocapitalize="off"
-          spellcheck="false"
+          placeholder="The string to cypher"
+          :autosize="{ minRows: 4 }"
         />
       </n-form-item>
-    </n-card>
-  </div>
+      <n-space vertical>
+        <n-form-item label="Your secret key:" :show-feedback="false">
+          <n-input v-model:value="decryptSecret" />
+        </n-form-item>
+        <n-form-item label="Encryption algorithm:" :show-feedback="false">
+          <n-select
+            v-model:value="decryptAlgo"
+            :options="Object.keys(algos).map((label) => ({ label, value: label }))"
+          />
+        </n-form-item>
+      </n-space>
+    </n-space>
+    <br />
+    <n-form-item label="Yout decrypted text:" :show-feedback="false">
+      <n-input
+        :value="decryptOutput"
+        type="textarea"
+        placeholder="Your string hash"
+        :autosize="{ minRows: 2 }"
+        readonly
+        autocomplete="off"
+        autocorrect="off"
+        autocapitalize="off"
+        spellcheck="false"
+      />
+    </n-form-item>
+  </n-card>
 </template>
 
 <script setup lang="ts">
diff --git a/src/tools/html-entities/html-entities.vue b/src/tools/html-entities/html-entities.vue
index 13d5b6ed..74812595 100644
--- a/src/tools/html-entities/html-entities.vue
+++ b/src/tools/html-entities/html-entities.vue
@@ -23,7 +23,6 @@
       <n-button secondary @click="copyEscaped"> Copy </n-button>
     </n-space>
   </n-card>
-  <br />
   <n-card title="Unescape html entities">
     <n-form-item label="Your escaped string :">
       <n-input
diff --git a/src/tools/url-encoder/url-encoder.vue b/src/tools/url-encoder/url-encoder.vue
index e178353a..5615791a 100644
--- a/src/tools/url-encoder/url-encoder.vue
+++ b/src/tools/url-encoder/url-encoder.vue
@@ -1,63 +1,60 @@
 <template>
-  <div>
-    <n-card title="Encode">
-      <n-form-item
-        label="Your string :"
-        :feedback="encodedValidation.message"
-        :validation-status="encodedValidation.status"
-      >
-        <n-input
-          v-model:value="encodeInput"
-          type="textarea"
-          placeholder="The string to encode"
-          :autosize="{ minRows: 2 }"
-        />
-      </n-form-item>
+  <n-card title="Encode">
+    <n-form-item
+      label="Your string :"
+      :feedback="encodedValidation.message"
+      :validation-status="encodedValidation.status"
+    >
+      <n-input
+        v-model:value="encodeInput"
+        type="textarea"
+        placeholder="The string to encode"
+        :autosize="{ minRows: 2 }"
+      />
+    </n-form-item>
 
-      <n-form-item label="Your string encoded :">
-        <n-input
-          :value="encodeOutput"
-          type="textarea"
-          readonly
-          placeholder="Your string encoded"
-          :autosize="{ minRows: 2 }"
-        />
-      </n-form-item>
+    <n-form-item label="Your string encoded :">
+      <n-input
+        :value="encodeOutput"
+        type="textarea"
+        readonly
+        placeholder="Your string encoded"
+        :autosize="{ minRows: 2 }"
+      />
+    </n-form-item>
 
-      <n-space justify="center">
-        <n-button secondary @click="copyEncoded"> Copy </n-button>
-      </n-space>
-    </n-card>
-    <br />
-    <n-card title="Decode">
-      <n-form-item
-        label="Your encoded string :"
-        :feedback="decodeValidation.message"
-        :validation-status="decodeValidation.status"
-      >
-        <n-input
-          v-model:value="decodeInput"
-          type="textarea"
-          placeholder="The string to decode"
-          :autosize="{ minRows: 2 }"
-        />
-      </n-form-item>
+    <n-space justify="center">
+      <n-button secondary @click="copyEncoded"> Copy </n-button>
+    </n-space>
+  </n-card>
+  <n-card title="Decode">
+    <n-form-item
+      label="Your encoded string :"
+      :feedback="decodeValidation.message"
+      :validation-status="decodeValidation.status"
+    >
+      <n-input
+        v-model:value="decodeInput"
+        type="textarea"
+        placeholder="The string to decode"
+        :autosize="{ minRows: 2 }"
+      />
+    </n-form-item>
 
-      <n-form-item label="Your string decoded :">
-        <n-input
-          :value="decodeOutput"
-          type="textarea"
-          readonly
-          placeholder="Your string decoded"
-          :autosize="{ minRows: 2 }"
-        />
-      </n-form-item>
+    <n-form-item label="Your string decoded :">
+      <n-input
+        :value="decodeOutput"
+        type="textarea"
+        readonly
+        placeholder="Your string decoded"
+        :autosize="{ minRows: 2 }"
+      />
+    </n-form-item>
 
-      <n-space justify="center">
-        <n-button secondary @click="copyDecoded"> Copy </n-button>
-      </n-space>
-    </n-card>
-  </div>
+    <n-space justify="center">
+      <n-button secondary @click="copyDecoded"> Copy </n-button>
+    </n-space>
+  </n-card>
 </template>
 
 <script setup lang="ts">