Change UI
This commit is contained in:
parent
70d81ad664
commit
9b5df4ac7e
3 changed files with 41 additions and 21 deletions
|
@ -181,7 +181,7 @@ header {
|
|||
}
|
||||
|
||||
a {
|
||||
color: #9c3706;
|
||||
color: lightcoral;
|
||||
}
|
||||
|
||||
li {
|
||||
|
@ -291,7 +291,7 @@ nav {
|
|||
|
||||
&:hover {
|
||||
border-top: 2px solid #9c3706;
|
||||
color: #9c3706;
|
||||
color: lightcoral;
|
||||
background: rgba(255, 255, 255, 0.25);
|
||||
margin: 0;
|
||||
}
|
||||
|
@ -314,7 +314,7 @@ nav {
|
|||
left: 5px;
|
||||
display: none;
|
||||
color: #fff;
|
||||
background: #00c4cc;
|
||||
background: darkcyan;
|
||||
margin: 0 !important;
|
||||
box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.4);
|
||||
|
||||
|
@ -329,6 +329,10 @@ nav {
|
|||
li {
|
||||
display: block;
|
||||
|
||||
a {
|
||||
color: white !important;
|
||||
}
|
||||
|
||||
a, button {
|
||||
padding: 8px 20px 8px 8px !important;
|
||||
font-size: 0.8em;
|
||||
|
@ -680,12 +684,31 @@ math {
|
|||
}
|
||||
|
||||
#notification {
|
||||
color: gray;
|
||||
color: lightsteelblue;
|
||||
float: left;
|
||||
margin-top: 0.8em;
|
||||
margin-top: 0.6em;
|
||||
margin-right: 0.8em;
|
||||
font-size: 1.3em;
|
||||
}
|
||||
|
||||
#chat-icon {
|
||||
color: lightseagreen;
|
||||
float: left;
|
||||
margin-top: 0.6em;
|
||||
margin-right: 0.5em;
|
||||
font-size: 1.3em;
|
||||
}
|
||||
|
||||
.unread_boxes {
|
||||
background-color: red;
|
||||
color: white;
|
||||
border-radius: 50%;
|
||||
padding: 1px 4px;
|
||||
margin-left: -12px;
|
||||
font-size: x-small;
|
||||
font-family: monospace;
|
||||
}
|
||||
|
||||
@media (max-width: 500px) {
|
||||
#notification {
|
||||
margin-top: 0.6em;
|
||||
|
|
|
@ -171,13 +171,7 @@
|
|||
cursor: pointer;
|
||||
margin-top: 0.5em;
|
||||
}
|
||||
.unread_boxes {
|
||||
background-color: darkcyan;
|
||||
color: white;
|
||||
border-radius: 50%;
|
||||
padding: 0 3px;
|
||||
margin-left: -4px;
|
||||
}
|
||||
|
||||
@media (max-width: 799px) {
|
||||
#chat-area {
|
||||
height: 500px;
|
||||
|
|
|
@ -151,12 +151,12 @@
|
|||
name: '{{ request.user.username|escapejs }}'
|
||||
};
|
||||
$(function() {
|
||||
if ($('.nav-chat').length) {
|
||||
if ($('#chat-icon').length) {
|
||||
$.get("{{url('get_unread_boxes')}}")
|
||||
.done(function(data) {
|
||||
if (data.unread_boxes) {
|
||||
var html = `<sub class="unread_boxes">${data.unread_boxes}</sub>`;
|
||||
$('.nav-chat').append(html);
|
||||
$('#chat-icon').append(html);
|
||||
}
|
||||
})
|
||||
.fail(function(data) {
|
||||
|
@ -219,15 +219,18 @@
|
|||
</li>
|
||||
{% endfor %}
|
||||
</ul>
|
||||
<div style="float: right; display: inline;">
|
||||
<div style="float: right; display: inline; font-size: larger;">
|
||||
{% if request.user.is_authenticated %}
|
||||
{% set unseen_cnt = request.profile.count_unseen_notifications %}
|
||||
<span class="{{ 'notification-open' if unseen_cnt > 0 }}">
|
||||
<a href="{{ url('notification') }}" class="fa fa-bell" id="notification" aria-hidden="true">
|
||||
{% if unseen_cnt > 0 %}
|
||||
<span>
|
||||
{{ unseen_cnt }}
|
||||
<span title="{{_('Chat')}}">
|
||||
<a id="chat-icon" href="{{ url('chat', '') }}" class="icofont-wechat" aria-hidden="true">
|
||||
</a>
|
||||
</span>
|
||||
|
||||
{% 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" id="notification" aria-hidden="true">
|
||||
{% if unseen_cnt > 0 %}
|
||||
<sub class="unread_boxes">{{unseen_cnt}}</sub>
|
||||
{% endif %}
|
||||
</a>
|
||||
</span>
|
||||
|
@ -258,7 +261,7 @@
|
|||
<li>
|
||||
<form action="{{ url('auth_logout') }}" method="POST">
|
||||
{% csrf_token %}
|
||||
<button type="submit">{{ _('Log out') }}</button>
|
||||
<button type="submit" style="color: red !important">{{ _('Log out') }}</button>
|
||||
</form>
|
||||
</li>
|
||||
{% endif %}
|
||||
|
|
Loading…
Reference in a new issue