Skip to content

Commit eaf6816

Browse files
jiromaykinjiromaykin
authored
Merge pull request #1603 from maykinmedia/feature/3017-search-desktop-results
💄 [#3017] Desktop design for search results
2 parents 6863910 + 4f3bab8 commit eaf6816

File tree

15 files changed

+135
-101
lines changed

15 files changed

+135
-101
lines changed

‎src/open_inwoner/conf/base.py

+2
Original file line numberDiff line numberDiff line change
@@ -891,6 +891,8 @@
891891
ES_MAX_SIZE = 10000
892892
ES_SUGGEST_SIZE = 5
893893

894+
# Search page pagination trigger
895+
RESULTS_PER_PAGE = config("RESULTS_PER_PAGE", default=9)
894896

895897
# django import-export
896898
IMPORT_EXPORT_USE_TRANSACTIONS = True

‎src/open_inwoner/scss/components/Button/Button.scss

+2-2
Original file line numberDiff line numberDiff line change
@@ -141,11 +141,11 @@
141141
position: relative;
142142
color: var(--color-primary);
143143
filter: saturate(50%);
144-
border-radius: 100px; // This is big to make sure the corners are rounded properly.
144+
border-radius: var(--border-radius-rounded);
145145

146146
&:before {
147147
content: ' ';
148-
border-radius: 100px; // This is big to make sure the corners are rounded properly.
148+
border-radius: var(--border-radius-rounded);
149149
position: absolute;
150150
top: 0;
151151
bottom: 0;

‎src/open_inwoner/scss/components/Form/ChoiceList.scss

+1-1
Original file line numberDiff line numberDiff line change
@@ -114,7 +114,7 @@
114114
width: var(--font-line-height-body-small);
115115
height: var(--font-line-height-body-small);
116116
border: var(--border-width) solid var(--color-gray-dark);
117-
border-radius: 100%;
117+
border-radius: var(--border-radius-rounded);
118118
background-color: var(--color-white);
119119
}
120120

‎src/open_inwoner/scss/components/Form/Radio.scss

+1-1
Original file line numberDiff line numberDiff line change
@@ -32,7 +32,7 @@
3232
width: var(--font-line-height-body-small);
3333
height: var(--font-line-height-body-small);
3434
border: var(--border-width) solid var(--color-gray-dark);
35-
border-radius: 100%;
35+
border-radius: var(--border-radius-rounded);
3636
background-color: var(--color-white);
3737
}
3838
}

‎src/open_inwoner/scss/components/Header/Header.scss

+1-1
Original file line numberDiff line numberDiff line change
@@ -51,7 +51,7 @@ $vm: var(--spacing-large);
5151
width: 6px;
5252
display: inline-block;
5353
border: 2px solid white;
54-
border-radius: 100px; // This is big to make sure the corners are rounded properly.
54+
border-radius: var(--border-radius-rounded);
5555
}
5656
}
5757

‎src/open_inwoner/scss/components/Pagination/Pagination.scss

+4-14
Original file line numberDiff line numberDiff line change
@@ -26,22 +26,12 @@
2626
text-decoration: none;
2727

2828
&--active {
29-
color: var(--color-primary);
30-
31-
&:before {
32-
background-color: var(--color-primary);
33-
border-radius: 100px;
34-
bottom: 0;
35-
content: ' ';
36-
left: 0;
37-
opacity: 0.15;
38-
position: absolute;
39-
right: 0;
40-
top: 0;
41-
}
29+
color: var(--color-white);
30+
background-color: var(--color-primary);
31+
border-radius: var(--border-radius-rounded);
4232

4333
&:hover {
44-
color: var(--color-body);
34+
background-color: var(--color-body);
4535
}
4636
}
4737

‎src/open_inwoner/scss/components/SearchResults/SearchResults.scss

+62-34
Original file line numberDiff line numberDiff line change
@@ -3,22 +3,20 @@
33
display: flex;
44
flex-direction: column;
55
gap: var(--spacing-large);
6-
}
76

8-
&__title {
9-
margin: var(--spacing-giant) 0;
10-
display: flex;
11-
justify-content: space-between;
12-
align-items: center;
7+
.grid {
8+
gap: var(--spacing-large);
9+
}
1310
}
1411

1512
&__title-small {
16-
color: var(--color-black);
13+
color: var(--color-body);
1714
font-family: var(--font-family-body);
1815
font-size: var(--font-size-body);
1916
letter-spacing: 0;
2017
line-height: var(--font-line-height-body);
2118
font-weight: normal;
19+
margin: var(--spacing-extra-large) 0 var(--row-height) 0;
2220
}
2321

2422
&__item {
@@ -28,38 +26,68 @@
2826
letter-spacing: 0;
2927
line-height: var(--font-line-height-body);
3028
text-decoration: none;
31-
}
3229

33-
&__item-title {
34-
font-size: var(--utrecht-heading-3-font-size);
35-
line-height: var(--utrecht-heading-3-line-height);
36-
letter-spacing: 0;
37-
margin: 0 0 6px;
38-
}
30+
.utrecht-heading-3.search-results__item-title {
31+
margin: 0 0 var(--spacing-large) 0;
32+
}
3933

40-
&__item-info-container {
41-
display: grid;
42-
grid-template-columns: 1fr auto;
43-
gap: var(--spacing-large);
44-
align-items: end;
34+
.utrecht-paragraph {
35+
margin: 0;
36+
}
4537
}
4638

47-
&__item-intro {
48-
color: var(--color-black);
49-
font-family: var(--font-family-body);
50-
font-size: var(--font-size-body);
51-
letter-spacing: 0;
52-
line-height: var(--font-line-height-body);
53-
margin: 0;
39+
.link {
40+
padding-top: var(--card-spacing);
5441
}
5542

56-
&__item-type {
57-
color: var(--color-black);
58-
font-family: var(--font-family-body);
59-
font-size: var(--font-size-body);
60-
letter-spacing: 0;
61-
line-height: var(--font-line-height-body);
62-
text-align: right;
63-
margin: 0;
43+
&--no-results {
44+
display: flex;
45+
flex-direction: column;
46+
border-radius: var(--border-radius);
47+
background-color: var(--color-info-lighter);
48+
color: var(--color-info-darker);
49+
50+
&-column {
51+
padding: var(--spacing-extra-large) var(--spacing-extra-large) 0
52+
var(--spacing-extra-large);
53+
54+
.search-results__title {
55+
color: var(--color-info-darker);
56+
margin: 0;
57+
}
58+
59+
.ul {
60+
margin-block-start: var(--spacing-giant);
61+
margin-inline-start: 11px;
62+
padding-inline-start: 0;
63+
}
64+
65+
.utrecht-paragraph,
66+
.ul .li {
67+
color: var(--color-info-darker);
68+
}
69+
70+
*[class*='icons'] {
71+
margin-top: var(--spacing-small);
72+
}
73+
74+
&:first-child {
75+
@media (min-width: 768px) {
76+
padding: var(--spacing-extra-large) 0 var(--spacing-extra-large)
77+
var(--spacing-extra-large);
78+
}
79+
}
80+
81+
&:last-child {
82+
padding-top: var(--spacing-medium);
83+
@media (min-width: 768px) {
84+
padding-top: var(--spacing-extra-large);
85+
}
86+
}
87+
}
88+
89+
@media (min-width: 768px) {
90+
flex-direction: row;
91+
}
6492
}
6593
}

‎src/open_inwoner/scss/components/Status/_StatusList.scss

+1-1
Original file line numberDiff line numberDiff line change
@@ -86,7 +86,7 @@
8686
&::before {
8787
content: '';
8888
background-color: var(--color-white);
89-
border-radius: 50%;
89+
border-radius: var(--border-radius-rounded);
9090
top: 2px;
9191
left: 2px;
9292
height: 20px;

‎src/open_inwoner/scss/components/Step/_StepIndicator.scss

+1-1
Original file line numberDiff line numberDiff line change
@@ -39,7 +39,7 @@
3939
&__list-item:before {
4040
align-items: center;
4141
border: var(--border-width) solid var(--color-gray-dark);
42-
border-radius: 100%;
42+
border-radius: var(--border-radius-rounded);
4343
content: counter(step-indicator-list-counter);
4444
display: flex;
4545
flex-shrink: 0;

‎src/open_inwoner/scss/components/Tags/Tag.scss

+3-3
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
.tag {
2-
border-radius: var(--border-radius);
3-
background-color: var(--color-gray-light);
4-
color: var(--font-color-body);
2+
border-radius: var(--border-radius-rounded);
3+
background-color: var(--color-info-lightest);
4+
color: var(--color-info-darker);
55
font-family: var(--font-family-body);
66
font-size: var(--font-size-body-small);
77
line-height: var(--font-line-height-body-small);

‎src/open_inwoner/scss/views/App.scss

+2
Original file line numberDiff line numberDiff line change
@@ -22,6 +22,7 @@
2222
--border-width-thin: 1px;
2323
--border-radius: 3px;
2424
--border-radius-large: 8px;
25+
--border-radius-rounded: 999px;
2526

2627
// Color.
2728

@@ -161,6 +162,7 @@
161162
var(--color-info-s),
162163
calc(var(--color-info-l) + 10%)
163164
);
165+
--color-info-lightest: hsl(210, 70%, 96%);
164166
--color-info-darker: hsl(
165167
var(--color-info-h),
166168
var(--color-info-s),

‎src/open_inwoner/search/results.py

-7
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,5 @@
11
from collections import OrderedDict
22
from dataclasses import dataclass
3-
from operator import attrgetter
43
from typing import Type
54

65
from django.db import models
@@ -81,12 +80,6 @@ def total_buckets(self) -> list[FacetBucket]:
8180
def choices(self) -> list:
8281
return [(b.slug, b.label) for b in self.buckets]
8382

84-
def total_choices(self) -> list:
85-
return [
86-
(b.slug, b.label)
87-
for b in sorted(self.total_buckets, key=attrgetter("slug"))
88-
]
89-
9083

9184
@dataclass()
9285
class ProductSearchResult:

‎src/open_inwoner/search/tests/test_page.py

+8-5
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,4 @@
1+
from django.conf import settings
12
from django.test import override_settings, tag
23
from django.urls import reverse_lazy
34

@@ -110,7 +111,9 @@ def test_search_with_filter(self):
110111
self.assertEqual(results[0].slug, self.product1.slug)
111112

112113
def test_pagination_links(self):
113-
products = ProductFactory.create_batch(20, content="content")
114+
products = ProductFactory.create_batch(
115+
settings.RESULTS_PER_PAGE, content="content"
116+
)
114117
self.tag.products.add(*products)
115118
self.update_index()
116119

@@ -119,7 +122,7 @@ def test_pagination_links(self):
119122
self.assertEqual(response.status_code, 200)
120123

121124
results = response.context["paginator"].object_list
122-
self.assertEqual(len(results), 21)
125+
self.assertEqual(len(results), settings.RESULTS_PER_PAGE + 1)
123126

124127
pagination_div = response.html.find("div", {"class": "pagination"})
125128
pagination_links = pagination_div.find_all("a")
@@ -230,7 +233,7 @@ def test_basic_search(self):
230233
# search to find both products
231234
page.goto(self.live_reverse("search:search", params={"query": "summary"}))
232235
page.wait_for_url(self.live_reverse("search:search", star=True))
233-
expect(page.locator(".search-results__item")).to_have_count(2)
236+
expect(page.locator(".card")).to_have_count(2)
234237

235238
def test_search_form_delegates_copy_query_value(self):
236239
context = self.browser.new_context()
@@ -270,11 +273,11 @@ def _do_search(query, form_id, open_menu):
270273

271274
# search from this page
272275
_do_search("summary", form_id, open_menu)
273-
expect(page.locator(".search-results__item")).to_have_count(2)
276+
expect(page.locator(".card")).to_have_count(2)
274277

275278
# perform another search from the search results page
276279
_do_search("other", form_id, open_menu)
277-
expect(page.locator(".search-results__item")).to_have_count(1)
280+
expect(page.locator(".card")).to_have_count(1)
278281

279282
page.close()
280283
context.close()

‎src/open_inwoner/search/views.py

+3-2
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
import logging
22

3+
from django.conf import settings
34
from django.contrib import messages
45
from django.core.paginator import InvalidPage, Paginator
56
from django.http import Http404
@@ -28,7 +29,7 @@ class SearchView(
2829
):
2930
form_class = SearchForm
3031
template_name = "pages/search.html"
31-
paginate_by = 20
32+
paginate_by = settings.RESULTS_PER_PAGE
3233
paginator_class = Paginator
3334
page_kwarg = "page"
3435
success_url = reverse_lazy("search:search")
@@ -114,7 +115,7 @@ def search(self, form):
114115
# update form fields with choices
115116
for facet in results.facets:
116117
if facet.name in form.fields:
117-
form.fields[facet.name].choices = facet.total_choices()
118+
form.fields[facet.name].choices = facet.choices()
118119

119120
# paginate
120121
paginator_dict = self.paginate_with_context(results.results)

0 commit comments

Comments
 (0)