1
0
Fork 0
mirror of https://github.com/codex-team/codex.docs.git synced 2025-08-10 07:55:24 +02:00

Changed navigator component by passing objects, removed navigator wrapper

This commit is contained in:
slaveeks 2022-08-01 16:53:53 +03:00
parent 81afc966fb
commit 385c475a34
3 changed files with 32 additions and 19 deletions

View file

@ -1,13 +1,12 @@
{# {#
Reusable navigaor component. Reusable navigaor component.
Available props: Available props:
- label - previousPage
- direction: previous, next - nextPage
- url: navigation link - class: additional class for the navigator
- class: additional class for the button
Usage example: Usage example:
{% include 'components/navigator.twig' with {label: 'Previous page', direction: 'previous'} %} {% include 'components/navigator.twig' with {previousPage: previousPage, nextPage: nextPage} %}
#} #}
{% set mainClass = 'navigator' %} {% set mainClass = 'navigator' %}
@ -15,23 +14,39 @@ Usage example:
{% set tag = 'div' %} {% set tag = 'div' %}
{% if url is not empty %} {% set tag = 'a' %}
{% set tag = 'a' %}
{% endif %}
<div class="navigator--wrapper"> <div>
{% if label and url %} {% if previousPage %}
<{{ tag }} <{{ tag }}
{{ name is not empty ? 'name="' ~ name ~ '"': '' }} {{ name is not empty ? 'name="' ~ name ~ '"': '' }}
class="{{ mainClass }} {{ mainClass }}--{{ direction|default('previous') }} {{ class ?? '' }}" class="{{ mainClass }} {{ mainClass }}--previous {{ class ?? '' }}"
{{ url is not empty ? 'href="' ~ url ~ '"' : '' }} href="/{{ previousPage.uri }}"
> >
<div class="{{ mainClass }}__direction"> <div class="{{ mainClass }}-direction">
{{ direction }} previous
</div> </div>
<div class="{{ mainClass }}__label"> <div class="{{ mainClass }}-label">
{{ label }} {{ previousPage.title }}
</div> </div>
</{{ tag }}> </{{ tag }}>
{% endif %} {% endif %}
</div> </div>
<div>
{% if nextPage %}
<{{ tag }}
{{ name is not empty ? 'name="' ~ name ~ '"': '' }}
class="{{ mainClass }} {{ mainClass }}--next {{ class ?? '' }}"
href="/{{ nextPage.uri }}"
>
<div class="{{ mainClass }}-direction">
next
</div>
<div class="{{ mainClass }}-label">
{{ nextPage.title }}
</div>
</{{ tag }}>
{% endif %}
</div>

View file

@ -40,8 +40,7 @@
{% endfor %} {% endfor %}
</section> </section>
<footer class="page__footer"> <footer class="page__footer">
{% include 'components/navigator.twig' with {label: previousPage.title, direction: 'previous', url: '/' ~ previousPage.uri} %} {% include 'components/navigator.twig' with {previousPage: previousPage, nextPage: nextPage} %}
{% include 'components/navigator.twig' with {label: nextPage.title, direction: 'next', url: '/' ~ nextPage.uri} %}
</footer> </footer>
</article> </article>

View file

@ -34,4 +34,3 @@
} }