Skip to content
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

Merged
merged 14 commits into from
Aug 27, 2024

Conversation

Filip-Kin
Copy link
Collaborator

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.

image

image

@333fred 333fred changed the base branch from main to dev August 4, 2024 19:02
ui/src/fms/fms-signalr.ts Outdated Show resolved Hide resolved
ui/bun.lockb Outdated Show resolved Hide resolved
ui/vite.config.ts Outdated Show resolved Hide resolved
ui/src/app.css Outdated
Comment on lines 26 to 31
@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;
}
}
Copy link
Member

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.

Copy link
Collaborator Author

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.

Copy link
Member

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.

Copy link
Member

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?

Copy link
Collaborator Author

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.

ui/src/lib/components/field-monitor/MonitorRow.svelte Outdated Show resolved Hide resolved
ui/src/routes/+page.svelte Outdated Show resolved Hide resolved
@333fred
Copy link
Member

333fred commented Aug 6, 2024

@Filip-Kin, looks like CI is failing as well. Additionally, prettier needs to be run.

@333fred
Copy link
Member

333fred commented Aug 8, 2024

@Filip-Kin were you going to address feedback? I can update the PR later if you'd prefer.

@Filip-Kin
Copy link
Collaborator Author

@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.

@333fred
Copy link
Member

333fred commented Aug 27, 2024

Alright, I'm going to go ahead and merge this now.

@333fred 333fred merged commit 7a52f1f into FIRST-Robotics-Competition:dev Aug 27, 2024
1 check passed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants