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

Merge branch 'master' into goodreads

pull/1/head
Raymond Yee 2011-11-09 10:38:13 -08:00
parent 31edebe769 d23218b461
commit 11e441da09
13 changed files with 840 additions and 418 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
deploy/update-regluit Executable file
View File

@ -0,0 +1,10 @@
#!/bin/bash
# put this in one of root's crontabs and it'll refresh and restart regluit
cd /opt/regluit
sudo -u ubuntu -c "git pull"
source ENV/bin/activate
django-admin.py syncdb --migrate --settings regluit.settings.prod
sudo /etc/init.d/apache2 restart
sudo /etc/init.d/celeryd restart

2
frontend/forms.py
View File

@ -42,7 +42,7 @@ class UserData(forms.Form):
raise forms.ValidationError(_("Your username is already "+oldusername)) raise forms.ValidationError(_("Your username is already "+oldusername))
class CampaignPledgeForm(forms.Form): class CampaignPledgeForm(forms.Form):
preapproval_amount = forms.DecimalField(initial=D('20.00'), min_value=D('0.00'), max_value=D('10000.00'), decimal_places=2) preapproval_amount = forms.DecimalField(initial=None, required=True, min_value=D('0.00'), max_value=D('10000.00'), decimal_places=2, label="Pledge Amount")
anonymous = forms.BooleanField(required=False, label="Don't display my username in the supporters list") anonymous = forms.BooleanField(required=False, label="Don't display my username in the supporters list")
class GoodreadsShelfLoadingForm(forms.Form): class GoodreadsShelfLoadingForm(forms.Form):

4
frontend/templates/pledge.html
View File

@ -42,14 +42,12 @@
<input type="submit" value="Pledge" /> <input type="submit" value="Pledge" />
</form> </form>
<b>{{request.GET.premium_id}}</b>
<div class="jsmod-content"> <div class="jsmod-content">
<form action="#"> <form action="#">
<ul class="support menu"> <ul class="support menu">
{% for premium in premiums %} {% for premium in premiums %}
<li class="{% if forloop.first %}first{% else %}{% if forloop.last %}last{% endif %}{% endif %}"> <li class="{% if forloop.first %}first{% else %}{% if forloop.last %}last{% endif %}{% endif %}">
<input type="radio" name="premium_radio" value="{{premium.id}}" {% ifequal request.GET.premium_id premium.id %}checked="checked"{% endifequal %}" /> <input type="radio" name="premium_radio" value="{{premium.id}}" {% ifequal request.GET.premium_id premium.id|stringformat:"s" %}checked="checked"{% endifequal %}" />
<span class="menu-item-price">${{ premium.amount }}</span> <span class="menu-item-price">${{ premium.amount }}</span>
<span class="menu-item-desc">{{ premium.description }}</span> <span class="menu-item-desc">{{ premium.description }}</span>
</a></li> </a></li>

15
frontend/templates/search.html
View File

@ -5,19 +5,8 @@
<link rel="stylesheet" href="/static/css/book_panel.css"> <link rel="stylesheet" href="/static/css/book_panel.css">
<script type="text/javascript" src="/static/js/wishlist.js"></script> <script type="text/javascript" src="/static/js/wishlist.js"></script>
<script type="text/javascript" src="/static/js/greenpanel.js"></script>
<!-- Beware of fadeIn/fadeOut jQuery animations; they add an inline "display: block" <script type="text/javascript" src="/static/js/toggle.js"></script>
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>
{% endblock %} {% endblock %}
{% block title %}Search Results{% endblock %} {% block title %}Search Results{% endblock %}

138
frontend/templates/supporter.html
View File

@ -8,81 +8,12 @@
<link type="text/css" rel="stylesheet" href="/static/css/book_panel.css" /> <link type="text/css" rel="stylesheet" href="/static/css/book_panel.css" />
<script type="text/javascript" src="/static/js/wishlist.js"></script> <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 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" src="/static/js/jquery-ui-1.8.16.custom.min.js"></script>
<script type="text/javascript" src="/static/js/jquery-1.6.3.min.js"></script>
<script type="text/javascript"> <script type="text/javascript" src="/static/js/greenpanel.js"></script>
$(document).ready(function(){ <script type="text/javascript" src="/static/js/toggle.js"></script>
$('.book-list').bind("mouseenter", (function() <script type="text/javascript" src="/static/js/tabs.js"></script>
{
$(this).removeClass('side1').addClass('side2');
$(this).children('.panelback').removeClass('side2').addClass('side1');
}));
$('.book-list').bind("mouseleave", (function()
{
$(this).children('.panelback').removeClass('side1').addClass('side2');
$(this).removeClass('side2').addClass('side1');
}));
});
</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>
<!-- 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(){
$('.panelview').addClass("listview").removeClass("panelview");
});
$('#toggle-panel').click(function(){
$('.listview').addClass("panelview").removeClass("listview");
});
});
</script>
{% endblock %} {% endblock %}
@ -172,6 +103,7 @@ how do I integrate the your wishlist thing with the tabs thing?
<div class="block block1"> <div class="block block1">
<div class="block-inner"> <div class="block-inner">
<h3><a class="profile-edit" href="#">Your Tagline</a></h3> <h3><a class="profile-edit" href="#">Your Tagline</a></h3>
{{ profile_form.tagline.errors }}
{{ profile_form.tagline }} {{ profile_form.tagline }}
<input class="profile-save" type="submit" name="submit" value="Update" id="submit"> <input class="profile-save" type="submit" name="submit" value="Update" id="submit">
@ -181,12 +113,12 @@ how do I integrate the your wishlist thing with the tabs thing?
<div class="block block2"> <div class="block block2">
<h3 class="title">Links</h3> <h3 class="title">Links</h3>
<div class="check-list"> <div class="check-list">
<label>Your homepage URL:</label> <label>Your homepage URL:</label>
{{ profile_form.home_url }} {{ profile_form.home_url }}{{ profile_form.home_url.errors }}
</div> </div>
<div class="check-list"> <div class="check-list">
<label>Your Twitter handle:</label> <label>Your Twitter handle:</label>
{{ profile_form.twitter_id }} {{ profile_form.twitter_id }}{{ profile_form.twitter_id.errors }}
</div> </div>
</div> </div>
<div class="block block3"> <div class="block block3">
@ -273,19 +205,53 @@ how do I integrate the your wishlist thing with the tabs thing?
<div class="listview book-list {% cycle 'row1' 'row2' %} side1"> <div class="listview book-list {% cycle 'row1' 'row2' %} side1">
<span class="listview panelback side2"> <span class="listview panelback side2">
<div class="greenpanel2"> <div class="greenpanel2">
<div class="unglued_white"> <b>Unglued!</b> <div class="unglued_white">
<p>Sept 12 2011</p> {% if work.first_ebook %}
<p><b>Raised:</b> $12,000</p> <b>AVAILABLE!</b>
{% else %}
<b>{{ work.last_campaign_status }}</b>
{% if work.last_campaign_status == 'SUCCESSFUL' %}
<p><b>On:</b> {{ work.last_campaign.deadline|date:"M d, Y" }}</p>
<p><b>Raised:</b> {{ work.last_campaign.current_total }}</p>
{% else %}{% if work.last_campaign_status == 'ACTIVE' %}
<p><b>Until:</b> {{ work.last_campaign.deadline|date:"M d, Y" }}</p>
<p><b>Raised:</b> {{ work.last_campaign.current_total }}</p>
{% else %}{% if work.last_campaign_status == 'INITIALIZED' %}
<p>Campaign coming soon!</p>
{% else %}{% if work.last_campaign_status == 'SUSPENDED' %}
<p>This campaign was suspended on {{ work.last_campaign.suspended }}.</p>
{% else %}{% if work.last_campaign_status == 'WITHDRAWN' %}
<p>This campaign was withdrawn on {{ work.last_campaign.withdrawn }}.</p>
{% else %}{% if work.last_campaign_status == 'UNSUCCESSFUL' %}
<p>{{ work.last_campaign.deadline }}</p>
<p>Watch for a new campaign.</p>
{% endif %}{% endif %}{% endif %}{% endif %}{% endif %}{% endif %}{% endif %}
</div> </div>
<div class="read_itbutton"> <a href="#">Read it Now</a> </div> {% if work.first_ebook %}
<div class="add_towish"> <a href="#">Add to Wishlist</a> </div> <div class="read_itbutton"><a href="{{ work.first_ebook.url }}">Read it Now</a> </div>
<div class="white_text"> <b><a href="#">Nineteen Eighty-Four</a></b> {% else %}
<p><a href="#">George Orwell</a></p> <div class="Unglue_itbutton"><a href="#">Unglue it!</a> </div>
<p><b>Genre:</b> Sci-Fi</p> {% endif %}
<p><b>Status:</b> In Progress</p> {% ifequal supporter request.user %}
<div class="moreinfo remove-wishlist"><a id="{{ work.id }}">Remove</a></div>
{% else %}{% if work in shared_works %}
<div class="moreinfo on-wishlist">
<a href="#">On Your Wishlist!</a>
</div>
{% else %}{% if request.user.is_anonymous %}
<div class="moreinfo create-account">
<a href="#">Add to Wishlist</a>
</div>
{% else %}
<div class="moreinfo add-wishlist">
<a href="#" id="{{ work.editions.all.0.googlebooks_id }}">Add to Wishlist</a>
</div>
{% endif %}{% endif %}{% endifequal %}
<div class="white_text"> <p><a href="{% url work work.id %}">{{ work.title }}</a></p>
<p>{{ work.author }}</p>
</div> </div>
<div class="moreinfo"> <div class="moreinfo">
<a href="#">More Info</a> <a href="{% url work work.id %}">More Info</a>
</div> </div>
</div> </div>
</span> </span>

69
frontend/views.py
View File

@ -41,8 +41,8 @@ def home(request):
return render(request, 'home.html', {'suppress_search_box': True}) return render(request, 'home.html', {'suppress_search_box': True})
def stub(request): def stub(request):
path = request.path[6:] # get rid of /stub/ path = request.path[6:] # get rid of /stub/
return render(request,'stub.html', {'path': path}) return render(request,'stub.html', {'path': path})
def work(request, work_id, action='display'): def work(request, work_id, action='display'):
work = get_object_or_404(models.Work, id=work_id) work = get_object_or_404(models.Work, id=work_id)
@ -65,7 +65,14 @@ def pledge(request,work_id):
premiums = campaign.premiums.all() premiums = campaign.premiums.all()
if premiums.count() == 0: if premiums.count() == 0:
premiums = models.Premium.objects.filter(campaign__isnull=True) premiums = models.Premium.objects.filter(campaign__isnull=True)
form = CampaignPledgeForm() premium_id = request.GET.get('premium_id', None)
if premium_id is not None:
preapproval_amount = D(models.Premium.objects.get(id=premium_id).amount)
else:
preapproval_amount = D('0.00')
data = {'preapproval_amount':preapproval_amount}
form = CampaignPledgeForm(data)
return render(request,'pledge.html',{'work':work,'campaign':campaign, 'premiums':premiums, 'form':form}) return render(request,'pledge.html',{'work':work,'campaign':campaign, 'premiums':premiums, 'form':form})
def supporter(request, supporter_username, template_name): def supporter(request, supporter_username, template_name):
@ -76,13 +83,13 @@ def supporter(request, supporter_username, template_name):
transet = Transaction.objects.all().filter(user = supporter) transet = Transaction.objects.all().filter(user = supporter)
for transaction in transet: for transaction in transet:
try: try:
if(transaction.campaign.status == 'SUCCESSFUL'): if(transaction.campaign.status == 'SUCCESSFUL'):
backed += 1 backed += 1
elif(transaction.campaign.status == 'ACTIVE'): elif(transaction.campaign.status == 'ACTIVE'):
backing += 1 backing += 1
except: except:
continue continue
wished = supporter.wishlist.works.count() wished = supporter.wishlist.works.count()
@ -100,17 +107,17 @@ def supporter(request, supporter_username, template_name):
# following block to support profile admin form in supporter page # following block to support profile admin form in supporter page
if request.user.is_authenticated() and request.user.username == supporter_username: if request.user.is_authenticated() and request.user.username == supporter_username:
try:
profile_obj=request.user.get_profile()
except ObjectDoesNotExist:
profile_obj= models.UserProfile()
profile_obj.user=request.user
if request.method == 'POST': if request.method == 'POST':
try:
profile_obj=request.user.get_profile()
except ObjectDoesNotExist:
profile_obj= models.UserProfile()
profile_obj.user=request.user
profile_form = ProfileForm(data=request.POST,instance=profile_obj) profile_form = ProfileForm(data=request.POST,instance=profile_obj)
if profile_form.is_valid(): if profile_form.is_valid():
profile_form.save() profile_form.save()
else: else:
profile_form = ProfileForm() profile_form= ProfileForm(instance=profile_obj)
else: else:
profile_form = '' profile_form = ''
@ -217,22 +224,22 @@ class CampaignFormView(FormView):
else: else:
user = None user = None
if (preapproval_amount > D('0.00')): # calculate the work corresponding to the campaign id
# handle preapproval: get preapproval to charge amount of money in preapproval_amount work_id = campaign.work.id
return_url = self.request.build_absolute_uri(reverse('work',kwargs={'work_id': str(work_id)}))
t, url = p.authorize('USD', TARGET_TYPE_CAMPAIGN, preapproval_amount, campaign=campaign, list=None, user=user,
return_url=return_url, anonymous=anonymous)
return_url = self.request.build_absolute_uri(reverse('campaign_by_id',kwargs={'pk': str(pk)})) #else:
t, url = p.authorize('USD', TARGET_TYPE_CAMPAIGN, preapproval_amount, campaign=campaign, list=None, user=user, # # instant payment: send to the partnering RH
return_url=return_url, anonymous=anonymous) # # right now, all money going to Gluejar.
else: # receiver_list = [{'email':settings.PAYPAL_GLUEJAR_EMAIL, 'amount':pledge_amount}]
# instant payment: send to the partnering RH #
# right now, all money going to Gluejar. # # redirect the page back to campaign page on success
receiver_list = [{'email':settings.PAYPAL_GLUEJAR_EMAIL, 'amount':pledge_amount}] # #return_url = self.request.build_absolute_uri("/campaigns/%s" %(str(pk)))
# return_url = self.request.build_absolute_uri(reverse('campaign_by_id',kwargs={'pk': str(pk)}))
# redirect the page back to campaign page on success # t, url = p.pledge('USD', TARGET_TYPE_CAMPAIGN, receiver_list, campaign=campaign, list=None, user=user,
#return_url = self.request.build_absolute_uri("/campaigns/%s" %(str(pk))) # return_url=return_url, anonymous=anonymous)
return_url = self.request.build_absolute_uri(reverse('campaign_by_id',kwargs={'pk': str(pk)}))
t, url = p.pledge('USD', TARGET_TYPE_CAMPAIGN, receiver_list, campaign=campaign, list=None, user=user,
return_url=return_url, anonymous=anonymous)
if url: if url:
logger.info("CampaignFormView paypal: " + url) logger.info("CampaignFormView paypal: " + url)

2
settings/prod.py
View File

@ -54,7 +54,7 @@ PAYPAL_SIGNATURE = ''
PAYPAL_APPID = '' PAYPAL_APPID = ''
PAYPAL_ENDPOINT = 'svcs.sandbox.paypal.com' # sandbox PAYPAL_ENDPOINT = 'svcs.sandbox.paypal.com' # sandbox
PAYPAL_PAYMENT_HOST = 'http://www.sandbox.paypal.com' # sandbox PAYPAL_PAYMENT_HOST = 'https://www.sandbox.paypal.com' # sandbox
PAYPAL_SANDBOX_LOGIN = '' PAYPAL_SANDBOX_LOGIN = ''
PAYPAL_SANDBOX_PASSWORD = '' PAYPAL_SANDBOX_PASSWORD = ''

125
static/css/book_panel.css
View File

@ -12,6 +12,7 @@
border-style: solid none; border-style: solid none;
border-color: #FFFFFF; border-color: #FFFFFF;
} }
/* Local variables */
.greenpanelstuff { .greenpanelstuff {
font-family: Arial, Helvetica, sans-serif; font-family: Arial, Helvetica, sans-serif;
font-size: 12px; font-size: 12px;
@ -30,12 +31,23 @@
text-decoration: none; text-decoration: none;
color: #3d4e53; color: #3d4e53;
} }
.readit {
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;
}
/* background */
@charset "utf-8"; @charset "utf-8";
* { * {
padding: 0px; padding: 0px;
margin: 0px; margin: 0px;
} }
/*main_Css*/
#main-wrapper { #main-wrapper {
height: 100%; height: 100%;
width: 725px; width: 725px;
@ -53,6 +65,7 @@
margin: 15px 0px; margin: 15px 0px;
font-weight: bold; font-weight: bold;
} }
/* styling of front side elements */
.panelview.book-list { .panelview.book-list {
font-family: Arial, Helvetica, sans-serif; font-family: Arial, Helvetica, sans-serif;
font-size: 12px; font-size: 12px;
@ -65,18 +78,6 @@
color: #3d4e53; color: #3d4e53;
border: 5px solid #edf3f4; border: 5px solid #edf3f4;
position: relative; position: relative;
/* 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 { .panelview.book-list:hover {
color: #3d4e53; color: #3d4e53;
@ -127,10 +128,7 @@
padding: 10px 10px 0 0; padding: 10px 10px 0 0;
width: 24px; width: 24px;
} }
/*2 start*/ /* switch to/from hover state when jquery swaps class names */
.panelback {
position: relative;
}
span.panelview.panelback.side1, span.panelview.panelback.side1 div { span.panelview.panelback.side1, span.panelview.panelback.side1 div {
display: visible; display: visible;
} }
@ -143,6 +141,10 @@ div.panelview.side1 > div {
div.panelview.side2 > div { div.panelview.side2 > div {
display: none; display: none;
} }
/* styling of hover state */
.panelback {
position: relative;
}
.greenpanel2 { .greenpanel2 {
font-family: Arial, Helvetica, sans-serif; font-family: Arial, Helvetica, sans-serif;
font-size: 12px; font-size: 12px;
@ -162,6 +164,7 @@ div.panelview.side2 > div {
margin: 0px auto; margin: 0px auto;
margin-bottom: 5px; margin-bottom: 5px;
padding: 10px 0px; padding: 10px 0px;
height: 48px;
} }
.read_itbutton { .read_itbutton {
width: 118px; width: 118px;
@ -182,18 +185,45 @@ div.panelview.side2 > div {
font-weight: bold; font-weight: bold;
text-decoration: none; text-decoration: none;
text-transform: uppercase; text-transform: uppercase;
background: url(/static/images/book-panel/book_icon.png) no-repeat 10% center; background: "/static/images/book-panel/book_icon.png) no-repeat 10% center";
padding: 0px 0px 0px 30px; padding: 0px 0px 0px 30px;
color: #73a334; color: #73a334;
} }
.read_itbutton a:hover { .read_itbutton a:hover {
text-decoration: none; text-decoration: none;
} }
.add_towish { .read_itbutton_fail {
width: 125px; width: 118px;
height: 30px; height: 35px;
padding: 0px 0px; padding: 0px 0px;
margin: 15px auto; 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_fail span {
line-height: 40px;
font-size: 11px;
background-repeat: no-repeat;
background-position: 10px center;
font-weight: bold;
text-decoration: none;
text-transform: uppercase;
background: none;
padding: 0px 0px 0px 15px;
color: #73a334;
}
.read_itbutton_fail span:hover {
text-decoration: none;
}
.add_towish {
width: 130px;
height: 30px;
padding: 0px;
margin: 15px 0 15px 0;
vertical-align: baseline;
} }
.add_towish a { .add_towish a {
line-height: 40px; line-height: 40px;
@ -203,7 +233,7 @@ div.panelview.side2 > div {
font-weight: bold; font-weight: bold;
text-decoration: none; text-decoration: none;
text-transform: uppercase; text-transform: uppercase;
background-image: url(/static/images/book-panel/add_wish_icon.png); background-image: url("/static/images/book-panel/add_wish_icon.png");
padding: 8px 5px 8px 21px; padding: 8px 5px 8px 21px;
color: #FFFFFF; color: #FFFFFF;
border-top-width: 1px; border-top-width: 1px;
@ -231,12 +261,17 @@ div.panelview.side2 > div {
text-decoration: none; text-decoration: none;
color: #3d4e53; color: #3d4e53;
} }
/*more info*/ .white_text p {
line-height: 16px;
max-height: 32px;
overflow: hidden;
}
.moreinfo { .moreinfo {
width: 130px; width: 130px;
height: 30px; height: 30px;
padding: 0px; padding: 0px;
margin: 15px 0 0; margin: 15px 0 0px 0;
vertical-align: baseline;
} }
.moreinfo a { .moreinfo a {
line-height: 40px; line-height: 40px;
@ -246,9 +281,8 @@ div.panelview.side2 > div {
font-weight: bold; font-weight: bold;
text-decoration: none; text-decoration: none;
text-transform: uppercase; text-transform: uppercase;
background-image: url(/static/images/book-panel/more_icon.png); background-image: url("/static/images/book-panel/more_icon.png");
padding: 8px 42px 8px 20px; padding: 8px 42px 8px 21px;
padding-left: 20px;
color: #FFFFFF; color: #FFFFFF;
border-top-width: 1px; border-top-width: 1px;
border-bottom-width: 1px; border-bottom-width: 1px;
@ -261,44 +295,13 @@ div.panelview.side2 > div {
text-decoration: none; text-decoration: none;
color: #3d4e53; color: #3d4e53;
} }
/*end of the more info/* /* styling of hover state when book has not been unglued, and a bunch of stuff I haven't figured out yet */
/*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 { .Unglue_itbutton {
width: 110px; width: 110px;
height: 40px; height: 40px;
padding: 0px 9px; padding: 0px 9px;
background: #FFFFFF; background: #FFFFFF;
margin: 0px auto; margin: 0px 15px 0px -5px;
-moz-border-radius: 4px 4px 4px 4px; -moz-border-radius: 4px 4px 4px 4px;
-webkit-border-radius: 4px 4px 4px 4px; -webkit-border-radius: 4px 4px 4px 4px;
border-radius: 4px 4px 4px 4px; border-radius: 4px 4px 4px 4px;

14
static/js/greenpanel.js Normal file
View File

@ -0,0 +1,14 @@
$(document).ready(function(){
$('.book-list').bind("mouseenter", (function()
{
$(this).removeClass('side1').addClass('side2');
$(this).children('.panelback').removeClass('side2').addClass('side1');
}));
$('.book-list').bind("mouseleave", (function()
{
$(this).children('.panelback').removeClass('side1').addClass('side2');
$(this).removeClass('side2').addClass('side1');
}));
});

39
static/js/tabs.js Normal file
View File

@ -0,0 +1,39 @@
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();
});
});
});

10
static/js/toggle.js Normal file
View File

@ -0,0 +1,10 @@
/* Beware of fadeIn/fadeOut jQuery animations; they add an inline "display: block"
which overrides display: none in the stylesheet. Sneaky! */
$(document).ready(function(){
$('#toggle-list').click(function(){
$('.panelview').addClass("listview").removeClass("panelview");
});
$('#toggle-panel').click(function(){
$('.listview').addClass("panelview").removeClass("listview");
});
});

172
static/less/book_panel.less
View File

@ -1,6 +1,6 @@
@import "variables.less"; @import "variables.less";
// Local variables /* Local variables */
.greenpanelstuff { .greenpanelstuff {
font-family: Arial, Helvetica, sans-serif; font-family: Arial, Helvetica, sans-serif;
font-size: 12px; font-size: 12px;
@ -32,14 +32,52 @@
color:@text-blue; color:@text-blue;
} }
.readit {
width:118px;
height:35px;
padding:0px 0px;
background:#FFFFFF;
margin:0px;
.border-radius(4px, 4px, 4px, 4px);
border: 1px solid #81bb38;
}
.readit_inner (@image, @padding) {
.greenpanelactionitems(10px);
background: @image;
padding:0px 0px 0px @padding;
color:@dark-green;
&:hover {
text-decoration:none;
}
}
.banners (@image, @right, @bottom) {
width:130px;
height:30px;
padding:0px;
margin:15px 0 @bottom 0;
vertical-align: baseline;
a {
.greenpanelactionitems(left);
background-image: url(@image);
padding:8px @right 8px 21px;
color:#FFFFFF;
.greenpanelactionborders;
&:hover { .panelhoverlink;}
}
}
/* background */
@charset "utf-8"; @charset "utf-8";
*{ *{
padding:0px; padding:0px;
margin:0px; margin:0px;
} }
/*main_Css*/
#main-wrapper{ #main-wrapper{
height: 100%; height: 100%;
width: 725px; width: 725px;
@ -60,6 +98,7 @@
} }
} }
/* styling of front side elements */
.panelview.book-list { .panelview.book-list {
.greenpanelstuff; .greenpanelstuff;
margin: auto; margin: auto;
@ -69,7 +108,6 @@
color: @text-blue; color: @text-blue;
border: 5px solid @pale-blue; border: 5px solid @pale-blue;
position: relative; position: relative;
// float: left;
&:hover { &:hover {
color: @text-blue; color: @text-blue;
@ -79,18 +117,6 @@
padding:5px 0px; padding:5px 0px;
margin: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;
}
}
*/
} }
.panelview { .panelview {
@ -130,7 +156,6 @@
.booklist-status-label { .booklist-status-label {
position: absolute; position: absolute;
// float: left;
color: @green; color: @green;
padding-left: 5px; padding-left: 5px;
left: 40px; left: 40px;
@ -144,11 +169,7 @@
} }
} }
/*2 start*/ /* switch to/from hover state when jquery swaps class names */
.panelback {
position: relative;
}
span.panelview.panelback.side1, span.panelview.panelback.side1 div { span.panelview.panelback.side1, span.panelview.panelback.side1 div {
display:visible; display:visible;
@ -166,6 +187,11 @@ div.panelview.side2 > div {
display: none; display: none;
} }
/* styling of hover state */
.panelback {
position: relative;
}
.greenpanel2 { .greenpanel2 {
.greenpanelstuff; .greenpanelstuff;
margin: 0px auto; margin: 0px auto;
@ -182,45 +208,27 @@ div.panelview.side2 > div {
margin: 0px auto; margin: 0px auto;
margin-bottom:5px; margin-bottom:5px;
padding: 10px 0px; padding: 10px 0px;
height:48px;
} }
.read_itbutton { .read_itbutton {
width:118px; .readit;
height:35px; a {
padding:0px 0px; .readit_inner("/static/images/book-panel/book_icon.png) no-repeat 10% center", 30px);
background:#FFFFFF; }
margin:0px; }
.border-radius(4px, 4px, 4px, 4px);
border: 1px solid #81bb38;
a { .read_itbutton_fail {
.greenpanelactionitems(10px); .readit;
background: url(/static/images/book-panel/book_icon.png) no-repeat 10% center;
padding:0px 0px 0px 30px;
color:@dark-green;
&:hover { span {
text-decoration:none; .readit_inner(none, 15px);
} }
}
} }
.add_towish { .add_towish {
width:125px; .banners("/static/images/book-panel/add_wish_icon.png", 5px, 15px);
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 { .white_text {
@ -235,69 +243,27 @@ div.panelview.side2 > div {
&:hover { .panelhoverlink;} &:hover { .panelhoverlink;}
} }
}
/*more info*/ p {
.moreinfo { line-height:16px;
width:130px; max-height:32px;
height:30px; overflow: hidden;
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;}
} }
} }
.moreinfo {
/*end of the more info/* .banners("/static/images/book-panel/more_icon.png", 42px, 0px);
/*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; /* styling of hover state when book has not been unglued, and a bunch of stuff I haven't figured out yet */
text-decoration: none;
}
.Unglue_itbutton{ .Unglue_itbutton{
width:110px; width:110px;
height:40px; height:40px;
padding:0px 9px; padding:0px 9px;
background:#FFFFFF; background:#FFFFFF;
margin:0px auto; margin:0px 15px 0px -5px;
.border-radius(4px, 4px, 4px, 4px); .border-radius(4px, 4px, 4px, 4px);
border: 1px solid #d4dcdd; border: 1px solid #d4dcdd;
} }

648
static/less/layout.css
View File

@ -329,6 +329,7 @@ div.content-block-content {
border-style: solid none; border-style: solid none;
border-color: #FFFFFF; border-color: #FFFFFF;
} }
/* Local variables */
.greenpanelstuff { .greenpanelstuff {
font-family: Arial, Helvetica, sans-serif; font-family: Arial, Helvetica, sans-serif;
font-size: 12px; font-size: 12px;
@ -347,12 +348,38 @@ div.content-block-content {
text-decoration: none; text-decoration: none;
color: #3d4e53; color: #3d4e53;
} }
.readit {
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;
-moz-border-radius: 4px 4px 4px 4px;
-webkit-border-radius: 4px 4px 4px 4px;
border-radius: 4px 4px 4px 4px;
-moz-border-radius: 4px 4px 4px 4px;
-webkit-border-radius: 4px 4px 4px 4px;
border-radius: 4px 4px 4px 4px;
-moz-border-radius: 4px 4px 4px 4px;
-webkit-border-radius: 4px 4px 4px 4px;
border-radius: 4px 4px 4px 4px;
-moz-border-radius: 4px 4px 4px 4px;
-webkit-border-radius: 4px 4px 4px 4px;
border-radius: 4px 4px 4px 4px;
-moz-border-radius: 4px 4px 4px 4px;
-webkit-border-radius: 4px 4px 4px 4px;
border-radius: 4px 4px 4px 4px;
border: 1px solid #81bb38;
}
/* background */
@charset "utf-8"; @charset "utf-8";
* { * {
padding: 0px; padding: 0px;
margin: 0px; margin: 0px;
} }
/*main_Css*/
#main-wrapper { #main-wrapper {
height: 100%; height: 100%;
width: 725px; width: 725px;
@ -370,6 +397,7 @@ div.content-block-content {
margin: 15px 0px; margin: 15px 0px;
font-weight: bold; font-weight: bold;
} }
/* styling of front side elements */
.panelview.book-list { .panelview.book-list {
font-family: Arial, Helvetica, sans-serif; font-family: Arial, Helvetica, sans-serif;
font-size: 12px; font-size: 12px;
@ -386,18 +414,6 @@ div.content-block-content {
color: #3d4e53; color: #3d4e53;
border: 5px solid #edf3f4; border: 5px solid #edf3f4;
position: relative; position: relative;
/* 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 { .panelview.book-list:hover {
color: #3d4e53; color: #3d4e53;
@ -448,10 +464,7 @@ div.content-block-content {
padding: 10px 10px 0 0; padding: 10px 10px 0 0;
width: 24px; width: 24px;
} }
/*2 start*/ /* switch to/from hover state when jquery swaps class names */
.panelback {
position: relative;
}
span.panelview.panelback.side1, span.panelview.panelback.side1 div { span.panelview.panelback.side1, span.panelview.panelback.side1 div {
display: visible; display: visible;
} }
@ -464,6 +477,10 @@ div.panelview.side1 > div {
div.panelview.side2 > div { div.panelview.side2 > div {
display: none; display: none;
} }
/* styling of hover state */
.panelback {
position: relative;
}
.greenpanel2 { .greenpanel2 {
font-family: Arial, Helvetica, sans-serif; font-family: Arial, Helvetica, sans-serif;
font-size: 12px; font-size: 12px;
@ -487,6 +504,7 @@ div.panelview.side2 > div {
margin: 0px auto; margin: 0px auto;
margin-bottom: 5px; margin-bottom: 5px;
padding: 10px 0px; padding: 10px 0px;
height: 48px;
} }
.read_itbutton { .read_itbutton {
width: 118px; width: 118px;
@ -513,6 +531,30 @@ div.panelview.side2 > div {
-webkit-border-radius: 4px 4px 4px 4px; -webkit-border-radius: 4px 4px 4px 4px;
border-radius: 4px 4px 4px 4px; border-radius: 4px 4px 4px 4px;
border: 1px solid #81bb38; border: 1px solid #81bb38;
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;
-moz-border-radius: 4px 4px 4px 4px;
-webkit-border-radius: 4px 4px 4px 4px;
border-radius: 4px 4px 4px 4px;
-moz-border-radius: 4px 4px 4px 4px;
-webkit-border-radius: 4px 4px 4px 4px;
border-radius: 4px 4px 4px 4px;
-moz-border-radius: 4px 4px 4px 4px;
-webkit-border-radius: 4px 4px 4px 4px;
border-radius: 4px 4px 4px 4px;
-moz-border-radius: 4px 4px 4px 4px;
-webkit-border-radius: 4px 4px 4px 4px;
border-radius: 4px 4px 4px 4px;
-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 { .read_itbutton a {
line-height: 40px; line-height: 40px;
@ -529,18 +571,136 @@ div.panelview.side2 > div {
font-weight: bold; font-weight: bold;
text-decoration: none; text-decoration: none;
text-transform: uppercase; text-transform: uppercase;
background: url(/static/images/book-panel/book_icon.png) no-repeat 10% center; background: "/static/images/book-panel/book_icon.png) no-repeat 10% center";
padding: 0px 0px 0px 30px;
color: #73a334;
line-height: 40px;
font-size: 11px;
background-repeat: no-repeat;
background-position: 10px center;
font-weight: bold;
text-decoration: none;
text-transform: uppercase;
line-height: 40px;
font-size: 11px;
background-repeat: no-repeat;
background-position: 10px center;
font-weight: bold;
text-decoration: none;
text-transform: uppercase;
background: "/static/images/book-panel/book_icon.png) no-repeat 10% center";
padding: 0px 0px 0px 30px; padding: 0px 0px 0px 30px;
color: #73a334; color: #73a334;
} }
.read_itbutton a:hover { .read_itbutton a:hover {
text-decoration: none; text-decoration: none;
} }
.add_towish { .read_itbutton a:hover {
width: 125px; text-decoration: none;
height: 30px; }
.read_itbutton_fail {
width: 118px;
height: 35px;
padding: 0px 0px; padding: 0px 0px;
margin: 15px auto; background: #FFFFFF;
margin: 0px;
-moz-border-radius: 4px 4px 4px 4px;
-webkit-border-radius: 4px 4px 4px 4px;
border-radius: 4px 4px 4px 4px;
-moz-border-radius: 4px 4px 4px 4px;
-webkit-border-radius: 4px 4px 4px 4px;
border-radius: 4px 4px 4px 4px;
-moz-border-radius: 4px 4px 4px 4px;
-webkit-border-radius: 4px 4px 4px 4px;
border-radius: 4px 4px 4px 4px;
-moz-border-radius: 4px 4px 4px 4px;
-webkit-border-radius: 4px 4px 4px 4px;
border-radius: 4px 4px 4px 4px;
-moz-border-radius: 4px 4px 4px 4px;
-webkit-border-radius: 4px 4px 4px 4px;
border-radius: 4px 4px 4px 4px;
-moz-border-radius: 4px 4px 4px 4px;
-webkit-border-radius: 4px 4px 4px 4px;
border-radius: 4px 4px 4px 4px;
border: 1px solid #81bb38;
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;
-moz-border-radius: 4px 4px 4px 4px;
-webkit-border-radius: 4px 4px 4px 4px;
border-radius: 4px 4px 4px 4px;
-moz-border-radius: 4px 4px 4px 4px;
-webkit-border-radius: 4px 4px 4px 4px;
border-radius: 4px 4px 4px 4px;
-moz-border-radius: 4px 4px 4px 4px;
-webkit-border-radius: 4px 4px 4px 4px;
border-radius: 4px 4px 4px 4px;
-moz-border-radius: 4px 4px 4px 4px;
-webkit-border-radius: 4px 4px 4px 4px;
border-radius: 4px 4px 4px 4px;
-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_fail span {
line-height: 40px;
font-size: 11px;
background-repeat: no-repeat;
background-position: 10px center;
font-weight: bold;
text-decoration: none;
text-transform: uppercase;
line-height: 40px;
font-size: 11px;
background-repeat: no-repeat;
background-position: 10px center;
font-weight: bold;
text-decoration: none;
text-transform: uppercase;
background: none;
padding: 0px 0px 0px 15px;
color: #73a334;
line-height: 40px;
font-size: 11px;
background-repeat: no-repeat;
background-position: 10px center;
font-weight: bold;
text-decoration: none;
text-transform: uppercase;
line-height: 40px;
font-size: 11px;
background-repeat: no-repeat;
background-position: 10px center;
font-weight: bold;
text-decoration: none;
text-transform: uppercase;
background: none;
padding: 0px 0px 0px 15px;
color: #73a334;
}
.read_itbutton_fail span:hover {
text-decoration: none;
}
.read_itbutton_fail span:hover {
text-decoration: none;
}
.add_towish {
width: 130px;
height: 30px;
padding: 0px;
margin: 15px 0 15px 0;
vertical-align: baseline;
width: 130px;
height: 30px;
padding: 0px;
margin: 15px 0 15px 0;
vertical-align: baseline;
} }
.add_towish a { .add_towish a {
line-height: 40px; line-height: 40px;
@ -557,7 +717,44 @@ div.panelview.side2 > div {
font-weight: bold; font-weight: bold;
text-decoration: none; text-decoration: none;
text-transform: uppercase; text-transform: uppercase;
background-image: url(/static/images/book-panel/add_wish_icon.png); 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;
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;
text-decoration: none;
color: #3d4e53;
}
.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;
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; padding: 8px 5px 8px 21px;
color: #FFFFFF; color: #FFFFFF;
border-top-width: 1px; border-top-width: 1px;
@ -595,12 +792,22 @@ div.panelview.side2 > div {
text-decoration: none; text-decoration: none;
color: #3d4e53; color: #3d4e53;
} }
/*more info*/ .white_text p {
line-height: 16px;
max-height: 32px;
overflow: hidden;
}
.moreinfo { .moreinfo {
width: 130px; width: 130px;
height: 30px; height: 30px;
padding: 0px; padding: 0px;
margin: 15px 0 0; margin: 15px 0 0px 0;
vertical-align: baseline;
width: 130px;
height: 30px;
padding: 0px;
margin: 15px 0 0px 0;
vertical-align: baseline;
} }
.moreinfo a { .moreinfo a {
line-height: 40px; line-height: 40px;
@ -617,9 +824,8 @@ div.panelview.side2 > div {
font-weight: bold; font-weight: bold;
text-decoration: none; text-decoration: none;
text-transform: uppercase; text-transform: uppercase;
background-image: url(/static/images/book-panel/more_icon.png); background-image: url("/static/images/book-panel/more_icon.png");
padding: 8px 42px 8px 20px; padding: 8px 42px 8px 21px;
padding-left: 20px;
color: #FFFFFF; color: #FFFFFF;
border-top-width: 1px; border-top-width: 1px;
border-bottom-width: 1px; border-bottom-width: 1px;
@ -640,46 +846,50 @@ div.panelview.side2 > div {
text-decoration: none; text-decoration: none;
color: #3d4e53; color: #3d4e53;
} }
/*end of the more info/* .moreinfo a {
/*end the 2greenpanel*/ line-height: 40px;
/*2 start*/ font-size: 11px;
.graypanel { background-repeat: no-repeat;
font-family: Arial, Helvetica, sans-serif; background-position: left center;
font-size: 12px; font-weight: bold;
margin: 20px auto; text-decoration: none;
padding: 4px 5px; text-transform: uppercase;
height: 300px; line-height: 40px;
width: 130px; font-size: 11px;
line-height: 16px; background-repeat: no-repeat;
background-color: #edf3f4; background-position: left center;
color: #3d4e53; font-weight: bold;
border: 5px solid #edf3f4; text-decoration: none;
text-transform: uppercase;
background-image: url("/static/images/book-panel/more_icon.png");
padding: 8px 42px 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;
border-top-width: 1px;
border-bottom-width: 1px;
border-top-style: solid;
border-bottom-style: solid;
border-top-color: #FFFFFF;
border-bottom-color: #FFFFFF;
} }
.unglued_white2 { .moreinfo a:hover {
font-size: 12px;
margin: 3px auto;
padding: 5px 0px;
}
.green {
color: #8dc63f;
text-align: left;
}
.graypanel a {
text-decoration: none; text-decoration: none;
color: #3d4e53; color: #3d4e53;
text-decoration: none; text-decoration: none;
color: #3d4e53; color: #3d4e53;
} }
.graypanel a:hover { /* styling of hover state when book has not been unglued, and a bunch of stuff I haven't figured out yet */
color: #8dc63f;
text-decoration: none;
}
.Unglue_itbutton { .Unglue_itbutton {
width: 110px; width: 110px;
height: 40px; height: 40px;
padding: 0px 9px; padding: 0px 9px;
background: #FFFFFF; background: #FFFFFF;
margin: 0px auto; margin: 0px 15px 0px -5px;
-moz-border-radius: 4px 4px 4px 4px; -moz-border-radius: 4px 4px 4px 4px;
-webkit-border-radius: 4px 4px 4px 4px; -webkit-border-radius: 4px 4px 4px 4px;
border-radius: 4px 4px 4px 4px; border-radius: 4px 4px 4px 4px;
@ -1615,6 +1825,7 @@ div.content-block-content {
border-style: solid none; border-style: solid none;
border-color: #FFFFFF; border-color: #FFFFFF;
} }
/* Local variables */
.greenpanelstuff { .greenpanelstuff {
font-family: Arial, Helvetica, sans-serif; font-family: Arial, Helvetica, sans-serif;
font-size: 12px; font-size: 12px;
@ -1633,12 +1844,38 @@ div.content-block-content {
text-decoration: none; text-decoration: none;
color: #3d4e53; color: #3d4e53;
} }
.readit {
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;
-moz-border-radius: 4px 4px 4px 4px;
-webkit-border-radius: 4px 4px 4px 4px;
border-radius: 4px 4px 4px 4px;
-moz-border-radius: 4px 4px 4px 4px;
-webkit-border-radius: 4px 4px 4px 4px;
border-radius: 4px 4px 4px 4px;
-moz-border-radius: 4px 4px 4px 4px;
-webkit-border-radius: 4px 4px 4px 4px;
border-radius: 4px 4px 4px 4px;
-moz-border-radius: 4px 4px 4px 4px;
-webkit-border-radius: 4px 4px 4px 4px;
border-radius: 4px 4px 4px 4px;
-moz-border-radius: 4px 4px 4px 4px;
-webkit-border-radius: 4px 4px 4px 4px;
border-radius: 4px 4px 4px 4px;
border: 1px solid #81bb38;
}
/* background */
@charset "utf-8"; @charset "utf-8";
* { * {
padding: 0px; padding: 0px;
margin: 0px; margin: 0px;
} }
/*main_Css*/
#main-wrapper { #main-wrapper {
height: 100%; height: 100%;
width: 725px; width: 725px;
@ -1656,6 +1893,7 @@ div.content-block-content {
margin: 15px 0px; margin: 15px 0px;
font-weight: bold; font-weight: bold;
} }
/* styling of front side elements */
.panelview.book-list { .panelview.book-list {
font-family: Arial, Helvetica, sans-serif; font-family: Arial, Helvetica, sans-serif;
font-size: 12px; font-size: 12px;
@ -1672,18 +1910,6 @@ div.content-block-content {
color: #3d4e53; color: #3d4e53;
border: 5px solid #edf3f4; border: 5px solid #edf3f4;
position: relative; position: relative;
/* 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 { .panelview.book-list:hover {
color: #3d4e53; color: #3d4e53;
@ -1734,10 +1960,7 @@ div.content-block-content {
padding: 10px 10px 0 0; padding: 10px 10px 0 0;
width: 24px; width: 24px;
} }
/*2 start*/ /* switch to/from hover state when jquery swaps class names */
.panelback {
position: relative;
}
span.panelview.panelback.side1, span.panelview.panelback.side1 div { span.panelview.panelback.side1, span.panelview.panelback.side1 div {
display: visible; display: visible;
} }
@ -1750,6 +1973,10 @@ div.panelview.side1 > div {
div.panelview.side2 > div { div.panelview.side2 > div {
display: none; display: none;
} }
/* styling of hover state */
.panelback {
position: relative;
}
.greenpanel2 { .greenpanel2 {
font-family: Arial, Helvetica, sans-serif; font-family: Arial, Helvetica, sans-serif;
font-size: 12px; font-size: 12px;
@ -1773,6 +2000,7 @@ div.panelview.side2 > div {
margin: 0px auto; margin: 0px auto;
margin-bottom: 5px; margin-bottom: 5px;
padding: 10px 0px; padding: 10px 0px;
height: 48px;
} }
.read_itbutton { .read_itbutton {
width: 118px; width: 118px;
@ -1799,6 +2027,30 @@ div.panelview.side2 > div {
-webkit-border-radius: 4px 4px 4px 4px; -webkit-border-radius: 4px 4px 4px 4px;
border-radius: 4px 4px 4px 4px; border-radius: 4px 4px 4px 4px;
border: 1px solid #81bb38; border: 1px solid #81bb38;
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;
-moz-border-radius: 4px 4px 4px 4px;
-webkit-border-radius: 4px 4px 4px 4px;
border-radius: 4px 4px 4px 4px;
-moz-border-radius: 4px 4px 4px 4px;
-webkit-border-radius: 4px 4px 4px 4px;
border-radius: 4px 4px 4px 4px;
-moz-border-radius: 4px 4px 4px 4px;
-webkit-border-radius: 4px 4px 4px 4px;
border-radius: 4px 4px 4px 4px;
-moz-border-radius: 4px 4px 4px 4px;
-webkit-border-radius: 4px 4px 4px 4px;
border-radius: 4px 4px 4px 4px;
-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 { .read_itbutton a {
line-height: 40px; line-height: 40px;
@ -1815,18 +2067,136 @@ div.panelview.side2 > div {
font-weight: bold; font-weight: bold;
text-decoration: none; text-decoration: none;
text-transform: uppercase; text-transform: uppercase;
background: url(/static/images/book-panel/book_icon.png) no-repeat 10% center; background: "/static/images/book-panel/book_icon.png) no-repeat 10% center";
padding: 0px 0px 0px 30px;
color: #73a334;
line-height: 40px;
font-size: 11px;
background-repeat: no-repeat;
background-position: 10px center;
font-weight: bold;
text-decoration: none;
text-transform: uppercase;
line-height: 40px;
font-size: 11px;
background-repeat: no-repeat;
background-position: 10px center;
font-weight: bold;
text-decoration: none;
text-transform: uppercase;
background: "/static/images/book-panel/book_icon.png) no-repeat 10% center";
padding: 0px 0px 0px 30px; padding: 0px 0px 0px 30px;
color: #73a334; color: #73a334;
} }
.read_itbutton a:hover { .read_itbutton a:hover {
text-decoration: none; text-decoration: none;
} }
.add_towish { .read_itbutton a:hover {
width: 125px; text-decoration: none;
height: 30px; }
.read_itbutton_fail {
width: 118px;
height: 35px;
padding: 0px 0px; padding: 0px 0px;
margin: 15px auto; background: #FFFFFF;
margin: 0px;
-moz-border-radius: 4px 4px 4px 4px;
-webkit-border-radius: 4px 4px 4px 4px;
border-radius: 4px 4px 4px 4px;
-moz-border-radius: 4px 4px 4px 4px;
-webkit-border-radius: 4px 4px 4px 4px;
border-radius: 4px 4px 4px 4px;
-moz-border-radius: 4px 4px 4px 4px;
-webkit-border-radius: 4px 4px 4px 4px;
border-radius: 4px 4px 4px 4px;
-moz-border-radius: 4px 4px 4px 4px;
-webkit-border-radius: 4px 4px 4px 4px;
border-radius: 4px 4px 4px 4px;
-moz-border-radius: 4px 4px 4px 4px;
-webkit-border-radius: 4px 4px 4px 4px;
border-radius: 4px 4px 4px 4px;
-moz-border-radius: 4px 4px 4px 4px;
-webkit-border-radius: 4px 4px 4px 4px;
border-radius: 4px 4px 4px 4px;
border: 1px solid #81bb38;
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;
-moz-border-radius: 4px 4px 4px 4px;
-webkit-border-radius: 4px 4px 4px 4px;
border-radius: 4px 4px 4px 4px;
-moz-border-radius: 4px 4px 4px 4px;
-webkit-border-radius: 4px 4px 4px 4px;
border-radius: 4px 4px 4px 4px;
-moz-border-radius: 4px 4px 4px 4px;
-webkit-border-radius: 4px 4px 4px 4px;
border-radius: 4px 4px 4px 4px;
-moz-border-radius: 4px 4px 4px 4px;
-webkit-border-radius: 4px 4px 4px 4px;
border-radius: 4px 4px 4px 4px;
-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_fail span {
line-height: 40px;
font-size: 11px;
background-repeat: no-repeat;
background-position: 10px center;
font-weight: bold;
text-decoration: none;
text-transform: uppercase;
line-height: 40px;
font-size: 11px;
background-repeat: no-repeat;
background-position: 10px center;
font-weight: bold;
text-decoration: none;
text-transform: uppercase;
background: none;
padding: 0px 0px 0px 15px;
color: #73a334;
line-height: 40px;
font-size: 11px;
background-repeat: no-repeat;
background-position: 10px center;
font-weight: bold;
text-decoration: none;
text-transform: uppercase;
line-height: 40px;
font-size: 11px;
background-repeat: no-repeat;
background-position: 10px center;
font-weight: bold;
text-decoration: none;
text-transform: uppercase;
background: none;
padding: 0px 0px 0px 15px;
color: #73a334;
}
.read_itbutton_fail span:hover {
text-decoration: none;
}
.read_itbutton_fail span:hover {
text-decoration: none;
}
.add_towish {
width: 130px;
height: 30px;
padding: 0px;
margin: 15px 0 15px 0;
vertical-align: baseline;
width: 130px;
height: 30px;
padding: 0px;
margin: 15px 0 15px 0;
vertical-align: baseline;
} }
.add_towish a { .add_towish a {
line-height: 40px; line-height: 40px;
@ -1843,7 +2213,44 @@ div.panelview.side2 > div {
font-weight: bold; font-weight: bold;
text-decoration: none; text-decoration: none;
text-transform: uppercase; text-transform: uppercase;
background-image: url(/static/images/book-panel/add_wish_icon.png); 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;
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;
text-decoration: none;
color: #3d4e53;
}
.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;
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; padding: 8px 5px 8px 21px;
color: #FFFFFF; color: #FFFFFF;
border-top-width: 1px; border-top-width: 1px;
@ -1881,12 +2288,22 @@ div.panelview.side2 > div {
text-decoration: none; text-decoration: none;
color: #3d4e53; color: #3d4e53;
} }
/*more info*/ .white_text p {
line-height: 16px;
max-height: 32px;
overflow: hidden;
}
.moreinfo { .moreinfo {
width: 130px; width: 130px;
height: 30px; height: 30px;
padding: 0px; padding: 0px;
margin: 15px 0 0; margin: 15px 0 0px 0;
vertical-align: baseline;
width: 130px;
height: 30px;
padding: 0px;
margin: 15px 0 0px 0;
vertical-align: baseline;
} }
.moreinfo a { .moreinfo a {
line-height: 40px; line-height: 40px;
@ -1903,9 +2320,8 @@ div.panelview.side2 > div {
font-weight: bold; font-weight: bold;
text-decoration: none; text-decoration: none;
text-transform: uppercase; text-transform: uppercase;
background-image: url(/static/images/book-panel/more_icon.png); background-image: url("/static/images/book-panel/more_icon.png");
padding: 8px 42px 8px 20px; padding: 8px 42px 8px 21px;
padding-left: 20px;
color: #FFFFFF; color: #FFFFFF;
border-top-width: 1px; border-top-width: 1px;
border-bottom-width: 1px; border-bottom-width: 1px;
@ -1926,46 +2342,50 @@ div.panelview.side2 > div {
text-decoration: none; text-decoration: none;
color: #3d4e53; color: #3d4e53;
} }
/*end of the more info/* .moreinfo a {
/*end the 2greenpanel*/ line-height: 40px;
/*2 start*/ font-size: 11px;
.graypanel { background-repeat: no-repeat;
font-family: Arial, Helvetica, sans-serif; background-position: left center;
font-size: 12px; font-weight: bold;
margin: 20px auto; text-decoration: none;
padding: 4px 5px; text-transform: uppercase;
height: 300px; line-height: 40px;
width: 130px; font-size: 11px;
line-height: 16px; background-repeat: no-repeat;
background-color: #edf3f4; background-position: left center;
color: #3d4e53; font-weight: bold;
border: 5px solid #edf3f4; text-decoration: none;
text-transform: uppercase;
background-image: url("/static/images/book-panel/more_icon.png");
padding: 8px 42px 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;
border-top-width: 1px;
border-bottom-width: 1px;
border-top-style: solid;
border-bottom-style: solid;
border-top-color: #FFFFFF;
border-bottom-color: #FFFFFF;
} }
.unglued_white2 { .moreinfo a:hover {
font-size: 12px;
margin: 3px auto;
padding: 5px 0px;
}
.green {
color: #8dc63f;
text-align: left;
}
.graypanel a {
text-decoration: none; text-decoration: none;
color: #3d4e53; color: #3d4e53;
text-decoration: none; text-decoration: none;
color: #3d4e53; color: #3d4e53;
} }
.graypanel a:hover { /* styling of hover state when book has not been unglued, and a bunch of stuff I haven't figured out yet */
color: #8dc63f;
text-decoration: none;
}
.Unglue_itbutton { .Unglue_itbutton {
width: 110px; width: 110px;
height: 40px; height: 40px;
padding: 0px 9px; padding: 0px 9px;
background: #FFFFFF; background: #FFFFFF;
margin: 0px auto; margin: 0px 15px 0px -5px;
-moz-border-radius: 4px 4px 4px 4px; -moz-border-radius: 4px 4px 4px 4px;
-webkit-border-radius: 4px 4px 4px 4px; -webkit-border-radius: 4px 4px 4px 4px;
border-radius: 4px 4px 4px 4px; border-radius: 4px 4px 4px 4px;