Refines the navbar and adds a footer #1686
Conversation
johnclary
changed the title
❌ Deploy Preview for vision-zero-nextjs failed.
|
app/components/SidebarLayout.tsx
Outdated
| ))} | ||
| </ListGroup> | ||
| </div> | ||
| <div style={{ height: "100vh", overflow: "hidden" }} className="d-flex"> |
There was a problem hiding this comment.
i reworked the layout to lean fully into flexboxes. each colored box in this image is using flex-column and flex-grow to ensures that the main content is always fully expanded and the footer is pushed to the bottom.
this works around issues with relying purely on 100% height, and is my preferred approach versus another common way of dealign with sticky headers and footers, which is to use absolute positioning plus some hidden elements or hardcoded margins to keep the main content from being obscured.
it does preclude us from being able to do this blur effect without some CSS trickery that i couldn't quite get right. if you notice in that screenshot, the right vertical scrollbar is actually obscured/underneath the sticky nav. this is why i backed away from that version of the navbar, despite it looking quite nice and fancy. i'm sure we could make it work, but it was proving to be enough of a challenge for me to revert to the boring gray navbar 😖
you can rollback to this commit to see the transparent nav.
app/styles/global.scss
Outdated
| // https://isotropic.co/tool/hex-color-to-css-filter/ | ||
| .app-brand-img { | ||
| filter: sepia(10%) contrast(130%); | ||
| } |
There was a problem hiding this comment.
ah yes, this is a hack to recolor the VZ logo. would be good to repaint it to match our dark color
| @@ -8,7 +8,6 @@ import { GET_CRASH, UPDATE_CRASH } from "@/queries/crash"; | |||
| import { UPDATE_UNIT } from "@/queries/unit"; | |||
| import { UPDATE_PERSON } from "@/queries/person"; | |||
| import { useQuery } from "@/utils/graphql"; | |||
| import AppBreadCrumb from "@/components/AppBreadCrumb"; | |||
There was a problem hiding this comment.
the breadcrumb is now part of the outer layout and is going to be "on" by default everywhere. it has logic inside so that it doesn't render on top-level pages.
app/package.json
Outdated
| @@ -1,6 +1,6 @@ | |||
| { | |||
| "name": "app", | |||
| "version": "0.1.0", | |||
| "version": "2.5.2", | |||
There was a problem hiding this comment.
love these changes! i really like the light grey color for the footer/nav bar. its nice to give the app some depth. i also rly like this new logo compared to the one we had before.
i tested switching out the navbar icon with the yellow logo like i mentioned in this PR but now im not sure if its too distracting? idk i like what you have now a lot curious what others think i just thought it could bring some color into the app. i dont think i like the 3D-ness of this yellow one its hard to see when its so little
i also tested pulling that light grey color in the navbar into the headers but now i wonder if it looks too matchy matchy and idk if i like it. maybe if the injury indicators box wasnt also the same color. but i am not attached to the headers needing a background color
yellow icon w header background
|
Rose—thanks for all your feedback here and in the app theme PR. i think i'd prefer to get these current changes into main and start a new branch/issue where we revisit all this, with a focus on bringing some life to the app and nixing the powder background that everyone hates. |
|
oops—i did not mean to push my dark mode commits here 😭 i will clean it up :/ |
✅ Deploy Preview for atd-vze-staging ready!
To edit notification comments on pull requests, go to your Netlify site configuration. |
Associated issues
Testing
URL to test: Netlify
How does it look?
Ship list
mainbranch