-
Notifications
You must be signed in to change notification settings - Fork 4
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Initial app UI and responsive field monitor #12
Conversation
ui/src/app.css
Outdated
@media screen and (min-width: 1024px) { | ||
.grid-cols-fieldmonitor { | ||
grid-template-columns: minmax(auto, 1fr) 1fr 1fr 1fr auto minmax(auto, 1fr) minmax(auto, 1fr) auto; | ||
width: fit-content; | ||
} | ||
} |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
I do think that we're going to want to go with something more like the 3x2 layout I've prototyped for these types of screens in landscape mode.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
I'm not sure, my concern with the 3x2 layout is that it would be incorrect depending on which way the screen faces. Which, could be fixed with a button to flip the layout. We could also have a setting to switch between the traditional layout and the 3x2 layout. Options are good? Personally I prefer the traditional layout.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
I agree with options being good, but the main issue that I have with the vertical layout is that it doesn't make good use of the horizontal space of the screen, so you end up with dead space that could instead be used to make the display more visible across the field. The goal here is that, eventually, this would be the single interface for interacting with field statuses. If you look up in the slack channel, you can see the figma designs that I've put together on this.
ui/src/lib/components/Button.svelte
Outdated
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Are these components copied from somewhere? Can we use some standard library for them instead of maintaining them ourselves?
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Tailwind ui components, for FTA Buddy I used Flowbite which is a maintained library of essentially the same components. I like the convivence of that, but I ran into issues where I wanted to change some of the components.
@Filip-Kin, looks like CI is failing as well. Additionally, prettier needs to be run. |
@Filip-Kin were you going to address feedback? I can update the PR later if you'd prefer. |
I will be addressing the feedback, I just haven't found the time this week to work on it. |
Alright, I'm going to go ahead and merge this now. |
It'll need some more work to make the field monitor look good and have all the information it needs, but I think it's a good start.