rDrama/files/templates/header.html
TLSM ef7f470ba7
Split notification routes, hard wrap, sort order
Change the notifications subpages to be distinct route handlers with
actual paths rather than query parameters. They already were a massive
conditional chain with almost no common logic.

Hard wrap some of the more egregious query lines. Use less duplicated
code for shadowban exclusion.

Only major functionality change which is somewhat related to #476 is
to sort subtrees by Comment.id DESC. Otherwise, upstream is
substantially the same as TheMotte. Given that upstream didn't
experience #476, I think the issue may have been resolved by prior
changes to filtering / comment visibility & moderation.
2023-07-09 04:37:54 -04:00

209 lines
10 KiB
HTML

<nav id="main-navigation" class="shadow shadow-md">
<div class="navbar navbar-expand-md" id="navbar">
<div class="container-fluid" style="padding:0;">
<a href="/" class="navbar-brand mr-auto">
<img alt="header icon" height=33 width=80 src="{{ ('images/'~SITE_ID~'/headericon.webp') | asset }}">
</a>
<a href="/" class="flex-grow-1">
<img id="logo" alt="logo" src="{{ ('images/'~SITE_ID~'/logo.webp') | asset }}" width="100" height="20">
</a>
<div class="flex-grow-1 d-fl d-none d-md-block {% if not v %}pad{% endif %}">
<form id="searchform" class="form-inline search flex-nowrap mx-0 mx-lg-auto" {% if err %}style="margin-right:40rem!important"{% endif %} action="{% if request.path.startswith('/search') %}{{request.path}}{% else %}/search/posts/{% endif %}" method="get">
<input autocomplete="off" class="form-control w-100" placeholder="Search" aria-label="Search" name="q" value="{{request.values.get('q', '')}}">
<span class="input-group-append">
<span class="input-group-text border-0 bg-transparent" style="margin-left: -2.5rem; cursor: pointer;" onclick="document.getElementById('searchform').submit()">
<i class="fa fa-search" aria-hidden="true"></i>
</span>
</span>
</form>
</div>
{% if g.webview %}
<a class="mobile-nav-icon d-md-none" onclick="location.reload()"><i class="fas fa-arrow-rotate-right align-middle text-gray-500 black"></i></a>
{% endif %}
{% if v %}
{% if v.notifications_count %}
<a class="mobile-nav-icon d-md-none pl-0" href="/notifications{% if v.do_posts %}/posts{% endif %}" data-bs-toggle="tooltip" data-bs-placement="bottom" title="Notifications"><i class="fas fa-bell align-middle text-danger" {% if v.do_posts %}style="color:blue!important"{% endif %}></i><span class="notif-count ml-1" style="padding-left: 4.5px;{% if v.do_posts %}background:blue{% endif %}">{{v.notifications_count}}</span></a>
{% else %}
<a class="mobile-nav-icon d-md-none" href="/notifications" data-bs-toggle="tooltip" data-bs-placement="bottom" title="Notifications"><i class="fas fa-bell align-middle text-gray-500 black"></i></a>
{% endif %}
{% endif %}
{% if not err %}
{% if v and v.admin_level >= 2 %}
<a class="mobile-nav-icon d-md-none" href="/admin" data-bs-toggle="tooltip" data-bs-placement="bottom" title="Admin Tools"><i class="fas fa-crown align-middle text-gray-500 black"></i></a>
{% endif %}
{% if v %}
<a class="mobile-nav-icon d-md-none" href="/submit" data-bs-toggle="tooltip" data-bs-placement="bottom" title="New Post"><i class="fas fa-edit align-middle text-gray-500 black"></i></a>
{% else %}
<a class="mobile-nav-icon d-md-none" href="/login" data-bs-toggle="tooltip" data-bs-placement="bottom" title="New Post"><i class="fas fa-edit align-middle text-gray-500 black"></i></a>
{% endif %}
<button class="navbar-toggler" role="button" data-bs-toggle="collapse" data-bs-target="#navbarResponsive"
aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon {% if v and v.notifications_count %}position-relative{% endif %}"><i class="fal fa-bars text-gray-500 black"></i>
</span>
</button>
<div class="collapse navbar-collapse" id="navbarResponsive">
<ul class="navbar-nav ml-auto d-none d-md-flex">
{% if v %}
{% if v.notifications_count %}
<li class="nav-item d-flex align-items-center text-center justify-content-center mx-1">
<a class="nav-link position-relative" href="/notifications{% if v.do_posts %}/posts{% endif %}" data-bs-toggle="tooltip" data-bs-placement="bottom" title="Notifications"><i class="fas fa-bell text-danger" {% if v.do_posts %}style="color:blue!important"{% endif %}></i><span class="notif-count ml-1" style="padding-left: 4.5px;{% if v.do_posts %}background:blue{% endif %}">{{v.notifications_count}}</span></a>
</li>
{% else %}
<li class="nav-item d-flex align-items-center text-center justify-content-center mx-1">
<a class="nav-link" href="/notifications" data-bs-toggle="tooltip" data-bs-placement="bottom" title="Notifications"><i class="fas fa-bell"></i></a>
</li>
{% endif %}
{% endif %}
{% if v and v.admin_level >= 2 %}
<li class="nav-item d-flex align-items-center justify-content-center text-center mx-1">
<a class="nav-link" href="/admin/" data-bs-toggle="tooltip" data-bs-placement="bottom" title="Admin Tools"><i class="fas fa-crown{% if v.has_report_queue %} text-success{% endif %}"></i></a>
</li>
{% endif %}
<li class="nav-item d-flex align-items-center justify-content-center text-center mx-1">
<a class="nav-link" href="/comments" data-bs-toggle="tooltip" data-bs-placement="bottom" title="Comments"><i class="fas fa-comment-dots"></i></a>
</li>
{% if v and v.admin_level >= 2 %}
<li class="nav-item d-flex align-items-center justify-content-center text-center mx-1">
<a class="nav-link" href="/leaderboard" data-bs-toggle="tooltip" data-bs-placement="bottom" title="Users"><i class="fas fa-trophy"></i></a>
</li>
{% endif %}
{% if v %}
<li class="nav-item d-flex align-items-center justify-content-center text-center mx-1">
<a class="nav-link" href="/submit" data-bs-toggle="tooltip" data-bs-placement="bottom" title="New Post"><i class="fas fa-edit"></i></a>
</li>
<li class="nav-item d-flex align-items-center justify-content-center text-center">
<div class="dropdown" id="account-menu-header">
<a class="nav-link bg-transparent py-0 pr-0" role="button" id="dropdownMenuLink" data-bs-toggle="dropdown"
aria-haspopup="true" aria-expanded="false">
<div class="d-flex">
<div><img alt="your profile picture" loading="lazy" src="{{v.profile_url}}" class="profile-pic-35"></div>
<div class="text-left pl-2 d-flex align-items-center">
<div style="color: var(--primary-light1)" class="text-small font-weight-bold {% if v.patron %}patron{% endif %}"><span {% if v.patron %}class="patron" style="background-color:#{{v.namecolor}}"{% endif %}>{{v.username}}</span></div>
</div>
</div>
</a>
<div id="account-menu" class="dropdown-menu dropdown-menu-right dropdown-menu-lg-left border-0 shadow fade px-0">
<div class="px-2">
<a class="dropdown-item" href="{{v.url}}"><i class="fas fa-user-circle fa-fw mr-3"></i>My Profile</a>
<a class="dropdown-item" href="/settings"><i class="fas fa-cog fa-fw mr-3"></i>Settings</a>
</div>
<div class="px-2">
<button class="dropdown-item copy-link" data-clipboard-text="{{SITE_FULL}}/signup?ref={{v.username}}"><i class="fas fa-user-friends fa-fw mr-3"></i>Invite Friends</button>
</div>
<div class="px-2">
<a class="dropdown-item" href="/changelog"><i class="fas fa-clipboard fa-fw mr-3"></i>Changelog</a>
<a class="dropdown-item" rel="nofollow noopener noreferrer" href="https://github.com/themotte/rDrama"><i class="fab fa-github fa-fw mr-3"></i>Source Code</a>
<a class="dropdown-item" href="/support"><i class="fas fa-hippo fa-fw mr-3"></i>Support {{SITE_TITLE}}</a>
<a class="dropdown-item" href="/contact"><i class="fas fa-file-signature fa-fw mr-3"></i>Contact Us</a>
</div>
<div class="px-2">
<a class="dropdown-item" role="button" href="/logout"><i class="fas fa-sign-out fa-fw mr-3"></i>Log Out</a>
</div>
</div>
</div>
</li>
{% else %}
<li class="nav-item d-flex align-items-center justify-content-center mx-1">
<a class="btn btn-primary" href="/contact">Contact Us</a>
</li>
<li class="nav-item d-flex align-items-center justify-content-center mx-1">
<a class="btn btn-primary" href="/login?redirect={{request.path | urlencode}}">Sign In</a>
</li>
<li class="nav-item d-flex align-items-center justify-content-center mx-1">
<a class="btn btn-primary" href="/signup">Sign Up</a>
</li>
{% endif %}
</ul>
<ul style="overflow:auto" class="navbar-nav ml-auto d-flex d-md-none mt-3">
<li class="nav-item pb-3">
<form id="searchform" class="form-inline search flex-nowrap mx-0 mx-lg-auto" action="/search/posts/" method="get">
<input autocomplete="off" class="form-control form-control-sm w-100" placeholder="Search" aria-label="Search" name="q">
<span class="input-group-append">
<span class="input-group-text border-0 bg-transparent" style="margin-left: -2.5rem; cursor: pointer;" onclick="document.getElementById('searchform').submit()">
<i class="fa fa-search" aria-hidden="true"></i>
</span>
</span>
</form>
</li>
{% if v %}
<li class="nav-item">
<a class="nav-link" href="{{v.url}}"><i class="fas fa-user-circle fa-fw mr-3"></i>@{{v.username}}</a>
</li>
<li class="nav-item">
<a class="nav-link" href="/settings"><i class="fas fa-cog fa-fw mr-3"></i>Settings</a>
</li>
{% if not g.webview %}
<li class="nav-item">
<a class="nav-link copy-link" data-clipboard-text="{{SITE_FULL}}/signup?ref={{v.username}}"><i class="fas fa-user-friends fa-fw mr-3"></i>Invite Friends</a>
</li>
{% endif %}
<a class="nav-item nav-link" rel="nofollow noopener noreferrer" href="https://github.com/themotte/rDrama"><i class="fab fa-github fa-fw mr-3"></i>Source Code</a>
<a class="nav-item nav-link" href="/support"><i class="fas fa-hippo fa-fw mr-3"></i>Support {{SITE_TITLE}}</a>
<a class="nav-item nav-link" href="/contact"><i class="fas fa-file-signature fa-fw mr-3"></i>Contact Us</a>
{% include "nav_secondary.html" %}
<li class="nav-item border-top border-bottom mt-2 pt-2">
<a class="nav-link" role="button" href="/logout"><i class="fas fa-sign-out fa-fw mr-3 text-danger"></i>Log Out</a>
</li>
{% else %}
<li class="nav-item d-flex align-items-center justify-content-center pb-3">
<a class="btn btn-primary btn-block" href="/contact">Contact Us</a>
</li>
<li class="nav-item d-flex align-items-center justify-content-center pb-3">
<a class="btn btn-primary btn-block" href="/login?redirect={{request.path | urlencode}}">Sign In</a>
</li>
<li class="nav-item d-flex align-items-center justify-content-center">
<a class="btn btn-primary btn-block" href="/signup">Sign Up</a>
</li>
{% endif %}
<li class="mt-3">
{% include "sidebar_" + SITE_ID + ".html" %}
</li>
</ul>
</div>
{% endif %}
</div>
</div>
</nav>
<script src="{{ 'js/header.js' | asset }}"></script>
{% if v and not err %}
<div id="formkey" class="d-none">{{v.formkey}}</div>
{% endif %}
{% if not v %}
<style>
.pad {
padding-bottom: 7.4px;
padding-top: 7.4px;
}
</style>
{% endif %}