Skip to content

Commit 955c30d

Browse files
technikhil314technikhil314
committed
fix(ui): several minor fixes
1 parent 2ef2ae7 commit 955c30d

File tree

2 files changed

+116
-69
lines changed

2 files changed

+116
-69
lines changed

‎pages/diff.vue‎

Lines changed: 97 additions & 41 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,
@@ -49,38 +63,82 @@
4963
</template>
5064
</Navbar>
5165
<main>
52-
<div
53-
class="flex items-stretch w-full gap-4 font-mono text-gray-800 dark:text-gray-50"
66+
<section
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
>
55-
<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"
57-
>
58-
<RTStickyCopyButton :click-handler="copyTextToClipboard" />
77+
<div class="flex flex-col w-1/2 gap-2">
78+
<p class="flex-grow-0 text-lg">{{ lhsLabel }}</p>
5979
<div
60-
v-for="(lineDiff, index) in lhsDiff"
61-
:key="index"
62-
:class="{
63-
'bg-red-100 dark:bg-yellow-700': lineDiff.includes('isModified'),
64-
}"
80+
class="
81+
relative
82+
flex-1
83+
px-4
84+
py-2
85+
overflow-y-auto
86+
border-2
87+
rounded-md
88+
dark:border-gray-500
89+
max-h-screen--nav
90+
line-number-gutter
91+
min-h-80
92+
"
6593
>
66-
<p class="break-all whitespace-pre-wrap" v-html="lineDiff"></p>
94+
<RTStickyCopyButton :click-handler="copyTextToClipboard" />
95+
<div
96+
v-for="(lineDiff, index) in lhsDiff"
97+
:key="index"
98+
:class="{
99+
'bg-red-200 dark:bg-red-800': lineDiff.includes('isModified'),
100+
}"
101+
>
102+
<p class="break-all whitespace-pre-wrap">
103+
<span v-html="lineDiff"></span>
104+
</p>
105+
</div>
67106
</div>
68107
</div>
69-
<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"
71-
>
72-
<RTStickyCopyButton :click-handler="copyTextToClipboard" />
108+
109+
<div class="flex flex-col w-1/2 gap-2">
110+
<p class="flex-grow-0 text-lg">{{ rhsLabel }}</p>
73111
<div
74-
v-for="(lineDiff, index) in rhsDiff"
75-
:key="index"
76-
:class="{
77-
'bg-green-100 dark:bg-green-700': lineDiff.includes('isModified'),
78-
}"
112+
class="
113+
relative
114+
flex-1
115+
px-4
116+
py-2
117+
overflow-y-auto
118+
border-2
119+
rounded-md
120+
dark:border-gray-500
121+
min-h-80
122+
line-number-gutter
123+
max-h-screen--nav
124+
"
79125
>
80-
<p class="break-all whitespace-pre-wrap" v-html="lineDiff"></p>
126+
<RTStickyCopyButton :click-handler="copyTextToClipboard" />
127+
<div
128+
v-for="(lineDiff, index) in rhsDiff"
129+
:key="index"
130+
:class="{
131+
'bg-green-200 dark:bg-green-700':
132+
lineDiff.includes('isModified'),
133+
}"
134+
>
135+
<p class="break-all whitespace-pre-wrap">
136+
<span v-html="lineDiff"></span>
137+
</p>
138+
</div>
81139
</div>
82140
</div>
83-
</div>
141+
</section>
84142
</main>
85143
<Footer />
86144
</div>
@@ -89,14 +147,16 @@
89147
<script>
90148
import pako from 'pako'
91149
import { undoUrlSafeBase64, escapeHtml } from '../helpers/utils'
92-
import footer from '~/components/footer.vue'
150+
import Footer from '~/components/footer.vue'
93151
export default {
94-
components: { footer },
152+
components: { Footer },
95153
layout: 'main',
96154
data() {
97155
return {
98156
lhsDiff: this.lhsDiff,
99157
rhsDiff: this.rhsDiff,
158+
rhsLabel: this.rhsLabel,
159+
lhsLabel: this.lhsLabel,
100160
copied: false,
101161
}
102162
},
@@ -109,7 +169,7 @@ export default {
109169
const hunkState = item[0]
110170
if (hunkState === -1 || hunkState === 0) {
111171
const className =
112-
hunkState === -1 ? 'isModified bg-red-300 dark:bg-yellow-900' : ''
172+
hunkState === -1 ? 'isModified bg-red-300 dark:bg-red-500' : ''
113173
return `<span class="break-all inline p-0 m-0 ${className}">${escapeHtml(
114174
item[1]
115175
)}</span>`
@@ -124,7 +184,7 @@ export default {
124184
const hunkState = item[0]
125185
if (hunkState === 1 || hunkState === 0) {
126186
const className =
127-
hunkState === 1 ? 'isModified bg-green-300 dark:bg-green-900' : ''
187+
hunkState === 1 ? 'isModified bg-green-400 dark:bg-green-900' : ''
128188
return `<span class="break-all inline p-0 m-0 ${className}">${escapeHtml(
129189
item[1]
130190
)}</span>`
@@ -188,6 +248,9 @@ export default {
188248
</script>
189249

190250
<style lang="scss">
251+
::selection {
252+
@apply bg-gray-800 text-gray-300 dark:bg-gray-200 dark:text-gray-800;
253+
}
191254
.copy-uri-button:hover {
192255
@apply shadow-lg;
193256
svg {
@@ -203,31 +266,24 @@ export default {
203266
&::before {
204267
content: '';
205268
width: var(--line-number-gutter-width);
206-
@apply bg-gray-200 dark:bg-gray-700 inline-block left-0 top-0 bottom-0 absolute text-sm;
269+
@apply bg-gray-300 dark:bg-gray-700 inline-block left-0 top-0 bottom-0 absolute text-sm;
207270
}
208271
@apply relative;
209272
p {
210273
padding-left: calc(var(--line-number-gutter-width) - 10px);
211274
line-height: 1.65;
212275
@apply relative;
213276
&:hover {
214-
@apply bg-gray-200 dark:bg-gray-700;
277+
@apply bg-gray-200 dark:bg-gray-600;
278+
span {
279+
@apply dark:mix-blend-hard-light dark:bg-blend-multiply;
280+
}
215281
}
216282
&::before {
217283
counter-increment: line-numbers;
218284
content: counter(line-numbers);
219285
width: var(--line-number-gutter-width);
220-
@apply absolute left-0 top-[2px] -mx-4 bottom-0 text-center bg-gray-200 dark:bg-gray-700 dark:text-gray-50 text-gray-500 flex justify-center text-sm;
221-
}
222-
&:first-of-type {
223-
&::before {
224-
@apply -mt-2 pt-2;
225-
}
226-
}
227-
&:last-of-type {
228-
&::before {
229-
@apply -mb-2 pb-2;
230-
}
286+
@apply absolute left-0 top-0 -mx-4 bg-gray-200 dark:bg-gray-700 dark:text-gray-50 text-gray-500 inline-flex justify-center items-center text-sm h-full;
231287
}
232288
}
233289
}

‎pages/v1/diff.vue‎

Lines changed: 19 additions & 28 deletions
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@
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="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"
88
:class="{
99
'bg-blue-500 text-white': !copied,
1010
'bg-green-500 text-gray-800': copied,
@@ -50,20 +50,19 @@
5050
</Navbar>
5151
<main>
5252
<section
53-
class="flex items-stretch w-full gap-4 font-mono text-gray-800 dark:text-gray-50"
53+
class="flex items-stretch w-full gap-4 font-mono text-gray-800 dark:text-gray-50"
5454
>
5555
<div class="flex flex-col w-1/2 gap-2">
5656
<p class="flex-grow-0 text-lg">{{ lhsLabel }}</p>
5757
<div
58-
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"
58+
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"
5959
>
6060
<RTStickyCopyButton :click-handler="copyTextToClipboard" />
6161
<div
6262
v-for="(lineDiff, index) in lhsDiff"
6363
:key="index"
6464
:class="{
65-
'bg-red-100 dark:bg-yellow-700':
66-
lineDiff.includes('isModified'),
65+
'bg-red-200 dark:bg-red-800': lineDiff.includes('isModified'),
6766
}"
6867
>
6968
<p class="break-all whitespace-pre-wrap" v-html="lineDiff"></p>
@@ -74,14 +73,14 @@
7473
<div class="flex flex-col w-1/2 gap-2">
7574
<p class="flex-grow-0 text-lg">{{ rhsLabel }}</p>
7675
<div
77-
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"
76+
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"
7877
>
7978
<RTStickyCopyButton :click-handler="copyTextToClipboard" />
8079
<div
8180
v-for="(lineDiff, index) in rhsDiff"
8281
:key="index"
8382
:class="{
84-
'bg-green-100 dark:bg-green-700':
83+
'bg-green-200 dark:bg-green-700':
8584
lineDiff.includes('isModified'),
8685
}"
8786
>
@@ -98,9 +97,9 @@
9897
<script>
9998
import pako from 'pako'
10099
import { undoUrlSafeBase64, escapeHtml } from '../../helpers/utils'
101-
import footer from '~/components/footer.vue'
100+
import Footer from '~/components/footer.vue'
102101
export default {
103-
components: { footer },
102+
components: { Footer },
104103
layout: 'main',
105104
data() {
106105
return {
@@ -123,9 +122,7 @@ export default {
123122
const hunkState = item[0]
124123
if (hunkState === -1 || hunkState === 0) {
125124
const className =
126-
hunkState === -1
127-
? 'isModified bg-red-300 dark:bg-yellow-900 mix-blend-overlay'
128-
: ''
125+
hunkState === -1 ? 'isModified bg-red-300 dark:bg-red-500' : ''
129126
return `<span class="break-all inline p-0 m-0 ${className}">${escapeHtml(
130127
item[1]
131128
)}</span>`
@@ -140,9 +137,7 @@ export default {
140137
const hunkState = item[0]
141138
if (hunkState === 1 || hunkState === 0) {
142139
const className =
143-
hunkState === 1
144-
? 'isModified bg-green-300 dark:bg-green-900 mix-blend-overlay'
145-
: ''
140+
hunkState === 1 ? 'isModified bg-green-400 dark:bg-green-900' : ''
146141
return `<span class="break-all inline p-0 m-0 ${className}">${escapeHtml(
147142
item[1]
148143
)}</span>`
@@ -206,6 +201,9 @@ export default {
206201
</script>
207202

208203
<style lang="scss">
204+
::selection {
205+
@apply bg-gray-800 text-gray-300 dark:bg-gray-200 dark:text-gray-800;
206+
}
209207
.copy-uri-button:hover {
210208
@apply shadow-lg;
211209
svg {
@@ -221,31 +219,24 @@ export default {
221219
&::before {
222220
content: '';
223221
width: var(--line-number-gutter-width);
224-
@apply bg-gray-200 dark:bg-gray-700 inline-block left-0 top-0 bottom-0 absolute text-sm;
222+
@apply bg-gray-300 dark:bg-gray-700 inline-block left-0 top-0 bottom-0 absolute text-sm;
225223
}
226224
@apply relative;
227225
p {
228226
padding-left: calc(var(--line-number-gutter-width) - 10px);
229227
line-height: 1.65;
230228
@apply relative;
231229
&:hover {
232-
@apply bg-gray-200 dark:bg-gray-700;
230+
@apply bg-gray-200 dark:bg-gray-600;
231+
& > span {
232+
@apply dark:mix-blend-hard-light dark:bg-blend-multiply;
233+
}
233234
}
234235
&::before {
235236
counter-increment: line-numbers;
236237
content: counter(line-numbers);
237238
width: var(--line-number-gutter-width);
238-
@apply absolute left-0 top-[2px] -mx-4 bottom-0 text-center bg-gray-200 dark:bg-gray-700 dark:text-gray-50 text-gray-500 flex justify-center text-sm;
239-
}
240-
&:first-of-type {
241-
&::before {
242-
@apply -mt-2 pt-2;
243-
}
244-
}
245-
&:last-of-type {
246-
&::before {
247-
@apply -mb-2 pb-2;
248-
}
239+
@apply absolute left-0 top-0 -mx-4 bg-gray-200 dark:bg-gray-700 dark:text-gray-50 text-gray-500 inline-flex justify-center items-center text-sm h-full;
249240
}
250241
}
251242
}

0 commit comments

Comments
 (0)