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