From 7d217a78555eb43258064e8279aed0306d265c67 Mon Sep 17 00:00:00 2001 From: Jack Rifkin Date: Sun, 16 Jun 2024 20:19:56 -0700 Subject: [PATCH] make mobile responsive --- .../Navigation/Navigation.module.css | 50 ++++++ pages/Components/Navigation/index.jsx | 168 +++++++++++++----- pages/Gallery/Gallery.module.css | 29 +-- pages/Gallery/index.jsx | 26 +-- pages/index.jsx | 45 ++++- 5 files changed, 238 insertions(+), 80 deletions(-) diff --git a/pages/Components/Navigation/Navigation.module.css b/pages/Components/Navigation/Navigation.module.css index 078e200..a9307b8 100644 --- a/pages/Components/Navigation/Navigation.module.css +++ b/pages/Components/Navigation/Navigation.module.css @@ -11,6 +11,14 @@ height: 100%; } +.flexContainerMobile { + height: 130px; + display: flex; + align-content: center; + justify-content: space-between; + width: 100%; +} + .hoverFlexContainer { position: absolute; left: 0; @@ -69,3 +77,45 @@ .hoverMenuText:hover { text-decoration: underline; } + +.expandedMenuMobile { + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 0; + background-color: var(--maize); + transition: height 0.35s ease-in-out; + z-index: 100000; + clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%); +} + +.expandedMenuContent { + display: flex; + flex-direction: column; + align-items: center; + justify-content: flex-start; + height: 100vh; +} + +.expandedMenuLabelsContainer { + display: flex; + flex-direction: column; + align-items: center; + justify-content: space-around; + height: calc(100% - 130px); + padding-bottom: 50px; +} + +.expandedMenuMobile.visible { + height: 100vh; +} + +.expandedMenuText { + color: var(--cosmic-latte); + font-size: xx-large; +} + +.expandedMenuText:hover { + text-decoration: underline; +} \ No newline at end of file diff --git a/pages/Components/Navigation/index.jsx b/pages/Components/Navigation/index.jsx index 1951bf3..d361b9c 100644 --- a/pages/Components/Navigation/index.jsx +++ b/pages/Components/Navigation/index.jsx @@ -72,77 +72,147 @@ const HoverMenu = ({ ); }; +const ExpandedMenuMobile = ({isVisible, menuButtonFontSize, isXsScreen, isGalaxyFold, setMenuExpanded}) => { + const handleCollapse = () => { + setMenuExpanded(false) + } + return ( +
+
+
+
+ {isXsScreen ? ( + + + + ) : ( + + + + )} +
+
+
+ - +
+
+
+
+ Portraits + Team + Process +
+
+
+ ); +} + export default function Navigation() { const [containerDisplacement, setContainerDisplacement] = useState(130); const [wordmarkDisplacement, setWordmarkDisplacement] = useState(-130); + const [menuExpanded, setMenuExpanded] = useState(false); const isXsScreen = useMediaQuery({ maxWidth: 500 }); const isGalaxyFold = useMediaQuery({ maxWidth: 340 }); - let menuIconSize = isXsScreen ? 14 : 17; - menuIconSize = isGalaxyFold ? 12 : menuIconSize; + let menuButtonFontSize = isXsScreen ? 45 : 55; + menuButtonFontSize = isGalaxyFold ? 35 : menuButtonFontSize; const handleMouseEnter = () => { setContainerDisplacement(0); setWordmarkDisplacement(0); }; + const handleExpand = () => { + setMenuExpanded(!menuExpanded); + } + return ( -
-
-
- - - -
-
- {isXsScreen ? ( - - - - ) : ( +
+
+
+
- )} +
+
+

+ Menu +

+
-
-

- Menu -

-
+ +
+
+
+
+ {isXsScreen ? ( + + + + ) : ( + + + + )} +
+
+
+ + +
+
- +
); } diff --git a/pages/Gallery/Gallery.module.css b/pages/Gallery/Gallery.module.css index ea5d019..00e8bdd 100644 --- a/pages/Gallery/Gallery.module.css +++ b/pages/Gallery/Gallery.module.css @@ -12,6 +12,12 @@ align-items: center; } +@media (max-width: 992px) { + .filterContainer { + overflow-x: scroll; + } +} + .filterLabel { margin-left: 28px; margin-right: 20px; @@ -47,7 +53,7 @@ .portraitContainer { display: flex; flex-direction: column; - padding: 0 20px 40px 20px; + padding: 0 20px 40px 0px; align-items: center; } @@ -56,17 +62,10 @@ cursor: pointer; } -/* TODO: get hover animation working with images of different aspect ratios */ -/* .thumbnail { - overflow: hidden; - transition: transform 0.3s ease, box-shadow 0.3s ease; +.portraitLabel { + margin-top: 15px; } -.thumbnail:hover { - transform: translateY(-10px); - box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2); -} */ - .portraitThumbnailContainer { height: 50vh; max-height: 600px; @@ -80,10 +79,12 @@ box-shadow 0.3s ease; } -/* .portraitThumbnailContainer:hover { - transform: translateY(-10px); - box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2); -} */ +@media (min-width: 993px) { + .portraitThumbnailContainer:hover { + transform: translateY(-5px); + box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2); + } +} .portraitLabelText:hover { text-decoration: underline; diff --git a/pages/Gallery/index.jsx b/pages/Gallery/index.jsx index e045c6f..1d00a70 100644 --- a/pages/Gallery/index.jsx +++ b/pages/Gallery/index.jsx @@ -11,7 +11,6 @@ const PORTRAITS_PER_PAGE = 12; const NO_MATCHING_FILTERS_MESSAGE = "It looks like there isn't a portrait that matches those filters...yet.\nHave an idea? Contact GrishaColeman@Example.com"; -// TODO: add 'float' hover animation + shadow const Thumbnail = ({ filePath, id, handlePageResize }) => { return ( { export default function Gallery() { const [hasMultiplePages, setHasMultiplePages] = useState(false); - const [bodyHeight, setBodyHeight] = useState(0); const [currentFilters, setCurrentFilters] = useState([]); const [currentPortraits, setCurrentPortraits] = useState(portraits); const [labelWidths, setLabelWidths] = useState({}); + const [maxPortraitWidth, setMaxPortraitWidth] = useState(null); const router = useRouter(); @@ -42,40 +41,44 @@ export default function Gallery() { setCurrentPortraits(portraits); const needsMultiplePages = portraits?.length > PORTRAITS_PER_PAGE; setHasMultiplePages(needsMultiplePages); - - const height = `calc(100vh - 130px - 70px${needsMultiplePages ? " - 30px" : ""})`; - setBodyHeight(height); }, [portraits]); useEffect(() => { const filteredPortraits = portraits.filter((portrait) => currentFilters.every((filter) => portrait.filters?.includes(filter)), ); + const needsMultiplePages = filteredPortraits.length > PORTRAITS_PER_PAGE; + setHasMultiplePages(needsMultiplePages); setCurrentPortraits(filteredPortraits); }, [currentFilters]); const handlePageResize = useCallback(() => { + let minWidth = Infinity; currentPortraits.forEach((_portrait, index) => { const thumbnailElement = document.getElementById(`thumbnail_${index}`); const containerElement = document.getElementById(`container_${index}`); if (thumbnailElement && containerElement) { const thumbnailWidth = thumbnailElement.offsetWidth; - const containerWidth = containerElement.offsetWidth - 40; // minus horizontal padding + const containerWidth = containerElement.offsetWidth; if (thumbnailWidth < containerWidth) { setLabelWidths((prevMap) => ({ ...prevMap, [`label_${index}`]: thumbnailWidth, })); + minWidth = Math.min(minWidth, thumbnailWidth) } else { setLabelWidths((prevMap) => ({ ...prevMap, [`label_${index}`]: containerWidth, })); + minWidth = Math.min(minWidth, containerWidth) } } }); + + setMaxPortraitWidth(minWidth); }, [currentPortraits]); useEffect(() => { @@ -108,7 +111,7 @@ export default function Gallery() { {filters.map((filter) => (
handleFilterSelect(filter)} + onClick={(_e) => handleFilterSelect(filter)} style={ isFilterSelected(filter) ? { @@ -137,12 +140,13 @@ export default function Gallery() { return ( isVisible && (

+ style={{width: labelWidths[`label_${index}`], ...(maxPortraitWidth && { maxWidth: maxPortraitWidth }) }}>
@@ -13,8 +17,28 @@ export default function Home() {
- {/* TODO: make wordmark responsive */} - +
+ +
+
+ {isXsScreen ? ( + + ) : ( + + )} +

The Movement Undercommons explores human movement vernaculars - everyday narratives, songs, and bodies – through the gathering and @@ -59,6 +83,19 @@ export default function Home() { />

+
+

+ FUNDERS +

+
@@ -92,8 +129,8 @@ export default function Home() {
-
-
+
+