Skip to content
GitLab
Commit 67eb7e04 authored by Lasse Overgaard Møldrup's avatar Lasse Overgaard Møldrup
Browse files

Make header responsive

parent 81a7d94b
Expand all Hide whitespace changes
Inline Side-by-side
website/studerende-dk/package-lock.json
View file @ 67eb7e04
This diff is collapsed.
website/studerende-dk/public/index.html
View file @ 67eb7e04
......@@ -4,7 +4,14 @@
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<link rel="icon" href="<%= BASE_URL %>favicon.ico">
<!-- favicon for different devices -->
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
<link rel="manifest" href="/site.webmanifest">
<title><%= htmlWebpackPlugin.options.title %></title>
</head>
<body>
......
website/studerende-dk/src/App.vue
View file @ 67eb7e04
......@@ -34,7 +34,7 @@
background-color: $lightest-green-theme-color;
}
div {
* {
box-sizing: border-box;
}
......@@ -59,8 +59,8 @@
}
#site {
display:flex;
flex-direction:column;
display: flex;
flex-direction: column;
height: 100%;
}
......
website/studerende-dk/src/components/Header.vue
View file @ 67eb7e04
<template>
<!-- favicon for different devices -->
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
<link rel="manifest" href="/site.webmanifest">
<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>
<header>
<div id="navbar">
<Navbar/>
<div id="hamburger-menu">
<label for="hamburger">&#9776;</label>
<input type="checkbox" id="hamburger" v-model="hamburgerActive"/>
</div>
<router-link to="/">
<div id="logo">
<h1>Studerende.dk</h1>
<span id="version-tag">v. Den Flyvende Gris</span>
</div>
</router-link>
<div id="nav">
<Navbar/>
</div>
<div id="notification-widget">
<NotificationWidget/>
</div>
</div>
<div id="notification-widget">
<NotificationWidget/>
<div id="hamburger-content" v-show="hamburgerActive">
<Navbar/>
</div>
</div>
</header>
</template>
<script>
import Navbar from '@/components/Navbar';
import NotificationWidget from '@/components/NotificationWidget';
export default {
name: 'Header',
data() {
return {
hamburgerActive: false
}
},
components: {
Navbar,
NotificationWidget
......@@ -42,45 +54,81 @@
margin-top: -5px;
}
#header {
header {
width: 100%;
padding: 15px $default-margin;
z-index: 1;
background-color: $theme-color;
border-bottom: 2px solid lightgray;
}
#navbar {
display: flex;
justify-content: space-between;
align-items: center;
}
min-height: 80px;
width: 100%;
top: 0;
#hamburger-menu {
color: $lightest-theme-color;
padding-left: $default-margin;
padding-right: $default-margin;
label {
cursor: pointer;
font-size: 50px;
}
z-index: 1;
@include no-select;
}
background-color: $theme-color;
#hamburger {
display: none;
border-bottom: 2px solid lightgray;
&:not(:checked) ~ #hamburger-content {
display: none;
}
}
#hamburger-content {
padding-top: 15px;
}
#logo {
display: inline-block;
color: $lighter-theme-color;
left: $default-margin;
margin-right: $default-margin;
h1 {
margin: 0;
line-height: 1em;
margin-bottom: 2px;
}
}
#navbar {
display: inline-block;
#nav {
display: none;
width: 100%;
height: 1em;
margin-right: $default-margin;
max-width: 55em;
}
#notification-widget {
display: inline-block;
right: $default-margin;
cursor: pointer;
}
@media only screen and (min-width: $mobile-width-cutoff) {
#hamburger-menu {
display: none;
}
#nav {
display: inline-block;
}
#hamburger-content {
display: none;
}
}
</style>
\ No newline at end of file
website/studerende-dk/src/components/Navbar.vue
View file @ 67eb7e04
<template>
<div id="nav">
<div class="nav">
<router-link to="/"><div class="link-container">Forside</div></router-link>
<router-link to="/courses"><div class="link-container">Alle kurser</div></router-link>
<router-link to="/email"><div class="link-container">Mail</div></router-link>
<router-link to="/calendar"><div class="link-container">Kalender</div></router-link>
<router-link to="/examportal"><div class="link-container">Eksamensportal</div></router-link>
<a href="https://dropud.nu"><div class="link-container">Pretty STADS</div></a>
<router-link to="/settings"><div class="link-container">Indstillinger</div></router-link>
</div>
</template>
......@@ -18,20 +17,23 @@
<style scoped lang="scss">
.link-container {
display: inline-block;
height: 3em;
padding-left: 25px;
padding-right: 25px;
width: 100%;
margin-top: -2px;
text-align: start;
}
#nav {
.nav {
display: flex;
flex-direction: column;
color: $lightest-theme-color;
a {
font-weight: bold;
padding-bottom: 10px;
margin-left: 5px;
margin-right: 5px;
margin: 5px;
width: 140px;
text-decoration: none;
&.router-link-exact-active {
border-bottom: 2px solid
......@@ -50,4 +52,20 @@
}
}
}
@media only screen and (min-width: $mobile-width-cutoff) {
.link-container {
display: inline-block;
text-align: center;
}
.nav {
flex-direction: row;
a {
flex-grow: 1;
width: auto;
}
}
}
</style>
\ No newline at end of file
website/studerende-dk/src/router/index.js
View file @ 67eb7e04
......@@ -26,11 +26,6 @@ const routes = [
path: '/examportal',
name: 'Examportal',
component: () => import('../views/Examportal.vue')
},
{
path: '/settings',
name: 'Settings',
component: () => import('../views/Settings.vue')
}
]
......
website/studerende-dk/src/scss/_mixins.scss
View file @ 67eb7e04
......@@ -15,4 +15,15 @@
height: 1.2em;
background: linear-gradient(to right, rgba($bg-color, 0), $bg-color 70%);
}
}
// https://stackoverflow.com/questions/826782/how-to-disable-text-selection-highlighting
@mixin no-select {
-webkit-touch-callout: none; /* iOS Safari */
-webkit-user-select: none; /* Safari */
-khtml-user-select: none; /* Konqueror HTML */
-moz-user-select: none; /* Old versions of Firefox */
-ms-user-select: none; /* Internet Explorer/Edge */
user-select: none; /* Non-prefixed version, currently
supported by Chrome, Edge, Opera and Firefox */
}
\ No newline at end of file
website/studerende-dk/src/scss/_variables.scss
View file @ 67eb7e04
......@@ -13,4 +13,6 @@ $text-color: #272b30;
$bg-color: #e7ede8;
$white-bg-color: #fbfbfb;
$default-margin: 40px;
\ No newline at end of file
$default-margin: 40px;
$mobile-width-cutoff: 992px;
\ No newline at end of file
website/studerende-dk/src/views/Settings.vue deleted 100644 → 0
View file @ 81a7d94b
<template>
<div class="settings">
<h1>This is the settings page</h1>
</div>
</template>
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