d005bd6237
The width of the account menu dropdown header is determined by the length of one's username. Users with short names cause the dropdown menu to partially clip off the right side of the page, which is unsightly and impedes usage thereof. This commit enforces a minimum width to prevent that. Alternate approaches such as right-aligning the dropdown proved unwieldy with CSS when fixing this same bug on the upstream.
238 lines
12 KiB
HTML
238 lines
12 KiB
HTML
|
|
<nav id="main-navigation" class="shadow shadow-md fixed-top">
|
|
<style>
|
|
body {padding-top: 60.89px !important}
|
|
@media (max-width: 767.98px) {
|
|
body {
|
|
padding-top: 44.55px !important
|
|
}
|
|
}
|
|
</style>
|
|
|
|
<div class="navbar navbar-expand-md navbar-light" id="navbar">
|
|
<div class="container-fluid" style="padding:0;">
|
|
<a href="/" class="navbar-brand mr-auto">
|
|
<img alt="header icon" height=33 src="/assets/images/{{SITE_ID}}/headericon.webp?v=1019">
|
|
</a>
|
|
|
|
{% if sub %}
|
|
<a href="/h/{{sub.name}}" class="font-weight-bold ml-1 flex-grow-1 mt-1" style="font-size:max(14px,1.2vw)">/h/{{sub.name}}</a>
|
|
{% else %}
|
|
<style>
|
|
{% if g.webview %}
|
|
@media (min-width: 480px) {
|
|
{% else %}
|
|
@media (min-width: 380px) {
|
|
#logo {
|
|
width: 100px;
|
|
margin-left: 0.5rem !important;
|
|
}
|
|
}
|
|
{% endif %}
|
|
</style>
|
|
<a href="/" class="flex-grow-1">
|
|
<img class="ml-1" id="logo" alt="logo" src="/assets/images/{{SITE_ID}}/logo.webp?v=1013" width=70>
|
|
</a>
|
|
{% endif %}
|
|
|
|
<div class="flex-grow-1 d-fl d-none d-md-block {% if not v %}pad{% endif %}">
|
|
<form 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" type="search" 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;">
|
|
<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=true{% elif v.do_reddit %}?reddit=true{% 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"{% elif v.do_reddit %}style="color:#805ad5!important"{% endif %}></i><span class="notif-count ml-1" style="padding-left: 4.5px;{% if v.do_posts %}background:blue{% elif v.do_reddit %}background:#805ad5{% 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 %}
|
|
<a class="mobile-nav-icon d-md-none" href="/random_user" data-bs-toggle="tooltip" data-bs-placement="bottom" title="Random User"><i class="fas fa-user-circle align-middle text-gray-500 black"></i></a>
|
|
<a class="mobile-nav-icon d-md-none" href="/random_post" data-bs-toggle="tooltip" data-bs-placement="bottom" title="Random Post"><i class="fas fa-random align-middle text-gray-500 black"></i></a>
|
|
{% if v and v.admin_level > 1 %}
|
|
<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="{% if sub %}/h/{{sub.name}}{% endif %}/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">
|
|
|
|
<li class="nav-item d-flex align-items-center justify-content-center text-center mx-1">
|
|
<a class="nav-link" href="/random_user/" data-bs-toggle="tooltip" data-bs-placement="bottom" title="Random User"><i class="fas fa-user-circle"></i></a>
|
|
</li>
|
|
|
|
<li class="nav-item d-flex align-items-center justify-content-center text-center mx-1">
|
|
<a class="nav-link" href="/random_post/" data-bs-toggle="tooltip" data-bs-placement="bottom" title="Random Post"><i class="fas fa-random"></i></a>
|
|
</li>
|
|
|
|
{% if v and v.admin_level > 1 %}
|
|
<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 %}
|
|
|
|
{% 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=true{% elif v.do_reddit %}?reddit=true{% 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"{% elif v.do_reddit %}style="color:#805ad5!important"{% endif %}></i><span class="notif-count ml-1" style="padding-left: 4.5px;{% if v.do_posts %}background:blue{% elif v.do_reddit %}background:#805ad5{% 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 %}
|
|
|
|
<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 > 1 %}
|
|
<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 %}
|
|
|
|
<li class="nav-item d-flex align-items-center justify-content-center text-center mx-1">
|
|
<a class="nav-link" href="{% if sub %}/h/{{sub.name}}{% endif %}/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="/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" type="search" 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"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="/contact"><i class="fas fa-file-signature fa-fw mr-3"></i>Contact us</a>
|
|
|
|
<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="/assets/js/header.js?v=266"></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 %}
|