art-dag/celery
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Restyle base.html to use coop header with fragments
All checks were successful
Build and Deploy / build-and-deploy (push) Successful in 1m55s
Details

Browse Source 
Coop-style sky header with nav-tree, auth-menu, cart-mini fragments.
Art-DAG tabs (Runs, Recipes, etc.) in sub-nav bar with stone pill
styling matching coop patterns.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
giles
2026-02-24 23:00:19 +00:00
parent 82823e393a
commit be9fa8e920
1 changed files with 37 additions and 40 deletions
Download Patch File Download Diff File Expand all files Collapse all files

77
app/templates/base.html
View File

@@ -1,49 +1,46 @@
{% extends "_base.html" %}
{% block brand %}
<a href="https://blog.rose-ash.com/" class="text-white hover:text-gray-200 no-underline">Rose Ash</a>
<span class="text-gray-500 mx-1">|</span>
Art-DAG
<a href="https://blog.rose-ash.com/" class="no-underline text-stone-900">Rose Ash</a>
<span class="text-stone-400 mx-1">|</span>
<a href="/" class="no-underline text-stone-900">Art-DAG</a>
{% endblock %}
{% block nav_items %}
<nav class="flex items-center space-x-6">
<a href="/runs" class="text-gray-300 hover:text-white {% if active_tab == 'runs' %}text-white font-medium{% endif %}">Runs{% if nav_counts and nav_counts.runs %} ({{ nav_counts.runs }}){% endif %}</a>
<a href="/recipes" class="text-gray-300 hover:text-white {% if active_tab == 'recipes' %}text-white font-medium{% endif %}">Recipes{% if nav_counts and nav_counts.recipes %} ({{ nav_counts.recipes }}){% endif %}</a>
<a href="/effects" class="text-gray-300 hover:text-white {% if active_tab == 'effects' %}text-white font-medium{% endif %}">Effects{% if nav_counts and nav_counts.effects %} ({{ nav_counts.effects }}){% endif %}</a>
<a href="/media" class="text-gray-300 hover:text-white {% if active_tab == 'media' %}text-white font-medium{% endif %}">Media{% if nav_counts and nav_counts.media %} ({{ nav_counts.media }}){% endif %}</a>
<a href="/storage" class="text-gray-300 hover:text-white {% if active_tab == 'storage' %}text-white font-medium{% endif %}">Storage{% if nav_counts and nav_counts.storage %} ({{ nav_counts.storage }}){% endif %}</a>
<a href="/download/client" class="text-gray-300 hover:text-white" title="Download CLI client">Client</a>
{% if request and request.state.nav_tree_html %}
<span class="text-gray-600">|</span>
<div class="flex items-center space-x-3 [&_a]:text-gray-400 [&_a:hover]:text-white [&_a]:text-sm [&_a]:no-underline [&_img]:w-5 [&_img]:h-5">
{{ request.state.nav_tree_html | safe }}
</div>
{% else %}
<span class="text-gray-600">|</span>
<a href="https://blog.rose-ash.com/" class="text-gray-400 hover:text-white text-sm">Blog</a>
<a href="https://market.rose-ash.com/" class="text-gray-400 hover:text-white text-sm">Market</a>
<a href="https://account.rose-ash.com/" class="text-gray-400 hover:text-white text-sm">Account</a>
{% endif %}
</nav>
{% block cart_mini %}
{% if request and request.state.cart_mini_html %}
{{ request.state.cart_mini_html | safe }}
{% endif %}
{% endblock %}
{% block nav_right %}
<div class="flex items-center space-x-4">
{% if request and request.state.cart_mini_html %}
<div class="[&_a]:text-gray-300 [&_a:hover]:text-white">
{{ request.state.cart_mini_html | safe }}
</div>
{% endif %}
{% if request and request.state.auth_menu_html %}
<div class="[&_a]:text-gray-300 [&_a:hover]:text-white [&_a]:text-sm [&_a]:no-underline">
{{ request.state.auth_menu_html | safe }}
</div>
{% elif user %}
<span class="text-gray-400">{{ user.username }}</span>
<a href="/auth/logout" class="text-gray-300 hover:text-white">Logout</a>
{% else %}
<a href="/auth/login" class="text-gray-300 hover:text-white">Login</a>
{% endif %}
{% block nav_tree %}
{% if request and request.state.nav_tree_html %}
{{ request.state.nav_tree_html | safe }}
{% endif %}
{% endblock %}
{% block auth_menu %}
{% if request and request.state.auth_menu_html %}
{{ request.state.auth_menu_html | safe }}
{% endif %}
{% endblock %}
{% block auth_menu_mobile %}
{% if request and request.state.auth_menu_html %}
{{ request.state.auth_menu_html | safe }}
{% endif %}
{% endblock %}
{% block sub_nav %}
<div class="bg-stone-200 border-b border-stone-300">
<div class="max-w-screen-2xl mx-auto px-4">
<nav class="flex items-center gap-4 py-2 text-sm overflow-x-auto no-scrollbar">
<a href="/runs" class="whitespace-nowrap px-3 py-1.5 rounded {% if active_tab == 'runs' %}bg-stone-500 text-white{% else %}text-stone-700 hover:bg-stone-300{% endif %}">Runs{% if nav_counts and nav_counts.runs %} ({{ nav_counts.runs }}){% endif %}</a>
<a href="/recipes" class="whitespace-nowrap px-3 py-1.5 rounded {% if active_tab == 'recipes' %}bg-stone-500 text-white{% else %}text-stone-700 hover:bg-stone-300{% endif %}">Recipes{% if nav_counts and nav_counts.recipes %} ({{ nav_counts.recipes }}){% endif %}</a>
<a href="/effects" class="whitespace-nowrap px-3 py-1.5 rounded {% if active_tab == 'effects' %}bg-stone-500 text-white{% else %}text-stone-700 hover:bg-stone-300{% endif %}">Effects{% if nav_counts and nav_counts.effects %} ({{ nav_counts.effects }}){% endif %}</a>
<a href="/media" class="whitespace-nowrap px-3 py-1.5 rounded {% if active_tab == 'media' %}bg-stone-500 text-white{% else %}text-stone-700 hover:bg-stone-300{% endif %}">Media{% if nav_counts and nav_counts.media %} ({{ nav_counts.media }}){% endif %}</a>
<a href="/storage" class="whitespace-nowrap px-3 py-1.5 rounded {% if active_tab == 'storage' %}bg-stone-500 text-white{% else %}text-stone-700 hover:bg-stone-300{% endif %}">Storage{% if nav_counts and nav_counts.storage %} ({{ nav_counts.storage }}){% endif %}</a>
<a href="/download/client" class="whitespace-nowrap px-3 py-1.5 rounded text-stone-700 hover:bg-stone-300" title="Download CLI client">Client</a>
</nav>
</div>
</div>
{% endblock %}