Skip to content

Commit d96b5de

Browse files
technikhil314technikhil314
committed
fix(footer): added footer to diff pages too
1 parent 04be2bb commit d96b5de

File tree

4 files changed

+141
-57
lines changed

4 files changed

+141
-57
lines changed

‎pages/diff.vue

Lines changed: 51 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,21 @@
44
<template #right>
55
<button
66
type="button"
7-
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"
7+
class="
8+
inline-flex
9+
justify-center
10+
px-4
11+
py-2
12+
transition-transform
13+
transform
14+
rounded-md
15+
shadow
16+
outline-none
17+
copy-uri-button
18+
align-center
19+
focus:ring-4
20+
active:scale-y-75
21+
"
822
:class="{
923
'bg-blue-500 text-white': !copied,
1024
'bg-green-500 text-gray-800': copied,
@@ -50,10 +64,30 @@
5064
</Navbar>
5165
<main class="outline-none" tabindex="0">
5266
<div
53-
class="flex items-stretch w-full gap-4 font-mono text-gray-800 dark:text-gray-50"
67+
class="
68+
flex
69+
items-stretch
70+
w-full
71+
gap-4
72+
font-mono
73+
text-gray-800
74+
dark:text-gray-50
75+
"
5476
>
5577
<div
56-
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"
78+
class="
79+
relative
80+
flex-1
81+
px-4
82+
py-2
83+
overflow-y-auto
84+
border-2
85+
rounded-md
86+
dark:border-gray-500
87+
max-h-screen--nav
88+
line-number-gutter
89+
min-h-80
90+
"
5791
>
5892
<RTStickyCopyButton :click-handler="copyTextToClipboard" />
5993
<div
@@ -67,7 +101,19 @@
67101
</div>
68102
</div>
69103
<div
70-
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"
104+
class="
105+
relative
106+
flex-1
107+
px-4
108+
py-2
109+
overflow-y-auto
110+
border-2
111+
rounded-md
112+
dark:border-gray-500
113+
min-h-80
114+
line-number-gutter
115+
max-h-screen--nav
116+
"
71117
>
72118
<RTStickyCopyButton :click-handler="copyTextToClipboard" />
73119
<div
@@ -82,6 +128,7 @@
82128
</div>
83129
</div>
84130
</main>
131+
<Footer />
85132
</div>
86133
</template>
87134

‎pages/v1/diff.vue

Lines changed: 32 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -1,25 +1,36 @@
11
<template>
2-
<div class="page-contents">
3-
<Navbar :show-back-button="true" />
4-
<main class="outline-none" tabindex="0">
5-
<DiffActionBar />
6-
<section
7-
class="flex items-stretch w-full gap-4 font-mono text-gray-800 dark:text-gray-50"
8-
>
9-
<SingleDiff
10-
:id="'lhsDiff'"
11-
:modified-class-string="'bg-red-200 dark:bg-red-800'"
12-
:label="lhsLabel"
13-
:diff="lhsDiff"
14-
/>
15-
<SingleDiff
16-
:id="'rhsDiff'"
17-
:modified-class-string="'bg-green-200 dark:bg-green-700'"
18-
:label="rhsLabel"
19-
:diff="rhsDiff"
20-
/>
21-
</section>
22-
</main>
2+
<div class="contents">
3+
<div class="page-contents">
4+
<Navbar :show-back-button="true" />
5+
<main class="outline-none" tabindex="0">
6+
<DiffActionBar />
7+
<section
8+
class="
9+
flex
10+
items-stretch
11+
w-full
12+
gap-4
13+
font-mono
14+
text-gray-800
15+
dark:text-gray-50
16+
"
17+
>
18+
<SingleDiff
19+
:id="'lhsDiff'"
20+
:modified-class-string="'bg-red-200 dark:bg-red-800'"
21+
:label="lhsLabel"
22+
:diff="lhsDiff"
23+
/>
24+
<SingleDiff
25+
:id="'rhsDiff'"
26+
:modified-class-string="'bg-green-200 dark:bg-green-700'"
27+
:label="rhsLabel"
28+
:diff="rhsDiff"
29+
/>
30+
</section>
31+
</main>
32+
</div>
33+
<Footer />
2334
</div>
2435
</template>
2536

‎pages/v2/diff.vue

Lines changed: 57 additions & 29 deletions
Original file line numberDiff line numberDiff line change
@@ -1,31 +1,58 @@
11
<template>
2-
<div class="page-contents">
3-
<!-- Following hidden input is hacky way to update monaco editor theme when user changes theme manually -->
4-
<input type="hidden" inert :value="onThemeChange" />
5-
<Navbar :show-back-button="true" />
6-
<main class="outline-none" tabindex="0">
7-
<DiffActionBar :diff-navigator="diffNavigator" />
8-
<section
9-
class="flex flex-wrap items-stretch w-full gap-4 font-mono text-gray-800 dark:text-gray-50"
10-
>
11-
<div class="flex w-full gap-4 space-around">
12-
<p
13-
class="flex-grow-0 flex-shrink-0 w-1/2 text-lg font-bold text-center capitalize break-all "
14-
>
15-
<span class="inline-block w-4/5">{{ lhsLabel }}</span>
16-
</p>
17-
<p
18-
class="flex-grow-0 flex-shrink-0 w-1/2 text-lg font-bold text-center capitalize break-all "
19-
>
20-
<span class="inline-block w-4/5">{{ rhsLabel }}</span>
21-
</p>
22-
</div>
23-
<div
24-
id="monaco-diff-viewer"
25-
class="w-full h-screen p-2 border border-gray-600 rounded-md editor"
26-
></div>
27-
</section>
28-
</main>
2+
<div class="contents">
3+
<div class="page-contents">
4+
<!-- Following hidden input is hacky way to update monaco editor theme when user changes theme manually -->
5+
<input type="hidden" inert :value="onThemeChange" />
6+
<Navbar :show-back-button="true" />
7+
<main class="outline-none" tabindex="0">
8+
<DiffActionBar :diff-navigator="diffNavigator" />
9+
<section
10+
class="
11+
flex flex-wrap
12+
items-stretch
13+
w-full
14+
gap-4
15+
font-mono
16+
text-gray-800
17+
dark:text-gray-50
18+
"
19+
>
20+
<div class="flex w-full gap-4 space-around">
21+
<p
22+
class="
23+
flex-grow-0 flex-shrink-0
24+
w-1/2
25+
text-lg
26+
font-bold
27+
text-center
28+
capitalize
29+
break-all
30+
"
31+
>
32+
<span class="inline-block w-4/5">{{ lhsLabel }}</span>
33+
</p>
34+
<p
35+
class="
36+
flex-grow-0 flex-shrink-0
37+
w-1/2
38+
text-lg
39+
font-bold
40+
text-center
41+
capitalize
42+
break-all
43+
"
44+
>
45+
<span class="inline-block w-4/5">{{ rhsLabel }}</span>
46+
</p>
47+
</div>
48+
<div
49+
id="monaco-diff-viewer"
50+
class="w-full h-screen p-2 border border-gray-600 rounded-md editor"
51+
></div>
52+
</section>
53+
</main>
54+
</div>
55+
<Footer />
2956
</div>
3057
</template>
3158

@@ -39,9 +66,10 @@ import {
3966
} from '../../helpers/utils'
4067
import DiffActionBar from '~/components/v2/diffActionBar.vue'
4168
import Navbar from '~/components/v2/navbar.vue'
69+
import Footer from '~/components/v2/footer.vue'
4270
import { v2DiffData } from '~/helpers/types'
4371
export default Vue.extend({
44-
components: { DiffActionBar, Navbar },
72+
components: { DiffActionBar, Navbar, Footer },
4573
layout: 'main',
4674
data(): v2DiffData {
4775
return {
@@ -122,6 +150,6 @@ export default Vue.extend({
122150

123151
<style>
124152
.editor {
125-
max-height: calc(100vh - 15rem);
153+
max-height: calc(100vh - 17rem);
126154
}
127155
</style>

‎pages/v2/index.vue

Lines changed: 1 addition & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -347,10 +347,8 @@ main {
347347
grid-template-rows: 60px 1fr;
348348
}
349349
}
350+
.editor,
350351
.editor-wrapper {
351352
max-height: calc(100vh - 18rem);
352353
}
353-
.editor {
354-
max-height: calc(100vh - 20rem);
355-
}
356354
</style>

0 commit comments

Comments
 (0)