Skip to content

Commit

Permalink
feat: new centered layout
Browse files Browse the repository at this point in the history
  • Loading branch information
Xyphyn committed Oct 4, 2023
1 parent 0d08df2 commit f617f54
Show file tree
Hide file tree
Showing 11 changed files with 179 additions and 70 deletions.
2 changes: 1 addition & 1 deletion package.json
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
{
"name": "photon-lemmy",
"version": "1.15.3",
"version": "1.16.0",
"private": true,
"scripts": {
"dev": "vite dev",
Expand Down
2 changes: 1 addition & 1 deletion src/lib/components/lemmy/post/PostFeed.svelte
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,7 @@
<div
class="flex flex-col {$userSettings.view == 'card'
? 'gap-3 md:gap-4'
: ''} divide-slate-200 dark:divide-zinc-800 z-[5]"
: ''} divide-slate-200 dark:divide-zinc-800"
class:divide-y={$userSettings.view != 'card'}
>
{#if posts.length == 0}
Expand Down
2 changes: 1 addition & 1 deletion src/lib/components/ui/ExpandableImage.svelte
Original file line number Diff line number Diff line change
Expand Up @@ -24,7 +24,7 @@
<!-- svelte-ignore a11y-click-events-have-key-events -->
<!-- svelte-ignore a11y-positive-tabindex -->
<div
class="fixed top-0 left-0 w-screen h-screen overflow-auto bg-black/50
class="isolate fixed backdrop-blur-sm top-0 left-0 w-screen h-screen overflow-auto bg-black/50
flex flex-col z-[200] overscroll-contain"
transition:fade={{ duration: 200 }}
on:click={() => (open = false)}
Expand Down
6 changes: 4 additions & 2 deletions src/lib/components/ui/Navbar.svelte
Original file line number Diff line number Diff line change
Expand Up @@ -46,9 +46,11 @@
</script>

<nav
class="flex flex-row gap-2 items-center sticky top-0 bg-slate-50/80
dark:bg-black/80 backdrop-blur-3xl w-full mx-auto px-4 py-2 z-50 box-border h-16
class="flex flex-row gap-2 items-center
backdrop-blur-3xl w-full mx-auto px-4 py-2 z-50 box-border h-16
{$$props.class}
"
style={$$props.style}
>
<div class="flex flex-row gap-2 items-center mr-auto">
<a href="/" class="flex flex-row items-center gap-2 logo group">
Expand Down
4 changes: 2 additions & 2 deletions src/lib/components/ui/StickyCard.svelte
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
<aside
class="sticky top-16 break-words flex
flex-col gap-4 p-6 max-w-full 2xl:w-96 w-80 max-h-[calc(100svh-4rem)]
class="sticky top-16 left-0 break-words flex flex-shrink
flex-col gap-4 p-6 max-w-full w-full max-h-[calc(100svh-8rem)]
overflow-auto text-sm border-slate-200 dark:border-zinc-800 {$$props.class}"
>
<slot />
Expand Down
79 changes: 78 additions & 1 deletion src/lib/components/ui/layout/Shell.svelte
Original file line number Diff line number Diff line change
@@ -1,7 +1,84 @@
<script lang="ts">
import Navbar from '$lib/components/ui/Navbar.svelte'
import { userSettings } from '$lib/settings.js'
import { routes } from '$lib/util.js'
export let route: { id: string } | undefined = undefined
export let route: { id: string | null } | undefined = undefined
$: title = route ? routes[(route.id as keyof typeof routes) ?? ''] : ''
let scroll = 0
</script>

<svelte:window bind:scrollY={scroll} />

<div class="shell {$$props.class}">
<slot
name="navbar"
class="sticky top-0 border-b border-slate-200 dark:border-zinc-900
{scroll > 0
? 'bg-slate-50/70 dark:bg-zinc-950/70'
: 'bg-slate-50 dark:bg-zinc-950'} transition-colors duration-500"
style="grid-area: navbar"
{title}
/>
<div
class="content md:divide-x divide-slate-200 dark:divide-zinc-900 {$userSettings.newWidth
? 'limit-width'
: ''}"
>
<slot
name="sidebar"
class="hidden md:flex sticky top-16 justify-self-end left-0 w-full max-w-full"
style="grid-area: sidebar; max-width: 20rem;"
/>
<slot
name="main"
class="w-full bg-slate-25 dark:bg-transparent justify-self-center"
style="grid-area: main"
/>
<slot
name="suffix"
class="hidden xl:flex w-full justify-self-start"
style="grid-area: suffix; max-width: 20rem;"
/>
</div>
</div>

<style>
.shell {
display: grid;
grid-template-columns: 1fr;
grid-template-rows: auto 1fr;
grid-template-areas:
'navbar'
'content';
}
.content {
width: 100%;
display: grid;
margin-left: auto;
margin-right: auto;
grid-area: content;
grid-template-columns: 1fr;
grid-template-areas: 'sidebar main suffix';
justify-items: end center start;
}
@media (min-width: 768px) {
.content {
grid-template-columns: 1fr 2fr;
}
}
@media (min-width: 1280px) {
.content {
grid-template-columns: 1fr 2fr 1fr;
}
}
.limit-width {
max-width: 96rem;
}
</style>
12 changes: 9 additions & 3 deletions src/lib/components/ui/sidebar/CommunityList.svelte
Original file line number Diff line number Diff line change
Expand Up @@ -30,9 +30,15 @@
slot="prefix"
/>
</div>
<span class="max-w-full break-words" class:hidden={!expanded}>
{follow.title}
</span>
<div
class="flex flex-col max-w-full break-words"
class:hidden={!expanded}
>
<span>{follow.title}</span>
<span class="text-xs text-slate-600 dark:text-zinc-400">
{new URL(follow.actor_id).hostname}
</span>
</div>
</Button>
</div>
{/each}
39 changes: 23 additions & 16 deletions src/lib/components/ui/sidebar/Sidebar.svelte
Original file line number Diff line number Diff line change
@@ -1,7 +1,6 @@
<script lang="ts">
import {
ArrowLeftOnRectangle,
ChevronDoubleLeft,
Cog6Tooth,
GlobeAlt,
Home,
Expand All @@ -18,16 +17,19 @@
import { flip } from 'svelte/animate'
import { expoOut } from 'svelte/easing'
import { Button } from 'mono-svelte'
export let route = ''
</script>

<nav
class="hidden sm:flex flex-col pl-4 pr-4 py-4 overflow-auto sticky top-16 bottom-0
gap-1 max-h-[calc(100svh-4rem)] w-full bg-slate-50 dark:bg-black
class="flex flex-col pl-4 pr-4 py-4 overflow-auto
gap-1 max-h-[calc(100svh-4rem)]
{$userSettings.expandSidebar
? 'max-w-[25%] resize-x min-w-[12rem]'
? ''
: 'w-max max-w-max min-w-max'} {$$props.class}"
style={$$props.style}
>
<Button
<!-- <Button
on:click={() =>
($userSettings.expandSidebar = !$userSettings.expandSidebar)}
class="w-max !p-2"
Expand All @@ -42,18 +44,23 @@
: 'rotate-180'}"
title="Toggle Sidebar"
/>
</Button>
</Button> -->
<SidebarButton href="/" expanded={$userSettings.expandSidebar}>
<Icon src={Home} mini size="20" title="Frontpage" />
<span class:hidden={!$userSettings.expandSidebar}>Frontpage</span>
<Icon src={Home} mini={route == '/'} size="20" title="Frontpage" />
<span>Frontpage</span>
</SidebarButton>
<SidebarButton href="/settings" expanded={$userSettings.expandSidebar}>
<Icon src={Cog6Tooth} mini size="20" title="Settings" />
<span class:hidden={!$userSettings.expandSidebar}>Settings</span>
<Icon
src={Cog6Tooth}
mini={route == '/settings'}
size="20"
title="Settings"
/>
<span>Settings</span>
</SidebarButton>
<SidebarButton expanded={$userSettings.expandSidebar} href="/communities">
<Icon mini src={GlobeAlt} size="20" />
<span class:hidden={!$userSettings.expandSidebar}>Communities</span>
<Icon mini={route == '/communities'} src={GlobeAlt} size="20" />
<span>Communities</span>
</SidebarButton>
{#if $profileData.profiles.length >= 1}
<hr class="border-slate-300 dark:border-zinc-800 my-1" />
Expand All @@ -64,7 +71,7 @@
{/each}
<SidebarButton href="/accounts" expanded={$userSettings.expandSidebar}>
<Icon src={UserGroup} mini size="20" />
<span class:hidden={!$userSettings.expandSidebar}>Accounts</span>
<span>Accounts</span>
</SidebarButton>
{/if}
<hr class="border-slate-300 dark:border-zinc-800 my-1" />
Expand All @@ -90,7 +97,7 @@
title="Log In"
>
<Icon mini src={ArrowLeftOnRectangle} size="20" />
<span class:hidden={!$userSettings.expandSidebar}>Log In</span>
<span>Log In</span>
</Button>
<Button
class="hover:bg-slate-200 {$userSettings.expandSidebar ? '' : '!p-1.5'}"
Expand All @@ -100,7 +107,7 @@
title="Sign Up"
>
<Icon mini src={Identification} size="20" />
<span class:hidden={!$userSettings.expandSidebar}>Sign Up</span>
<span>Sign Up</span>
</Button>
<Button
class="hover:bg-slate-200 {$userSettings.expandSidebar ? '' : '!p-1.5'}"
Expand All @@ -110,7 +117,7 @@
title="Change Instance"
>
<Icon mini src={ServerStack} size="20" />
<span class:hidden={!$userSettings.expandSidebar}>Change instance</span>
<span>Change instance</span>
</Button>
{/if}
</nav>
76 changes: 48 additions & 28 deletions src/routes/+layout.svelte
Original file line number Diff line number Diff line change
Expand Up @@ -10,11 +10,14 @@
import { pwaInfo } from 'virtual:pwa-info'
import { inDarkTheme, theme } from '$lib/ui/colors.js'
import { userSettings } from '$lib/settings.js'
import { Button, ToastContainer } from 'mono-svelte'
import { Button, Spinner, ToastContainer } from 'mono-svelte'
import { onMount } from 'svelte'
import { browser } from '$app/environment'
import { Forward, Icon } from 'svelte-hero-icons'
import { routes } from '$lib/util.js'
import Shell from '$lib/components/ui/layout/Shell.svelte'
import SiteCard from '$lib/components/lemmy/SiteCard.svelte'
import { site } from '$lib/lemmy.js'
nProgress.configure({
minimum: 0.4,
Expand Down Expand Up @@ -72,36 +75,53 @@
Skip Navigation
</Button>

<div
class="flex flex-col min-h-screen
font-inter
{$userSettings.font == 'inter'
<Shell
class="min-h-screen {$userSettings.font == 'inter'
? 'font-inter'
: $userSettings.font == 'system'
? 'font-system'
: 'font-sans'}
"
: 'font-sans'}"
route={$page.route}
>
<Navbar {title} />
<ToastContainer />
<Moderation />
<div
class="flex flex-row h-full w-full max-w-full flex-1
"
<Navbar
slot="navbar"
let:style={s}
let:class={c}
class={c}
style={s}
{title}
/>
<Sidebar
route={$page.route.id ?? ''}
slot="sidebar"
let:style={s}
let:class={c}
class={c}
style={s}
/>
<main
slot="main"
let:style={s}
let:class={c}
class="p-3 sm:p-6 min-w-0 w-full flex flex-col min-h-full {c}"
style={s}
class:max-w-6xl={$userSettings.newWidth}
id="main"
>
<Sidebar />
<div
class="w-full min-w-0 border-t sm:border-l border-slate-200 dark:border-zinc-900
sm:rounded-xl bg-slate-25 dark:bg-zinc-950 min-h-full"
>
<main
class="p-3 sm:p-6 min-w-0 w-full flex-[3] sm:rounded-tl-lg mx-auto flex flex-col min-h-full
"
class:max-w-6xl={$userSettings.newWidth}
id="main"
>
<slot />
</main>
</div>
<slot />
</main>
<div slot="suffix" let:class={c} let:style={s} class={c} style={s}>
{#if $site}
<SiteCard
site={$site.site_view}
taglines={$site.taglines}
admins={$site.admins}
version={$site.version}
/>
{:else}
<div class="h-64 grid place-items-center">
<Spinner width={32} />
</div>
{/if}
</div>
</div>
</Shell>
4 changes: 2 additions & 2 deletions src/routes/+page.svelte
Original file line number Diff line number Diff line change
Expand Up @@ -104,7 +104,7 @@
</Pageination>
</div>
</div>
<div class="hidden xl:block">
<!-- <div class="hidden xl:block">
{#if !$site}
<StickyCard>
<div class="h-64 grid place-items-center">
Expand All @@ -119,5 +119,5 @@
version={$site.version}
/>
{/if}
</div>
</div> -->
</div>
Loading

0 comments on commit f617f54

Please sign in to comment.