668d9c7df8
Contains shared infrastructure for all coop services: - shared/ (factory, urls, user_loader, context, internal_api, jinja_setup) - models/ (User, Order, Calendar, Ticket, Product, Ghost CMS) - db/ (SQLAlchemy async session, base) - suma_browser/app/ (csrf, middleware, errors, authz, redis_cacher, payments, filters, utils) - suma_browser/templates/ (shared base layouts, macros, error pages) - static/ (CSS, JS, fonts, images) - alembic/ (database migrations) - config/ (app-config.yaml) - editor/ (Lexical editor Node.js build) - requirements.txt Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
69 lines
2.6 KiB
HTML
69 lines
2.6 KiB
HTML
{#
|
|
Scrolling menu macro with arrow navigation
|
|
|
|
Creates a horizontally scrollable menu (desktop) or vertically scrollable (mobile)
|
|
with arrow buttons that appear/hide based on content overflow.
|
|
|
|
Parameters:
|
|
- container_id: Unique ID for the scroll container
|
|
- items: List of items to iterate over
|
|
- item_content: Caller block that renders each item (receives 'item' variable)
|
|
- wrapper_class: Optional additional classes for outer wrapper
|
|
- container_class: Optional additional classes for scroll container
|
|
- item_class: Optional additional classes for each item wrapper
|
|
#}
|
|
|
|
{% macro scrolling_menu(container_id, items, wrapper_class='', container_class='', item_class='') %}
|
|
{% if items %}
|
|
{# Left scroll arrow - desktop only #}
|
|
<button
|
|
class="scrolling-menu-arrow-{{ container_id }} hidden flex-shrink-0 p-2 hover:bg-stone-200 rounded"
|
|
aria-label="Scroll left"
|
|
_="on click
|
|
set #{{ container_id }}.scrollLeft to #{{ container_id }}.scrollLeft - 200">
|
|
<i class="fa fa-chevron-left"></i>
|
|
</button>
|
|
|
|
{# Scrollable container #}
|
|
<div id="{{ container_id }}"
|
|
class="overflow-y-auto sm:overflow-x-auto sm:overflow-y-visible scrollbar-hide max-h-[50vh] sm:max-h-none {{ container_class }}"
|
|
style="scroll-behavior: smooth;"
|
|
_="on load or scroll
|
|
-- Show arrows if content overflows (desktop only)
|
|
if window.innerWidth >= 640 and my.scrollWidth > my.clientWidth
|
|
remove .hidden from .scrolling-menu-arrow-{{ container_id }}
|
|
add .flex to .scrolling-menu-arrow-{{ container_id }}
|
|
else
|
|
add .hidden to .scrolling-menu-arrow-{{ container_id }}
|
|
remove .flex from .scrolling-menu-arrow-{{ container_id }}
|
|
end">
|
|
<div class="flex flex-col sm:flex-row gap-1 {{ wrapper_class }}">
|
|
{% for item in items %}
|
|
<div class="{{ item_class }}">
|
|
{{ caller(item) }}
|
|
</div>
|
|
{% endfor %}
|
|
</div>
|
|
</div>
|
|
|
|
<style>
|
|
.scrollbar-hide::-webkit-scrollbar {
|
|
display: none;
|
|
}
|
|
.scrollbar-hide {
|
|
-ms-overflow-style: none;
|
|
scrollbar-width: none;
|
|
}
|
|
</style>
|
|
|
|
{# Right scroll arrow - desktop only #}
|
|
<button
|
|
class="scrolling-menu-arrow-{{ container_id }} hidden flex-shrink-0 p-2 hover:bg-stone-200 rounded"
|
|
aria-label="Scroll right"
|
|
_="on click
|
|
set #{{ container_id }}.scrollLeft to #{{ container_id }}.scrollLeft + 200">
|
|
<i class="fa fa-chevron-right"></i>
|
|
</button>
|
|
{% endif %}
|
|
{% endmacro %}
|