lkva/NDOJ
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Refactor navbar

Browse source
This commit is contained in:
cuom1999 2022-11-09 20:57:50 -06:00
parent 7150718a51
commit 98f8f52bde
4 changed files with 533 additions and 462 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

805
locale/vi/LC_MESSAGES/django.po
View file

File diff suppressed because it is too large Load diff

56
resources/base.scss
View file

@ -183,10 +183,6 @@ header {
white-space: nowrap; white-space: nowrap;
} }
a {
color: lightcoral;
}
li { li {
text-transform: none; text-transform: none;
} }
@ -196,7 +192,6 @@ header {
margin: 0; margin: 0;
& > li > a > span { & > li > a > span {
font-size: 13px;
height: 36px; height: 36px;
padding-top: 8px; padding-top: 8px;
display: block; display: block;
@ -210,7 +205,6 @@ header {
} }
& > span { & > span {
color: darkslateblue;
vertical-align: middle; vertical-align: middle;
display: inline; display: inline;
margin-top: 11px; margin-top: 11px;
@ -239,6 +233,7 @@ header {
top: 0; top: 0;
left: 0; left: 0;
right: 0; right: 0;
height: 48px;
} }
nav { nav {
@ -317,24 +312,20 @@ nav {
left: 5px; left: 5px;
display: none; display: none;
color: #fff; color: #fff;
background: darkcyan; background: white;
margin: 0 !important; margin: 0 !important;
box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.4); box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.4);
li {
&:first-child {
a.active {
border-top: 1px solid $widget_black;
background-color: darkcyan !important;
}
}
}
li { li {
&:hover {
background: lightgray;
}
display: block; display: block;
a { a {
color: white !important; color: black !important;
} }
a, button { a, button {
@ -545,6 +536,7 @@ noscript #noscript {
#user-links { #user-links {
height: 100%; height: 100%;
padding-right: 1em;
ul { ul {
margin: 0; margin: 0;
@ -729,32 +721,37 @@ math {
#nav-lang-icon:hover { #nav-lang-icon:hover {
color: darkblue; color: darkblue;
} }
#lang-dropdown { .dropdown {
padding: 4px 0;
border-radius: 4px; border-radius: 4px;
border: 0.5px solid lightgray; border: 0.5px solid lightgray;
margin-top: 1px; margin-top: 1px;
background: white; background: white;
display: none; display: none;
a {
color: black;
}
} }
.lang-dropdown-item { .dropdown-item {
padding-bottom: 0.3em; font-size: 15px;
padding-left: 0.4em; padding: 6px 8px;
font-size: 0.9em;
cursor: pointer; cursor: pointer;
} }
.lang-dropdown-item:hover { .dropdown-item:hover {
background: lightgray; background: lightgray;
} }
.navbar-icons { .navbar-icons {
display: inline-flex;
align-items: center;
float: left;
margin-right: 0.3em;
.navbar-icon { .navbar-icon {
font-size: 1.6em; font-size: 1.6em;
} }
float: left;
margin-right: 0.3em;
} }
.navbar-icon { .navbar-icon {
margin-right: 0.3em; margin-right: 0.3em;
@ -826,13 +823,16 @@ math {
} }
@media (max-width: 799px) { @media (max-width: 799px) {
.navbar-icons { #user-links, .anon {
margin-top: 6px; padding-right: 0.5em;
} }
} }
@media (min-width: 800px) { @media (min-width: 800px) {
.anon {
padding-right: 1em;
}
.navbar-icons { .navbar-icons {
margin-top: 12px; margin-top: 6px;
} }
} }

25
resources/common.js
View file

@ -385,3 +385,28 @@ $(function () {
handler(); handler();
}); });
}); });
function registerPopper($trigger, $dropdown) {
const popper = Popper.createPopper($trigger[0], $dropdown[0]);
$trigger.click(function(e) {
$dropdown.toggle();
popper.update();
});
$(document).on("click touchend", function(e) {
var target = $(e.target);
if (target.closest($trigger).length === 0 && target.closest($dropdown).length === 0) {
$dropdown.hide();
}
})
}
$(function() {
registerPopper($('#nav-lang-icon'), $('#lang-dropdown'));
registerPopper($('#user-links'), $('#userlink_dropdown'));
$('.lang-dropdown-item').click(function() {
$('select[name="language"]').val($(this).attr('value'));
$('#form-lang').submit();
})
$('#logout').on('click', () => $('#logout-form').submit());
});

109
templates/base.html
View file

@ -174,21 +174,6 @@
<script type="text/javascript">{{ request.profile.user_script|safe }}</script> <script type="text/javascript">{{ request.profile.user_script|safe }}</script>
{% endif %} {% endif %}
<script>
$(function() {
const popperInstance = Popper.createPopper($('#nav-lang-icon'), $('#lang-dropdown'));
$('#nav-lang-icon').click(function(e) {
e.preventDefault();
$('#lang-dropdown').toggle();
popperInstance.update();
})
$('.lang-dropdown-item').click(function() {
$('select[name="language"]').val($(this).attr('value'));
$('#form-lang').submit();
})
});
</script>
<noscript> <noscript>
<style> <style>
#content { #content {
@ -228,7 +213,7 @@
</li> </li>
{% endfor %} {% endfor %}
</ul> </ul>
<div style="float: right; display: inline; font-size: larger;"> <div style="float: right; display: inline-flex; font-size: larger; align-items: center; height: 100%;">
<span class="navbar-icons"> <span class="navbar-icons">
{% if request.user.is_authenticated %} {% if request.user.is_authenticated %}
<span title="{{_('Chat')}}"> <span title="{{_('Chat')}}">
@ -250,66 +235,60 @@
</span> </span>
{% endif %} {% endif %}
<span title="{{_('Language')}}"> <span title="{{_('Language')}}">
<a href="#" class="icofont-globe navbar-icon" id="nav-lang-icon" aria-hidden="true"> <a class="icofont-globe navbar-icon" id="nav-lang-icon" aria-hidden="true">
<sub class="sub-lang">{{LANGUAGE_CODE}}</sub> <sub class="sub-lang">{{LANGUAGE_CODE}}</sub>
</a> </a>
<div id="lang-dropdown" role="tooltip"> <div id="lang-dropdown" class="dropdown" role="tooltip">
{% for language in language_info_list(LANGUAGES) %} {% for language in language_info_list(LANGUAGES) %}
<div value="{{ language.code }}" class="lang-dropdown-item" style="{{'font-weight: bold' if language.code == LANGUAGE_CODE}}"> <div value="{{ language.code }}"
class="dropdown-item lang-dropdown-item" style="{{'font-weight: bold' if language.code == LANGUAGE_CODE}}">
{{ language.name_local }} {{ language.name_local }}
</div> </div>
{% endfor %} {% endfor %}
</div> </div>
</span> </span>
</span> </span>
<span id="user-links"> {% if request.user.is_authenticated %}
{% if request.user.is_authenticated %} <span id="user-links">
<ul> <ul><li><a href="javascript:void(0)">
<li> <span>
<a href="{{ url('user_page') }}"> <img src="{{ gravatar(request.user, 32) }}" height="24" width="24">{# -#}
<span> <span>
<img src="{{ gravatar(request.user, 32) }}" height="24" width="24">{# -#} <b class="{{request.profile.css_class}}">{{ request.user.username }}</b>
<span> </span>
{%- trans username=request.user.username -%} </span>
Hello, <b>{{ username }}</b>. </a></li></ul>
{%- endtrans %} </span>
</span> <div class="dropdown" id="userlink_dropdown" role="tooptip">
</span> <div class="dropdown-item"><a href="{{ url('user_page') }}">{{ _('Profile') }}</a></div>
</a> {% if request.user.is_staff or request.user.is_superuser %}
<ul style="width: 150px"> <div class="dropdown-item"><a href="{{ url('admin:index') }}">{{ _('Admin') }}</a></div>
{% if request.user.is_staff or request.user.is_superuser %} {% endif %}
<li><a href="{{ url('admin:index') }}">{{ _('Admin') }}</a></li> {% if request.user.is_superuser %}
{% endif %} <div class="dropdown-item"><a href="{{ url('internal_problem') }}">{{ _('Internal') }}</a></div>
{% if request.user.is_superuser %} <div class="dropdown-item"><a href="{{ url('site_stats') }}">{{ _('Stats') }}</a></div>
<li><a href="{{ url('internal_problem') }}">{{ _('Internal') }}</a></li> {% endif %}
<li><a href="{{ url('site_stats') }}">{{ _('Stats') }}</a></li> <div class="dropdown-item"><a href="{{ url('user_edit_profile') }}">{{ _('Edit profile') }}</a></div>
{% endif %} {% if request.user.is_impersonate %}
<li><a href="{{ url('user_edit_profile') }}">{{ _('Edit profile') }}</a></li> <div class="dropdown-item"><a href="{{ url('impersonate-stop') }}">Stop impersonating</a></div>
{% if request.user.is_impersonate %} {% else %}
<li><a href="{{ url('impersonate-stop') }}">Stop impersonating</a></li> <div class="dropdown-item">
{% else %} <a href="#" id="logout" style="color: red !important">{{ _('Log out') }}</a>
<li> <form id="logout-form" action="{{ url('auth_logout') }}" method="POST">
<form action="{{ url('auth_logout') }}" method="POST"> {% csrf_token %}
{% csrf_token %} </form>
<button type="submit" style="color: red !important">{{ _('Log out') }}</button> </div>
</form> {% endif %}
</li> </div>
{% endif %} {% else %}
</ul> <span class="anon">
</li> <a href="{{ url('auth_login') }}?next={{ LOGIN_RETURN_PATH|urlencode }}"><b>{{ _('Log in') }}</b></a>
</ul> &nbsp;{{ _('or') }}&nbsp;
{% else %} <a href="{{ url('registration_register') }}"><b>{{ _('Sign up') }}</b></a>
<span class="anon"> </span>
<a href="{{ url('auth_login') }}?next={{ LOGIN_RETURN_PATH|urlencode }}"><b>{{ _('Log in') }}</b></a> {% endif %}
&nbsp;{{ _('or') }}&nbsp;
<a href="{{ url('registration_register') }}"><b>{{ _('Sign up') }}</b></a>
</span>
{% endif %}
</span>
</div> </div>
</div> </div>
<div id="nav-shadow"></div> <div id="nav-shadow"></div>
</nav> </nav>
{% if request.in_contest %} {% if request.in_contest %}