💄 [#1169] Add content classes for exceptions in card grids

maykinmedia · Mar 21, 2023 · e0bf5ac · e0bf5ac
1 parent 7aa99f7
commit e0bf5ac
Show file tree

Hide file tree

Showing 10 changed files with 86 additions and 37 deletions.
diff --git a/src/open_inwoner/scss/components/Card/Card.scss b/src/open_inwoner/scss/components/Card/Card.scss
@@ -11,7 +11,6 @@
   box-sizing: border-box;
   display: flex;
   flex-direction: column;
-  max-width: 230px;
   position: relative;
   text-decoration: none;
 

diff --git a/src/open_inwoner/scss/components/CardContainer/CardContainer.scss b/src/open_inwoner/scss/components/CardContainer/CardContainer.scss
@@ -2,7 +2,7 @@
   --card-columns: 1;
   display: grid;
   gap: var(--gutter-width);
-  grid-template-columns: repeat(auto-fit, 228px);
+  grid-template-columns: repeat(var(--card-columns), 1fr);
 
   @media (min-width: 768px) {
     --card-columns: 4;

diff --git a/src/open_inwoner/scss/components/Header/AnchorMenu.scss b/src/open_inwoner/scss/components/Header/AnchorMenu.scss
@@ -17,7 +17,7 @@
   width: 100%;
   list-style: none;
   margin: 0;
-  padding: 0;
+  padding: var(--spacing-extra-large);
   z-index: 1002;
 
   &--desktop {
@@ -62,11 +62,13 @@
 
   .link {
     box-sizing: border-box;
-    padding: var(--spacing-large);
+    padding: var(--spacing-large) var(--spacing-large) var(--spacing-large)
+      var(--spacing-large);
 
     @media (min-width: 768px) {
       border-left: var(--border-width) solid;
       border-color: var(--color-gray-light);
+      padding: var(--spacing-large);
     }
   }
 

diff --git a/src/open_inwoner/scss/views/Categories.scss b/src/open_inwoner/scss/views/Categories.scss
@@ -0,0 +1,24 @@
+.categories {
+  &__content {
+    .card-container {
+      grid-template-columns: repeat(auto-fit, 228px);
+
+      .card {
+        max-width: 360px;
+      }
+    }
+  }
+
+  &__products {
+    margin-top: var(--gutter-width);
+
+    .card-container {
+      margin-top: var(--gutter-width);
+      grid-template-columns: repeat(var(--card-columns), 1fr);
+
+      .card {
+        max-width: 100%;
+      }
+    }
+  }
+}
diff --git a/src/open_inwoner/scss/views/Home.scss b/src/open_inwoner/scss/views/Home.scss
@@ -0,0 +1,12 @@
+/// Cards on Home Page and Theme page should break naturally
+
+.home,
+.home-user {
+  .card-container {
+    grid-template-columns: repeat(auto-fit, 228px);
+
+    .card {
+      max-width: 360px;
+    }
+  }
+}
diff --git a/src/open_inwoner/scss/views/_index.scss b/src/open_inwoner/scss/views/_index.scss
@@ -1,5 +1,7 @@
 @import './App.scss';
 @import './body';
+@import './Categories.scss';
+@import './Home.scss';
 @import './Plans.scss';
 @import './product_detail';
 @import './view';
diff --git a/src/open_inwoner/templates/pages/category/detail.html b/src/open_inwoner/templates/pages/category/detail.html
@@ -10,39 +10,43 @@
 {% endblock header_image %}
 
 {% block content %}
-    <h1 class="h1">
-        {{ object.name }}
-        {% if request.user.is_staff %}
-            {% button icon="edit" text=_("Open in admin") hide_text=True href="admin:pdc_category_change" object_id=object.pk %}
-        {% endif %}
-    </h1>
-    <p class="p">{{ object.description|linebreaksbr }}</p>
+    <div class="categories__content">
+        <h1 class="h1">
+            {{ object.name }}
+            {% if request.user.is_staff %}
+                {% button icon="edit" text=_("Open in admin") hide_text=True href="admin:pdc_category_change" object_id=object.pk %}
+            {% endif %}
+        </h1>
+        <p class="p">{{ object.description|linebreaksbr }}</p>
 
-    {% if subcategories %}
-        {% card_container subcategories=subcategories parent_category=object %}
-    {% endif %}
+        {% if subcategories %}
+            {% card_container subcategories=subcategories parent_category=object %}
+        {% endif %}
 
-    {% if products %}
-        {% card_container products=products small=True parent=object %}
-    {% endif %}
+        {% if products %}
+            <div class="categories__products">
+            {% card_container products=products small=True parent=object %}
+            </div>
+        {% endif %}
 
-    {% if category.question_set.all %}
-        {% render_grid %}
-            {% render_column span=6 %}
-                {% faq category.question_set.all %}
-            {% endrender_column %}
-        {% endrender_grid %}
-    {% endif %}
+        {% if category.question_set.all %}
+            {% render_grid %}
+                {% render_column span=6 %}
+                    {% faq category.question_set.all %}
+                {% endrender_column %}
+            {% endrender_grid %}
+        {% endif %}
 
-    {% if questionnaire_roots %}
-        <div class="grid">
-            <div class="column column--start-1 column--span-6 ">
-                <aside class="questionnaire">
-                    <h2 class="h2">{{configurable_text.questionnaire_page.select_questionnaire_title}}</h2>
-                    {% optional_paragraph configurable_text.questionnaire_page.select_questionnaire_intro %}
-                    {% questionnaire root_nodes=questionnaire_roots %}
-                </aside>
+        {% if questionnaire_roots %}
+            <div class="grid">
+                <div class="column column--start-1 column--span-6 ">
+                    <aside class="questionnaire">
+                        <h2 class="h2">{{configurable_text.questionnaire_page.select_questionnaire_title}}</h2>
+                        {% optional_paragraph configurable_text.questionnaire_page.select_questionnaire_intro %}
+                        {% questionnaire root_nodes=questionnaire_roots %}
+                    </aside>
+                </div>
             </div>
-        </div>
-    {% endif %}
+        {% endif %}
+    </div>
 {% endblock content %}
diff --git a/src/open_inwoner/templates/pages/category/list.html b/src/open_inwoner/templates/pages/category/list.html
@@ -2,8 +2,10 @@
 {% load card_tags %}
 
 {% block content %}
-<h1 class="h1">{{configurable_text.theme_page.theme_title}}</h1>
-<p class="p">{{configurable_text.theme_page.theme_intro|linebreaksbr}}</p>
+<div class="categories__content">
+    <h1 class="h1">{{configurable_text.theme_page.theme_title}}</h1>
+    <p class="p">{{configurable_text.theme_page.theme_intro|linebreaksbr}}</p>
 
-{% card_container categories=object_list %}
+    {% card_container categories=object_list %}
+</div>
 {% endblock content %}
diff --git a/src/open_inwoner/templates/pages/home.html b/src/open_inwoner/templates/pages/home.html
@@ -8,6 +8,7 @@
 {% endblock header_image %}
 
 {% block content %}
+    <div class="home">
     {% block user_content %}
         <div class="grid__welcome">
             <h1 class="h1">{{configurable_text.home_page.home_welcome_title}}</h1>
@@ -45,4 +46,5 @@ <h2 class="h2">{{configurable_text.home_page.home_map_title}}</h2>
     {% with centroid=product_locations.get_centroid %}
         {% map centroid.lat centroid.lng geojson_feature_collection=product_locations.get_geojson_feature_collection %}
     {% endwith %}
+    </div>
 {% endblock %}
diff --git a/src/open_inwoner/templates/pages/user-home.html b/src/open_inwoner/templates/pages/user-home.html
@@ -4,6 +4,7 @@
 {% block header_image %}{% endblock header_image %}
 
 {% block user_content %}
+    <div class="home-user">
     <h1 class="h1">{{ configurable_text.home_page.home_welcome_title }} {{ request.user.get_full_name }}</h1>
     <p class="p">{{ configurable_text.home_page.home_welcome_intro|linebreaksbr }}</p>
 
@@ -35,4 +36,5 @@ <h3 class="h3">{{ plan.title }}</h3>
             <p class="p">{{configurable_text.plans_page.plans_no_plans_message}}</p>
         {% endif %}
     {% endif %}
+    </div>
 {% endblock user_content %}