Refactor navbar
This commit is contained in:
cuom1999
parent
7150718a51
commit
98f8f52bde
4 changed files with 533 additions and 462 deletions
File diff suppressed because it is too large
Load diff
|
|
@ -183,10 +183,6 @@ header {
|
|||
white-space: nowrap;
|
||||
}
|
||||
|
||||
a {
|
||||
color: lightcoral;
|
||||
}
|
||||
|
||||
li {
|
||||
text-transform: none;
|
||||
}
|
||||
|
|
@ -196,7 +192,6 @@ header {
|
|||
margin: 0;
|
||||
|
||||
& > li > a > span {
|
||||
font-size: 13px;
|
||||
height: 36px;
|
||||
padding-top: 8px;
|
||||
display: block;
|
||||
|
|
@ -210,7 +205,6 @@ header {
|
|||
}
|
||||
|
||||
& > span {
|
||||
color: darkslateblue;
|
||||
vertical-align: middle;
|
||||
display: inline;
|
||||
margin-top: 11px;
|
||||
|
|
@ -239,6 +233,7 @@ header {
|
|||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
height: 48px;
|
||||
}
|
||||
|
||||
nav {
|
||||
|
|
@ -317,24 +312,20 @@ nav {
|
|||
left: 5px;
|
||||
display: none;
|
||||
color: #fff;
|
||||
background: darkcyan;
|
||||
background: white;
|
||||
margin: 0 !important;
|
||||
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 {
|
||||
&:hover {
|
||||
background: lightgray;
|
||||
}
|
||||
|
||||
display: block;
|
||||
|
||||
a {
|
||||
color: white !important;
|
||||
color: black !important;
|
||||
}
|
||||
|
||||
a, button {
|
||||
|
|
@ -545,6 +536,7 @@ noscript #noscript {
|
|||
|
||||
#user-links {
|
||||
height: 100%;
|
||||
padding-right: 1em;
|
||||
|
||||
ul {
|
||||
margin: 0;
|
||||
|
|
@ -729,32 +721,37 @@ math {
|
|||
#nav-lang-icon:hover {
|
||||
color: darkblue;
|
||||
}
|
||||
#lang-dropdown {
|
||||
padding: 4px 0;
|
||||
.dropdown {
|
||||
border-radius: 4px;
|
||||
border: 0.5px solid lightgray;
|
||||
margin-top: 1px;
|
||||
background: white;
|
||||
display: none;
|
||||
|
||||
a {
|
||||
color: black;
|
||||
}
|
||||
}
|
||||
|
||||
.lang-dropdown-item {
|
||||
padding-bottom: 0.3em;
|
||||
padding-left: 0.4em;
|
||||
font-size: 0.9em;
|
||||
.dropdown-item {
|
||||
font-size: 15px;
|
||||
padding: 6px 8px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.lang-dropdown-item:hover {
|
||||
.dropdown-item:hover {
|
||||
background: lightgray;
|
||||
}
|
||||
|
||||
.navbar-icons {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
float: left;
|
||||
margin-right: 0.3em;
|
||||
|
||||
.navbar-icon {
|
||||
font-size: 1.6em;
|
||||
}
|
||||
float: left;
|
||||
margin-right: 0.3em;
|
||||
}
|
||||
.navbar-icon {
|
||||
margin-right: 0.3em;
|
||||
|
|
@ -826,13 +823,16 @@ math {
|
|||
}
|
||||
|
||||
@media (max-width: 799px) {
|
||||
.navbar-icons {
|
||||
margin-top: 6px;
|
||||
#user-links, .anon {
|
||||
padding-right: 0.5em;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 800px) {
|
||||
.anon {
|
||||
padding-right: 1em;
|
||||
}
|
||||
.navbar-icons {
|
||||
margin-top: 12px;
|
||||
margin-top: 6px;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -385,3 +385,28 @@ $(function () {
|
|||
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());
|
||||
});
|
||||
|
|
|
|||
|
|
@ -174,21 +174,6 @@
|
|||
<script type="text/javascript">{{ request.profile.user_script|safe }}</script>
|
||||
{% 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>
|
||||
<style>
|
||||
#content {
|
||||
|
|
@ -228,7 +213,7 @@
|
|||
</li>
|
||||
{% endfor %}
|
||||
</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">
|
||||
{% if request.user.is_authenticated %}
|
||||
<span title="{{_('Chat')}}">
|
||||
|
|
@ -250,66 +235,60 @@
|
|||
</span>
|
||||
{% endif %}
|
||||
<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>
|
||||
</a>
|
||||
<div id="lang-dropdown" role="tooltip">
|
||||
<div id="lang-dropdown" class="dropdown" role="tooltip">
|
||||
{% 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 }}
|
||||
</div>
|
||||
{% endfor %}
|
||||
</div>
|
||||
</span>
|
||||
</span>
|
||||
<span id="user-links">
|
||||
{% if request.user.is_authenticated %}
|
||||
<ul>
|
||||
<li>
|
||||
<a href="{{ url('user_page') }}">
|
||||
<span>
|
||||
<img src="{{ gravatar(request.user, 32) }}" height="24" width="24">{# -#}
|
||||
<span>
|
||||
{%- trans username=request.user.username -%}
|
||||
Hello, <b>{{ username }}</b>.
|
||||
{%- endtrans %}
|
||||
</span>
|
||||
</span>
|
||||
</a>
|
||||
<ul style="width: 150px">
|
||||
{% if request.user.is_staff or request.user.is_superuser %}
|
||||
<li><a href="{{ url('admin:index') }}">{{ _('Admin') }}</a></li>
|
||||
{% endif %}
|
||||
{% if request.user.is_superuser %}
|
||||
<li><a href="{{ url('internal_problem') }}">{{ _('Internal') }}</a></li>
|
||||
<li><a href="{{ url('site_stats') }}">{{ _('Stats') }}</a></li>
|
||||
{% endif %}
|
||||
<li><a href="{{ url('user_edit_profile') }}">{{ _('Edit profile') }}</a></li>
|
||||
{% if request.user.is_impersonate %}
|
||||
<li><a href="{{ url('impersonate-stop') }}">Stop impersonating</a></li>
|
||||
{% else %}
|
||||
<li>
|
||||
<form action="{{ url('auth_logout') }}" method="POST">
|
||||
{% csrf_token %}
|
||||
<button type="submit" style="color: red !important">{{ _('Log out') }}</button>
|
||||
</form>
|
||||
</li>
|
||||
{% endif %}
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
{% else %}
|
||||
<span class="anon">
|
||||
<a href="{{ url('auth_login') }}?next={{ LOGIN_RETURN_PATH|urlencode }}"><b>{{ _('Log in') }}</b></a>
|
||||
{{ _('or') }}
|
||||
<a href="{{ url('registration_register') }}"><b>{{ _('Sign up') }}</b></a>
|
||||
</span>
|
||||
{% endif %}
|
||||
</span>
|
||||
{% if request.user.is_authenticated %}
|
||||
<span id="user-links">
|
||||
<ul><li><a href="javascript:void(0)">
|
||||
<span>
|
||||
<img src="{{ gravatar(request.user, 32) }}" height="24" width="24">{# -#}
|
||||
<span>
|
||||
<b class="{{request.profile.css_class}}">{{ request.user.username }}</b>
|
||||
</span>
|
||||
</span>
|
||||
</a></li></ul>
|
||||
</span>
|
||||
<div class="dropdown" id="userlink_dropdown" role="tooptip">
|
||||
<div class="dropdown-item"><a href="{{ url('user_page') }}">{{ _('Profile') }}</a></div>
|
||||
{% if request.user.is_staff or request.user.is_superuser %}
|
||||
<div class="dropdown-item"><a href="{{ url('admin:index') }}">{{ _('Admin') }}</a></div>
|
||||
{% endif %}
|
||||
{% if request.user.is_superuser %}
|
||||
<div class="dropdown-item"><a href="{{ url('internal_problem') }}">{{ _('Internal') }}</a></div>
|
||||
<div class="dropdown-item"><a href="{{ url('site_stats') }}">{{ _('Stats') }}</a></div>
|
||||
{% endif %}
|
||||
<div class="dropdown-item"><a href="{{ url('user_edit_profile') }}">{{ _('Edit profile') }}</a></div>
|
||||
{% if request.user.is_impersonate %}
|
||||
<div class="dropdown-item"><a href="{{ url('impersonate-stop') }}">Stop impersonating</a></div>
|
||||
{% else %}
|
||||
<div class="dropdown-item">
|
||||
<a href="#" id="logout" style="color: red !important">{{ _('Log out') }}</a>
|
||||
<form id="logout-form" action="{{ url('auth_logout') }}" method="POST">
|
||||
{% csrf_token %}
|
||||
</form>
|
||||
</div>
|
||||
{% endif %}
|
||||
</div>
|
||||
{% else %}
|
||||
<span class="anon">
|
||||
<a href="{{ url('auth_login') }}?next={{ LOGIN_RETURN_PATH|urlencode }}"><b>{{ _('Log in') }}</b></a>
|
||||
{{ _('or') }}
|
||||
<a href="{{ url('registration_register') }}"><b>{{ _('Sign up') }}</b></a>
|
||||
</span>
|
||||
{% endif %}
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<div id="nav-shadow"></div>
|
||||
</nav>
|
||||
{% if request.in_contest %}
|
||||
|
|
|
|||
Loading…
Reference in a new issue