Add Mobile UI for smaller screens

kiriDevs / vplanweb

A web app for the substitution plan of my school - data is supplied by an API maintained by @ChuangSheep

https://vplan.kiridevs.live

3 stars 0 forks source link

Add Mobile UI for smaller screens #66

Closed kiriDevs closed 2 years ago

kiriDevs commented 2 years ago

Adds an alternative UI for smaller screens. When the site is loaded with a screen width smaller than or equal to 500px, the <SubstitutionTable> will be replaced by a <SubstitutionList>. It is divided into multiple <SubstitutionListGroup>s, named by their respective periods. Groups will only be created for periods that actually have entries on the fetched plan. These groups are expandable (and collapsible) by the user to reveal (or hide) <SubstitutionListCell>s. These will display one plan entry each.

Remaining ToDos:

[x] Badges showing the amount of relevant entries for each period
[x] i18n of the new strings

This PR closes #55 (which is funny because #66 closes #55)

cloudflare-workers-and-pages[bot] commented 2 years ago

Deploying with Cloudflare Pages

Latest commit:	`46e0a79`
Status:	✅ Deploy successful!
Preview URL:	https://7e22c840.vplan.pages.dev
Branch Preview URL:	https://mobile-ui.vplan.pages.dev

View logs

kiriDevs commented 2 years ago

Added badges to the <SubstitutionListGroup> headers that show how many matches to the current filter settings are in each period. It uses the same coloring scheme the users are used to from the background colors of the normal <SubstitutionTable>:

Full matches are entries where both class and subjects match the settings. Partial matches are entries where only the class matches the settings. When only a class is specified in the user's settings, partial matches are treated as full matches.

Full matches are highlighted in bootstrap's primary color (blue), partial matches in secondary color (gray).

kiriDevs commented 2 years ago

Other features to implement before merging:

[x] Proper handling of invalid API responses (invalid entries)