Fix navigation menu in mobile (#525)

This commit is contained in:
Humberto Rocha 2023-02-26 02:10:54 -05:00 committed by GitHub
parent d9cab99859
commit 9e016aaa5f
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
4 changed files with 93 additions and 40 deletions

View file

@ -316,6 +316,10 @@ nav {
padding: 10px 10px 20px 0;
}
nav hr {
display: none;
}
nav h3 {
text-transform: uppercase;
font-weight: bold;
@ -420,8 +424,6 @@ nav a i {
text-align: left;
}
.right-column footer a {}
img.emoji {
height: var(--emoji-height);
vertical-align: baseline;
@ -1745,6 +1747,7 @@ form .post {
right: 0;
top: var(--md-header-height);
overflow-y: auto;
padding-bottom: 60px;
}
.right-column nav {
@ -1811,8 +1814,13 @@ form .post {
padding-right: 0;
}
.right-column nav hr {
display: block;
color: var(--color-text-dull);
margin: 20px 10px;
}
.right-column nav a {
font-size: 0;
padding: 10px 0 10px 10px;
}
@ -1825,8 +1833,12 @@ form .post {
justify-content: center;
}
.right-column nav a span {
display: none;
}
.right-column h3 {
visibility: hidden;
display: none;
}
.right-column h2,

View file

@ -1,55 +1,70 @@
<nav>
<a href="/" {% if current_page == "home" %}class="selected"{% endif %} title="Home">
<i class="fa-solid fa-home"></i> Home
<i class="fa-solid fa-home"></i>
<span>Home</span>
</a>
{% if request.user.is_authenticated %}
<a href="{% url "notifications" %}" {% if current_page == "notifications" %}class="selected"{% endif %} title="Notifications">
<i class="fa-solid fa-at"></i> Notifications
<i class="fa-solid fa-at"></i>
<span>Notifications</span>
</a>
{% comment %}
Not sure we want to show this quite yet
<a href="{% url "explore" %}" {% if current_page == "explore" %}class="selected"{% endif %} title="Explore">
<i class="fa-solid fa-hashtag"></i> Explore
<i class="fa-solid fa-hashtag"></i>
<span>Explore</span>
</a>
{% endcomment %}
<a href="{% url "local" %}" {% if current_page == "local" %}class="selected"{% endif %} title="Local">
<i class="fa-solid fa-city"></i> Local
<i class="fa-solid fa-city"></i>
<span>Local</span>
</a>
<a href="{% url "federated" %}" {% if current_page == "federated" %}class="selected"{% endif %} title="Federated">
<i class="fa-solid fa-globe"></i> Federated
<i class="fa-solid fa-globe"></i>
<span>Federated</span>
</a>
<a href="{% url "follows" %}" {% if section == "follows" %}class="selected"{% endif %} title="Follows">
<i class="fa-solid fa-arrow-right-arrow-left"></i> Follows
<i class="fa-solid fa-arrow-right-arrow-left"></i>
<span>Follows</span>
</a>
<hr>
<h3></h3>
<a href="{% url "compose" %}" {% if top_section == "compose" %}class="selected"{% endif %} title="Compose">
<i class="fa-solid fa-feather"></i> Compose
<i class="fa-solid fa-feather"></i>
<span>Compose</span>
</a>
<a href="{% url "search" %}" {% if top_section == "search" %}class="selected"{% endif %} title="Search">
<i class="fa-solid fa-search"></i> Search
<i class="fa-solid fa-search"></i>
<span>Search</span>
</a>
{% if current_page == "tag" %}
<a href="{% url "tag" hashtag.hashtag %}" class="selected" title="Tag {{ hashtag.display_name }}">
<i class="fa-solid fa-hashtag"></i> {{ hashtag.display_name }}
<i class="fa-solid fa-hashtag"></i>
<span>{{ hashtag.display_name }}</span>
</a>
{% endif %}
<a href="{% url "settings" %}" {% if top_section == "settings" %}class="selected"{% endif %} title="Settings">
<i class="fa-solid fa-gear"></i> Settings
<i class="fa-solid fa-gear"></i>
<span>Settings</span>
</a>
<a href="{% url "identity_select" %}" title="Select Identity">
<i class="fa-solid fa-users-viewfinder"></i> Select Identity
<i class="fa-solid fa-users-viewfinder"></i>
<span>Select Identity</span>
</a>
{% else %}
<a href="{% url "local" %}" {% if current_page == "local" %}class="selected"{% endif %} title="Local Posts">
<i class="fa-solid fa-city"></i> Local Posts
<i class="fa-solid fa-city"></i>
<span>Local Posts</span>
</a>
<a href="{% url "explore" %}" {% if current_page == "explore" %}class="selected"{% endif %} title="Explore">
<i class="fa-solid fa-hashtag"></i> Explore
<i class="fa-solid fa-hashtag"></i>
<span>Explore</span>
</a>
<h3></h3>
{% if config.signup_allowed %}
<a href="{% url "signup" %}" {% if current_page == "signup" %}class="selected"{% endif %} title="Create Account">
<i class="fa-solid fa-user-plus"></i> Create Account
<i class="fa-solid fa-user-plus"></i>
<span>Create Account</span>
</a>
{% endif %}
{% endif %}

View file

@ -1,17 +1,22 @@
<nav>
<a href="{% url "identity_select" %}" {% if identities %}class="selected"{% endif %} title="Select Identity">
<i class="fa-solid fa-users-viewfinder"></i> Select Identity
<i class="fa-solid fa-users-viewfinder"></i>
<span>Select Identity</span>
</a>
<a href="{% url "identity_create" %}" {% if form %}class="selected"{% endif %} title="Create Identity">
<i class="fa-solid fa-plus"></i> Create Identity
<i class="fa-solid fa-plus"></i>
<span>Create Identity</span>
</a>
<a href="{% url "logout" %}" title="Logout">
<i class="fa-solid fa-right-from-bracket"></i> Logout
<i class="fa-solid fa-right-from-bracket"></i>
<span>Logout</span>
</a>
{% if request.user.admin %}
<hr>
<h3>Administration</h3>
<a href="{% url "admin_domains" %}" {% if section == "domains" %}class="selected"{% endif %} title="Domains">
<i class="fa-solid fa-globe"></i> Domains
<i class="fa-solid fa-globe"></i>
<span>Domains</span>
</a>
{% endif %}
</nav>

View file

@ -1,64 +1,85 @@
<nav>
<h3>Identity</h3>
<a href="{% url "settings_profile" %}" {% if section == "profile" %}class="selected"{% endif %} title="Profile">
<i class="fa-solid fa-user"></i> Profile
<i class="fa-solid fa-user"></i>
<span>Profile</span>
</a>
<a href="{% url "settings_interface" %}" {% if section == "interface" %}class="selected"{% endif %} title="Interface">
<i class="fa-solid fa-display"></i> Interface
<i class="fa-solid fa-display"></i>
<span>Interface</span>
</a>
<a href="{% url "settings_import_export" %}" {% if section == "importexport" %}class="selected"{% endif %} title="Interface">
<i class="fa-solid fa-cloud-arrow-up"></i> Import/Export
<i class="fa-solid fa-cloud-arrow-up"></i>
<span>Import/Export</span>
</a>
<hr>
<h3>Account</h3>
<a href="{% url "settings_security" %}" {% if section == "security" %}class="selected"{% endif %} title="Login &amp; Security">
<i class="fa-solid fa-key"></i> Login &amp; Security
<i class="fa-solid fa-key"></i>
<span>Login &amp; Security</span>
</a>
<a href="{% url "logout" %}">
<i class="fa-solid fa-right-from-bracket" title="Logout"></i> Logout
<i class="fa-solid fa-right-from-bracket" title="Logout"></i>
<span>Logout</span>
</a>
{% if request.user.moderator or request.user.admin %}
<hr>
<h3>Moderation</h3>
<a href="{% url "admin_identities" %}" {% if section == "identities" %}class="selected"{% endif %} title="Identities">
<i class="fa-solid fa-id-card"></i> Identities
<i class="fa-solid fa-id-card"></i>
<span>Identities</span>
</a>
<a href="{% url "admin_invites" %}" {% if section == "invites" %}class="selected"{% endif %} title="Invites">
<i class="fa-solid fa-envelope"></i> Invites
<i class="fa-solid fa-envelope"></i>
<span>Invites</span>
</a>
<a href="{% url "admin_hashtags" %}" {% if section == "hashtags" %}class="selected"{% endif %} title="Hashtags">
<i class="fa-solid fa-hashtag"></i> Hashtags
<i class="fa-solid fa-hashtag"></i>
<span>Hashtags</span>
</a>
<a href="{% url "admin_emoji" %}" {% if section == "emoji" %}class="selected"{% endif %} title="Emoji">
<i class="fa-solid fa-icons"></i> Emoji
<i class="fa-solid fa-icons"></i>
<span>Emoji</span>
</a>
<a href="{% url "admin_reports" %}" {% if section == "reports" %}class="selected"{% endif %} title="Reports">
<i class="fa-solid fa-flag"></i> Reports
<i class="fa-solid fa-flag"></i>
<span>Reports</span>
</a>
{% endif %}
{% if request.user.admin %}
<hr>
<h3>Administration</h3>
<a href="{% url "admin_basic" %}" {% if section == "basic" %}class="selected"{% endif %} title="Basic">
<i class="fa-solid fa-book"></i> Basic
<i class="fa-solid fa-book"></i>
<span>Basic</span>
</a>
<a href="{% url "admin_policies" %}" {% if section == "policies" %}class="selected"{% endif %} title="Policies">
<i class="fa-solid fa-file-lines"></i> Policies
<i class="fa-solid fa-file-lines"></i>
<span>Policies</span>
</a>
<a href="{% url "admin_announcements" %}" {% if section == "announcements" %}class="selected"{% endif %} title="Announcements">
<i class="fa-solid fa-bullhorn"></i> Announcements
<i class="fa-solid fa-bullhorn"></i>
<span>Announcements</span>
</a>
<a href="{% url "admin_domains" %}" {% if section == "domains" %}class="selected"{% endif %} title="Domains">
<i class="fa-solid fa-globe"></i> Domains
<i class="fa-solid fa-globe"></i>
<span>Domains</span>
</a>
<a href="{% url "admin_federation" %}" {% if section == "federation" %}class="selected"{% endif %} title="Federation">
<i class="fa-solid fa-diagram-project"></i> Federation
<i class="fa-solid fa-diagram-project"></i>
<span>Federation</span>
</a>
<a href="{% url "admin_users" %}" {% if section == "users" %}class="selected"{% endif %} title="Users">
<i class="fa-solid fa-users"></i> Users
<i class="fa-solid fa-users"></i>
<span>Users</span>
</a>
<a href="{% url "admin_stator" %}" {% if section == "stator" %}class="selected"{% endif %} title="Stator">
<i class="fa-solid fa-clock-rotate-left"></i> Stator
<i class="fa-solid fa-clock-rotate-left"></i>
<span>Stator</span>
</a>
<a href="/djadmin" title="Django Admin" class="danger">
<i class="fa-solid fa-gear"></i> Django Admin
<i class="fa-solid fa-gear"></i>
<span>Django Admin</span>
</a>
{% endif %}
</nav>