pyfedi/app/templates/base.html
rimu 7885cfcdf4 Combine structure.scss and style.scss
The distinction between the two was never very clear and it is annoying to have to guess which file one needs to edit.
2024-07-05 16:27:53 +08:00

296 lines
23 KiB
HTML

{% macro render_username(user) -%}
<span class="render_username">
{% if user.deleted -%}
[deleted]
{% else -%}
{% if user.avatar_id and not low_bandwidth -%}
<a href="/u/{{ user.link() }}" title="{{ user.ap_id if user.ap_id != none else user.user_name }}">
<img src="{{ user.avatar_thumbnail() }}" alt="" loading="lazy" /></a>
{% endif -%}
<a href="/u/{{ user.link() }}" title="{{ user.ap_id if user.ap_id != none else user.user_name }}">{{ user.display_name() }}</a>
{% if user.created_recently() -%}
<span class="fe fe-new-account" title="New account"> </span>
{% endif -%}
{% if user.bot -%}
<span class="fe fe-bot-account" title="Bot account"> </span>
{% endif -%}
{% if user.reputation < -10 -%}
<span class="fe fe-warning red" title="Very low reputation. Beware."> </span>
<span class="fe fe-warning red" title="Very low reputation. Beware!"> </span>
{% elif user.reputation < 0 -%}
<span class="fe fe-warning orangered" title="Low reputation."> </span>
{% endif -%}
{% endif -%}
</span>
{% endmacro -%}
<!doctype html>
<html lang="en">
<head>
{% block head -%}
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, user-scalable=yes, initial-scale=1.0, shrink-to-fit=no">
<meta http-equiv="Content-Language" content="en" />
<link rel="preconnect" href="https://cdn.jsdelivr.net">
<link rel="preconnect" href="https://cdnjs.cloudflare.com" crossorigin>
<meta name="msapplication-TileColor" content="#007BBF">
<meta name="theme-color" content="#007BBF">
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent"/>
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="mobile-web-app-capable" content="yes">
<meta name="HandheldFriendly" content="True">
<meta name="MobileOptimized" content="320">
{% block styles -%}
{{ bootstrap.load_css() }}
<link href="{{ url_for('static', filename='styles.css', changed=getmtime('styles.css')) }}" type="text/css" rel="stylesheet" />
<link href="{{ url_for('static', filename='themes/high_contrast/styles.css') }}" type="text/css" rel="alternate stylesheet" title="High contrast" />
{% if not low_bandwidth -%}
<link href="{{ url_for('static', filename='js/markdown/downarea.css') }}" type="text/css" rel="stylesheet" />
<link href="{{ url_for('static', filename='js/lightbox/baguetteBox.css') }}" type="text/css" rel="stylesheet" />
{% endif -%}
{% if theme() and file_exists('app/templates/themes/' + theme() + '/styles.css') -%}
<link href="{{ url_for('static', filename='themes/' + theme() + '/styles.css') }}" type="text/css" rel="stylesheet" />
{% endif -%}
{% endblock -%}
<title>{% if title %}{{ title }}{% else %}{{ _('PieFed') }}{% endif %}</title>
<link rel="apple-touch-icon" sizes="152x152" href="{{ g.site.logo_152 if g.site.logo_152 else '/static/images/apple-touch-icon.png' }}">
<link rel="icon" type="image/png" sizes="32x32" href="{{ g.site.logo_32 if g.site.logo_32 else '/static/images/favicon-32x32.png' }}">
<link rel="icon" type="image/png" sizes="16x16" href="{{ g.site.logo_16 if g.site.logo_16 else '/static/images/favicon-16x16.png' }}">
<link rel="manifest" href="/static/manifest.json">
<link rel="shortcut icon" type="image/png" href="{{ g.site.logo_32 if g.site.logo_32 else '/static/images/favicon-32x32.png' }}">
<link href="{{ g.site.logo_16 if g.site.logo_16 else '/static/images/favicon.ico' }}" rel='icon' type='image/x-icon'>
<meta name="msapplication-TileColor" content="#da532c">
<meta name="msapplication-config" content="/static/browserconfig.xml">
<meta name="theme-color" content="#ffffff">
{% if canonical -%}
<link rel="canonical" href="{{ canonical }}" />
{% endif -%}
{% if description -%}
<meta name="description" content="{{ description }}" />
{% endif -%}
{% if og_image -%}
<meta property="og:image" content="{{ og_image }}" />
{% endif -%}
{% if rss_feed -%}
<link rel="alternate" type="application/rss+xml" title="{{ rss_feed_name }}" href="{{ rss_feed }}" />
{% endif -%}
{% if noindex -%}
<meta name="robots" content="noindex">
{% endif -%}
<script nonce="{{ session['nonce']}}">
const getStoredTheme = () => localStorage.getItem('theme')
const setStoredTheme = theme => localStorage.setItem('theme', theme)
const getPreferredTheme = () => {
const storedTheme = getStoredTheme()
if (storedTheme) {
return storedTheme
}
return window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light'
}
const setTheme = theme => {
if (theme === 'auto' && window.matchMedia('(prefers-color-scheme: dark)').matches) {
document.documentElement.setAttribute('data-bs-theme', 'dark')
} else {
document.documentElement.setAttribute('data-bs-theme', theme)
}
}
setTheme(getPreferredTheme());
</script>
{% if preconnect and not low_bandwidth -%}
<link rel="preconnect" href='{{ preconnect }}'>
{% endif -%}
{% endblock -%}
</head>
<body class="d-flex flex-column{{ ' low_bandwidth' if low_bandwidth }}">
<a href="#outer_container" class="skip-link" role="navigation" aria-label="Skip main navigation" tabindex="">Skip to main content</a>
<a href="#side_pane" class="skip-link" role="navigation" aria-label="Go to side pane" tabindex="">Go to side pane</a>
<!-- Page content -->
{% block navbar -%}
<div class="navbar navbar-expand-lg sticky-md-top">
<div class="{{ 'container-lg' if post_layout != 'masonry_wide' else 'container-fluid' }}" role="banner">
<a class="navbar-brand" href="/">{% if not low_bandwidth %}<img src="{{ g.site.logo if g.site.logo else '/static/images/logo2.png' }}" alt="Logo" width="50" height="50" />{% endif %}{{ g.site.name }}</a>
{% if current_user.is_authenticated -%}
<a class="nav-link d-lg-none" href="/notifications" aria-label="{{ _('Notifications') }}">
{% if current_user.unread_notifications -%}
<span class="fe fe-bell red"></span> <span class="red">{{ current_user.unread_notifications }}</span>
{% else -%}
<span class="fe fe-bell"></span>
{% endif -%}
</a>
{% endif -%}
<button id="navbar-toggler" class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="true" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent" role="navigation">
<ul class="nav navbar-nav ml-md-4">
{% if current_user.is_anonymous %}
<li class="nav-item dropdown{% if active_parent == 'home' %} active{% endif %}">
<a class="nav-link dropdown-toggle" data-bs-toggle="dropdown" href="/home" aria-haspopup="true" aria-expanded="false">{{ _('Home') }}</a>
<ul class="dropdown-menu">
<li><a class="dropdown-item{% if active_child == 'popular' %} active{% endif %}" href="/home"><span class="fe fe-home"></span>{{ _('Home') }}</a></li>
<li><a class="dropdown-item{% if active_child == 'popular' %} active{% endif %}" href="/popular"><span class="fe fe-popular"></span>{{ _('Popular') }}</a></li>
<li><a class="dropdown-item{% if active_child == 'all_posts' %} active{% endif %}" href="/all"><span class="fe fe-all"></span>{{ _('All posts') }}</a></li>
</ul>
<li class="nav-item dropdown{% if active_parent == 'communities' %} active{% endif %}">
<a class="nav-link dropdown-toggle" data-bs-toggle="dropdown" href="/topics" aria-haspopup="true" aria-expanded="false">{{ _('Topics') }}</a>
<ul class="dropdown-menu">
{% if menu_topics %}
{% for topic_menu_item in menu_topics -%}
<li><a class="dropdown-item{% if topic and topic.id == topic_menu_item.id%} active{% endif %}" href="/topic/{{ topic_menu_item.path() }}">{{ topic_menu_item.name }}</a></li>
{% endfor -%}
<li><hr class="dropdown-divider"></li>
<li><a class="dropdown-item{% if active_child == 'list_topics' %} active{% endif %}" href="/topics">{{ _('More topics') }}</a></li>
{% else %}
<li><a class="dropdown-item{% if active_child == 'list_topics' %} active{% endif %}" href="/topics">{{ _('Browse by topic') }}</a></li>
{% endif %}
<li><a class="dropdown-item{% if active_child == 'list_communities' %} active{% endif %}" href="/communities">{{ _('All communities') }}</a></li>
</ul>
</li>
<li class="nav-item"><a class="nav-link" href="/auth/login">{{ _('Log in') }}</a></li>
<li class="nav-item"><a class="nav-link" href="/auth/register">{{ _('Register') }}</a></li>
<li class="nav-item"><a class="nav-link" href="/donate">{{ _('Donate') }}</a></li>
{% else %}
<li class="nav-item dropdown{% if active_parent == 'home' %} active{% endif %}">
<a class="nav-link dropdown-toggle" data-bs-toggle="dropdown" href="/home" aria-haspopup="true" aria-expanded="false">{{ _('Home') }}</a>
<ul class="dropdown-menu">
<li><a class="dropdown-item{% if active_child == 'home' %} active{% endif %}" href="/home"><span class="fe fe-home"></span>{{ _('Home') }}</a></li>
<li><a class="dropdown-item{% if active_child == 'popular' %} active{% endif %}" href="/popular"><span class="fe fe-popular"></span>{{ _('Popular') }}</a></li>
<li><a class="dropdown-item{% if active_child == 'all' %} active{% endif %}" href="/all"><span class="fe fe-all"></span>{{ _('All posts') }}</a></li>
</ul>
<li class="nav-item dropdown{% if active_parent == 'communities' %} active{% endif %}">
<a class="nav-link dropdown-toggle" data-bs-toggle="dropdown" href="/topics" aria-haspopup="true" aria-expanded="false">{{ _('Topics') }}</a>
<ul class="dropdown-menu">
{% if menu_topics -%}
{% for topic_menu_item in menu_topics -%}
<li><a class="dropdown-item{% if topic and topic.id == topic_menu_item.id%} active{% endif %}" href="/topic/{{ topic_menu_item.path() }}">{{ topic_menu_item.name }}</a></li>
{% endfor -%}
<li><hr class="dropdown-divider"></li>
<li><a class="dropdown-item{% if active_child == 'list_topics' %} active{% endif %}" href="/topics">{{ _('More topics') }}</a></li>
{% else -%}
<li><a class="dropdown-item{% if active_child == 'list_topics' %} active{% endif %}" href="/topics">{{ _('Browse by topic') }}</a></li>
{% endif -%}
<li><a class="dropdown-item{% if active_child == 'list_communities' %} active{% endif %}" href="/communities">{{ _('All communities') }}</a></li>
{% if moderating_communities %}
<li><hr class="dropdown-divider"></li>
<li><h6 class="dropdown-header">{{ _('Moderating') }}</h6></li>
{% for community_menu_item in moderating_communities -%}
<li class="pl-2"><a class="dropdown-item{% if community and community.id == community_menu_item.id%} active{% endif %}" href="/c/{{ community_menu_item.link() }}">{{ community_menu_item.title }}</a></li>
{% endfor -%}
{% endif %}
{% if joined_communities %}
<li><hr class="dropdown-divider"></li>
<li><h6 class="dropdown-header">{{ _('Joined communities') }}</h6></li>
{% for community_menu_item in joined_communities -%}
<li class="pl-2"><a class="dropdown-item{% if community and community.id == community_menu_item.id%} active{% endif %}" href="/c/{{ community_menu_item.link() }}">{{ community_menu_item.title }}</a></li>
{% endfor -%}
{% endif %}
</ul>
</li>
<li class="nav-item dropdown{% if active_parent == 'account' %} active{% endif %}">
<a class="nav-link dropdown-toggle" data-bs-toggle="dropdown" href="/u/{{ current_user.user_name.lower() }}" aria-haspopup="true" aria-expanded="false">{{ _('Account') }}</a>
<ul class="dropdown-menu">
<li><a class="dropdown-item{% if active_child == 'view_profile' %} active{% endif %}" href="/u/{{ current_user.user_name.lower() }}">{{ _('View profile') }}</a></li>
<li><a class="dropdown-item{% if active_child == 'edit_profile' %} active{% endif %}" href="/user/settings">{{ _('Edit profile & settings') }}</a></li>
<li><a class="dropdown-item{% if active_child == 'chats' %} active{% endif %}" href="/chat">{{ _('Chats') }}</a></li>
<li><a class="dropdown-item{% if active_child == 'bookmarks' %} active{% endif %}" href="/bookmarks">{{ _('Bookmarks') }}</a></li>
</ul>
</li>
<li class="nav-item"><a class="nav-link" href="/donate">{{ _('Donate') }}</a></li>
{% if user_access('change instance settings', current_user.id) %}
<li class="nav-item dropdown{% if active_parent == 'admin' %} active{% endif %}">
<a class="nav-link dropdown-toggle" data-bs-toggle="dropdown" href="/admin/" aria-haspopup="true" aria-expanded="false">{{ _('Admin') }}</a>
<ul class="dropdown-menu">
<li><a class="dropdown-item{{ ' active' if active_child == 'admin_site' }}" href="{{ url_for('admin.admin_site') }}">{{ _('Site profile') }}</a></li>
<li><a class="dropdown-item{{ ' active' if active_child == 'admin_misc' }}" href="{{ url_for('admin.admin_misc') }}">{{ _('Misc settings') }}</a></li>
<li><a class="dropdown-item{{ ' active' if active_child == 'admin_communities' }}" href="{{ url_for('admin.admin_communities') }}">{{ _('Communities') }}</a></li>
<li><a class="dropdown-item{{ ' active' if active_child == 'admin_topics' }}" href="{{ url_for('admin.admin_topics') }}">{{ _('Topics') }}</a></li>
<li><a class="dropdown-item{{ ' active' if active_child == 'admin_users' }}" href="{{ url_for('admin.admin_users', local_remote='local') }}">{{ _('Users') }}</a></li>
<li><a class="dropdown-item{{ ' active' if active_child == 'admin_users_trash' }}" href="{{ url_for('admin.admin_users_trash', local_remote='local') }}">{{ _('Monitoring - users') }}</a></li>
<li><a class="dropdown-item{{ ' active' if active_child == 'admin_content_trash' }}" href="{{ url_for('admin.admin_content_trash') }}">{{ _('Monitoring - content') }}</a></li>
<li><a class="dropdown-item{{ ' active' if active_child == 'admin_content_spam' }}" href="{{ url_for('admin.admin_content_spam') }}">{{ _('Monitoring - spammy content') }}</a></li>
<li><a class="dropdown-item{{ ' active' if active_child == 'admin_content_deleted' }}" href="{{ url_for('admin.admin_content_deleted') }}">{{ _('Deleted content') }}</a></li>
{% if g.site.registration_mode == 'RequireApplication' %}
<li><a class="dropdown-item{{ ' active' if active_child == 'admin_approve_registrations' }}" href="{{ url_for('admin.admin_approve_registrations') }}">{{ _('Registration applications') }}</a></li>
{% endif %}
<li><a class="dropdown-item{{ ' active' if active_child == 'admin_reports' }}" href="{{ url_for('admin.admin_reports') }}">{{ _('Moderation') }}</a></li>
<li><a class="dropdown-item{{ ' active' if active_child == 'admin_federation' }}" href="{{ url_for('admin.admin_federation') }}">{{ _('Federation') }}</a></li>
<li><a class="dropdown-item{{ ' active' if active_child == 'admin_newsletter' }}" href="{{ url_for('admin.newsletter') }}">{{ _('Newsletter') }}</a></li>
<li><a class="dropdown-item{{ ' active' if active_child == 'admin_activities' }}" href="{{ url_for('admin.admin_activities') }}">{{ _('Activities') }}</a></li>
</ul>
</li>
{% endif %}
<li class="nav-item"><a class="nav-link" href="/auth/logout">{{ _('Log out') }}</a></li>
<li class="nav-item d-none d-md-inline-block">
<a class="nav-link" href="/notifications" aria-label="{{ _('%(num)d unread notifications', num=current_user.unread_notifications) if current_user.unread_notifications else _('Notifications') }}">
{% if current_user.unread_notifications %}
<span class="fe fe-bell red"></span> <span class="red">{{ current_user.unread_notifications }}</span>
{% else %}
<span class="fe fe-bell"></span>
{% endif %}
</a>
</li>
{% endif %}
<li class="nav-item" aria-label="{{ _('Search') }}"><a class="nav-link" id="search" href="/search" tabindex="" title="{{ _('Search') }}"><span class="fe fe-search"></span></a></li>
<li class="nav-item" aria-label="{{ _('Light mode') }}"><a class="nav-link" id="light_mode" href="#" tabindex="" title="{{ _('Light mode') }}"><span class="fe fe-sun"></span></a></li>
<li class="nav-item" aria-label="{{ _('Dark mode') }}"><a class="nav-link" id="dark_mode" href="#" tabindex="" title="{{ _('Dark mode') }}"><span class="fe fe-moon"></span></a></li>
</ul>
</div>
</div>
</div>
{% endblock %}
{% block content %}
<div id="outer_container" class="{{ 'container-lg' if post_layout != 'masonry_wide' else 'container-fluid' }} flex-shrink-0" role="main">
{% with messages = get_flashed_messages(with_categories=True) %}
{% if messages %}
{% for category, message in messages %}
<div class="alert alert-{{ category }}" role="alert">{{ message }}</div>
{% endfor %}
{% endif %}
{% endwith %}
{# application content needs to be provided in the app_content block #}
{% block app_content %}{% endblock %}
</div>
<footer class="footer mt-auto" role="contentinfo">
<p role="timer" id="timeSpent" class="text-center mt-4" title="This is how long you have spent using PieFed during this month. We hope this use of your time aligns with your priorities and values."></p>
<p class="text-center"><a href="/donate">{{ _('Donate') }}</a></p>
<p class="text-center"><a href="/about">{{ _('About') }}</a></p>
<p class="text-center"><a href="/keyboard_shortcuts">{{ _('Keyboard shortcuts') }}</a></p>
<p class="text-center"><a href="https://codeberg.org/rimu/pyfedi">PieFed is free and open source</a>.<br />Please <a href="https://codeberg.org/rimu/pyfedi/issues">report bugs</a> or <a href="https://join.piefed.social/get-involved/">get involved</a>.</p>
<p class="text-center"><a href="/privacy">Privacy policy</a></p>
</footer>
{% endblock -%}
{% block scripts -%}
{% if not low_bandwidth -%}
{{ str(moment.include_moment(local_js='/static/js/moment-with-locales.min.js')).replace('<script>', '<script nonce="' + session['nonce'] + '">')|safe }}
{{ str(moment.lang(g.locale)).replace('<script>', '<script nonce="' + session['nonce'] + '">')|safe }}
{% endif -%}
{% endblock -%}
{% if not low_bandwidth -%}
{{ str(bootstrap.load_js()).replace('<script ', '<script nonce="' + session['nonce'] + '" ')|safe }}
<script src="{{ url_for('static', filename='js/lightbox/baguetteBox.js') }}" nonce="{{ session['nonce'] }}"></script>
{% endif -%}
<script type="text/javascript" src="{{ url_for('static', filename='js/htmx.min.js') }}"></script>
<script type="text/javascript" src="{{ url_for('static', filename='js/scripts.js', changed=getmtime('js/scripts.js')) }}"></script>
{% if not low_bandwidth -%}
{% if post_layout == 'masonry' or post_layout == 'masonry_wide' -%}
<!-- -->
{% endif -%}
<script type="text/javascript" src="{{ url_for('static', filename='js/markdown/downarea.js', changed=getmtime('js/markdown/downarea.js')) }}"></script>
{% endif -%}
{% if theme() and file_exists('app/templates/themes/' + theme() + '/scripts.js') -%}
<script src="{{ url_for('static', filename='themes/' + theme() + '/scripts.js') }}"></script>
{% endif -%}
{% block end_scripts -%}
{% endblock -%}
</body>
</html>