overall style changes and improvements

liqd · Nov 6, 2024 · 206239d · 206239d
1 parent 0147eb5
commit 206239d
Show file tree

Hide file tree

Showing 5 changed files with 38 additions and 18 deletions.
diff --git a/meinberlin/assets/scss/components_user_facing/_project-tile.scss b/meinberlin/assets/scss/components_user_facing/_project-tile.scss
@@ -37,9 +37,11 @@ a.project-tile {
     object-fit: cover;
     max-width: 100%;
     height: auto;
-    max-height: 100%;
-    width: auto;
-    aspect-ratio: 1 / 1;
+    aspect-ratio: 4 / 3;
+
+    .project-tile--horizontal & {
+        aspect-ratio: 112 / 115;
+    }
 }
 
 .project-tile__body {

diff --git a/meinberlin/assets/scss/components_user_facing/_projects-list.scss b/meinberlin/assets/scss/components_user_facing/_projects-list.scss
@@ -83,12 +83,20 @@
     @media screen and (min-width: $breakpoint-tablet) {
         display: flex;
         align-items: center;
+        padding-bottom: .8em;
+    }
+}
+
+.projects-list__status--mobile {
+    margin-bottom: 1em;
+
+    @media screen and (min-width: $breakpoint-tablet) {
+        display: none;
     }
 }
 
 .projects-list__wrapper--combined .projects-list__list-meta:not(.projects-list__list-meta--no-results) {
     border-bottom: 1px solid $gray-lighter;
-    padding-bottom: .8em;
 }
 
 .projects-list__list-meta--no-results div:first-child {

diff --git a/meinberlin/react/projects/ProjectTile.jsx b/meinberlin/react/projects/ProjectTile.jsx
@@ -42,8 +42,8 @@ const ProjectTile = ({ project, isHorizontal, topicChoices, isMapTile }) => {
         <ImageWithPlaceholder
           src={project.tile_image}
           alt={project.tile_image_alt_text ?? altImgStr}
-          height={245}
-          width={isHorizontal ? 245 : 315}
+          height={490}
+          width={isHorizontal ? 490 : 630}
           className="project-tile__image"
         />
         <span className="project-tile__copyright">

diff --git a/meinberlin/react/projects/ProjectsListMapBox.jsx b/meinberlin/react/projects/ProjectsListMapBox.jsx
@@ -85,11 +85,6 @@ const ProjectsListMapBox = ({
     fetchItems()
   }, [fetchItems])
 
-  useEffect(() => {
-    // toggle between full width (when map + list) and narrow (when list only)
-    document.querySelector('.mb-project-overview').classList.toggle('fullwidth', !!showMap)
-  }, [showMap])
-
   let status = nothingStr
 
   if (loading) {
@@ -104,6 +99,12 @@ const ProjectsListMapBox = ({
     <div>
       <div className="projects-list">
         <h1 className="aural">{pageHeader}</h1>
+        <div
+          role="status"
+          className="projects-list__status projects-list__status--mobile"
+        >
+          {status}
+        </div>
         <IconSwitch
           fullWidth
           className="projects-list__icon-switch"
@@ -115,15 +116,21 @@ const ProjectsListMapBox = ({
               icon: 'fa fa-list',
               id: 'show_list',
               isActive: !showMap,
-              handleClick: () => setShowMap(false)
+              handleClick: () => {
+                document.querySelector('.mb-project-overview').classList.remove('fullwidth')
+                setShowMap(false)
+              }
             },
             {
               ariaLabel: showMapAriaStr,
               label: mapStr,
               icon: 'fa fa-map',
               id: 'show_map',
               isActive: showMap,
-              handleClick: () => setShowMap(true)
+              handleClick: () => {
+                document.querySelector('.mb-project-overview').classList.add('fullwidth')
+                setShowMap(true)
+              }
             }
           ]}
         />
@@ -141,7 +148,10 @@ const ProjectsListMapBox = ({
               <ToggleSwitch
                 uniqueId="map-switch"
                 className="projects-list__toggle-switch"
-                toggleSwitch={() => setShowMap(!showMap)}
+                toggleSwitch={() => {
+                  document.querySelector('.mb-project-overview').classList.toggle('fullwidth', !showMap)
+                  setShowMap(!showMap)
+                }}
                 onSwitchStr={showMapStr}
                 checked={showMap}
               />
@@ -159,9 +169,9 @@ const ProjectsListMapBox = ({
                 attribution={attribution}
                 items={items}
                 bounds={bounds}
-                 // currentDistrict={this.state.district}
-                 // nonValue={districtnames[districtnames.length - 1]}
-                 // districts={districts}
+               // currentDistrict={this.state.district}
+               // nonValue={districtnames[districtnames.length - 1]}
+               // districts={districts}
                 baseUrl={baseUrl}
                 mapboxToken={mapboxToken}
                 omtToken={omtToken}

diff --git a/meinberlin/react/projects/ProjectsMap.jsx b/meinberlin/react/projects/ProjectsMap.jsx
@@ -20,7 +20,7 @@ const Markers = React.memo(({ items, topicChoices }) => {
           .map(item => ({ ...item.point, properties: item }))
           .map((project) => (
             <GeoJsonMarker
-              key={project.title}
+              key={project.properties.title}
               feature={project}
               eventHandlers={{
                 popupopen: () => setActiveProject(project),