Merge branch 'master' of github.com:Gluejar/regluit into goodreads

pull/1/head
Raymond Yee 2011-11-06 14:03:30 -05:00
commit 308730d90f
42 changed files with 4670 additions and 39 deletions

View File

@ -53,7 +53,7 @@ class Campaign(models.Model):
@property
def current_total(self):
p = PaymentManager()
return p.query_campaign(campaign=self,summary=True)
return p.query_campaign(campaign=self,summary=True)
def transactions(self, pledged=True, authorized=True):
p = PaymentManager()
@ -94,7 +94,10 @@ class Campaign(models.Model):
self.suspended_reason = None
self.save()
return self
def supporters(self):
translist = self.transactions().values_list('user', flat=True).distinct()
return translist
class Work(models.Model):
created = models.DateTimeField(auto_now_add=True)
@ -104,17 +107,30 @@ class Work(models.Model):
def cover_image_small(self):
return self.editions.all()[0].cover_image_small()
def last_campaign_status(self):
def cover_image_thumbnail(self):
return self.editions.all()[0].cover_image_thumbnail()
def author(self):
authorlist = self.editions.all()[0].authors.all()
if authorlist.count() == 1:
myauthor = authorlist[0].name
elif authorlist.count() > 1:
myauthor = authorlist[0].name + ' et al.'
else:
myauthor = ''
return myauthor
def last_campaign(self):
try:
last = self.campaigns.order_by('-created')[0].status
last = self.campaigns.order_by('-created')[0]
except:
last = "No campaign yet"
return last
def percent_unglued(self):
if(self.last_campaign_status() == 'SUCCESSFUL'):
if(self.last_campaign().status == 'SUCCESSFUL'):
return 6;
elif(self.last_campaign_status() == 'ACTIVE'):
elif(self.last_campaign().status == 'ACTIVE'):
target = float(self.campaigns.order_by('-created')[0].target)
if target <= 0:
return 6

View File

@ -67,6 +67,7 @@
<a href="/stub/terms_and_conditions"<span>Terms and Conditions</span></a>&nbsp;&nbsp;&nbsp;&nbsp;
<a href="/stub/about"><span>About</span></a>&nbsp;&nbsp;&nbsp;&nbsp;
<a href="/stub/contact"><span>Contact</span></a>&nbsp;&nbsp;&nbsp;&nbsp;
<a href="/stub/page_for_lockss_harvester"><span>LOCKSS</span></a>&nbsp;&nbsp;&nbsp;&nbsp;
<a href="http://www.gluejar.com/Blog"><span>Blog</span>&nbsp;&nbsp;&nbsp;&nbsp;
</p>
</div>

View File

@ -0,0 +1,178 @@
{% extends "base.html" %}
{% block title %}
Campaign for WORK TITLE GOES HERE
{% endblock %}
{% block extra_head %}
<link type="text/css" rel="stylesheet" href="/static/css/campaign.css" />
<!-- this was written with JS 1.4.2. does it work with the 1.6.3 in base.html? -->
<script type="text/javascript">
var $j = jQuery.noConflict();
$j(document).ready(function(){
$j('.tabs1').click(function(){
$j('#tabs').find('.active').removeClass('active');
$j(this).addClass('active');
$j('.content-block-content').find('.active').removeClass('active');
$j('#tabs-1').addClass('active').show(300);
$j('#tabs-2').hide(200);
$j('#tabs-3').hide(200);
$j('#tabs-4').hide(200);
});
$j('.tabs2').click(function(){
$j('#tabs').find('.active').removeClass('active');
$j(this).addClass('active');
$j('.content-block-content').find('.active').removeClass('active');
$j('#tabs-2').addClass('active').show(300);
$j('#tabs-1').hide(200);
$j('#tabs-3').hide(200);
$j('#tabs-4').hide(200);
});
$j('.tabs3').click(function(){
$j('#tabs').find('.active').removeClass('active');
$j(this).addClass('active');
$j('.content-block-content').find('.active').removeClass('active');
$j('#tabs-3').addClass('active').show(300);
$j('#tabs-2').hide(200);
$j('#tabs-1').hide(200);
$j('#tabs-4').hide(200);
});
$j('.tabs4').click(function(){
$j('#tabs').find('.active').removeClass('active');
$j(this).addClass('active');
$j('.content-block-content').find('.active').removeClass('active');
$j('#tabs-4').addClass('active').show(300);
$j('#tabs-2').hide(200);
$j('#tabs-1').hide(200);
$j('#tabs-3').hide(200);
});
});
</script>
{% endblock %}
{% block content %}
<div id="main-container">
<div class="js-main">
<div id="js-leftcol">
<div class="jsmodule rounded">
<div class="jsmod-content">
Campaign in Progress: <br />${{ work.last_campaign.current_total }}/${{ work.last_campaign.target }}
</div>
</div>
{% include "explore.html" %}
</div>
<div id="js-maincol">
<div class="js-maincol-inner">
<div class="content-block">
<div class="book-detail">
<div class="book-detail-img"><a href="#">
<img src="{{ work.cover_image_thumbnail }}" alt="{{ work.title }}" title="{{ work.title }}" width="131" height="192" /></a>
</div>
<div class="book-detail-info">
<h2 class="book-name">{{ work.title }}</h2>
<h3 class="book-author">{{ work.author }}</h3>
<h3 class="book-year">{{ work.editions.all.0.publication_date }}</h3>
<div class="find-book">
<label>Find it here</label>
<!-- todo: these should be a real thing -->
<div class="find-link">
<a class="find-google" href="#"><img src="/static/images/icons/google.png" align="" title="" /></a>
<a class="find-group" href="#"><img src="/static/images/icons/group.png" align="" title="" /></a>
</div>
</div>
<div class="pledged-info"><div class="pledged-group">{{ work.last_campaign.supporters.count }} Ungluers have pledged ${{ work.last_campaign.current_total }}</div><div class="status"><img src="/static/images/images/icon-book-37by25-{{ work.percent_unglued }}.png" /></div></div>
<div class="btn_support"><a href="#">Support</a></div>
</div>
</div>
<!-- needed to put 10px padding on this for supporter page but hurts here. disentangle. -->
<div class="content-block-heading" id="tabs">
<ul class="tabs">
<li class="tabs1"><a href="#">Campaign</a></li>
<li class="tabs2"><a href="#">Community </a></li>
<li class="tabs3"><a href="#">Supporters</a></li>
<li class="tabs4"><a href="#">Details</a></li>
</ul>
</div>
<div class="content-block-content">
<div id="tabs-1" class="tabs">
<div class="tabs-content">
<h3 class="tabcontent-title">Title</h3>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. </p>
<p>Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. </p>
<p>Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum. Typi non habent claritatem insitam; est usus legentis in iis qui facit eorum claritatem. Investigationes demonstraverunt lectores legere me lius quod ii legunt saepius. </p>
<p>Claritas est etiam processus dynamicus, qui sequitur mutationem consuetudium lectorum. Mirum est notare quam littera gothica, quam nunc putamus parum claram, anteposuerit litterarum formas humanitatis per seacula quarta decima et quinta decima. Eodem modo typi, qui nunc nobis videntur parum clari, fiant sollemnes in futurum.</p>
</div>
</div>
<div id="tabs-2" class="tabs">
<div class="tabs-content">
Being Unglued infomation
</div>
</div>
<div id="tabs-3" class="tabs">
<div class="tabs-content">
Want to Unglue infomation
</div>
</div>
<div id="tabs-4" class="tabs">
<div class="tabs-content">
Want to Unglue infomation xxx
</div>
</div>
</div>
</div>
</div>
</div>
<div id="js-rightcol">
<div class="js-rightcol-pad rounded">
<div class="jsmodule">
<h3 class="jsmod-title"><span>Share</span></h3>
<div class="jsmod-content">
<ul class="social menu">
<li class="facebook first"><a href="#"><span>Facebook</span></a></li>
<li class="twitter"><a href="#"><span>Twitter</span></a></li>
<li class="lasts email"><a href="#"><span>Email</span></a></li>
</ul>
</div>
</div>
<div class="jsmodule">
<h3 class="jsmod-title"><span>Support</span></h3>
<div class="jsmod-content">
<ul class="support menu">
<li class="first"><a href="#">
<span class="menu-item-price">$1</span>
<span class="menu-item-desc">The ebook delivered to your inbox.</span>
</a></li>
<li class=""><a href="#">
<span class="menu-item-price">$25</span>
<span class="menu-item-desc">The ebook your name in the credits section under "supporters".</span>
</a></li>
<li class=""><a href="#">
<span class="menu-item-price">$50</span>
<span class="menu-item-desc">The ebook your name & a link of your choice in the credits under "benefactors".</span>
</a></li>
<li class="last"><a href="#">
<span class="menu-item-price">$100</span>
<span class="menu-item-desc">The ebook your name & a link of your choice in the credits under "benefactors".</span>
</a></li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
{% endblock %}

View File

@ -1,4 +1,3 @@
<div id="js-leftcol">
<div class="jsmodule">
<h3 class="jsmod-title"><span>Explore</span></h3>
<div class="jsmod-content">
@ -24,4 +23,3 @@
</ul>
</div>
</div>
</div>

View File

@ -10,8 +10,9 @@
{% block content %}
<div id="main-container">
<div class="js-main">
{% include "explore.html" %}
<div id="js-leftcol">
{% include "explore.html" %}
</div>
<div id="js-maincol-fr">
<div class="js-maincol-inner">

View File

@ -183,8 +183,9 @@ how do I integrate the your wishlist thing with the tabs thing?
<div id="main-container">
<div class="js-main">
{% include "explore.html" %}
<div id="js-leftcol">
{% include "explore.html" %}
</div>
<div id="js-maincol-fr">
<div class="js-maincol-inner">
@ -232,10 +233,10 @@ how do I integrate the your wishlist thing with the tabs thing?
{% endifequal %}
{% else %}
{% for work in wishlist.works.all %}
<!-- classify which tab depending on work.last_campaign_status -->
{% if work.last_campaign_status == 'SUCCESSFUL' %}
<!-- classify which tab depending on work.last_campaign.status -->
{% if work.last_campaign.status == 'SUCCESSFUL' %}
<div class="tabs tabs-1">
{% else %}{% if work.last_campaign_status == 'ACTIVE' %}
{% else %}{% if work.last_campaign.status == 'ACTIVE' %}
<div class="tabs tabs-2">
{% else %}
<div class="tabs tabs-3">
@ -267,7 +268,7 @@ how do I integrate the your wishlist thing with the tabs thing?
</div>
{% endif %}{% endif %}{% endifequal %}
<div class="booklist-status">
<span class="booklist-status-text">{{ work.last_campaign_status }}</span>
<span class="booklist-status-text">{{ work.last_campaign.status }}</span>
<span class="booklist-status-img">
<img src="/static/images/icon-book{{ work.percent_unglued }}.png" title="book list status" alt="book list status" />
</span>

View File

@ -0,0 +1,306 @@
{% extends "base.html" %}
{% block title %} &#8212; {{ supporter.username }}{% endblock %}
{% block extra_head %}
<script type="text/javascript" src="/static/js/wishlist.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript" src="/static/js/jquery-ui-1.8.16.custom.min.js"></script>
<script type="text/javascript">
var $j = jQuery.noConflict();
$j(document).ready(function(){
$j('.user-block-hide').hide();
$j('.user-block1 a').click(
function() {
$j(this).toggleClass("active");
$j(".user-block-hide").slideToggle(300);
}
);
$j('.tabs1').click(function(){
$j('.tabs').find('.active').removeClass('active');
$j(this).addClass('active');
$j('.content-block-content').find('.active').removeClass('active');
$j('.tabs-1').addClass('active').show(300);
$j('.tabs-2').hide(200);
$j('.tabs-3').hide(200);
});
$j('.tabs2').click(function(){
$j('.tabs').find('.active').removeClass('active');
$j(this).addClass('active');
$j('.content-block-content').find('.active').removeClass('active');
$j('.tabs-2').addClass('active').show(300);
$j('.tabs-1').hide(200);
$j('.tabs-3').hide(200);
});
$j('.tabs3').click(function(){
$j('.tabs').find('.active').removeClass('active');
$j(this).addClass('active');
$j('.content-block-content').find('.active').removeClass('active');
$j('.tabs-3').addClass('active').show(300);
$j('.tabs-2').hide(200);
$j('.tabs-1').hide(200);
});
$j('.empty-wishlist span.bounce-search').click(function(){
$j('div.js-search-inner').effect("bounce", 500, function() {
$j('div.js-search-inner input[type="text"]').focus();
});
});
});
</script>
<script type="text/javascript" src="static/js/jquery-1.6.3.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('.image span').hide().css("opacity", 0);
$('.image').bind("mouseenter", (function()
{
$(this).children('span').animate({height: "300px", opacity: 1},300);
}));
$('.image').bind("mouseleave", (function()
{
$(this).children('span').animate({height: "0px", opacity: 0},200);
}));
});
</script>
<link rel="stylesheet" href="/static/css/book-panel-unimported.css">
{% endblock %}
/*
To do:
tidy: remove unnecessary divs copy-pasted over from standalone version
decide how many panels go in a row & space appropriately (do we have guidance from stefan?)
I did 5 across by shaving one pixel off each (143-142) but don't like what it's done to white space
incorporate book panel css into other css & clean up
make this part of supporter page; figure out swap logic
remove unneeded view icon
make js work
how to handle overlong author/titles? Am using truncatewords; truncatechars is better but not available in my version of Django
really want to limit the number of lines. but css with hidden overflow might be weird. show on hover?
need these boxes to have fixed height anyway because it looks weird with status at different heights
*/
{% block topsection %}
<div id="js-topsection">
<div class="js-main">
<div class="js-topnews">
<div class="js-topnews1">
<div class="js-topnews2">
<div class="js-topnews3">
<div class="user-block">
{% ifequal supporter request.user %}
<div class="user-block1">
<div class="block-inner">
<a class="my-setting" href="#">My Settings</a>
</div>
</div>
{% endifequal %}
<div class="user-block2">
<img class="user-avatar" src="/static/images/header/avatar.png" height="50" width="50" alt="User avatar" title="User avatar" />
<span class="user-name"><a href="#">{{ supporter.username }}</a></span>
<span class="user-date">{{ date }}</span>
<span class="user-short-info">{{ supporter.profile.tagline }}</span>
</div>
<div class="user-block4">
<div class="social">
{% if supporter.profile.home_url %}
<a href="{{ supporter.profile.home_url }}">
<img src="/static/images/header/icon-home.png" alt="{{ supporter }}'s Homepage" title="{{ supporter }}'s Homepage" />
</a>
{% endif %}
<a href="#"><img src="/static/images/header/icon-facebook.png" alt="{{ supporter }}'s Facebook" title="{{ supporter }}'s Facebook" /></a>
{% if supporter.profile.twitter_id %}
<a href="https://twitter.com/#!/{{ supporter.profile.twitter_id }}">
<img src="/static/images/header/icon-twitter.png" alt="{{ supporter }}'s Twitter" title="{{ supporter }}'s Twitter" />
</a>
{% endif %}
<a href="#"><img src="/static/images/header/icon-google.png" alt="google" title="google" /></a>
<a href="#"><img src="/static/images/header/icon-group.png" alt="group" title="group" /></a></div>
</div>
<div class="user-block3">
<div class="user-block">
<span class="rounded"><span class="blue">{{ backed }}</span></span>
<span class="rounded"><span class="orange">{{ backing }}</span></span>
<span class="rounded"><span class="grey">{{ wished }}</span></span>
</div>
<span class="user-status-title">I am ungluing</span>
</div>
</div>
{% ifequal supporter request.user %}
<div class="user-block-hide">
<form method="POST" action="">
{% csrf_token %}
<div class="block block1">
<div class="block-inner">
<h3><a class="profile-edit" href="#">Your Tagline</a></h3>
{{ profile_form.tagline }}
<input class="profile-save" type="submit" name="submit" value="Update" id="submit">
</div>
</div>
<div class="block block2">
<h3 class="title">Links</h3>
<div class="check-list">
<label>Your homepage URL:</label>
{{ profile_form.home_url }}
</div>
<div class="check-list">
<label>Your Twitter handle:</label>
{{ profile_form.twitter_id }}
</div>
</div>
<div class="block block3">
<h3 class="title">Other Stuff</h3>
<div class="check-list">
<label>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</label>
</div>
<div class="check-list">
<input type="checkbox" />
<label>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</label>
</div>
</div>
</form>
</div>
{% endifequal %}
</div>
</div>
</div>
</div>
</div>
</div>
{% endblock %}
{% block content %}
<div id="main-container">
<div class="js-main">
{% include "explore.html" %}
<div id="js-maincol-fr">
<div class="js-maincol-inner">
<div class="content-block">
<div class="content-block-heading" id="tabs">
<ul class="tabs">
<li class="tabs1"><a href="#">Unglued</a></li>
<li class="tabs2"><a href="#">Being Unglued</a></li>
<li class="tabs3 active"><a href="#">Want to Unglue</a></li>
</ul>
<ul class="book-list-view">
<li>View As:</li>
<li class="view-list">
<a href="#view-list">
<img src="/static/images/booklist/view-list.png" align="view list" title="view list" height="21" width="24" />
</a>
</li>
<li class="view-list">
<a href="#view-icon">
<img src="/static/images/booklist/view-icon.png" align="view icon" title="view icon" height="22" width="22" />
</a>
</li>
<li class="view-list">
<a href="#view-icon-small">
<img src="/static/images/booklist/view-small-icon.png" align="view icon small" title="view icon small" height="22" width="22" />
</a>
</li>
</ul>
</div>
<div class="content-block-content">
{% ifequal wishlist.works.all.count 0 %}
{% ifequal request.user supporter %}
<div class="empty-wishlist">
Your wishlist is currently empty.<br><br>
Go ahead and <span class="bounce-search">find</span> some books to give to the world, and add them to your Wishlist!<br><br>
We double dog dare you...
</div>
{% else %}
<div class="empty-wishlist">
It looks like {{ supporter.username }} is just
getting started, and hasn't added anything to their
wishlist just yet.<br><br>
Nudge, nudge, say no more.
{% endifequal %}
{% else %}
<div id="main-wrapper">
{% for work in wishlist.works.all %}
<!-- classify which tab depending on work.last_campaign.status -->
{% if work.last_campaign.status == 'SUCCESSFUL' %}
<div class="tabs tabs-1">
{% else %}{% if work.last_campaign.status == 'ACTIVE' %}
<div class="tabs tabs-2">
{% else %}
<div class="tabs tabs-3">
{% endif %}{% endif %}
<div class="item_wrapper">
<div class="panel_item">
<div class="greenpanel">
<div class="image">
<img src="{{ work.cover_image_thumbnail }}" width="120" height="182"/> <b>{{ work.title|truncatewords:5 }}</b>
<p>{{ work.author|truncatewords:3 }}</p>
<p class="green"><b>Status:</b> {{ work.last_campaign.status }}</p>
<div class="read">
<img src="/static/images/images/icon-book-37by25-{{ work.percent_unglued }}.png" title="book list status" alt="book list status" />
<p>100%</p>
<p class="right_add"><img src="/static/images/book-panel/add_gray.png" border="0" /></p>
</div>
<span style="display: none; opacity: 0;">
<div class="greenpanel2">
<div class="unglued_white"> <b>Unglued!</b>
<p>Sept 12 2011</p>
<p><b>Raised:</b> $12,000</p>
</div>
<div class="read_itbutton"> <a href="#">Read it Now</a> </div>
{% ifequal supporter request.user %}
<div class="remove-wishlist">
<span id="{{ work.id }}">Remove from Wishlist</span>
</div>
{% else %}{% if work in shared_works %}
<div>
<span>On Your Wishlist!</span>
</div>
{% else %}{% if request.user.is_anonymous %}
<div class="create-account">
<span>Add to Wishlist</span>
</div>
{% else %}
<div class="add-wishlist">
<span id="{{ work.editions.all.0.googlebooks_id }}">Add to Wishlist</span>
</div>
{% endif %}{% endif %}{% endifequal %}
<div class="add_towish"> <a href="#">Add to Wishlist</a> </div>
<div class="white_text"> <b><a href="#">{{ work.title }}</a></b>
<p><a href="#">{{ work.author }}</a></p>
<p><b>Status:</b> {{ work.last_campaign.status }}</p>
</div>
<div class="moreinfo"> <a href="#">More Info</a> </div>
</div>
</span> </div>
</div>
</div>
</div>
</div>
{% endfor %}
{% endifequal %}
</div>
</div>
</div>
</div>
</div>
</div>
{% endblock %}

View File

@ -4,7 +4,9 @@
<div id="main-container">
<div class="js-main">
<div id="js-leftcol">
{% include "explore.html" %}
</div>
<div id="js-maincol-fr">
<div class="js-maincol-inner">
<div class="content-block">

View File

@ -10,8 +10,9 @@ from regluit.frontend.views import CampaignFormView, GoodreadsDisplayView
urlpatterns = patterns(
"regluit.frontend.views",
url(r"^$", "home", name="home"),
url(r"work/(?P<work_id>.+)/$", "work", name="work"),
url(r"^supporter/(?P<supporter_username>.+)/$", "supporter", name="supporter"),
url(r"works/(?P<work_id>.+)/$", "work", name="work"),
url(r"^supporter/(?P<supporter_username>.+)/$", "supporter", {'template_name': 'supporter.html'}, name="supporter"),
url(r"^supporter2/(?P<supporter_username>.+)/$", "supporter", {'template_name': 'supporter_panel.html'}, name="supporter2"),
url(r"^search/$", "search", name="search"),
url(r"^privacy/$", TemplateView.as_view(template_name="privacy.html"),
name="privacy"),
@ -26,5 +27,6 @@ urlpatterns = patterns(
url(r"^goodreads/flush/$","goodreads_flush_assoc", name="goodreads_flush_assoc"),
url(r"^goodreads/load_shelf/$","goodreads_load_shelf", name="goodreads_load_shelf"),
url(r"^goodreads/clear_wishlist/$","clear_wishlist", name="clear_wishlist"),
url(r"^stub/", "stub", name="stub")
url(r"^stub/", "stub", name="stub"),
url(r"^work/(?P<isbn>\d+)/$", "campaign", name="campaign")
)

View File

@ -42,7 +42,7 @@ def home(request):
def stub(request):
path = request.path[6:]
return render(request,'stub.html', {'path': path})
def work(request, work_id):
work = get_object_or_404(models.Work, id=work_id)
editions = work.editions.all().order_by('-publication_date')
@ -55,7 +55,7 @@ def work(request, work_id):
'supporters': supporters
})
def supporter(request, supporter_username):
def supporter(request, supporter_username, template_name):
supporter = get_object_or_404(User, username=supporter_username)
wishlist = supporter.wishlist
backed = 0
@ -76,7 +76,7 @@ def supporter(request, supporter_username):
date = supporter.date_joined.strftime("%B %d, %Y")
# figure out what works the users have in commmon if someone
# is looking at someone elses supporter page
# is looking at someone else's supporter page
if not request.user.is_anonymous and request.user != supporter:
w1 = request.user.wishlist
w2 = supporter.wishlist
@ -112,7 +112,7 @@ def supporter(request, supporter_username):
"profile_form": profile_form,
}
return render(request, 'supporter.html', context)
return render(request, template_name, context)
def edit_user(request):
form=UserData()
@ -339,3 +339,7 @@ def clear_wishlist(request):
return HttpResponse("Error in clearing wishlist: %s " % (e))
logger.info("Error in clearing wishlist: %s ", e)
def campaign(request, isbn):
isbn = int(isbn)
work = models.Edition.get_by_isbn(isbn).work
return render(request, 'campaign.html', {'work': work})

View File

@ -11,3 +11,8 @@ CANCEL_URL = '/paymentcancel'
PREAPPROVAL_PERIOD = 365 # days to ask for in a preapproval
PAYPAL_COMMISSION = 0.10
PAYPAL_USERNAME = 'yelton_1320244082_biz_api1.gmail.com'
PAYPAL_PASSWORD = '1320244125'
PAYPAL_SIGNATURE = 'AIKUBuPr4mikKyQtufsnK0Fx1uwkAb.mfadAfInsxk746zqcM838IAnf'
PAYPAL_APPID = 'APP-80W284485P519543T'

View File

@ -0,0 +1,412 @@
@charset "utf-8";
*{
padding:0px;
margin:0px;
}
/*main_Css*/
#main-wrapper{
height: 100%;
width: 725px;
margin: 0px;
padding: 0px 0px;
}
/*
.item_wrapper{
margin: 0px;
padding: 0px 0px;
height: auto;
width: 142px;
float: left;
}
*/
.panel_item{
padding:5px 0px;
margin:0px;
width:142px;
float: left;
}
.panel_item span.active{
padding:15px;
margin:15px 0px;
font-weight:bold;
}
.greenpanel {
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
margin: auto;
padding: 0px 5px 5px 5px;
height: 300px;
width: 120px;
line-height:16px;
background-color: #ffffff;
color: #3d4e53;
border: 5px solid #edf3f4;
}
.greenpanel img{
padding:5px 0px;
margin:0px;
}
.green{
color: #8dc63f;
text-align: left;
}
.greenpanel a{
color: #73a334;
text-decoration: none;
}
.greenpanel a:hover{
color: #8dc63f;
text-decoration: none;
}
.greenpanel:hover{
color: #3d4e53;
}
/*2 start*/
.greenpanel2 {
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
margin: 0px auto;
padding: 10px;
height: 295px;
width: 120px;
line-height:16px;
background-color: #8dc63f;
color: #ffffff;
position:relative;
}
.unglued_white{
font-size: 12px;
margin: 0px auto;
margin-bottom:5px;
padding: 10px 0px;
}
.green{
color: #8dc63f;
text-align: left;
}
.read_itbutton{
width:118px;
height:35px;
padding:0px 0px;
background:#FFFFFF;
margin:0px;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
border: 1px solid #81bb38;
}
.read_itbutton a{
line-height:40px;
font-size:11px;
background: url(/static/images/book-panel/book_icon.png) no-repeat left center;
background-position: 10px center;
padding:0px 0px 0px 30px;
color:#73a334;
text-decoration:none;
font-weight:bold;
text-transform: uppercase;
}
.read_itbutton a:hover{
text-decoration:none;
}
.add_towish{
width:125px;
height:30px;
padding:0px 0px;
margin:15px auto;
}
.add_towish a{
line-height:40px;
font-size:11px;
background-image: url(/static/images/book-panel/add_wish_icon.png);
background-repeat: no-repeat;
background-position: left center;
padding:8px 5px 8px 21px;
font-weight:bold;
color:#FFFFFF;
text-decoration:none;
text-transform: uppercase;
border-top-width: 1px;
border-bottom-width: 1px;
border-top-style: solid;
border-bottom-style: solid;
border-top-color: #FFFFFF;
border-bottom-color: #FFFFFF;
}
.add_towish a:hover{
text-decoration:none;
color:#3d4e53;
}
.white_text{
width:130px;
height:40px;
padding:17px 0px;
margin:0px;
}
.white_text a{
color:#FFFFFF;
text-decoration:none;
}
.white_text a:hover{
color:#3d4e53;
text-decoration:none;
}
/*more info*/
.moreinfo{
width:130px;
height:30px;
padding:0px;
margin:15px 0 0;
}
.moreinfo a{
line-height:40px;
font-size:11px;
background-image: url(/static/images/book-panel/more_icon.png);
background-repeat: no-repeat;
background-position: left center;
padding:8px 42px 8px 20px;
font-weight:bold;
padding-left:20px;
color:#FFFFFF;
text-decoration:none;
text-transform: uppercase;
border-top-width: 1px;
border-bottom-width: 1px;
border-top-style: solid;
border-bottom-style: solid;
border-top-color: #FFFFFF;
border-bottom-color: #FFFFFF;
}
.moreinfo a:hover{
text-decoration:none;
color:#3d4e53;
}
/*end of the more info/*
/*end the 2greenpanel*/
/*2 start*/
.graypanel {
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
margin: 20px auto;
padding: 4px 5px;
height: 300px;
width: 130px;
line-height:16px;
background-color: #edf3f4;
color: #3d4e53;
border: 5px solid #edf3f4;
}
.unglued_white2{
font-size: 12px;
margin: 3px auto;
padding: 5px 0px;
}
.green{
color: #8dc63f;
text-align: left;
}
.graypanel a{
color: #3d4e53;
text-decoration: none;
}
.graypanel a:hover{
color: #8dc63f;
text-decoration: none;
}
.Unglue_itbutton{
width:110px;
height:40px;
padding:0px 9px;
background:#FFFFFF;
margin:0px auto;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
border: 1px solid #d4dcdd;
}
.Unglue_itbutton a{
line-height:40px;
font-size:11px;
background-image: url(/static/images/book-panel/unglue_icon.png);
background-repeat: no-repeat;
background-position: 2px center;
padding:5px 0px 0px 20px;
color:#3d4e53;
text-align:right;
font-weight:bold;
text-decoration:none;
text-transform: uppercase;
font-family: "LucidaGrandeBold";
}
.Unglue_itbutton a:hover{
text-decoration:none;
}
.add_towish2{
width:130px;
height:30px;
padding:0px 0px;
margin:15px auto;
}
.add_towish2 a{
line-height:40px;
font-size:11px;
background-image: url(/static/images/book-panel/add_gray.png);
background-repeat: no-repeat;
background-position: left center;
padding:8px 0px;
font-weight:bold;
padding-left:20px;
color:#3d4e53;
text-decoration:none;
text-transform: uppercase;
border-top-width: 1px;
border-bottom-width: 1px;
border-top-style: solid;
border-bottom-style: solid;
border-top-color: #FFFFFF;
border-bottom-color: #FFFFFF;
font-family: "LucidaGrandeBold";
}
.add_towish2 a:hover{
text-decoration:none;
}
.white_text2{
width:130px;
height:40px;
padding:13px 0px;
margin:0px;
}
.white_text2 a{
color:#3d4e53;
text-decoration:none;
}
.white_text2 a:hover{
color:#3d4e53;
text-decoration:none;
}
/*more info*/
.moreinfo2{
width:130px;
height:30px;
padding:0px 20px 0px 0px;
margin:15px auto;
}
.moreinfo2 a{
line-height:40px;
font-size:12px;
background-image: url(/static/images/book-panel/gray_more_info.png);
background-repeat: no-repeat;
background-position: left center;
padding:8px 35px;
font-weight:bold;
padding-left:20px;
color:#3d4e53;
text-decoration:none;
text-transform: uppercase;
border-top-width: 1px;
border-bottom-width: 1px;
border-top-style: solid;
border-bottom-style: solid;
border-top-color: #FFFFFF;
border-bottom-color: #FFFFFF;
font-family: "LucidaGrandeBold";
}
.moreinfo2 a:hover{
text-decoration:none;
color:#3d4e53;
}
/*end the 2greenpanel*/
.read{
margin: 15px auto 5px auto;
padding: 0px;
width: 140px;
color:#8dc63f;
height:40px;
line-height:25px;
float:left;
position: absolute;
bottom: -15px;
}
.read p {
margin: 0px;
padding: 10px 3px;
width: 50px;
font-size:10pt;
float:left;
}
.read img{
padding:5px 0px;
margin:0px;
float:left;
}
.right_add{
padding:10px;
margin:0px;
float:right;
}
p.right_add { float:right; padding:10px 10px 0 0; width:24px; }
/**/
.read2{
margin: 15px auto;
padding: 0px;
width: 130px;
color:#8dc63f;
height:40px;
line-height:25px;
}
.read2 p {
margin: 0px;
padding: 10px 3px;
width: 50px;
font-size:10pt;
float:left;
}
.read2 img{
padding:0px;
margin:0px;
float:left;
}
.right_add{
padding:10px;
margin:0px;
float:right;
}
/* --------------- ( slideout hover state ) --------------------------------------------- */
.image {
float: left;
position: relative;
margin:0px;
padding:0px;
left:0px;
height:100%;
}
.image img {
z-index: 100;
}
.image span {
position:absolute;
bottom: 0;
left:-10px;
top:-5px;
z-index: 1000;
height:auto;
}

71
static/css/campaign.css Executable file
View File

@ -0,0 +1,71 @@
#js-page-wrap{ overflow:hidden;}
#main-container{ margin-top:20px;}
#js-leftcol .jsmodule{ margin-bottom:10px;}
#js-leftcol .jsmodule.rounded{ background:#edf3f4; border-radius:20px;}
#js-leftcol .jsmodule.rounded .jsmod-content{ padding:10px 20px; font-weight:bold; border:none; margin:0;}
.book-detail{ float:left; width:100%; clear:both; display:block;}
.book-detail-img{ float: left; margin-right:10px; width:151px;}
.book-detail-img img{ padding:5px; border: solid 5px #edf3f4;}
.book-detail-info{ float:left; width:309px;}
.book-detail-info h2.book-name,
.book-detail-info h3.book-author,
.book-detail-info h3.book-year{ padding:0; margin:0; line-height:normal;}
.book-detail-info h2.book-name{ font-size:18px; text-transform:capitalize; font-weight:bold; color:#3d4e53;}
.book-detail-info h3.book-author,
.book-detail-info h3.book-year{ font-size:12px; font-weight:normal; color:#6994a3;}
.book-detail-info > div{ width:100%; clear:both; display:block; overflow:hidden; border-top:1px solid #edf3f4;padding:10px 0;}
.book-detail-info .find-book{ margin-top:15px; }
.book-detail-info .find-book label{ float:left; line-height:31px;}
.book-detail-info .find-link{ float:right;}
.book-detail-info .pledged-info{ padding:0;}
.book-detail-info .pledged-group{ padding:10px 40px 10px 0; float:left;}
.book-detail-info .status { float: right; padding-top: 4px;}
.book-detail-info .btn_support a{ background:url(/static/images/btn_bg.png) 0 0 no-repeat; width:104px; height:41px; line-height:41px; display:block; color:#fff; font-weight:bold; text-align:center; }
#tabs{
border-bottom: 4px solid #6994a3;
clear: both;
float: left;
margin-top: 10px;
width: 100%;
}
#tabs ul.book-list-view { margin-bottom:4px !important;}
#tabs-1,
#tabs-2,
#tabs-3{ margin-left:10px;}
#tabs-2,
#tabs-3,
#tabs-4{ display:none;}
ul.tabs{ float:left; padding:0; margin:0; list-style:none;}
ul.tabs li{ float: left; height:46px; line-height:46px; margin-right:2px; margin-bottom:1px;}
ul.tabs li a{ height:46px; line-height:46px; display:block; text-align:center;padding:0 10px; min-width:80px;border-radius:7px 7px 0 0; background:#d6dde0; color:#3d4e53;}
ul.tabs li a:hover,
ul.tabs li.active a{ background:#6994a3; color:#fff;}
#js-rightcol{ float:right; width:235px; }
.js-rightcol-pad{border:1px solid #d6dde0; border-radius:10px; padding:10px;}
#js-maincol-fr{ float:right; width:725px;}
#js-maincol{ float:left; width:470px; margin:0 10px;}
#js-maincol div.content-block{ background: none; padding:0;}
#js-rightcol h3.jsmod-title{ background:#a7c1ca; border-radius:10px; padding:10px; height:auto; height:auto; font-style:normal; font-size:14px; margin:0 0 10px 0;}
#js-rightcol h3.jsmod-title span{ padding:0; color:#fff;font-style:normal;}
#js-rightcol .jsmodule{ margin-bottom:10px;}
#js-rightcol .jsmod-content{ padding-left:10px;}
ul.social li{ padding:5px 0 5px 30px; height:28px; line-height:28px; }
ul.social li.facebook{ background:url(/static/images/icons/facebook.png) left center no-repeat;}
ul.social li.twitter{ background:url(/static/images/icons/twitter.png) left center no-repeat;}
ul.social li.email{ background:url(/static/images/icons/email.png) left center no-repeat;}
ul.support li{ border-bottom:1px solid #d6dde0; padding:10px 15px 10px 0; background:url(/static/images/icons/r-arrow.png) right center no-repeat;}
ul.support span{ display:block;}
ul.support span.menu-item-price{ font-size:18px;}
a{ color:#3d4e53; font-size:12px;}

View File

@ -741,7 +741,6 @@ a.my-setting.active {
border-bottom: 4px solid #8DC63F;
clear: both;
float: left;
margin-left: 10px;
margin-top: 10px;
width: 100%;
}
@ -784,21 +783,203 @@ ul.tabs li a:hover, ul.tabs li.active a {
.book-list span.rounded > span a {
text-transform: capitalize;
}
/* work page */
ul.edition-list {
list-style: none;
.book_panel {
margin: 20px auto;
padding: 0 5px 5px 5px;
height: 300px;
width: 120px;
line-height: 16px;
background-color: #ffffff;
color: #3d4e53;
border: 5px solid #edf3f4;
}
ul.edition-list li {
clear: both;
padding: 10px;
height: 80px;
border-bottom: thin gray solid;
.book_panel a {
font-size: 12pt;
color: #73a334;
text-decoration: none;
}
li.edition img.cover {
vertical-align: top;
.book_panel a:hover {
color: #8dc63f;
text-decoration: none;
}
li.edition span.publisher {
font-weight: bold;
.book_panel p {
margin: 0;
}
.book_panel img {
padding: 5px 0;
margin: 0;
}
.book_panel:hover {
color: #3d4e53;
}
.green {
color: #8dc63f;
text-align: left;
}
.book_panel_back {
margin: 0 auto;
padding: 10px;
height: 295px;
width: 120px;
line-height: 16px;
background-color: #8dc63f;
color: #ffffff;
position: relative;
}
.book_panel_back a {
font-size: 12px;
font-weight: normal;
}
.unglued_white {
margin: 0 auto;
margin-bottom: 5px;
padding: 10px 0;
}
.status {
color: #8dc63f;
text-align: left;
}
.read_itbutton {
width: 118px;
height: 35px;
padding: 0 0;
background: #FFFFFF;
margin: 0;
-moz-border-radius: 4px 4px 4px 4px;
-webkit-border-radius: 4px 4px 4px 4px;
border-radius: 4px 4px 4px 4px;
border: 1px solid #81bb38;
}
.read_itbutton a {
line-height: 40px;
font-size: 11px;
background: url("/static/images/book-panel/book_icon.png") no-repeat left center;
background-position: 10px center;
padding: 0 0 0 30px;
color: #73a334;
text-decoration: none;
font-weight: bold;
text-transform: uppercase;
}
.read_itbutton a:hover {
text-decoration: none;
}
#add_towish {
width: 130px;
height: 30px;
padding: 0 0;
margin: 10px auto;
}
#add_towish a {
line-height: 40px;
font-size: 11px;
background-image: url("/static/images/book-panel/add_wish_icon.png") no-repeat left center;
padding: 8px 5px 8px 21px;
font-weight: bold;
color: #FFFFFF;
text-decoration: none;
text-transform: uppercase;
border-width: 1px 0px;
border-style: solid none;
border-color: #FFFFFF;
}
#add_towish a:hover {
text-decoration: none;
color: #3d4e53;
}
#white_text {
width: 130px;
height: 40px;
padding: 17px 0;
margin: 0;
}
#white_text a {
color: #FFFFFF;
text-decoration: none;
}
#white_text a:hover {
color: #3d4e53;
text-decoration: none;
}
#moreinfo {
width: 130px;
height: 30px;
padding: 0;
margin: 15px 0 0;
}
#moreinfo a {
line-height: 40px;
font-size: 11px;
background-image: url("/static/images/book-panel/more_icon.png") no-repeat left center;
padding: 8px 42px 8px 20px;
font-weight: bold;
padding-left: 20px;
color: #FFFFFF;
text-decoration: none;
text-transform: uppercase;
border-width: 1px 0px;
border-style: solid none;
border-color: #FFFFFF;
}
#moreinfo a:hover {
text-decoration: none;
color: #3d4e53;
}
.green {
color: #8dc63f;
text-align: left;
}
#graypanel a {
color: #3d4e53;
text-decoration: none;
}
.read {
margin: 15px auto;
padding: 0;
width: 140px;
color: #8dc63f;
height: 40px;
line-height: 25px;
float: left;
}
.read p {
margin: 0;
padding: 10px 3px;
width: 50px;
font-size: 10pt;
float: left;
}
.read img {
padding: 5px;
margin: 0;
float: left;
}
.right_add {
padding: 10px;
margin: 0;
float: right;
}
p.right_add {
float: right;
padding: 10px 10px 0 0;
width: 24px;
}
/* slideout hover state */
.book_panel_interior {
float: left;
position: relative;
margin: 0;
padding: 0;
left: 0;
}
.book_panel_interior img {
z-index: 100;
}
.book_panel_interior span {
position: absolute;
bottom: 0;
left: -10px;
top: -5px;
z-index: 1000;
height: auto;
}

View File

@ -104,4 +104,12 @@ ul.menu{
a.readon{ background:url(../images/bg.png) 100% -72px no-repeat; color:#fff; text-transform:capitalize; display:block; float:right; font-size:13px; font-weight:bold;}
a.readon span{ background:url(../images/bg.png) -770px -108px no-repeat; margin-right:34px; padding:0 5px 0 20px; height:36px; line-height:36px; display:block;}
a{ font-weight:bold; font-size:13px; text-decoration:none; cursor:pointer;}
a{ font-weight:bold; font-size:13px; text-decoration:none; cursor:pointer;}
div.content-block-content {
padding-left: 10px;
}
#tabs {
margin-left: 10px;
}

BIN
static/images/btn_bg.png Executable file

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.1 KiB

BIN
static/images/icon-book0.png Executable file

Binary file not shown.

After

Width:  |  Height:  |  Size: 688 B

BIN
static/images/icons/email.png Executable file

Binary file not shown.

After

Width:  |  Height:  |  Size: 359 B

BIN
static/images/icons/facebook.png Executable file

Binary file not shown.

After

Width:  |  Height:  |  Size: 225 B

BIN
static/images/icons/google.png Executable file

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.3 KiB

BIN
static/images/icons/group.png Executable file

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.5 KiB

BIN
static/images/icons/r-arrow.png Executable file

Binary file not shown.

After

Width:  |  Height:  |  Size: 196 B

BIN
static/images/icons/twitter.png Executable file

Binary file not shown.

After

Width:  |  Height:  |  Size: 267 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 462 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 462 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 490 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 490 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 481 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 481 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 461 B

View File

@ -0,0 +1,376 @@
// Local variables
.greenpanelstuff {
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
width: 120px;
line-height:16px;
}
.greenpanelactionitems(@pos) {
line-height:40px;
font-size:11px;
background-repeat: no-repeat;
background-position: @pos center;
font-weight:bold;
text-decoration:none;
text-transform: uppercase;
}
.greenpanelactionborders {
border-top-width: 1px;
border-bottom-width: 1px;
border-top-style: solid;
border-bottom-style: solid;
border-top-color: #FFFFFF;
border-bottom-color: #FFFFFF;
}
.panelhoverlink {
text-decoration:none;
color:@text-blue;
}
@charset "utf-8";
*{
padding:0px;
margin:0px;
}
/*main_Css*/
#main-wrapper{
height: 100%;
width: 725px;
margin: 0px;
padding: 0px 0px;
}
.panel_item{
padding:5px 0px;
margin:0px;
width:142px;
float: left;
span.active{
padding:15px;
margin:15px 0px;
font-weight:bold;
}
}
.greenpanel {
.greenpanelstuff;
margin: auto;
padding: 0px 5px 5px 5px;
height: 300px;
background-color: #ffffff;
color: @text-blue;
border: 5px solid @pale-blue;
&:hover {
color: @text-blue;
}
img {
padding:5px 0px;
margin:0px;
}
a {
color: @dark-green;
text-decoration: none;
&:hover {
color: @green;
text-decoration: none;
}
}
}
.green {
color: @green;
text-align: left;
}
/*2 start*/
.greenpanel2 {
.greenpanelstuff;
margin: 0px auto;
padding: 10px;
height: 295px;
background-color: @green;
color: #ffffff;
position:relative;
}
.unglued_white {
font-size: 12px;
margin: 0px auto;
margin-bottom:5px;
padding: 10px 0px;
}
.read_itbutton {
width:118px;
height:35px;
padding:0px 0px;
background:#FFFFFF;
margin:0px;
.border-radius(4px);
border: 1px solid #81bb38;
a {
.greenpanelactionitems(10px);
background: url(""@{image-base}book-panel/book_icon.png") no-repeat left center;
padding:0px 0px 0px 30px;
color:@dark-green;
&:hover {
text-decoration:none;
}
}
}
.add_towish {
width:125px;
height:30px;
padding:0px 0px;
margin:15px auto;
a {
.greenpanelactionitems(left);
background-image: url("@{image-base}book-panel/add_wish_icon.png");
padding:8px 5px 8px 21px;
color:#FFFFFF;
.greenpanelactionborders()
&:hover{ .panelhoverlink;}
}
}
.white_text {
width:130px;
height:40px;
padding:17px 0px;
margin:0px;
a {
color:#FFFFFF;
text-decoration:none;
&:hover { .panelhoverlink;}
}
}
/*more info*/
.moreinfo {
width:130px;
height:30px;
padding:0px;
margin:15px 0 0;
a {
.greenpanelactionitems(left);
background-image: url("@{image-base}book-panel/more_icon.png");
padding:8px 42px 8px 20px;
padding-left:20px;
color:#FFFFFF;
.greenpanelactionborders;
&:hover { .panelhoverlink;}
}
}
/*end of the more info/*
/*end the 2greenpanel*/
/*2 start*/
.graypanel {
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
margin: 20px auto;
padding: 4px 5px;
height: 300px;
width: 130px;
line-height:16px;
background-color: @pale-blue;
color: @text-blue;
border: 5px solid @pale-blue;
}
.unglued_white2{
font-size: 12px;
margin: 3px auto;
padding: 5px 0px;
}
.green{
color: @green;
text-align: left;
}
.graypanel a {
.panelhoverlink;
}
.graypanel a:hover{
color: @green;
text-decoration: none;
}
.Unglue_itbutton{
width:110px;
height:40px;
padding:0px 9px;
background:#FFFFFF;
margin:0px auto;
.border-radius(4px);
border: 1px solid #d4dcdd;
}
.Unglue_itbutton a{
.greenpanelactionitems(2px);
background-image: url("@{image-base}book-panel/unglue_icon.png");
padding:5px 0px 0px 20px;
color:@text-blue;
text-align:right;
font-family: "LucidaGrandeBold";
}
.Unglue_itbutton a:hover{
text-decoration:none;
}
.add_towish2{
width:130px;
height:30px;
padding:0px 0px;
margin:15px auto;
}
.add_towish2 a{
.greenpanelactionitems(left);
background-image: url("@{image-base}book-panel/add_gray.png");
padding:8px 0px;
padding-left:20px;
color:@text-blue;
.greenpanelactionborders;
font-family: "LucidaGrandeBold";
}
.add_towish2 a:hover{
text-decoration:none;
}
.white_text2{
width:130px;
height:40px;
padding:13px 0px;
margin:0px;
}
.white_text2 a, a:hover {
.panelhoverlink;
}
/*more info*/
.moreinfo2{
width:130px;
height:30px;
padding:0px 20px 0px 0px;
margin:15px auto;
}
.moreinfo2 a{
line-height:40px;
font-size:12px;
background-image: url("@{image-base}book-panel/gray_more_info.png");
background-repeat: no-repeat;
background-position: left center;
padding:8px 35px;
font-weight:bold;
padding-left:20px;
color:@text-blue;
text-decoration:none;
text-transform: uppercase;
.greenpanelactionborders;
font-family: "LucidaGrandeBold";
}
.moreinfo2 a:hover{
.panelhoverlink;
}
/*end the 2greenpanel*/
.read{
margin: 15px auto 5px auto;
padding: 0px;
width: 140px;
color:@green;
height:40px;
line-height:25px;
float:left;
position: absolute;
bottom: -15px;
}
.read p {
margin: 0px;
padding: 10px 3px;
width: 50px;
font-size:10pt;
float:left;
}
.read img{
padding:5px 0px;
margin:0px;
float:left;
}
.right_add{
padding:10px;
margin:0px;
float:right;
}
p.right_add { float:right; padding:10px 10px 0 0; width:24px; }
/**/
.read2{
margin: 15px auto;
padding: 0px;
width: 130px;
color:@green;
height:40px;
line-height:25px;
}
.read2 p {
margin: 0px;
padding: 10px 3px;
width: 50px;
font-size:10pt;
float:left;
}
.read2 img{
padding:0px;
margin:0px;
float:left;
}
.right_add{
padding:10px;
margin:0px;
float:right;
}
/* --------------- ( slideout hover state ) --------------------------------------------- */
.image {
float: left;
position: relative;
margin:0px;
padding:0px;
left:0px;
height:100%;
}
.image img {
z-index: 100;
}
.image span {
position:absolute;
bottom: 0;
left:-10px;
top:-5px;
z-index: 1000;
height:auto;
}

View File

@ -0,0 +1,184 @@
.header-text {
height: 36px;
line-height: 36px;
display: block;
text-decoration: none;
font-weight: bold;
font-size: 13px;
letter-spacing: -0.05em;
}
.panelborders {
border-width: 1px 0px;
border-style: solid none;
border-color: #FFFFFF;
}
div.book-list.listview {
clear: both;
display: block;
vertical-align: middle;
height: 43px;
line-height: 43px;
margin: 0 5px 0 0;
padding: 7px 0;
}
div.book-list.listview.row1 {
background: #f6f9f9;
}
div.book-list.listview.row2 {
background: #fff;
}
div.book-list.listview div.unglue-this {
float: left;
}
div.book-list.listview div.book-thumb {
margin-right: 5px;
float: left;
}
div.book-list.listview div.book-name {
width: 260px;
margin-right: 10px;
background: url("../images/booklist/booklist-vline.png") right center no-repeat;
float: left;
}
div.book-list.listview div.book-name span {
display: block;
line-height: normal;
height: 43px;
line-height: 43px;
}
div.book-list.listview div.add-wishlist, div.book-list.listview div.remove-wishlist {
margin-right: 10px;
padding-right: 10px;
background: url("../images/booklist/booklist-vline.png") right center no-repeat;
float: left;
}
div.book-list.listview div.add-wishlist a, div.book-list.listview div.remove-wishlist a {
font-weight: normal;
color: #3d4e53;
text-transform: none;
background: url("../images/booklist/add-wishlist.png") left center no-repeat;
padding-left: 20px;
}
div.book-list.listview div.booklist-status {
margin-right: 7px;
float: left;
}
.booklist-status.listview span.booklist-status-label {
display: none;
}
.booklist-status.listview span.booklist-status-text {
float: left;
display: block;
padding-right: 5px;
text-transform: capitalize;
}
.booklist-status.listview .booklist-status-img p {
display: none;
}
div.unglue-this a {
text-transform: uppercase;
color: #3d4e53;
font-size: 11px;
font-weight: bold;
}
div.unglue-this.complete .unglue-this-inner1 {
background: url("/static/images/booklist/bg.png") 0 -84px no-repeat;
height: 42px;
}
div.unglue-this.complete .unglue-this-inner2 {
background: url("/static/images/booklist/bg.png") 100% -126px no-repeat;
margin-left: 29px;
height: 42px;
padding-right: 10px;
}
div.unglue-this.complete a {
color: #fff;
display: block;
}
div.unglue-this.processing .unglue-this-inner1 {
background: url("/static/images/booklist/bg.png") 0 0 no-repeat;
height: 42px;
}
div.unglue-this.processing .unglue-this-inner2 {
background: url("/static/images/booklist/bg.png") 100% -42px no-repeat;
margin-left: 25px;
height: 42px;
padding-right: 10px;
}
ul.book-list-view {
padding: 0;
margin: 15px;
float: right;
list-style: none;
}
ul.book-list-view li {
float: left;
margin-right: 10px;
display: block;
vertical-align: middle;
line-height: 22px;
}
div.navigation {
float: left;
clear: both;
width: 100%;
color: #37414d;
}
ul.navigation {
float: right;
padding: 0;
margin: 0;
list-style: none;
}
ul.navigation li {
float: left;
line-height: normal;
margin-right: 5px;
}
ul.navigation li a {
color: #37414d;
font-weight: normal;
}
ul.navigation li.arrow-l a {
background: url("/static/images/booklist/bg.png") 0 -168px no-repeat;
width: 10px;
height: 15px;
display: block;
text-indent: -10000px;
}
ul.navigation li.arrow-r a {
background: url("/static/images/booklist/bg.png") -1px -185px no-repeat;
width: 10px;
height: 15px;
display: block;
text-indent: -10000px;
}
ul.navigation li a:hover, ul.navigation li.active a {
color: #8ac3d7;
text-decoration: underline;
}
.unglue-button {
display: block;
border: 0;
}
.book-thumb.listview a {
display: block;
height: 50px;
width: 32px;
overflow: hidden;
position: relative;
z-index: 1;
}
.book-thumb.listview a:hover {
overflow: visible;
z-index: 1000;
border: none;
}
.book-thumb.listview a img {
position: absolute;
top: -20px;
left: -50px;
}
.listview.author {
display: none;
}

View File

@ -0,0 +1,200 @@
@import "variables.less";
div.book-list.listview{
clear:both;
display:block;
vertical-align: middle;
.height(43px);
margin:0 5px 0 0;
padding:7px 0;
// overflow:hidden;
&.row1 {
background:#f6f9f9;
}
&.row2 {
background:#fff;
}
div {
&.unglue-this {
float: left;
}
&.book-thumb {
margin-right: 5px;
float: left;
}
&.book-name {
width:260px;
margin-right:10px;
background:url("../images/booklist/booklist-vline.png") right center no-repeat;
float: left;
span {
display:block;
line-height:normal;
.height(43px);
}
}
&.add-wishlist, &.remove-wishlist {
margin-right: 10px;
padding-right: 10px;
background:url("../images/booklist/booklist-vline.png") right center no-repeat;
float: left;
a {
font-weight:normal;
color:@text-blue;
text-transform: none;
background:url("../images/booklist/add-wishlist.png") left center no-repeat;
padding-left:20px;
}
}
&.booklist-status {
margin-right:7px;
float: left;
}
}
}
.booklist-status.listview {
span.booklist-status-label {
display: none;
}
span.booklist-status-text {
float:left;
display:block;
padding-right:5px;
text-transform:capitalize;
}
.booklist-status-img p {
display: none;
}
}
div.unglue-this {
a {
text-transform:uppercase;
color:@text-blue;
font-size:11px;
font-weight:bold;
}
&.complete {
.unglue-this-inner1 {
background:url(@background-booklist) 0 -84px no-repeat;
height:42px;
}
.unglue-this-inner2 {
background:url(@background-booklist) 100% -126px no-repeat;
margin-left:29px;
height:42px;
padding-right:10px;
}
a {
color:#fff;
display: block;
}
}
&.processing {
.unglue-this-inner1 {
background:url(@background-booklist) 0 0 no-repeat;
height:42px;
}
.unglue-this-inner2 {
background:url(@background-booklist) 100% -42px no-repeat;
margin-left:25px;
height:42px;
padding-right:10px;
}
}
}
ul.book-list-view {
padding:0;
margin:15px;
float:right;
list-style:none;
li {
float:left;
margin-right:10px;
display:block;
vertical-align:middle;
line-height:22px;
}
}
div.navigation {
float: left;
clear:both;
width:100%;
color:@dark-blue;
}
ul.navigation {
float:right;
padding:0;
margin:0;
list-style:none;
li {
float: left;
line-height:normal;
margin-right:5px;
a {
color:@dark-blue;
font-weight:normal;
}
&.arrow-l a {
.navigation-arrows(0, -168px);
}
&.arrow-r a {
.navigation-arrows(-1px, -185px);
}
}
}
ul.navigation li a:hover, ul.navigation li.active a {
color: #8ac3d7;
text-decoration:underline;
}
.unglue-button {
display: block;
border: 0;
}
.book-thumb.listview a {
display:block;
height: 50px;
width: 32px;
overflow:hidden;
position:relative;
z-index:1;
&:hover {
overflow:visible;
z-index:1000;
border:none;
}
img {
position:absolute;
top:-20px;
left:-50px;
}
}
.listview.author {
display: none;
}

View File

@ -0,0 +1,413 @@
.header-text {
height: 36px;
line-height: 36px;
display: block;
text-decoration: none;
font-weight: bold;
font-size: 13px;
letter-spacing: -0.05em;
}
.panelborders {
border-width: 1px 0px;
border-style: solid none;
border-color: #FFFFFF;
}
.greenpanelstuff {
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
width: 120px;
line-height: 16px;
}
.greenpanelactionborders {
border-top-width: 1px;
border-bottom-width: 1px;
border-top-style: solid;
border-bottom-style: solid;
border-top-color: #FFFFFF;
border-bottom-color: #FFFFFF;
}
.panelhoverlink {
text-decoration: none;
color: #3d4e53;
}
@charset "utf-8";
* {
padding: 0px;
margin: 0px;
}
/*main_Css*/
#main-wrapper {
height: 100%;
width: 725px;
margin: 0px;
padding: 0px 0px;
}
.panel_item {
padding: 5px 0px;
margin: 0px;
width: 142px;
float: left;
}
.panel_item span.active {
padding: 15px;
margin: 15px 0px;
font-weight: bold;
}
.greenpanel {
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
width: 120px;
line-height: 16px;
margin: auto;
padding: 0px 5px 5px 5px;
height: 300px;
background-color: #ffffff;
color: #3d4e53;
border: 5px solid #edf3f4;
}
.greenpanel:hover {
color: #3d4e53;
}
.greenpanel img {
padding: 5px 0px;
margin: 0px;
}
.greenpanel a {
color: #73a334;
text-decoration: none;
}
.greenpanel a:hover {
color: #8dc63f;
text-decoration: none;
}
.green {
color: #8dc63f;
text-align: left;
}
/*2 start*/
.greenpanel2 {
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
width: 120px;
line-height: 16px;
margin: 0px auto;
padding: 10px;
height: 295px;
background-color: #8dc63f;
color: #ffffff;
position: relative;
}
.unglued_white {
font-size: 12px;
margin: 0px auto;
margin-bottom: 5px;
padding: 10px 0px;
}
.read_itbutton {
width: 118px;
height: 35px;
padding: 0px 0px;
background: #FFFFFF;
margin: 0px;
-moz-border-radius: 4px 4px 4px 4px;
-webkit-border-radius: 4px 4px 4px 4px;
border-radius: 4px 4px 4px 4px;
border: 1px solid #81bb38;
}
.read_itbutton a {
line-height: 40px;
font-size: 11px;
background-repeat: no-repeat;
background-position: 10px center;
font-weight: bold;
text-decoration: none;
text-transform: uppercase;
background: url(/static/images/book-panel/book_icon.png) no-repeat left center;
padding: 0px 0px 0px 30px;
color: #73a334;
}
.read_itbutton a:hover {
text-decoration: none;
}
.add_towish {
width: 125px;
height: 30px;
padding: 0px 0px;
margin: 15px auto;
}
.add_towish a {
line-height: 40px;
font-size: 11px;
background-repeat: no-repeat;
background-position: left center;
font-weight: bold;
text-decoration: none;
text-transform: uppercase;
background-image: url(/static/images/book-panel/add_wish_icon.png);
padding: 8px 5px 8px 21px;
color: #FFFFFF;
border-top-width: 1px;
border-bottom-width: 1px;
border-top-style: solid;
border-bottom-style: solid;
border-top-color: #FFFFFF;
border-bottom-color: #FFFFFF;
}
.add_towish a:hover {
text-decoration: none;
color: #3d4e53;
}
.white_text {
width: 130px;
height: 40px;
padding: 17px 0px;
margin: 0px;
}
.white_text a {
color: #FFFFFF;
text-decoration: none;
}
.white_text a:hover {
text-decoration: none;
color: #3d4e53;
}
/*more info*/
.moreinfo {
width: 130px;
height: 30px;
padding: 0px;
margin: 15px 0 0;
}
.moreinfo a {
line-height: 40px;
font-size: 11px;
background-repeat: no-repeat;
background-position: left center;
font-weight: bold;
text-decoration: none;
text-transform: uppercase;
background-image: url(/static/images/book-panel/more_icon.png);
padding: 8px 42px 8px 20px;
padding-left: 20px;
color: #FFFFFF;
border-top-width: 1px;
border-bottom-width: 1px;
border-top-style: solid;
border-bottom-style: solid;
border-top-color: #FFFFFF;
border-bottom-color: #FFFFFF;
}
.moreinfo a:hover {
text-decoration: none;
color: #3d4e53;
}
/*end of the more info/*
/*end the 2greenpanel*/
/*2 start*/
.graypanel {
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
margin: 20px auto;
padding: 4px 5px;
height: 300px;
width: 130px;
line-height: 16px;
background-color: #edf3f4;
color: #3d4e53;
border: 5px solid #edf3f4;
}
.unglued_white2 {
font-size: 12px;
margin: 3px auto;
padding: 5px 0px;
}
.green {
color: #8dc63f;
text-align: left;
}
.graypanel a {
text-decoration: none;
color: #3d4e53;
}
.graypanel a:hover {
color: #8dc63f;
text-decoration: none;
}
.Unglue_itbutton {
width: 110px;
height: 40px;
padding: 0px 9px;
background: #FFFFFF;
margin: 0px auto;
-moz-border-radius: 4px 4px 4px 4px;
-webkit-border-radius: 4px 4px 4px 4px;
border-radius: 4px 4px 4px 4px;
border: 1px solid #d4dcdd;
}
.Unglue_itbutton a {
line-height: 40px;
font-size: 11px;
background-repeat: no-repeat;
background-position: 2px center;
font-weight: bold;
text-decoration: none;
text-transform: uppercase;
background-image: url(/static/images/book-panel/unglue_icon.png);
padding: 5px 0px 0px 20px;
color: #3d4e53;
text-align: right;
font-family: "LucidaGrandeBold";
}
.Unglue_itbutton a:hover {
text-decoration: none;
}
.add_towish2 {
width: 130px;
height: 30px;
padding: 0px 0px;
margin: 15px auto;
}
.add_towish2 a {
line-height: 40px;
font-size: 11px;
background-repeat: no-repeat;
background-position: left center;
font-weight: bold;
text-decoration: none;
text-transform: uppercase;
background-image: url(/static/images/book-panel/add_gray.png);
padding: 8px 0px;
padding-left: 20px;
color: #3d4e53;
border-top-width: 1px;
border-bottom-width: 1px;
border-top-style: solid;
border-bottom-style: solid;
border-top-color: #FFFFFF;
border-bottom-color: #FFFFFF;
font-family: "LucidaGrandeBold";
}
.add_towish2 a:hover {
text-decoration: none;
}
.white_text2 {
width: 130px;
height: 40px;
padding: 13px 0px;
margin: 0px;
}
.white_text2 a, a:hover {
text-decoration: none;
color: #3d4e53;
}
/*more info*/
.moreinfo2 {
width: 130px;
height: 30px;
padding: 0px 20px 0px 0px;
margin: 15px auto;
}
.moreinfo2 a {
line-height: 40px;
font-size: 12px;
background-image: url(/static/images/book-panel/gray_more_info.png);
background-repeat: no-repeat;
background-position: left center;
padding: 8px 35px;
font-weight: bold;
padding-left: 20px;
color: #3d4e53;
text-decoration: none;
text-transform: uppercase;
border-top-width: 1px;
border-bottom-width: 1px;
border-top-style: solid;
border-bottom-style: solid;
border-top-color: #FFFFFF;
border-bottom-color: #FFFFFF;
font-family: "LucidaGrandeBold";
}
.moreinfo2 a:hover {
text-decoration: none;
color: #3d4e53;
}
/*end the 2greenpanel*/
.read {
margin: 15px auto 5px auto;
padding: 0px;
width: 140px;
color: #8dc63f;
height: 40px;
line-height: 25px;
float: left;
position: absolute;
bottom: -15px;
}
.read p {
margin: 0px;
padding: 10px 3px;
width: 50px;
font-size: 10pt;
float: left;
}
.read img {
padding: 5px 0px;
margin: 0px;
float: left;
}
.right_add {
padding: 10px;
margin: 0px;
float: right;
}
p.right_add {
float: right;
padding: 10px 10px 0 0;
width: 24px;
}
/**/
.read2 {
margin: 15px auto;
padding: 0px;
width: 130px;
color: #8dc63f;
height: 40px;
line-height: 25px;
}
.read2 p {
margin: 0px;
padding: 10px 3px;
width: 50px;
font-size: 10pt;
float: left;
}
.read2 img {
padding: 0px;
margin: 0px;
float: left;
}
.right_add {
padding: 10px;
margin: 0px;
float: right;
}
/* --------------- ( slideout hover state ) --------------------------------------------- */
.image {
float: left;
position: relative;
margin: 0px;
padding: 0px;
left: 0px;
height: 100%;
}
.image img {
z-index: 100;
}
.image span {
position: absolute;
bottom: 0;
left: -10px;
top: -5px;
z-index: 1000;
height: auto;
}

View File

@ -0,0 +1,378 @@
@import "variables.less";
// Local variables
.greenpanelstuff {
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
width: 120px;
line-height:16px;
}
.greenpanelactionitems(@pos) {
line-height:40px;
font-size:11px;
background-repeat: no-repeat;
background-position: @pos center;
font-weight:bold;
text-decoration:none;
text-transform: uppercase;
}
.greenpanelactionborders {
border-top-width: 1px;
border-bottom-width: 1px;
border-top-style: solid;
border-bottom-style: solid;
border-top-color: #FFFFFF;
border-bottom-color: #FFFFFF;
}
.panelhoverlink {
text-decoration:none;
color:@text-blue;
}
@charset "utf-8";
*{
padding:0px;
margin:0px;
}
/*main_Css*/
#main-wrapper{
height: 100%;
width: 725px;
margin: 0px;
padding: 0px 0px;
}
.panel_item{
padding:5px 0px;
margin:0px;
width:142px;
float: left;
span.active{
padding:15px;
margin:15px 0px;
font-weight:bold;
}
}
.greenpanel {
.greenpanelstuff;
margin: auto;
padding: 0px 5px 5px 5px;
height: 300px;
background-color: #ffffff;
color: @text-blue;
border: 5px solid @pale-blue;
&:hover {
color: @text-blue;
}
img {
padding:5px 0px;
margin:0px;
}
a {
color: @dark-green;
text-decoration: none;
&:hover {
color: @green;
text-decoration: none;
}
}
}
.green {
color: @green;
text-align: left;
}
/*2 start*/
.greenpanel2 {
.greenpanelstuff;
margin: 0px auto;
padding: 10px;
height: 295px;
background-color: @green;
color: #ffffff;
position:relative;
}
.unglued_white {
font-size: 12px;
margin: 0px auto;
margin-bottom:5px;
padding: 10px 0px;
}
.read_itbutton {
width:118px;
height:35px;
padding:0px 0px;
background:#FFFFFF;
margin:0px;
.border-radius(4px, 4px, 4px, 4px);
border: 1px solid #81bb38;
a {
.greenpanelactionitems(10px);
background: url(/static/images/book-panel/book_icon.png) no-repeat left center;
padding:0px 0px 0px 30px;
color:@dark-green;
&:hover {
text-decoration:none;
}
}
}
.add_towish {
width:125px;
height:30px;
padding:0px 0px;
margin:15px auto;
a {
.greenpanelactionitems(left);
background-image: url(/static/images/book-panel/add_wish_icon.png);
padding:8px 5px 8px 21px;
color:#FFFFFF;
.greenpanelactionborders();
&:hover{ .panelhoverlink;}
}
}
.white_text {
width:130px;
height:40px;
padding:17px 0px;
margin:0px;
a {
color:#FFFFFF;
text-decoration:none;
&:hover { .panelhoverlink;}
}
}
/*more info*/
.moreinfo {
width:130px;
height:30px;
padding:0px;
margin:15px 0 0;
a {
.greenpanelactionitems(left);
background-image: url(/static/images/book-panel/more_icon.png);
padding:8px 42px 8px 20px;
padding-left:20px;
color:#FFFFFF;
.greenpanelactionborders;
&:hover { .panelhoverlink;}
}
}
/*end of the more info/*
/*end the 2greenpanel*/
/*2 start*/
.graypanel {
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
margin: 20px auto;
padding: 4px 5px;
height: 300px;
width: 130px;
line-height:16px;
background-color: @pale-blue;
color: @text-blue;
border: 5px solid @pale-blue;
}
.unglued_white2{
font-size: 12px;
margin: 3px auto;
padding: 5px 0px;
}
.green{
color: @green;
text-align: left;
}
.graypanel a {
.panelhoverlink;
}
.graypanel a:hover{
color: @green;
text-decoration: none;
}
.Unglue_itbutton{
width:110px;
height:40px;
padding:0px 9px;
background:#FFFFFF;
margin:0px auto;
.border-radius(4px, 4px, 4px, 4px);
border: 1px solid #d4dcdd;
}
.Unglue_itbutton a{
.greenpanelactionitems(2px);
background-image: url(/static/images/book-panel/unglue_icon.png);
padding:5px 0px 0px 20px;
color:@text-blue;
text-align:right;
font-family: "LucidaGrandeBold";
}
.Unglue_itbutton a:hover{
text-decoration:none;
}
.add_towish2{
width:130px;
height:30px;
padding:0px 0px;
margin:15px auto;
}
.add_towish2 a{
.greenpanelactionitems(left);
background-image: url(/static/images/book-panel/add_gray.png);
padding:8px 0px;
padding-left:20px;
color:@text-blue;
.greenpanelactionborders;
font-family: "LucidaGrandeBold";
}
.add_towish2 a:hover{
text-decoration:none;
}
.white_text2{
width:130px;
height:40px;
padding:13px 0px;
margin:0px;
}
.white_text2 a, a:hover {
.panelhoverlink;
}
/*more info*/
.moreinfo2{
width:130px;
height:30px;
padding:0px 20px 0px 0px;
margin:15px auto;
}
.moreinfo2 a{
line-height:40px;
font-size:12px;
background-image: url(/static/images/book-panel/gray_more_info.png);
background-repeat: no-repeat;
background-position: left center;
padding:8px 35px;
font-weight:bold;
padding-left:20px;
color:@text-blue;
text-decoration:none;
text-transform: uppercase;
.greenpanelactionborders;
font-family: "LucidaGrandeBold";
}
.moreinfo2 a:hover{
.panelhoverlink;
}
/*end the 2greenpanel*/
.read{
margin: 15px auto 5px auto;
padding: 0px;
width: 140px;
color:@green;
height:40px;
line-height:25px;
float:left;
position: absolute;
bottom: -15px;
}
.read p {
margin: 0px;
padding: 10px 3px;
width: 50px;
font-size:10pt;
float:left;
}
.read img{
padding:5px 0px;
margin:0px;
float:left;
}
.right_add{
padding:10px;
margin:0px;
float:right;
}
p.right_add { float:right; padding:10px 10px 0 0; width:24px; }
/**/
.read2{
margin: 15px auto;
padding: 0px;
width: 130px;
color:@green;
height:40px;
line-height:25px;
}
.read2 p {
margin: 0px;
padding: 10px 3px;
width: 50px;
font-size:10pt;
float:left;
}
.read2 img{
padding:0px;
margin:0px;
float:left;
}
.right_add{
padding:10px;
margin:0px;
float:right;
}
/* --------------- ( slideout hover state ) --------------------------------------------- */
.image {
float: left;
position: relative;
margin:0px;
padding:0px;
left:0px;
height:100%;
}
.image img {
z-index: 100;
}
.image span {
position:absolute;
bottom: 0;
left:-10px;
top:-5px;
z-index: 1000;
height:auto;
}

View File

@ -0,0 +1,431 @@
.header-text {
height: 36px;
line-height: 36px;
display: block;
text-decoration: none;
font-weight: bold;
font-size: 13px;
letter-spacing: -0.05em;
}
.panelborders {
border-width: 1px 0px;
border-style: solid none;
border-color: #FFFFFF;
}
.greenpanelstuff {
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
width: 120px;
line-height: 16px;
}
.greenpanelactionborders {
border-top-width: 1px;
border-bottom-width: 1px;
border-top-style: solid;
border-bottom-style: solid;
border-top-color: #FFFFFF;
border-bottom-color: #FFFFFF;
}
.panelhoverlink {
text-decoration: none;
color: #3d4e53;
}
@charset "utf-8";
* {
padding: 0px;
margin: 0px;
}
/*main_Css*/
#main-wrapper {
height: 100%;
width: 725px;
margin: 0px;
padding: 0px 0px;
}
.panelview.tabs {
padding: 5px 0px;
margin: 0px;
width: 142px;
float: left;
}
.panelview.tabs span.active {
padding: 15px;
margin: 15px 0px;
font-weight: bold;
}
.panelview.book-list {
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
width: 120px;
line-height: 16px;
margin: auto;
padding: 0px 5px 5px 5px;
height: 300px;
background-color: #ffffff;
color: #3d4e53;
border: 5px solid #edf3f4;
/* might need this for panel hover state; don't want it for nonhover. hm.
a {
color: @dark-green;
text-decoration: none;
&:hover {
color: @green;
text-decoration: none;
}
}
*/
}
.panelview.book-list:hover {
color: #3d4e53;
}
.panelview.book-list img {
padding: 5px 0px;
margin: 0px;
}
div.remove-wishlist.panelview {
display: none;
}
.panelview.book-name, .panelview.author {
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
line-height: 16px;
color: #3d4e53;
}
.panelview.booklist-status {
color: #8dc63f;
text-align: left;
}
.panelview.booklist-status .booklist-status-label {
float: left;
font-weight: bold;
}
/*2 start*/
.greenpanel2 {
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
width: 120px;
line-height: 16px;
margin: 0px auto;
padding: 10px;
height: 295px;
background-color: #8dc63f;
color: #ffffff;
position: relative;
}
.unglued_white {
font-size: 12px;
margin: 0px auto;
margin-bottom: 5px;
padding: 10px 0px;
}
.read_itbutton {
width: 118px;
height: 35px;
padding: 0px 0px;
background: #FFFFFF;
margin: 0px;
-moz-border-radius: 4px 4px 4px 4px;
-webkit-border-radius: 4px 4px 4px 4px;
border-radius: 4px 4px 4px 4px;
border: 1px solid #81bb38;
}
.read_itbutton a {
line-height: 40px;
font-size: 11px;
background-repeat: no-repeat;
background-position: 10px center;
font-weight: bold;
text-decoration: none;
text-transform: uppercase;
background: url(/static/images/book-panel/book_icon.png) no-repeat left center;
padding: 0px 0px 0px 30px;
color: #73a334;
}
.read_itbutton a:hover {
text-decoration: none;
}
.add_towish {
width: 125px;
height: 30px;
padding: 0px 0px;
margin: 15px auto;
}
.add_towish a {
line-height: 40px;
font-size: 11px;
background-repeat: no-repeat;
background-position: left center;
font-weight: bold;
text-decoration: none;
text-transform: uppercase;
background-image: url(/static/images/book-panel/add_wish_icon.png);
padding: 8px 5px 8px 21px;
color: #FFFFFF;
border-top-width: 1px;
border-bottom-width: 1px;
border-top-style: solid;
border-bottom-style: solid;
border-top-color: #FFFFFF;
border-bottom-color: #FFFFFF;
}
.add_towish a:hover {
text-decoration: none;
color: #3d4e53;
}
.white_text {
width: 130px;
height: 40px;
padding: 17px 0px;
margin: 0px;
}
.white_text a {
color: #FFFFFF;
text-decoration: none;
}
.white_text a:hover {
text-decoration: none;
color: #3d4e53;
}
/*more info*/
.moreinfo {
width: 130px;
height: 30px;
padding: 0px;
margin: 15px 0 0;
}
.moreinfo a {
line-height: 40px;
font-size: 11px;
background-repeat: no-repeat;
background-position: left center;
font-weight: bold;
text-decoration: none;
text-transform: uppercase;
background-image: url(/static/images/book-panel/more_icon.png);
padding: 8px 42px 8px 20px;
padding-left: 20px;
color: #FFFFFF;
border-top-width: 1px;
border-bottom-width: 1px;
border-top-style: solid;
border-bottom-style: solid;
border-top-color: #FFFFFF;
border-bottom-color: #FFFFFF;
}
.moreinfo a:hover {
text-decoration: none;
color: #3d4e53;
}
/*end of the more info/*
/*end the 2greenpanel*/
/*2 start*/
.graypanel {
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
margin: 20px auto;
padding: 4px 5px;
height: 300px;
width: 130px;
line-height: 16px;
background-color: #edf3f4;
color: #3d4e53;
border: 5px solid #edf3f4;
}
.unglued_white2 {
font-size: 12px;
margin: 3px auto;
padding: 5px 0px;
}
.green {
color: #8dc63f;
text-align: left;
}
.graypanel a {
text-decoration: none;
color: #3d4e53;
}
.graypanel a:hover {
color: #8dc63f;
text-decoration: none;
}
.Unglue_itbutton {
width: 110px;
height: 40px;
padding: 0px 9px;
background: #FFFFFF;
margin: 0px auto;
-moz-border-radius: 4px 4px 4px 4px;
-webkit-border-radius: 4px 4px 4px 4px;
border-radius: 4px 4px 4px 4px;
border: 1px solid #d4dcdd;
}
.Unglue_itbutton a {
line-height: 40px;
font-size: 11px;
background-repeat: no-repeat;
background-position: 2px center;
font-weight: bold;
text-decoration: none;
text-transform: uppercase;
background-image: url(/static/images/book-panel/unglue_icon.png);
padding: 5px 0px 0px 20px;
color: #3d4e53;
text-align: right;
font-family: "LucidaGrandeBold";
}
.Unglue_itbutton a:hover {
text-decoration: none;
}
.add_towish2 {
width: 130px;
height: 30px;
padding: 0px 0px;
margin: 15px auto;
}
.add_towish2 a {
line-height: 40px;
font-size: 11px;
background-repeat: no-repeat;
background-position: left center;
font-weight: bold;
text-decoration: none;
text-transform: uppercase;
background-image: url(/static/images/book-panel/add_gray.png);
padding: 8px 0px;
padding-left: 20px;
color: #3d4e53;
border-top-width: 1px;
border-bottom-width: 1px;
border-top-style: solid;
border-bottom-style: solid;
border-top-color: #FFFFFF;
border-bottom-color: #FFFFFF;
font-family: "LucidaGrandeBold";
}
.add_towish2 a:hover {
text-decoration: none;
}
.white_text2 {
width: 130px;
height: 40px;
padding: 13px 0px;
margin: 0px;
}
.white_text2 a, a:hover {
text-decoration: none;
color: #3d4e53;
}
/*more info*/
.moreinfo2 {
width: 130px;
height: 30px;
padding: 0px 20px 0px 0px;
margin: 15px auto;
}
.moreinfo2 a {
line-height: 40px;
font-size: 12px;
background-image: url(/static/images/book-panel/gray_more_info.png);
background-repeat: no-repeat;
background-position: left center;
padding: 8px 35px;
font-weight: bold;
padding-left: 20px;
color: #3d4e53;
text-decoration: none;
text-transform: uppercase;
border-top-width: 1px;
border-bottom-width: 1px;
border-top-style: solid;
border-bottom-style: solid;
border-top-color: #FFFFFF;
border-bottom-color: #FFFFFF;
font-family: "LucidaGrandeBold";
}
.moreinfo2 a:hover {
text-decoration: none;
color: #3d4e53;
}
/*end the 2greenpanel*/
.read {
margin: 15px auto 5px auto;
padding: 0px;
width: 140px;
color: #8dc63f;
height: 40px;
line-height: 25px;
float: left;
position: absolute;
bottom: -15px;
}
.read p {
margin: 0px;
padding: 10px 3px;
width: 50px;
font-size: 10pt;
float: left;
}
.read img {
padding: 5px 0px;
margin: 0px;
float: left;
}
.right_add {
padding: 10px;
margin: 0px;
float: right;
}
p.right_add {
float: right;
padding: 10px 10px 0 0;
width: 24px;
}
/**/
.read2 {
margin: 15px auto;
padding: 0px;
width: 130px;
color: #8dc63f;
height: 40px;
line-height: 25px;
}
.read2 p {
margin: 0px;
padding: 10px 3px;
width: 50px;
font-size: 10pt;
float: left;
}
.read2 img {
padding: 0px;
margin: 0px;
float: left;
}
.right_add {
padding: 10px;
margin: 0px;
float: right;
}
/* --------------- ( slideout hover state ) --------------------------------------------- */
.panelview.book-thumb {
float: left;
position: relative;
margin: 0px;
padding: 0px;
left: 0px;
}
.panelview.book-thumb img {
z-index: 100;
width: 120px;
height: 182px;
}
.panelview.book-thumb span {
position: absolute;
bottom: 0;
left: -10px;
top: -5px;
z-index: 1000;
height: auto;
}

View File

@ -0,0 +1,397 @@
@import "variables.less";
// Local variables
.greenpanelstuff {
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
width: 120px;
line-height:16px;
}
.greenpanelactionitems(@pos) {
line-height:40px;
font-size:11px;
background-repeat: no-repeat;
background-position: @pos center;
font-weight:bold;
text-decoration:none;
text-transform: uppercase;
}
.greenpanelactionborders {
border-top-width: 1px;
border-bottom-width: 1px;
border-top-style: solid;
border-bottom-style: solid;
border-top-color: #FFFFFF;
border-bottom-color: #FFFFFF;
}
.panelhoverlink {
text-decoration:none;
color:@text-blue;
}
@charset "utf-8";
*{
padding:0px;
margin:0px;
}
/*main_Css*/
#main-wrapper{
height: 100%;
width: 725px;
margin: 0px;
padding: 0px 0px;
}
.panelview.tabs{
padding:5px 0px;
margin:0px;
width:142px;
float: left;
span.active{
padding:15px;
margin:15px 0px;
font-weight:bold;
}
}
.panelview.book-list {
.greenpanelstuff;
margin: auto;
padding: 0px 5px 5px 5px;
height: 300px;
background-color: #ffffff;
color: @text-blue;
border: 5px solid @pale-blue;
&:hover {
color: @text-blue;
}
img {
padding:5px 0px;
margin:0px;
}
/* might need this for panel hover state; don't want it for nonhover. hm.
a {
color: @dark-green;
text-decoration: none;
&:hover {
color: @green;
text-decoration: none;
}
}
*/
}
div.remove-wishlist.panelview {
display: none;
}
.panelview.book-name, .panelview.author {
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
line-height:16px;
color: #3d4e53;
}
.panelview.booklist-status {
color: @green;
text-align: left;
.booklist-status-label {
float: left;
font-weight: bold;
}
}
/*2 start*/
.greenpanel2 {
.greenpanelstuff;
margin: 0px auto;
padding: 10px;
height: 295px;
background-color: @green;
color: #ffffff;
position:relative;
}
.unglued_white {
font-size: 12px;
margin: 0px auto;
margin-bottom:5px;
padding: 10px 0px;
}
.read_itbutton {
width:118px;
height:35px;
padding:0px 0px;
background:#FFFFFF;
margin:0px;
.border-radius(4px, 4px, 4px, 4px);
border: 1px solid #81bb38;
a {
.greenpanelactionitems(10px);
background: url(/static/images/book-panel/book_icon.png) no-repeat left center;
padding:0px 0px 0px 30px;
color:@dark-green;
&:hover {
text-decoration:none;
}
}
}
.add_towish {
width:125px;
height:30px;
padding:0px 0px;
margin:15px auto;
a {
.greenpanelactionitems(left);
background-image: url(/static/images/book-panel/add_wish_icon.png);
padding:8px 5px 8px 21px;
color:#FFFFFF;
.greenpanelactionborders();
&:hover{ .panelhoverlink;}
}
}
.white_text {
width:130px;
height:40px;
padding:17px 0px;
margin:0px;
a {
color:#FFFFFF;
text-decoration:none;
&:hover { .panelhoverlink;}
}
}
/*more info*/
.moreinfo {
width:130px;
height:30px;
padding:0px;
margin:15px 0 0;
a {
.greenpanelactionitems(left);
background-image: url(/static/images/book-panel/more_icon.png);
padding:8px 42px 8px 20px;
padding-left:20px;
color:#FFFFFF;
.greenpanelactionborders;
&:hover { .panelhoverlink;}
}
}
/*end of the more info/*
/*end the 2greenpanel*/
/*2 start*/
.graypanel {
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
margin: 20px auto;
padding: 4px 5px;
height: 300px;
width: 130px;
line-height:16px;
background-color: @pale-blue;
color: @text-blue;
border: 5px solid @pale-blue;
}
.unglued_white2{
font-size: 12px;
margin: 3px auto;
padding: 5px 0px;
}
.green{
color: @green;
text-align: left;
}
.graypanel a {
.panelhoverlink;
}
.graypanel a:hover{
color: @green;
text-decoration: none;
}
.Unglue_itbutton{
width:110px;
height:40px;
padding:0px 9px;
background:#FFFFFF;
margin:0px auto;
.border-radius(4px, 4px, 4px, 4px);
border: 1px solid #d4dcdd;
}
.Unglue_itbutton a{
.greenpanelactionitems(2px);
background-image: url(/static/images/book-panel/unglue_icon.png);
padding:5px 0px 0px 20px;
color:@text-blue;
text-align:right;
font-family: "LucidaGrandeBold";
}
.Unglue_itbutton a:hover{
text-decoration:none;
}
.add_towish2{
width:130px;
height:30px;
padding:0px 0px;
margin:15px auto;
}
.add_towish2 a{
.greenpanelactionitems(left);
background-image: url(/static/images/book-panel/add_gray.png);
padding:8px 0px;
padding-left:20px;
color:@text-blue;
.greenpanelactionborders;
font-family: "LucidaGrandeBold";
}
.add_towish2 a:hover{
text-decoration:none;
}
.white_text2{
width:130px;
height:40px;
padding:13px 0px;
margin:0px;
}
.white_text2 a, a:hover {
.panelhoverlink;
}
/*more info*/
.moreinfo2{
width:130px;
height:30px;
padding:0px 20px 0px 0px;
margin:15px auto;
}
.moreinfo2 a{
line-height:40px;
font-size:12px;
background-image: url(/static/images/book-panel/gray_more_info.png);
background-repeat: no-repeat;
background-position: left center;
padding:8px 35px;
font-weight:bold;
padding-left:20px;
color:@text-blue;
text-decoration:none;
text-transform: uppercase;
.greenpanelactionborders;
font-family: "LucidaGrandeBold";
}
.moreinfo2 a:hover{
.panelhoverlink;
}
/*end the 2greenpanel*/
.read{
margin: 15px auto 5px auto;
padding: 0px;
width: 140px;
color:@green;
height:40px;
line-height:25px;
float:left;
position: absolute;
bottom: -15px;
}
.read p {
margin: 0px;
padding: 10px 3px;
width: 50px;
font-size:10pt;
float:left;
}
.read img{
padding:5px 0px;
margin:0px;
float:left;
}
.right_add{
padding:10px;
margin:0px;
float:right;
}
p.right_add { float:right; padding:10px 10px 0 0; width:24px; }
/**/
.read2{
margin: 15px auto;
padding: 0px;
width: 130px;
color:@green;
height:40px;
line-height:25px;
}
.read2 p {
margin: 0px;
padding: 10px 3px;
width: 50px;
font-size:10pt;
float:left;
}
.read2 img{
padding:0px;
margin:0px;
float:left;
}
.right_add{
padding:10px;
margin:0px;
float:right;
}
/* --------------- ( slideout hover state ) --------------------------------------------- */
.panelview.book-thumb {
float: left;
position: relative;
margin:0px;
padding:0px;
left:0px;
}
.panelview.book-thumb img {
z-index: 100;
width: 120px;
height: 182px;
}
.panelview.book-thumb span {
position:absolute;
bottom: 0;
left:-10px;
top:-5px;
z-index: 1000;
height:auto;
}

987
static/less/layout.css Normal file
View File

@ -0,0 +1,987 @@
/*
DO NOT MAKE CHANGES DIRECTLY TO layout.css.
Make changes to the appropriate file in /static/less/ and compile with the less app or similar (lesscss.org).
Changes made directly to layout.css will be overwritten.
*/
@charset "utf-8";
.header-text {
height: 36px;
line-height: 36px;
display: block;
text-decoration: none;
font-weight: bold;
font-size: 13px;
letter-spacing: -0.05em;
}
.panelborders {
border-width: 1px 0px;
border-style: solid none;
border-color: #FFFFFF;
}
div.book-list {
clear: both;
display: block;
vertical-align: middle;
height: 43px;
line-height: 43px;
margin: 0 5px 0 0;
padding: 7px 0;
overflow: hidden;
}
div.book-list.row1 {
background: #f6f9f9;
}
div.book-list.row2 {
background: #fff;
}
div.book-list div.unglue-this {
float: left;
}
div.book-list div.book-thumb {
margin-right: 5px;
float: left;
}
div.book-list div.book-name {
width: 260px;
margin-right: 10px;
background: url("/static/images/booklist/booklist-vline.png") right center no-repeat;
float: left;
}
div.book-list div.book-name span {
display: block;
line-height: normal;
height: 43px;
line-height: 43px;
}
div.book-list div.add-wishlist, div.book-list div.remove-wishlist {
margin-right: 10px;
padding-right: 10px;
background: url("/static/images/booklist/booklist-vline.png") right center no-repeat;
float: left;
}
div.book-list div.add-wishlist a, div.book-list div.remove-wishlist a {
font-weight: normal;
color: #3d4e53;
text-transform: none;
background: url("/static/images/booklist/add-wishlist.png") left center no-repeat;
padding-left: 20px;
}
div.book-list div.booklist-status {
margin-right: 7px;
float: left;
}
span.booklist-status-text {
float: left;
display: block;
padding-right: 5px;
text-transform: capitalize;
}
div.unglue-this a {
text-transform: uppercase;
color: #3d4e53;
font-size: 11px;
font-weight: bold;
}
div.unglue-this.complete .unglue-this-inner1 {
background: url("/static/images/booklist/bg.png") 0 -84px no-repeat;
height: 42px;
}
div.unglue-this.complete .unglue-this-inner2 {
background: url("/static/images/booklist/bg.png") 100% -126px no-repeat;
margin-left: 29px;
height: 42px;
padding-right: 10px;
}
div.unglue-this.complete a {
color: #fff;
display: block;
}
div.unglue-this.processing .unglue-this-inner1 {
background: url("/static/images/booklist/bg.png") 0 0 no-repeat;
height: 42px;
}
div.unglue-this.processing .unglue-this-inner2 {
background: url("/static/images/booklist/bg.png") 100% -42px no-repeat;
margin-left: 25px;
height: 42px;
padding-right: 10px;
}
ul.book-list-view {
padding: 0;
margin: 15px;
float: right;
list-style: none;
}
ul.book-list-view li {
float: left;
margin-right: 10px;
display: block;
vertical-align: middle;
line-height: 22px;
}
div.navigation {
float: left;
clear: both;
width: 100%;
color: #37414d;
}
ul.navigation {
float: right;
padding: 0;
margin: 0;
list-style: none;
}
ul.navigation li {
float: left;
line-height: normal;
margin-right: 5px;
}
ul.navigation li a {
color: #37414d;
font-weight: normal;
}
ul.navigation li.arrow-l a {
background: url("/static/images/booklist/bg.png") 0 -168px no-repeat;
width: 10px;
height: 15px;
display: block;
text-indent: -10000px;
}
ul.navigation li.arrow-r a {
background: url("/static/images/booklist/bg.png") -1px -185px no-repeat;
width: 10px;
height: 15px;
display: block;
text-indent: -10000px;
}
ul.navigation li a:hover, ul.navigation li.active a {
color: #8ac3d7;
text-decoration: underline;
}
.unglue-button {
display: block;
border: 0;
}
.book-thumb img {
height: 50px;
}
.book_panel {
margin: 20px auto;
padding: 0 5px 5px 5px;
height: 300px;
width: 120px;
line-height: 16px;
background-color: #ffffff;
color: #3d4e53;
border: 5px solid #edf3f4;
}
.book_panel a {
font-size: 12pt;
color: #73a334;
text-decoration: none;
}
.book_panel a:hover {
color: #8dc63f;
text-decoration: none;
}
.book_panel p {
margin: 0;
}
.book_panel img {
padding: 5px 0;
margin: 0;
}
.book_panel:hover {
color: #3d4e53;
}
.green {
color: #8dc63f;
text-align: left;
}
.book_panel_back {
margin: 0 auto;
padding: 10px;
height: 295px;
width: 120px;
line-height: 16px;
background-color: #8dc63f;
color: #ffffff;
position: relative;
}
.book_panel_back a {
font-size: 12px;
font-weight: normal;
}
.unglued_white {
margin: 0 auto;
margin-bottom: 5px;
padding: 10px 0;
}
.status {
color: #8dc63f;
text-align: left;
}
.read_itbutton {
width: 118px;
height: 35px;
padding: 0 0;
background: #FFFFFF;
margin: 0;
-moz-border-radius: 4px 4px 4px 4px;
-webkit-border-radius: 4px 4px 4px 4px;
border-radius: 4px 4px 4px 4px;
border: 1px solid #81bb38;
}
.read_itbutton a {
line-height: 40px;
font-size: 11px;
background: url("/static/images/book-panel/book_icon.png") no-repeat left center;
background-position: 10px center;
padding: 0 0 0 30px;
color: #73a334;
text-decoration: none;
font-weight: bold;
text-transform: uppercase;
}
.read_itbutton a:hover {
text-decoration: none;
}
#add_towish {
width: 130px;
height: 30px;
padding: 0 0;
margin: 10px auto;
}
#add_towish a {
line-height: 40px;
font-size: 11px;
background-image: url("/static/images/book-panel/add_wish_icon.png") no-repeat left center;
padding: 8px 5px 8px 21px;
font-weight: bold;
color: #FFFFFF;
text-decoration: none;
text-transform: uppercase;
border-width: 1px 0px;
border-style: solid none;
border-color: #FFFFFF;
}
#add_towish a:hover {
text-decoration: none;
color: #3d4e53;
}
#white_text {
width: 130px;
height: 40px;
padding: 17px 0;
margin: 0;
}
#white_text a {
color: #FFFFFF;
text-decoration: none;
}
#white_text a:hover {
color: #3d4e53;
text-decoration: none;
}
#moreinfo {
width: 130px;
height: 30px;
padding: 0;
margin: 15px 0 0;
}
#moreinfo a {
line-height: 40px;
font-size: 11px;
background-image: url("/static/images/book-panel/more_icon.png") no-repeat left center;
padding: 8px 42px 8px 20px;
font-weight: bold;
padding-left: 20px;
color: #FFFFFF;
text-decoration: none;
text-transform: uppercase;
border-width: 1px 0px;
border-style: solid none;
border-color: #FFFFFF;
}
#moreinfo a:hover {
text-decoration: none;
color: #3d4e53;
}
.green {
color: #8dc63f;
text-align: left;
}
#graypanel a {
color: #3d4e53;
text-decoration: none;
}
.read {
margin: 15px auto;
padding: 0;
width: 140px;
color: #8dc63f;
height: 40px;
line-height: 25px;
float: left;
}
.read p {
margin: 0;
padding: 10px 3px;
width: 50px;
font-size: 10pt;
float: left;
}
.read img {
padding: 5px;
margin: 0;
float: left;
}
.right_add {
padding: 10px;
margin: 0;
float: right;
}
p.right_add {
float: right;
padding: 10px 10px 0 0;
width: 24px;
}
/* slideout hover state */
.book_panel_interior {
float: left;
position: relative;
margin: 0;
padding: 0;
left: 0;
}
.book_panel_interior img {
z-index: 100;
}
.book_panel_interior span {
position: absolute;
bottom: 0;
left: -10px;
top: -5px;
z-index: 1000;
height: auto;
}
body {
background: url("/static/images/bg-body.png") 0 0 repeat-x;
padding: 0 0 20px 0;
margin: 0;
font-size: 12px;
font-family: Lucida "Lucida Grande", "Lucida Sans Unicode", sans-serif, Helvetica, sans-serif;
color: #3d4e53;
}
img {
border: none;
}
h2.content-heading {
padding: 15px;
margin: 0;
font-size: 19px;
font-weight: normal;
color: #3d4e53;
float: left;
width: 50%;
}
h2.content-heading span {
font-style: italic;
}
h3.jsmod-title {
background: url("/static/images/bg.png") 0 0 no-repeat;
padding: 0;
margin: 0;
height: 73px;
}
h3.jsmod-title span {
background: url("/static/images/icon-h3.png") 90% center no-repeat;
font-size: 17px;
color: #fff;
padding: 26px 40px 27px 20px;
display: block;
}
ul.menu {
list-style: none;
padding: 0;
margin: 0;
}
a.readon {
background: url("/static/images/bg.png") 100% -72px no-repeat;
color: #fff;
text-transform: capitalize;
display: block;
float: right;
font-size: 13px;
font-weight: bold;
}
a.readon span {
background: url("/static/images/bg.png") -770px -108px no-repeat;
margin-right: 34px;
padding: 0 5px 0 20px;
height: 36px;
line-height: 36px;
display: block;
}
a {
font-weight: bold;
font-size: 13px;
text-decoration: none;
cursor: pointer;
}
#js-header {
height: 90px;
}
.js-main {
width: 960px;
margin: 0 auto;
clear: both;
padding: 0;
}
.js-logo {
float: left;
padding-top: 10px;
}
.js-logo a img {
border: none;
}
.js-topmenu {
float: right;
padding-top: 25px;
}
.js-topmenu ul li {
float: left;
padding: 0 10px;
}
.js-topmenu ul li a {
color: #3d4e53;
height: 36px;
line-height: 36px;
display: block;
text-decoration: none;
font-weight: bold;
font-size: 13px;
letter-spacing: -0.05em;
}
.js-topmenu ul li span#welcome {
color: #8dc63f;
height: 36px;
line-height: 36px;
display: block;
text-decoration: none;
font-weight: bold;
font-size: 13px;
letter-spacing: -0.05em;
}
.js-topmenu ul li.last a {
background: url("/static/images/bg.png") right top no-repeat;
}
.js-topmenu ul li.last a span {
background: url("/static/images/bg.png") -770px -36px no-repeat;
margin-right: 29px;
display: block;
padding: 0 5px 0 15px;
}
#js-topsection {
padding: 15px 0;
overflow: hidden;
}
.js-topnews {
float: left;
width: 100%;
}
.js-topnews1 {
background: url("/static/images/header/header-m.png") 0 0 repeat-y;
}
.js-topnews2 {
background: url("/static/images/header/header-t.png") 0 0 no-repeat;
}
.js-topnews3 {
background: url("/static/images/header/header-b.png") 0 100% no-repeat;
display: block;
overflow: hidden;
padding: 10px;
}
.js-search {
float: right;
width: 30%;
padding-top: 25px;
}
.js-search input {
float: left;
}
.js-search .inputbox {
padding: 0 0 0 15px;
margin: 0;
border: none;
outline: none;
background: url("/static/images/bg.png") -645px -180px;
height: 36px;
line-height: 36px;
float: left;
color: #6994a3;
}
.js-search .button {
background: url("/static/images/bg.png") 100% -144px no-repeat;
padding: 0;
margin: 0;
width: 40px;
height: 36px;
display: block;
border: none;
text-indent: -10000px;
cursor: pointer;
}
.js-search-inner {
float: right;
}
#js-leftcol {
float: left;
width: 235px;
}
#js-leftcol a {
font-weight: normal;
}
#js-leftcol a:hover {
text-decoration: underline;
}
#js-leftcol .jsmod-content {
border: 1px solid #edf3f4;
margin-left: 10px;
-moz-border-radius: 0 0 10px 10px;
-webkit-border-radius: 0 0 10px 10px;
border-radius: 0 0 10px 10px;
}
#js-leftcol ul.level1 > li > a {
text-transform: uppercase;
color: #3d4e53;
font-size: 12px;
border-bottom: 1px solid #edf3f4;
border-top: 1px solid #edf3f4;
display: block;
padding: 10px;
}
#js-leftcol ul.level2 li {
padding: 5px 10px;
}
#js-leftcol ul.level2 li a {
color: #6994a3;
}
#js-maincol-fr {
float: right;
width: 725px;
}
div.content-block {
overflow: hidden;
background: url("/static/images/bg.png") 100% -223px no-repeat;
padding: 0 0 0 7px;
}
.content-block-heading a.block-link {
float: right;
padding: 15px;
font-size: 11px;
color: #3d4e53;
text-decoration: underline;
font-weight: normal;
}
div.content-block-content {
width: 100%;
overflow: hidden;
padding-left: 10px;
}
div.content-block-content .cols3 .column {
width: 33.33%;
float: left;
}
#footer {
border-top: 7px solid #edf3f4;
clear: both;
height: 90px;
text-align: center;
padding-top: 5px;
}
#footer a {
color: #3d4e53;
}
.errorlist {
color: red;
}
#registration {
margin-left: auto;
margin-right: auto;
width: 30%;
margin-top: 5%;
}
#registration input[type="submit"] {
margin-left: auto;
margin-right: auto;
padding: 5px 15px;
}
.block-inner {
padding-right: 10px;
}
.user-block {
width: 100%;
clear: both;
}
.user-block-hide {
float: left;
width: 100%;
clear: both;
}
.user-block-hide .block {
float: left;
width: 33%;
}
.user-block-hide input {
float: left;
margin: 3px 10px 0 0;
}
.user-block-hide label {
float: left;
width: 90%;
}
.user-block1 {
float: left;
width: 25%;
}
.user-block2 {
color: #6994a3;
font-size: 11px;
line-height: normal;
float: left;
width: 25%;
}
.user-block3, .user-block4 {
float: right;
width: 25%;
margin-top: 10px;
}
img.user-avatar {
float: left;
margin-right: 10px;
}
.social {
width: 100%;
padding-left: 35px;
}
span.user-name, span.user-date, span.user-short-info {
display: block;
}
span.user-name, span.user-name a, a {
font-size: 12px;
color: #3d4e53;
}
span.user-status-title {
float: left;
margin-right: 8px;
padding-top: 5px;
}
span.rounded {
border: 1px solid #d4d4d4;
-moz-border-radius: 7px 7px 7px 7px;
-webkit-border-radius: 7px 7px 7px 7px;
border-radius: 7px 7px 7px 7px;
padding: 1px;
color: #fff;
margin: 0 8px 0 0;
display: inline-block;
}
span.rounded > span {
padding: 7px 10px;
min-width: 15px;
-moz-border-radius: 5px 5px 5px 5px;
-webkit-border-radius: 5px 5px 5px 5px;
border-radius: 5px 5px 5px 5px;
text-align: center;
display: inline-block;
}
span.blue {
background: #a7d26a url("/static/images/header-button-blue.png") left bottom repeat-x;
}
span.orange {
background: #eabc7c url("/static/images/header-button-orange.png") left bottom repeat-x;
}
span.grey {
background: #bacfd6 url("/static/images/header-button-grey.png") left bottom repeat-x;
}
div.check-list {
float: left;
width: 100%;
padding-bottom: 7px;
}
a.profile-edit {
display: block;
background: url("/static/images/header/icon-edit.png") right top no-repeat;
}
div.profile-save {
padding-top: 15px;
border: none;
}
input.profile-save {
background: url("/static/images/header/save-setting.png") 0 0 no-repeat;
width: 116px;
height: 42px;
display: block;
text-indent: -100000px;
border: none;
}
a.my-setting {
background: #d6dde0 url("/static/images/header/explane.png") 90% center no-repeat;
border-radius: 7px;
height: 50px;
line-height: 50px;
display: block;
padding: 0 0 0 10px;
font-size: 20px;
}
a.my-setting.active {
background: #d6dde0 url("/static/images/header/collspane.png") 90% center no-repeat;
}
#tabs {
border-bottom: 4px solid #8DC63F;
clear: both;
float: left;
margin-left: 10px;
margin-top: 10px;
width: 100%;
}
#tabs ul.book-list-view {
margin-bottom: 4px !important;
}
#tabs-1, #tabs-2, #tabs-3 {
margin-left: 10px;
}
ul.tabs {
float: left;
padding: 0;
margin: 0;
list-style: none;
}
ul.tabs li {
float: left;
height: 46px;
line-height: 46px;
margin-right: 10px;
}
ul.tabs li a {
height: 46px;
line-height: 46px;
display: block;
text-align: center;
padding: 0 10px;
min-width: 80px;
border-radius: 7px 7px 0 0;
background: url("/static/images/header/bg-tabs1.png") left bottom repeat-x;
}
ul.tabs li a:hover, ul.tabs li.active a {
background: url("/static/images/header/bg-tabs.png") left bottom repeat-x;
color: #fff;
}
.book-list span.rounded > span {
line-height: normal;
width: 75px;
}
.book-list span.rounded > span a {
text-transform: capitalize;
}
.book_panel {
margin: 20px auto;
padding: 0 5px 5px 5px;
height: 300px;
width: 120px;
line-height: 16px;
background-color: #ffffff;
color: #3d4e53;
border: 5px solid #edf3f4;
}
.book_panel a {
font-size: 12pt;
color: #73a334;
text-decoration: none;
}
.book_panel a:hover {
color: #8dc63f;
text-decoration: none;
}
.book_panel p {
margin: 0;
}
.book_panel img {
padding: 5px 0;
margin: 0;
}
.book_panel:hover {
color: #3d4e53;
}
.green {
color: #8dc63f;
text-align: left;
}
.book_panel_back {
margin: 0 auto;
padding: 10px;
height: 295px;
width: 120px;
line-height: 16px;
background-color: #8dc63f;
color: #ffffff;
position: relative;
}
.book_panel_back a {
font-size: 12px;
font-weight: normal;
}
.unglued_white {
margin: 0 auto;
margin-bottom: 5px;
padding: 10px 0;
}
.status {
color: #8dc63f;
text-align: left;
}
.read_itbutton {
width: 118px;
height: 35px;
padding: 0 0;
background: #FFFFFF;
margin: 0;
-moz-border-radius: 4px 4px 4px 4px;
-webkit-border-radius: 4px 4px 4px 4px;
border-radius: 4px 4px 4px 4px;
border: 1px solid #81bb38;
}
.read_itbutton a {
line-height: 40px;
font-size: 11px;
background: url("/static/images/book-panel/book_icon.png") no-repeat left center;
background-position: 10px center;
padding: 0 0 0 30px;
color: #73a334;
text-decoration: none;
font-weight: bold;
text-transform: uppercase;
}
.read_itbutton a:hover {
text-decoration: none;
}
#add_towish {
width: 130px;
height: 30px;
padding: 0 0;
margin: 10px auto;
}
#add_towish a {
line-height: 40px;
font-size: 11px;
background-image: url("/static/images/book-panel/add_wish_icon.png") no-repeat left center;
padding: 8px 5px 8px 21px;
font-weight: bold;
color: #FFFFFF;
text-decoration: none;
text-transform: uppercase;
border-width: 1px 0px;
border-style: solid none;
border-color: #FFFFFF;
}
#add_towish a:hover {
text-decoration: none;
color: #3d4e53;
}
#white_text {
width: 130px;
height: 40px;
padding: 17px 0;
margin: 0;
}
#white_text a {
color: #FFFFFF;
text-decoration: none;
}
#white_text a:hover {
color: #3d4e53;
text-decoration: none;
}
#moreinfo {
width: 130px;
height: 30px;
padding: 0;
margin: 15px 0 0;
}
#moreinfo a {
line-height: 40px;
font-size: 11px;
background-image: url("/static/images/book-panel/more_icon.png") no-repeat left center;
padding: 8px 42px 8px 20px;
font-weight: bold;
padding-left: 20px;
color: #FFFFFF;
text-decoration: none;
text-transform: uppercase;
border-width: 1px 0px;
border-style: solid none;
border-color: #FFFFFF;
}
#moreinfo a:hover {
text-decoration: none;
color: #3d4e53;
}
.green {
color: #8dc63f;
text-align: left;
}
#graypanel a {
color: #3d4e53;
text-decoration: none;
}
.read {
margin: 15px auto;
padding: 0;
width: 140px;
color: #8dc63f;
height: 40px;
line-height: 25px;
float: left;
}
.read p {
margin: 0;
padding: 10px 3px;
width: 50px;
font-size: 10pt;
float: left;
}
.read img {
padding: 5px;
margin: 0;
float: left;
}
.right_add {
padding: 10px;
margin: 0;
float: right;
}
p.right_add {
float: right;
padding: 10px 10px 0 0;
width: 24px;
}
/* slideout hover state */
.book_panel_interior {
float: left;
position: relative;
margin: 0;
padding: 0;
left: 0;
}
.book_panel_interior img {
z-index: 100;
}
.book_panel_interior span {
position: absolute;
bottom: 0;
left: -10px;
top: -5px;
z-index: 1000;
height: auto;
}

View File

@ -12,6 +12,7 @@ Changes made directly to layout.css will be overwritten.
@import "sitewide.less";
@import "registration.less";
@import "supporter_layout.less";
@import "book_panel.less";
// I am going to need to draw out the page on a white board and get a sense of how this content wants to be structured for reusability.
// What might I need to look at...

View File

@ -258,6 +258,7 @@ div.content-block {
div.content-block-content {
width:100%;
overflow:hidden;
padding-left: 10px;
.cols3 .column {
width:33.33%;

View File

@ -205,3 +205,11 @@ ul.tabs {
text-transform:capitalize;
}
}
div.content-block-content {
padding-left: 10px;
}
#tabs {
margin-left: 10px;
}

View File

@ -0,0 +1,69 @@
<html>
<head>
<!-- there's stuff we need from here and stuff that's incompatible:
<link href="css/layout.css" rel="stylesheet" type="text/css" /> -->
<link href="less/book_list-test.css" rel="stylesheet" type="text/css" />
<link href="less/book_panel_unimported_test.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="js/jquery-1.6.3.min.js"></script>
<!-- Beware of fadeIn/fadeOut jQuery animations; they add an inline "display: block"
which overrides display: none in the stylesheet. Sneaky! -->
<script type="text/javascript">
$(document).ready(function(){
$('#toggle-list').click(function(){
$('div.panelview').addClass("listview").removeClass("panelview");
});
$('#toggle-panel').click(function(){
$('div.listview').addClass("panelview").removeClass("listview");
});
});
</script>
</head>
<body>
<a href="#" id="toggle-list">List view</a>
<a href="#" id="toggle-panel">Panel view</a>
<br />
<div class="listview tabs tabs-3">
<div class="listview book-list row1">
<div class="listview book-thumb">
<a href="#"><img src="http://bks0.books.google.com/books?id=v6iZL5n5cLwC&printsec=frontcover&img=1&zoom=1" alt="Book name" title="book name" /></a>
</div>
<div class="listview book-name">
<span>
<a href="{% url work work.id %}">Title</a>
</span>
</div>
<div class="listview author">
<span id="{{ work.author }}">James K. Polk</span>
</div>
<div class="listview remove-wishlist">
<span id="{{ work.id }}">Remove from Wishlist</span>
</div>
<div class="listview booklist-status">
<span class="booklist-status-label">Status:&nbsp;</span><span class="booklist-status-text">Active</span>
<!-- images differ for list and panel; need to deal. maybe can use smaller version in rounded-corner pale-background div? -->
<!-- also this span is not nested in the panel view but is in list. how to deal? -->
<span class="booklist-status-img">
<img src="images/images/icon-book-37by25-4.png" title="book list status" alt="book list status" />
<p>100%</p>
<p class="right_add"><img src="/static/images/book-panel/add_gray.png" border="0" /></p>
</span>
</div>
<div class="listview unglue-this none">
<div class="listview unglue-this-inner1">
<div class="listview unglue-this-inner2">
</div>
</div>
</div>
</div>
</div>
</body>