Skip to content

Commit 5dfecc5

Browse files
michaelmichael
committed
Introduce a "browse" icon
1 parent f923390 commit 5dfecc5

4 files changed

Lines changed: 44 additions & 27 deletions

File tree

‎src/routes/components/CreateLink.svelte‎

Lines changed: 6 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -95,7 +95,12 @@
9595
});
9696
}}
9797
>
98-
↗
98+
<svg class="size-4" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 15 15" fill="none" aria-hidden="true">
99+
<rect x="1.5" y="1.5" width="5" height="5" rx="0.5" stroke="currentColor" />
100+
<rect x="8.5" y="1.5" width="5" height="5" rx="0.5" stroke="currentColor" />
101+
<rect x="1.5" y="8.5" width="5" height="5" rx="0.5" stroke="currentColor" />
102+
<rect x="8.5" y="8.5" width="5" height="5" rx="0.5" stroke="currentColor" />
103+
</svg>
99104
</button>
100105
{/if}
101106
</div>

‎src/routes/components/Drawer.svelte‎

Lines changed: 31 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -74,13 +74,18 @@
7474
<button
7575
class="drawer-handle"
7676
type="button"
77+
aria-label={label}
7778
aria-expanded={open}
7879
aria-controls="drawer-panel"
7980
onclick={toggle}
8081
>
81-
<div class="drawer-pill"></div>
82-
<div class="drawer-title-row">
83-
<span class="drawer-title">{label}</span>
82+
<div class="drawer-title-row" aria-hidden="true">
83+
<svg class="drawer-browse-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 15 15" fill="none">
84+
<rect x="1.5" y="1.5" width="5" height="5" rx="0.5" stroke="currentColor" />
85+
<rect x="8.5" y="1.5" width="5" height="5" rx="0.5" stroke="currentColor" />
86+
<rect x="1.5" y="8.5" width="5" height="5" rx="0.5" stroke="currentColor" />
87+
<rect x="8.5" y="8.5" width="5" height="5" rx="0.5" stroke="currentColor" />
88+
</svg>
8489
</div>
8590
</button>
8691
</div>
@@ -98,13 +103,18 @@
98103
<button
99104
class="drawer-handle"
100105
type="button"
106+
aria-label={label}
101107
aria-expanded={open}
102108
aria-controls="drawer-panel"
103109
onclick={toggle}
104110
>
105-
<div class="drawer-pill"></div>
106-
<div class="drawer-title-row">
107-
<span class="drawer-title">{label}</span>
111+
<div class="drawer-title-row" aria-hidden="true">
112+
<svg class="drawer-browse-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 15 15" fill="none">
113+
<rect x="1.5" y="1.5" width="5" height="5" rx="0.5" stroke="currentColor" />
114+
<rect x="8.5" y="1.5" width="5" height="5" rx="0.5" stroke="currentColor" />
115+
<rect x="1.5" y="8.5" width="5" height="5" rx="0.5" stroke="currentColor" />
116+
<rect x="8.5" y="8.5" width="5" height="5" rx="0.5" stroke="currentColor" />
117+
</svg>
108118
</div>
109119
</button>
110120
@@ -161,7 +171,7 @@
161171
right: 0;
162172
bottom: 0;
163173
pointer-events: none;
164-
transform: translateY(calc(100% - 2rem));
174+
transform: translateY(calc(100% - 1.5rem));
165175
transition: transform 220ms cubic-bezier(0.2, 0.8, 0.2, 1);
166176
will-change: transform;
167177
}
@@ -174,12 +184,12 @@
174184
display: flex;
175185
flex-direction: column;
176186
align-items: center;
177-
gap: 0.2rem;
178-
width: min(18rem, calc(100vw - 1rem));
187+
gap: 0;
188+
width: min(3.5rem, calc(100vw - 1rem));
179189
margin: 0 auto;
180-
padding: 0.35rem 0.85rem 0.45rem;
190+
padding: 0.5rem 0.35rem 0.6rem;
181191
border: 0;
182-
border-radius: 1rem 1rem 0 0;
192+
border-radius: 0.75rem 0.75rem 0 0;
183193
background: white;
184194
box-shadow:
185195
0 -8px 30px oklch(0% 0 0 / 0.12),
@@ -190,22 +200,19 @@
190200
pointer-events: auto;
191201
}
192202
193-
.drawer-pill {
194-
width: 2rem;
195-
height: 0.22rem;
196-
border-radius: 999px;
197-
background: oklch(85% 0 0);
198-
}
199-
200203
.drawer-title-row {
201204
display: flex;
202205
align-items: center;
203206
justify-content: center;
204-
font-size: 0.78rem;
205-
font-weight: 600;
206207
line-height: 1;
207208
}
208209
210+
.drawer-browse-icon {
211+
width: 0.95rem;
212+
height: 0.95rem;
213+
display: block;
214+
}
215+
209216
.drawer-panel {
210217
width: 100%;
211218
max-height: min(70vh, 34rem);
@@ -249,13 +256,13 @@
249256
250257
@media (max-width: 640px) {
251258
.drawer {
252-
transform: translateY(calc(100% - 2.15rem));
259+
transform: translateY(calc(100% - 1.65rem));
253260
}
254261
255262
.drawer-handle {
256-
width: min(18rem, calc(100vw - 0.75rem));
257-
border-radius: 1rem 1rem 0 0;
258-
padding-top: 0.4rem;
263+
width: min(3.5rem, calc(100vw - 0.75rem));
264+
border-radius: 0.75rem 0.75rem 0 0;
265+
padding-top: 0.45rem;
259266
padding-bottom: 0.5rem;
260267
}
261268

‎src/routes/components/EditLink.svelte‎

Lines changed: 6 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -107,7 +107,12 @@
107107
});
108108
}}
109109
>
110-
↗
110+
<svg class="size-4" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 15 15" fill="none" aria-hidden="true">
111+
<rect x="1.5" y="1.5" width="5" height="5" rx="0.5" stroke="currentColor" />
112+
<rect x="8.5" y="1.5" width="5" height="5" rx="0.5" stroke="currentColor" />
113+
<rect x="1.5" y="8.5" width="5" height="5" rx="0.5" stroke="currentColor" />
114+
<rect x="8.5" y="8.5" width="5" height="5" rx="0.5" stroke="currentColor" />
115+
</svg>
111116
</button>
112117
{/if}
113118
</div>

‎src/routes/components/Toolbar.svelte‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -44,7 +44,7 @@
4444
e.target.value = '';
4545
}
4646
47-
const TW_TOOLBAR_POSITION = 'bottom-16 right-5 sm:right-7 md:right-10 lg:right-14';
47+
const TW_TOOLBAR_POSITION = 'bottom-5 right-5 sm:right-7 md:right-10 lg:right-14';
4848
// On mobile also pin to left edge so the toolbar can scroll horizontally
4949
const TW_TOOLBAR_LEFT = 'left-5 sm:left-7 md:left-auto';
5050

0 commit comments

Comments
 (0)