From 886652913bff573bf7687d9696e1c4f8106ff309 Mon Sep 17 00:00:00 2001 From: Hazel Date: Sat, 28 Oct 2023 23:59:18 +0200 Subject: [PATCH 01/12] Side-by-side design --- package.json | 7 +- pnpm-lock.yaml | 29 ++++++++ src/App.vue | 103 ++++++++++++++++++++++++----- src/components/brand/Logo.vue | 8 +-- src/components/input/TextInput.vue | 39 +++++++++++ src/components/nav/Account.vue | 5 +- src/components/nav/LogoLink.vue | 16 ----- src/components/nav/Navbar.vue | 9 ++- src/components/nav/NavbarLink.vue | 20 +++++- src/main.ts | 6 +- src/routes/Discover.vue | 11 +++ src/routes/Home.vue | 6 +- src/routes/Library.vue | 11 +++ src/style.css | 1 - 14 files changed, 216 insertions(+), 55 deletions(-) create mode 100644 src/components/input/TextInput.vue delete mode 100644 src/components/nav/LogoLink.vue create mode 100644 src/routes/Discover.vue create mode 100644 src/routes/Library.vue diff --git a/package.json b/package.json index 8e4a0e9..c3ebe50 100644 --- a/package.json +++ b/package.json @@ -9,10 +9,11 @@ "preview": "vite preview" }, "dependencies": { - "vue": "^3.3.4", - "vue-router": "^4.2.5", "url": "^0.11.3", - "vue-meta": "^3.0.0-alpha.7" + "vue": "^3.3.4", + "vue-feather": "^2.0.0", + "vue-meta": "^3.0.0-alpha.7", + "vue-router": "^4.2.5" }, "devDependencies": { "@vitejs/plugin-vue": "^4.2.3", diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 08ff863..ab2ff9e 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -11,6 +11,9 @@ dependencies: vue: specifier: ^3.3.4 version: 3.3.4 + vue-feather: + specifier: ^2.0.0 + version: 2.0.0(feather-icons@4.29.1)(vue@3.3.4) vue-meta: specifier: ^3.0.0-alpha.7 version: 3.0.0-alpha.10(vue@3.3.4) @@ -447,6 +450,15 @@ packages: fsevents: 2.3.3 dev: true + /classnames@2.3.2: + resolution: {integrity: sha512-CSbhY4cFEJRe6/GQzIk5qXZ4Jeg5pcsP7b5peFSDpffpe1cqjASH/n9UTjBwOp6XpMSTwQ8Za2K5V02ueA7Tmw==} + dev: false + + /core-js@3.33.1: + resolution: {integrity: sha512-qVSq3s+d4+GsqN0teRCJtM6tdEEXyWxjzbhVrCHmBS5ZTM0FS2MOS0D13dUXAWDUN6a+lHI/N1hF9Ytz6iLl9Q==} + requiresBuild: true + dev: false + /csstype@3.1.2: resolution: {integrity: sha512-I7K1Uu0MBPzaFKg4nI5Q7Vs2t+3gWWW648spaF+Rg7pI9ds18Ugn+lvg4SHczUdKlHI5LWBXyqfS8+DufyBsgQ==} @@ -487,6 +499,13 @@ packages: /estree-walker@2.0.2: resolution: {integrity: sha512-Rfkk/Mp/DL7JVje3u18FxFujQlTNR2q6QfMSMB7AvCBx91NGj/ba3kCfza0f6dVDbw7YlRf/nDrn7pQrCCyQ/w==} + /feather-icons@4.29.1: + resolution: {integrity: sha512-P1we61haGTds6lKWe6CCVPsNULb8tHr1y6S9gXEpU+lNR1Ja7GdV0A1l2hTNmzXv+0Stix/3YMWMAn7n1Qtd6A==} + dependencies: + classnames: 2.3.2 + core-js: 3.33.1 + dev: false + /fill-range@7.0.1: resolution: {integrity: sha512-qOo9F+dMUmC2Lcb4BbVvnKJxTPjCm+RRpe4gDuGrzkL7mEVl/djYSu2OdQ2Pa302N4oqkSg9ir6jaLWJ2USVpQ==} engines: {node: '>=8'} @@ -740,6 +759,16 @@ packages: fsevents: 2.3.3 dev: true + /vue-feather@2.0.0(feather-icons@4.29.1)(vue@3.3.4): + resolution: {integrity: sha512-GBvxJWu2ycGTpB8duYWnc5S/TwWPPb2G5Ft2NbkwK1vZkUDUOTYqIb4Nh1HOL6A37Isfrd0Guun0lesS97PfxA==} + peerDependencies: + feather-icons: ^4.28.0 + vue: ^3.0.0 + dependencies: + feather-icons: 4.29.1 + vue: 3.3.4 + dev: false + /vue-meta@3.0.0-alpha.10(vue@3.3.4): resolution: {integrity: sha512-rYeIGkhm1gKBcReEkPHiV6LV2Y6BZTMGTkGw1mQIZTxfFcVJL0srLZsL1zAmLeTGxMrlDYylMQEVSYRkDnwz3A==} peerDependencies: diff --git a/src/App.vue b/src/App.vue index 09a065b..df22ec5 100644 --- a/src/App.vue +++ b/src/App.vue @@ -2,9 +2,13 @@ import Navbar from '@/components/nav/Navbar.vue'; import NavbarLink from '@/components/nav/NavbarLink.vue'; import Account from '@/components/nav/Account.vue'; - import LogoLink from '@/components/nav/LogoLink.vue'; - import { useRoute } from 'vue-router'; + import Logo from '@/components/brand/Logo.vue'; + import { RouterLink, RouterView, useRoute } from 'vue-router'; + import TextInput from './components/input/TextInput.vue'; + import { ref } from 'vue'; const route = useRoute(); + + const search = ref(''); \ No newline at end of file diff --git a/src/components/brand/Logo.vue b/src/components/brand/Logo.vue index ab477fc..840a5cd 100644 --- a/src/components/brand/Logo.vue +++ b/src/components/brand/Logo.vue @@ -14,18 +14,18 @@ display: flex; flex-direction: row; align-items: center; - gap: 1em; + gap: .33em; color: var(--light); text-decoration: none; } .vector { - width: 3em; - height: 3em; + width: 1.5em; + height: 1.5em; } .text { - font-size: 2em; + font-size: 1em; font-weight: 700; } \ No newline at end of file diff --git a/src/components/input/TextInput.vue b/src/components/input/TextInput.vue new file mode 100644 index 0000000..5792817 --- /dev/null +++ b/src/components/input/TextInput.vue @@ -0,0 +1,39 @@ + + + + + \ No newline at end of file diff --git a/src/components/nav/Account.vue b/src/components/nav/Account.vue index a7e1778..ae4f1ce 100644 --- a/src/components/nav/Account.vue +++ b/src/components/nav/Account.vue @@ -11,10 +11,11 @@ \ No newline at end of file diff --git a/src/components/nav/Navbar.vue b/src/components/nav/Navbar.vue index 75e8edf..7392f56 100644 --- a/src/components/nav/Navbar.vue +++ b/src/components/nav/Navbar.vue @@ -10,10 +10,9 @@ \ No newline at end of file diff --git a/src/components/nav/NavbarLink.vue b/src/components/nav/NavbarLink.vue index b4a8235..21c6b06 100644 --- a/src/components/nav/NavbarLink.vue +++ b/src/components/nav/NavbarLink.vue @@ -1,21 +1,35 @@ \ No newline at end of file diff --git a/src/main.ts b/src/main.ts index a9f6a94..035e33d 100644 --- a/src/main.ts +++ b/src/main.ts @@ -4,11 +4,15 @@ import App from './App.vue'; import { createMetaManager } from 'vue-meta'; import { createRouter, createWebHistory } from 'vue-router'; import HomeVue from './routes/Home.vue'; +import DiscoverVue from './routes/Discover.vue'; +import LibraryVue from './routes/Library.vue'; const router = createRouter({ history: createWebHistory(), routes: [ - { path: '/', component: HomeVue } + { path: '/', component: HomeVue }, + { path: '/discover', component: DiscoverVue }, + { path: '/library', component: LibraryVue } ] }) diff --git a/src/routes/Discover.vue b/src/routes/Discover.vue new file mode 100644 index 0000000..6578b78 --- /dev/null +++ b/src/routes/Discover.vue @@ -0,0 +1,11 @@ + + + + + \ No newline at end of file diff --git a/src/routes/Home.vue b/src/routes/Home.vue index 30cbc90..ef7e7e8 100644 --- a/src/routes/Home.vue +++ b/src/routes/Home.vue @@ -23,8 +23,8 @@ \ No newline at end of file diff --git a/src/routes/Library.vue b/src/routes/Library.vue new file mode 100644 index 0000000..6578b78 --- /dev/null +++ b/src/routes/Library.vue @@ -0,0 +1,11 @@ + + + + + \ No newline at end of file diff --git a/src/style.css b/src/style.css index b4b2e3d..4474eec 100644 --- a/src/style.css +++ b/src/style.css @@ -8,7 +8,6 @@ html, body { width: 100%; - height: 100%; margin: 0; background-color: var(--dark); From f32b79fa4f34569ec4303bff2a75f2a76b6dfc1e Mon Sep 17 00:00:00 2001 From: Hazel Hofmann Date: Thu, 19 Oct 2023 10:42:27 +0200 Subject: [PATCH 02/12] Demo store items --- src/components/store/StoreItem.vue | 46 +++++++++++++++++++++++++++++- src/routes/Home.vue | 8 +++++- 2 files changed, 52 insertions(+), 2 deletions(-) diff --git a/src/components/store/StoreItem.vue b/src/components/store/StoreItem.vue index 85a57d7..cc11806 100644 --- a/src/components/store/StoreItem.vue +++ b/src/components/store/StoreItem.vue @@ -3,7 +3,15 @@ @@ -11,6 +19,25 @@ .item { border-radius: 1em; background-color: var(--dark2); + position: relative; + overflow: hidden; + color: #fff; + text-decoration: none; + + .thumbnail { + img { + width: 100%; + height: 100%; + object-fit: cover; + object-position: center; + transform-origin: center; + transition: transform .2s ease; + } + } + + &:hover .thumbnail img { + transform: scale(1.05); + } } .big { @@ -22,4 +49,21 @@ grid-column: span 1; grid-row: span 1; } + + .thumbnail { + position: absolute; + inset: 0; + z-index: 1; + background-color: #000; + } + + .details { + position: absolute; + inset: 0; + top: auto; + z-index: 2; + background-color: var(--dark2); + padding: 1rem; + font-size: 1.5em; + } \ No newline at end of file diff --git a/src/routes/Home.vue b/src/routes/Home.vue index ef7e7e8..a864ef4 100644 --- a/src/routes/Home.vue +++ b/src/routes/Home.vue @@ -3,6 +3,12 @@ import StoreGrid from '@/components/store/StoreGrid.vue'; import StoreItem from '@/components/store/StoreItem.vue'; const prelaunch = import.meta.env.VITE_PRELAUNCH == 'true'; + + const demoItem = { + slug: 'celesteia', + title: 'Celesteia', + thumbnail: 'https://celesteia.com/images/thumbnail.jpg' + }; - \ No newline at end of file + From bd5456bdb63d2e99dc1d3bc68234844e84172f2d Mon Sep 17 00:00:00 2001 From: Hazel Date: Fri, 3 Nov 2023 19:09:15 +0100 Subject: [PATCH 10/12] Finalized (for now) --- package.json | 2 +- pnpm-lock.yaml | 40 ++++++++---------------------- src/App.vue | 28 +++++++++++++++------ src/components/nav/NavbarLink.vue | 6 +---- src/components/store/StoreItem.vue | 5 +--- src/main.ts | 1 + src/routes/Home.vue | 10 ++++---- 7 files changed, 41 insertions(+), 51 deletions(-) diff --git a/package.json b/package.json index 75f49ef..f7bbfc1 100644 --- a/package.json +++ b/package.json @@ -12,9 +12,9 @@ }, "dependencies": { "@theopensource-company/feature-flags": "^0.4.5", + "lucide-vue-next": "^0.292.0", "url": "^0.11.3", "vue": "^3.3.7", - "vue-feather": "^2.0.0", "vue-meta": "3.0.0-alpha.10", "vue-router": "^4.2.5", "zod": "^3.22.4" diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index a0df4bb..befcb8b 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -8,15 +8,15 @@ dependencies: '@theopensource-company/feature-flags': specifier: ^0.4.5 version: 0.4.5(typescript@5.2.2) + lucide-vue-next: + specifier: ^0.292.0 + version: 0.292.0(vue@3.3.7) url: specifier: ^0.11.3 version: 0.11.3 vue: specifier: ^3.3.7 version: 3.3.7(typescript@5.2.2) - vue-feather: - specifier: ^2.0.0 - version: 2.0.0(feather-icons@4.29.1)(vue@3.3.7) vue-meta: specifier: 3.0.0-alpha.10 version: 3.0.0-alpha.10(vue@3.3.7) @@ -833,10 +833,6 @@ packages: fsevents: 2.3.3 dev: true - /classnames@2.3.2: - resolution: {integrity: sha512-CSbhY4cFEJRe6/GQzIk5qXZ4Jeg5pcsP7b5peFSDpffpe1cqjASH/n9UTjBwOp6XpMSTwQ8Za2K5V02ueA7Tmw==} - dev: false - /color-convert@2.0.1: resolution: {integrity: sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==} engines: {node: '>=7.0.0'} @@ -856,11 +852,6 @@ packages: resolution: {integrity: sha512-/Srv4dswyQNBfohGpz9o6Yb3Gz3SrUDqBH5rTuhGR7ahtlbYKnVxw2bCFMRljaA7EXHaXZ8wsHdodFvbkhKmqg==} dev: true - /core-js@3.33.2: - resolution: {integrity: sha512-XeBzWI6QL3nJQiHmdzbAOiMYqjrb7hwU7A39Qhvd/POSa/t9E1AeZyEZx3fNvp/vtM8zXwhoL0FsiS0hD0pruQ==} - requiresBuild: true - dev: false - /cross-spawn@7.0.3: resolution: {integrity: sha512-iRDPJKUPVEND7dHPO8rkbOnPpyDygcDFtWjpeWNCgy8WP2rXcxXL8TskReQl6OrB2G7+UJrags1q15Fudc7G6w==} engines: {node: '>= 8'} @@ -1220,13 +1211,6 @@ packages: reusify: 1.0.4 dev: true - /feather-icons@4.29.1: - resolution: {integrity: sha512-P1we61haGTds6lKWe6CCVPsNULb8tHr1y6S9gXEpU+lNR1Ja7GdV0A1l2hTNmzXv+0Stix/3YMWMAn7n1Qtd6A==} - dependencies: - classnames: 2.3.2 - core-js: 3.33.2 - dev: false - /file-entry-cache@6.0.1: resolution: {integrity: sha512-7Gps/XWymbLk2QLYK4NzpMOrYjMhdIxXuIvy2QBsLE6ljuodKvdkWs/cpyJJ3CVIVpH0Oi1Hvg1ovbMzLdFBBg==} engines: {node: ^10.12.0 || >=12.0.0} @@ -1562,6 +1546,14 @@ packages: yallist: 4.0.0 dev: true + /lucide-vue-next@0.292.0(vue@3.3.7): + resolution: {integrity: sha512-tVnEPLJvB9n+REfJsgJsG/zxGM0yamFs6WkOjuAvMG1ZlMS27soiKekuWk/+G2uLF4jqhEegQHVmcAJBlnJpeg==} + peerDependencies: + vue: '>=3.0.1' + dependencies: + vue: 3.3.7(typescript@5.2.2) + dev: false + /magic-string@0.30.5: resolution: {integrity: sha512-7xlpfBaQaP/T6Vh8MO/EqXSW5En6INHEvEXQiuff7Gku0PWjU3uf6w/j9o7O+SpB5fOAkrI5HeoNgwjEO0pFsA==} engines: {node: '>=12'} @@ -2127,16 +2119,6 @@ packages: - supports-color dev: true - /vue-feather@2.0.0(feather-icons@4.29.1)(vue@3.3.7): - resolution: {integrity: sha512-GBvxJWu2ycGTpB8duYWnc5S/TwWPPb2G5Ft2NbkwK1vZkUDUOTYqIb4Nh1HOL6A37Isfrd0Guun0lesS97PfxA==} - peerDependencies: - feather-icons: ^4.28.0 - vue: ^3.0.0 - dependencies: - feather-icons: 4.29.1 - vue: 3.3.7(typescript@5.2.2) - dev: false - /vue-meta@3.0.0-alpha.10(vue@3.3.7): resolution: {integrity: sha512-rYeIGkhm1gKBcReEkPHiV6LV2Y6BZTMGTkGw1mQIZTxfFcVJL0srLZsL1zAmLeTGxMrlDYylMQEVSYRkDnwz3A==} peerDependencies: diff --git a/src/App.vue b/src/App.vue index 8bac60f..f68c84f 100644 --- a/src/App.vue +++ b/src/App.vue @@ -6,6 +6,8 @@ import { RouterLink, RouterView, useRoute } from 'vue-router'; import TextInput from './components/input/TextInput.vue'; import { ref } from 'vue'; + import { Home, Compass, Archive } from 'lucide-vue-next'; + const route = useRoute(); const search = ref(''); @@ -24,11 +26,18 @@ - Home - Discover - Library + + + Home + + + + Discover + + + + Library +
@@ -51,13 +60,15 @@ align-items: start; gap: 3rem; margin: 2rem auto; + padding: 0 2rem; max-width: 170vh; aside { grid-column: 1; grid-row: span 2; - grid-template-rows: subgrid; - display: grid; + display: flex; + flex-direction: column; + gap: 2rem; font-size: 18px; @@ -101,11 +112,14 @@ position: sticky; top: 2rem; + z-index: 1001; } } .logo-link { + display: flex; font-size: 3rem; + height: max-content; text-decoration: none; } diff --git a/src/components/nav/NavbarLink.vue b/src/components/nav/NavbarLink.vue index 1a061be..db28990 100644 --- a/src/components/nav/NavbarLink.vue +++ b/src/components/nav/NavbarLink.vue @@ -1,18 +1,14 @@ diff --git a/src/components/store/StoreItem.vue b/src/components/store/StoreItem.vue index c0ab047..96931a0 100644 --- a/src/components/store/StoreItem.vue +++ b/src/components/store/StoreItem.vue @@ -16,10 +16,7 @@ >
diff --git a/src/main.ts b/src/main.ts index 8db66f7..21163a2 100644 --- a/src/main.ts +++ b/src/main.ts @@ -13,6 +13,7 @@ const router = createRouter({ { path: '/', component: HomeVue }, { path: '/discover', component: DiscoverVue }, { path: '/library', component: LibraryVue }, + { path: '/product/:id', component: () => { console.log("To-do"); } }, ], }); diff --git a/src/routes/Home.vue b/src/routes/Home.vue index 2d21a04..e4ca710 100644 --- a/src/routes/Home.vue +++ b/src/routes/Home.vue @@ -18,11 +18,11 @@
- - - - - + + + + +
From 78f8aa3a870860a589f0ea3f9044c92f1a2d11c8 Mon Sep 17 00:00:00 2001 From: Hazel Date: Fri, 3 Nov 2023 19:11:13 +0100 Subject: [PATCH 11/12] Final lint fix --- src/main.ts | 7 ++++++- 1 file changed, 6 insertions(+), 1 deletion(-) diff --git a/src/main.ts b/src/main.ts index 21163a2..7569cdc 100644 --- a/src/main.ts +++ b/src/main.ts @@ -13,7 +13,12 @@ const router = createRouter({ { path: '/', component: HomeVue }, { path: '/discover', component: DiscoverVue }, { path: '/library', component: LibraryVue }, - { path: '/product/:id', component: () => { console.log("To-do"); } }, + { + path: '/product/:id', + component: () => { + console.log('To-do'); + }, + }, ], }); From 5c858dda276c95ff79b85520602b2cdc648ff381 Mon Sep 17 00:00:00 2001 From: Hazel Date: Fri, 3 Nov 2023 19:21:29 +0100 Subject: [PATCH 12/12] Port over feature flags to discover and library pages --- src/routes/Discover.vue | 6 +++--- src/routes/Library.vue | 6 +++--- 2 files changed, 6 insertions(+), 6 deletions(-) diff --git a/src/routes/Discover.vue b/src/routes/Discover.vue index ebb7a01..b3e91e4 100644 --- a/src/routes/Discover.vue +++ b/src/routes/Discover.vue @@ -1,10 +1,10 @@ diff --git a/src/routes/Library.vue b/src/routes/Library.vue index ebb7a01..b3e91e4 100644 --- a/src/routes/Library.vue +++ b/src/routes/Library.vue @@ -1,10 +1,10 @@