Skip to content

Commit 301255a

Browse files
DiscusserDiscusser
committed
Mobile support
1 parent 4f1eb54 commit 301255a

File tree

7 files changed

+78
-29
lines changed

7 files changed

+78
-29
lines changed

‎src/lib/components/projects/ProjectsTable.svelte‎

Lines changed: 12 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -17,13 +17,17 @@
1717
});
1818
</script>
1919

20-
<div class="max-h-96 overflow-scroll">
20+
<div class="max-h-96 min-w-0 overflow-y-scroll">
2121
<Table.Root>
2222
<Table.Header>
2323
{#each table.getHeaderGroups() as headerGroup (headerGroup.id)}
2424
<Table.Row>
2525
{#each headerGroup.headers as header (header.id)}
26-
<Table.Head>
26+
<Table.Head
27+
class="{header.id == 'github'
28+
? 'hidden md:table-cell lg:hidden 2xl:table-cell'
29+
: ''} {header.id == 'category' ? 'hidden sm:table-cell' : ''}"
30+
>
2731
{#if !header.isPlaceholder}
2832
<FlexRender
2933
content={header.column.columnDef.header}
@@ -35,12 +39,16 @@
3539
</Table.Row>
3640
{/each}
3741
</Table.Header>
38-
<Table.Body>
42+
<Table.Body class="max-h-96">
3943
{#each table.getRowModel().rows as row (row.id)}
4044
{#if !categories || categories.includes(row.original.category)}
4145
<Table.Row data-state={row.getIsSelected() && 'selected'}>
4246
{#each row.getVisibleCells() as cell (cell.id)}
43-
<Table.Cell>
47+
<Table.Cell
48+
class="{cell.column.columnDef.id == 'github'
49+
? 'hidden md:table-cell lg:hidden 2xl:table-cell'
50+
: ''} {cell.column.columnDef.id == 'category' ? 'hidden sm:table-cell' : ''}"
51+
>
4452
<FlexRender content={cell.column.columnDef.cell} context={cell.getContext()} />
4553
</Table.Cell>
4654
{/each}

‎src/lib/components/shared/Footer.svelte‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -5,9 +5,9 @@
55
<div class="mt-8">
66
<hr />
77
<div class="flex justify-center px-4 py-8">
8-
<div class="flex w-1/2">
8+
<div class="flex w-full space-x-8 lg:w-1/2">
99
<p class="flex-grow text-muted-foreground/50">Web page made by Discusser with Svelte</p>
10-
<div class="flex space-x-4">
10+
<div class="flex items-center space-x-4">
1111
<a target="_blank" href="mailto:discussercodes@gmail.com">
1212
<IconMail />
1313
</a>

‎src/lib/components/shared/NavBar.svelte‎

Lines changed: 30 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,20 +1,46 @@
11
<script lang="ts">
22
import NavAnchor from '$lib/components/shared/NavAnchor.svelte';
33
import { Button } from '$lib/components/ui/button';
4-
import { IconMoon, IconSun } from '@tabler/icons-svelte';
4+
import { IconMenu2, IconMoon, IconSun, IconX } from '@tabler/icons-svelte';
55
import { toggleMode } from 'mode-watcher';
6+
import SideNav from '$lib/components/shared/SideNav.svelte';
7+
8+
let sidebarOpen = $state(false);
9+
10+
const toggleSidebar = () => (sidebarOpen = !sidebarOpen);
11+
12+
$effect(() => {
13+
if (sidebarOpen) {
14+
document.body.style.overflow = 'hidden';
15+
} else {
16+
document.body.style.overflow = 'auto';
17+
}
18+
});
619
</script>
720

821
<div class="sticky top-0 z-50 w-full bg-background">
22+
{#if sidebarOpen}
23+
<div
24+
class="absolute left-0 top-0 z-[100] h-screen w-screen space-y-4 bg-background p-4 opacity-95 lg:hidden"
25+
>
26+
<Button variant="outline" size="icon" onclick={toggleSidebar}>
27+
<IconX />
28+
</Button>
29+
<SideNav class="-ml-4" />
30+
</div>
31+
{/if}
932
<div class="flex flex-grow justify-center p-4">
10-
<div class="flex w-1/2 justify-center">
11-
<div class="flex items-center space-x-8">
33+
<div class="flex w-full justify-start lg:w-1/2 lg:justify-center">
34+
<Button variant="outline" size="icon" class="mr-4 lg:mr-0 lg:hidden" onclick={toggleSidebar}>
35+
<IconMenu2 />
36+
</Button>
37+
<div class="hidden sm:flex sm:flex-grow sm:items-center sm:space-x-8">
1238
<NavAnchor href="/">Home</NavAnchor>
1339
<NavAnchor fuzzy href="/projects">Projects</NavAnchor>
1440
<NavAnchor fuzzy href="/blog">Blog</NavAnchor>
1541
<NavAnchor fuzzy href="/hobbies">Hobbies</NavAnchor>
1642
</div>
17-
<div class="flex-grow">
43+
<div>
1844
<Button onclick={toggleMode} class="float-right" variant="outline" size="icon">
1945
<IconSun
2046
class="h-[1.2rem] w-[1.2rem] rotate-0 scale-100 transition-all dark:-rotate-90 dark:scale-0"

‎src/lib/components/shared/SideNav.svelte‎

Lines changed: 8 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,15 @@
11
<script lang="ts">
22
import NavAnchor from '$lib/components/shared/NavAnchor.svelte';
3+
4+
let {
5+
class: className,
6+
...restProps
7+
}: {
8+
class?: string;
9+
} = $props();
310
</script>
411

5-
<div>
12+
<div class={className} {...restProps}>
613
<ul>
714
<li><NavAnchor href="/">Home</NavAnchor></li>
815
<li>

‎src/lib/constants/projects.ts‎

Lines changed: 17 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -25,25 +25,30 @@ export const columns: ColumnDef<Project>[] = [
2525
{
2626
accessorKey: 'label',
2727
cell: (ctx) => {
28-
const snippet = createRawSnippet<[{ url: string | null; label: string | null }]>((props) => {
29-
const { url, label } = props();
28+
const snippet = createRawSnippet<[Project]>((props) => {
29+
const project = props();
30+
const url = getPageURLForProject(project);
31+
const githubUrl = getGithubURLForProject(project);
3032
return {
3133
render: () =>
32-
url
33-
? `<a class="text-blue-500" href=${url}>${label}</a>`
34-
: `<span>${label ?? ''}</span>`
34+
`<div class="flex flex-col space-y-2">` +
35+
(url
36+
? `<a class="text-blue-500" href=${url}>${project.label}</a>`
37+
: `<span>${project.label ?? ''}</span>`) +
38+
(githubUrl
39+
? `<a class="text-blue-500 md:hidden lg:table-cell 2xl:hidden" href="${githubUrl}">GitHub</a>`
40+
: '') +
41+
`</div>`
3542
};
3643
});
37-
return renderSnippet(snippet, {
38-
url: getPageURLForProject(ctx.row.original),
39-
label: ctx.row.original.label
40-
});
44+
return renderSnippet(snippet, ctx.row.original);
4145
},
4246
header: 'Name'
4347
},
4448
{
4549
accessorKey: 'category',
46-
header: 'Category'
50+
header: 'Category',
51+
id: 'category'
4752
},
4853
{
4954
accessorFn: (project) => getGithubURLForProject(project) ?? '',
@@ -59,7 +64,8 @@ export const columns: ColumnDef<Project>[] = [
5964
});
6065
return renderSnippet(snippet, getGithubURLForProject(ctx.row.original));
6166
},
62-
header: 'GitHub'
67+
header: 'GitHub',
68+
id: 'github'
6369
},
6470
{
6571
accessorKey: 'notes',

‎src/routes/+layout.svelte‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -13,11 +13,11 @@
1313
<NavBar />
1414

1515
<div class="flex flex-grow p-4">
16-
<div class="absolute w-1/4">
16+
<div class="absolute hidden w-1/4 lg:block">
1717
<SideNav />
1818
</div>
1919
<div class="flex flex-grow justify-center">
20-
<div class="w-1/2">
20+
<div class="w-full lg:w-1/2">
2121
<slot />
2222
</div>
2323
</div>

‎src/routes/projects/python/bouncing-squares/+page.svelte‎

Lines changed: 7 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -5,17 +5,19 @@
55
</script>
66

77
<Project project={BOUNCING_SQUARES}>
8-
<div class="flex space-x-4">
9-
<div class="flex-[2]">
10-
<Video alt="A demonstration of the bouncing squares program" src="/bouncing_squares.mov" />
11-
</div>
12-
<p class="flex-[3]">
8+
<div
9+
class="flex flex-col items-center space-y-4 md:flex-row md:items-start md:space-x-4 md:space-y-0"
10+
>
11+
<p class="lg:flex-[5]">
1312
This program isn't really anything impressive, I just decided to make it because I was feeling
1413
bored. You can choose how many squares you want on the screen, and adjust their speed or size
1514
(individually when spawning new ones, or collectively). When a square hits the edge of the
1615
screen, it changes color and bounces off the edge, which gives mesmerizing patterns with
1716
vibrant colors. The version you see in the video is not the final version, as I added a few
1817
more features after recording that, but the principle stays the same.
1918
</p>
19+
<div class="lg:flex-[2]">
20+
<Video alt="A demonstration of the bouncing squares program" src="/bouncing_squares.mov" />
21+
</div>
2022
</div>
2123
</Project>

0 commit comments

Comments
 (0)