Skip to content
Snippets Groups Projects
Commit 5149509b authored by Omar Elkadi's avatar Omar Elkadi
Browse files

themed navbar and added logo/ added thd footer + themed it

parent fc6cbf5f
No related branches found
No related tags found
No related merge requests found
Hide whitespace changes
Inline Side-by-side
public/index.html
+ 1
− 6
View file @ 5149509b
<!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>
src/App.vue
+ 16
− 10
View file @ 5149509b
<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>
......
src/assets/app.scss
+ 7
− 2
View file @ 5149509b
......@@ -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";
src/assets/logos/public_src_assets_THD.png 0 → 100644
+ 0
− 0
View file @ 5149509b
src/assets/logos/public_src_assets_THD.png

28.3 KiB

src/assets/public_src_assets_THD.png 0 → 100644
+ 0
− 0
View file @ 5149509b
src/assets/public_src_assets_THD.png

57.7 KiB

src/components/navbar.vue
+ 27
− 6
View file @ 5149509b
<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>
src/components/thdfooter.vue 0 → 100644
+ 60
− 0
View file @ 5149509b
<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>
src/views/About.vue
+ 38
− 1
View file @ 5149509b
<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>
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment