Commit 5baed88f authored by Johan Tanderup Degn's avatar Johan Tanderup Degn
Browse files

Merge branch 'feature/main-structure' into 'develop'

Feature/main structure

See merge request !6
parents c5bce481 7873eccb
Pipeline #48566 passed with stages
in 2 minutes and 1 second
This diff is collapsed.
<template>
<div class="full-width fixed-to-top" id="header">
<div id="logo">
<h1>Studerende.dk <span class="tiny pig-colored">v. Den Flyvende Gris</span></h1>
<div id="header">
<router-link to="/">
<div id="logo">
<h1>Studerende.dk</h1>
<span id="version-tag">v. Den Flyvende Gris</span>
</div>
</router-link>
<div id="navbar">
<Navbar/>
</div>
<div id="notification-widget">
<NotificationWidget/>
</div>
<Navbar/>
<NotificationWidget/>
</div>
</template>
......@@ -21,29 +28,53 @@
</script>
<style scoped lang="scss">
.full-width {
width: 100%;
#version-tag {
color: $light-theme-color;
font-weight: bold;
float: right;
margin-top: -5px;
}
.fixed-to-top {
#header {
display: flex;
justify-content: space-between;
align-items: center;
min-height: 80px;
width: 100%;
top: 0;
}
.tiny {
font-size: 50%;
}
padding-left: $default-margin;
padding-right: $default-margin;
.pig-colored {
color: #f36fab;
}
z-index: 1;
background-color: $theme-color;
#header {
border-bottom: 2px solid lightgray;
}
#logo {
display: inline-block;
color: #2c3e50;
padding-right: 2.5%;
color: $lighter-theme-color;
left: $default-margin;
h1 {
margin: 0;
}
}
#navbar {
display: inline-block;
width: 100%;
height: 1em;
}
#notification-widget {
display: inline-block;
right: $default-margin;
cursor: pointer;
}
</style>
\ No newline at end of file
<template>
<div id="nav">
<router-link to="/">Forside</router-link>|
<router-link to="/about">Alle kurser</router-link>|
<router-link to="/about">Mail</router-link>|
<router-link to="/about">Kalender</router-link>|
<router-link to="/about">Eksamensportal</router-link>|
<a href="https://dropud.nu">Pretty STADS</a>|
<router-link to="/about">Indstillinger</router-link>
<router-link to="/"><div class="link-container">Forside</div></router-link>
<router-link to="/about"><div class="link-container">Alle kurser</div></router-link>
<router-link to="/about"><div class="link-container">Mail</div></router-link>
<router-link to="/about"><div class="link-container">Kalender</div></router-link>
<router-link to="/about"><div class="link-container">Eksamensportal</div></router-link>
<a href="https://dropud.nu"><div class="link-container">Pretty STADS</div></a>
<router-link to="/about"><div class="link-container">Indstillinger</div></router-link>
</div>
</template>
......@@ -17,16 +17,36 @@
</script>
<style scoped lang="scss">
#nav {
.link-container {
display: inline-block;
height: 3em;
padding-left: 25px;
padding-right: 25px;
}
#nav {
color: $lightest-theme-color;
a {
font-weight: bold;
padding-left: 25px;
padding-right: 25px;
padding-bottom: 10px;
margin-left: 5px;
margin-right: 5px;
&.router-link-exact-active {
color: #f36fab;
border-bottom: 2px solid
}
&:hover {
color: inherit;
}
&:visited {
color: inherit;
}
&:link {
color: $lightest-theme-color;
}
}
}
......
......@@ -2,7 +2,7 @@
<div id="widget" @click="isOpen=!isOpen">
<img alt="Notification Bell" src="@/assets/bell.png"> <span id="number"> 3 </span>
<div v-if="isOpen" id="notifications">
<h1>Notifications</h1>
<h1>Notifikationer</h1>
<p>You are awesome!</p>
<p>The result are in: Nim <i>is</i> better than Rust.</p>
<p>Henrik Korsgaard: <i>The exam is cancelled. Everyone get's 12!</i></p>
......@@ -23,18 +23,17 @@
<style scoped lang="scss">
#widget {
display: inline-block;
padding-left: 2.5%;
width: 2em;
height: 2em;
img {
height: 2em;
}
#number {
position: relative;
bottom: 1.25em;
left: -1.25em;
left: 0.8em;
top: -2.5em;
font-weight: bold;
color: white;
......@@ -48,15 +47,18 @@
#notifications {
position: absolute;
z-index: 1;
width: 20em;
transform: translate(-45%);
transform: translate(-90%);
background-color: $white-bg-color;
border: 2px solid lightgray;
border-radius: 10px;
h1 {
color: $dark-theme-color;
}
p {
text-align: left;
......
$darker-theme-color: #031945;
$dark-theme-color: #003B46;
$theme-color: #07575B;
$light-theme-color: #66A5AD;
$lighter-theme-color: #C4DFE6;
$lightest-theme-color: #ecf5f7;
$text-color: #272b30;
$bg-color: #e7ede8;
$white-bg-color: #fbfbfb;
\ No newline at end of file
$white-bg-color: #fbfbfb;
$default-margin: 40px;
\ No newline at end of file
......@@ -77,7 +77,7 @@ export default {
</script>
<style scoped lang="scss">
$gap: 40px;
$gap: $default-margin;
#grid {
display: flex;
......
Supports Markdown
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