Skip to content

Commit f2c7d50

Browse files
caeziumcaezium
committed
ui change
1 parent 95335e6 commit f2c7d50

13 files changed

Lines changed: 735 additions & 436 deletions

File tree

‎packages/web/src/lib/components/layout/PageShell.svelte‎

Lines changed: 41 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,41 @@
1+
<script lang="ts">
2+
export let railWidth = "320px";
3+
export let stickyRail = true;
4+
</script>
5+
6+
<div class="shell" style={`--rail-width: ${railWidth}`}>
7+
<aside class:sticky={stickyRail}>
8+
<slot name="rail" />
9+
</aside>
10+
<section class="main">
11+
<slot />
12+
</section>
13+
</div>
14+
15+
<style>
16+
.shell {
17+
display: grid;
18+
grid-template-columns: minmax(240px, var(--rail-width)) minmax(0, 1fr);
19+
gap: var(--xl-gap);
20+
align-items: start;
21+
}
22+
23+
aside.sticky {
24+
position: sticky;
25+
top: calc(var(--navbar-size) + var(--lg-gap));
26+
}
27+
28+
.main {
29+
min-width: 0;
30+
}
31+
32+
@media (max-width: 1100px) {
33+
.shell {
34+
grid-template-columns: 1fr;
35+
}
36+
37+
aside.sticky {
38+
position: static;
39+
}
40+
}
41+
</style>

‎packages/web/src/lib/components/nav/Hamburger.svelte‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -40,7 +40,7 @@
4040
background: var(--theme-soft-color);
4141
}
4242
43-
@media (min-width: 1500px) {
43+
@media (min-width: 1200px) {
4444
.wrapper {
4545
display: none;
4646
}

‎packages/web/src/lib/components/nav/Logo.svelte‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@
55

66
<a href="/">
77
<Fa icon={faBinoculars} fw size="1.2x" translateX="-0.15" style="font-size: 24px" />
8-
<span> FTC<em>Scout</em> </span>
8+
<span> FTC<em>Stats</em> </span>
99
</a>
1010

1111
<style>

‎packages/web/src/lib/components/nav/Navbar.svelte‎

Lines changed: 147 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,19 +1,72 @@
11
<script>
2+
import { CURRENT_SEASON } from "@ftc-stats/common";
3+
import { DONATIONS, GITHUB, DISCORD, STATUS } from "$lib/constants";
4+
import Translate from "$lib/components/i18n/Translate.svelte";
25
import DarkModeToggle from "./DarkModeToggle.svelte";
36
import Hamburger from "./Hamburger.svelte";
47
import LocaleSelect from "./LocaleSelect.svelte";
58
import Logo from "./Logo.svelte";
69
import Searchbar from "./search/Searchbar.svelte";
10+
11+
const primaryLinks = [
12+
{ href: "/", label: "Home", key: "nav.home" },
13+
{ href: "/teams", label: "Teams", key: "nav.teams" },
14+
{ href: `/events/${CURRENT_SEASON}`, label: "Events", key: "nav.events" },
15+
{ href: "/compare", label: "Compare Teams", key: "nav.compare-teams" },
16+
{ href: `/records/${CURRENT_SEASON}/teams`, label: "Season Records", key: "nav.records" },
17+
];
18+
19+
const secondaryLinks = [
20+
{ href: "/blog", label: "The Scouting Report", key: "nav.scouting-report" },
21+
{ href: "/about", label: "About", key: "nav.about" },
22+
{ href: "/api", label: "API", key: "nav.api" },
23+
{ href: "/privacy", label: "Privacy Policy", key: "nav.privacy" },
24+
{ href: DONATIONS, label: "Donate", key: "nav.donate", newTab: true },
25+
];
26+
27+
const networkLinks = [
28+
{ href: GITHUB, label: "Github", key: "nav.github" },
29+
{ href: DISCORD, label: "Discord", key: "nav.discord" },
30+
{ href: STATUS, label: "Status", key: "nav.status" },
31+
];
732
</script>
833

934
<nav>
1035
<div class="left">
1136
<Hamburger />
1237
<Logo />
38+
<div class="links">
39+
{#each primaryLinks as link}
40+
<a href={link.href}>
41+
<Translate text={link.label} msgKey={link.key} />
42+
</a>
43+
{/each}
44+
<details class="menu">
45+
<summary>
46+
<Translate text="More" msgKey="nav.more" />
47+
</summary>
48+
<div class="menu-panel">
49+
{#each secondaryLinks as link}
50+
<a href={link.href} rel={link.newTab ? "noreferrer" : undefined} target={link.newTab ? "_blank" : undefined}>
51+
<Translate text={link.label} msgKey={link.key} />
52+
</a>
53+
{/each}
54+
<hr />
55+
{#each networkLinks as link}
56+
<a href={link.href} rel="noreferrer" target="_blank">
57+
<Translate text={link.label} msgKey={link.key} />
58+
</a>
59+
{/each}
60+
</div>
61+
</details>
62+
</div>
1363
</div>
1464

15-
<div class="right">
65+
<div class="center">
1666
<Searchbar />
67+
</div>
68+
69+
<div class="right">
1770
<LocaleSelect />
1871
<DarkModeToggle />
1972
</div>
@@ -35,7 +88,7 @@
3588
3689
display: flex;
3790
align-items: center;
38-
justify-content: space-between;
91+
gap: var(--lg-gap);
3992
}
4093
4194
nav::before {
@@ -51,11 +104,102 @@
51104
.left {
52105
display: flex;
53106
align-items: center;
107+
gap: var(--md-gap);
108+
}
109+
110+
.links {
111+
display: flex;
112+
align-items: center;
113+
gap: var(--sm-gap);
114+
}
115+
116+
.links a,
117+
summary {
118+
font-size: var(--sm-font-size);
119+
font-weight: 700;
120+
letter-spacing: 0.08em;
121+
text-transform: uppercase;
122+
color: var(--text-color);
123+
124+
padding: var(--sm-pad) var(--md-pad);
125+
border-radius: var(--control-radius);
126+
border: var(--border-width) solid transparent;
127+
cursor: pointer;
128+
white-space: nowrap;
129+
}
130+
131+
.links a:hover,
132+
summary:hover {
133+
background: var(--theme-soft-color);
134+
border-color: var(--sep-color);
135+
text-decoration: none;
136+
}
137+
138+
details {
139+
position: relative;
140+
}
141+
142+
summary {
143+
list-style: none;
144+
}
145+
146+
summary::-webkit-details-marker {
147+
display: none;
148+
}
149+
150+
.menu-panel {
151+
position: absolute;
152+
top: calc(100% + var(--sm-gap));
153+
right: 0;
154+
min-width: 220px;
155+
156+
background: var(--fg-color);
157+
border: var(--border-width) solid var(--sep-color);
158+
box-shadow: var(--card-shadow);
159+
padding: var(--md-pad);
160+
display: grid;
161+
gap: var(--sm-gap);
162+
z-index: var(--navbar-zi);
163+
}
164+
165+
.menu-panel a {
166+
padding: var(--sm-pad) var(--md-pad);
167+
font-size: var(--sm-font-size);
168+
text-transform: none;
169+
letter-spacing: 0.02em;
170+
}
171+
172+
.menu-panel hr {
173+
border: none;
174+
border-top: var(--border-width) solid var(--sep-color);
175+
margin: var(--sm-gap) 0;
176+
}
177+
178+
.center {
179+
flex: 1;
180+
display: flex;
181+
justify-content: center;
54182
}
55183
56184
.right {
57185
display: flex;
58186
align-items: center;
59-
gap: var(--lg-gap);
187+
gap: var(--md-gap);
188+
}
189+
190+
@media (max-width: 1200px) {
191+
.links {
192+
display: none;
193+
}
194+
195+
.center {
196+
justify-content: flex-start;
197+
}
198+
}
199+
200+
@media (max-width: 850px) {
201+
.center {
202+
justify-content: flex-end;
203+
}
60204
}
61205
</style>

‎packages/web/src/lib/components/nav/Sidebar.svelte‎

Lines changed: 3 additions & 31 deletions
Original file line numberDiff line numberDiff line change
@@ -6,24 +6,22 @@
66
export let sidebarOpen = writable(false);
77
</script>
88

9-
<div class="sidebar normal">
10-
<SidebarContent />
11-
</div>
129
{#if $sidebarOpen}
1310
<div
1411
aria-hidden="true"
1512
class="cover"
1613
on:click={() => ($sidebarOpen = false)}
1714
transition:fade={{ duration: 300 }}
1815
/>
19-
<div class="sidebar small" transition:fly={{ duration: 300, x: -300, opacity: 1 }}>
16+
<div class="sidebar drawer" transition:fly={{ duration: 300, x: -300, opacity: 1 }}>
2017
<SidebarContent />
2118
</div>
2219
{/if}
2320

2421
<style>
2522
.sidebar {
2623
position: fixed;
24+
top: 0;
2725
left: 0;
2826
bottom: 0;
2927
width: var(--sidebar-size);
@@ -32,20 +30,9 @@
3230
border-right: var(--border-width) solid var(--sep-color);
3331
box-shadow: var(--card-shadow);
3432
35-
padding: var(--lg-pad);
33+
padding: calc(var(--navbar-size) + var(--md-gap)) var(--lg-pad) var(--lg-pad);
3634
3735
overflow-y: auto;
38-
}
39-
40-
.normal {
41-
top: var(--navbar-size);
42-
z-index: var(--sidebar-zi);
43-
}
44-
45-
.small {
46-
display: none;
47-
48-
top: 0;
4936
z-index: var(--mobile-sidebar-zi);
5037
}
5138
@@ -59,20 +46,5 @@
5946
z-index: var(--mobile-sidebar-bg-zi);
6047
background: var(--modal-bg-color);
6148
62-
display: none;
63-
}
64-
65-
@media (max-width: 1500px) {
66-
.normal {
67-
display: none;
68-
}
69-
70-
.small {
71-
display: block;
72-
}
73-
74-
.cover {
75-
display: block;
76-
}
7749
}
7850
</style>

‎packages/web/src/lib/components/stats/FocusedTeam.svelte‎

Lines changed: 1 addition & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -63,7 +63,7 @@
6363
bottom: 0;
6464
margin: var(--md-gap);
6565
--team-bar-width: 350px;
66-
--team-bar-ss: var(--sidebar-size);
66+
--team-bar-ss: 0px;
6767
left: max(0px, calc(50% + var(--team-bar-ss) / 2 - var(--team-bar-width)));
6868
right: max(0px, calc(50% + var(--team-bar-ss) / 2 + var(--team-bar-width)));
6969
width: min(
@@ -83,11 +83,6 @@
8383
outline-color: var(--inverse-text-color);
8484
}
8585
86-
@media (max-width: 1500px) {
87-
a {
88-
--team-bar-ss: 0px;
89-
}
90-
}
9186
9287
.top-row {
9388
display: flex;

0 commit comments

Comments
 (0)