From 928e199363ee88234a59a6c36b8e6cdeca3ac1b1 Mon Sep 17 00:00:00 2001 From: topshenyi-web Date: Wed, 13 Dec 2023 21:36:11 -0400 Subject: [PATCH 1/4] dynamic search resizing in place --- public/manifest.json | 2 +- src/App.css | 19 ++++++++++++++++--- src/pages/ListPage.css | 23 +++++++++++++---------- src/pages/ListPage.tsx | 6 ++++-- 4 files changed, 34 insertions(+), 16 deletions(-) diff --git a/public/manifest.json b/public/manifest.json index a8d5e764..14db030e 100644 --- a/public/manifest.json +++ b/public/manifest.json @@ -30,6 +30,6 @@ "scope": "/", "start_url": "/", "display": "standalone", - "theme_color": "ffffff", + "theme_color": "#ffffff", "background_color": "#ffffff" } \ No newline at end of file diff --git a/src/App.css b/src/App.css index 76c915de..8ed71dbe 100644 --- a/src/App.css +++ b/src/App.css @@ -74,10 +74,23 @@ body { } .Container { - padding: 1.5rem 3rem 0; - flex-grow: 1; + padding: 2.5rem 5rem 0; + max-width: 1600px; + margin: auto; /*Keep it centered*/ + width: 100%; + box-sizing: border-box; + flex: 1; +} +@media (max-width: 900px) { + .Container { + padding: 1.3rem; + } +} +@media (max-width: 800px) { + .Container { + padding: 1rem; + } } - .footer { margin-top: 80px; background-color: #23272a; diff --git a/src/pages/ListPage.css b/src/pages/ListPage.css index dbd64618..210395f6 100644 --- a/src/pages/ListPage.css +++ b/src/pages/ListPage.css @@ -12,21 +12,21 @@ } .Locations-header { - display: grid; - grid-gap: 1rem; + display: flex; + flex-wrap: wrap; + gap: 2rem; padding: 3rem 0; + place-content: space-between; + align-items: end; } - -@media screen and (min-width: 900px) { - .Locations-header { - grid-template-columns: 1fr 300px; - align-items: center; - } +.Locations-Greeting { + /* This feels a bit hacky but it prevents the search bar from growing too much when the screen gets wide*/ + flex: 999 max-content; + overflow-wrap: break-word; + min-width: 0; } .Locations-search { - display: block; - width: 100%; padding: 0.8rem 1rem; padding-left: 3rem; border-radius: 1rem; @@ -48,6 +48,9 @@ color: white; font-weight: 500; + + flex: 1 300px; + min-width: 0; } .Locations-search::-webkit-search-decoration { diff --git a/src/pages/ListPage.tsx b/src/pages/ListPage.tsx index e3534073..8a7a72ee 100644 --- a/src/pages/ListPage.tsx +++ b/src/pages/ListPage.tsx @@ -138,7 +138,9 @@ function ListPage({ locations }: $TSFixMe) { )}
- {greeting} + + {greeting} + setSearchQuery('')} /> )} - + {openLocations .sort( (location1: Location, location2: Location) => From 90f083373f3d9f3e73ee2ee382cf6cc998424028 Mon Sep 17 00:00:00 2001 From: topshenyi-web Date: Thu, 14 Dec 2023 18:14:03 -0400 Subject: [PATCH 2/4] more css tweaks --- src/App.css | 63 +++++------------------------------ src/components/EateryCard.tsx | 2 +- src/components/Navbar.css | 2 ++ src/pages/ListPage.css | 34 +++++++++++++++++-- src/pages/ListPage.tsx | 8 +++-- 5 files changed, 48 insertions(+), 61 deletions(-) diff --git a/src/App.css b/src/App.css index 8ed71dbe..cada45e6 100644 --- a/src/App.css +++ b/src/App.css @@ -1,18 +1,20 @@ :root { --navbar-height: 70px; --navbar-height: calc(56px + max(env(safe-area-inset-bottom), 14px)); + --theme-color: #2c2f33; } html, body, -#root, -.App { +#root { height: 100%; } - +.App { + min-height: 100%; +} html, body { - background-color: #2c2f33; + background-color: var(--theme-color); margin: 0; padding: 0; font-size: 14px; @@ -38,59 +40,10 @@ body { .App { text-align: left; background-color: #2c2f33; - display: flex; - flex-direction: column; -} - -.App-logo { - height: 40vmin; - pointer-events: none; + display: grid; + grid-template-rows: 1fr auto; } -.MainContent { - overflow: auto; - flex: 1; -} - -@media (prefers-reduced-motion: no-preference) { - .App-logo { - animation: App-logo-spin infinite 20s linear; - } -} - -.App-header { - background-color: #282c34; - min-height: 100vh; - display: flex; - flex-direction: column; - align-items: center; - justify-content: center; - font-size: calc(10px + 2vmin); - color: white; -} - -.App-link { - color: #61dafb; -} - -.Container { - padding: 2.5rem 5rem 0; - max-width: 1600px; - margin: auto; /*Keep it centered*/ - width: 100%; - box-sizing: border-box; - flex: 1; -} -@media (max-width: 900px) { - .Container { - padding: 1.3rem; - } -} -@media (max-width: 800px) { - .Container { - padding: 1rem; - } -} .footer { margin-top: 80px; background-color: #23272a; diff --git a/src/components/EateryCard.tsx b/src/components/EateryCard.tsx index 2ddde750..da5a2463 100644 --- a/src/components/EateryCard.tsx +++ b/src/components/EateryCard.tsx @@ -152,7 +152,7 @@ function EateryCard({ location }: { location: Location }) { return ( <> - + )} -
+
{greeting} @@ -154,7 +154,11 @@ function ListPage({ locations }: $TSFixMe) { setSearchQuery('')} /> )} - + {openLocations .sort( (location1: Location, location2: Location) => From b873b992f94f93b3c948fb40d01606b8180e3c74 Mon Sep 17 00:00:00 2001 From: topshenyi-web Date: Thu, 14 Dec 2023 18:27:04 -0400 Subject: [PATCH 3/4] added some comments --- src/pages/ListPage.css | 10 ++++++---- 1 file changed, 6 insertions(+), 4 deletions(-) diff --git a/src/pages/ListPage.css b/src/pages/ListPage.css index fa5ecb10..63839c15 100644 --- a/src/pages/ListPage.css +++ b/src/pages/ListPage.css @@ -21,7 +21,8 @@ } .Locations-header { - isolation: isolate; + isolation: isolate; /* Not necessary, but good practice + to show that we've created a new stacking context*/ z-index: 1; position: sticky; top: 0; @@ -48,10 +49,11 @@ } } .Locations-Greeting { - /* This feels a bit hacky but it prevents the search bar from growing too much when the screen gets wide*/ + /* This feels a bit hacky but the flex-grow of 999 + prevents the search bar from growing too much when the screen gets wide*/ flex: 999 1 max-content; overflow-wrap: break-word; - min-width: 0; + min-width: 0; /* So it keeps shrinking when the screen gets narrow */ } .Locations-search { @@ -78,7 +80,7 @@ font-weight: 500; flex: 1 300px; - min-width: 0; + min-width: 0; /* So it keeps shrinking when the screen gets narrow */ } .Locations-search::-webkit-search-decoration { From ca7c746206343dbd5e1d3c669a1b2bed6c7ff5a0 Mon Sep 17 00:00:00 2001 From: topshenyi-web Date: Fri, 5 Jan 2024 16:22:01 -0400 Subject: [PATCH 4/4] added a bit of hardcoded top shadow effect when scrolling and reverted tile margins --- src/App.css | 3 +++ src/App.tsx | 19 +++++++++++++++++-- src/pages/ListPage.css | 7 ++++--- src/pages/ListPage.tsx | 11 +++++++---- 4 files changed, 31 insertions(+), 9 deletions(-) diff --git a/src/App.css b/src/App.css index cada45e6..e53c2a77 100644 --- a/src/App.css +++ b/src/App.css @@ -9,6 +9,9 @@ body, #root { height: 100%; } +#root { + overflow: auto; +} .App { min-height: 100%; } diff --git a/src/App.tsx b/src/App.tsx index 97ac5bcc..dba6f690 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -11,7 +11,17 @@ import './App.css'; function App() { // Load locations const [locations, setLocations] = useState([]); - + const [scrollFromTop, setScrolledFromTop] = useState(0); + const scrollListener = (event: Event) => { + setScrolledFromTop((event.target as HTMLElement).scrollTop); + }; + useEffect(() => { + const rootDiv = document.getElementById('root'); + if (!rootDiv) + throw Error('Missing root div! (Why did you rename it lol)'); + rootDiv.addEventListener('scroll', scrollListener); + return () => rootDiv.removeEventListener('scroll', scrollListener); + }); useEffect(() => { queryLocations().then((parsedLocations: $TSFixMe) => { if (parsedLocations != null) { @@ -42,7 +52,12 @@ function App() { } + element={ + + } /> getGreeting(), []); // Search query processing @@ -117,7 +117,6 @@ function ListPage({ locations }: $TSFixMe) { window.removeEventListener('offline', handleOnlineStatus); }; }, []); - return (
{/* showAlert && @@ -137,7 +136,10 @@ function ListPage({ locations }: $TSFixMe) { )}
-
+
{greeting} @@ -156,8 +158,9 @@ function ListPage({ locations }: $TSFixMe) { {openLocations .sort(