Done task
This commit is contained in:
parent
79a213c7e9
commit
3ac0a7c5d4
4 changed files with 117 additions and 46 deletions
|
@ -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;
|
||||||
|
@ -713,7 +714,7 @@ math {
|
||||||
}
|
}
|
||||||
|
|
||||||
#chat-icon {
|
#chat-icon {
|
||||||
color: #045343;
|
color: $theme_color;
|
||||||
}
|
}
|
||||||
|
|
||||||
#chat-icon:hover {
|
#chat-icon:hover {
|
||||||
|
@ -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;
|
||||||
}
|
}
|
||||||
|
@ -924,37 +925,61 @@ select {
|
||||||
}
|
}
|
||||||
|
|
||||||
::placeholder { /* Chrome, Firefox, Opera, Safari 10.1+ */
|
::placeholder { /* Chrome, Firefox, Opera, Safari 10.1+ */
|
||||||
color: #045343;
|
color: $theme_color;
|
||||||
opacity: 1; /* Firefox */
|
opacity: 1; /* Firefox */
|
||||||
text-align: center;
|
text-align: center;
|
||||||
}
|
}
|
||||||
|
|
||||||
:-ms-input-placeholder { /* Internet Explorer 10-11 */
|
:-ms-input-placeholder { /* Internet Explorer 10-11 */
|
||||||
color: #045343;
|
color: $theme_color;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
}
|
}
|
||||||
|
|
||||||
::-ms-input-placeholder { /* Microsoft Edge */
|
::-ms-input-placeholder { /* Microsoft Edge */
|
||||||
color: #045343;
|
color: $theme_color;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
}
|
}
|
||||||
|
|
||||||
input::placeholder{
|
input::placeholder{
|
||||||
color: #045343;
|
color: $theme_color;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
}
|
}
|
||||||
|
|
||||||
::-webkit-input-placeholder {
|
::-webkit-input-placeholder {
|
||||||
color: #045343;
|
color: $theme_color;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
}
|
}
|
||||||
|
|
||||||
:-moz-placeholder { /* Firefox 18- */
|
:-moz-placeholder { /* Firefox 18- */
|
||||||
color: #045343;
|
color: $theme_color;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
}
|
}
|
||||||
|
|
||||||
::-moz-placeholder { /* Firefox 19+ */
|
::-moz-placeholder { /* Firefox 19+ */
|
||||||
color: #045343;
|
color: $theme_color;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.normal-text {
|
||||||
|
font-weight: normal;
|
||||||
|
font-size: small;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
#fa-icon-links:hover,
|
||||||
|
#fa-icon-links:active,
|
||||||
|
#fa-icon-links:hover #fa-icon,
|
||||||
|
#fa-icon-links:active #fa-icon {
|
||||||
|
color: $theme_color;
|
||||||
|
}
|
||||||
|
|
||||||
|
#fa-icon {
|
||||||
|
margin-right: 0.1em;
|
||||||
|
color: #000;
|
||||||
|
font-size:22.5px;
|
||||||
|
}
|
||||||
|
#fa-icon-active {
|
||||||
|
margin-right: 0.1em;
|
||||||
|
color: $theme_color;
|
||||||
|
font-size:22.5px;
|
||||||
}
|
}
|
Before Width: | Height: | Size: 278 KiB After Width: | Height: | Size: 278 KiB |
|
@ -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;
|
||||||
|
|
|
@ -213,28 +213,70 @@
|
||||||
<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>
|
{% if node.key != "chat" %}
|
||||||
<a href="{{ node.path }}" class="nav-{{ node.key }}{% if node.key in nav_tab %} active{% endif %}">
|
<li>
|
||||||
{{ user_trans(node.label) }}
|
<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;">
|
||||||
{% if not node.is_leaf_node %}
|
{% if node.key == "problems" %}
|
||||||
<div href="javascript:void(0)" class="nav-expand">></div>
|
{% if node.key not in nav_tab %}
|
||||||
{% endif %}
|
<i id="fa-icon" class="fa fa-pencil"></i>
|
||||||
</a>
|
{% else %}
|
||||||
{% with children=node.get_children() %}
|
<i id="fa-icon-active" class="fa fa-pencil"></i>
|
||||||
{% if children %}<ul>{{ loop(children) }}</ul>{% endif %}
|
{% endif %}
|
||||||
{% endwith %}
|
{% endif %}
|
||||||
</li>
|
|
||||||
|
{% if node.key == "submit" %}
|
||||||
|
{% if node.key not in nav_tab %}
|
||||||
|
<i id="fa-icon" class="fa fa-neuter"></i>
|
||||||
|
{% else %}
|
||||||
|
<i id="fa-icon-active" class="fa fa-neuter"></i>
|
||||||
|
{% endif %}
|
||||||
|
{% endif %}
|
||||||
|
|
||||||
|
{% if node.key == "user" %}
|
||||||
|
{% if node.key not in nav_tab %}
|
||||||
|
<i id="fa-icon" class="fa fa-user"></i>
|
||||||
|
{% else %}
|
||||||
|
<i id="fa-icon-active" class="fa fa-user"></i>
|
||||||
|
{% endif %}
|
||||||
|
{% endif %}
|
||||||
|
|
||||||
|
{% if node.key == "contest" %}
|
||||||
|
{% if node.key not in nav_tab %}
|
||||||
|
<i id="fa-icon" class="fa fa-graduation-cap"></i>
|
||||||
|
{% else %}
|
||||||
|
<i id="fa-icon-active" class="fa fa-graduation-cap"></i>
|
||||||
|
{% endif %}
|
||||||
|
{% endif %}
|
||||||
|
{% if node.key == "about" %}
|
||||||
|
{% if node.key not in nav_tab %}
|
||||||
|
<i id="fa-icon" class="fa fa-group"></i>
|
||||||
|
{% else %}
|
||||||
|
<i id="fa-icon-active" class="fa fa-group"></i>
|
||||||
|
{% endif %}
|
||||||
|
{% endif %}
|
||||||
|
|
||||||
|
{{ user_trans(node.label) }}
|
||||||
|
{% if not node.is_leaf_node %}
|
||||||
|
<div href="javascript:void(0)" class="nav-expand">></div>
|
||||||
|
{% endif %}
|
||||||
|
</a>
|
||||||
|
{% with children=node.get_children() %}
|
||||||
|
{% if children %}<ul>{{ loop(children) }}</ul>{% endif %}
|
||||||
|
{% endwith %}
|
||||||
|
</li>
|
||||||
|
{% endif %}
|
||||||
{% 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 +286,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 +294,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 +312,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 +362,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>
|
||||||
{{ _('or') }}
|
<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>
|
||||||
|
|
Loading…
Add table
Add a link
Reference in a new issue