skorotkiewicz/rDrama
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions
rDrama/files/templates/header.html
Ben Rog-Wilhelm 310c6c4424
Rig up chat to be suitable for a Doge election. (Hopefully.) (#692) 
* Integrate chat from upstream

Substantially borrowed from upstream ref: 13a208ee88e55 (before they
started editing generated artefacts instead of source).

Integrated, including:
  - Remove previously removed features: emoji, hats, and name colors
  - Compensate for lack of unified root template
  - Add React build process to Dockerfile and `bootstrap/init.sh`
  - Preliminary integration of chat websocket workers

For testing, modify `supervisord.conf.dev` to put chat on port 80 and
the site service on some other port. Then visit: http://localhost/chat

Still to do:
  - Access control for specific small-groups (and admins probably):
    Set the values somewhere (site_settings.json? Redis?) and use for
    authorization in `chat_is_allowed`.
  - Proxying only /chat to the websocket workers
  - Chat persistance across restarts: either Redis devops or to DB

* Add nginx server to do appropriate redirection.

* Add necessary columns to User.

* Wire up chat permissions.

* Reload chat on source change.

* Add a better structure for slash commands and add/remove functionality.

* Stop putting up previews of slash commands.

* We require more whitespace.

* Strip DMs out entirely, I currently do not want to deal with them.

* Change "Users Online" to just "Users".

* Clean up a little more DM detritus.

* Save chat history in database.

* Remove unnecessary hefty query to the DB.

* Clean up optimistic messages.

* Initial implementation of notification icon.

* Update readme a little bit.

* Fix notification highlight (mostly).

* Remove chat version number that will never be updated.

* Fix: Errors on logged-out users.

* Add function to nuke the chat state.

* Update DB.

* Add a dedicated deployable docker image.

* Fix: init_build.sh execute bit not set.

* Whoops, screwed up the abort() call.

* Relax chat rate limiter.

* Remove a somewhat silly comment.

* Remove an unnecessary g.db.add().

---------

Co-authored-by: TLSM <duolsm@outlook.com>
2023-09-04 12:42:20 -05:00

229 lines
12 KiB
HTML
Raw Permalink Blame History

<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="/" id="logo" class="flex-grow-1 logo-text">
{{SITE_TITLE}}
</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/comments/{% 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.can_access_chat %}
{% if v.unread_chat_messages_count > 0 %}
<a class="mobile-nav-icon d-md-none pl-0" href="/chat" data-bs-toggle="tooltip" data-bs-placement="bottom" title="Voting Booth"><i class="fas fa-booth align-middle text-danger"></i><span class="notif-count ml-1" style="padding-left: 4.5px;">{{v.unread_chat_messages_count}}</span></a>
{% else %}
<a class="mobile-nav-icon d-md-none" href="/chat" data-bs-toggle="tooltip" data-bs-placement="bottom" title="Voting Booth"><i class="fas fa-booth align-middle text-gray-500 black"></i></a>
{% endif %}
{% endif %}
{% 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.can_access_chat %}
{% if v.unread_chat_messages_count > 0 %}
<li class="nav-item d-flex align-items-center text-center justify-content-center mx-1">
<a class="nav-link position-relative" href="/chat" data-bs-toggle="tooltip" data-bs-placement="bottom" title="Voting Booth"><i class="fas fa-booth text-danger"></i><span class="notif-count ml-1" style="padding-left: 4.5px;">{{v.unread_chat_messages_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="/chat" data-bs-toggle="tooltip" data-bs-placement="bottom" title="Voting Booth"><i class="fas fa-booth"></i></a>
</li>
{% endif %}
{% endif %}
{% 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 %}
Reference in a new issue View git blame Copy permalink