From 6adea5cd8f927ef12859cea6553af76c9f080ed0 Mon Sep 17 00:00:00 2001
From: viktor <viktog2210@gmail.com>
Date: Mon, 15 Apr 2024 20:07:26 +0200
Subject: [PATCH] feat: Adding bootstrap
---
package-lock.json | 29 ++++++++
package.json | 1 +
src/App.vue | 6 +-
src/assets/base.css | 86 ------------------------
src/assets/main.css | 35 ----------
src/components/BaseComponents/Footer.vue | 10 ++-
src/components/BaseComponents/Menu.vue | 42 +++++++++++-
src/main.ts | 3 +
src/views/BasePageView.vue | 2 -
src/views/HomeView.vue | 2 -
src/views/NotFoundView.vue | 4 +-
vite.config.ts | 2 -
12 files changed, 89 insertions(+), 133 deletions(-)
diff --git a/package-lock.json b/package-lock.json
index b79dc99..b87054b 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -8,6 +8,7 @@
"name": "frontend",
"version": "0.0.0",
"dependencies": {
+ "bootstrap": "^5.3.3",
"pinia": "^2.1.7",
"vue": "^3.4.21",
"vue-router": "^4.3.0"
@@ -1357,6 +1358,16 @@
"integrity": "sha512-j7P6Rgr3mmtdkeDGTe0E/aYyWEWVtc5yFXtHCRHs28/jptDEWfaVOc5T7cblqy1XKPPfCxJc/8DwQ5YgLOZOVQ==",
"dev": true
},
+ "node_modules/@popperjs/core": {
+ "version": "2.11.8",
+ "resolved": "https://registry.npmjs.org/@popperjs/core/-/core-2.11.8.tgz",
+ "integrity": "sha512-P1st0aksCrn9sGZhp8GMYwBnQsbvAWsZAX44oXNNvLHGqAOcoVxmjZiohstwQ7SqKnbR47akdNi+uleWD8+g6A==",
+ "peer": true,
+ "funding": {
+ "type": "opencollective",
+ "url": "https://opencollective.com/popperjs"
+ }
+ },
"node_modules/@rollup/pluginutils": {
"version": "5.1.0",
"resolved": "https://registry.npmjs.org/@rollup/pluginutils/-/pluginutils-5.1.0.tgz",
@@ -2757,6 +2768,24 @@
"integrity": "sha512-JZOSA7Mo9sNGB8+UjSgzdLtokWAky1zbztM3WRLCbZ70/3cTANmQmOdR7y2g+J0e2WXywy1yS468tY+IruqEww==",
"dev": true
},
+ "node_modules/bootstrap": {
+ "version": "5.3.3",
+ "resolved": "https://registry.npmjs.org/bootstrap/-/bootstrap-5.3.3.tgz",
+ "integrity": "sha512-8HLCdWgyoMguSO9o+aH+iuZ+aht+mzW0u3HIMzVu7Srrpv7EBBxTnrFlSCskwdY1+EOFQSm7uMJhNQHkdPcmjg==",
+ "funding": [
+ {
+ "type": "github",
+ "url": "https://github.com/sponsors/twbs"
+ },
+ {
+ "type": "opencollective",
+ "url": "https://opencollective.com/bootstrap"
+ }
+ ],
+ "peerDependencies": {
+ "@popperjs/core": "^2.11.8"
+ }
+ },
"node_modules/brace-expansion": {
"version": "2.0.1",
"resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-2.0.1.tgz",
diff --git a/package.json b/package.json
index 502438a..8aa8451 100644
--- a/package.json
+++ b/package.json
@@ -16,6 +16,7 @@
"format": "prettier --write src/"
},
"dependencies": {
+ "bootstrap": "^5.3.3",
"pinia": "^2.1.7",
"vue": "^3.4.21",
"vue-router": "^4.3.0"
diff --git a/src/App.vue b/src/App.vue
index a78fb6f..461e3d5 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -3,5 +3,7 @@ import { RouterView } from 'vue-router'
</script>
<template>
- <RouterView />
-</template>
+ <main>
+ <RouterView />
+ </main>
+</template>
\ No newline at end of file
diff --git a/src/assets/base.css b/src/assets/base.css
index 8816868..e69de29 100644
--- a/src/assets/base.css
+++ b/src/assets/base.css
@@ -1,86 +0,0 @@
-/* color palette from <https://github.com/vuejs/theme> */
-: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/src/assets/main.css b/src/assets/main.css
index 36fb845..e69de29 100644
--- a/src/assets/main.css
+++ b/src/assets/main.css
@@ -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/src/components/BaseComponents/Footer.vue b/src/components/BaseComponents/Footer.vue
index 9095328..4df3ae5 100644
--- a/src/components/BaseComponents/Footer.vue
+++ b/src/components/BaseComponents/Footer.vue
@@ -1,3 +1,9 @@
<template>
- Hallo
-</template>
\ No newline at end of file
+ <div>
+ <footer class="text-center text-white bg-danger-subtle" style="width: 100%">
+ <div class="text-center p-3">
+ © 2024 Copyright: Anders Høvik, Andreas Svendsrud, Henrik Dybdal, Henrik Sandok, Jens Aanestad, Victor Kaste, Viktor Grevskott
+ </div>
+ </footer>
+ </div>
+</template>
diff --git a/src/components/BaseComponents/Menu.vue b/src/components/BaseComponents/Menu.vue
index 9095328..ff63410 100644
--- a/src/components/BaseComponents/Menu.vue
+++ b/src/components/BaseComponents/Menu.vue
@@ -1,3 +1,43 @@
<template>
- Hallo
+ <nav class="navbar navbar-expand-lg bg-danger-subtle">
+ <div class="container-fluid">
+ <a class="navbar-brand" href="#">Navbar</a>
+ <button class="navbar-toggler" type="button" data-bs-toggle="collapse"
+ data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false"
+ aria-label="Toggle navigation">
+ <span class="navbar-toggler-icon"></span>
+ </button>
+ <div class="collapse navbar-collapse" id="navbarSupportedContent">
+ <ul class="navbar-nav me-auto mb-2 mb-lg-0">
+ <li class="nav-item">
+ <a class="nav-link active" aria-current="page" href="#">Home</a>
+ </li>
+ <li class="nav-item">
+ <a class="nav-link" href="#">Link</a>
+ </li>
+ <li class="nav-item dropdown">
+ <a class="nav-link dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown"
+ aria-expanded="false">
+ Dropdown
+ </a>
+ <ul class="dropdown-menu">
+ <li><a class="dropdown-item" href="#">Action</a></li>
+ <li><a class="dropdown-item" href="#">Another action</a></li>
+ <li>
+ <hr class="dropdown-divider">
+ </li>
+ <li><a class="dropdown-item" href="#">Something else here</a></li>
+ </ul>
+ </li>
+ <li class="nav-item">
+ <a class="nav-link disabled" aria-disabled="true">Disabled</a>
+ </li>
+ </ul>
+ <form class="d-flex" role="search">
+ <input class="form-control me-2" type="search" placeholder="Search" aria-label="Search">
+ <button class="btn btn-outline-success" type="submit">Search</button>
+ </form>
+ </div>
+ </div>
+ </nav>
</template>
\ No newline at end of file
diff --git a/src/main.ts b/src/main.ts
index 5dcad83..8b82528 100644
--- a/src/main.ts
+++ b/src/main.ts
@@ -6,6 +6,9 @@ import { createPinia } from 'pinia'
import App from './App.vue'
import router from './router'
+import 'bootstrap/dist/css/bootstrap.min.css';
+import 'bootstrap';
+
const app = createApp(App)
app.use(createPinia())
diff --git a/src/views/BasePageView.vue b/src/views/BasePageView.vue
index 562e8a5..e22b163 100644
--- a/src/views/BasePageView.vue
+++ b/src/views/BasePageView.vue
@@ -5,11 +5,9 @@ import Menu from '@/components/BaseComponents/Menu.vue'
</script>
<template>
- <main>
<Menu></Menu>
<div>
<RouterView />
</div>
<Footer></Footer>
- </main>
</template>
\ No newline at end of file
diff --git a/src/views/HomeView.vue b/src/views/HomeView.vue
index e30daea..58542e7 100644
--- a/src/views/HomeView.vue
+++ b/src/views/HomeView.vue
@@ -3,7 +3,5 @@ import TheWelcome from '../components/TheWelcome.vue'
</script>
<template>
- <main>
Hallo
- </main>
</template>
diff --git a/src/views/NotFoundView.vue b/src/views/NotFoundView.vue
index 9095328..946391e 100644
--- a/src/views/NotFoundView.vue
+++ b/src/views/NotFoundView.vue
@@ -1,3 +1,5 @@
<template>
- Hallo
+ <div>
+ <h1 id="errorMessage">404 - Not Found</h1>
+ </div>
</template>
\ No newline at end of file
diff --git a/vite.config.ts b/vite.config.ts
index 01f6c2c..36c6187 100644
--- a/vite.config.ts
+++ b/vite.config.ts
@@ -3,14 +3,12 @@ import { fileURLToPath, URL } from 'node:url'
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import vueJsx from '@vitejs/plugin-vue-jsx'
-import VueDevTools from 'vite-plugin-vue-devtools'
// https://vitejs.dev/config/
export default defineConfig({
plugins: [
vue(),
vueJsx(),
- VueDevTools(),
],
resolve: {
alias: {
--
GitLab