1
0
Fork 0
mirror of https://github.com/YunoHost/apps.git synced 2024-09-03 20:06:07 +02:00
apps/store/templates/base.html

213 lines
9 KiB
HTML

<!DOCTYPE html>
<html lang="{{ locale }}">
<head>
<title>{{ _("YunoHost app store") }} | {% block title %}{% endblock %} </title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="{{ url_for('static', filename='fork-awesome.min.css') }}">
<link rel="stylesheet" href="{{ url_for('static', filename='tailwind.css') }}">
</head>
<body>
<header class="pb-2 shadow-sm">
<div
class="flex h-12 items-center gap-8 pt-2 px-4 sm:px-6 lg:px-8"
>
<a class="block" href="/">
<span class="sr-only">{{ _("Home") }}</span>
<img alt="YunoHost Logo" src="{{ url_for('static', filename='ynh_logo_roundcorner.png') }}" style="height: 3em;">
</a>
<div class="flex flex-1 items-center justify-end md:justify-between">
<nav class="hidden md:block">
<ul class="flex items-center gap-6 text-sm">
<li>
<a class="text-gray-800 font-bold transition hover:text-gray-500/75" href="{{ url_for('browse_catalog') }}">
{{ _("Catalog") }}
</a>
</li>
<li>
<a class="text-gray-800 font-bold transition hover:text-gray-500/75" href="{{ url_for('browse_wishlist') }}">
{{ _("Wishlist") }}
</a>
</li>
</ul>
</nav>
<div class="flex items-center gap-4">
<div class="hidden md:flex sm:gap-4">
<a
class="btn btn-primary-outline inline-block"
href="https://yunohost.org/docs/"
>
<i class="fa fa-external-link fa-fw" aria-hidden="true"></i>
{{ _("YunoHost documentation") }}
</a>
{% if not user %}
<a
class="btn btn-primary inline-block"
href="{{ url_for('login_using_discourse') }}"
role="button"
>
{{ _("Login using YunoHost's forum") }}
</a>
{% else %}
<div class="relative">
<button
id="toggleUserMenu"
type="button"
class="group flex shrink-0 items-center rounded-md transition"
>
{% if user['avatar_url'] %}
<img
alt="Avatar"
src="{{ user['avatar_url'] }}"
class="h-10 w-10 rounded-full object-cover"
>
{% endif %}
<p class="pt-3 ms-2 text-left text-xs inline-block">
<strong class="block font-medium">{{ user['username'] }}</strong>
</p>
<i class="pt-3 fa fa-caret-down fa-fw" aria-hidden="true"></i>
</button>
<div
id="userMenu"
class="hidden absolute end-0 z-10 mt-2 w-56 rounded-md border border-gray-100 bg-white shadow-lg"
role="menu"
>
<div class="p-2">
<a
href="/logout"
class="block rounded-md px-4 py-2 text-sm text-gray-800 hover:bg-gray-50 hover:text-gray-700"
role="menuitem"
>
{{ _("Logout") }}
</a>
</div>
</div>
</div>
{% endif %}
</div>
<div class="relative">
<button
id="toggleMenu"
class="block rounded bg-gray-100 p-2.5 text-gray-600 transition hover:text-gray-600/75 md:hidden"
>
<span class="sr-only">{{ _("Toggle menu") }}</span>
<i class="fa fa-bars h-5 w-5" aria-hidden="true"></i>
</button>
<div
id="menu"
class="hidden absolute end-0 z-10 mt-2 p-2 w-64 rounded-md border border-gray-100 text-gray-800 bg-white shadow-lg"
role="menu"
>
<div class="px-2 py-0.5">
<a
href="/"
class="block rounded-md px-4 py-3 text-sm hover:bg-gray-100"
role="menuitem"
>
{{ _("Home") }}
</a>
</div>
<div class="px-2 py-0.5">
<a
href="{{ url_for('browse_catalog') }}"
class="block rounded-md px-4 py-3 text-sm hover:bg-gray-100"
role="menuitem"
>
{{ _("Catalog") }}
</a>
</div>
<div class="px-2 py-0.5">
<a
href="{{ url_for('browse_wishlist') }}"
class="block rounded-md px-4 py-3 text-sm hover:bg-gray-100"
role="menuitem"
>
{{ _("Wishlist") }}
</a>
</div>
<div class="px-2 py-1">
<a
href="https://yunohost.org/docs/"
class="block btn btn-primary-outline text-xs text-gray-500"
role="menuitem"
>
<i class="fa fa-external-link fa-fw" aria-hidden="true"></i>
{{ _("YunoHost documentation") }}
</a>
</div>
{% if not user %}
<div class="px-2 py-1">
<a
href="{{ url_for('login_using_discourse') }}"
class="block btn btn-primary rounded-md text-xs text-gray-500"
role="button"
>
{{ _("Login using YunoHost's forum") }}
</a>
</div>
{% else %}
<hr class="mt-3" />
<div class="px-2 py-0.5">
<span
class="block rounded-md px-4 py-2 text-sm text-gray-500"
role="menuitem"
>
{% if user['avatar_url'] %}
<img
alt="Avatar"
src="{{ user['avatar_url'] }}"
class="h-10 w-10 rounded-full object-cover inline-block"
>
{% endif %}
<p class="pt-2 ms-2 inline-block text-left">
<strong class="font-medium">{{ user['username'] }}</strong>
</p>
</span>
</div>
<div class="px-2 py-0.5">
<a
href="/logout"
class="block rounded-md px-4 py-3 text-sm hover:bg-gray-100"
role="menuitem"
>
{{ _("Logout") }}
</a>
</div>
{% endif %}
</div>
</div>
</div>
</div>
</div>
</header>
<main>
{% block main %}
{% endblock %}
</main>
<footer class="h-5 my-5 text-center">
<p>
{{ _("Made with <i class='text-red-500 fa fa-heart-o' aria-label='love'></i> using <a class='text-blue-800' href='https://flask.palletsprojects.com'>Flask</a> and <a class='text-blue-800' href='https://tailwindcss.com/'>TailwindCSS</a> - <a class='text-blue-800' href='https://github.com/YunoHost/apps/tree/master/store'><i class='fa fa-code fa-fw' aria-hidden='true'></i> Source</a>") }}
</p>
</footer>
</body>
<script type="text/javascript">
{% if user %}
document.getElementById('toggleUserMenu').addEventListener('click', () => {
document.getElementById('userMenu').classList.toggle("hidden");
});
{% endif %}
document.getElementById('toggleMenu').addEventListener('click', () => {
document.getElementById('menu').classList.toggle("hidden");
});
</script>
</html>