diff --git a/src/App.vue b/src/App.vue
index a22fd9fe33b39b0d64e64f76753866445d976f02..2d2969c5e4b80b8034d73742e9cb9dd07b4fae54 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,17 +1,22 @@
<template>
- <div id="app">
- <div id="nav">
+ <div id='app'>
+ <div id='nav'>
<navbar />
+ <img
+ src='./assets/Aktuelles_Hochschule_Deggendorf.jpg'
+ class='img-fluid w-100 h-25 header-img'
+ alt='THD Campus'
+ />
</div>
<router-view />
<thdfooter />
</div>
</template>
-<style lang="scss">
+<style lang='scss'>
// global imports
// import the Bootstrap scss files and the other scss attributs
-@import "./assets/app.scss";
+@import './assets/app.scss';
// global style
@@ -22,6 +27,11 @@
text-align: center;
color: $thdblue;
}
+@include media-breakpoint-down(md) {
+ .header-img {
+ display: none;
+ }
+}
</style>
<script>
@@ -45,7 +55,7 @@ export default {
<!--
<template>
- <img alt="Vue logo" src="./assets/logo.png">
- <HelloWorld msg="Welcome to Your Vue.js App"/>
+ <img alt='Vue logo' src='./assets/logo.png'>
+ <HelloWorld msg='Welcome to Your Vue.js App'/>
</template>
-->
diff --git a/src/assets/Aktuelles_Hochschule_Deggendorf.jpg b/src/assets/Aktuelles_Hochschule_Deggendorf.jpg
new file mode 100644
index 0000000000000000000000000000000000000000..3323ea678b14cf612f90ddf973ece5cf8e8ed907
Binary files /dev/null and b/src/assets/Aktuelles_Hochschule_Deggendorf.jpg differ
diff --git a/src/components/navbar.vue b/src/components/navbar.vue
index c0078ccdc0222ac4b34f488213e6ad6731667a4a..0ab27f9c625a9777c3900ef8198bb240093f3fc7 100644
--- a/src/components/navbar.vue
+++ b/src/components/navbar.vue
@@ -1,59 +1,118 @@
<template>
- <nav class="navbar navbar-expand-lg navbar-dark bg-dark ">
- <div class="container-fluid">
- <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" 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-->
- </li>
- <li class="nav-item">
- <router-link to="/about" class="nav-link">About</router-link>
- </li>
- <li class="nav-item dropdown">
- <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">
- Dropdown
- </a>
- <ul class="dropdown-menu" aria-labelledby="navbarDropdown">
- <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" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
- </li>
+ <nav
+ class="navbar navbar-expand-lg navbar-dark"
+ :class="{ 'fixed-top': isfixedtop }"
+ >
+ <div class="container-fluid">
+ <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" id="navbarSupportedContent">
+ <ul
+ class="navbar-nav nav-pills nav-fill nav-justified me-auto mb-2 mb-lg-0"
+ role="tabpanel"
+ >
+ <li class="nav-item">
+ <router-link to="/" class="nav-link" aria-current="page">
+ Home
+ </router-link>
+ <!--vue link instead of the anchor-->
+ </li>
+ <li class="nav-item">
+ <router-link to="/about" class="nav-link">About</router-link>
+ </li>
+ <li class="nav-item dropdown">
+ <a
+ class="nav-link dropdown-toggle"
+ href="#"
+ id="navbarDropdown"
+ role="button"
+ data-bs-toggle="dropdown"
+ aria-expanded="false"
+ >
+ Dropdown
+ </a>
+ <ul class="dropdown-menu" aria-labelledby="navbarDropdown">
+ <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>
- <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>
+ </li>
+ <li class="nav-item">
+ <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 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 {
+@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);
+.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;
+.navbar {
+ background-color: rgba(0, 0, 0, 0.6);
}
+
+/* @media (max-width: 991.98px) {
+ .fixed-top {
+ position: relative !important;
+ }
+} */
</style>
+<script>
+export default {
+ data () {
+ return {
+ }
+ },
+ methods: {
+ isfixedtop: () => {
+ if (window.innerWidth < 991) { return false } else { return true }
+ }
+ }
+}
+</script>
diff --git a/src/components/thdfooter.vue b/src/components/thdfooter.vue
index 8546669a7c1fc5801574c66c71961700dc4e838d..df3d63954a2f46ee2ce1b22314b657902a15d337 100644
--- a/src/components/thdfooter.vue
+++ b/src/components/thdfooter.vue
@@ -4,9 +4,9 @@
<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>
+ <a href="#">Impressum</a> |
+ <a href="#">Datenschutz</a> |
+ <a href="#">Barrierefreiheit Erklärung</a>
</p>
</div>
</footer>
diff --git a/src/views/About.vue b/src/views/About.vue
index 5461f6856008d8da8dbaf4a21d989c0813bcf15a..1145aaebd5dad774368667c06986680e7d781ee5 100644
--- a/src/views/About.vue
+++ b/src/views/About.vue
@@ -1,7 +1,4 @@
<template>
- <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