On Friday (8/9/2019) there were some issues with the grid implementation not looking the way you wanted and not working on mobile.
To fix mobile layout:
I added base styles using flex-box. This makes everything collapse into one column.
Wrapped the grid styles in a min-width media query corresponding to Bootstrap's "sm" breakpoint.
To fix the grid:
I removed the row specifications and just let auto-row handle the grid. This way the grid fills each row as needed, but keeps the alignment appropriate.
I replaced the 'area' declarations with columns and adjusted the columns some.
See the code for some other changes.
A Note on the Styling
To make the inputs not stretch unnecessarily, I capped them at a reasonable ch width. This will make them grow if a user needs to increase their base font size. This leaves a gap to the right of the inputs. To fix this gap, you could adjust the main grid's 3rd column to be smaller. I didn't do this because it would cause the calendar to stretch, which may not look the way you want.
Accessibility Improvements
Added missing form labels and fixed the "for" attributes on some existing labels
Added a <main> tag to the layout.
Replaced the headings with the appropriate ones on the availability screen.
Each subsequent heading layer specifies a smaller sub-section within the document. And so there needs to be an appropriate order to the headings. (Every page has an h1, h2 for top-level sections of the page. For font-styling, bootstrap has corresponding classes, which I used here.
Mapped the availability tabs after (this example from W3.org)[https://www.w3.org/TR/wai-aria-practices/examples/tabs/tabs-2/tabs.html]
The interaction pieces written in JavaScript (cue horse sound) still need to be handled in Blazor. Someone should open an issue after these changes are merged and this could make a good issue for someone wanting to dive into Blazor + common A11y practices. It should be fairly doable, but I didn't quite have time to dive into it. If someone wants to chat through the changes, they can tag me in the issue and I can try and walk them through it.
3. Some Other Stuff To Note
I used the dash case (there's a specific name that is escaping me) for id's and class names (e.g. some-class-name), this is mainly b/c html & css are case-insensitive. You may want to switch this to your PascalCase style if you prefer for consistency. I was kind of short on time and just going off of my default convention.
Some of the css changes may be due to StyleLint in VS Code. I didn't really think about what plugins I had running, and it's possible when I did auto-formatting it tweaked the layout of some stuff.
Thank you! I should get notified on my phone if you have any questions/comments.
This pull request has 2 goals.
Fixing the availability grid layout.
On Friday (8/9/2019) there were some issues with the grid implementation not looking the way you wanted and not working on mobile.
min-width
media query corresponding to Bootstrap's "sm" breakpoint.A Note on the Styling
To make the inputs not stretch unnecessarily, I capped them at a reasonable
ch
width. This will make them grow if a user needs to increase their base font size. This leaves a gap to the right of the inputs. To fix this gap, you could adjust the main grid's 3rd column to be smaller. I didn't do this because it would cause the calendar to stretch, which may not look the way you want.Accessibility Improvements
<main>
tag to the layout.3. Some Other Stuff To Note
Thank you! I should get notified on my phone if you have any questions/comments.