Refactored dashboard to move logo and splash links out into base. Now need to write the API, press, and privacy statement.

This commit is contained in:
Samuel Clay 2011-04-02 19:41:22 -04:00
parent 310ed7ff0f
commit 50a0cd9d51
5 changed files with 126 additions and 191 deletions

View file

@ -1,6 +1,5 @@
import datetime import datetime
import time import time
import random
import re import re
from django.shortcuts import render_to_response, get_object_or_404 from django.shortcuts import render_to_response, get_object_or_404
from django.contrib.auth.decorators import login_required from django.contrib.auth.decorators import login_required
@ -69,7 +68,7 @@ def index(request):
recommended_feeds = RecommendedFeed.objects.filter(is_public=True).select_related('feed') recommended_feeds = RecommendedFeed.objects.filter(is_public=True).select_related('feed')
# recommended_feed_feedback = RecommendedFeedUserFeedback.objects.filter(recommendation=recommended_feed) # recommended_feed_feedback = RecommendedFeedUserFeedback.objects.filter(recommendation=recommended_feed)
howitworks_page = random.randint(0, 5) howitworks_page = 0 # random.randint(0, 5)
return render_to_response('reader/feeds.xhtml', { return render_to_response('reader/feeds.xhtml', {
'user_profile': user.profile, 'user_profile': user.profile,
'login_form': login_form, 'login_form': login_form,

View file

@ -97,7 +97,7 @@ body.NB-theme-serif #story_pane .NB-feed-story-content {
.NB-account .NB-login { .NB-account .NB-login {
padding: 0 4px 64px; padding: 0 4px 64px;
margin: 0 50px 0 12px; margin: 12px 50px 0 12px;
width: 186px; width: 186px;
float: left; float: left;
background: transparent url('../img/reader/separator.png') no-repeat bottom center; background: transparent url('../img/reader/separator.png') no-repeat bottom center;
@ -107,7 +107,7 @@ body.NB-theme-serif #story_pane .NB-feed-story-content {
float: left; float: left;
width: 186px; width: 186px;
padding: 0 4px; padding: 0 4px;
margin: 0; margin: 12px 0 0;
height: 206px; height: 206px;
overflow: hidden; overflow: hidden;
} }
@ -2461,7 +2461,7 @@ form.opml_import_form input {
left: 0; left: 0;
} }
#NB-splash .NB-splash-info { .NB-splash-info {
width: 478px; width: 478px;
height: 55px; height: 55px;
background-color: white; background-color: white;
@ -2470,11 +2470,11 @@ form.opml_import_form input {
right: 0; right: 0;
z-index: 1; z-index: 1;
} }
#NB-splash .NB-splash-info.NB-splash-blur { .NB-splash-info.NB-splash-top {
top: 0; top: 0;
bottom: inherit; bottom: inherit;
} }
#NB-splash .NB-splash-title { .NB-splash-info .NB-splash-title {
position: absolute; position: absolute;
bottom: -1px; bottom: -1px;
height: 55px; height: 55px;
@ -2483,7 +2483,7 @@ form.opml_import_form input {
z-index: 2; z-index: 2;
} }
#NB-splash .NB-splash-blur .NB-splash-title { .NB-splash-info.NB-splash-top .NB-splash-title {
top: 0px; top: 0px;
bottom: inherit; bottom: inherit;
right: 166px; right: 166px;
@ -2491,7 +2491,7 @@ form.opml_import_form input {
height: 55px; height: 55px;
} }
#NB-splash .NB-splash-links { .NB-splash-info .NB-splash-links {
position: absolute; position: absolute;
right: 0px; right: 0px;
width: 80px; width: 80px;
@ -2507,15 +2507,15 @@ form.opml_import_form input {
z-index: 1; z-index: 1;
} }
#NB-splash .NB-splash-links-2 { .NB-splash-bottom .NB-splash-links-2 {
right: 82px; right: 82px;
} }
#NB-splash .NB-splash-blur .NB-splash-links { .NB-splash-info.NB-splash-top .NB-splash-links {
top: 0; top: 0;
width: 164px; width: 164px;
} }
#NB-splash .NB-splash-links .NB-splash-link { .NB-splash-info .NB-splash-links .NB-splash-link {
display: block; display: block;
line-height: 12px; line-height: 12px;
margin: 1px 0; margin: 1px 0;
@ -2523,39 +2523,39 @@ form.opml_import_form input {
width: 100%; width: 100%;
float: left; float: left;
} }
#NB-splash .NB-splash-links .NB-splash-link.NB-first { .NB-splash-info .NB-splash-links .NB-splash-link.NB-first {
clear: both; clear: both;
} }
#NB-splash .NB-splash-links .NB-splash-link a { .NB-splash-info .NB-splash-links .NB-splash-link a {
background-color: #F3F6F9; background-color: #F3F6F9;
margin: 0; margin: 0;
padding: 2px 4px; padding: 2px 4px;
} }
#NB-splash .NB-splash-links .NB-splash-link a:hover { .NB-splash-info .NB-splash-links .NB-splash-link a:hover {
background-color: #E9ECF6; background-color: #E9ECF6;
} }
#NB-splash .NB-splash-links .NB-splash-link-github a:hover { .NB-splash-info .NB-splash-links .NB-splash-link-github a:hover {
background: #E9ECF6 url('../img/reader/github_icon.png') no-repeat 0 0; background: #E9ECF6 url('../img/reader/github_icon.png') no-repeat 0 0;
} }
#NB-splash .NB-splash-links .NB-splash-link-blog a:hover { .NB-splash-info .NB-splash-links .NB-splash-link-blog a:hover {
background: #E9ECF6 url('../img/reader/ofbrooklyn_icon.png') no-repeat 0 0; background: #E9ECF6 url('../img/reader/ofbrooklyn_icon.png') no-repeat 0 0;
} }
#NB-splash .NB-splash-links .NB-splash-link-twitter a:hover { .NB-splash-info .NB-splash-links .NB-splash-link-twitter a:hover {
background: #E9ECF6 url('../img/reader/twitter_icon.png') no-repeat 0 0; background: #E9ECF6 url('../img/reader/twitter_icon.png') no-repeat 0 0;
} }
#NB-splash .NB-splash-links a { .NB-splash-info .NB-splash-links a {
font-weight: bold; font-weight: bold;
text-transform: uppercase; text-transform: uppercase;
font-size: 11px; font-size: 11px;
display: block; display: block;
} }
#NB-splash .NB-splash-links a, .NB-splash-info .NB-splash-links a,
.NB-modal-about a, .NB-modal-about a,
a.NB-splash-link { a.NB-splash-link {
color: #405BA8; color: #405BA8;
@ -2563,7 +2563,7 @@ a.NB-splash-link {
font-weight: bold; font-weight: bold;
} }
#NB-splash .NB-splash-links a:hover, .NB-splash-info .NB-splash-links a:hover,
.NB-modal-about a:hover, .NB-modal-about a:hover,
a.NB-splash-link:hover { a.NB-splash-link:hover {
color: #A85B40; color: #A85B40;
@ -3296,7 +3296,7 @@ background: transparent;
/* color: #0E1763;*/ /* color: #0E1763;*/
} }
#NB-splash .NB-module h5 { .NB-module h5 {
margin: 0 0 12px; margin: 0 0 12px;
padding: 8px 12px 6px; padding: 8px 12px 6px;
} }
@ -3342,7 +3342,7 @@ background: transparent;
.NB-account .NB-module .NB-module-account { .NB-account .NB-module .NB-module-account {
position: relative; position: relative;
min-height: 77px; min-height: 77px;
margin: 0 0 12px; margin: 12px 0;
padding-bottom: 1px; padding-bottom: 1px;
} }
@ -3406,6 +3406,72 @@ background: transparent;
display: none; display: none;
} }
/* ======================= */
/* = How it Works Module = */
/* ======================= */
.NB-module-howitworks {
position: relative;
overflow: hidden;
}
.NB-module-howitworks .NB-howitworks-page-indicators {
position: absolute;
width: 132px;
height: 20px;
right: 64px;
top: 8px;
}
.NB-module-howitworks .NB-howitworks-page {
display: none;
overflow: hidden;
left: 0;
margin: 12px 0;
}
.NB-module-howitworks .NB-howitworks-page.NB-active {
display: block;
}
.NB-module-howitworks .NB-howitworks-page .NB-howitworks-page-image {
width: 200px;
height: 135px;
padding: 2px;
border: 1px solid #E0E0E0;
margin: 0 12px 24px;
float: left;
}
.NB-module-howitworks .NB-howitworks-page .NB-howitworks-page-description {
height: 135px;
line-height: 30px;
font-size: 22px;
color: #303030;
text-shadow: 1px 1px 0px #F0F0F0;
width: 248px;
}
.NB-module-howitworks .NB-howitworks-page .NB-howitworks-page-description td {
padding: 0;
margin: 0;
vertical-align: middle;
text-align: center;
}
/* ================== */
/* = Center Modules = */
/* ================== */
.NB-modules-center {
margin: 79px 478px 0 284px;
padding: 0 24px;
}
.NB-modules-center .NB-module {
margin: 0 0 24px;
}
/* ============ */ /* ============ */
/* = Features = */ /* = Features = */
/* ============ */ /* ============ */
@ -3413,7 +3479,7 @@ background: transparent;
.NB-module-features table { .NB-module-features table {
list-style: none; list-style: none;
padding: 0; padding: 0;
margin: 0 6px; margin: 12px 6px;
} }
.NB-module-features .NB-features-add { .NB-module-features .NB-features-add {
@ -3455,8 +3521,9 @@ background: transparent;
} }
.NB-module-features .NB-module-feature .NB-module-feature-description { .NB-module-features .NB-module-feature .NB-module-feature-description {
line-height: 20px; color: #404040;
font-size: 13px; font-size: 12px;
line-height: 16px;
padding: 4px 8px; padding: 4px 8px;
margin: 0; margin: 0;
width: 100%; width: 100%;
@ -3490,142 +3557,6 @@ background: transparent;
display: none; display: none;
} }
/* ========================= */
/* = More More More Module = */
/* ========================= */
/* ============ */
/* = Features = */
/* ============ */
.NB-module-more table {
list-style: none;
padding: 0;
margin: 0 6px;
}
.NB-module-more .NB-module-more-item td {
margin: 0 0 0;
}
.NB-module-more .NB-module-more-item.last td {
margin-bottom: 0;
}
.NB-module-more .NB-module-more-item:hover td {
background-color: #FCFFB4;
}
.NB-module-more .NB-module-more-item .NB-module-more-link {
float: left;
text-transform: uppercase;
padding: 4px 8px;
margin: 0;
color: #134160;
text-shadow: 1px 1px 0 #E0E0E0;
font-size: 12px;
font-weight: bold;
line-height: 20px;
white-space: nowrap;
min-width: 130px;
}
.NB-module-more .NB-module-more-item.last .NB-module-more-link {
margin-bottom: 0;
}
.NB-module-more .NB-module-more-item .NB-module-more-link a {
display: block;
}
.NB-module-more .NB-module-more-item .NB-module-more-link .raquo {
font-size: 16px;
line-height: 16px;
}
.NB-module-more .NB-module-more-item .NB-module-more-description {
line-height: 20px;
font-size: 12px;
color: #404040;
padding: 4px 8px;
margin: 0;
width: 100%;
}
.NB-module-more .NB-module-more-item.last .NB-module-more-description {
margin-bottom: 0;
}
.NB-module-more .NB-module-more-item .NB-module-more-link a {
color: #405BA8;
}
.NB-module-more .NB-module-more-item .NB-module-more-link a:hover {
color: #A85B40;
}
/* ======================= */
/* = How it Works Module = */
/* ======================= */
.NB-module-howitworks {
position: relative;
overflow: hidden;
}
.NB-module-howitworks .NB-howitworks-page-indicators {
position: absolute;
width: 132px;
height: 20px;
right: 64px;
top: 8px;
}
.NB-module-howitworks .NB-howitworks-page {
display: none;
overflow: hidden;
left: 0;
}
.NB-module-howitworks .NB-howitworks-page.NB-active {
display: block;
}
.NB-module-howitworks .NB-howitworks-page .NB-howitworks-page-image {
width: 200px;
height: 135px;
padding: 2px;
border: 1px solid #E0E0E0;
margin: 0 12px 24px;
float: left;
}
.NB-module-howitworks .NB-howitworks-page .NB-howitworks-page-description {
height: 135px;
line-height: 30px;
font-size: 22px;
color: #303030;
text-shadow: 1px 1px 0px #F0F0F0;
}
.NB-module-howitworks .NB-howitworks-page .NB-howitworks-page-description td {
padding: 0;
margin: 0;
vertical-align: middle;
text-align: center;
}
/* ================== */
/* = Center Modules = */
/* ================== */
.NB-modules-center {
margin: 55px 478px 0 284px;
padding: 24px;
}
.NB-modules-center .NB-module {
margin: 0 0 24px;
}
/* ============================ */ /* ============================ */
/* = Module: Recommended Feed = */ /* = Module: Recommended Feed = */
/* ============================ */ /* ============================ */
@ -3647,6 +3578,7 @@ background: transparent;
color: #8487C4; color: #8487C4;
} }
.NB-module-recommended .NB-recommended { .NB-module-recommended .NB-recommended {
margin: 12px 0 0 0;
padding: 0 12px; padding: 0 12px;
} }

View file

@ -240,6 +240,7 @@
var self = this; var self = this;
$('.right-pane').show(); $('.right-pane').show();
$('#NB-splash').hide(); $('#NB-splash').hide();
$('.NB-splash-info').hide();
$('#NB-splash-overlay').hide(); $('#NB-splash-overlay').hide();
this.$s.$body.layout().resizeAll(); this.$s.$body.layout().resizeAll();
this.$s.$dashboard.addClass('NB-active'); this.$s.$dashboard.addClass('NB-active');
@ -255,6 +256,7 @@
this.unload_story_iframe(); this.unload_story_iframe();
this.mark_feed_as_selected(null, null); this.mark_feed_as_selected(null, null);
$('.right-pane').hide(); $('.right-pane').hide();
$('.NB-splash-info').show();
$('#NB-splash').show(); $('#NB-splash').show();
$('#NB-splash-overlay').show(); $('#NB-splash-overlay').show();
this.$s.$dashboard.removeClass('NB-active'); this.$s.$dashboard.removeClass('NB-active');
@ -4580,7 +4582,7 @@
$signup_username.bind('focus', function() { $signup_username.bind('focus', function() {
$hidden_inputs.slideDown(300); $hidden_inputs.slideDown(300);
}).bind('blur', function() { }).bind('blur', function() {
if ($signup_username.val().length < 2) { if ($signup_username.val().length < 1) {
$hidden_inputs.slideUp(300); $hidden_inputs.slideUp(300);
} }
}); });

View file

@ -80,6 +80,31 @@
<body> <body>
{% block header %}{% endblock %} {% block header %}{% endblock %}
<div class="NB-splash-info NB-splash-top">
<img class="NB-splash-title" src="{{ MEDIA_URL }}/img/logo_newsblur_blur.png" />
<ul class="NB-splash-links">
<li class="NB-splash-link NB-first NB-splash-link-twitter"><a href="http://twitter.com/samuelclay">@samuelclay</a></li>
<li class="NB-splash-link NB-first NB-splash-link-twitter"><a href="http://twitter.com/newsblur">@newsblur</a></li>
<li class="NB-splash-link NB-splash-link-blog"><a href="http://blog.newsblur.com">The Blog</a></li>
</ul>
</div>
<div class="NB-splash-info NB-splash-bottom">
<img class="NB-splash-title" src="{{ MEDIA_URL }}/img/logo_newsblur.png" />
<ul class="NB-splash-links">
<li class="NB-splash-link NB-splash-meta-faq"><a href="#faq">FAQ</a></li>
<li class="NB-splash-link NB-splash-meta-about"><a href="#about">About</a></li>
<li class="NB-splash-link NB-first NB-splash-link-github"><a href="http://github.com/samuelclay">GitHub</a></li>
</ul>
<ul class="NB-splash-links NB-splash-links-2">
<li class="NB-splash-link"><a href="{% url api %}">API</a></li>
<li class="NB-splash-link"><a href="{% url press %}">Press</a></li>
<li class="NB-splash-link"><a href="{% url privacy %}">Privacy</a></li>
</ul>
</div>
{% block content %}{% endblock %} {% block content %}{% endblock %}
<!-- Start Quantcast tag --> <!-- Start Quantcast tag -->

View file

@ -17,21 +17,8 @@ $(document).ready(function() {
<div id="NB-splash"> <div id="NB-splash">
<div class="NB-splash-info NB-splash-blur">
<img class="NB-splash-title" src="{{ MEDIA_URL }}/img/logo_newsblur_blur.png" />
<ul class="NB-splash-links">
<li class="NB-splash-link NB-first NB-splash-link-twitter"><a href="http://twitter.com/samuelclay">@samuelclay</a></li>
<li class="NB-splash-link NB-first NB-splash-link-twitter"><a href="http://twitter.com/newsblur">@newsblur</a></li>
<li class="NB-splash-link NB-splash-link-blog"><a href="http://blog.newsblur.com">The Blog</a></li>
</ul>
</div>
<div class="NB-modules-center" style="margin-left: {{ user_profile.feed_pane_size }}px"> <div class="NB-modules-center" style="margin-left: {{ user_profile.feed_pane_size }}px">
{% if recommended_feeds %}
{% render_recommended_feed recommended_feeds %}
{% endif %}
<div class="NB-module NB-module-features"> <div class="NB-module NB-module-features">
<h5 class="NB-module-header"> <h5 class="NB-module-header">
@ -72,6 +59,10 @@ $(document).ready(function() {
{% endif %} {% endif %}
</div> </div>
{% if recommended_feeds %}
{% render_recommended_feed recommended_feeds %}
{% endif %}
</div> </div>
<div class="NB-account"> <div class="NB-account">
@ -173,7 +164,7 @@ $(document).ready(function() {
<table class="NB-howitworks-page-description"> <table class="NB-howitworks-page-description">
<tr> <tr>
<td> <td>
{% filter typogrify %}Read the original site.{% endfilter %} {% filter typogrify %}Read the<br />original site.{% endfilter %}
</td> </td>
</tr> </tr>
</table> </table>
@ -314,20 +305,6 @@ $(document).ready(function() {
</div> </div>
<div class="NB-splash-info">
<img class="NB-splash-title" src="{{ MEDIA_URL }}/img/logo_newsblur.png" />
<ul class="NB-splash-links">
<li class="NB-splash-link NB-splash-meta-faq"><a href="#faq">FAQ</a></li>
<li class="NB-splash-link NB-splash-meta-about"><a href="#about">About</a></li>
<li class="NB-splash-link NB-first NB-splash-link-github"><a href="http://github.com/samuelclay">GitHub</a></li>
</ul>
<ul class="NB-splash-links NB-splash-links-2">
<li class="NB-splash-link"><a href="{% url api %}">API</a></li>
<li class="NB-splash-link"><a href="{% url press %}">Press</a></li>
<li class="NB-splash-link"><a href="{% url privacy %}">Privacy</a></li>
</ul>
</div>
</div> </div>