From ce896a11262428c9ccc809fb71413eecc6453487 Mon Sep 17 00:00:00 2001 From: Filip Rojek Date: Fri, 15 Dec 2023 15:37:25 +0100 Subject: [PATCH] Moving to vue --- frontend/package-lock.json | 118 ++++++++++++++++++ frontend/package.json | 1 + frontend/src/App.vue | 98 ++++----------- frontend/src/assets/_general.scss | 49 ++++++++ frontend/src/assets/_vars.scss | 8 ++ frontend/src/assets/base.css | 86 ------------- frontend/src/assets/main.css | 35 ------ frontend/src/assets/nav.scss | 11 ++ frontend/src/components/AppHeader.vue | 5 + frontend/src/main.js | 5 +- frontend/src/router/index.js | 11 +- frontend/src/views/BeerView.vue | 41 ++++++ .../views/{HomeView.vue => DefaultView.vue} | 0 frontend/src/views/TestView.vue | 5 + 14 files changed, 273 insertions(+), 200 deletions(-) create mode 100644 frontend/src/assets/_general.scss create mode 100644 frontend/src/assets/_vars.scss delete mode 100644 frontend/src/assets/base.css delete mode 100644 frontend/src/assets/main.css create mode 100644 frontend/src/assets/nav.scss create mode 100644 frontend/src/components/AppHeader.vue create mode 100644 frontend/src/views/BeerView.vue rename frontend/src/views/{HomeView.vue => DefaultView.vue} (100%) create mode 100644 frontend/src/views/TestView.vue diff --git a/frontend/package-lock.json b/frontend/package-lock.json index 6de06d6..7afc2a1 100644 --- a/frontend/package-lock.json +++ b/frontend/package-lock.json @@ -19,6 +19,7 @@ "eslint": "^8.49.0", "eslint-plugin-vue": "^9.17.0", "prettier": "^3.0.3", + "sass": "^1.69.5", "vite": "^5.0.5" } }, @@ -1451,6 +1452,19 @@ "node": ">=4" } }, + "node_modules/anymatch": { + "version": "3.1.3", + "resolved": "https://registry.npmjs.org/anymatch/-/anymatch-3.1.3.tgz", + "integrity": "sha512-KMReFUr0B4t+D+OBkjR3KYqvocp2XaSzO55UcB6mgQMd3KbcE+mWTyvVV7D/zsdEbNnV6acZUutkiHQXvTr1Rw==", + "dev": true, + "dependencies": { + "normalize-path": "^3.0.0", + "picomatch": "^2.0.4" + }, + "engines": { + "node": ">= 8" + } + }, "node_modules/argparse": { "version": "2.0.1", "resolved": "https://registry.npmjs.org/argparse/-/argparse-2.0.1.tgz", @@ -1472,6 +1486,15 @@ "node": ">=0.6" } }, + "node_modules/binary-extensions": { + "version": "2.2.0", + "resolved": "https://registry.npmjs.org/binary-extensions/-/binary-extensions-2.2.0.tgz", + "integrity": "sha512-jDctJ/IVQbZoJykoeHbhXpOlNBqGNcwXJKJog42E5HDPUwQTSdjCHdihjj0DlnheQ7blbT6dHOafNAiS8ooQKA==", + "dev": true, + "engines": { + "node": ">=8" + } + }, "node_modules/boolbase": { "version": "1.0.0", "resolved": "https://registry.npmjs.org/boolbase/-/boolbase-1.0.0.tgz", @@ -1614,6 +1637,45 @@ "node": ">=4" } }, + "node_modules/chokidar": { + "version": "3.5.3", + "resolved": "https://registry.npmjs.org/chokidar/-/chokidar-3.5.3.tgz", + "integrity": "sha512-Dr3sfKRP6oTcjf2JmUmFJfeVMvXBdegxB0iVQ5eb2V10uFJUCAS8OByZdVAyVb8xXNz3GjjTgj9kLWsZTqE6kw==", + "dev": true, + "funding": [ + { + "type": "individual", + "url": "https://paulmillr.com/funding/" + } + ], + "dependencies": { + "anymatch": "~3.1.2", + "braces": "~3.0.2", + "glob-parent": "~5.1.2", + "is-binary-path": "~2.1.0", + "is-glob": "~4.0.1", + "normalize-path": "~3.0.0", + "readdirp": "~3.6.0" + }, + "engines": { + "node": ">= 8.10.0" + }, + "optionalDependencies": { + "fsevents": "~2.3.2" + } + }, + "node_modules/chokidar/node_modules/glob-parent": { + "version": "5.1.2", + "resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-5.1.2.tgz", + "integrity": "sha512-AOIgSQCepiJYwP3ARnGx+5VnTu2HBYdzbGP45eLw1vr3zB3vZLeyed1sC9hnbcOc9/SrMyM5RPQrkGz4aS9Zow==", + "dev": true, + "dependencies": { + "is-glob": "^4.0.1" + }, + "engines": { + "node": ">= 6" + } + }, "node_modules/color-convert": { "version": "1.9.3", "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-1.9.3.tgz", @@ -2424,6 +2486,12 @@ "node": ">= 4" } }, + "node_modules/immutable": { + "version": "4.3.4", + "resolved": "https://registry.npmjs.org/immutable/-/immutable-4.3.4.tgz", + "integrity": "sha512-fsXeu4J4i6WNWSikpI88v/PcVflZz+6kMhUfIwc5SY+poQRPnaf5V7qds6SUyUN3cVxEzuCab7QIoLOQ+DQ1wA==", + "dev": true + }, "node_modules/import-fresh": { "version": "3.3.0", "resolved": "https://registry.npmjs.org/import-fresh/-/import-fresh-3.3.0.tgz", @@ -2465,6 +2533,18 @@ "integrity": "sha512-k/vGaX4/Yla3WzyMCvTQOXYeIHvqOKtnqBduzTHpzpQZzAskKMhZ2K+EnBiSM9zGSoIFeMpXKxa4dYeZIQqewQ==", "dev": true }, + "node_modules/is-binary-path": { + "version": "2.1.0", + "resolved": "https://registry.npmjs.org/is-binary-path/-/is-binary-path-2.1.0.tgz", + "integrity": "sha512-ZMERYes6pDydyuGidse7OsHxtbI7WVeUEozgR/g7rd0xUimYNlvZRE/K2MgZTjWy725IfelLeVcEM97mmtRGXw==", + "dev": true, + "dependencies": { + "binary-extensions": "^2.0.0" + }, + "engines": { + "node": ">=8" + } + }, "node_modules/is-docker": { "version": "3.0.0", "resolved": "https://registry.npmjs.org/is-docker/-/is-docker-3.0.0.tgz", @@ -2798,6 +2878,15 @@ "integrity": "sha512-y10wOWt8yZpqXmOgRo77WaHEmhYQYGNA6y421PKsKYWEK8aW+cqAphborZDhqfyKrbZEN92CN1X2KbafY2s7Yw==", "dev": true }, + "node_modules/normalize-path": { + "version": "3.0.0", + "resolved": "https://registry.npmjs.org/normalize-path/-/normalize-path-3.0.0.tgz", + "integrity": "sha512-6eZs5Ls3WtCisHWp9S2GUy8dqkpGi4BVSz3GaqiE6ezub0512ESztXUwUB6C6IKbQkY2Pnb/mD4WYojCRwcwLA==", + "dev": true, + "engines": { + "node": ">=0.10.0" + } + }, "node_modules/npm-run-path": { "version": "5.1.0", "resolved": "https://registry.npmjs.org/npm-run-path/-/npm-run-path-5.1.0.tgz", @@ -3087,6 +3176,18 @@ } ] }, + "node_modules/readdirp": { + "version": "3.6.0", + "resolved": "https://registry.npmjs.org/readdirp/-/readdirp-3.6.0.tgz", + "integrity": "sha512-hOS089on8RduqdbhvQ5Z37A0ESjsqz6qnRcffsMU3495FuTdqSm+7bhJ29JvIOsBDEEnan5DPu9t3To9VRlMzA==", + "dev": true, + "dependencies": { + "picomatch": "^2.2.1" + }, + "engines": { + "node": ">=8.10.0" + } + }, "node_modules/resolve-from": { "version": "4.0.0", "resolved": "https://registry.npmjs.org/resolve-from/-/resolve-from-4.0.0.tgz", @@ -3277,6 +3378,23 @@ "queue-microtask": "^1.2.2" } }, + "node_modules/sass": { + "version": "1.69.5", + "resolved": "https://registry.npmjs.org/sass/-/sass-1.69.5.tgz", + "integrity": "sha512-qg2+UCJibLr2LCVOt3OlPhr/dqVHWOa9XtZf2OjbLs/T4VPSJ00udtgJxH3neXZm+QqX8B+3cU7RaLqp1iVfcQ==", + "dev": true, + "dependencies": { + "chokidar": ">=3.0.0 <4.0.0", + "immutable": "^4.0.0", + "source-map-js": ">=0.6.2 <2.0.0" + }, + "bin": { + "sass": "sass.js" + }, + "engines": { + "node": ">=14.0.0" + } + }, "node_modules/semver": { "version": "6.3.1", "resolved": "https://registry.npmjs.org/semver/-/semver-6.3.1.tgz", diff --git a/frontend/package.json b/frontend/package.json index e7beba7..2f657c9 100644 --- a/frontend/package.json +++ b/frontend/package.json @@ -22,6 +22,7 @@ "eslint": "^8.49.0", "eslint-plugin-vue": "^9.17.0", "prettier": "^3.0.3", + "sass": "^1.69.5", "vite": "^5.0.5" } } diff --git a/frontend/src/App.vue b/frontend/src/App.vue index e864195..741ac86 100644 --- a/frontend/src/App.vue +++ b/frontend/src/App.vue @@ -1,85 +1,35 @@ - + diff --git a/frontend/src/assets/_general.scss b/frontend/src/assets/_general.scss new file mode 100644 index 0000000..8b0e03b --- /dev/null +++ b/frontend/src/assets/_general.scss @@ -0,0 +1,49 @@ +* { + padding: 0; + margin: 0; + box-sizing: border-box; +} + +body { + font-family: OpenSans Roboto sans-serif; + background-color: var(--blue-space); +} + +a { + text-decoration: none; +} + +.flex { + display: flex; +} + +.f-row { + display: flex; + flex-direction: row; +} + +.f-col { + display: flex; + flex-direction: column; +} + +.f-center { + display: flex; + justify-content: center; + align-items: center; +} + +.main-wrapper { + padding: 0 0.5rem; +} + +.hidden { + display: none; +} + +.abs-center { + position: absolute; + transform: translateX(-50%) translateY(-50%); + left: 50%; + top: 50%; +} diff --git a/frontend/src/assets/_vars.scss b/frontend/src/assets/_vars.scss new file mode 100644 index 0000000..432e652 --- /dev/null +++ b/frontend/src/assets/_vars.scss @@ -0,0 +1,8 @@ +:root { + --black-midnight: #040506; + --blue-space: #0a0d10; + --blue-shadow: #162129; + --blue-oceanic: #23455b; + --gray-steel: #223440; + --red-rustic: #591b12; +} \ No newline at end of file diff --git a/frontend/src/assets/base.css b/frontend/src/assets/base.css deleted file mode 100644 index 8816868..0000000 --- a/frontend/src/assets/base.css +++ /dev/null @@ -1,86 +0,0 @@ -/* color palette from */ -:root { - --vt-c-white: #ffffff; - --vt-c-white-soft: #f8f8f8; - --vt-c-white-mute: #f2f2f2; - - --vt-c-black: #181818; - --vt-c-black-soft: #222222; - --vt-c-black-mute: #282828; - - --vt-c-indigo: #2c3e50; - - --vt-c-divider-light-1: rgba(60, 60, 60, 0.29); - --vt-c-divider-light-2: rgba(60, 60, 60, 0.12); - --vt-c-divider-dark-1: rgba(84, 84, 84, 0.65); - --vt-c-divider-dark-2: rgba(84, 84, 84, 0.48); - - --vt-c-text-light-1: var(--vt-c-indigo); - --vt-c-text-light-2: rgba(60, 60, 60, 0.66); - --vt-c-text-dark-1: var(--vt-c-white); - --vt-c-text-dark-2: rgba(235, 235, 235, 0.64); -} - -/* semantic color variables for this project */ -:root { - --color-background: var(--vt-c-white); - --color-background-soft: var(--vt-c-white-soft); - --color-background-mute: var(--vt-c-white-mute); - - --color-border: var(--vt-c-divider-light-2); - --color-border-hover: var(--vt-c-divider-light-1); - - --color-heading: var(--vt-c-text-light-1); - --color-text: var(--vt-c-text-light-1); - - --section-gap: 160px; -} - -@media (prefers-color-scheme: dark) { - :root { - --color-background: var(--vt-c-black); - --color-background-soft: var(--vt-c-black-soft); - --color-background-mute: var(--vt-c-black-mute); - - --color-border: var(--vt-c-divider-dark-2); - --color-border-hover: var(--vt-c-divider-dark-1); - - --color-heading: var(--vt-c-text-dark-1); - --color-text: var(--vt-c-text-dark-2); - } -} - -*, -*::before, -*::after { - box-sizing: border-box; - margin: 0; - font-weight: normal; -} - -body { - min-height: 100vh; - color: var(--color-text); - background: var(--color-background); - transition: - color 0.5s, - background-color 0.5s; - line-height: 1.6; - font-family: - Inter, - -apple-system, - BlinkMacSystemFont, - 'Segoe UI', - Roboto, - Oxygen, - Ubuntu, - Cantarell, - 'Fira Sans', - 'Droid Sans', - 'Helvetica Neue', - sans-serif; - font-size: 15px; - text-rendering: optimizeLegibility; - -webkit-font-smoothing: antialiased; - -moz-osx-font-smoothing: grayscale; -} diff --git a/frontend/src/assets/main.css b/frontend/src/assets/main.css deleted file mode 100644 index 36fb845..0000000 --- a/frontend/src/assets/main.css +++ /dev/null @@ -1,35 +0,0 @@ -@import './base.css'; - -#app { - max-width: 1280px; - margin: 0 auto; - padding: 2rem; - font-weight: normal; -} - -a, -.green { - text-decoration: none; - color: hsla(160, 100%, 37%, 1); - transition: 0.4s; - padding: 3px; -} - -@media (hover: hover) { - a:hover { - background-color: hsla(160, 100%, 37%, 0.2); - } -} - -@media (min-width: 1024px) { - body { - display: flex; - place-items: center; - } - - #app { - display: grid; - grid-template-columns: 1fr 1fr; - padding: 0 2rem; - } -} diff --git a/frontend/src/assets/nav.scss b/frontend/src/assets/nav.scss new file mode 100644 index 0000000..d7f31c1 --- /dev/null +++ b/frontend/src/assets/nav.scss @@ -0,0 +1,11 @@ +header { + width: 100vw; + padding: 2rem 1rem; + background-color: var(--blue-shadow); +} + +header, +header > * { + display: flex; + justify-content: space-between; +} diff --git a/frontend/src/components/AppHeader.vue b/frontend/src/components/AppHeader.vue new file mode 100644 index 0000000..c304478 --- /dev/null +++ b/frontend/src/components/AppHeader.vue @@ -0,0 +1,5 @@ + + + diff --git a/frontend/src/main.js b/frontend/src/main.js index 5a5dbdb..670e5df 100644 --- a/frontend/src/main.js +++ b/frontend/src/main.js @@ -1,5 +1,6 @@ -import './assets/main.css' - +import './assets/_general.scss' +import './assets/_vars.scss' +import './assets/nav.scss' import { createApp } from 'vue' import App from './App.vue' import router from './router' diff --git a/frontend/src/router/index.js b/frontend/src/router/index.js index a49ae50..3bd35c8 100644 --- a/frontend/src/router/index.js +++ b/frontend/src/router/index.js @@ -1,13 +1,13 @@ import { createRouter, createWebHistory } from 'vue-router' -import HomeView from '../views/HomeView.vue' +import BeerView from '../views/BeerView.vue' const router = createRouter({ history: createWebHistory(import.meta.env.BASE_URL), routes: [ { path: '/', - name: 'home', - component: HomeView + name: 'beer', + component: BeerView }, { path: '/about', @@ -16,6 +16,11 @@ const router = createRouter({ // this generates a separate chunk (About.[hash].js) for this route // which is lazy-loaded when the route is visited. component: () => import('../views/AboutView.vue') + }, + { + path: '/beer', + name: 'beer', + component: BeerView } ] }) diff --git a/frontend/src/views/BeerView.vue b/frontend/src/views/BeerView.vue new file mode 100644 index 0000000..7ec5f96 --- /dev/null +++ b/frontend/src/views/BeerView.vue @@ -0,0 +1,41 @@ + + + \ No newline at end of file diff --git a/frontend/src/views/HomeView.vue b/frontend/src/views/DefaultView.vue similarity index 100% rename from frontend/src/views/HomeView.vue rename to frontend/src/views/DefaultView.vue diff --git a/frontend/src/views/TestView.vue b/frontend/src/views/TestView.vue new file mode 100644 index 0000000..0bcba44 --- /dev/null +++ b/frontend/src/views/TestView.vue @@ -0,0 +1,5 @@ +