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

Updates plateform UX to fit Pyronear style & improves UX #180

Open
wants to merge 8 commits into
base: main
Choose a base branch
from

Conversation

fe51
Copy link
Member

@fe51 fe51 commented Jan 26, 2025

Motivation

The style of our platform seems a little too carnival-like to me & the format of the various buttons too rounded with coarse margins. Moreover, the scroll activation button doesn't look natural.

The aim of this PR is to come up with a more coherent design that fits with the Pyronear color code.
Below, You can see various screenshot showing how it renders.

it seemed appropriate to consider a small style update before developing new screens (dashboard cameras) & inspiring the redesign in react

What has been done

Tested on Chrome & Safari on 14inch & big screen (16:9?)

This PR introduces the following modification :

  • Updates style of alert panel element
  • Adds play-pause icon near slider instead of "Activer/Désactiver l'animation" (the icon button changes color between play and pause) => seems more natural as play pause in any video player.
  • Updates center button style
  • Updates right side panel style & switch map and info panel positions
  • Updates padding and margins to avoid touching scroll bar and limit of the window

About the right side panel, I've switched map and info panel position. I am not sure what is the best, do you have any opinion ?

Happy to discuss it !

image

image

image

@fe51 fe51 added the type: enhancement New feature or request label Jan 26, 2025
@fe51 fe51 requested a review from MateoLostanlen January 26, 2025 15:27
@fe51 fe51 self-assigned this Jan 26, 2025
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
type: enhancement New feature or request
Projects
None yet
Development

Successfully merging this pull request may close these issues.

1 participant