206 lines
6.2 KiB
Django/Jinja
206 lines
6.2 KiB
Django/Jinja
<!-- base.html.j2 -->
|
|
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<title>{% block title %}PyraFiles{% endblock %}</title>
|
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
<link href="https://www.unturf.com/css/pico.classless.min.css" rel="stylesheet">
|
|
<style>
|
|
/* Base Styles */
|
|
body {
|
|
margin: 0;
|
|
padding: 0;
|
|
}
|
|
|
|
/* Navigation Styles */
|
|
nav {
|
|
display: grid;
|
|
grid-template-columns: auto 1fr;
|
|
align-items: center;
|
|
padding: 0.5em 1em;
|
|
}
|
|
|
|
nav a strong {
|
|
font-size: 1.2em;
|
|
}
|
|
|
|
/* Navigation Links */
|
|
nav ul {
|
|
list-style: none;
|
|
display: grid;
|
|
grid-auto-flow: column;
|
|
justify-content: end;
|
|
gap: 1em;
|
|
margin: 0;
|
|
padding: 0;
|
|
}
|
|
|
|
nav ul li {
|
|
margin: 0;
|
|
}
|
|
|
|
button.link-button {
|
|
width: auto;
|
|
display: inline;
|
|
background: none;
|
|
border: none;
|
|
padding: 0;
|
|
margin: 0;
|
|
color: var(--pico-primary);
|
|
text-decoration: none;
|
|
cursor: pointer;
|
|
}
|
|
|
|
button.link-button:hover {
|
|
text-decoration: underline;
|
|
}
|
|
|
|
form.inline-form {
|
|
display: inline;
|
|
}
|
|
|
|
/* Hamburger Menu Button */
|
|
#mobile-menu-button {
|
|
display: none;
|
|
font-size: 1.5em;
|
|
background: none;
|
|
border: none;
|
|
cursor: pointer;
|
|
}
|
|
|
|
/* Responsive Styles */
|
|
@media only screen and (max-width: 600px) {
|
|
/* Adjust nav grid to include hamburger button */
|
|
nav {
|
|
grid-template-columns: auto 1fr auto;
|
|
}
|
|
|
|
/* Hide navigation links on mobile */
|
|
nav ul {
|
|
display: none;
|
|
}
|
|
|
|
/* Show hamburger menu button on mobile */
|
|
#mobile-menu-button {
|
|
display: block;
|
|
}
|
|
}
|
|
|
|
/* Mobile Menu Modal Styles */
|
|
#mobile-menu-dialog nav ul {
|
|
list-style: none;
|
|
padding: 0;
|
|
margin: 0;
|
|
display: grid;
|
|
grid-auto-flow: row;
|
|
gap: 1em;
|
|
}
|
|
|
|
#mobile-menu-dialog nav ul li {
|
|
margin: 0;
|
|
}
|
|
|
|
#mobile-menu-dialog button#mobile-menu-close {
|
|
position: absolute;
|
|
top: 0.5em;
|
|
right: 1em;
|
|
background: none;
|
|
border: none;
|
|
font-size: 1.5em;
|
|
cursor: pointer;
|
|
}
|
|
|
|
#mobile-menu-dialog article {
|
|
position: relative;
|
|
padding-top: 2em;
|
|
}
|
|
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<nav>
|
|
<a href="{{ request.route_url('home') }}"><strong>{{ request.domain }}</strong></a>
|
|
<!-- Hamburger Menu Button (only visible on mobile) -->
|
|
<button id="mobile-menu-button" aria-label="Open Menu">☰</button>
|
|
<!-- Navigation Links -->
|
|
<ul>
|
|
<li><a href="{{ request.route_url('home') }}">Home</a></li>
|
|
{% if request.user and request.user.is_verified %}
|
|
<li><a href="{{ request.route_url('create_namespace') }}">Create Namespace</a></li>
|
|
{% if request.namespace %}
|
|
<li><a href="{{ request.route_url('manage_namespace', namespace_short_id=request.namespace.short_id) }}">Manage Namespace</a></li>
|
|
{% endif %}
|
|
<li><a href="{{ request.route_url('profile') }}">Profile</a></li>
|
|
<li>
|
|
<form action="{{ request.route_url('logout') }}" method="post" class="inline-form">
|
|
<input type="hidden" name="csrf_token" value="{{ request.session.get_csrf_token() }}">
|
|
<button type="submit" class="link-button">Logout</button>
|
|
</form>
|
|
</li>
|
|
{% else %}
|
|
<li><a href="{{ request.route_url('login') }}">Login</a></li>
|
|
{% endif %}
|
|
</ul>
|
|
</nav>
|
|
|
|
<!-- Mobile Menu Modal -->
|
|
<dialog id="mobile-menu-dialog">
|
|
<article>
|
|
<button aria-label="Close Menu" id="mobile-menu-close">✕</button>
|
|
<nav>
|
|
<ul>
|
|
<li><a href="{{ request.route_url('home') }}">Home</a></li>
|
|
{% if request.user and request.user.is_verified %}
|
|
<li><a href="{{ request.route_url('create_namespace') }}">Create Namespace</a></li>
|
|
{% if request.namespace %}
|
|
<li><a href="{{ request.route_url('manage_namespace', namespace_short_id=request.namespace.short_id) }}">Manage Namespace</a></li>
|
|
{% endif %}
|
|
<li><a href="{{ request.route_url('profile') }}">Profile</a></li>
|
|
<li>
|
|
<form action="{{ request.route_url('logout') }}" method="post" class="inline-form">
|
|
<input type="hidden" name="csrf_token" value="{{ request.session.get_csrf_token() }}">
|
|
<button type="submit" class="link-button">Logout</button>
|
|
</form>
|
|
</li>
|
|
{% else %}
|
|
<li><a href="{{ request.route_url('login') }}">Login</a></li>
|
|
{% endif %}
|
|
</ul>
|
|
</nav>
|
|
</article>
|
|
</dialog>
|
|
|
|
<main class="container">
|
|
<!-- Flash messages -->
|
|
{% if request.session.peek_flash() %}
|
|
{% for message in request.session.pop_flash() %}
|
|
<div class="alert"><mark>{{ message }}</mark></div>
|
|
<br/>
|
|
{% endfor %}
|
|
{% endif %}
|
|
{% block content %}
|
|
{% endblock %}
|
|
</main>
|
|
|
|
<!-- Footer -->
|
|
<footer>
|
|
<a href="https://git.unturf.com/engineering/unturf/upload.unturf.com">PyraFiles public domain source code</a>
|
|
</footer>
|
|
|
|
<!-- JavaScript for Mobile Menu -->
|
|
<script>
|
|
const mobileMenuButton = document.getElementById('mobile-menu-button');
|
|
const mobileMenuDialog = document.getElementById('mobile-menu-dialog');
|
|
const mobileMenuClose = document.getElementById('mobile-menu-close');
|
|
|
|
mobileMenuButton.addEventListener('click', () => {
|
|
mobileMenuDialog.showModal();
|
|
});
|
|
|
|
mobileMenuClose.addEventListener('click', () => {
|
|
mobileMenuDialog.close();
|
|
});
|
|
</script>
|
|
</body>
|
|
</html>
|