Skip to content
GitLab
Projects
Groups
Snippets
/
Help
Help
Support
Community forum
Keyboard shortcuts
?
Submit feedback
Contribute to GitLab
Sign in
Toggle navigation
Menu
Open sidebar
EXSYS2021
da6
Hold Afstand
Commits
67eb7e04
Commit
67eb7e04
authored
Apr 25, 2021
by
Lasse Overgaard Møldrup
Browse files
Make header responsive
parent
81a7d94b
Changes
9
Expand all
Hide whitespace changes
Inline
Side-by-side
website/studerende-dk/package-lock.json
View file @
67eb7e04
This diff is collapsed.
Click to expand it.
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"
>
☰
</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
;
lef
t
:
$default-margin
;
margin-righ
t
:
$default-margin
;
h1
{
margin
:
0
;
line-height
:
1em
;
margin-bottom
:
2px
;
}
}
#nav
bar
{
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
>
Write
Preview
Supports
Markdown
0%
Try again
or
attach a new file
.
Cancel
You are about to add
0
people
to the discussion. Proceed with caution.
Finish editing this message first!
Cancel
Please
register
or
sign in
to comment