Skip to content

Commit 1f088f1

Browse files
jiromaykinjiromaykin
committed
[#2347] Converted TD's to TH's in product pages
1 parent dedbd14 commit 1f088f1

File tree

3 files changed

+131
-57
lines changed

3 files changed

+131
-57
lines changed

‎src/open_inwoner/scss/components/Table/Table.scss

+106-54
Original file line numberDiff line numberDiff line change
@@ -12,6 +12,27 @@
1212
scrollbar-color: var(--color-secondary) var(--color-gray-lightest);
1313
-webkit-overflow-scrolling: touch;
1414

15+
/// Scrollbar style for tables on mobile
16+
17+
@media (min-width: 768px) {
18+
display: table;
19+
}
20+
21+
&::-webkit-scrollbar {
22+
width: 8px;
23+
height: 8px;
24+
}
25+
26+
&::-webkit-scrollbar-track {
27+
background: var(--color-gray-lightest);
28+
}
29+
30+
&::-webkit-scrollbar-thumb {
31+
background-color: var(--color-secondary);
32+
border-radius: 6px;
33+
border: 2px solid var(--color-secondary);
34+
}
35+
1536
&--space-medium {
1637
margin-top: var(--spacing-medium);
1738
}
@@ -40,43 +61,6 @@
4061
}
4162
}
4263

43-
&--content {
44-
margin-top: var(--spacing-giant);
45-
margin-bottom: var(--spacing-giant);
46-
47-
.table__item {
48-
border-right: 1px solid var(--color-gray-light);
49-
}
50-
51-
.table__item:first-of-type {
52-
font-weight: bold;
53-
padding-left: 0;
54-
}
55-
56-
.table__item:not(:first-of-type) {
57-
text-align: right;
58-
padding-right: var(--spacing-giant);
59-
}
60-
61-
.table__header:first-of-type {
62-
padding-left: 0;
63-
}
64-
65-
.table__header:not(:first-of-type) {
66-
text-align: right;
67-
padding-right: var(--spacing-giant);
68-
}
69-
}
70-
71-
&__heading {
72-
.table__item {
73-
color: var(--color-gray-lighter);
74-
font-size: 16px;
75-
letter-spacing: 0;
76-
line-height: var(--font-line-height-body-medium);
77-
}
78-
}
79-
8064
&__item {
8165
padding: var(--spacing-medium);
8266
border-bottom: 1px solid;
@@ -119,6 +103,72 @@
119103
}
120104
}
121105

106+
/// Product pages
107+
108+
&--content {
109+
display: table;
110+
border-collapse: separate;
111+
margin-top: var(--spacing-giant);
112+
margin-bottom: var(--spacing-giant);
113+
114+
.table__item {
115+
border-right: 1px solid var(--color-gray-light);
116+
word-wrap: break-word;
117+
text-wrap: initial;
118+
}
119+
120+
.table__item:first-of-type {
121+
border-left: 1px solid var(--color-gray-light);
122+
font-weight: bold;
123+
}
124+
125+
.table__item:not(:first-of-type) {
126+
text-align: right;
127+
padding-right: var(--spacing-giant);
128+
}
129+
130+
.tr:first-child .table__header {
131+
font-family: var(--font-family-heading);
132+
font-weight: bold;
133+
border-top: 1px solid var(--color-gray-dark-900);
134+
border-bottom: 1px solid var(--color-gray-dark-900);
135+
}
136+
137+
.table__header:first-of-type {
138+
border-left: 1px solid var(--color-gray-dark-900);
139+
border-top-left-radius: var(--border-radius);
140+
}
141+
142+
.table__header:last-of-type {
143+
border-right: 1px solid var(--color-gray-dark-900);
144+
border-top-right-radius: var(--border-radius);
145+
}
146+
147+
.table__header:not(:first-of-type) {
148+
text-align: right;
149+
padding-right: var(--spacing-giant);
150+
}
151+
152+
.table__row:last-of-type .table__item:first-of-type {
153+
border-bottom-left-radius: var(--border-radius);
154+
}
155+
156+
.table__row:last-of-type .table__item:last-of-type {
157+
border-bottom-right-radius: var(--border-radius);
158+
}
159+
}
160+
161+
/// Plans & Actions
162+
163+
&__heading {
164+
.table__item {
165+
color: var(--color-gray-lighter);
166+
font-size: 16px;
167+
letter-spacing: 0;
168+
line-height: var(--font-line-height-body-medium);
169+
}
170+
}
171+
122172
&__header {
123173
padding: var(--spacing-medium);
124174
text-align: left;
@@ -155,24 +205,26 @@
155205
}
156206
}
157207

158-
@media (min-width: 768px) {
159-
display: table;
160-
}
161-
}
208+
///
209+
/// Legacy styling
210+
///
162211

163-
/// Scrollbar style for tables on mobile
164-
165-
.table::-webkit-scrollbar {
166-
width: 8px;
167-
height: 8px;
168-
}
212+
&--content {
213+
.tr:first-child .table__item {
214+
font-family: var(--font-family-heading);
215+
font-weight: bold;
216+
border-top: 1px solid var(--color-gray-dark-900);
217+
border-bottom: 1px solid var(--color-gray-dark-900);
218+
}
169219

170-
.table::-webkit-scrollbar-track {
171-
background: var(--color-gray-lightest);
172-
}
220+
.tr:first-of-type .table__item:first-of-type {
221+
border-left: 1px solid var(--color-gray-dark-900);
222+
border-top-left-radius: var(--border-radius);
223+
}
173224

174-
.table::-webkit-scrollbar-thumb {
175-
background-color: var(--color-secondary);
176-
border-radius: 6px;
177-
border: 2px solid var(--color-secondary);
225+
.tr:first-of-type .table__item:last-of-type {
226+
border-right: 1px solid var(--color-gray-dark-900);
227+
border-top-right-radius: var(--border-radius);
228+
}
229+
}
178230
}

‎src/open_inwoner/templates/pages/product/detail.html

+3-1
Original file line numberDiff line numberDiff line change
@@ -26,6 +26,7 @@
2626
{% endblock sidebar_content %}
2727

2828
{% block content %}
29+
<div class="product-detail">
2930
<h1 class="utrecht-heading-1" id="title">
3031
{{ object.name }}
3132
{% if request.user.is_staff %}
@@ -175,6 +176,7 @@ <h3 class="utrecht-heading-3" id="sharing">{% trans "Deel dit artikel" %}</h3>
175176
{% endwith %}
176177
</nav>
177178
{% endif %}
178-
179179
</div>
180+
181+
</div>
180182
{% endblock content %}

‎src/open_inwoner/utils/ckeditor.py

+22-2
Original file line numberDiff line numberDiff line change
@@ -16,11 +16,29 @@
1616
("p", "utrecht-paragraph"),
1717
("a", "link link--secondary"),
1818
("table", "table table--content"),
19-
("th", "table__header"),
20-
("td", "table__item"),
19+
("thead", "tr table__head"),
20+
("tbody", "table__body"),
21+
("tr", "tr table__row"),
22+
("th", "th table__header"),
23+
("td", "td table__item"),
2124
]
2225

2326

27+
def convert_first_row_to_th(html_tables):
28+
"""
29+
Converts the first row of all tables from td to th.
30+
"""
31+
for table in html_tables.find_all("table"):
32+
first_row = table.find("tr")
33+
if first_row:
34+
for cell in first_row.find_all("td"):
35+
th = html_tables.new_tag("th")
36+
th.string = cell.string
37+
th.attrs = cell.attrs
38+
th["class"] = "table__header"
39+
cell.replace_with(th)
40+
41+
2442
def get_rendered_content(content: str) -> str:
2543
"""
2644
Takes object's content as an input and returns the rendered one.
@@ -50,6 +68,8 @@ def get_product_rendered_content(product):
5068
html = md.convert(content)
5169
soup = BeautifulSoup(html, "html.parser")
5270

71+
convert_first_row_to_th(soup)
72+
5373
for tag, class_name in CLASS_ADDERS:
5474
for element in soup.find_all(tag):
5575
if element.attrs.get("class") and "cta-button" in element.attrs["class"]:

0 commit comments

Comments
 (0)