aboutsummaryrefslogtreecommitdiff
path: root/templates/partials/doc
diff options
context:
space:
mode:
authorsptaule <lecas83@gmail.com>2022-01-31 18:57:51 +0100
committersptaule <lecas83@gmail.com>2022-01-31 18:57:51 +0100
commit3108a8a78f8bcf13ab7c2a0c3f0f7258a8206be4 (patch)
tree3a72897def7a24d245879ff16c3332c65e4ea2d3 /templates/partials/doc
parente463223e15ff95ba58726ddf7b652a1a9cd41059 (diff)
downloadgaragehq.deuxfleurs.fr-3108a8a78f8bcf13ab7c2a0c3f0f7258a8206be4.tar.gz
garagehq.deuxfleurs.fr-3108a8a78f8bcf13ab7c2a0c3f0f7258a8206be4.zip
Visual improvements for doc navigation on smaller screen
Diffstat (limited to 'templates/partials/doc')
-rw-r--r--templates/partials/doc/pagination.html110
1 files changed, 53 insertions, 57 deletions
diff --git a/templates/partials/doc/pagination.html b/templates/partials/doc/pagination.html
index 167669e..ed5b3b1 100644
--- a/templates/partials/doc/pagination.html
+++ b/templates/partials/doc/pagination.html
@@ -1,63 +1,59 @@
<section class="w-full">
- <div class="container">
- <div class="mx-auto max-w-4xl">
- <div class="column is-8">
- <div class="w-full flex items-center justify-center py-1.5 bg-gray-200">
- <span class="uppercase tracking-wide text-xs text-garage-gray">Navigation</span>
- </div>
- <nav class="flex space-x-4 items-center justify-center p-4">
- {% if page.earlier %}
- {% set left = page.earlier %}
- {% elif page.lighter %}
- {% set left = page.lighter %}
- {% elif page.ancestors and page.ancestors | length == 3 %}
- {% set left_path = page.ancestors | last %}
- {% set left = get_section(path=left_path) %}
- {% endif %}
+ <div class="mx-auto">
+ <div class="w-full flex items-center justify-center py-1.5 bg-gray-200">
+ <span class="uppercase tracking-wide text-xs text-garage-gray">Navigation</span>
+ </div>
+ <nav class="flex flex-col md:flex-row space-x-0 md:space-x-4 space-y-4 md:space-y-0 items-center justify-center p-4">
+ {% if page.earlier %}
+ {% set left = page.earlier %}
+ {% elif page.lighter %}
+ {% set left = page.lighter %}
+ {% elif page.ancestors and page.ancestors | length == 3 %}
+ {% set left_path = page.ancestors | last %}
+ {% set left = get_section(path=left_path) %}
+ {% endif %}
- {% if left %}
- <div>
- <a class="flex items-center space-x-1 hover:text-garage-orange text-garage-gray text-sm bg-white transform hover:scale-110 transition border border-garage-orange p-2.5 rounded-full"
- href="{{ left.permalink }}"
- title="{{ left.title }}">
- <span class="icon">
- <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24"
- xmlns="http://www.w3.org/2000/svg">
- <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
- d="M7 16l-4-4m0 0l4-4m-4 4h18"></path>
- </svg>
- <span class="mt-0.5 2xl:hidden">{{ left.title }}</span>
- </span>
- </a>
- </div>
- {% endif %}
+ {% if left %}
+ <div class="w-1/2 lg:w-1/3">
+ <a class="flex items-center justify-center space-x-1 text-garage-gray text-sm bg-white hover:bg-garage-gray hover:bg-opacity-20 transition border border-garage-orange p-2.5 rounded-2xl"
+ href="{{ left.permalink }}"
+ title="{{ left.title }}">
+ <span class="icon">
+ <svg class="w-6 h-6 mx-auto" fill="none" stroke="currentColor" viewBox="0 0 24 24"
+ xmlns="http://www.w3.org/2000/svg">
+ <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
+ d="M7 16l-4-4m0 0l4-4m-4 4h18"></path>
+ </svg>
+ <span class="mt-0.5 2xl:hidden">{{ left.title }}</span>
+ </span>
+ </a>
+ </div>
+ {% endif %}
- {% if page.later %}
- {% set right = page.later %}
- {% elif page.heavier %}
- {% set right = page.heavier %}
- {% elif page.pages %}
- {% set right = page.pages | first %}
- {% endif %}
+ {% if page.later %}
+ {% set right = page.later %}
+ {% elif page.heavier %}
+ {% set right = page.heavier %}
+ {% elif page.pages %}
+ {% set right = page.pages | first %}
+ {% endif %}
- {% if right %}
- <div>
- <a class="flex items-center space-x-1 hover:text-garage-orange text-garage-gray text-sm bg-white transform hover:scale-110 transition border border-garage-orange p-2.5 rounded-full"
- href="{{ right.permalink }}"
- title="{{ right.title }}">
- <span class="icon">
- <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24"
- xmlns="http://www.w3.org/2000/svg">
- <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
- d="M17 8l4 4m0 0l-4 4m4-4H3"></path>
- </svg>
- <span class="mt-0.5 2xl:hidden">{{ right.title }}</span>
- </span>
- </a>
- </div>
- {% endif %}
- </nav>
- </div>
- </div>
+ {% if right %}
+ <div class="w-1/2 lg:w-1/3">
+ <a class="flex items-center justify-center space-x-1 text-garage-gray text-sm bg-white hover:bg-garage-gray hover:bg-opacity-20 transition border border-garage-orange p-2.5 rounded-2xl"
+ href="{{ right.permalink }}"
+ title="{{ right.title }}">
+ <span class="icon">
+ <svg class="w-6 h-6 mx-auto" fill="none" stroke="currentColor" viewBox="0 0 24 24"
+ xmlns="http://www.w3.org/2000/svg">
+ <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
+ d="M17 8l4 4m0 0l-4 4m4-4H3"></path>
+ </svg>
+ <span class="mt-0.5 2xl:hidden">{{ right.title }}</span>
+ </span>
+ </a>
+ </div>
+ {% endif %}
+ </nav>
</div>
</section>