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

Dark Mode & UI Overhauls #152

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

Dark Mode & UI Overhauls #152

wants to merge 72 commits into from

Conversation

Ilverism
Copy link
Collaborator

SITE-WIDE CHANGES

  • Navbar header is now sticky on all pages (will stay at the top of the screen when scrolling down; elements beneath it are simply hidden)
  • Added page icons to the Navbar
  • Navbar elements now have a slight background highlight when hovered
  • A page's main scrollbar will now appear beneath the Navbar, rather than to the right of it (indicates the Navbar will not be scrolled)
  • Forced the main scrollbar to appear on some pages where clicking certain buttons would cause the scrollbar to appear as a result, which shifts the buttons away from the user's cursor as a result
  • Made the margin and spacing of high-level page elements and containers more consistent across the site
  • Added a Dark Mode button toggle on the right side of the Navbar, allowing the user to switch between Light & Dark themes on any page where the Navbar is visible
  • The user's theme is automatically saved and loaded across pages via localStorage
  • Prevented a bright flash when loading a new page while the dark theme is enabled
  • A large number of CSS changes were added to main.css to override the bootstrap styles to support the light and dark themes
  • The light and dark theme colors can be easily modified or expanded on at the top of main.css by specifying the colors and 2 additional variable definitions
  • Made the behavior of certain elements clearer with UI changes (e.g. moving time selection elements into one larger container)

(Interface changes from previous commits or pages with changes that come as a result of the site-wide updates will be skipped here. May skip showing both light and dark theme comparisons for brevity. May skip changes made on previous branches.)

SUMMARY PAGE

  • Added badge colors to the 'Uploads' container to match the Imports page
  • Added icons to for notifications and the 'Uploads' badges
  • Now indicates the total number of flights imported
  • Removed the divider between the graphs

image
image

EVENT STATISTICS

  • Improved dropdown button visibility

image
image

EVENT DEFINITIONS

  • Improved table layout and readability
  • Similar changes were applied to the Manage Events page, but images will be skipped

image
image
image

TURN TO FINAL TOOL

  • Removed unnecessary plot toggle button
  • Disabled unnecessary map toggle button functionality
  • Moved map to the bottom left quadrant to reflect the ordering of the Flights page
  • Changed the graph and map container styling to reflect the changes to the Flights page

image
image

FLIGHTS

  • Reworked the page layout
  • Navbar header buttons are now evenly-sized
  • The map and graph now clearly have their own distinguished containers
  • The map and graph can now be easily manually expanded/collapsed when with buttons at their top left
  • Condensed flight information to fit into 4 distinct boxes instead of 9
  • Explicitly indicates if a flight has no recorder airports or tags, rather than just leaving the box empty
  • Explicitly indicates if a flight has no events found, rather than just leaving an empty line
  • Moved the button to edit a flight's tags to the container which displays the flight's tags (icon was changed from a tag to a plus to indicate that's how new tags are initially added)
  • The 6 remaining buttons are evenly-sized and evenly-spaced at the end of the flight row
  • The ordering of the buttons and the information displayed when clicking on them now follow the expected consistent order (tags -> events -> flight parameters -> itinerary)
  • A single Paginator is used, rather than two
  • The Filter, Flights, and Paginator containers are now separated from each other, rather than scrolling together

image
image
image
image

IMPORTS

  • Now uses a single Paginator, instead of two
  • The Paginator now appears stuck at the bottom of the page, and will stay in the same spot on the screen when scrolling
  • Changed the sizing of the import rows to be more compact
  • Moved the date to the same end of the row as the file name
  • Added colored badges with icons
  • Now indicates the total number of flights imported
  • Moved the dropdown button into the import row and made it more visible

image
image

UPLOADS

  • Now uses a single Paginator, instead of two
  • The Paginator now appears stuck at the bottom of the page, and will stay in the same spot on the screen when scrolling
  • The Upload Flights button has been moved to the Paginator, rather than having it take up its own row
  • The styling of the upload rows match the changes made to the import rows, resulting in all of the information appearing above one larger container

image
image

MANAGE FLEET

  • Moved invite button inside the top-level container
  • Made the formatting of the Fleet Access Preferences and Fleet Email Preferences tables to be consistent with the containers on the Preferences page
  • Capitalized the Access Level names

image
image

@jkarns275
Copy link
Collaborator

Might just send this low key but need merge conflicts resolved

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