futur.blue
forked from
pds.ls/pdsls
this repo has no description
restyle navbar buttons
verified
This commit was signed with the committer's known signature.
SSH Key Fingerprint:
SHA256:mBrT4x0JdzLpbVR95g1hjI1aaErfC02kmLRkPXwsYCk=
src
components
+12
-12
src/components/navbar.tsx
+12
-12
src/components/navbar.tsx
···
15
15
e.stopPropagation();
16
16
addToClipboard(props.content);
17
17
}}
18
18
-
class={`hidden items-center rounded p-0.5 text-base text-neutral-500 transition-all duration-200 group-hover:flex hover:bg-neutral-200/70 hover:text-neutral-600 active:bg-neutral-300/70 sm:p-1 dark:text-neutral-400 dark:hover:bg-neutral-700/70 dark:hover:text-neutral-300 dark:active:bg-neutral-600/70`}
18
18
+
class={`-mr-2 hidden items-center rounded px-2 py-1.5 text-neutral-500 transition-all duration-200 group-hover:flex hover:bg-neutral-200/70 hover:text-neutral-600 active:bg-neutral-300/70 dark:text-neutral-400 dark:hover:bg-neutral-700/70 dark:hover:text-neutral-300 dark:active:bg-neutral-600/70`}
19
19
aria-label="Copy to clipboard"
20
20
>
21
21
<span class="iconify lucide--link"></span>
···
39
39
});
40
40
41
41
return (
42
42
-
<nav class="flex w-full flex-col text-sm wrap-anywhere sm:text-base">
42
42
+
<nav class="flex w-full flex-col wrap-anywhere">
43
43
{/* PDS Level */}
44
44
<div class="group relative flex items-center justify-between gap-1 rounded-md border-[0.5px] border-transparent bg-transparent px-2 transition-all duration-200 hover:border-neutral-300 hover:bg-neutral-50/40 dark:hover:border-neutral-600 dark:hover:bg-neutral-800/40">
45
45
-
<div class="flex min-h-6 basis-full items-center gap-1.5 sm:min-h-7">
45
45
+
<div class="flex min-h-7 basis-full items-center gap-2">
46
46
<Tooltip text="PDS">
47
47
<span class="iconify lucide--hard-drive shrink-0 text-neutral-500 transition-colors duration-200 group-hover:text-neutral-700 dark:text-neutral-400 dark:group-hover:text-neutral-200"></span>
48
48
</Tooltip>
···
70
70
<Show when={props.params.repo}>
71
71
{/* Repository Level */}
72
72
<div class="group relative flex items-center justify-between gap-1 rounded-md border-[0.5px] border-transparent bg-transparent px-2 transition-all duration-200 hover:border-neutral-300 hover:bg-neutral-50/40 dark:hover:border-neutral-600 dark:hover:bg-neutral-800/40">
73
73
-
<div class="-ml-1 flex basis-full items-center gap-0.5">
73
73
+
<div class="-ml-2 flex basis-full items-center">
74
74
<Tooltip text={showHandle() ? "Show DID" : "Show handle"}>
75
75
<button
76
76
type="button"
77
77
-
class="relative flex items-center rounded p-1 text-neutral-500 transition-all duration-200 hover:bg-neutral-200/70 hover:text-neutral-700 active:bg-neutral-300/70 dark:text-neutral-400 dark:hover:bg-neutral-700/70 dark:hover:text-neutral-200 dark:active:bg-neutral-600/70"
77
77
+
class="relative flex items-center rounded px-2 py-1.5 text-neutral-500 transition-all duration-200 hover:bg-neutral-200/70 hover:text-neutral-700 active:bg-neutral-300/70 dark:text-neutral-400 dark:hover:bg-neutral-700/70 dark:hover:text-neutral-200 dark:active:bg-neutral-600/70"
78
78
onclick={() => {
79
79
localStorage.showHandle = !showHandle();
80
80
setShowHandle(!showHandle());
···
111
111
(props.params.repo in labelerCache || location.pathname.endsWith("/labels"))
112
112
}
113
113
>
114
114
-
<div class="group flex items-center justify-between gap-1.5 rounded-md border-[0.5px] border-transparent bg-transparent px-2 transition-all duration-200 hover:border-neutral-300 hover:bg-neutral-50/40 dark:hover:border-neutral-600 dark:hover:bg-neutral-800/40">
115
115
-
<div class="flex basis-full items-center gap-1.5">
114
114
+
<div class="group flex items-center justify-between gap-2 rounded-md border-[0.5px] border-transparent bg-transparent px-2 transition-all duration-200 hover:border-neutral-300 hover:bg-neutral-50/40 dark:hover:border-neutral-600 dark:hover:bg-neutral-800/40">
115
115
+
<div class="flex basis-full items-center gap-2">
116
116
<span class="iconify lucide--tag text-neutral-500 transition-colors duration-200 group-hover:text-neutral-700 dark:text-neutral-400 dark:group-hover:text-neutral-200"></span>
117
117
<A
118
118
end
···
129
129
130
130
{/* Collection Level */}
131
131
<Show when={props.params.collection}>
132
132
-
<div class="group flex items-center justify-between gap-1.5 rounded-md border-[0.5px] border-transparent bg-transparent px-2 transition-all duration-200 hover:border-neutral-300 hover:bg-neutral-50/40 dark:hover:border-neutral-600 dark:hover:bg-neutral-800/40">
133
133
-
<div class="flex basis-full items-center gap-1.5">
132
132
+
<div class="group flex items-center justify-between gap-2 rounded-md border-[0.5px] border-transparent bg-transparent px-2 transition-all duration-200 hover:border-neutral-300 hover:bg-neutral-50/40 dark:hover:border-neutral-600 dark:hover:bg-neutral-800/40">
133
133
+
<div class="flex basis-full items-center gap-2">
134
134
<Tooltip text="Collection">
135
135
<span class="iconify lucide--folder-open text-neutral-500 transition-colors duration-200 group-hover:text-neutral-700 dark:text-neutral-400 dark:group-hover:text-neutral-200"></span>
136
136
</Tooltip>
···
153
153
154
154
{/* Record Level */}
155
155
<Show when={props.params.rkey}>
156
156
-
<div class="group flex items-center justify-between gap-1.5 rounded-md border-[0.5px] border-transparent bg-transparent px-2 py-0.5 transition-all duration-200 hover:border-neutral-300 hover:bg-neutral-50/40 dark:hover:border-neutral-600 dark:hover:bg-neutral-800/40">
157
157
-
<div class="flex basis-full items-center gap-1.5">
156
156
+
<div class="group flex items-center justify-between gap-2 rounded-md border-[0.5px] border-transparent bg-transparent px-2 transition-all duration-200 hover:border-neutral-300 hover:bg-neutral-50/40 dark:hover:border-neutral-600 dark:hover:bg-neutral-800/40">
157
157
+
<div class="flex basis-full items-center gap-2">
158
158
<Tooltip text="Record">
159
159
<span class="iconify lucide--file-json text-neutral-500 transition-colors duration-200 group-hover:text-neutral-700 dark:text-neutral-400 dark:group-hover:text-neutral-200"></span>
160
160
</Tooltip>
161
161
-
<span class="font-medium">{props.params.rkey}</span>
161
161
+
<span class="py-0.5 font-medium">{props.params.rkey}</span>
162
162
</div>
163
163
<CopyButton
164
164
content={`at://${props.params.repo}/${props.params.collection}/${props.params.rkey}`}