diff --git a/public/index.html b/public/index.html
index a4ffc8189aabd11b59ddfcb50f1a25dae7c40073..e82f7c898f4e77ed168f156258dad0bbaf2ea448 100644
--- a/public/index.html
+++ b/public/index.html
@@ -1,5 +1,5 @@
<!DOCTYPE html>
-<html lang="">
+<html lang="de">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
@@ -15,8 +15,3 @@
<!-- built files will be auto injected -->
</body>
</html>
-
-<script>
- // import bootstrap javaScripts allows dynamic components like Dropdowns to work
- import '../node_modules/bootstrap/dist/js/bootstrap'
-</script>
diff --git a/src/App.vue b/src/App.vue
index c2497b37cd080f04805a8c50f1b19372a1387330..a22fd9fe33b39b0d64e64f76753866445d976f02 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,38 +1,44 @@
<template>
<div id="app">
<div id="nav">
- <navbar/>
+ <navbar />
</div>
<router-view />
+ <thdfooter />
</div>
</template>
<style lang="scss">
+// global imports
// import the Bootstrap scss files and the other scss attributs
-@import './assets/app.scss';
-</style>
+@import "./assets/app.scss";
+
+// global style
-<style>
#app {
- font-family: Avenir, Helvetica, Arial, sans-serif;
+ font-family: Saira, Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
- color: #2c3e50;
+ color: $thdblue;
}
</style>
<script>
-// import bootstrap javaScripts allows dynamic components like Dropdowns to work
-import '../node_modules/bootstrap/dist/js/bootstrap'
+// global imports
-// import the navigationbar component
+// import bootstrap javaScripts allows dynamic components like Dropdowns to work
+import '../node_modules/bootstrap/dist/js/bootstrap.min.js'
+// import the js code ofthe navigationbar component
import navbar from './components/navbar.vue'
+import thdfooter from './components/thdfooter.vue'
+// global script
export default {
name: 'App',
components: {
- navbar
+ navbar,
+ thdfooter
}
}
</script>
diff --git a/src/assets/app.scss b/src/assets/app.scss
index c440b2388c93e4782d1b7352c5f5a0b7c555ab96..73684f0a627dd2848aad8b6bdfd3ad435bb0a160 100644
--- a/src/assets/app.scss
+++ b/src/assets/app.scss
@@ -8,7 +8,12 @@
// $theme-colors: map-remove($theme-colors, "primary", "danger");
// Then add additional custom code here
-$thdblue: #1a4273; $thddarkgrey: #6f6f6e; $thdgrey: #a8a8a8; $thdlightgrey: #dadada; $green: rgb(91, 227, 0); // for tests
+$thdblue: #1a4273;
+$thddarkgrey: #6f6f6e;
+$thdgrey: #a8a8a8;
+$thdlightgrey: #dadada;
+$green: rgb(91, 227, 0); // for tests
+
$theme-colors: (
"primary": $thdblue,
"danger": rgb(231, 61, 85)
@@ -17,4 +22,4 @@ $theme-colors: (
//$body-bg: $green;
/* finally, import Bootstrap to set the changes! */
-@import "../../node_modules/bootstrap-scss/bootstrap";
+@import "../../node_modules/bootstrap-scss/bootstrap.scss";
diff --git a/src/assets/logos/public_src_assets_THD.png b/src/assets/logos/public_src_assets_THD.png
new file mode 100644
index 0000000000000000000000000000000000000000..5072e87149ba0c56d35dc9284642020e72b3caae
Binary files /dev/null and b/src/assets/logos/public_src_assets_THD.png differ
diff --git a/src/assets/public_src_assets_THD.png b/src/assets/public_src_assets_THD.png
new file mode 100644
index 0000000000000000000000000000000000000000..c63b04406ed687af35d38a76460e40425b9b41df
Binary files /dev/null and b/src/assets/public_src_assets_THD.png differ
diff --git a/src/components/navbar.vue b/src/components/navbar.vue
index f082c572e32dee583081d1a502749f697d4bce5f..c0078ccdc0222ac4b34f488213e6ad6731667a4a 100644
--- a/src/components/navbar.vue
+++ b/src/components/navbar.vue
@@ -1,11 +1,13 @@
<template>
<nav class="navbar navbar-expand-lg navbar-dark bg-dark ">
<div class="container-fluid">
- <a class="navbar-brand" href="#">Navbar</a>
+ <a class="navbar-brand" href="/de">
+ <img src="../assets/logos/public_src_assets_THD.png" class="img-brand" alt="Responsive image">
+ </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 d-flex" id="navbarSupportedContent">
+ <div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav me-auto mb-2 mb-lg-0">
<li class="nav-item">
<router-link to="/" class="nav-link active" aria-current="page">Home</router-link> <!--vue link instead of the anchor-->
@@ -28,11 +30,30 @@
<a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
</li>
</ul>
- <form class="d-flex ml-auto">
- <input class="form-control me-2" type="search" placeholder="Search" aria-label="Search">
- <button class="btn btn-outline-success ml-1" type="submit">Search</button>
- </form>
+ <form class="d-flex ml-auto">
+ <input class="form-control me-2 d-flex" type="search" placeholder="Search" aria-label="Search">
+ <button class="btn btn-outline-success mx-1" type="submit">Search</button>
+ </form>
</div>
</div>
</nav>
</template>
+
+<style>
+@media (max-width: 1300px)
+{.img-brand {
+ transform: scale(0.7);
+ margin-left: -30px;
+ }
+}
+.img-brand
+{
+ max-width: 380px !important;
+ display: block;
+ max-width: 100%;
+ transform: scale(0.9);
+}
+.navbar{
+ background-color: rgba(47, 47, 47, 0.8) transparent;
+}
+</style>
diff --git a/src/components/thdfooter.vue b/src/components/thdfooter.vue
new file mode 100644
index 0000000000000000000000000000000000000000..8546669a7c1fc5801574c66c71961700dc4e838d
--- /dev/null
+++ b/src/components/thdfooter.vue
@@ -0,0 +1,60 @@
+<template>
+ <footer class="footer mt-auto">
+ <div class="container">
+ <p class="text-center">
+ © 2020 |
+ <a>Technische Hochschule Deggendorf</a> |
+ <a href="/de/Impressum">Impressum</a> |
+ <a href="/de/Datenschutz">Datenschutz</a> |
+ <a href="/de/Barrierefreiheit">Barrierefreiheit Erklärung</a>
+ </p>
+ </div>
+ </footer>
+</template>
+
+<style lang="scss">
+
+footer {
+ width: 100%;
+ background-color: var(--gray-dark);
+ padding: 10px 0px 5px 0px;
+}
+footer p {
+ font-size: 13px;
+ color: #ccc;
+ padding-bottom: 0px;
+ margin: 4px 0 0 0;
+}
+a,
+a:link,
+a:focus,
+a:active,
+a:visited {
+ outline: 0;
+}
+footer a {
+ color: white;
+}
+
+@media (min-width: 1200px) {
+ .container {
+ max-width: 1140px;
+ }
+}
+@media (min-width: 992px) {
+ .container {
+ max-width: 960px;
+ }
+}
+@media (min-width: 768px) {
+ .container {
+ max-width: 720px;
+ }
+}
+@media (min-width: 576px) {
+ .container {
+ max-width: 540px;
+ }
+}
+
+</style>
diff --git a/src/views/About.vue b/src/views/About.vue
index aae386539dc0f21985e3d9c395d84090a790542a..5461f6856008d8da8dbaf4a21d989c0813bcf15a 100644
--- a/src/views/About.vue
+++ b/src/views/About.vue
@@ -1,3 +1,40 @@
<template>
- About
+ <div>
+ <img src="../assets/public_src_assets_THD.png" class="img-fluid w-100" alt="THD Campus" />
+ </div>
+ <h1>THD Mensa Information</h1>
+ <p>
+ here you find Information from mensa
+ </p>
+ <div class="container text-center">
+ <table class="table table-bordered table-success">
+ <header>Today's Menu</header>
+ <tr>
+ <th>Name</th>
+ <th>Category</th>
+ <th>Price</th>
+ <th>Notes</th>
+ </tr>
+ <tr>
+ <td>Dish 1</td>
+ <td>Category 1</td>
+ <td>x Euro</td>
+ <td>later</td>
+ </tr>
+ <tr>
+ <td>Dish 2</td>
+ <td>Category 2</td>
+ <td>x Euro</td>
+ <td>later</td>
+ </tr>
+ </table>
+ </div>
</template>
+<style>
+table,
+th,
+td {
+ border: 1px solid black;
+ border-collapse: collapse;
+}
+</style>