[#2352] Added more styles for product-specific tables

maykinmedia · Jun 17, 2024 · 7efb7ca · 7efb7ca
1 parent 7516e19
commit 7efb7ca
Show file tree

Hide file tree

Showing 4 changed files with 52 additions and 8 deletions.
diff --git a/src/open_inwoner/scss/components/Product/product-detail.scss b/src/open_inwoner/scss/components/Product/product-detail.scss
@@ -1,3 +1,24 @@
+.product-detail {
+  .table {
+    border: 1px solid var(--color-gray);
+    max-width: 700px;
+
+    //tbody {
+    //overflow-x: scroll;
+    //scrollbar-color: var(--color-secondary) var(--color-gray-lightest);
+    //scrollbar-width: thin;
+    //white-space: nowrap;
+    //width: 100%;
+    //}
+
+    tbody > tr:first-child .table__item {
+      font-family: var(--font-family-heading);
+      font-weight: bold;
+      border: 1px solid var(--color-gray-dark);
+    }
+  }
+}
+
 .product-info > .aside,
 .product-info {
   & > div {

diff --git a/src/open_inwoner/scss/components/Table/Table.scss b/src/open_inwoner/scss/components/Table/Table.scss
@@ -46,15 +46,17 @@
 
     .table__item {
       border-right: 1px solid var(--color-gray-light);
+      max-width: 300px;
+      word-wrap: break-word;
+      text-wrap: wrap;
     }
 
-    .table__item:first-of-type {
-      font-weight: bold;
-      padding-left: 0;
-    }
+    //.table__item:first-of-type {
+    //  font-weight: bold;
+    //}
 
     .table__item:not(:first-of-type) {
-      text-align: right;
+      //text-align: right;
       padding-right: var(--spacing-giant);
     }
 

diff --git a/src/open_inwoner/templates/pages/product/detail.html b/src/open_inwoner/templates/pages/product/detail.html
@@ -26,6 +26,7 @@
 {% endblock sidebar_content %}
 
 {% block content %}
+<div class="product-detail">
     <h1 class="utrecht-heading-1" id="title">
     {{ object.name }}
         {% if request.user.is_staff %}
@@ -175,6 +176,7 @@ <h3 class="utrecht-heading-3" id="sharing">{% trans "Deel dit artikel" %}</h3>
                 {% endwith %}
             </nav>
         {% endif %}
-
     </div>
+
+</div>
 {% endblock content %}
diff --git a/src/open_inwoner/utils/ckeditor.py b/src/open_inwoner/utils/ckeditor.py
@@ -16,11 +16,27 @@
     ("p", "utrecht-paragraph"),
     ("a", "link link--secondary"),
     ("table", "table table--content"),
-    ("th", "table__header"),
-    ("td", "table__item"),
+    ("tr", "tr table__row"),
+    ("th", "th table__header"),
+    ("td", "td table__item"),
 ]
 
 
+def convert_first_row_to_th(html_tables):
+    """
+    Converts the first row of all tables from td to th.
+    """
+    for table in html_tables.find_all("table"):
+        first_row = table.find("tr")
+        if first_row:
+            for cell in first_row.find_all("td"):
+                th = html_tables.new_tag("th")
+                th.string = cell.string
+                th.attrs = cell.attrs
+                th["class"] = "table__header"
+                cell.replace_with(th)
+
+
 def get_rendered_content(content: str) -> str:
     """
     Takes object's content as an input and returns the rendered one.
@@ -31,6 +47,9 @@ def get_rendered_content(content: str) -> str:
     html = md.convert(content)
     soup = BeautifulSoup(html, "html.parser")
 
+    # Convert first row of tables to th
+    convert_first_row_to_th(soup)
+
     for tag, class_name in CLASS_ADDERS:
         for element in soup.find_all(tag):
             element.attrs["class"] = class_name