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

Merge pull request #74 from Gluejar/fix_nav_menu 

Fix nav menu
pull/1/head
thatandromeda 2012-10-24 09:13:43 -07:00
parent b4c1d09e88 02f803291a
commit 08e49036d1
9 changed files with 247 additions and 111 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
frontend/templates/503.html
View File

@ -1,5 +1,11 @@
{% extends "base.html" %}
{% block news %}
<div class="launch_top">
Amazon database connectivity outages are keeping us from being able to unglue with you right now. See <a href="http://status.aws.amazon.com/">Amazon's status page</a> for more. We're doing what we can from our end. Do come back later.
</div>
{% endblock %}
{% block content %}
<div class="js-main">
<h1>Unglue.it is currently undergoing maintenance</h1>

123
frontend/templates/base.html
View File

@ -37,6 +37,15 @@
});
</script>
{% endif %}
<script>
var $j = jQuery.noConflict();
$j(document).ready(function(){
$j('#authenticated').click(function(){
$j('#user_menu').toggle();
$j(this).toggleClass("highlight");
});
});
</script>
{% block extra_head %}
{% endblock %}
</head>
@ -72,40 +81,53 @@
</div>
</div>
{% endif %}
<div class="js-topmenu">
<ul class="menu">
{% if user.is_authenticated %}
<li class="first">
<a href="{% url supporter supporter_username=user.username %}"><span id="welcome">Welcome, {{ user.username|truncatechars:20 }}</span></a>
</li>
<li>
{% 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 %}
</li>
<li><a href="{% url auth_logout %}"><span>Sign Out</span></a></li>
{% else %}
<li class="first"><a href="{% url auth_login %}?next={% firstof request.path '/' %}"><span>Sign In</span></a></li>
{% endif %}
<li><a href="/about/main/" class="hijax"><span>About</span></a></li>
<li><a href="{{ landingurl }}"><span>Home</span></a></li>
{% if not user.is_authenticated %}
<li class="last" id="expander"><a href="{% url registration_register %}"><span>sign up</span></a></li>
{% endif %}
</ul>
</div>
{% if user.is_authenticated %}
<div class="js-topmenu" id="authenticated">
<ul class="menu">
<li>
<a href="#"><span id="welcome">Hi, {{ user.username }} {% if unseen_count %}<img src="/static/images/menu_bar_down_arrow.png">{% endif %}</span></a>
</li>
<ul id="user_menu">
<li><a href="{% url supporter supporter_username=user.username %}">Wishlist</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 supporter supporter_username=user.username %}#edit" id="profile_edit"><span>Profile Settings</span></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>
{% if supporter.profile.pic_url %}
<img class="user-avatar" src="{{ supporter.profile.pic_url }}" height=36 width="36" alt="Picture of {{ supporter }}" title="{{ supporter }}" />
{% else %}
<img class="user-avatar" src="/static/images/header/avatar.png" height="36" width="36" alt="Generic Ungluer Avatar" title="Ungluer" />
{% endif %}
</li>
{% comment %}
{% endcomment %}
</ul>
</div>
{% else %}
<div class="js-topmenu">
<ul class="menu">
<li><a href="{% url auth_login %}?next={% firstof request.path '/' %}"><span>Sign In</span></a></li>
<li id="expander" class="last"><a href="{% url registration_register %}"><span>sign up</span></a></li>
</ul>
</div>
{% endif %}
</div>
</div>
{% block news %}
<div class="launch_top">
{% if is_preview %}
It's here: our first unglued edition. You can now download <a href="/work/81834/"><I>Oral Literature in Africa</I></a>.<br /><br />Campaigns to unglue more books <a href="http://blog.unglue.it/2012/09/13/update-on-unglue-it-relaunch/">will relaunch soon</a>.
{% else %}
We unglued <a href="/work/81834/">one book</a>. Amazon <a href="http://blog.unglue.it/2012/08/09/open-thread-amazon-forces-unglue-it-to-suspend-crowdfunding-for-creative-commons-ebooks/">shut us down</a>. Now we're back. Help us unglue <a href="https://unglue.it/campaigns/ending">five more books</a>! <br />
{% endif %}
</div>
{% endblock %}
@ -118,43 +140,44 @@
<div class="column">
<span>About Unglue.it</span>
<ul>
<li><a href="{{ abouturl }}">Team</a></li>
<li><a href="http://blog.unglue.it">Blog</a></li>
<li><a href="{{ pressurl }}">Press</a></li>
<li><a href="http://eepurl.com/fKLfI">Newsletter</a></li>
<li><a href="/about/main/" class="hijax">Concept</a></li>
<li><a href="{{ abouturl }}">Team</a></li>
<li><a href="http://blog.unglue.it">Blog</a></li>
<li><a href="{{ pressurl }}">Press</a></li>
<li><a href="http://eepurl.com/fKLfI">Newsletter</a></li>
</ul>
</div>
<div class="column">
<span>Your account</span>
<ul>
{% if user.is_authenticated %}
<li><a href="{{ editurl }}">Account Settings</a></li>
{% endif %}
<li><a href="{{ rhtoolsurl }}">Rights Holder Tools</a></li>
<li><a href="{{ privacyurl }}">Privacy</a></li>
<li><a href="{{ termsurl }}">Terms of Use</a></li>
{% if user.is_staff %}
<li><a href="{{ adminurl }}">Unglue.it Administration</a></li>
<li><a href="{{ editionurl }}">Create New Editions</a></li>
{% endif %}
{% if user.is_authenticated %}
<li><a href="{{ editurl }}">Account Settings</a></li>
{% endif %}
<li><a href="{{ rhtoolsurl }}">Rights Holder Tools</a></li>
<li><a href="{{ privacyurl }}">Privacy</a></li>
<li><a href="{{ termsurl }}">Terms of Use</a></li>
{% if user.is_staff %}
<li><a href="{{ adminurl }}">Unglue.it Administration</a></li>
<li><a href="{{ editionurl }}">Create New Editions</a></li>
{% endif %}
</ul>
</div>
<div class="column">
<span>Help</span>
<ul>
<li><a href="{{ faqurl }}">General FAQ</a></li>
<li><a href="/faq/rightsholders/">Rights Holder FAQ</a></li>
<li><a href="{% url api_help %}">API</a></li>
<li><a href="mailto:support@gluejar.com">support@gluejar.com</a>
<li><a href="{{ faqurl }}">General FAQ</a></li>
<li><a href="/faq/rightsholders/">Rights Holder FAQ</a></li>
<li><a href="{% url api_help %}">API</a></li>
<li><a href="mailto:support@gluejar.com">support@gluejar.com</a>
</ul>
</div>
<div class="column">
<span>Contact</span>
<ul>
<li>General inquiries</li>
<li><a href="mailto:faq@gluejar.com">faq@gluejar.com</a></li>
<li>Rights Holders</li>
<li><a href="mailto:rights@gluejar.com">rights@gluejar.com</a></li>
<li>General inquiries</li>
<li><a href="mailto:faq@gluejar.com">faq@gluejar.com</a></li>
<li>Rights Holders</li>
<li><a href="mailto:rights@gluejar.com">rights@gluejar.com</a></li>
</ul>
</div>
</div>

13
frontend/templates/supporter.html
View File

@ -21,9 +21,18 @@
<script type="text/javascript">
var $j = jQuery.noConflict();
$j(document).ready(function(){
$j('#user-block-hide').hide();
if(window.location.hash!="#edit") {
$j('#user-block-hide').hide();
} else {
$j('#user-block-hide').css({"background": "#8dc63f"}).animate(
{backgroundColor: "white"}, 1500
);
}
$j('#edit_profile').click(function() {
$j("#user-block-hide").slideToggle(300);
$j("#user-block-hide").slideToggle(300);
});
$j('#profile_edit').click(function() {
$j("#user-block-hide").slideToggle(300);
});
});
</script>

103
static/css/sitewide.css
View File

@ -610,11 +610,52 @@ ul.menu {
}
.js-topmenu {
float: right;
padding-top: 25px;
margin-top: 25px;
}
.js-topmenu#authenticated {
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
height: 36px;
}
.js-topmenu#authenticated:hover,
.js-topmenu#authenticated.highlight {
background: #d6dde0;
cursor: pointer;
position: relative;
}
.js-topmenu ul#user_menu {
display: none;
z-index: 100;
position: absolute;
top: 36px;
left: 0;
padding: 0;
overflow: visible;
}
.js-topmenu ul#user_menu li {
border-top: 1px solid white;
list-style-type: none;
float: none;
background: #d6dde0;
padding: 0 10px;
}
.js-topmenu ul#user_menu li:hover {
background: #8dc63f;
}
.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;
padding: 0 10px;
position: relative;
z-index: 50;
}
@ -651,33 +692,18 @@ ul.menu {
font-weight: bold;
font-size: 13px;
letter-spacing: -0.05em;
overflow: auto;
max-width: 240px;
padding: 0 10px;
margin-right: 5px;
}
.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 span#welcome img {
vertical-align: middle;
}
.js-topmenu ul li #unseen_count div#i_haz_notifications {
background-color: #8dc63f;
color: white;
border-color: #8dc63f;
.js-topmenu ul li img {
padding: 0;
margin: 0;
}
.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;
}
.js-topmenu ul li.last a {
background: url("/static/images/bg.png") right top no-repeat;
@ -695,6 +721,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;

2
static/css/supporter_layout.css
View File

@ -203,7 +203,7 @@ img.user-avatar {
}
.user-badges img {
vertical-align: text-bottom;
border: 1px solid #D4D4D4;
border: 1px solid #d4d4d4;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;

BIN
static/images/menu_bar_down_arrow.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 427 B

BIN
static/images/menu_bar_up_arrow.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 432 B

110
static/less/sitewide.less
View File

@ -265,12 +265,54 @@ ul.menu{
.js-topmenu {
float:right;
padding-top:25px;
margin-top:25px;
&#authenticated {
.one-border-radius(5px);
height: 36px;
}
&#authenticated:hover, &#authenticated.highlight {
background: @blue-grey;
cursor: pointer;
position: relative;
}
ul {
&#user_menu {
display: none;
z-index: 100;
position: absolute;
top: 36px;
left: 0;
padding: 0;
overflow: visible;
li {
border-top: 1px solid white;
list-style-type: none;
float: none;
background: @blue-grey;
padding: 0 10px;
&:hover {
background: @call-to-action;
a {
color: white;
}
#i_haz_notifications {
border-color: white;
background-color: white;
color: @text-blue;
}
}
}
}
li {
float:left;
padding:0 10px;
position: relative;
z-index: 50;
@ -282,43 +324,26 @@ ul.menu{
span#welcome {
color:@green;
.header-text;
overflow:auto;
//emergency backstop to prevent usernames too long for truncate filter to force header into content area
max-width: 240px;
padding: 0 10px;
margin-right: 5px;
img {
vertical-align: middle;
}
}
#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;
}
}
img {
padding: 0;
margin: 0;
}
&.last {
padding-left: 20px;
a {
background: url(@background-header) right top no-repeat;
span {
//background:url(@background-header) -770px -36px no-repeat;
.border-radius(32px, 0, 0, 32px);
background-color: @call-to-action;
margin-right:29px;
@ -329,6 +354,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;
}
}
}
}

1
static/less/supporter_layout.less
View File

@ -131,7 +131,6 @@ img.user-avatar {
vertical-align:text-bottom;
border:1px solid #d4d4d4;
.one-border-radius(5px);
}
}
}