Finished mobile responsiveness.
This commit is contained in:
parent
85a7c81fe5
commit
fa6af3756b
|
@ -3,6 +3,7 @@ html
|
||||||
title Werkmanrooster
|
title Werkmanrooster
|
||||||
link(rel="stylesheet", href="/css/skeleton.css", type="text/css")
|
link(rel="stylesheet", href="/css/skeleton.css", type="text/css")
|
||||||
link(rel="stylesheet", href="/css/style.css", type="text/css")
|
link(rel="stylesheet", href="/css/style.css", type="text/css")
|
||||||
|
meta(name='viewport', content='width=device-width, user-scalable=no')
|
||||||
script(type="text/javascript", src="http://code.jquery.com/jquery-1.11.3.min.js")
|
script(type="text/javascript", src="http://code.jquery.com/jquery-1.11.3.min.js")
|
||||||
script(type="text/javascript", src="/js/script.js")
|
script(type="text/javascript", src="/js/script.js")
|
||||||
script(type="text/javascript").
|
script(type="text/javascript").
|
||||||
|
|
|
@ -4,32 +4,32 @@ include header
|
||||||
include search
|
include search
|
||||||
|
|
||||||
- var days = ['Maandag', 'Dinsdag', 'Woensdag', 'Donderdag', 'Vrijdag', 'Zaterdag', 'Zondag'];
|
- var days = ['Maandag', 'Dinsdag', 'Woensdag', 'Donderdag', 'Vrijdag', 'Zaterdag', 'Zondag'];
|
||||||
|
div#wrapper
|
||||||
div.schedule
|
div.schedule
|
||||||
ul
|
ul
|
||||||
each type in match.json.types
|
each type in match.json.types
|
||||||
li
|
li
|
||||||
span=type.letter
|
span=type.letter
|
||||||
a(href='?tab=' + type.tab)=type.value
|
a(href='?tab=' + type.tab)=type.value
|
||||||
each day in match.json
|
each day in match.json
|
||||||
div.day
|
div.day
|
||||||
div.hour.title
|
div.hour.title
|
||||||
span= days[match.json.indexOf(day)]
|
span= days[match.json.indexOf(day)]
|
||||||
each hour in day
|
each hour in day
|
||||||
if hour.teacher != 'vrij'
|
if hour.teacher != 'vrij'
|
||||||
div.hour(class=hour.changed == 'true' ? 'changed' : '')
|
div.hour(class=hour.changed == 'true' ? 'changed' : '')
|
||||||
each subhour in hour.teacher
|
each subhour in hour.teacher
|
||||||
span.teacher(class='sub_' + hour.teacher.length)
|
span.teacher(class='sub_' + hour.teacher.length)
|
||||||
a(href=hour.teacher[hour.teacher.indexOf(subhour)])= hour.teacher[hour.teacher.indexOf(subhour)]
|
a(href=hour.teacher[hour.teacher.indexOf(subhour)])= hour.teacher[hour.teacher.indexOf(subhour)]
|
||||||
span.chamber(class='sub_' + hour.teacher.length)
|
span.chamber(class='sub_' + hour.teacher.length)
|
||||||
a(href=hour.chamber[hour.teacher.indexOf(subhour)])= hour.chamber[hour.teacher.indexOf(subhour)]
|
a(href=hour.chamber[hour.teacher.indexOf(subhour)])= hour.chamber[hour.teacher.indexOf(subhour)]
|
||||||
span.course(class='sub_' + hour.teacher.length)= hour.course[hour.teacher.indexOf(subhour)]
|
span.course(class='sub_' + hour.teacher.length)= hour.course[hour.teacher.indexOf(subhour)]
|
||||||
|
|
||||||
if match.json.indexOf(day) == 0
|
if match.json.indexOf(day) == 0
|
||||||
span.time= times[match.json[0].indexOf(hour)]
|
span.time= times[match.json[0].indexOf(hour)]
|
||||||
|
|
||||||
else
|
else
|
||||||
div.hour.changed
|
div.hour.changed
|
||||||
span.free Vrij
|
span.free Vrij
|
||||||
|
|
||||||
include links
|
include links
|
||||||
|
|
|
@ -1,4 +1,67 @@
|
||||||
//mobile.less
|
//mobile.less
|
||||||
body {
|
/* Larger than mobile */
|
||||||
|
|
||||||
|
/* Larger than phablet */
|
||||||
|
@media (max-width: 550px) {}
|
||||||
|
|
||||||
|
/* Larger than tablet */
|
||||||
|
@media (max-width: 755px) {
|
||||||
|
#title {
|
||||||
|
font-size: 40px !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
input, button {
|
||||||
|
width: 80% !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
#wrapper {
|
||||||
|
overflow: hidden;
|
||||||
|
overflow-x: auto;
|
||||||
|
width: 100% !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.schedule {
|
||||||
|
width: 500% !important;
|
||||||
|
padding: 0px;
|
||||||
|
|
||||||
|
div.day {
|
||||||
|
width: 20% !important;
|
||||||
|
|
||||||
|
.hour {
|
||||||
|
width: 100% !important;
|
||||||
|
height: 45px !important;
|
||||||
|
line-height: 45px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
ul {
|
||||||
|
position: absolute;
|
||||||
|
left: 0px;
|
||||||
|
z-index: 1;
|
||||||
|
background: none !important;
|
||||||
|
|
||||||
|
li {
|
||||||
|
height: 50px !important;
|
||||||
|
width: 50px !important;
|
||||||
|
span {
|
||||||
|
height: 50px !important;
|
||||||
|
width: 50px !important;
|
||||||
|
line-height: 50px;
|
||||||
|
font-size: 25px;
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (max-width: 400px) {
|
||||||
|
#title {
|
||||||
|
font-size: 25px !important;
|
||||||
|
|
||||||
|
span {
|
||||||
|
display: none !important;
|
||||||
|
}
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
|
@ -2,7 +2,7 @@
|
||||||
@import url('http://fonts.googleapis.com/css?family=Open+Sans:400italic,700italic,700,400|Oswald');
|
@import url('http://fonts.googleapis.com/css?family=Open+Sans:400italic,700italic,700,400|Oswald');
|
||||||
|
|
||||||
.big {
|
.big {
|
||||||
margin-top: 20%;
|
margin-top: 10%;
|
||||||
}
|
}
|
||||||
|
|
||||||
.search {
|
.search {
|
||||||
|
@ -77,7 +77,7 @@ div.schedule {
|
||||||
|
|
||||||
&:hover {
|
&:hover {
|
||||||
-webkit-transition: 1s ease;
|
-webkit-transition: 1s ease;
|
||||||
width: 200px;
|
width: 200px !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
&:first-child span {
|
&:first-child span {
|
||||||
|
@ -109,7 +109,7 @@ div.schedule {
|
||||||
width: 150px;
|
width: 150px;
|
||||||
height: 20px;
|
height: 20px;
|
||||||
border-bottom: solid 1px #DDD;
|
border-bottom: solid 1px #DDD;
|
||||||
padding: 12px 15px;
|
padding: 12px 0px;
|
||||||
border-bottom: 1px solid #e1e1e1;
|
border-bottom: 1px solid #e1e1e1;
|
||||||
border-left: 1px solid #FFF;
|
border-left: 1px solid #FFF;
|
||||||
position: relative;
|
position: relative;
|
||||||
|
@ -131,6 +131,8 @@ div.schedule {
|
||||||
|
|
||||||
.teacher {
|
.teacher {
|
||||||
text-align: left;
|
text-align: left;
|
||||||
|
position: relative;
|
||||||
|
left: 15px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.chamber {
|
.chamber {
|
||||||
|
@ -139,6 +141,8 @@ div.schedule {
|
||||||
|
|
||||||
.course {
|
.course {
|
||||||
text-align: right;
|
text-align: right;
|
||||||
|
position: relative;
|
||||||
|
right: 15px;
|
||||||
}
|
}
|
||||||
|
|
||||||
&.changed {
|
&.changed {
|
||||||
|
|
Loading…
Reference in a new issue