Finished mobile responsiveness.
This commit is contained in:
Bram van der Veen
parent
85a7c81fe5
commit
fa6af3756b
|
|
@ -3,6 +3,7 @@ html
|
|||
title Werkmanrooster
|
||||
link(rel="stylesheet", href="/css/skeleton.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="/js/script.js")
|
||||
script(type="text/javascript").
|
||||
|
|
|
|||
|
|
@ -4,32 +4,32 @@ include header
|
|||
include search
|
||||
|
||||
- var days = ['Maandag', 'Dinsdag', 'Woensdag', 'Donderdag', 'Vrijdag', 'Zaterdag', 'Zondag'];
|
||||
div#wrapper
|
||||
div.schedule
|
||||
ul
|
||||
each type in match.json.types
|
||||
li
|
||||
span=type.letter
|
||||
a(href='?tab=' + type.tab)=type.value
|
||||
each day in match.json
|
||||
div.day
|
||||
div.hour.title
|
||||
span= days[match.json.indexOf(day)]
|
||||
each hour in day
|
||||
if hour.teacher != 'vrij'
|
||||
div.hour(class=hour.changed == 'true' ? 'changed' : '')
|
||||
each subhour in hour.teacher
|
||||
span.teacher(class='sub_' + hour.teacher.length)
|
||||
a(href=hour.teacher[hour.teacher.indexOf(subhour)])= hour.teacher[hour.teacher.indexOf(subhour)]
|
||||
span.chamber(class='sub_' + hour.teacher.length)
|
||||
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)]
|
||||
|
||||
div.schedule
|
||||
ul
|
||||
each type in match.json.types
|
||||
li
|
||||
span=type.letter
|
||||
a(href='?tab=' + type.tab)=type.value
|
||||
each day in match.json
|
||||
div.day
|
||||
div.hour.title
|
||||
span= days[match.json.indexOf(day)]
|
||||
each hour in day
|
||||
if hour.teacher != 'vrij'
|
||||
div.hour(class=hour.changed == 'true' ? 'changed' : '')
|
||||
each subhour in hour.teacher
|
||||
span.teacher(class='sub_' + hour.teacher.length)
|
||||
a(href=hour.teacher[hour.teacher.indexOf(subhour)])= hour.teacher[hour.teacher.indexOf(subhour)]
|
||||
span.chamber(class='sub_' + hour.teacher.length)
|
||||
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)]
|
||||
if match.json.indexOf(day) == 0
|
||||
span.time= times[match.json[0].indexOf(hour)]
|
||||
|
||||
if match.json.indexOf(day) == 0
|
||||
span.time= times[match.json[0].indexOf(hour)]
|
||||
|
||||
else
|
||||
div.hour.changed
|
||||
span.free Vrij
|
||||
else
|
||||
div.hour.changed
|
||||
span.free Vrij
|
||||
|
||||
include links
|
||||
|
|
|
|||
|
|
@ -1,4 +1,67 @@
|
|||
//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');
|
||||
|
||||
.big {
|
||||
margin-top: 20%;
|
||||
margin-top: 10%;
|
||||
}
|
||||
|
||||
.search {
|
||||
|
|
@ -77,7 +77,7 @@ div.schedule {
|
|||
|
||||
&:hover {
|
||||
-webkit-transition: 1s ease;
|
||||
width: 200px;
|
||||
width: 200px !important;
|
||||
}
|
||||
|
||||
&:first-child span {
|
||||
|
|
@ -109,7 +109,7 @@ div.schedule {
|
|||
width: 150px;
|
||||
height: 20px;
|
||||
border-bottom: solid 1px #DDD;
|
||||
padding: 12px 15px;
|
||||
padding: 12px 0px;
|
||||
border-bottom: 1px solid #e1e1e1;
|
||||
border-left: 1px solid #FFF;
|
||||
position: relative;
|
||||
|
|
@ -131,6 +131,8 @@ div.schedule {
|
|||
|
||||
.teacher {
|
||||
text-align: left;
|
||||
position: relative;
|
||||
left: 15px;
|
||||
}
|
||||
|
||||
.chamber {
|
||||
|
|
@ -139,6 +141,8 @@ div.schedule {
|
|||
|
||||
.course {
|
||||
text-align: right;
|
||||
position: relative;
|
||||
right: 15px;
|
||||
}
|
||||
|
||||
&.changed {
|
||||
|
|
|
|||
Loading…
Reference in a new issue