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

New NavBar + Theme (#82)

Browse source
This commit is contained in:
Van Duc Le 2023-09-19 23:01:22 -05:00 committed by GitHub
parent ad278f58a9
commit a2243ca668
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
5 changed files with 63 additions and 28 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

53
resources/base.scss
View file

@ -25,7 +25,7 @@ a {
} }
&:active { &:active {
color: #faa700; color: $theme_color;
} }
} }
@ -170,7 +170,7 @@ header {
} }
#user-links { #user-links {
// display: inline; display: inline;
float: right; float: right;
color: #5c5954; color: #5c5954;
@ -199,10 +199,10 @@ header {
cursor: pointer; cursor: pointer;
&:hover { &:hover {
border-top: 2px solid #9c3706; border-top: 2px solid $theme_color;
color: black; color: black;
background: rgba(255, 255, 255, 0.25); background: rgba(255, 255, 255, 0.25);
margin: 0; margin: -2.75px;
} }
& > img { & > img {
@ -296,7 +296,7 @@ nav {
} }
&:hover { &:hover {
border-top: 2px solid #9c3706; border-top: 2px solid $theme_color;
color: black; color: black;
background: rgba(255, 255, 255, 0.25); background: rgba(255, 255, 255, 0.25);
margin: 0; margin: 0;
@ -304,8 +304,8 @@ nav {
&.active { &.active {
// color: #FFF; // color: #FFF;
border-top: 2px solid #9c3706; border-top: 2px solid $theme_color;
color: #9c3706; color: $theme_color;
background: white; background: white;
} }
@ -375,7 +375,7 @@ nav {
padding-left: 3px; padding-left: 3px;
display: inline-block; display: inline-block;
height: 32px; height: 32px;
margin-right: 1px; margin-right: 10px;
border-right: 3px solid rgba(255, 255, 255, 0.15); border-right: 3px solid rgba(255, 255, 255, 0.15);
} }
} }
@ -630,6 +630,7 @@ math {
display: none; display: none;
padding: 0; padding: 0;
margin-left: 0; margin-left: 0;
text-align: center;
border-left: 4px solid $highlight_blue; border-left: 4px solid $highlight_blue;
position: fixed; position: fixed;
top: 36px; top: 36px;
@ -768,7 +769,7 @@ math {
} }
} }
.navbar-icon { .navbar-icon {
margin-right: 0.3em; margin-right: 20px;
} }
.unread_boxes { .unread_boxes {
@ -798,11 +799,11 @@ select {
max-height: 0; max-height: 0;
} }
@media (max-width: 500px) { // @media (max-width: 500px) {
#notification { // #notification {
margin-top: 0.6em; // margin-top: 0.6em;
} // }
} // }
.notification-open #notification { .notification-open #notification {
color: green !important; color: green !important;
@ -873,7 +874,7 @@ select {
top: 0; top: 0;
left: 0; left: 0;
height: 2px; height: 2px;
background-color: #993932; background-color: $theme_color;
width: 0; width: 0;
z-index: 9999; z-index: 9999;
} }
@ -958,3 +959,25 @@ input::placeholder{
color: $theme_color; color: $theme_color;
text-align: center; text-align: center;
} }
.normal-text {
font-weight: normal;
font-size: small;
text-align: center;
}
.nav-fa-icon {
i {
margin-right: 0.1em;
color: #000;
font-size: 22.5px;
}
}
.nav-fa-icon-active {
i {
color: $theme_color;
font-size: 22.5px;
margin-right: 0.1em;
}
}

BIN
resources/icons/logo.png
View file

Binary file not shown.
Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 278 KiB

After

Width:  |  Height:  |  Size: 782 KiB

BIN
resources/icons/logo1.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 278 KiB

2
resources/vars.scss
View file

@ -4,7 +4,7 @@ $border_gray: #ccc;
$background_gray: #ededed; $background_gray: #ededed;
$background_light_gray: #fafafa; $background_light_gray: #fafafa;
$announcement_red: #ae0000; $announcement_red: #ae0000;
$theme_color: #045343; $theme_color: #9c3706;
$base_font_size: 14px; $base_font_size: 14px;
$widget_border_radius: 4px; $widget_border_radius: 4px;

36
templates/base.html
View file

@ -213,12 +213,19 @@
<div id="nav-container"> <div id="nav-container">
<span id="navicon"><i class="fa fa-bars"></i></span> <span id="navicon"><i class="fa fa-bars"></i></span>
<ul id="nav-list"> <ul id="nav-list">
<li class="home-nav-element"><a href="{{ url('home') }}">{% include "site-logo-fragment.html" %}</a></li> <li style="margin-right:1.5em" class="home-nav-element"><a href="{{ url('home') }}">{% include "site-logo-fragment.html" %}</a></li>
<li class="home-nav-element"><span class="nav-divider"></span></li> <li class="home-nav-element"><span class="nav-divider"></span></li>
<li class="home-menu-item"><a href="{{ url('home') }}" class="nav-home">{{ _('Home') }}</a></li> <li class="home-menu-item"><a href="{{ url('home') }}" class="nav-home">{{ _('Home') }}</a></li>
{% for node in mptt_tree(nav_bar) recursive %} {% for node in mptt_tree(nav_bar) recursive %}
<li> <li>
<a href="{{ node.path }}" class="nav-{{ node.key }}{% if node.key in nav_tab %} active{% endif %}"> <a href="{{ node.path }}" id="fa-icon-links" class="normal-text nav-{{ node.key }}{% if node.key in nav_tab %} active{% endif %}" style="font-size: smaller; margin-right: 1.5em; text-align: left;">
<span class="nav-fa-icon{{'-active' if node.key in nav_tab else''}}">
{% if node.key == "problems" %} <i class="fa fa-pencil"></i> {% endif %}
{% if node.key == "submit" %} <i class="fa fa-neuter"></i> {% endif %}
{% if node.key == "user" %} <i class="fa fa-user"></i> {% endif %}
{% if node.key == "contest" %} <i class="fa fa-graduation-cap"></i> {% endif %}
{% if node.key == "about" %} <i class="fa fa-group"></i> {% endif %}
</span>
{{ user_trans(node.label) }} {{ user_trans(node.label) }}
{% if not node.is_leaf_node %} {% if not node.is_leaf_node %}
<div href="javascript:void(0)" class="nav-expand">></div> <div href="javascript:void(0)" class="nav-expand">></div>
@ -230,11 +237,12 @@
</li> </li>
{% endfor %} {% endfor %}
</ul> </ul>
<div style="float: right; display: inline-flex; font-size: larger; align-items: center; height: 100%;"> <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')}}">
<a id="chat-icon" href="{{ url('chat', '') }}" class="icofont-wechat navbar-icon" aria-hidden="true"> <a id="chat-icon" href="{{ url('chat', '') }}" class="fa fa-wechat navbar-icon" aria-hidden="true" style="font-size: 22.5px;">
{% set unread_chat = request.profile.count_unread_chat_boxes %} {% set unread_chat = request.profile.count_unread_chat_boxes %}
{% if unread_chat %} {% if unread_chat %}
<sub class="unread_boxes">{{unread_chat}}</sub> <sub class="unread_boxes">{{unread_chat}}</sub>
@ -244,7 +252,7 @@
{% set unseen_cnt = request.profile.count_unseen_notifications %} {% set unseen_cnt = request.profile.count_unseen_notifications %}
<span title="{{_('Notification')}}" class="{{ 'notification-open' if unseen_cnt > 0 }}"> <span title="{{_('Notification')}}" class="{{ 'notification-open' if unseen_cnt > 0 }}">
<a href="{{ url('notification') }}" class="icofont-alarm navbar-icon" id="notification" aria-hidden="true"> <a href="{{ url('notification') }}" class="fa fa-bell-o navbar-icon" id="notification" aria-hidden="true" style="font-size: 22.5px;">
{% if unseen_cnt > 0 %} {% if unseen_cnt > 0 %}
<sub class="unread_boxes">{{unseen_cnt}}</sub> <sub class="unread_boxes">{{unseen_cnt}}</sub>
{% endif %} {% endif %}
@ -252,8 +260,13 @@
</span> </span>
{% endif %} {% endif %}
<span title="{{_('Language')}}"> <span title="{{_('Language')}}">
<div class="icofont-globe navbar-icon" id="nav-lang-icon" aria-hidden="true"> <div class="navbar-icon" id="nav-lang-icon" aria-hidden="true" style="font-size: 22.5px;">
<sub class="sub-lang">{{LANGUAGE_CODE}}</sub> {% if LANGUAGE_CODE == "vi" %}
<h4 class="normal-text" style="color: black;">Tiếng Việt</h4>
{% endif %}
{% if LANGUAGE_CODE == "en" %}
<h4 class="normal-text" style="color: black;">English</h4>
{% endif %}
</div> </div>
<div id="lang-dropdown" class="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) %}
@ -265,11 +278,11 @@
</div> </div>
</span> </span>
<span title="{{_('Dark Mode')}}"> <span title="{{_('Dark Mode')}}">
<a class="icofont-adjust navbar-icon black" id="nav-darkmode-icon" aria-hidden="true" href="?darkmode=1"></a> <a class="fa fa-moon-o navbar-icon black" id="nav-darkmode-icon" aria-hidden="true" href="?darkmode=1" style="font-size: 22.5px;"></a>
</span> </span>
</span> </span>
{% if request.user.is_authenticated %} {% if request.user.is_authenticated %}
<span id="user-links"> <span id="user-links" class="navbar-icons">
<ul><li> <ul><li>
<span> <span>
<img src="{{ gravatar(request.profile, 32) }}" height="24" width="24">{# -#} <img src="{{ gravatar(request.profile, 32) }}" height="24" width="24">{# -#}
@ -315,10 +328,9 @@
{% endif %} {% endif %}
</div> </div>
{% else %} {% else %}
<span class="anon"> <span class="anon navbar-icons">
<a href="{{ url('auth_login') }}?next={{ LOGIN_RETURN_PATH|urlencode }}"><b>{{ _('Log in') }}</b></a> <a href="{{ url('auth_login') }}?next={{ LOGIN_RETURN_PATH|urlencode }}" style="margin-right: 20px;"><h4 class="normal-text">{{ _('Log in') }}</h4></a>
&nbsp;{{ _('or') }}&nbsp; <a href="{{ url('registration_register') }}"><h4 class="normal-text">{{ _('Sign up') }}</h4></a>
<a href="{{ url('registration_register') }}"><b>{{ _('Sign up') }}</b></a>
</span> </span>
{% endif %} {% endif %}
</div> </div>