EbookFoundation
/
regluit
mirror of https://github.com/EbookFoundation/regluit.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

making notifications prettier

pull/1/head
Andromeda Yelton 2012-10-19 12:19:56 -04:00
parent 11aac359e6
commit 1bf4743667
3 changed files with 69 additions and 57 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

15
frontend/templates/base.html
View File

@ -89,17 +89,20 @@
</li>
<ul id="user_menu">
<li><a href="{% url supporter supporter_username=user.username %}">Wishlist</a></li>
<li><a href="/notification"><span>Messages</span></a></li>
<li>
<a href="/notification"><span>Messages</span>
{% if unseen_count %}
<span id="i_haz_notifications" class="unseen_count">{{ unseen_count }}</span>
{% else %}
<span id="no_notifications_for_you" class="unseen_count">0</span>
{% endif %}
</a>
</li>
<li><a href="{% url manage_account %}"><span>Account Settings</span></a></li>
<li><a href="{% url auth_logout %}"><span>Sign Out</span></a></li>
</ul>
<li>
{% comment %}
{% if unseen_count %}
<a href="/notification" id="unseen_count"><div id="i_haz_notifications">{{ unseen_count }}</div></a>
{% else %}
<a href="/notification" id="unseen_count"><div id="no_notifications_for_you">0</div></a>
{% endif %}
{% endcomment %}
{% if supporter.profile.pic_url %}
<img class="user-avatar" src="{{ supporter.profile.pic_url }}" height=36 width="36" alt="Picture of {{ supporter }}" title="{{ supporter }}" />

55
static/css/sitewide.css
View File

@ -640,6 +640,11 @@ ul.menu {
.js-topmenu ul#user_menu li:hover a {
color: white;
}
.js-topmenu ul#user_menu li:hover #i_haz_notifications {
border-color: white;
background-color: white;
color: #3d4e53;
}
.js-topmenu ul li {
float: left;
position: relative;
@ -685,31 +690,6 @@ ul.menu {
padding: 0;
margin: 0;
}
.js-topmenu ul li #unseen_count div {
border: solid 2px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
padding: 3px;
line-height: 16px;
width: 16px;
cursor: pointer;
text-align: center;
margin-left: -10px;
}
.js-topmenu ul li #unseen_count div#i_haz_notifications {
background-color: #8dc63f;
color: white;
border-color: #8dc63f;
}
.js-topmenu ul li #unseen_count div#no_notifications_for_you {
border-color: #d6dde0;
background-color: #d6dde0;
color: #edf3f4;
}
.js-topmenu ul li.last {
padding-left: 20px;
}
@ -729,6 +709,31 @@ ul.menu {
padding: 0 5px 0 15px;
color: white;
}
.js-topmenu ul .unseen_count {
border: solid 2px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
padding: 3px;
line-height: 16px;
width: 16px;
cursor: pointer;
text-align: center;
margin-left: 10px;
}
.js-topmenu ul .unseen_count#i_haz_notifications {
background-color: #8dc63f;
color: white;
border-color: #8dc63f;
}
.js-topmenu ul .unseen_count#no_notifications_for_you {
border-color: #edf3f4;
background-color: #edf3f4;
color: #3d4e53;
}
.js-search {
float: left;
padding-top: 25px;

56
static/less/sitewide.less
View File

@ -295,6 +295,13 @@ ul.menu{
a {
color: white;
}
#i_haz_notifications {
border-color: white;
background-color: white;
color: @text-blue;
}
}
}
}
@ -321,32 +328,6 @@ ul.menu{
margin: 0;
}
#unseen_count {
div {
border: solid 2px;
.one-border-radius(5px);
padding: 3px;
line-height: 16px;
width: 16px;
cursor: pointer;
text-align: center;
margin-left: -10px;
&#i_haz_notifications {
background-color: @call-to-action;
color: white;
border-color: @call-to-action;
}
&#no_notifications_for_you {
border-color: @blue-grey;
background-color: @blue-grey;
color: @pale-blue;
}
}
}
&.last {
padding-left: 20px;
@ -365,6 +346,29 @@ ul.menu{
}
}
}
.unseen_count {
border: solid 2px;
.one-border-radius(5px);
padding: 3px;
line-height: 16px;
width: 16px;
cursor: pointer;
text-align: center;
margin-left: 10px;
&#i_haz_notifications {
background-color: @call-to-action;
color: white;
border-color: @call-to-action;
}
&#no_notifications_for_you {
border-color: @pale-blue;
background-color: @pale-blue;
color: @text-blue;
}
}
}
}