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