Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

🚧 [#3059] Refactoring of searchpage Sidebar/grids #1638

Open
wants to merge 1 commit into
base: develop
Choose a base branch
from
+79 −82
Open

🚧 [#3059] Refactoring of searchpage Sidebar/grids #1638

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
6 changes: 0 additions & 6 deletions src/open_inwoner/scss/components/Grid/Grid.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -35,12 +35,6 @@
}
}
}

/// Search grid
&--search {
display: flex;
flex-direction: column;
}
}

&--limit &__sidebar,
Expand Down
155 changes: 79 additions & 76 deletions src/open_inwoner/templates/pages/search.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,18 +3,20 @@

{% block main_inner %}
{# search term section #}
<div class="grid">
{% render_grid %}
<div class="grid__main">
<h1 class="utrecht-heading-1">{% trans "Zoekresultaten voor " %} "{% firstof search_form.query.value "" %}"</h1>
<p class="search-results__title-small">{{ paginator.count }} {% trans "resultaten" %} </p>
</div>
</div>
{% endrender_grid %}

{# facets and results section #}
<div class="grid">
{% render_grid %}
{% if paginator.count %}
{% if search_filter_categories or search_filter_tags or search_filter_organizations %}
<aside class="grid__sidebar grid__filters" aria-label="{% trans "Zoekfilters" %}">

{% render_column start=1 span=5 %}
<aside class="grid__filters" aria-label="{% trans "Zoekfilters" %}">
<h2 class="utrecht-heading-2">{% trans "Zoekfilters" %}</h2>
{% if search_filter_categories %}
{% include "components/Filter/Filter.html" with field=search_form.categories form_id="search-form" only %}
Expand All @@ -26,87 +28,88 @@ <h2 class="utrecht-heading-2">{% trans "Zoekfilters" %}</h2>
{% include "components/Filter/Filter.html" with field=search_form.organizations form_id="search-form" only %}
{% endif %}
</aside>
{% endrender_column %}


{% endif %}
{# end search filters #}
{% endif %}

<div class="grid__main grid__main--search">
{% if paginator.count %}
<div class="search-results">
<div class="search-results__list">
{% render_grid %}
{% for hit in page_obj %}
<div class="column column--start-0 column--span-{% if search_filter_categories or search_filter_tags or search_filter_organizations %}12{% else %}8{% endif %}">
<a href="{% url 'products:product_detail' hit.slug %}" class="card card__description-card search-results__item">
<div class="card__body card__body--tabled">
<h3 class="utrecht-heading-3 search-results__item-title">{{ hit.name }}</h3>
<p class="utrecht-paragraph search-results__item-intro">{{ hit.summary }}</p>
<span class="link link--icon link--primary">
<span class="link__text">Bekijk resultaat</span>
{% icon icon="arrow_forward" icon_position="after" primary=True outlined=True %}
</span>
</div>
</a>
</div>
{% endfor %}
{% endrender_grid %}
</div>

{% if paginator.count %}
<div class="column column--start-{% if search_filter_categories or search_filter_tags or search_filter_organizations %}6{% else %}1{% endif %} column--span-{% if search_filter_categories or search_filter_tags or search_filter_organizations %}12{% else %}8{% endif %}">
<div class="search-results">
<div class="search-results__list">
{% for hit in page_obj %}

<a href="{% url 'products:product_detail' hit.slug %}" class="card card__description-card search-results__item">
<div class="card__body card__body--tabled">
<h3 class="utrecht-heading-3 search-results__item-title">{{ hit.name }}</h3>
<p class="utrecht-paragraph search-results__item-intro">{{ hit.summary }}</p>
<span class="link link--icon link--primary">
<span class="link__text">Bekijk resultaat</span>
{% icon icon="arrow_forward" icon_position="after" primary=True outlined=True %}
</span>
</div>
</a>

{% endfor %}
</div>
</div>
</div>

{% pagination page_obj=page_obj paginator=paginator request=request %}
{% pagination page_obj=page_obj paginator=paginator request=request %}

{% if paginator.count and not messages %}
<section class="feedback" aria-label="{% trans "Pagina feedback" %}">
<h4 class="utrecht-heading-4">{% trans "Feedback" %}</h4>
<p class="utrecht-paragraph">{% trans "Heeft u gevonden wat u zocht?" %}</p>
{% render_form form=feedback_form method="POST" form_action=request.get_full_path id="feedback_form" show_notifications=True %}
{% csrf_token %}
{{ feedback_form.errors }}
<div class="feedback__options">
{% spaceless %}
<label class="button-radio" for="positive">
<input class="button-radio__input" type="radio" name="positive" id="positive" value="true" aria-label="{{ _('Ik heb gevonden wat ik zocht.') }}"/>
<span class="button-radio__button">{% icon icon="thumb_up" outlined=True %}</span>
</label>
<label class="button-radio" for="negative">
<input class="button-radio__input" type="radio" name="positive" id="negative" value="false" aria-label="{{ _('Ik heb niet gevonden wat ik zocht.') }}" />
<span class="button-radio__button">{% icon icon="thumb_down" outlined=True %}</span>
</label>
{% endspaceless %}
</div>
<div class="feedback__remark">
{% textarea feedback_form.remark label=_('Toelichting') %}
</div>
<div class="feedback__remark">
{% form_actions primary_text="Feedback versturen" %}
</div>
{% endrender_form %}
</section>
{% endif %}
{% if paginator.count and not messages %}
<section class="feedback" aria-label="{% trans "Pagina feedback" %}">
<h4 class="utrecht-heading-4">{% trans "Feedback" %}</h4>
<p class="utrecht-paragraph">{% trans "Heeft u gevonden wat u zocht?" %}</p>
{% render_form form=feedback_form method="POST" form_action=request.get_full_path id="feedback_form" show_notifications=True %}
{% csrf_token %}
{{ feedback_form.errors }}
<div class="feedback__options">
{% spaceless %}
<label class="button-radio" for="positive">
<input class="button-radio__input" type="radio" name="positive" id="positive" value="true" aria-label="{{ _('Ik heb gevonden wat ik zocht.') }}"/>
<span class="button-radio__button">{% icon icon="thumb_up" outlined=True %}</span>
</label>
<label class="button-radio" for="negative">
<input class="button-radio__input" type="radio" name="positive" id="negative" value="false" aria-label="{{ _('Ik heb niet gevonden wat ik zocht.') }}" />
<span class="button-radio__button">{% icon icon="thumb_down" outlined=True %}</span>
</label>
{% endspaceless %}
</div>
<div class="feedback__remark">
{% textarea feedback_form.remark label=_('Toelichting') %}
</div>
<div class="feedback__remark">
{% form_actions primary_text="Feedback versturen" %}
</div>
{% endrender_form %}
</section>
{% endif %}

{% else %}
{% else %}

{% render_grid %}
{% render_column start=0 span=8 %}
<div class="search-results search-results--no-results">
<div class="search-results--no-results-column">{% icon icon="info" icon_position="before" extra_classes="icon--info" outlined=True %}</div>
<div class="search-results--no-results-column">
<h2 class="utrecht-heading-2 search-results__title">
{% trans "We konden geen zoekresultaten vinden" %}
</h2>
<p class="utrecht-paragraph">{% trans "Probeer het nog eens met deze tips:" %}</p>
{% render_column start=0 span=8 %}
<div class="search-results search-results--no-results">
<div class="search-results--no-results-column">{% icon icon="info" icon_position="before" extra_classes="icon--info" outlined=True %}</div>
<div class="search-results--no-results-column">
<h2 class="utrecht-heading-2 search-results__title">
{% trans "We konden geen zoekresultaten vinden" %}
</h2>
<p class="utrecht-paragraph">{% trans "Probeer het nog eens met deze tips:" %}</p>

<ul class="ul">
<li class="li">{% trans "Zorg ervoor dat alle woorden goed gespeld zijn." %}</li>
<li class="li">{% trans "Probeer andere zoektermen." %}</li>
<li class="li">{% trans "Maak de zoektermen algemener." %}</li>
</ul>
</div>
<ul class="ul">
<li class="li">{% trans "Zorg ervoor dat alle woorden goed gespeld zijn." %}</li>
<li class="li">{% trans "Probeer andere zoektermen." %}</li>
<li class="li">{% trans "Maak de zoektermen algemener." %}</li>
</ul>
</div>
{% endrender_column %}
{% endrender_grid %}
{% endif %}
</div>
</div>
</div>
{% endrender_column %}

{% endif %}

{% endrender_grid %}

{% endblock main_inner %}
Loading