fix(footer): added footer to diff pages too

technikhil314 · Sep 25, 2024 · d96b5de · d96b5de
1 parent 04be2bb
commit d96b5de
Show file tree

Hide file tree

Showing 4 changed files with 141 additions and 57 deletions.
diff --git a/pages/diff.vue b/pages/diff.vue
@@ -4,7 +4,21 @@
       <template #right>
         <button
           type="button"
-          class="inline-flex justify-center px-4 py-2 transition-transform transform rounded-md shadow outline-none  copy-uri-button align-center focus:ring-4 active:scale-y-75"
+          class="
+            inline-flex
+            justify-center
+            px-4
+            py-2
+            transition-transform
+            transform
+            rounded-md
+            shadow
+            outline-none
+            copy-uri-button
+            align-center
+            focus:ring-4
+            active:scale-y-75
+          "
           :class="{
             'bg-blue-500 text-white': !copied,
             'bg-green-500 text-gray-800': copied,
@@ -50,10 +64,30 @@
     </Navbar>
     <main class="outline-none" tabindex="0">
       <div
-        class="flex items-stretch w-full gap-4 font-mono text-gray-800  dark:text-gray-50"
+        class="
+          flex
+          items-stretch
+          w-full
+          gap-4
+          font-mono
+          text-gray-800
+          dark:text-gray-50
+        "
       >
         <div
-          class="relative flex-1 px-4 py-2 overflow-y-auto border-2 rounded-md  dark:border-gray-500 max-h-screen--nav line-number-gutter min-h-80"
+          class="
+            relative
+            flex-1
+            px-4
+            py-2
+            overflow-y-auto
+            border-2
+            rounded-md
+            dark:border-gray-500
+            max-h-screen--nav
+            line-number-gutter
+            min-h-80
+          "
         >
           <RTStickyCopyButton :click-handler="copyTextToClipboard" />
           <div
@@ -67,7 +101,19 @@
           </div>
         </div>
         <div
-          class="relative flex-1 px-4 py-2 overflow-y-auto border-2 rounded-md  dark:border-gray-500 min-h-80 line-number-gutter max-h-screen--nav"
+          class="
+            relative
+            flex-1
+            px-4
+            py-2
+            overflow-y-auto
+            border-2
+            rounded-md
+            dark:border-gray-500
+            min-h-80
+            line-number-gutter
+            max-h-screen--nav
+          "
         >
           <RTStickyCopyButton :click-handler="copyTextToClipboard" />
           <div
@@ -82,6 +128,7 @@
         </div>
       </div>
     </main>
+    <Footer />
   </div>
 </template>
 

diff --git a/pages/v1/diff.vue b/pages/v1/diff.vue
@@ -1,25 +1,36 @@
 <template>
-  <div class="page-contents">
-    <Navbar :show-back-button="true" />
-    <main class="outline-none" tabindex="0">
-      <DiffActionBar />
-      <section
-        class="flex items-stretch w-full gap-4 font-mono text-gray-800  dark:text-gray-50"
-      >
-        <SingleDiff
-          :id="'lhsDiff'"
-          :modified-class-string="'bg-red-200 dark:bg-red-800'"
-          :label="lhsLabel"
-          :diff="lhsDiff"
-        />
-        <SingleDiff
-          :id="'rhsDiff'"
-          :modified-class-string="'bg-green-200 dark:bg-green-700'"
-          :label="rhsLabel"
-          :diff="rhsDiff"
-        />
-      </section>
-    </main>
+  <div class="contents">
+    <div class="page-contents">
+      <Navbar :show-back-button="true" />
+      <main class="outline-none" tabindex="0">
+        <DiffActionBar />
+        <section
+          class="
+            flex
+            items-stretch
+            w-full
+            gap-4
+            font-mono
+            text-gray-800
+            dark:text-gray-50
+          "
+        >
+          <SingleDiff
+            :id="'lhsDiff'"
+            :modified-class-string="'bg-red-200 dark:bg-red-800'"
+            :label="lhsLabel"
+            :diff="lhsDiff"
+          />
+          <SingleDiff
+            :id="'rhsDiff'"
+            :modified-class-string="'bg-green-200 dark:bg-green-700'"
+            :label="rhsLabel"
+            :diff="rhsDiff"
+          />
+        </section>
+      </main>
+    </div>
+    <Footer />
   </div>
 </template>
 

diff --git a/pages/v2/diff.vue b/pages/v2/diff.vue
@@ -1,31 +1,58 @@
 <template>
-  <div class="page-contents">
-    <!-- Following hidden input is hacky way to update monaco editor theme when user changes theme manually -->
-    <input type="hidden" inert :value="onThemeChange" />
-    <Navbar :show-back-button="true" />
-    <main class="outline-none" tabindex="0">
-      <DiffActionBar :diff-navigator="diffNavigator" />
-      <section
-        class="flex flex-wrap items-stretch w-full gap-4 font-mono text-gray-800  dark:text-gray-50"
-      >
-        <div class="flex w-full gap-4 space-around">
-          <p
-            class="flex-grow-0 flex-shrink-0 w-1/2 text-lg font-bold text-center capitalize break-all "
-          >
-            <span class="inline-block w-4/5">{{ lhsLabel }}</span>
-          </p>
-          <p
-            class="flex-grow-0 flex-shrink-0 w-1/2 text-lg font-bold text-center capitalize break-all "
-          >
-            <span class="inline-block w-4/5">{{ rhsLabel }}</span>
-          </p>
-        </div>
-        <div
-          id="monaco-diff-viewer"
-          class="w-full h-screen p-2 border border-gray-600 rounded-md editor"
-        ></div>
-      </section>
-    </main>
+  <div class="contents">
+    <div class="page-contents">
+      <!-- Following hidden input is hacky way to update monaco editor theme when user changes theme manually -->
+      <input type="hidden" inert :value="onThemeChange" />
+      <Navbar :show-back-button="true" />
+      <main class="outline-none" tabindex="0">
+        <DiffActionBar :diff-navigator="diffNavigator" />
+        <section
+          class="
+            flex flex-wrap
+            items-stretch
+            w-full
+            gap-4
+            font-mono
+            text-gray-800
+            dark:text-gray-50
+          "
+        >
+          <div class="flex w-full gap-4 space-around">
+            <p
+              class="
+                flex-grow-0 flex-shrink-0
+                w-1/2
+                text-lg
+                font-bold
+                text-center
+                capitalize
+                break-all
+              "
+            >
+              <span class="inline-block w-4/5">{{ lhsLabel }}</span>
+            </p>
+            <p
+              class="
+                flex-grow-0 flex-shrink-0
+                w-1/2
+                text-lg
+                font-bold
+                text-center
+                capitalize
+                break-all
+              "
+            >
+              <span class="inline-block w-4/5">{{ rhsLabel }}</span>
+            </p>
+          </div>
+          <div
+            id="monaco-diff-viewer"
+            class="w-full h-screen p-2 border border-gray-600 rounded-md editor"
+          ></div>
+        </section>
+      </main>
+    </div>
+    <Footer />
   </div>
 </template>
 
@@ -39,9 +66,10 @@ import {
 } from '../../helpers/utils'
 import DiffActionBar from '~/components/v2/diffActionBar.vue'
 import Navbar from '~/components/v2/navbar.vue'
+import Footer from '~/components/v2/footer.vue'
 import { v2DiffData } from '~/helpers/types'
 export default Vue.extend({
-  components: { DiffActionBar, Navbar },
+  components: { DiffActionBar, Navbar, Footer },
   layout: 'main',
   data(): v2DiffData {
     return {
@@ -122,6 +150,6 @@ export default Vue.extend({
 
 <style>
 .editor {
-  max-height: calc(100vh - 15rem);
+  max-height: calc(100vh - 17rem);
 }
 </style>
diff --git a/pages/v2/index.vue b/pages/v2/index.vue
@@ -347,10 +347,8 @@ main {
     grid-template-rows: 60px 1fr;
   }
 }
+.editor,
 .editor-wrapper {
   max-height: calc(100vh - 18rem);
 }
-.editor {
-  max-height: calc(100vh - 20rem);
-}
 </style>