Skip to content

Commit

Permalink
Merge branch '0.1.0' into menu-accessibility
Browse files Browse the repository at this point in the history
  • Loading branch information
dillonfagan authored Mar 23, 2021
2 parents 90d9b0e + 4a38934 commit 8e6e387
Show file tree
Hide file tree
Showing 12 changed files with 809 additions and 54 deletions.
674 changes: 674 additions & 0 deletions LICENSE

Large diffs are not rendered by default.

23 changes: 2 additions & 21 deletions src/components/Card.svelte
Original file line number Diff line number Diff line change
Expand Up @@ -2,29 +2,10 @@
export let height = "auto";
export let width = "auto";
export let hovers = true;
let showModal = false;
const toggleModal = () => showModal = !showModal;
</script>

<div on:click={toggleModal} class={`h-${height} w-${width}`}>
<div class={`h-${height} w-${width}`}>
<div class:hovers class="h-full bg-white brutal overflow-hidden">
<slot />
</div>
<div class="fixed z-10 inset-0 p-8 h-screen w-screen bg-black bg-opacity-50 justify-center align-middle hidden" class:visible={showModal}>
<div class="bg-gray-300 p-16 rounded md:max-w-md m-auto border-2 border-black thicc">
<slot name="modal" />
</div>
</div>
</div>

<style>
div.visible {
@apply flex;
}
div.thicc {
box-shadow: 4px 4px 0 #000000;
}
</style>

</div>
20 changes: 20 additions & 0 deletions src/components/Header.svelte
Original file line number Diff line number Diff line change
@@ -0,0 +1,20 @@
<script>
import Row from "./Row.svelte";
import Title from "./Title.svelte";
export let title = null;
</script>

<header class="w-full p-4 flex flex-col space-y-8 justify-center bg-long-city bg-cover border-b-2 border-gray-200">
<Row center>
<a href="/">
<img src="/PVD_Things_Logo_White.png" alt="PVD Things" class="h-14 md:h-20 lg:h-24"/>
</a>
</Row>
<Row center><slot /></Row>
{#if title}
<Row center><Title bold caps>{title}</Title></Row>
{:else}
<h1 hidden>PVD Things</h1>
{/if}
</header>
7 changes: 5 additions & 2 deletions src/components/Menu.svelte
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,10 @@
{
label: "donations",
url: "/donations"
},
{
label: "browse",
url: "/browse"
}
];
Expand Down Expand Up @@ -41,8 +45,7 @@
<line x1="4" y1="18" x2="20" y2="18" />
</svg>
</button>
<nav class:visible class="bg-white shadow w-max text-lg overflow-hidden p-4 rounded-lg hidden flex-col space-y-2 mb-4" bind:this={menu} id="main-menu" aria-labelledby="menubutton" role="menu" tabindex="-1">
<a href="/routes" hidden>routes</a>
<nav class:visible class="bg-white shadow w-max text-lg overflow-hidden p-4 rounded-lg hidden flex-col space-y-2 mb-4">
{#each pages as page}
<a href={page.url} class="hover:underline focus:underline capitalize" role="menuitem">{page.label}</a>
{/each}
Expand Down
7 changes: 1 addition & 6 deletions src/components/Scroller.svelte
Original file line number Diff line number Diff line change
@@ -1,19 +1,14 @@
<script>
import { goto } from '@sapper/app';
import Card from "./Card.svelte";
import Image from "./Image.svelte";
import Text from "./Text.svelte";
export let things = [];
function showDetails(thingId) {
goto(`/home/thing?id=${thingId}`);
}
</script>

<div class="flex flex-row gap-3 overflow-auto px-8 py-7">
{#each things as thing}
<div on:click={showDetails(thing.id)}>
<div>
<Card height="24" width="24">
<Image height="full" src={thing.img} alt={thing.name} />
</Card>
Expand Down
20 changes: 18 additions & 2 deletions src/components/Title.svelte
Original file line number Diff line number Diff line change
@@ -1,3 +1,19 @@
<h1 class="text-5xl md:text-6x text-white text-center">
<script>
export let color = "white";
export let bold = false;
export let caps = false;
</script>

<h1 class:bold class:caps class="text-3xl md:text-4xl text-{color} text-center max-w-max px-2 py-1 brutal bg-indigo-500 bg-opacity-75">
<slot />
</h1>
</h1>

<style>
.bold {
@apply font-bold;
}
.caps {
@apply uppercase;
}
</style>
84 changes: 84 additions & 0 deletions src/routes/browse.svelte
Original file line number Diff line number Diff line change
@@ -0,0 +1,84 @@
<script>
import { onMount } from "svelte";
import shuffle from "../lib/shuffle";
import Header from "../components/Header.svelte";
import Subheading from "../components/Subheading.svelte";
import Container from "../components/Container.svelte";
import Scroller from "../components/Scroller.svelte";
import TextInput from "../components/TextInput.svelte";
let data;
let searchResults = [];
let searchText = "";
onMount(() => {
let now = new Date();
let previousRefresh = new Date(sessionStorage.getItem("previousRefresh"));
if (Math.abs(now - previousRefresh) > 120000) {
thingify();
sessionStorage.setItem("previousRefresh", now.toUTCString());
} else {
data = JSON.parse(sessionStorage.getItem("data"));
data.things = shuffle(data.things);
console.log('Previous data refreshed.');
}
});
async function thingify() {
const result = await fetch(`/.netlify/functions/things`);
data = await result.json();
sessionStorage.setItem("data", JSON.stringify(data))
data.things = shuffle(data.things);
console.log('Refreshed data from API.');
}
function filterThings(category) {
return data.things.filter(thing => thing.category === category);
}
function search() {
if (searchText.length === 0) {
searchResults = [];
return;
}
const filtered = data.things.filter(thing => thing.name.toLowerCase().includes(searchText.toLowerCase()));
if (filtered.length > 0)
searchResults = filtered;
}
</script>

<Header>
<TextInput
bind:value={searchText}
on:input={search}
placeholder="Search..."
/>
</Header>
<div class="mt-10">
{#if !data}
loading...
{:else}
{#if searchResults.length === 0}
{#each data.categories as category}
<div>
<Container>
<Subheading>{category}:</Subheading>
</Container>
<Scroller things={filterThings(category)} />
</div>
{/each}
{:else}
<div>
<Container>
<Subheading>Things:</Subheading>
</Container>
<Scroller things={searchResults} />
</div>
{/if}
{/if}
</div>
6 changes: 2 additions & 4 deletions src/routes/donations.svelte
Original file line number Diff line number Diff line change
Expand Up @@ -2,10 +2,10 @@
import Head from "../components/Head.svelte";
import Column from "../components/Column.svelte";
import Section from "../components/Section.svelte";
import Title from "../components/Title.svelte";
import Heading from "../components/Heading.svelte";
import Text from "../components/Text.svelte";
import Button from "../components/Button.svelte";
import Header from "../components/Header.svelte";
const formURL = "https://docs.google.com/forms/d/e/1FAIpQLSfpUUKhhCr32Z_fE8ogvmDv4bD0icWrgTt7QOZVfaNVZemOcg/viewform?usp=sf_link";
const gofundmeURL = "https://www.gofundme.com/f/cooperative-library-of-things-in-providence";
Expand All @@ -21,9 +21,7 @@
/>

<Column spacing="0">
<Section bg="bg">
<Title>Donating Things</Title>
</Section>
<Header title="Donating Things" />
<Section>
<Column>
<div>
Expand Down
15 changes: 1 addition & 14 deletions src/routes/index.svelte
Original file line number Diff line number Diff line change
Expand Up @@ -71,22 +71,9 @@
<Card>
<Image src={thing.img} alt={thing.name} />
<Container>
<Subheading caps bold>{thing.name}</Subheading>
<Subheading caps>{thing.name}</Subheading>
<Text small>{thing.category}</Text>
</Container>
<div class="flex flex-col space-y-5" slot="modal">
<Subheading bold>pvd<span class="text-indigo-600">:</span>thing</Subheading>
<Heading bold>{thing.name}</Heading>
<span>
<Text small>Available:</Text>
<Text>Coming Soon!</Text>
</span>
<span>
<Text small>Typical out-of-pocket cost:</Text>
<Text>{thing.price}</Text>
</span>
<Text small>{thing.category}</Text>
</div>
</Card>
{/each}
{/if}
Expand Down
4 changes: 0 additions & 4 deletions src/routes/routes.svelte

This file was deleted.

Binary file added static/long-city.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
3 changes: 2 additions & 1 deletion tailwind.config.js
Original file line number Diff line number Diff line change
Expand Up @@ -33,7 +33,8 @@ module.exports = {
"1/4-screen": "25vw"
},
backgroundImage: theme => ({
"purple-city" : "url('/2.png')"
"purple-city" : "url('/2.png')",
"long-city": "url('/long-city.png')"
})
}
}
Expand Down

0 comments on commit 8e6e387

Please sign in to comment.