Commit 8443c690 authored by Sandro Lutz's avatar Sandro Lutz Committed by Sandro Lutz
Browse files

Make studydocs QuickFilter more mobile-friendly

parent f3818afd
// This file contains all allowed media queries. Only use those for responsive styling!
@smallMobile: ~'screen and (max-width: 775px)';
@mobile: ~'screen and (max-width: 920px)';
@tablet: ~'screen and (min-width: 921px) and (max-width: 1076px)';
@desktop: ~'screen and (min-width: 1077px) and (max-width: 1280px)';
......
......@@ -63,12 +63,25 @@
.semester {
text-align: left;
margin-top: 16px;
}
.department > div {
display: inline-block;
width: 5em;
padding-right: 1em;
font-weight: bold;
@media @smallMobile {
width: 100%;
text-align: center;
}
&:first-of-type {
width: 5em;
@media @smallMobile {
width: 100%;
}
}
}
}
......@@ -238,23 +238,25 @@ export default class StudydocQuickFilter {
const semesters = ['1', '2', '3', '4', '5+'];
return m('div.department', [
m('div', department !== 'other' ? `D-${department.toUpperCase()}` : department),
...semesters.map(semester =>
m(Button, {
className: 'flat-button',
label: semester,
events: {
onclick: () => {
filterValues.semester = [semester];
if (department === 'other') {
this.state = STATE_DEPARTMENT;
} else {
filterValues.department = [department];
this.state = STATE_LECTURE;
}
m('div.buttons', [
semesters.map(semester =>
m(Button, {
className: 'flat-button',
label: semester,
events: {
onclick: () => {
filterValues.semester = [semester];
if (department === 'other') {
this.state = STATE_DEPARTMENT;
} else {
filterValues.department = [department];
this.state = STATE_LECTURE;
}
},
},
},
})
),
})
),
]),
]);
}
}
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