Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Release - Catalog App Shell (v0) #42

Merged
merged 11 commits into from
Jul 28, 2024
Merged

Release - Catalog App Shell (v0) #42

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
11 commits
Select commit Hold shift + click to select a range
33b02a8
Remove unused BorrowModal
dillonfagan Jul 26, 2024
8f63186
Refactor main layout with Shell
dillonfagan Jul 26, 2024
0420995
Disable touch on body [mobile]
dillonfagan Jul 26, 2024
394ca34
Simplify app shell with body component
dillonfagan Jul 27, 2024
6befb66
Align chooser icon with text input icon
dillonfagan Jul 27, 2024
8df434c
Adjust body styling for mobile
dillonfagan Jul 27, 2024
152c0ff
Adjust styling for touch actions
dillonfagan Jul 27, 2024
f935cc3
Remove touch-none
dillonfagan Jul 27, 2024
fff1575
Merge pull request #41 from pvdthings/app-shell
dillonfagan Jul 27, 2024
98461f8
Add service worker back
dillonfagan Jul 28, 2024
f70a4e3
Really fix the app shell styling this time
dillonfagan Jul 28, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions apps/web/src/app.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,6 +11,7 @@
body {
@apply bg-neutral-200;
@apply font-body;
@apply overflow-hidden touch-none;
}

input[type=text],
Expand Down
49 changes: 0 additions & 49 deletions apps/web/src/lib/components/BorrowModal/BorrowModal.svelte
View file
Open in desktop

This file was deleted.

2 changes: 0 additions & 2 deletions apps/web/src/lib/components/BorrowModal/index.ts
View file
Open in desktop

This file was deleted.

3 changes: 0 additions & 3 deletions apps/web/src/lib/components/BorrowModal/stores.ts
View file
Open in desktop

This file was deleted.

2 changes: 1 addition & 1 deletion apps/web/src/lib/components/Chooser/Chooser.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,3 +1,3 @@
button.chooser-button {
@apply px-3 py-1 font-semibold font-display text-left outline-none;
@apply px-2 py-1 font-semibold font-display text-left outline-none;
}
2 changes: 1 addition & 1 deletion apps/web/src/lib/components/Shell/AppBar.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
<div class="navbar fixed top-0 left-0 right-0 z-50 shadow-lg bg-neutral-100 border-b border-neutral-400">
<div class="navbar flex-shrink-0 z-50 shadow-lg bg-neutral-100 border-b border-neutral-400">
<div class="navbar-start lg:pl-4 text-neutral-800 stroke-neutral-800">
<slot name="start" />
</div>
Expand Down
3 changes: 3 additions & 0 deletions apps/web/src/lib/components/Shell/Body.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,3 @@
<main class="flex-grow -my-3 pt-6 pb-24 lg:pt-8 px-3 lg:px-0 lg:mx-auto lg:w-3/4 overflow-x-hidden overflow-y-scroll relative">
<slot />
</main>
3 changes: 3 additions & 0 deletions apps/web/src/lib/components/Shell/Shell.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,3 @@
<div class="flex flex-col w-screen h-screen overflow-hidden">
<slot />
</div>
4 changes: 3 additions & 1 deletion apps/web/src/lib/components/Shell/index.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,3 +1,5 @@
export { default as AppBar } from "./AppBar.svelte";
export { default as Body } from "./Body.svelte";
export { default as BottomNavigation } from "./BottomNavigation.svelte";
export { default as BottomNavigationItem } from "./BottomNavigationItem.svelte";
export { default as BottomNavigationItem } from "./BottomNavigationItem.svelte";
export { default as Shell } from "./Shell.svelte";
2 changes: 0 additions & 2 deletions apps/web/src/lib/views/CatalogView.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,4 @@
<script>
import BorrowModal from '$lib/components/BorrowModal/BorrowModal.svelte';
import { t } from '$lib/language/translate';
import { filteredThings } from '$lib/stores/catalog';
import CategoryChooserView from './CategoryChooserView.svelte';
Expand All @@ -16,7 +15,6 @@
<SearchInputView />
</div>
<hr class="border-black border-opacity-20 my-6" />
<BorrowModal />
{#if $filteredThings.length > 0}
<div class="pb-20 lg:pb-0">
<ThingsView />
Expand Down
10 changes: 5 additions & 5 deletions apps/web/src/routes/+layout.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,10 +1,10 @@
<script>
import '../app.css';
import { Head } from '$lib/components';
import { AppBar, Body, Shell } from '$lib/components/Shell';
import BottomNavigationView from '$lib/views/BottomNavigationView.svelte';
import HomeButton from '$lib/components/HomeButton.svelte';
import { Actions } from '$lib/views/Actions';
import { AppBar } from '$lib/components/Shell';
</script>

<Head
Expand All @@ -15,13 +15,13 @@
url="https://web.pvdthings.coop"
twitterHandle="@pvdthings"
/>
<main class="flex flex-col w-full min-h-screen">
<Shell>
<AppBar>
<HomeButton slot="start" />
<Actions slot="end" />
</AppBar>
<div class="flex-grow pt-24 lg:pt-32 mx-3 lg:mx-auto lg:w-3/4 relative">
<Body>
<slot />
</div>
</Body>
<BottomNavigationView />
</main>
</Shell>