New NavBar + Theme (#82)
This commit is contained in:
Van Duc Le
GitHub
parent
ad278f58a9
commit
a2243ca668
5 changed files with 63 additions and 28 deletions
|
|
@ -25,7 +25,7 @@ a {
|
|||
}
|
||||
|
||||
&:active {
|
||||
color: #faa700;
|
||||
color: $theme_color;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -170,7 +170,7 @@ header {
|
|||
}
|
||||
|
||||
#user-links {
|
||||
// display: inline;
|
||||
display: inline;
|
||||
float: right;
|
||||
color: #5c5954;
|
||||
|
||||
|
|
@ -199,10 +199,10 @@ header {
|
|||
cursor: pointer;
|
||||
|
||||
&:hover {
|
||||
border-top: 2px solid #9c3706;
|
||||
border-top: 2px solid $theme_color;
|
||||
color: black;
|
||||
background: rgba(255, 255, 255, 0.25);
|
||||
margin: 0;
|
||||
margin: -2.75px;
|
||||
}
|
||||
|
||||
& > img {
|
||||
|
|
@ -296,7 +296,7 @@ nav {
|
|||
}
|
||||
|
||||
&:hover {
|
||||
border-top: 2px solid #9c3706;
|
||||
border-top: 2px solid $theme_color;
|
||||
color: black;
|
||||
background: rgba(255, 255, 255, 0.25);
|
||||
margin: 0;
|
||||
|
|
@ -304,8 +304,8 @@ nav {
|
|||
|
||||
&.active {
|
||||
// color: #FFF;
|
||||
border-top: 2px solid #9c3706;
|
||||
color: #9c3706;
|
||||
border-top: 2px solid $theme_color;
|
||||
color: $theme_color;
|
||||
background: white;
|
||||
}
|
||||
|
||||
|
|
@ -375,7 +375,7 @@ nav {
|
|||
padding-left: 3px;
|
||||
display: inline-block;
|
||||
height: 32px;
|
||||
margin-right: 1px;
|
||||
margin-right: 10px;
|
||||
border-right: 3px solid rgba(255, 255, 255, 0.15);
|
||||
}
|
||||
}
|
||||
|
|
@ -630,6 +630,7 @@ math {
|
|||
display: none;
|
||||
padding: 0;
|
||||
margin-left: 0;
|
||||
text-align: center;
|
||||
border-left: 4px solid $highlight_blue;
|
||||
position: fixed;
|
||||
top: 36px;
|
||||
|
|
@ -768,7 +769,7 @@ math {
|
|||
}
|
||||
}
|
||||
.navbar-icon {
|
||||
margin-right: 0.3em;
|
||||
margin-right: 20px;
|
||||
}
|
||||
|
||||
.unread_boxes {
|
||||
|
|
@ -798,11 +799,11 @@ select {
|
|||
max-height: 0;
|
||||
}
|
||||
|
||||
@media (max-width: 500px) {
|
||||
#notification {
|
||||
margin-top: 0.6em;
|
||||
}
|
||||
}
|
||||
// @media (max-width: 500px) {
|
||||
// #notification {
|
||||
// margin-top: 0.6em;
|
||||
// }
|
||||
// }
|
||||
|
||||
.notification-open #notification {
|
||||
color: green !important;
|
||||
|
|
@ -873,7 +874,7 @@ select {
|
|||
top: 0;
|
||||
left: 0;
|
||||
height: 2px;
|
||||
background-color: #993932;
|
||||
background-color: $theme_color;
|
||||
width: 0;
|
||||
z-index: 9999;
|
||||
}
|
||||
|
|
@ -958,3 +959,25 @@ input::placeholder{
|
|||
color: $theme_color;
|
||||
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;
|
||||
}
|
||||
}
|
||||
Binary file not shown.
|
Before Width: | Height: | Size: 278 KiB After Width: | Height: | Size: 782 KiB |
BIN
resources/icons/logo1.png
Normal file
BIN
resources/icons/logo1.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 278 KiB |
|
|
@ -4,7 +4,7 @@ $border_gray: #ccc;
|
|||
$background_gray: #ededed;
|
||||
$background_light_gray: #fafafa;
|
||||
$announcement_red: #ae0000;
|
||||
$theme_color: #045343;
|
||||
$theme_color: #9c3706;
|
||||
|
||||
$base_font_size: 14px;
|
||||
$widget_border_radius: 4px;
|
||||
|
|
|
|||
|
|
@ -213,12 +213,19 @@
|
|||
<div id="nav-container">
|
||||
<span id="navicon"><i class="fa fa-bars"></i></span>
|
||||
<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-menu-item"><a href="{{ url('home') }}" class="nav-home">{{ _('Home') }}</a></li>
|
||||
{% for node in mptt_tree(nav_bar) recursive %}
|
||||
<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) }}
|
||||
{% if not node.is_leaf_node %}
|
||||
<div href="javascript:void(0)" class="nav-expand">></div>
|
||||
|
|
@ -230,11 +237,12 @@
|
|||
</li>
|
||||
{% endfor %}
|
||||
</ul>
|
||||
|
||||
<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')}}">
|
||||
<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 %}
|
||||
{% if unread_chat %}
|
||||
<sub class="unread_boxes">{{unread_chat}}</sub>
|
||||
|
|
@ -244,7 +252,7 @@
|
|||
|
||||
{% set unseen_cnt = request.profile.count_unseen_notifications %}
|
||||
<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 %}
|
||||
<sub class="unread_boxes">{{unseen_cnt}}</sub>
|
||||
{% endif %}
|
||||
|
|
@ -252,8 +260,13 @@
|
|||
</span>
|
||||
{% endif %}
|
||||
<span title="{{_('Language')}}">
|
||||
<div class="icofont-globe navbar-icon" id="nav-lang-icon" aria-hidden="true">
|
||||
<sub class="sub-lang">{{LANGUAGE_CODE}}</sub>
|
||||
<div class="navbar-icon" id="nav-lang-icon" aria-hidden="true" style="font-size: 22.5px;">
|
||||
{% 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 id="lang-dropdown" class="dropdown" role="tooltip">
|
||||
{% for language in language_info_list(LANGUAGES) %}
|
||||
|
|
@ -265,11 +278,11 @@
|
|||
</div>
|
||||
</span>
|
||||
<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>
|
||||
{% if request.user.is_authenticated %}
|
||||
<span id="user-links">
|
||||
<span id="user-links" class="navbar-icons">
|
||||
<ul><li>
|
||||
<span>
|
||||
<img src="{{ gravatar(request.profile, 32) }}" height="24" width="24">{# -#}
|
||||
|
|
@ -315,10 +328,9 @@
|
|||
{% 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 class="anon navbar-icons">
|
||||
<a href="{{ url('auth_login') }}?next={{ LOGIN_RETURN_PATH|urlencode }}" style="margin-right: 20px;"><h4 class="normal-text">{{ _('Log in') }}</h4></a>
|
||||
<a href="{{ url('registration_register') }}"><h4 class="normal-text">{{ _('Sign up') }}</h4></a>
|
||||
</span>
|
||||
{% endif %}
|
||||
</div>
|
||||
|
|
|
|||
Loading…
Reference in a new issue