assets/_participation_tile: update label styling and update margins t…

…o map fixes #5097
liqd · Jul 6, 2023 · bd5a268 · bd5a268
1 parent fa34263
commit bd5a268
Show file tree

Hide file tree

Showing 8 changed files with 20 additions and 17 deletions.
diff --git a/changelog/5098.md b/changelog/5098.md
@@ -1,2 +1,3 @@
 **Added**
-- Added class and styles to ensure ratings and title can be displayed correctly on mobiles fixes #5098
+- Added class and styles to ensure ratings and title can be displayed correctly on mobiles fixes #5098
+- Updated styling for horizontal tiles to ensure long titles work on all screens and rm uneeded classes to add to the class fixes #5097
diff --git a/meinberlin/apps/contrib/templates/meinberlin_contrib/component_library.html b/meinberlin/apps/contrib/templates/meinberlin_contrib/component_library.html
@@ -1552,7 +1552,7 @@ <h2 id="cl-maplist-item">Map List Item Horizontal - no image</h2>
                                         <div class="participation-tile__body maplist-item">
                                             <div class="participation-tile__content">
                                                 <div class="maplist-item__label-spacer">
-                                                    <span key="" class="label label--secondary maplist-item__label u-spacer-bottom">Topic</span>
+                                                    <span key="" class="label label--secondary maplist-item__label">Topic</span>
                                                 </div>
                                                 <span class="maplist-item__roofline">District</span>
                                                 <h3 class="maplist-item__title">Title of an external project - starting in future</h3>
@@ -1589,7 +1589,7 @@ <h2 id="cl-maplist-item-vertical">Map List Item Vertical</h2>
                                             <div class="participation-tile__body maplist-item">
                                                 <div class="maplist-item__img" style="background-image: url(/static/images/cl-brainstorming.svg); background-position: center; background-repeat: no-repeat;" alt="">
                                                     <div class="maplist-item__label-img">
-                                                        <span key="" class="label label--secondary maplist-item__label u-spacer-bottom">Topic</span>
+                                                        <span key="" class="label label--secondary maplist-item__label">Topic</span>
                                                     </div>
                                                     <span class="maplist-item__img-copyright copyright">© Copyright</span>
                                                 </div>
@@ -1614,7 +1614,7 @@ <h3 class="maplist-item__title">Title of the project - still active</h3>
                                             <div class="participation-tile__body maplist-item">
                                                 <div class="maplist-item__img" style="background-image: url(/static/images/cl-brainstorming.svg); background-position: center; background-repeat: no-repeat;" alt="">
                                                     <div class="maplist-item__label-img">
-                                                        <span key="" class="label label--secondary maplist-item__label u-spacer-bottom">Topic</span>
+                                                        <span key="" class="label label--secondary maplist-item__label">Topic</span>
                                                     </div>
                                                     <span class="maplist-item__img-copyright copyright">© Copyright</span>
                                                 </div>

diff --git a/meinberlin/apps/plans/assets/PlansList.jsx b/meinberlin/apps/plans/assets/PlansList.jsx
@@ -116,7 +116,7 @@ class PlansList extends React.Component {
       return (
         <div className={item.tile_image ? 'maplist-item__label-img' : 'maplist-item__label-spacer'}>
           {topicsList.map(topic =>
-            <span key={topic} className="label label--secondary maplist-item__label u-spacer-bottom">{topic}</span>
+            <span key={topic} className="label label--secondary maplist-item__label">{topic}</span>
           )}
         </div>
       )

diff --git a/meinberlin/apps/plans/assets/PopUp.jsx b/meinberlin/apps/plans/assets/PopUp.jsx
@@ -48,7 +48,7 @@ class PopUp extends React.Component {
     if (this.props.itemTopics) {
       return (
         <div className="maplist-item__labels">
-          {this.props.itemTopics.map(topic => <span key={topic} className="label label--secondary maplist-item__label u-spacer-bottom-half">{topic}</span>)}
+          {this.props.itemTopics.map(topic => <span key={topic} className="label label--secondary maplist-item__label">{topic}</span>)}
         </div>
       )
     }

diff --git a/meinberlin/apps/projects/templates/meinberlin_projects/includes/project_tile.html b/meinberlin/apps/projects/templates/meinberlin_projects/includes/project_tile.html
@@ -18,7 +18,7 @@
                 {% if project.topics %}
                     <div class="maplist-item__label-img">
                         {% for topic in project.topic_names %}
-                        <span class="label label--secondary maplist-item__label u-spacer-bottom-half">
+                        <span class="label label--secondary maplist-item__label">
                         {{ topic }}
                         </span>
                         {% endfor %}
@@ -37,7 +37,7 @@
                 {% if project.topics and not project_image %}
                 <div class="maplist-item__label-spacer">
                     {% for topic in project.topic_names %}
-                    <span class="label label--secondary maplist-item__label u-spacer-bottom-half">
+                    <span class="label label--secondary maplist-item__label">
                     {{ topic }}
                     </span>
                     {% endfor %}

diff --git a/meinberlin/assets/scss/components/_map.scss b/meinberlin/assets/scss/components/_map.scss
@@ -195,10 +195,11 @@
     @media (min-width: $breakpoint-xs) {
         flex-grow: 2;
         min-height: 100vh;
+        margin-top: $spacer;
     }
 
-    @media (max-width: $breakpoint-md-down) {
-        margin-top: $spacer;
+    @media (min-width: $breakpoint-md) {
+        margin-top: 0.25 * $spacer;
     }
 }
 

diff --git a/meinberlin/assets/scss/components/_maplist.scss b/meinberlin/assets/scss/components/_maplist.scss
@@ -1,5 +1,6 @@
 .participation-tile__list {
     max-width: calc(100% + 2rem); // this is all to fit within the frame to be inline with above items
+    margin: 0.5 * $spacer !important;
     display: flex;
     flex-wrap: wrap;
     justify-content: flex-start;
@@ -28,8 +29,8 @@
 }
 
 .maplist-item__label {
-    font-size: $font-size-sm;
     margin-right: 0.5 * $spacer;
+    margin-bottom: 0.5 * $spacer;
 }
 
 .maplist-item__roofline {
@@ -38,7 +39,7 @@
 }
 
 .maplist-item__title {
-    margin-top: $spacer;
+    margin-top: 0.5 * $spacer;
 }
 
 .maplist-item__description {
@@ -115,7 +116,7 @@
     }
 
     .maplist-item__label-img {
-        margin-top: $spacer;
+        margin-top: 0.5 * $spacer;
         margin-left: $spacer;
     }
 }

diff --git a/meinberlin/assets/scss/components/_participation_tile.scss b/meinberlin/assets/scss/components/_participation_tile.scss
@@ -74,22 +74,22 @@
 
 .participation-tile__vertical {
     width: 100%;
-    margin: $spacer;
+    margin: 0.5 * $spacer;
     flex-grow: 1 0 100%;
     min-height: 350px;
 
     @media screen and (min-width: $breakpoint-xs) {
         flex-basis: auto;
         flex-grow: 1;
-        max-width: calc(100% * (1 / 2) - 2rem - 1px);
+        max-width: calc(100% * (1 / 2) - 1rem - 1px);
     }
 
     @media screen and (min-width: $breakpoint) {
-        max-width: calc(100% * (1 / 3) - 2rem - 1px);
+        max-width: calc(100% * (1 / 3) - 1rem - 1px);
     }
 
     @media screen and (min-width: $breakpoint-lg) {
-        max-width: calc(100% * (1 / 4) - 2rem - 1px);
+        max-width: calc(100% * (1 / 4) - 1rem - 1px);
     }
 }