From 4b090706b5608761c7a07fc5135a7fb58e039465 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Tom=C3=A1=C5=A1=20Valenta?= <git@imaniti.org>
Date: Sat, 8 Apr 2023 20:24:17 +0200
Subject: [PATCH] mobile layout

---
 contracts/models.py                           |  18 +-
 .../contracts/includes/contract_list.html     | 195 ++++++++++++------
 .../contracts/includes/double_heading.html    |   7 +
 contracts/templates/contracts/index.html      |   6 +-
 .../templates/contracts/view_contract.html    |  10 +-
 .../contracts/view_contract_filing_area.html  |   9 +-
 .../contracts/view_contract_filing_areas.html |  12 +-
 .../contracts/view_contract_issue.html        |  14 +-
 .../contracts/view_contract_issues.html       |  24 +--
 .../contracts/view_contract_type.html         |   8 +-
 .../contracts/view_contract_types.html        |   8 +-
 .../templates/contracts/view_contractee.html  |  10 +-
 .../templates/contracts/view_contractees.html |   8 +-
 .../templates/contracts/view_signee.html      |  14 +-
 .../templates/contracts/view_signees.html     |   8 +-
 contracts/templatetags/add.py                 |   8 +
 16 files changed, 200 insertions(+), 159 deletions(-)
 create mode 100644 contracts/templates/contracts/includes/double_heading.html
 create mode 100644 contracts/templatetags/add.py

diff --git a/contracts/models.py b/contracts/models.py
index dc3b926..6df1358 100644
--- a/contracts/models.py
+++ b/contracts/models.py
@@ -49,6 +49,20 @@ class SignatureCountMixin(models.Model):
         abstract = True
 
 
+class InlineNameMixin(models.Model):
+    @property
+    def inline_name(self) -> str:
+        result = self.name
+
+        if self.department:
+            result += f", {self.department}"
+
+        return result
+
+    class Meta:
+        abstract = True
+
+
 class CreatedByMixin(models.Model):
     created_by = models.ForeignKey(
         settings.AUTH_USER_MODEL,
@@ -85,7 +99,7 @@ def get_default_country():
     return settings.DEFAULT_COUNTRY
 
 
-class Signee(CreatedByMixin, OwnPermissionsMixin, SignatureCountMixin, models.Model):
+class Signee(CreatedByMixin, OwnPermissionsMixin, SignatureCountMixin, InlineNameMixin, models.Model):
     name = models.CharField(
         max_length=256,
         verbose_name="Jméno",
@@ -243,7 +257,7 @@ class Signee(CreatedByMixin, OwnPermissionsMixin, SignatureCountMixin, models.Mo
 
 
 class Contractee(
-    CreatedByMixin, OwnPermissionsMixin, SignatureCountMixin, models.Model
+    CreatedByMixin, OwnPermissionsMixin, SignatureCountMixin, InlineNameMixin, models.Model
 ):
     name = models.CharField(
         max_length=256,
diff --git a/contracts/templates/contracts/includes/contract_list.html b/contracts/templates/contracts/includes/contract_list.html
index d9d58e6..bed13f4 100644
--- a/contracts/templates/contracts/includes/contract_list.html
+++ b/contracts/templates/contracts/includes/contract_list.html
@@ -1,64 +1,139 @@
-<table class="table table-auto w-full table--striped table--bordered">
-    <thead>
-        <tr>
-            <td class="font-bold">Název</td>
-            <td>Typy</td>
-            <td>Platná</td>
-            <td class="whitespace-nowrap">Účinná od</td>
-            <td class="whitespace-nowrap">Účinná do</td>
-            <td class="whitespace-nowrap">Podepsána s</td>
-        </tr>
-    </thead>
-    <tbody>
-        {% for contract in page %}
+<div class="hidden md:block">
+    <table class="table table-auto w-full table--striped table--bordered">
+        <thead>
             <tr>
-                <td{% if not contract.is_public %} class="!bg-red-100"{% endif %}>
-                    {% if not contract.is_public %}
-                        {% include "contracts/includes/private_info_icon.html" %}
-                    {% endif %}
-                    <a
-                        class="underline"
-                        href="{% url "contracts:view_contract" contract.id %}"
-                    >{{ contract.name }}</a>
-                </td>
-                <td{% if not contract.is_public %} class="!bg-red-100"{% endif %}>
-                    <ul class="flex flex-wrap gap-1.5">
-                        {% for type in contract.types.all %}
-                            <li class="flex">
-                                 {% include "contracts/includes/tag.html" with url=type.url icon="ico--folder" content=type.name public=contract.is_public %}
-                            </li>
-                        {% endfor %}
-                    </ul>
-                </td>
-                <td{% if not contract.is_public %} class="!bg-red-100"{% endif %}>
-                    <i class="{% if contract.legal_state == contract.LegalStates.VALID %}ico--checkmark{% else %}ico--cross{% endif %}"></i>
-                </td>
-                <td class="whitespace-nowrap{% if not contract.is_public %} !bg-red-100{% endif %}">
-                    {{ contract.valid_start_date }}
-                </td>
-                <td class="whitespace-nowrap{% if not contract.is_public %} !bg-red-100{% endif %}">
-                    {% if contract.valid_end_date %}
-                        {{ contract.valid_end_date }}
-                    {% else %}
-                        <span class="text-grey-200">Neurčité</span>
-                    {% endif %}
-                </td>
-                <td{% if not contract.is_public %} class="!bg-red-100"{% endif %}>
-                    <ul class="flex flex-wrap gap-1.5">
-                        {% for signature in contract.signee_signatures.all %}
-                            <li class="flex">
-                                {% if signature.signee.entity_type == signature.signee.EntityTypes.LEGAL_ENTITY or signature.signee.entity_type == signature.signee.EntityTypes.OTHER %}
-                                    {% include "contracts/includes/tag.html" with url=signature.signee.url icon="ico--office" content=signature.signee.name public=contract.is_public %}
-                                {% else %}
-                                    {% include "contracts/includes/tag.html" with url=signature.signee.url icon="ico--user" content=signature.signee.name public=contract.is_public %}
-                                {% endif %}
-                            </li>
-                        {% endfor %}
-                    </ul>
-                </td>
+                <td class="font-bold">Název</td>
+                <td>Typy</td>
+                <td>Platná</td>
+                <td class="whitespace-nowrap">Účinná od</td>
+                <td class="whitespace-nowrap">Účinná do</td>
+                <td class="whitespace-nowrap">Podepsána s</td>
             </tr>
-        {% endfor %}
-    </tbody>
-</table>
+        </thead>
+        <tbody>
+            {% for contract in page %}
+                <tr>
+                    <td{% if not contract.is_public %} class="!bg-red-100"{% endif %}>
+                        {% if not contract.is_public %}
+                            {% include "contracts/includes/private_info_icon.html" %}
+                        {% endif %}
+                        <a
+                            class="underline"
+                            href="{% url "contracts:view_contract" contract.id %}"
+                        >{{ contract.name }}</a>
+                    </td>
+                    <td{% if not contract.is_public %} class="!bg-red-100"{% endif %}>
+                        <ul class="flex flex-wrap gap-1.5">
+                            {% for type in contract.types.all %}
+                                <li class="flex">
+                                    {% include "contracts/includes/tag.html" with url=type.url icon="ico--folder" content=type.name public=contract.is_public %}
+                                </li>
+                            {% endfor %}
+                        </ul>
+                    </td>
+                    <td{% if not contract.is_public %} class="!bg-red-100"{% endif %}>
+                        <i class="{% if contract.legal_state == contract.LegalStates.VALID %}ico--checkmark{% else %}ico--cross{% endif %}"></i>
+                    </td>
+                    <td class="whitespace-nowrap{% if not contract.is_public %} !bg-red-100{% endif %}">
+                        {{ contract.valid_start_date }}
+                    </td>
+                    <td class="whitespace-nowrap{% if not contract.is_public %} !bg-red-100{% endif %}">
+                        {% if contract.valid_end_date %}
+                            {{ contract.valid_end_date }}
+                        {% else %}
+                            <span class="text-grey-200">Neurčité</span>
+                        {% endif %}
+                    </td>
+                    <td{% if not contract.is_public %} class="!bg-red-100"{% endif %}>
+                        <ul class="flex flex-wrap gap-1.5">
+                            {% for signature in contract.signee_signatures.all %}
+                                <li class="flex">
+                                    {% if signature.signee.entity_type == signature.signee.EntityTypes.LEGAL_ENTITY or signature.signee.entity_type == signature.signee.EntityTypes.OTHER %}
+                                        {% include "contracts/includes/tag.html" with url=signature.signee.url icon="ico--office" content=signature.signee.name public=contract.is_public %}
+                                    {% else %}
+                                        {% include "contracts/includes/tag.html" with url=signature.signee.url icon="ico--user" content=signature.signee.name public=contract.is_public %}
+                                    {% endif %}
+                                </li>
+                            {% endfor %}
+                        </ul>
+                    </td>
+                </tr>
+            {% endfor %}
+        </tbody>
+    </table>
+</div>
+
+<ul class="flex-col gap-4 flex md:hidden">
+    {% for contract in page %}
+        <li class="card elevation-10{% if not contract.is_public %} bg-red-100{% endif %}">
+            <div class="card__body p-5">
+                <section class="flex flex-col gap-3">
+                    <a href="{% url "contracts:view_contract" contract.id %}">
+                        <h2 class="text-xl font-bold">
+                            {{ contract.name }}
+                            {% if not contract.is_public %}
+                                {% include "contracts/includes/private_info_icon.html" %}
+                            {% endif %}
+                        </h2>
+                    </a>
+                    <table class="table-auto border-separate border-spacing-1.5">
+                        <tbody>
+                            <tr>
+                                <td>Typy:</td>
+                                <td>
+                                    <ul class="flex flex-wrap gap-1.5">
+                                        {% for type in contract.types.all %}
+                                            <li class="flex">
+                                                {% include "contracts/includes/tag.html" with url=type.url icon="ico--folder" content=type.name public=contract.is_public %}
+                                            </li>
+                                        {% endfor %}
+                                    </ul>
+                                </td>
+                            </tr>
+                            <tr>
+                                <td class="pt-1.5">Účinná od:</td>
+                                <td class="pt-1.5">
+                                    {{ contract.valid_start_date }}
+                                </td>
+                            </tr>
+                            <tr>
+                                <td class="py-1.5">Účinná do:</td>
+                                <td class="py-1.5">
+                                    {% if contract.valid_end_date %}
+                                        {{ contract.valid_end_date }}
+                                    {% else %}
+                                        <span class="text-grey-200">Neurčité</span>
+                                    {% endif %}
+                                </td>
+                            </tr>
+                            <tr>
+                                <td>Platná:</td>
+                                <td>
+                                    <i class="{% if contract.legal_state == contract.LegalStates.VALID %}ico--checkmark{% else %}ico--cross{% endif %}"></i>
+                                </td>
+                            </tr>
+                            <tr>
+                                <td>Podpis s:</td>
+                                <td>
+                                    <ul class="flex flex-wrap gap-1.5">
+                                        {% for signature in contract.signee_signatures.all %}
+                                            <li class="flex">
+                                                {% if signature.signee.entity_type == signature.signee.EntityTypes.LEGAL_ENTITY or signature.signee.entity_type == signature.signee.EntityTypes.OTHER %}
+                                                    {% include "contracts/includes/tag.html" with url=signature.signee.url icon="ico--office" content=signature.signee.name public=contract.is_public %}
+                                                {% else %}
+                                                    {% include "contracts/includes/tag.html" with url=signature.signee.url icon="ico--user" content=signature.signee.name public=contract.is_public %}
+                                                {% endif %}
+                                            </li>
+                                        {% endfor %}
+                                    </ul>
+                                </td>
+                            </tr>
+                        </tbody>
+                    </table>
+                </section>
+            </div>
+        </li>
+    {% endfor %}
+</ul>
 
 {% include "contracts/includes/pagination.html" with paginator=paginator page=page %}
diff --git a/contracts/templates/contracts/includes/double_heading.html b/contracts/templates/contracts/includes/double_heading.html
new file mode 100644
index 0000000..bacd784
--- /dev/null
+++ b/contracts/templates/contracts/includes/double_heading.html
@@ -0,0 +1,7 @@
+<div class="flex gap-4 mb-10">
+    <i class="{{ icon }} text-6xl md:text-7xl"></i>
+    <div>
+        <h1 class="head-alt-md md:head-alt-lg">{{ heading }}</h1>
+        <h2 class="head-alt-sm">{{ subheading }}</h2>
+    </div>
+</div>
diff --git a/contracts/templates/contracts/index.html b/contracts/templates/contracts/index.html
index be8f193..772c75b 100644
--- a/contracts/templates/contracts/index.html
+++ b/contracts/templates/contracts/index.html
@@ -1,7 +1,7 @@
 {% extends "shared/includes/base.html" %}
 
 {% block content %}
-    <div class="prose max-w-none mb-10">
+    <div class="prose max-w-none mb-6 md:mb-10">
         <p>
             Registr smluv České pirátské strany slouží k evidenci i transparentnímu
             informování o smlouvách uzavřených Pirátskou stranou s dalšími subjekty.<br>
@@ -14,7 +14,9 @@
         </p>
     </div>
 
-    <div class="flex gap-6 mb-7 text-lg">
+    <hr class="mb-6 md:mb-10">
+    
+    <div class="flex gap-2 mb-6 text-lg flex-col md:mb-9 md:gap-6 md:flex-row">
         <a
             class="flex gap-2 items-baseline hover:no-underline"
             href="{% url "contracts:view_contract_filing_areas" %}"
diff --git a/contracts/templates/contracts/view_contract.html b/contracts/templates/contracts/view_contract.html
index 0cf4c06..b0587e6 100644
--- a/contracts/templates/contracts/view_contract.html
+++ b/contracts/templates/contracts/view_contract.html
@@ -159,8 +159,8 @@
         </tbody>
     </table>
 
-    <div class="flex gap-7">
-        <table class="table table-auto w-full table--striped table--bordered mb-7">
+    <div class="flex mb-7 gap-7 flex-col md:flex-row">
+        <table class="table table-auto w-full table--striped table--bordered">
             <tbody>
                 <tr>
                     <td colspan="2" class="text-lg font-bold">
@@ -183,7 +183,7 @@
             </tbody>
         </table>
 
-        <table class="table table-auto w-full table--striped table--bordered mb-7">
+        <table class="table table-auto w-full table--striped table--bordered">
             <tbody>
                 <tr>
                     <td colspan="2" class="text-lg font-bold">
@@ -336,7 +336,7 @@
 
     {% with contract.contractee_signatures.all as signatures %}
         {% if signatures|length != 0 %}
-            <ul class="mb-5 grid grid-cols-2 gap-2">
+            <ul class="mb-5 gap-2 grid grid-cols-1 md:grid-cols-2">
                 {% for signature in signatures %}
                     <li class="p-3 border border-gray-300 rounded-md">
                         <address class="mb-3">
@@ -396,7 +396,7 @@
 
     {% with contract.signee_signatures.all as signatures %}
         {% if signatures|length != 0 %}
-            <ul class="mb-5 grid grid-cols-2 gap-2">
+            <ul class="mb-5 gap-2 grid grid-cols-1 md:grid-cols-2">
                 {% for signature in signatures %}
                     <li class="p-3 border border-gray-300 rounded-md">
                         <address class="mb-3">
diff --git a/contracts/templates/contracts/view_contract_filing_area.html b/contracts/templates/contracts/view_contract_filing_area.html
index 49901dc..e4f90c1 100644
--- a/contracts/templates/contracts/view_contract_filing_area.html
+++ b/contracts/templates/contracts/view_contract_filing_area.html
@@ -1,13 +1,8 @@
 {% extends "shared/includes/base.html" %}
+{% load add %}
 
 {% block content %}
-    <div class="flex gap-4 mb-10">
-        <i class="ico--drawer text-7xl"></i>
-        <div>
-            <h1 class="head-alt-lg">{{ filing_area.name }}</h1>
-            <h2 class="head-alt-sm">Fyzická spisovna</h2>
-        </div>
-    </div>
+    {% include "contracts/includes/double_heading.html" with icon="ico--drawer" heading=filing_area.name subheading="Zodpovídá "|add:filing_area.person_responsible %}
 
     <h2 class="text-lg font-bold mb-10">
         Smlouvy ve spisovně
diff --git a/contracts/templates/contracts/view_contract_filing_areas.html b/contracts/templates/contracts/view_contract_filing_areas.html
index 0bd344f..2907771 100644
--- a/contracts/templates/contracts/view_contract_filing_areas.html
+++ b/contracts/templates/contracts/view_contract_filing_areas.html
@@ -2,19 +2,13 @@
 {% load counters %}
 
 {% block content %}
-    <div class="flex gap-4 mb-10">
-        <i class="ico--drawer text-7xl"></i>
-        <div>
-            <h1 class="head-alt-lg">Spisovny</h1>
-            <h2 class="head-alt-sm">Fyzická úložiště smluv</h2>
-        </div>
-    </div>
+    {% include "contracts/includes/double_heading.html" with icon="ico--drawer" heading="Spisovny" subheading="Fyzická úložiště smluv" %}
 
     <table class="table table-auto w-full table--striped table--bordered">
         <thead>
             <tr>
                 <td class="font-bold">Název</td>
-                <td>Odpovědná osoba</td>
+                <td class="hidden md:!table-cell">Odpovědná osoba</td>
                 <td>Počet smluv</td>
             </tr>
         </thead>
@@ -27,7 +21,7 @@
                             href="{{ filing_area.url }}"
                         >{{ filing_area.name }}</a>
                     </td>
-                    <td>
+                    <td class="hidden md:!table-cell">
                         {{ filing_area.person_responsible }}
                     </td>
                     <td>
diff --git a/contracts/templates/contracts/view_contract_issue.html b/contracts/templates/contracts/view_contract_issue.html
index ecd14ca..4579cdd 100644
--- a/contracts/templates/contracts/view_contract_issue.html
+++ b/contracts/templates/contracts/view_contract_issue.html
@@ -1,15 +1,11 @@
 {% extends "shared/includes/base.html" %}
 
 {% block content %}
-    <div class="flex gap-4 mb-10">
-        <i class="ico--warning text-7xl"></i>
-        <div>
-            <h1 class="head-alt-lg">{{ issue.name }}</h1>
-            <h2 class="head-alt-sm">
-                {% if not user.can_view_confidential %}Poznámka{% else %}Problém{% endif %}
-            </h2>
-        </div>
-    </div>
+    {% if not user.can_view_confidential %}
+        {% include "contracts/includes/double_heading.html" with icon="ico--warning" heading=issue.name subheading="Poznámka" %}
+    {% else %}
+        {% include "contracts/includes/double_heading.html" with icon="ico--warning" heading=issue.name subheading="Problém" %}
+    {% endif %}
 
     <h2 class="text-lg font-bold mb-10">
         Smlouvy s {% if not user.can_view_confidential %}poznámkou{% else %}problémem{% endif %}
diff --git a/contracts/templates/contracts/view_contract_issues.html b/contracts/templates/contracts/view_contract_issues.html
index b323c33..b4d15aa 100644
--- a/contracts/templates/contracts/view_contract_issues.html
+++ b/contracts/templates/contracts/view_contract_issues.html
@@ -2,25 +2,11 @@
 {% load counters %}
 
 {% block content %}
-    <div class="flex gap-4 mb-10">
-        <i class="ico--warning text-7xl"></i>
-        <div>
-            <h1 class="head-alt-lg">
-                {% if not user.can_view_confidential %}
-                    Poznámky
-                {% else %}
-                    Problémy
-                {% endif %}
-            </h1>
-            <h2 class="head-alt-sm">
-                {% if not user.can_view_confidential %}
-                    ke smlouvám
-                {% else %}
-                    se smlouvami
-                {% endif %}
-            </h2>
-        </div>
-    </div>
+    {% if not user.can_view_confidential %}
+        {% include "contracts/includes/double_heading.html" with icon="ico--warning" heading="Poznámky" subheading="ke smlouvám" %}
+    {% else %}
+        {% include "contracts/includes/double_heading.html" with icon="ico--warning" heading="Problémy" subheading="se smlouvami" %}
+    {% endif %}
 
     <table class="table table-auto w-full table--striped table--bordered">
         <thead>
diff --git a/contracts/templates/contracts/view_contract_type.html b/contracts/templates/contracts/view_contract_type.html
index ab7361e..1b0da20 100644
--- a/contracts/templates/contracts/view_contract_type.html
+++ b/contracts/templates/contracts/view_contract_type.html
@@ -1,13 +1,7 @@
 {% extends "shared/includes/base.html" %}
 
 {% block content %}
-    <div class="flex gap-4 mb-10">
-        <i class="ico--folder text-7xl"></i>
-        <div>
-            <h1 class="head-alt-lg">{{ type.name }}</h1>
-            <h2 class="head-alt-sm">Typ smluv</h2>
-        </div>
-    </div>
+    {% include "contracts/includes/double_heading.html" with icon="ico--folder" heading=type.name subheading="Typ smluv" %}
 
     <h2 class="text-lg font-bold mb-10">
         Smlouvy zadaného typu
diff --git a/contracts/templates/contracts/view_contract_types.html b/contracts/templates/contracts/view_contract_types.html
index dd165b3..e36a98d 100644
--- a/contracts/templates/contracts/view_contract_types.html
+++ b/contracts/templates/contracts/view_contract_types.html
@@ -2,13 +2,7 @@
 {% load counters %}
 
 {% block content %}
-    <div class="flex gap-4 mb-10">
-        <i class="ico--folder text-7xl"></i>
-        <div>
-            <h1 class="head-alt-lg">Typy</h1>
-            <h2 class="head-alt-sm">smluv</h2>
-        </div>
-    </div>
+    {% include "contracts/includes/double_heading.html" with icon="ico--folder" heading="Typy" subheading="smluv" %}
 
     <table class="table table-auto w-full table--striped table--bordered">
         <thead>
diff --git a/contracts/templates/contracts/view_contractee.html b/contracts/templates/contracts/view_contractee.html
index 9b2baa9..92f78ed 100644
--- a/contracts/templates/contracts/view_contractee.html
+++ b/contracts/templates/contracts/view_contractee.html
@@ -1,15 +1,7 @@
 {% extends "shared/includes/base.html" %}
 
 {% block content %}
-    <div class="flex gap-4 mb-10">
-        <i class="ico--office text-7xl"></i>
-        <div>
-            <h1 class="head-alt-lg">
-                {{ contractee.name }}{% if contractee.department %}, {{ contractee.department }}{% endif %}
-            </h1>
-            <h2 class="head-alt-sm">Naše smluvní strana</h2>
-        </div>
-    </div>
+    {% include "contracts/includes/double_heading.html" with icon="ico--office" heading=contracte.inline_name subheading="Naše smluvní strana" %}
 
     <address class="mb-8">
         <div class="mb-2">
diff --git a/contracts/templates/contracts/view_contractees.html b/contracts/templates/contracts/view_contractees.html
index c8c51cb..f039102 100644
--- a/contracts/templates/contracts/view_contractees.html
+++ b/contracts/templates/contracts/view_contractees.html
@@ -2,13 +2,7 @@
 {% load counters %}
 
 {% block content %}
-    <div class="flex gap-4 mb-10">
-        <i class="ico--office text-7xl"></i>
-        <div>
-            <h1 class="head-alt-lg">Smluvní strany</h1>
-            <h2 class="head-alt-sm">naše</h2>
-        </div>
-    </div>
+    {% include "contracts/includes/double_heading.html" with icon="ico--office" heading="Smluvní strany" subheading="naše" %}
 
     <table class="table table-auto w-full table--striped table--bordered">
         <thead>
diff --git a/contracts/templates/contracts/view_signee.html b/contracts/templates/contracts/view_signee.html
index 81dc6a0..51272f0 100644
--- a/contracts/templates/contracts/view_signee.html
+++ b/contracts/templates/contracts/view_signee.html
@@ -1,15 +1,11 @@
 {% extends "shared/includes/base.html" %}
 
 {% block content %}
-    <div class="flex gap-4 mb-10">
-        <i class="{% if signee.entity_type == signee.EntityTypes.LEGAL_ENTITY or signee.entity_type == signee.EntityTypes.OTHER %}ico--office{% else %}ico--user{% endif %} text-7xl"></i>
-        <div>
-            <h1 class="head-alt-lg">
-                {{ signee.name }}{% if signee.department %}, {{ signee.department }}{% endif %}
-            </h1>
-            <h2 class="head-alt-sm">Jiná smluvní strana</h2>
-        </div>
-    </div>
+    {% if signee.entity_type == signee.EntityTypes.LEGAL_ENTITY or signee.entity_type == signee.EntityTypes.OTHER %}
+        {% include "contracts/includes/double_heading.html" with icon="ico--office" heading=signee.inline_name subheading="Jiná smluvní strana" %}
+    {% else %}
+        {% include "contracts/includes/double_heading.html" with icon="ico--user" heading=signee.inline_name subheading="Jiná smluvní strana" %}
+    {% endif %}
 
     {% if signee.has_any_address_information %}
         <address class="mb-8">
diff --git a/contracts/templates/contracts/view_signees.html b/contracts/templates/contracts/view_signees.html
index 2474256..ea406b0 100644
--- a/contracts/templates/contracts/view_signees.html
+++ b/contracts/templates/contracts/view_signees.html
@@ -2,13 +2,7 @@
 {% load counters %}
 
 {% block content %}
-    <div class="flex gap-4 mb-10">
-        <i class="ico--office text-7xl"></i>
-        <div>
-            <h1 class="head-alt-lg">Smluvní strany</h1>
-            <h2 class="head-alt-sm">ostatní</h2>
-        </div>
-    </div>
+    {% include "contracts/includes/double_heading.html" with icon="ico--office" heading="Smluvní strany" subheading="ostatní" %}
 
     <table class="table table-auto w-full table--striped table--bordered">
         <thead>
diff --git a/contracts/templatetags/add.py b/contracts/templatetags/add.py
new file mode 100644
index 0000000..c8735e7
--- /dev/null
+++ b/contracts/templatetags/add.py
@@ -0,0 +1,8 @@
+from django import template
+
+register = template.Library()
+
+
+@register.filter
+def add(value, arg):
+    return value + arg
-- 
GitLab