chore: adjusting height for v2 to show little bigger editor

Author: technikhil314

components/v2/footer.vue

@@ -0,0 +1,77 @@
+<template>
+  <footer
+    class="
+      sticky
+      pt-4
+      pb-2
+      mt-2
+      text-center text-gray-800
+      top-full
+      bg-inherit
+      dark:text-gray-50
+      min-h-max
+    "
+  >
+    Made with &hearts; using
+    <a
+      href="https://nuxtjs.org"
+      title="nuxtjs a vuejs based framework inspired by nextjs"
+      aria-label="nuxtjs a vuejs based framework inspired by nextjs"
+    >
+      <svg
+        class="inline w-4 h-4"
+        viewBox="0 0 124 124"
+        fill="none"
+        xmlns="http://www.w3.org/2000/svg"
+      >
+        <path
+          fill-rule="evenodd"
+          clip-rule="evenodd"
+          d="M55.7498 27.1551C52.5277 21.615 44.4723 21.6149 41.2502 27.1551L6.13404 87.5346C2.91191 93.0748 6.93956 100 13.3838 100H40.7975C38.0438 97.5934 37.0241 93.4303 39.1079 89.8584L65.7033 44.2694L55.7498 27.1551Z"
+          fill="#80EEC0"
+        />
+        <path
+          d="M78.0002 40.3997C80.6668 35.8668 87.3332 35.8668 89.9998 40.3997L119.061 89.801C121.728 94.3339 118.395 100 113.062 100H54.9383C49.6052 100 46.2719 94.3339 48.9385 89.801L78.0002 40.3997Z"
+          fill="#00DC82"
+        />
+      </svg>
+    </a>
+    <span>&</span>
+    <a
+      href="https://tailwindcss.com/"
+      title="tailwind css"
+      aria-label="tailwind css"
+    >
+      <svg
+        xmlns="http://www.w3.org/2000/svg"
+        fill="none"
+        viewBox="0 0 54 33"
+        class="inline w-4 h-4"
+      >
+        <g clip-path="url(#prefix__clip0)">
+          <path
+            fill="#38bdf8"
+            fill-rule="evenodd"
+            d="M27 0c-7.2 0-11.7 3.6-13.5 10.8 2.7-3.6 5.85-4.95 9.45-4.05 2.054.513 3.522 2.004 5.147 3.653C30.744 13.09 33.808 16.2 40.5 16.2c7.2 0 11.7-3.6 13.5-10.8-2.7 3.6-5.85 4.95-9.45 4.05-2.054-.513-3.522-2.004-5.147-3.653C36.756 3.11 33.692 0 27 0zM13.5 16.2C6.3 16.2 1.8 19.8 0 27c2.7-3.6 5.85-4.95 9.45-4.05 2.054.514 3.522 2.004 5.147 3.653C17.244 29.29 20.308 32.4 27 32.4c7.2 0 11.7-3.6 13.5-10.8-2.7 3.6-5.85 4.95-9.45 4.05-2.054-.513-3.522-2.004-5.147-3.653C23.256 19.31 20.192 16.2 13.5 16.2z"
+            clip-rule="evenodd"
+          />
+        </g>
+        <defs>
+          <clipPath id="prefix__clip0">
+            <path fill="#fff" d="M0 0h54v32.4H0z" />
+          </clipPath>
+        </defs>
+      </svg>
+    </a>
+    by &copy;
+    <a
+      href="https://technikhil314.netlify.app"
+      class="hover:underline underline-offset-2"
+      >Nikhil Mehta</a
+    >
+  </footer>
+</template>
+<script lang="ts">
+import Vue from 'vue'
+export default Vue.extend({})
+</script>

components/v2/navbar.vue

@@ -1,6 +1,17 @@
 <template>
   <nav
-    class="sticky top-0 left-0 right-0 z-10 text-gray-800 shadow-lg  dark:shadow-dark bg-gray-50 dark:bg-gray-900 dark:text-gray-50"
+    class="
+      sticky
+      top-0
+      left-0
+      right-0
+      z-10
+      text-gray-800
+      shadow-lg
+      dark:shadow-dark
+      bg-gray-50
+      dark:bg-gray-900 dark:text-gray-50
+    "
   >
     <div class="container flex items-center py-4 m-auto">
       <div
@@ -66,7 +77,20 @@
           <slot name="right" />
           <button
             type="button"
-            class="inline-flex items-center justify-center ml-4 bg-transparent border-2 border-gray-700 rounded-full shadow-lg  w-9 h-9 active:scale-y-75 hover:scale-105 hover:shadow-lg"
+            class="
+              inline-flex
+              items-center
+              justify-center
+              ml-4
+              bg-transparent
+              border-2 border-gray-700
+              rounded-full
+              shadow-lg
+              w-9
+              h-9
+              active:scale-y-75
+              hover:scale-105 hover:shadow-lg
+            "
             :aria-label="
               darkMode ? 'Switch to light theme' : 'Switch to dark theme'
             "

layouts/main.vue

@@ -3,7 +3,6 @@
     <SkipToNav />
     <Toast />
     <Nuxt />
-    <Footer />
   </div>
 </template>
 <script lang="ts">

pages/index.vue

@@ -30,7 +30,14 @@
               id="lhs"
               rows="28"
               name="lhs"
-              class="flex-1 w-full bg-transparent rounded-md resize-none  form-textarea"
+              class="
+                flex-1
+                w-full
+                bg-transparent
+                rounded-md
+                resize-none
+                form-textarea
+              "
               v-html="lhs"
             ></textarea>
           </div>
@@ -50,15 +57,38 @@
               id="rhs"
               rows="28"
               name="rhs"
-              class="flex-1 w-full bg-transparent rounded-md resize-none  form-textarea"
+              class="
+                flex-1
+                w-full
+                bg-transparent
+                rounded-md
+                resize-none
+                form-textarea
+              "
               v-html="rhs"
             >
             </textarea>
           </div>
         </section>
         <div class="self-end flex-grow-0 w-full text-center">
           <button
-            class="inline-flex items-center justify-center w-48 px-4 py-2 transition-transform transform bg-blue-600 rounded-md shadow-lg outline-none  text-gray-50 focus:ring-4 active:scale-y-75"
+            class="
+              inline-flex
+              items-center
+              justify-center
+              w-48
+              px-4
+              py-2
+              transition-transform
+              transform
+              bg-blue-600
+              rounded-md
+              shadow-lg
+              outline-none
+              text-gray-50
+              focus:ring-4
+              active:scale-y-75
+            "
             aria-label="Click here to compare the inputted text blocks"
             id="submitButton"
           >
@@ -67,6 +97,7 @@
         </div>
       </form>
     </main>
+    <Footer />
   </div>
 </template>
 

pages/v2/index.vue

@@ -6,10 +6,10 @@
     <main class="text-gray-800 outline-none dark:text-gray-50" tabindex="0">
       <section>
         <header>
-          <h1 class="w-full mb-2 text-xl text-center">
+          <h1 class="w-full mb-2 text-center text-md">
             Find difference in any two text blocks and get easy sharable link
           </h1>
-          <h2 class="w-full mb-2 text-center text-md">
+          <h2 class="w-full mb-2 text-sm text-center">
             Don’t worry, We don’t store any of your data
           </h2>
         </header>
@@ -201,6 +201,7 @@
         </div>
       </form>
     </main>
+    <Footer />
   </div>
 </template>
 
@@ -214,8 +215,9 @@ import {
 } from '../../helpers/utils'
 import showTutorials from '../../helpers/driverjsTutorials'
 import Navbar from '~/components/v2/navbar.vue'
+import Footer from '~/components/v2/footer.vue'
 export default Vue.extend({
-  components: { Navbar },
+  components: { Navbar, Footer },
   layout: 'main',
   data() {
     return {
@@ -337,17 +339,18 @@ export default Vue.extend({
 
 <style scoped>
 main {
-  @apply grid gap-4;
+  @apply grid gap-2;
 
+  margin-top: 1rem;
   grid-template-rows: 100px 1fr;
   @media screen and (min-width: 768px) {
     grid-template-rows: 60px 1fr;
   }
 }
 .editor-wrapper {
-  max-height: calc(100vh - 20rem);
+  max-height: calc(100vh - 18rem);
 }
 .editor {
-  max-height: calc(100vh - 21rem);
+  max-height: calc(100vh - 20rem);
 }
 </style>