Skip to content

Commit 8e6fcfb

Browse files
milanofthemilanofthe
committed
Make version selector subtle text in top-right corner
1 parent 76a6eb5 commit 8e6fcfb

2 files changed

Lines changed: 50 additions & 65 deletions

File tree

‎src/lib/components/api/VersionSelector.svelte‎

Lines changed: 27 additions & 39 deletions
Original file line numberDiff line numberDiff line change
@@ -56,11 +56,9 @@
5656
</script>
5757

5858
<div class="version-selector" bind:this={dropdownRef}>
59-
<button class="version-button" onclick={toggleDropdown} aria-expanded={isOpen}>
60-
<span class="version-label">v{currentVersion}</span>
61-
<span class="chevron" class:open={isOpen}>
62-
<Icon name="chevron-down" size={12} />
63-
</span>
59+
<button class="version-trigger" onclick={toggleDropdown} aria-expanded={isOpen}>
60+
<span class="version-text">v{currentVersion}</span>
61+
<Icon name="chevron-down" size={10} />
6462
</button>
6563

6664
{#if isOpen}
@@ -75,7 +73,7 @@
7573
>
7674
<span class="dropdown-version">v{v.version}</span>
7775
{#if isLatest}
78-
<span class="badge accent">latest</span>
76+
<span class="latest-badge">latest</span>
7977
{/if}
8078
</button>
8179
{/each}
@@ -85,52 +83,39 @@
8583

8684
<style>
8785
.version-selector {
88-
position: relative;
89-
display: inline-block;
86+
position: absolute;
87+
top: var(--space-lg);
88+
right: 0;
89+
z-index: var(--z-dropdown);
9090
}
9191
92-
.version-button {
92+
.version-trigger {
9393
display: inline-flex;
9494
align-items: center;
95-
gap: var(--space-xs);
96-
padding: var(--space-xs) var(--space-md);
97-
background: var(--surface-raised);
98-
border: 1px solid var(--border);
99-
border-radius: var(--radius-md);
100-
color: var(--text);
95+
gap: 2px;
96+
padding: 0;
97+
background: transparent;
98+
border: none;
99+
color: var(--text-muted);
101100
font-family: var(--font-mono);
102101
font-size: var(--font-base);
103-
font-weight: 500;
104102
cursor: pointer;
105-
transition: all var(--transition-fast);
103+
transition: color var(--transition-fast);
106104
}
107105
108-
.version-button:hover {
109-
border-color: var(--accent);
110-
background: var(--surface-hover);
111-
}
112-
113-
.chevron {
114-
display: flex;
115-
align-items: center;
116-
color: var(--text-muted);
117-
transition: transform var(--transition-fast);
118-
}
119-
120-
.chevron.open {
121-
transform: rotate(180deg);
106+
.version-trigger:hover {
107+
color: var(--text);
122108
}
123109
124110
.dropdown {
125111
position: absolute;
126112
top: calc(100% + var(--space-xs));
127113
right: 0;
128-
min-width: 140px;
114+
min-width: 100px;
129115
background: var(--surface-raised);
130116
border: 1px solid var(--border);
131117
border-radius: var(--radius-md);
132118
box-shadow: var(--shadow-md);
133-
z-index: var(--z-dropdown);
134119
overflow: hidden;
135120
}
136121
@@ -140,28 +125,31 @@
140125
justify-content: space-between;
141126
gap: var(--space-sm);
142127
width: 100%;
143-
padding: var(--space-sm) var(--space-md);
128+
padding: var(--space-xs) var(--space-md);
144129
background: transparent;
145130
border: none;
146131
border-radius: 0;
147-
color: var(--text);
132+
color: var(--text-muted);
148133
font-family: var(--font-mono);
149134
font-size: var(--font-base);
150135
text-align: left;
151136
cursor: pointer;
152-
transition: background var(--transition-fast);
137+
transition: all var(--transition-fast);
153138
}
154139
155140
.dropdown-item:hover {
156141
background: var(--surface-hover);
142+
color: var(--text);
157143
}
158144
159145
.dropdown-item.selected {
160-
background: var(--accent-bg);
161146
color: var(--accent);
162147
}
163148
164-
.dropdown-version {
165-
flex: 1;
149+
.latest-badge {
150+
font-size: 10px;
151+
color: var(--text-disabled);
152+
text-transform: uppercase;
153+
letter-spacing: 0.5px;
166154
}
167155
</style>

‎src/lib/components/pages/PackageApi.svelte‎

Lines changed: 23 additions & 26 deletions
Original file line numberDiff line numberDiff line change
@@ -53,39 +53,36 @@
5353

5454
<Tooltip />
5555

56-
<div class="hero">
57-
<div class="hero-header">
56+
<div class="api-page">
57+
{#if hasVersioning && manifest}
58+
<VersionSelector {packageId} currentVersion={version!} {manifest} />
59+
{/if}
60+
61+
<div class="hero">
5862
<img src="{base}/{pkg.logo}" alt={pkg.name} class="hero-logo" />
59-
{#if hasVersioning && manifest}
60-
<VersionSelector {packageId} currentVersion={version!} {manifest} />
61-
{/if}
63+
<p class="description">Complete API documentation for {pkg.name}.</p>
6264
</div>
63-
<p class="description">Complete API documentation for {pkg.name}.</p>
64-
</div>
6565

66-
<h2 id="modules">Modules</h2>
66+
<h2 id="modules">Modules</h2>
6767

68-
{#if modules.length === 0}
69-
<div class="tile placeholder-tile">
70-
<div class="panel-body tile-body">
71-
No API documentation available yet. Run <code>npm run extract</code> to generate.
68+
{#if modules.length === 0}
69+
<div class="tile placeholder-tile">
70+
<div class="panel-body tile-body">
71+
No API documentation available yet. Run <code>npm run extract</code> to generate.
72+
</div>
7273
</div>
73-
</div>
74-
{:else}
75-
<!-- Module documentation -->
76-
<div class="api-content">
77-
{#each modules as module}
78-
<ModuleDoc {module} />
79-
{/each}
80-
</div>
81-
{/if}
74+
{:else}
75+
<div class="api-content">
76+
{#each modules as module}
77+
<ModuleDoc {module} />
78+
{/each}
79+
</div>
80+
{/if}
81+
</div>
8282

8383
<style>
84-
.hero-header {
85-
display: flex;
86-
flex-direction: column;
87-
align-items: center;
88-
gap: var(--space-lg);
84+
.api-page {
85+
position: relative;
8986
}
9087
9188
.api-content {

0 commit comments

Comments
 (0)