Skip to content

Commit

Permalink
Merge pull request #677 from maykinmedia/feature/1239-make-grey-divid…
Browse files Browse the repository at this point in the history 
…er-lines-conditional-for-product-page

🎨 [#1239] Making grey divider line conditional for product page
  • Loading branch information
@alextreme
alextreme authored Jun 26, 2023
2 parents 42f2bea + e8724a7 commit 79e2425
Show file tree
Hide file tree
Showing 3 changed files with 136 additions and 119 deletions.
8 changes: 8 additions & 0 deletions src/open_inwoner/scss/components/Product/product-detail.scss
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,8 @@
.product-info > .aside,
.product-info > div {
margin: var(--spacing-extra-large) 0;

@media (min-width: 768px) {
margin: var(--spacing-giant) 0;
}
}
1 change: 1 addition & 0 deletions src/open_inwoner/scss/components/_index.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -65,6 +65,7 @@
@import './Plan/PlanEdit.scss';
@import './Plan/PlanFile.scss';
@import './Plan/PlanList.scss';
@import './Product/product-detail.scss';
@import './Product/product-filter.scss';
@import './Product/product-finder.scss';
@import './Product/product-location.scss';
Expand Down
246 changes: 127 additions & 119 deletions src/open_inwoner/templates/pages/product/detail.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -36,135 +36,143 @@ <h1 class="h1" id="title">
<p class="p">{{ object.summary }}</p>
{{ object|product_ckeditor_content|safe }}

{% if object.question_set.exists %}
{% if object.question_set.exists or object.files.exists or object.conditions.exists or object.locations.exists or product_links.exists or object.related_products.published.exists or object.contacts.exists %}
<hr class="divider">
{% faq object.question_set.all %}
{% endif %}

{% if object.files.exists %}
<hr class="divider">
{% file_list files=object.files.all title=_("Bestanden") %}
{% if product.form %}
{% button_row mobile=True %}
{% button href=product.form_link text=_("Aanvraag starten") primary=True icon="arrow_forward" icon_position="before" %}
{% endbutton_row %}
{% elif product.link %}
{% button_row mobile=True %}
{% button href=product.link text=_("Aanvraag starten") primary=True icon="arrow_forward" icon_position="before" %}
{% endbutton_row %}
{% endif %}

{# Conditions #}
{% if object.conditions.exists %}
<hr class="divider">

{% render_grid %}
{% render_column span=6 compact=True %}
<h3 class="h3">{% trans "U komt in aanmerking" %}</h3>
{% condition_list conditions=object.conditions.all %}
{% endrender_column %}
<div class="product-info">
{% if object.question_set.exists %}
{% faq object.question_set.all %}
{% endif %}

{% render_column start=7 span=6 compact=True %}
<h3 class="h3">{% trans "U komt niet in aanmerking" %}</h3>
{% condition_list conditions=object.conditions.all negative=True %}
{% endrender_column %}
{% endrender_grid %}
{% endif %}
{% if object.files.exists %}
{% file_list files=object.files.all title=_("Bestanden") %}
{% endif %}

{# Locations #}
{% if object.locations.exists %}
<hr class="divider">
{# Conditions #}
{% if object.conditions.exists %}
{% render_grid %}
{% render_column span=6 compact=True %}
<h3 class="h3">{% trans "U komt in aanmerking" %}</h3>
{% condition_list conditions=object.conditions.all %}
{% endrender_column %}

{% render_column start=7 span=6 compact=True %}
<h3 class="h3">{% trans "U komt niet in aanmerking" %}</h3>
{% condition_list conditions=object.conditions.all negative=True %}
{% endrender_column %}
{% endrender_grid %}
{% endif %}

{% with centroid=object.locations.get_centroid %}
{% map centroid.lat centroid.lng id="locations" title=_('Locaties') geojson_feature_collection=object.locations.get_geojson_feature_collection %}
{% endwith %}

{% render_card_container columns=3 %}
{% for location in object.locations.all %}
{% with location_name=location.name phonenumber=location.phonenumber email=location.email %}
<div class="card card__body">
{% if location_name %}
{% link href=location.get_absolute_url primary=True text=location_name extra_classes="h3" %}
{% endif %}
<div class="card__body--flex p--no-margin">
<p class="p">{{ location.address_line_1 }}</p>
<p class="p">{{ location.address_line_2 }}</p>
{% if phonenumber %}
{% link href='tel:'|addstr:phonenumber secondary=True text=phonenumber %}
{% endif %}
{% if email %}
{% link href='mailto:'|addstr:email secondary=True text=email %}
{# Locations #}
{% if object.locations.exists %}
{% with centroid=object.locations.get_centroid %}
{% map centroid.lat centroid.lng id="locations" title=_('Locaties') geojson_feature_collection=object.locations.get_geojson_feature_collection %}
{% endwith %}

{% render_card_container columns=3 %}
{% for location in object.locations.all %}
{% with location_name=location.name phonenumber=location.phonenumber email=location.email %}
<div class="card card__body">
{% if location_name %}
{% link href=location.get_absolute_url primary=True text=location_name extra_classes="h3" %}
{% endif %}
<div class="card__body--flex p--no-margin">
<p class="p">{{ location.address_line_1 }}</p>
<p class="p">{{ location.address_line_2 }}</p>
{% if phonenumber %}
{% link href='tel:'|addstr:phonenumber secondary=True text=phonenumber %}
{% endif %}
{% if email %}
{% link href='mailto:'|addstr:email secondary=True text=email %}
{% endif %}
</div>
</div>
</div>
{% endwith %}
{% endfor %}
{% endrender_card_container %}
{% endif %}
{% endwith %}
{% endfor %}
{% endrender_card_container %}
{% endif %}

<hr class="divider">

{% render_grid %}
{% render_column span=5 %}
{# Links. #}
{% if product_links.exists %}
<nav class="link-list" aria-label="{% trans "links" %}">
<h3 class="h3" id="links">{% trans "Links" %}</h3>
<ul class="link-list__list">
{% for link in product_links %}
<li class="link-list__list-item link-list__list-item--wrap">
{% link href=link.url secondary=True text=link.name %}
</li>
{% endfor %}
</ul>
</nav>
{% endif %}
{% endrender_column %}

{% render_column start=related_products_start span=4 compact=True %}
{# Related products. #}
{% if object.related_products.published.exists %}
<nav class="link-list" aria-label="{% trans "Gerelateerde links" %}">
<h3 class="h3" id="see">{% trans "Zie ook" %}</h3>
<ul class="link-list__list">
{% for related in object.related_products.published %}
<li class="link-list__list-item link-list__list-item--wrap">
{% url 'products:product_detail' slug=related.slug as product_url %}
{% link href=product_url text=related.name secondary=True %}
</li>
{% render_grid %}
{% render_column span=5 %}
{# Links. #}
{% if product_links.exists %}
<nav class="link-list" aria-label="{% trans "links" %}">
<h3 class="h3" id="links">{% trans "Links" %}</h3>
<ul class="link-list__list">
{% for link in product_links %}
<li class="link-list__list-item link-list__list-item--wrap">
{% link href=link.url secondary=True text=link.name %}
</li>
{% endfor %}
</ul>
</nav>
{% endif %}
{% endrender_column %}

{% render_column start=related_products_start span=4 compact=True %}
{# Related products. #}
{% if object.related_products.published.exists %}
<nav class="link-list" aria-label="{% trans "Gerelateerde links" %}">
<h3 class="h3" id="see">{% trans "Zie ook" %}</h3>
<ul class="link-list__list">
{% for related in object.related_products.published %}
<li class="link-list__list-item link-list__list-item--wrap">
{% url 'products:product_detail' slug=related.slug as product_url %}
{% link href=product_url text=related.name secondary=True %}
</li>
{% endfor %}
</ul>
</nav>
{% endif %}
{% endrender_column %}

{% render_column span=9 %}
{% if object.contacts.exists %}
{% render_notification type='success' icon=False %}
<h3 class="h3" id="contact">{% trans 'Contact' %}</h3>

{% for contact in object.contacts.all %}
{% render_grid compact=True %}
{% render_column span=12 %}
<h4 class="h4">{{ contact.first_name }} {{ contact.last_name }}</h4>
{% endrender_column %}

{% if contact.phonenumber %}
{% render_column span=6 %}
<span class="p">{{ contact.role|default:_('Telefoonnummer') }}</span>
{% endrender_column %}

{% render_column start=7 span=6 %}
{% link href='tel:'|add:contact.phonenumber text=contact.phonenumber primary=True %}
{% endrender_column %}
{% endif %}

{% if contact.email %}
{% render_column span=6 %}
<p class="p">{{ contact.organization|default:_('E-mail')}}</p>
{% endrender_column %}

{% render_column start=7 span=6 %}
{% link href='mailto:'|add:contact.email text=contact.email primary=True %}
{% endrender_column %}
{% endif %}
{% endrender_grid %}
{% endfor %}
</ul>
</nav>
{% endif %}
{% endrender_column %}


{% render_column span=9 %}
{% if object.contacts.exists %}
{% render_notification type='success' icon=False %}
<h3 class="h3" id="contact">{% trans 'Contact' %}</h3>

{% for contact in object.contacts.all %}
{% render_grid compact=True %}
{% render_column span=12 %}
<h4 class="h4">{{ contact.first_name }} {{ contact.last_name }}</h4>
{% endrender_column %}

{% if contact.phonenumber %}
{% render_column span=6 %}
<span class="p">{{ contact.role|default:_('Telefoonnummer') }}</span>
{% endrender_column %}

{% render_column start=7 span=6 %}
{% link href='tel:'|add:contact.phonenumber text=contact.phonenumber primary=True %}
{% endrender_column %}
{% endif %}

{% if contact.email %}
{% render_column span=6 %}
<p class="p">{{ contact.organization|default:_('E-mail')}}</p>
{% endrender_column %}

{% render_column start=7 span=6 %}
{% link href='mailto:'|add:contact.email text=contact.email primary=True %}
{% endrender_column %}
{% endif %}
{% endrender_grid %}
{% endfor %}
{% endrender_notification %}
{% endif %}
{% endrender_column %}
{% endrender_grid %}
{% endrender_notification %}
{% endif %}
{% endrender_column %}
{% endrender_grid %}

</div>
{% endblock content %}

0 comments on commit 79e2425

Please sign in to comment.