diff --git a/src/components/home-page/home-page-resources/about.css b/src/components/home-page/home-page-resources/about.css index 1ff9246..1b3a191 100644 --- a/src/components/home-page/home-page-resources/about.css +++ b/src/components/home-page/home-page-resources/about.css @@ -250,3 +250,10 @@ height: 280px; } } + +@media (max-width: 768px) { + .right-section, + .about-image { + display: none; + } +} diff --git a/src/components/home-page/home-page-resources/about.js b/src/components/home-page/home-page-resources/about.js index 29ab52d..4666203 100644 --- a/src/components/home-page/home-page-resources/about.js +++ b/src/components/home-page/home-page-resources/about.js @@ -1,36 +1,58 @@ -import { Link } from 'react-router-dom'; -import './about.css'; +import { useState } from "react"; +import { Link } from "react-router-dom"; +import "./about.css"; function About() { + const [markerVisible, setMarkerVisible] = useState(false); + + const handleMapClick = () => { + setMarkerVisible(true); + }; + return (
-
-

About Us

+
+

About Us

- Good Old Katy is a resource hub and center for all things Houston and Katy texas. We demonstrate the many opportunities and resources of over 600 square miles of texan land. Our mission is to display the rich history of Katy and offer our aid to all of its inhabitants. + Good Old Katy is a resource hub and center for all things Houston + and Katy texas. We demonstrate the many opportunities and + resources of over 600 square miles of texan land. Our mission is + to display the rich history of Katy and offer our aid to all of + its inhabitants.

-
+
- Katy Community - Community + Katy Community + + Community
-
-
- Can you find where Katy is located? -
- -
- - See Katy Map - - right arrow -
+ +
+
Can you find where Katy is located?
+ +
+ See Katy Map + right arrow +
+
-
); diff --git a/src/components/home-page/home-page-resources/featured.css b/src/components/home-page/home-page-resources/featured.css index 08b1ba4..6231086 100644 --- a/src/components/home-page/home-page-resources/featured.css +++ b/src/components/home-page/home-page-resources/featured.css @@ -66,10 +66,11 @@ } .polaroid-holder{ - display: flex; - justify-content: end; - transform: rotate(-7deg); - margin-top: 20px; + display: flex; + cursor: pointer; + justify-content: end; + transform: rotate(-7deg); + margin-top: 20px; } .text-section{ @@ -152,6 +153,7 @@ .polaroid-holder { justify-content: center; transform: rotate(-4deg); + cursor: pointer; } .text-header-please { diff --git a/src/components/home-page/navBar.css b/src/components/home-page/navBar.css index 9eb81b1..03bddcf 100644 --- a/src/components/home-page/navBar.css +++ b/src/components/home-page/navBar.css @@ -10,6 +10,8 @@ } .nav-bar-container { + z-index: 1000; + display: flex; align-items: center; justify-content: space-between; diff --git a/src/components/map/Map.css b/src/components/map/Map.css index bb6a074..e11c2e5 100644 --- a/src/components/map/Map.css +++ b/src/components/map/Map.css @@ -26,7 +26,7 @@ border-radius: 3px; overflow: hidden; box-shadow: 2px 3px rgba(0, 0, 0, 1); - min-width: 0; + min-width: 80%; background: rgba(254, 250, 224, 1); } @@ -34,6 +34,22 @@ border-radius: 0; } +.leaflet-container { + touch-action: pan-x pan-y; +} + +@media (max-width: 968px) { + .map-wrapper { + min-height: 400px; + height: 50vh; + min-width: 100%; + } + + .map-wrapper .leaflet-container { + height: 100% !important; + } +} + .resources-sidebar { width: 350px; min-width: 300px; @@ -45,6 +61,7 @@ display: flex; flex-direction: column; overflow: hidden; + -webkit-overflow-scrolling: touch; } .sidebar-header { @@ -270,4 +287,8 @@ .popup-content strong { color: var(--text-main); -} \ No newline at end of file +} + +.leaflet-control-zoom { + display: none; +} diff --git a/src/components/map/Map.js b/src/components/map/Map.js index c1b7c08..b95f4c7 100644 --- a/src/components/map/Map.js +++ b/src/components/map/Map.js @@ -134,6 +134,10 @@ function Map() { zoom={13} style={{ height: "70vh", minHeight: "420px", width: "100%" }} scrollWheelZoom={true} + tap={true} + touchZoom={true} + dragging={true} + zoomControl={true} > r && (r.status === "active" || r.status === "published") - ); - - const [category, setCategory] = useState(ALL_CATEGORIES); - const [area, setArea] = useState(ALL_REGIONS); - const [query, setQuery] = useState(""); - - const categories = [ALL_CATEGORIES, ...new Set(live.map(r => r.category).filter(Boolean))]; - const areas = [ALL_REGIONS, ...new Set(live.flatMap(r => r.service_area || []).filter(Boolean))]; - - const filtered = useMemo(() => { - const q = query.trim().toLowerCase(); - - return live.filter(r => { - const okCategory = category === ALL_CATEGORIES || r.category === category; - const okArea = area === ALL_REGIONS || (r.service_area || []).includes(area); - - const okQuery = - !q || - (r.name || "").toLowerCase().includes(q) || - (r.description || "").toLowerCase().includes(q) || - (r.tags || []).some(t => (t || "").toLowerCase().includes(q)); - - return okCategory && okArea && okQuery; - }); - }, [live, category, area, query]); - - return ( - -
-

- Browse Over - - 1 - 0 - 0 - - Resources -

-

Current Resources ({filtered.length})

- -
- Magnifying glass - - setQuery(e.target.value)} - className="bar-this" - /> -
-
- - - - - -
- -
- {filtered.map(r => { - const href = r.website || ""; - const Wrapper = href ? "a" : "div"; - - return ( - -
-
-
{r.name}
-
{r.category}
-
- - {r.address ?
{r.address}
: null} - -
- {(r.tags || []).map(t => ( - {t} - ))} -
- -
-
- {r.phone ? {r.phone} : null} -
- {r.website ? ( - - Visit site → - - ) : null} -
- - {(r.hours || r.eligibility) ? ( -
- {r.hours ?
Hours: {r.hours}
: null} - {r.eligibility ?
Eligibility: {r.eligibility}
: null} -
- ) : null} -
- - ); - })} -
+ const ALL_CATEGORIES = "All Categories"; + const ALL_REGIONS = "All Regions"; + const live = (resources || []).filter( + (r) => r && (r.status === "active" || r.status === "published"), + ); + + const [category, setCategory] = useState(ALL_CATEGORIES); + const [area, setArea] = useState(ALL_REGIONS); + const [query, setQuery] = useState(""); + + const categories = [ + ALL_CATEGORIES, + ...new Set(live.map((r) => r.category).filter(Boolean)), + ]; + const areas = [ + ALL_REGIONS, + ...new Set(live.flatMap((r) => r.service_area || []).filter(Boolean)), + ]; + + const filtered = useMemo(() => { + const q = query.trim().toLowerCase(); + + return live.filter((r) => { + const okCategory = category === ALL_CATEGORIES || r.category === category; + const okArea = + area === ALL_REGIONS || (r.service_area || []).includes(area); + + const okQuery = + !q || + (r.name || "").toLowerCase().includes(q) || + (r.description || "").toLowerCase().includes(q) || + (r.tags || []).some((t) => (t || "").toLowerCase().includes(q)); + + return okCategory && okArea && okQuery; + }); + }, [live, category, area, query]); + + return ( +
+

+ Browse Over + + 1 + 0 + 0 + + Resources +

+

Current Resources ({filtered.length})

+ +
+
+ Magnifying glass + + setQuery(e.target.value)} + className="bar-this" + />
- ); +
+
+ + + +
+
+
+
+ {filtered.map((r) => { + const href = r.website || ""; + const Wrapper = href ? "a" : "div"; + + return ( + +
+
+
{r.name}
+
{r.category}
+
+ + {r.address ? ( +
{r.address}
+ ) : null} + +
+ {(r.tags || []).map((t) => ( + + {t} + + ))} +
+ +
+
+ {r.phone ? {r.phone} : null} +
+ {r.website ? ( + + Visit site → + + ) : null} +
+ + {r.hours || r.eligibility ? ( +
+ {r.hours ? ( +
+ Hours: {r.hours} +
+ ) : null} + {r.eligibility ? ( +
+ Eligibility: {r.eligibility} +
+ ) : null} +
+ ) : null} +
+ + ); + })} +
+
+
+
+ ); } diff --git a/src/components/styles/pages.css b/src/components/styles/pages.css index 3ced09f..07bd4f6 100644 --- a/src/components/styles/pages.css +++ b/src/components/styles/pages.css @@ -8,7 +8,7 @@ min-height: 100vh; padding: 0 20px 48px; text-align: center; - max-width: 1180px; + max-width: 1500px; margin: 0 auto; color: var(--text-main); font-family: 'Yearbook Solid W01', 'Helvetica Neue', Arial, sans-serif; @@ -43,6 +43,42 @@ .card-grid { display: grid; gap: 14px; + width: 100%; +} + +.resources-container { + width: 100%; + min-width: 80%; + align-self: center; + align-items: center; + max-width: 1200px; + margin: 0 auto; + text-align: center; + padding: 0 20px 48px; +} + +.cards-container { + border: 3px solid #000; + border-radius: 3px; + background: #dda15e; + box-shadow: 2px 3px rgba(0,0,0,1); + height: 65vh; + max-height: 70vh; + overflow-y: auto; + padding: 12px; + display: flex; + flex-direction: column; + align-items: center; + -webkit-overflow-scrolling: touch; +} + +.cards-container::-webkit-scrollbar { + width: 8px; +} + +.cards-container::-webkit-scrollbar-thumb { + background: rgba(0,0,0,0.2); + border-radius: 6px; } @media (min-width: 720px) { @@ -131,8 +167,8 @@ .info-card { border: 2px solid black; - border-radius: 0; - padding: 14px 16px; + border-radius: 4px; + padding: 16px; background: rgba(255, 255, 255, 0.65); transition: transform 0.15s ease,