From aec7ecf64f3c53bd7bdf891b3a2759b9551c15c4 Mon Sep 17 00:00:00 2001 From: Dillon Fagan Date: Fri, 4 Aug 2023 22:42:07 -0400 Subject: [PATCH 01/18] Update web app manifest --- static/manifest.json | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/static/manifest.json b/static/manifest.json index 44883b3..b46838c 100644 --- a/static/manifest.json +++ b/static/manifest.json @@ -1,5 +1,5 @@ { - "name": "Providence Library of Things", + "name": "PVD Things Catalog", "short_name": "PVD Things", "icons": [ { @@ -23,8 +23,8 @@ "type": "image/png" } ], - "theme_color": "#fdd835", + "theme_color": "#A5B4FC", "background_color": "#A5B4FC", - "display": "minimal-ui", + "display": "standalone", "start_url": "/" } \ No newline at end of file From de7371be72fa3c98ff40562ee05232da1dad1c00 Mon Sep 17 00:00:00 2001 From: Dillon Fagan Date: Fri, 4 Aug 2023 22:42:22 -0400 Subject: [PATCH 02/18] Update SEO description --- src/routes/+layout.svelte | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte index 07d7c73..560f643 100644 --- a/src/routes/+layout.svelte +++ b/src/routes/+layout.svelte @@ -6,7 +6,7 @@ Date: Fri, 4 Aug 2023 22:50:18 -0400 Subject: [PATCH 03/18] Update package.json --- package.json | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/package.json b/package.json index 767cc39..843092c 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { - "name": "things-app", - "version": "0.10.0", + "name": "things-catalog-app", + "version": "0.10.2", "private": true, "scripts": { "dev": "vite dev", From c3667fa0d51e06758ae81f2500df4c604f43a000 Mon Sep 17 00:00:00 2001 From: Dillon Fagan Date: Fri, 4 Aug 2023 22:58:42 -0400 Subject: [PATCH 04/18] Allow maskable icons --- static/manifest.json | 16 ++++++++++------ 1 file changed, 10 insertions(+), 6 deletions(-) diff --git a/static/manifest.json b/static/manifest.json index b46838c..f06a24a 100644 --- a/static/manifest.json +++ b/static/manifest.json @@ -5,22 +5,26 @@ { "src": "/icon-192x192.png", "sizes": "192x192", - "type": "image/png" + "type": "image/png", + "purpose": "any" }, { "src": "/icon-256x256.png", - "sizes": "512x512", - "type": "image/png" + "sizes": "256x256", + "type": "image/png", + "purpose": "any" }, { "src": "/icon-384x384.png", - "sizes": "512x512", - "type": "image/png" + "sizes": "384x384", + "type": "image/png", + "purpose": "maskable" }, { "src": "/icon-512x512.png", "sizes": "512x512", - "type": "image/png" + "type": "image/png", + "purpose": "maskable" } ], "theme_color": "#A5B4FC", From 834fe1c66cfff67cc45dce37c1cc617ffa0c843c Mon Sep 17 00:00:00 2001 From: Dillon Fagan Date: Sat, 5 Aug 2023 11:38:19 -0400 Subject: [PATCH 05/18] Show 'How to Borrow' modal when tapping on thing --- package-lock.json | 86 +++++++++++++++++++++-- package.json | 1 + src/lib/things/BorrowModal.svelte | 22 ++++++ src/lib/things/Thing.svelte | 107 ++++++++++++++++------------- src/lib/things/borrowModalStore.ts | 10 +++ src/routes/+page.svelte | 2 + tailwind.config.cjs | 23 ++++++- 7 files changed, 198 insertions(+), 53 deletions(-) create mode 100644 src/lib/things/BorrowModal.svelte create mode 100644 src/lib/things/borrowModalStore.ts diff --git a/package-lock.json b/package-lock.json index bc0adbd..cc7d28d 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,12 +1,12 @@ { - "name": "things-app", - "version": "0.0.1", + "name": "things-catalog-app", + "version": "0.10.2", "lockfileVersion": 2, "requires": true, "packages": { "": { - "name": "things-app", - "version": "0.0.1", + "name": "things-catalog-app", + "version": "0.10.2", "devDependencies": { "@sveltejs/adapter-auto": "next", "@sveltejs/adapter-netlify": "^1.0.0-next.84", @@ -14,6 +14,7 @@ "@typescript-eslint/eslint-plugin": "^5.45.0", "@typescript-eslint/parser": "^5.45.0", "autoprefixer": "^10.4.13", + "daisyui": "^3.5.1", "eslint": "^8.28.0", "eslint-config-prettier": "^8.5.0", "eslint-plugin-svelte3": "^4.0.0", @@ -846,6 +847,12 @@ "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==", "dev": true }, + "node_modules/colord": { + "version": "2.9.3", + "resolved": "https://registry.npmjs.org/colord/-/colord-2.9.3.tgz", + "integrity": "sha512-jeC1axXpnb0/2nn/Y1LPuLdgXBLH7aDcHu4KEKfqw3CUhX7ZpfBSlPKyqXE6btIgEzfWtrX3/tyBCaCvXvMkOw==", + "dev": true + }, "node_modules/concat-map": { "version": "0.0.1", "resolved": "https://registry.npmjs.org/concat-map/-/concat-map-0.0.1.tgz", @@ -875,6 +882,16 @@ "node": ">= 8" } }, + "node_modules/css-selector-tokenizer": { + "version": "0.8.0", + "resolved": "https://registry.npmjs.org/css-selector-tokenizer/-/css-selector-tokenizer-0.8.0.tgz", + "integrity": "sha512-Jd6Ig3/pe62/qe5SBPTN8h8LeUg/pT4lLgtavPf7updwwHpvFzxvOQBHYj2LZDMjUnBzgvIUSjRcf6oT5HzHFg==", + "dev": true, + "dependencies": { + "cssesc": "^3.0.0", + "fastparse": "^1.1.2" + } + }, "node_modules/cssesc": { "version": "3.0.0", "resolved": "https://registry.npmjs.org/cssesc/-/cssesc-3.0.0.tgz", @@ -887,6 +904,26 @@ "node": ">=4" } }, + "node_modules/daisyui": { + "version": "3.5.1", + "resolved": "https://registry.npmjs.org/daisyui/-/daisyui-3.5.1.tgz", + "integrity": "sha512-7GG+9QXnr2qQMCqnyFU8TxpaOYJigXiEtmzoivmiiZZHvxqIwYdaMAkgivqTVxEgy3Hot3m1suzZjmt1zUrvmA==", + "dev": true, + "dependencies": { + "colord": "^2.9", + "css-selector-tokenizer": "^0.8", + "postcss": "^8", + "postcss-js": "^4", + "tailwindcss": "^3" + }, + "engines": { + "node": ">=16.9.0" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/daisyui" + } + }, "node_modules/debug": { "version": "4.3.4", "resolved": "https://registry.npmjs.org/debug/-/debug-4.3.4.tgz", @@ -1658,6 +1695,12 @@ "integrity": "sha512-DCXu6Ifhqcks7TZKY3Hxp3y6qphY5SJZmrWMDrKcERSOXWQdMhU9Ig/PYrzyw/ul9jOIyh0N4M0tbC5hodg8dw==", "dev": true }, + "node_modules/fastparse": { + "version": "1.1.2", + "resolved": "https://registry.npmjs.org/fastparse/-/fastparse-1.1.2.tgz", + "integrity": "sha512-483XLLxTVIwWK3QTrMGRqUfUpoOs/0hbQrl2oz4J0pAcm3A3bu84wxTFqGqkJzewCLdME38xJLJAxBABfQT8sQ==", + "dev": true + }, "node_modules/fastq": { "version": "1.13.0", "resolved": "https://registry.npmjs.org/fastq/-/fastq-1.13.0.tgz", @@ -3918,6 +3961,12 @@ "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==", "dev": true }, + "colord": { + "version": "2.9.3", + "resolved": "https://registry.npmjs.org/colord/-/colord-2.9.3.tgz", + "integrity": "sha512-jeC1axXpnb0/2nn/Y1LPuLdgXBLH7aDcHu4KEKfqw3CUhX7ZpfBSlPKyqXE6btIgEzfWtrX3/tyBCaCvXvMkOw==", + "dev": true + }, "concat-map": { "version": "0.0.1", "resolved": "https://registry.npmjs.org/concat-map/-/concat-map-0.0.1.tgz", @@ -3941,12 +3990,35 @@ "which": "^2.0.1" } }, + "css-selector-tokenizer": { + "version": "0.8.0", + "resolved": "https://registry.npmjs.org/css-selector-tokenizer/-/css-selector-tokenizer-0.8.0.tgz", + "integrity": "sha512-Jd6Ig3/pe62/qe5SBPTN8h8LeUg/pT4lLgtavPf7updwwHpvFzxvOQBHYj2LZDMjUnBzgvIUSjRcf6oT5HzHFg==", + "dev": true, + "requires": { + "cssesc": "^3.0.0", + "fastparse": "^1.1.2" + } + }, "cssesc": { "version": "3.0.0", "resolved": "https://registry.npmjs.org/cssesc/-/cssesc-3.0.0.tgz", "integrity": "sha512-/Tb/JcjK111nNScGob5MNtsntNM1aCNUDipB/TkwZFhyDrrE47SOx/18wF2bbjgc3ZzCSKW1T5nt5EbFoAz/Vg==", "dev": true }, + "daisyui": { + "version": "3.5.1", + "resolved": "https://registry.npmjs.org/daisyui/-/daisyui-3.5.1.tgz", + "integrity": "sha512-7GG+9QXnr2qQMCqnyFU8TxpaOYJigXiEtmzoivmiiZZHvxqIwYdaMAkgivqTVxEgy3Hot3m1suzZjmt1zUrvmA==", + "dev": true, + "requires": { + "colord": "^2.9", + "css-selector-tokenizer": "^0.8", + "postcss": "^8", + "postcss-js": "^4", + "tailwindcss": "^3" + } + }, "debug": { "version": "4.3.4", "resolved": "https://registry.npmjs.org/debug/-/debug-4.3.4.tgz", @@ -4432,6 +4504,12 @@ "integrity": "sha512-DCXu6Ifhqcks7TZKY3Hxp3y6qphY5SJZmrWMDrKcERSOXWQdMhU9Ig/PYrzyw/ul9jOIyh0N4M0tbC5hodg8dw==", "dev": true }, + "fastparse": { + "version": "1.1.2", + "resolved": "https://registry.npmjs.org/fastparse/-/fastparse-1.1.2.tgz", + "integrity": "sha512-483XLLxTVIwWK3QTrMGRqUfUpoOs/0hbQrl2oz4J0pAcm3A3bu84wxTFqGqkJzewCLdME38xJLJAxBABfQT8sQ==", + "dev": true + }, "fastq": { "version": "1.13.0", "resolved": "https://registry.npmjs.org/fastq/-/fastq-1.13.0.tgz", diff --git a/package.json b/package.json index 843092c..4788702 100644 --- a/package.json +++ b/package.json @@ -18,6 +18,7 @@ "@typescript-eslint/eslint-plugin": "^5.45.0", "@typescript-eslint/parser": "^5.45.0", "autoprefixer": "^10.4.13", + "daisyui": "^3.5.1", "eslint": "^8.28.0", "eslint-config-prettier": "^8.5.0", "eslint-plugin-svelte3": "^4.0.0", diff --git a/src/lib/things/BorrowModal.svelte b/src/lib/things/BorrowModal.svelte new file mode 100644 index 0000000..a28ca41 --- /dev/null +++ b/src/lib/things/BorrowModal.svelte @@ -0,0 +1,22 @@ + + + +
+ +

How to Borrow

+
    +
  1. 1. Purchase a PVD Things membership and pay annual dues.
    2. +
  2. 2. Visit us at 12 Library Court in Providence.
    3. +
+
+ +
+
+ \ No newline at end of file diff --git a/src/lib/things/Thing.svelte b/src/lib/things/Thing.svelte index bbb177f..3d10fe9 100644 --- a/src/lib/things/Thing.svelte +++ b/src/lib/things/Thing.svelte @@ -1,61 +1,74 @@ -
-
- {thing.name} -
-
- {getShortName(language === 'en' ? thing.name : thing.spanishName ?? thing.name)} -
-
-
-
- {#if hasZeroStock} - {isMobile ? $t('Donate') : $t('Click to Donate')} - {:else if noneAvailable} - {isMobile ? `${thing.available} / ${thing.stock}` : $t('Unavailable')} - {:else} - {isMobile - ? `${thing.available} / ${thing.stock}` - : `${thing.available} / ${thing.stock} ${$t('Available')}`} - {/if} -
-
\ No newline at end of file +
+
+ {thing.name} +
+
+ {getShortName(language === 'en' ? thing.name : thing.spanishName ?? thing.name)} +
+
+
+
+ {#if hasZeroStock} + {isMobile ? $t('Donate') : $t('Click to Donate')} + {:else if noneAvailable} + {isMobile ? `${thing.available} / ${thing.stock}` : $t('Unavailable')} + {:else} + {isMobile + ? `${thing.available} / ${thing.stock}` + : `${thing.available} / ${thing.stock} ${$t('Available')}`} + {/if} +
+
diff --git a/src/lib/things/borrowModalStore.ts b/src/lib/things/borrowModalStore.ts new file mode 100644 index 0000000..38829ff --- /dev/null +++ b/src/lib/things/borrowModalStore.ts @@ -0,0 +1,10 @@ +import { writable } from 'svelte/store'; + +export const showBorrowModal = writable(false); + +showBorrowModal.subscribe((value) => { + if (value) { + const dialog = document.getElementById('borrow-modal') as HTMLDialogElement; + dialog.showModal(); + } +}); \ No newline at end of file diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte index ad50aee..ef27fd9 100644 --- a/src/routes/+page.svelte +++ b/src/routes/+page.svelte @@ -10,6 +10,7 @@ import EyeIcon from "$lib/icons/eye.svg"; import { t } from "$lib/language/translate"; import { goto } from '$app/navigation'; + import BorrowModal from "$lib/things/BorrowModal.svelte"; export let data; @@ -48,6 +49,7 @@ {#if !data} {:else} +
diff --git a/tailwind.config.cjs b/tailwind.config.cjs index 6a95a43..64cdbb1 100644 --- a/tailwind.config.cjs +++ b/tailwind.config.cjs @@ -23,10 +23,29 @@ module.exports = { "1/4-screen": "25vw" }, backgroundImage: theme => ({ - "purple-city" : "url('/2.png')", + "purple-city": "url('/2.png')", "long-city": "url('/long-city.png')" }) }, }, - plugins: [], + plugins: [require("daisyui")], + daisyui: { + themes: [ + { + pvdthingsTheme: { + "primary": "#facc15", + "secondary": "#d8e1ff", + "accent": "#a78bfa", + "neutral": "#2c2537", + "base-100": "#d8e1ff", + "info": "#2563eb", + "success": "#54de97", + "warning": "#fb923c", + "error": "#df2926", + + "--btn-text-case": "none", + } + } + ] + }, } From 765c6ebd562022e9c7bc65f774fdfc1afee623da Mon Sep 17 00:00:00 2001 From: Dillon Fagan Date: Sat, 5 Aug 2023 14:55:48 -0400 Subject: [PATCH 06/18] Style modal to match design language --- src/lib/icons/x-mark.svg | 3 +++ src/lib/things/BorrowModal.svelte | 24 ++++++++++++++++++------ tailwind.config.cjs | 1 + 3 files changed, 22 insertions(+), 6 deletions(-) create mode 100644 src/lib/icons/x-mark.svg diff --git a/src/lib/icons/x-mark.svg b/src/lib/icons/x-mark.svg new file mode 100644 index 0000000..457d8e6 --- /dev/null +++ b/src/lib/icons/x-mark.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/lib/things/BorrowModal.svelte b/src/lib/things/BorrowModal.svelte index a28ca41..85ffdb5 100644 --- a/src/lib/things/BorrowModal.svelte +++ b/src/lib/things/BorrowModal.svelte @@ -1,22 +1,34 @@
- +

How to Borrow

  1. 1. Purchase a PVD Things membership and pay annual dues.
    2. -
  2. 2. Visit us at 12 Library Court in Providence.
    3. +
  3. 2. Visit us at 12 Library Court in Providence.
-
- +
\ No newline at end of file diff --git a/tailwind.config.cjs b/tailwind.config.cjs index 64cdbb1..f87f8be 100644 --- a/tailwind.config.cjs +++ b/tailwind.config.cjs @@ -44,6 +44,7 @@ module.exports = { "error": "#df2926", "--btn-text-case": "none", + "--rounded-box": "6px" } } ] From 13cbf560bdfe2d034a29e3269b0a288ea0e83c0f Mon Sep 17 00:00:00 2001 From: Dillon Fagan Date: Sat, 5 Aug 2023 15:01:39 -0400 Subject: [PATCH 07/18] Move showModal logic into component --- src/lib/things/BorrowModal.svelte | 11 ++++++++++- src/lib/things/borrowModalStore.ts | 9 +-------- 2 files changed, 11 insertions(+), 9 deletions(-) diff --git a/src/lib/things/BorrowModal.svelte b/src/lib/things/BorrowModal.svelte index 85ffdb5..c7d2946 100644 --- a/src/lib/things/BorrowModal.svelte +++ b/src/lib/things/BorrowModal.svelte @@ -3,6 +3,13 @@ import { ButtonTheme } from "$lib/foundation/button"; import { showBorrowModal } from "./borrowModalStore"; import CloseIcon from "$lib/icons/x-mark.svg"; + import { onDestroy } from "svelte"; + + let dialog: HTMLDialogElement; + + const unsubscribe = showBorrowModal.subscribe((value) => { + if (value) dialog.showModal(); + }); const closeModal = () => showBorrowModal.set(false); @@ -10,9 +17,11 @@ closeModal(); window.open("https://www.pvdthings.coop/membership", '_blank').focus(); }; + + onDestroy(unsubscribe); - +
-

How to Borrow

+

{$t('How to Borrow')}

    -
  1. 1. Purchase a PVD Things membership and pay annual dues.
    2. -
  2. 2. Visit us at 12 Library Court in Providence.
    3. +
  3. 1. {$t('How to Borrow.Step1')}
    4. +
  4. 2. {$t('How to Borrow.Step2')}
From 4fe99dc2b6e9010e2f7cf50a6a781d2635e6c0bd Mon Sep 17 00:00:00 2001 From: Dillon Fagan Date: Sat, 5 Aug 2023 15:15:25 -0400 Subject: [PATCH 10/18] Increase thickness of close icon --- src/lib/icons/x-mark.svg | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/lib/icons/x-mark.svg b/src/lib/icons/x-mark.svg index 457d8e6..3644342 100644 --- a/src/lib/icons/x-mark.svg +++ b/src/lib/icons/x-mark.svg @@ -1,3 +1,3 @@ - + From 466414ca95bcea8949d81511bbb67fde6c2936e9 Mon Sep 17 00:00:00 2001 From: Dillon Fagan Date: Sat, 5 Aug 2023 17:33:56 -0400 Subject: [PATCH 11/18] Spread modal buttons apart --- src/lib/things/BorrowModal.svelte | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/lib/things/BorrowModal.svelte b/src/lib/things/BorrowModal.svelte index 89cffff..c1f0daf 100644 --- a/src/lib/things/BorrowModal.svelte +++ b/src/lib/things/BorrowModal.svelte @@ -32,7 +32,7 @@
  • 1. {$t('How to Borrow.Step1')}
  • 2. {$t('How to Borrow.Step2')}
    • -
    +
    From ba80fe6e2471e136d9ad2cc0a41394ebc0a92d60 Mon Sep 17 00:00:00 2001 From: Dillon Fagan Date: Sat, 5 Aug 2023 17:42:32 -0400 Subject: [PATCH 12/18] Add open hours to modal --- src/lib/things/BorrowModal.svelte | 5 +++++ 1 file changed, 5 insertions(+) diff --git a/src/lib/things/BorrowModal.svelte b/src/lib/things/BorrowModal.svelte index c1f0daf..76f7579 100644 --- a/src/lib/things/BorrowModal.svelte +++ b/src/lib/things/BorrowModal.svelte @@ -32,6 +32,11 @@
  • 1. {$t('How to Borrow.Step1')}
  • 2. {$t('How to Borrow.Step2')}
    • +

    Hours

    +
      +
    • Wednesday 6PM - 8PM
      • +
    • Saturday 11AM - 2PM
      • +