Skip to content

Commit eea81d1

Browse files
technikhil314technikhil314
committed
refactor: moved copy link button to subnav
1 parent 8ae227c commit eea81d1

File tree

2 files changed

+117
-110
lines changed

2 files changed

+117
-110
lines changed

‎pages/v1/diff.vue

Lines changed: 116 additions & 110 deletions
Original file line numberDiff line numberDiff line change
@@ -1,139 +1,145 @@
11
<template>
22
<div class="page-contents">
3-
<Navbar :show-back-button="true">
4-
<template #right>
5-
<button
6-
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"
8-
aria-label="Copy url to clipboard"
9-
:class="{
10-
'bg-blue-500 text-white': !copied,
11-
'bg-green-500 text-gray-800': copied,
12-
}"
13-
@click="copyUrlToClipboard"
14-
>
15-
<span v-show="copied" class="inline-flex justify-center">
16-
<svg
17-
class="inline-block w-6 h-6 ml-[-4px]"
18-
fill="none"
19-
stroke="currentColor"
20-
viewBox="0 0 24 24"
21-
xmlns="http://www.w3.org/2000/svg"
22-
>
23-
<path
24-
stroke-linecap="round"
25-
stroke-linejoin="round"
26-
stroke-width="2"
27-
d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-6 9l2 2 4-4"
28-
></path>
29-
</svg>
30-
<span class="hidden ml-2 md:inline-block">Copied</span>
31-
</span>
32-
<span v-show="!copied" class="inline-flex justify-center">
33-
<svg
34-
class="w-6 h-6"
35-
fill="none"
36-
stroke="currentColor"
37-
viewBox="0 0 24 24"
38-
xmlns="http://www.w3.org/2000/svg"
39-
>
40-
<path
41-
stroke-linecap="round"
42-
stroke-linejoin="round"
43-
stroke-width="2"
44-
d="M13.828 10.172a4 4 0 00-5.656 0l-4 4a4 4 0 105.656 5.656l1.102-1.101m-.758-4.899a4 4 0 005.656 0l4-4a4 4 0 00-5.656-5.656l-1.1 1.1"
45-
></path>
46-
</svg>
47-
<span class="hidden ml-2 md:inline-block">Copy link</span>
48-
</span>
49-
</button>
50-
</template>
51-
</Navbar>
3+
<Navbar :show-back-button="true" />
524
<main>
535
<section
546
class="
557
flex
568
items-center
57-
gap-4
9+
justify-between
5810
px-4
5911
py-2
6012
mb-4
6113
sticky
6214
top-[80px]
6315
dark:bg-gray-700
6416
bg-gray-300
17+
dark:bg-opacity-50
18+
bg-opacity-50
19+
backdrop-blur-sm
6520
rounded-md
6621
shadow-sm
6722
w-full
68-
z-1
23+
z-10
6924
"
7025
>
71-
<div
72-
id="toggleScrollInSyncSection"
73-
class="inline-flex items-center gap-1"
74-
>
75-
<label
76-
for="toggleScrollInSync"
77-
class="text-gray-800 select-none dark:text-gray-50"
78-
>
79-
Scroll in sync
80-
</label>
81-
<input
82-
id="toggleScrollInSync"
83-
type="checkbox"
84-
:checked="isSrollInSyncEnabled"
85-
class="form-checkbox"
86-
@click="toggleInSyncScroll"
87-
/>
88-
</div>
89-
<div id="nextDiffSection" class="inline-flex items-center gap-1">
90-
<button
91-
id="nextDiff"
92-
class="inline-flex items-center justify-center px-1 py-1 text-sm text-gray-600 transition-transform transform bg-gray-300 border border-gray-800 rounded-sm outline-none dark:border-gray-400 dark:text-white dark:bg-gray-800 align-center focus:ring-4 active:scale-y-75"
93-
aria-label="Go to next diff"
94-
type="button"
95-
@click="goToNextDiff"
26+
<div class="flex gap-4">
27+
<div
28+
id="toggleScrollInSyncSection"
29+
class="inline-flex items-center gap-1"
9630
>
97-
Next diff
98-
<svg
99-
class="w-4 h-4"
100-
fill="none"
101-
stroke="currentColor"
102-
viewBox="0 0 24 24"
103-
xmlns="http://www.w3.org/2000/svg"
31+
<label
32+
for="toggleScrollInSync"
33+
class="text-gray-800 select-none dark:text-gray-50"
10434
>
105-
<path
106-
stroke-linecap="round"
107-
stroke-linejoin="round"
108-
stroke-width="2"
109-
d="M16 17l-4 4m0 0l-4-4m4 4V3"
110-
></path>
111-
</svg>
112-
</button>
35+
Scroll in sync
36+
</label>
37+
<input
38+
id="toggleScrollInSync"
39+
type="checkbox"
40+
:checked="isSrollInSyncEnabled"
41+
class="form-checkbox"
42+
@click="toggleInSyncScroll"
43+
/>
44+
</div>
45+
<div id="nextDiffSection" class="inline-flex items-center gap-1">
46+
<button
47+
id="nextDiff"
48+
class="inline-flex items-center justify-center px-1 py-1 text-sm text-gray-600 transition-transform transform bg-gray-300 border border-gray-800 rounded-sm outline-none dark:border-gray-400 dark:text-white dark:bg-gray-800 align-center focus:ring-4 active:scale-y-75"
49+
aria-label="Go to next diff"
50+
type="button"
51+
@click="goToNextDiff"
52+
>
53+
Next diff
54+
<svg
55+
class="w-4 h-4"
56+
fill="none"
57+
stroke="currentColor"
58+
viewBox="0 0 24 24"
59+
xmlns="http://www.w3.org/2000/svg"
60+
>
61+
<path
62+
stroke-linecap="round"
63+
stroke-linejoin="round"
64+
stroke-width="2"
65+
d="M16 17l-4 4m0 0l-4-4m4 4V3"
66+
></path>
67+
</svg>
68+
</button>
69+
</div>
70+
<div id="prevDiffSection" class="inline-flex items-center gap-1">
71+
<button
72+
id="prevDiff"
73+
class="inline-flex items-center justify-center px-1 py-1 text-sm text-gray-600 transition-transform transform bg-gray-300 border border-gray-800 rounded-sm outline-none dark:border-gray-400 dark:text-white dark:bg-gray-800 align-center focus:ring-4 active:scale-y-75"
74+
aria-label="Go to previous diff"
75+
type="button"
76+
@click="goToPreviousDiff"
77+
>
78+
Previous diff
79+
<svg
80+
class="w-4 h-4"
81+
fill="none"
82+
stroke="currentColor"
83+
viewBox="0 0 24 24"
84+
xmlns="http://www.w3.org/2000/svg"
85+
>
86+
<path
87+
stroke-linecap="round"
88+
stroke-linejoin="round"
89+
stroke-width="2"
90+
d="M8 7l4-4m0 0l4 4m-4-4v18"
91+
></path>
92+
</svg>
93+
</button>
94+
</div>
11395
</div>
114-
<div id="prevDiffSection" class="inline-flex items-center gap-1">
96+
<div>
11597
<button
116-
id="prevDiff"
117-
class="inline-flex items-center justify-center px-1 py-1 text-sm text-gray-600 transition-transform transform bg-gray-300 border border-gray-800 rounded-sm outline-none dark:border-gray-400 dark:text-white dark:bg-gray-800 align-center focus:ring-4 active:scale-y-75"
118-
aria-label="Go to previous diff"
11998
type="button"
120-
@click="goToPreviousDiff"
99+
class="inline-flex items-center justify-center gap-1 p-2 text-sm transition-transform transform rounded-md shadow outline-none justify-self-end focus:ring-4 active:scale-y-75"
100+
aria-label="Copy url to clipboard"
101+
:class="{
102+
'bg-blue-500 text-white': !copied,
103+
'bg-green-500 text-gray-800': copied,
104+
}"
105+
@click="copyUrlToClipboard"
121106
>
122-
Previous diff
123-
<svg
124-
class="w-4 h-4"
125-
fill="none"
126-
stroke="currentColor"
127-
viewBox="0 0 24 24"
128-
xmlns="http://www.w3.org/2000/svg"
107+
<span v-show="copied" class="inline">
108+
<svg
109+
class="w-4 h-4"
110+
fill="none"
111+
stroke="currentColor"
112+
viewBox="0 0 24 24"
113+
xmlns="http://www.w3.org/2000/svg"
114+
>
115+
<path
116+
stroke-linecap="round"
117+
stroke-linejoin="round"
118+
stroke-width="2"
119+
d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-6 9l2 2 4-4"
120+
></path>
121+
</svg>
122+
</span>
123+
<span v-show="copied" class="hidden md:inline-block">Copied</span>
124+
<span v-show="!copied" class="inline">
125+
<svg
126+
class="w-4 h-4"
127+
fill="none"
128+
stroke="currentColor"
129+
viewBox="0 0 24 24"
130+
xmlns="http://www.w3.org/2000/svg"
131+
>
132+
<path
133+
stroke-linecap="round"
134+
stroke-linejoin="round"
135+
stroke-width="2"
136+
d="M13.828 10.172a4 4 0 00-5.656 0l-4 4a4 4 0 105.656 5.656l1.102-1.101m-.758-4.899a4 4 0 005.656 0l4-4a4 4 0 00-5.656-5.656l-1.1 1.1"
137+
></path>
138+
</svg>
139+
</span>
140+
<span v-show="!copied" class="hidden md:inline-block"
141+
>Copy link</span
129142
>
130-
<path
131-
stroke-linecap="round"
132-
stroke-linejoin="round"
133-
stroke-width="2"
134-
d="M8 7l4-4m0 0l4 4m-4-4v18"
135-
></path>
136-
</svg>
137143
</button>
138144
</div>
139145
</section>

‎styles/global.scss

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -21,6 +21,7 @@ body,
2121
main {
2222
@apply bg-gray-50 dark:bg-gray-900;
2323
scroll-padding-block: 140px;
24+
scroll-behavior: smooth;
2425
}
2526

2627
body {

0 commit comments

Comments
 (0)