[#3017] Processed code review for desktop search results + refactor

maykinmedia · Feb 18, 2025 · 9eedab5 · 9eedab5
1 parent c285554
commit 9eedab5
Show file tree

Hide file tree

Showing 10 changed files with 58 additions and 31 deletions.
diff --git a/src/open_inwoner/scss/components/Button/Button.scss b/src/open_inwoner/scss/components/Button/Button.scss
@@ -141,11 +141,11 @@
     position: relative;
     color: var(--color-primary);
     filter: saturate(50%);
-    border-radius: 100px; // This is big to make sure the corners are rounded properly.
+    border-radius: var(--border-radius-rounded);
 
     &:before {
       content: ' ';
-      border-radius: 100px; // This is big to make sure the corners are rounded properly.
+      border-radius: var(--border-radius-rounded);
       position: absolute;
       top: 0;
       bottom: 0;

diff --git a/src/open_inwoner/scss/components/Form/ChoiceList.scss b/src/open_inwoner/scss/components/Form/ChoiceList.scss
@@ -114,7 +114,7 @@
     width: var(--font-line-height-body-small);
     height: var(--font-line-height-body-small);
     border: var(--border-width) solid var(--color-gray-dark);
-    border-radius: 100%;
+    border-radius: var(--border-radius-rounded);
     background-color: var(--color-white);
   }
 

diff --git a/src/open_inwoner/scss/components/Form/Radio.scss b/src/open_inwoner/scss/components/Form/Radio.scss
@@ -32,7 +32,7 @@
       width: var(--font-line-height-body-small);
       height: var(--font-line-height-body-small);
       border: var(--border-width) solid var(--color-gray-dark);
-      border-radius: 100%;
+      border-radius: var(--border-radius-rounded);
       background-color: var(--color-white);
     }
   }

diff --git a/src/open_inwoner/scss/components/Header/Header.scss b/src/open_inwoner/scss/components/Header/Header.scss
@@ -51,7 +51,7 @@ $vm: var(--spacing-large);
       width: 6px;
       display: inline-block;
       border: 2px solid white;
-      border-radius: 100px; // This is big to make sure the corners are rounded properly.
+      border-radius: var(--border-radius-rounded);
     }
   }
 

diff --git a/src/open_inwoner/scss/components/SearchResults/SearchResults.scss b/src/open_inwoner/scss/components/SearchResults/SearchResults.scss
@@ -3,6 +3,10 @@
     display: flex;
     flex-direction: column;
     gap: var(--spacing-large);
+
+    .grid {
+      gap: var(--spacing-large);
+    }
   }
 
   &__title-small {
@@ -12,7 +16,7 @@
     letter-spacing: 0;
     line-height: var(--font-line-height-body);
     font-weight: normal;
-    margin: var(--spacing-extra-large) 0 var(--row-height-giant) 0;
+    margin: var(--spacing-extra-large) 0 var(--row-height) 0;
   }
 
   &__item {
@@ -36,21 +40,28 @@
     padding-top: var(--card-spacing);
   }
 
-  &--none {
+  &--no-results {
     display: flex;
+    flex-direction: column;
     border-radius: var(--border-radius);
     background-color: var(--color-info-lighter);
     color: var(--color-info-darker);
-    margin-top: var(--row-height);
 
     &-column {
-      padding: var(--spacing-extra-large) 0 var(--spacing-extra-large)
+      padding: var(--spacing-extra-large) var(--spacing-extra-large) 0
         var(--spacing-extra-large);
 
       .search-results__title {
         color: var(--color-info-darker);
         margin: 0;
       }
+
+      .ul {
+        margin-block-start: var(--spacing-giant);
+        margin-inline-start: 11px;
+        padding-inline-start: 0;
+      }
+
       .utrecht-paragraph,
       .ul .li {
         color: var(--color-info-darker);
@@ -59,6 +70,24 @@
       *[class*='icons'] {
         margin-top: var(--spacing-small);
       }
+
+      &:first-child {
+        @media (min-width: 768px) {
+          padding: var(--spacing-extra-large) 0 var(--spacing-extra-large)
+            var(--spacing-extra-large);
+        }
+      }
+
+      &:last-child {
+        padding-top: var(--spacing-medium);
+        @media (min-width: 768px) {
+          padding-top: var(--spacing-extra-large);
+        }
+      }
+    }
+
+    @media (min-width: 768px) {
+      flex-direction: row;
     }
   }
 }
diff --git a/src/open_inwoner/scss/components/Status/_StatusList.scss b/src/open_inwoner/scss/components/Status/_StatusList.scss
@@ -86,7 +86,7 @@
       &::before {
         content: '';
         background-color: var(--color-white);
-        border-radius: 50%;
+        border-radius: var(--border-radius-rounded);
         top: 2px;
         left: 2px;
         height: 20px;

diff --git a/src/open_inwoner/scss/components/Step/_StepIndicator.scss b/src/open_inwoner/scss/components/Step/_StepIndicator.scss
@@ -39,7 +39,7 @@
   &__list-item:before {
     align-items: center;
     border: var(--border-width) solid var(--color-gray-dark);
-    border-radius: 100%;
+    border-radius: var(--border-radius-rounded);
     content: counter(step-indicator-list-counter);
     display: flex;
     flex-shrink: 0;

diff --git a/src/open_inwoner/scss/components/Tags/Tag.scss b/src/open_inwoner/scss/components/Tags/Tag.scss
@@ -1,5 +1,5 @@
 .tag {
-  border-radius: 100px; // This is big to make sure the corners are rounded properly.
+  border-radius: var(--border-radius-rounded);
   background-color: var(--color-info-lightest);
   color: var(--color-info-darker);
   font-family: var(--font-family-body);

diff --git a/src/open_inwoner/scss/views/App.scss b/src/open_inwoner/scss/views/App.scss
@@ -22,6 +22,7 @@
   --border-width-thin: 1px;
   --border-radius: 3px;
   --border-radius-large: 8px;
+  --border-radius-rounded: 999px;
 
   // Color.
 

diff --git a/src/open_inwoner/templates/pages/search.html b/src/open_inwoner/templates/pages/search.html
@@ -34,25 +34,22 @@ <h2 class="utrecht-heading-2">{% trans "Zoekfilters" %}</h2>
             {% if paginator.count %}
                 <div class="search-results">
                     <div class="search-results__list">
-                        <div class="card__grid">
                             {% render_grid %}
                                 {% for hit in page_obj %}
-                                    {% render_column start=0 span=12 %}
-                                        <a href="{% url 'products:product_detail' hit.slug %}" class="card card__description-card search-results__item">
-                                            <div class="card__body">
-                                                <h3 class="utrecht-heading-3 search-results__item-title">{{ hit.name }}</h3>
-                                                <p class="utrecht-paragraph search-results__item-intro">{{ hit.summary }}</p>
-                                                <span class="link link--icon link--primary">
-                                                <span class="link__text">Bekijk resultaat</span>
-                                                {% icon icon="arrow_forward" icon_position="after" primary=True outlined=True %}
-                                            </span>
-                                            </div>
-                                        </a>
-                                    {% endrender_column %}
+                                <div class="column column--start-0 {% if search_filter_categories or search_filter_tags or search_filter_organizations %}column--span-12{% else %}column--span-8{% endif %}">
+                                    <a href="{% url 'products:product_detail' hit.slug %}" class="card card__description-card search-results__item">
+                                        <div class="card__body card__body--tabled">
+                                            <h3 class="utrecht-heading-3 search-results__item-title">{{ hit.name }}</h3>
+                                            <p class="utrecht-paragraph search-results__item-intro">{{ hit.summary }}</p>
+                                            <span class="link link--icon link--primary">
+                                                    <span class="link__text">Bekijk resultaat</span>
+                                                    {% icon icon="arrow_forward" icon_position="after" primary=True outlined=True %}
+                                                </span>
+                                        </div>
+                                    </a>
+                                </div>
                                 {% endfor %}
                             {% endrender_grid %}
-                        </div>
-                        {# end card grid#}
                     </div>
                 </div>
 
@@ -90,10 +87,10 @@ <h4 class="utrecht-heading-4">{% trans "Feedback" %}</h4>
             {% else %}
 
                 {% render_grid %}
-                    {% render_column start=0 span=10 %}
-                        <div class="search-results search-results--none">
-                            <div class="search-results--none-column">{% icon icon="info" icon_position="before" extra_classes="icon--info" outlined=True %}</div>
-                            <div class="search-results--none-column">
+                    {% render_column start=0 span=8 %}
+                        <div class="search-results search-results--no-results">
+                            <div class="search-results--no-results-column">{% icon icon="info" icon_position="before" extra_classes="icon--info" outlined=True %}</div>
+                            <div class="search-results--no-results-column">
                                 <h2 class="utrecht-heading-2 search-results__title">
                                     {% trans "We konden geen zoekresultaten vinden" %}
                                 </h2>