diff --git a/core/models.py b/core/models.py index dffe843d..836c4979 100755 --- a/core/models.py +++ b/core/models.py @@ -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 diff --git a/frontend/templates/base.html b/frontend/templates/base.html index 554efc43..ac471e62 100644 --- a/frontend/templates/base.html +++ b/frontend/templates/base.html @@ -67,6 +67,7 @@ Terms and Conditions     About     Contact     + LOCKSS     Blog    

diff --git a/frontend/templates/campaign.html b/frontend/templates/campaign.html new file mode 100644 index 00000000..b2a7876e --- /dev/null +++ b/frontend/templates/campaign.html @@ -0,0 +1,178 @@ +{% extends "base.html" %} +{% block title %} +Campaign for WORK TITLE GOES HERE +{% endblock %} + +{% block extra_head %} + + + + + + +{% endblock %} + +{% block content %} +
+
+
+
+
+ Campaign in Progress:
${{ work.last_campaign.current_total }}/${{ work.last_campaign.target }} +
+
+ {% include "explore.html" %} +
+
+
+
+
+
+ {{ work.title }} +
+
+

{{ work.title }}

+

{{ work.author }}

+

{{ work.editions.all.0.publication_date }}

+
+ + +
+ + +
+
+
{{ work.last_campaign.supporters.count }} Ungluers have pledged ${{ work.last_campaign.current_total }}
+
Support
+
+
+ +
+ + +
+ +
+
+
+

Title

+

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.

+ +

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.

+ +

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.

+ +

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.

+
+
+
+
+ Being Unglued infomation +
+
+
+
+ Want to Unglue infomation +
+
+
+
+ Want to Unglue infomation xxx +
+
+
+
+
+
+ +
+
+ +{% endblock %} \ No newline at end of file diff --git a/frontend/templates/explore.html b/frontend/templates/explore.html index bde4286f..f70bf8c3 100644 --- a/frontend/templates/explore.html +++ b/frontend/templates/explore.html @@ -1,4 +1,3 @@ -

Explore

@@ -24,4 +23,3 @@
-
diff --git a/frontend/templates/search.html b/frontend/templates/search.html index 762b6544..c78d4ec9 100644 --- a/frontend/templates/search.html +++ b/frontend/templates/search.html @@ -10,8 +10,9 @@ {% block content %}
- -{% include "explore.html" %} +
+ {% include "explore.html" %} +
diff --git a/frontend/templates/supporter.html b/frontend/templates/supporter.html index 92457823..a14fb365 100644 --- a/frontend/templates/supporter.html +++ b/frontend/templates/supporter.html @@ -183,8 +183,9 @@ how do I integrate the your wishlist thing with the tabs thing?
- -{% include "explore.html" %} +
+ {% include "explore.html" %} +
@@ -232,10 +233,10 @@ how do I integrate the your wishlist thing with the tabs thing? {% endifequal %} {% else %} {% for work in wishlist.works.all %} - - {% if work.last_campaign_status == 'SUCCESSFUL' %} + + {% if work.last_campaign.status == 'SUCCESSFUL' %}
- {% else %}{% if work.last_campaign_status == 'ACTIVE' %} + {% else %}{% if work.last_campaign.status == 'ACTIVE' %}
{% else %}
@@ -267,7 +268,7 @@ how do I integrate the your wishlist thing with the tabs thing?
{% endif %}{% endif %}{% endifequal %}
- {{ work.last_campaign_status }} + {{ work.last_campaign.status }} book list status diff --git a/frontend/templates/supporter_panel.html b/frontend/templates/supporter_panel.html new file mode 100644 index 00000000..5d14dd4e --- /dev/null +++ b/frontend/templates/supporter_panel.html @@ -0,0 +1,306 @@ +{% extends "base.html" %} + +{% block title %} — {{ supporter.username }}{% endblock %} + +{% block extra_head %} + + + + + + + + + + +{% 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 %} + +
+
+
+
+
+
+
+ {% ifequal supporter request.user %} +
+
+ My Settings +
+
+ {% endifequal %} +
+ User avatar + {{ supporter.username }} + {{ date }} + {{ supporter.profile.tagline }} +
+
+ +
+
+
+ {{ backed }} + {{ backing }} + {{ wished }} +
+ I am ungluing +
+
+ {% ifequal supporter request.user %} +
+
+ {% csrf_token %} +
+
+

Your Tagline

+ {{ profile_form.tagline }} + + +
+
+ +
+

Links

+
+ + {{ profile_form.home_url }} +
+
+ + {{ profile_form.twitter_id }} +
+
+
+

Other Stuff

+
+ +
+
+ + +
+
+ +
+
+ {% endifequal %} +
+
+
+
+ +
+
+ +{% endblock %} + +{% block content %} + +
+
+ +{% include "explore.html" %} + +
+
+
+
+ + + +
+
+ {% ifequal wishlist.works.all.count 0 %} + {% ifequal request.user supporter %} +
+ Your wishlist is currently empty.

+ Go ahead and find some books to give to the world, and add them to your Wishlist!

+ We double dog dare you... +
+ {% else %} +
+ It looks like {{ supporter.username }} is just + getting started, and hasn't added anything to their + wishlist just yet.

+ Nudge, nudge, say no more. + {% endifequal %} + {% else %} +
+ {% for work in wishlist.works.all %} + + {% if work.last_campaign.status == 'SUCCESSFUL' %} +
+ {% else %}{% if work.last_campaign.status == 'ACTIVE' %} +
+ {% else %} +
+ {% endif %}{% endif %} +
+
+
+
+ {{ work.title|truncatewords:5 }} +

{{ work.author|truncatewords:3 }}

+

Status: {{ work.last_campaign.status }}

+
+ book list status +

100%

+

+
+ +
+
Unglued! +

Sept 12 2011

+

Raised: $12,000

+
+
Read it Now
+ {% ifequal supporter request.user %} +
+ Remove from Wishlist +
+ {% else %}{% if work in shared_works %} +
+ On Your Wishlist! +
+ {% else %}{% if request.user.is_anonymous %} + + {% else %} +
+ Add to Wishlist +
+ {% endif %}{% endif %}{% endifequal %} + +
Add to Wishlist
+
{{ work.title }} +

{{ work.author }}

+

Status: {{ work.last_campaign.status }}

+
+
More Info
+
+
+
+
+
+
+ {% endfor %} + {% endifequal %} +
+
+
+
+
+
+ +{% endblock %} + diff --git a/frontend/templates/work.html b/frontend/templates/work.html index 5cd7c231..b3b954ff 100644 --- a/frontend/templates/work.html +++ b/frontend/templates/work.html @@ -4,7 +4,9 @@
+
{% include "explore.html" %} +
diff --git a/frontend/urls.py b/frontend/urls.py index 933be13a..b773ea3b 100644 --- a/frontend/urls.py +++ b/frontend/urls.py @@ -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", name="work"), - url(r"^supporter/(?P.+)/$", "supporter", name="supporter"), + url(r"works/(?P.+)/$", "work", name="work"), + url(r"^supporter/(?P.+)/$", "supporter", {'template_name': 'supporter.html'}, name="supporter"), + url(r"^supporter2/(?P.+)/$", "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\d+)/$", "campaign", name="campaign") ) diff --git a/frontend/views.py b/frontend/views.py index 8256a884..66b1d4be 100755 --- a/frontend/views.py +++ b/frontend/views.py @@ -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}) diff --git a/payment/parameters.py b/payment/parameters.py index 3015b36e..9c398206 100644 --- a/payment/parameters.py +++ b/payment/parameters.py @@ -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' diff --git a/static/css/book-panel-unimported.css b/static/css/book-panel-unimported.css new file mode 100644 index 00000000..a0083fac --- /dev/null +++ b/static/css/book-panel-unimported.css @@ -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; + } diff --git a/static/css/campaign.css b/static/css/campaign.css new file mode 100755 index 00000000..4281c08f --- /dev/null +++ b/static/css/campaign.css @@ -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;} \ No newline at end of file diff --git a/static/css/layout.css b/static/css/layout.css index 3d9fa653..3bafd2a0 100644 --- a/static/css/layout.css +++ b/static/css/layout.css @@ -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; } diff --git a/static/css/supporter_layout.css b/static/css/supporter_layout.css index 026a2e60..cafa3ca2 100644 --- a/static/css/supporter_layout.css +++ b/static/css/supporter_layout.css @@ -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;} \ No newline at end of file +a{ font-weight:bold; font-size:13px; text-decoration:none; cursor:pointer;} + +div.content-block-content { + padding-left: 10px; +} + +#tabs { + margin-left: 10px; +} \ No newline at end of file diff --git a/static/images/btn_bg.png b/static/images/btn_bg.png new file mode 100755 index 00000000..bdb7b4f7 Binary files /dev/null and b/static/images/btn_bg.png differ diff --git a/static/images/icon-book0.png b/static/images/icon-book0.png new file mode 100755 index 00000000..3153120a Binary files /dev/null and b/static/images/icon-book0.png differ diff --git a/static/images/icons/email.png b/static/images/icons/email.png new file mode 100755 index 00000000..8a1daa89 Binary files /dev/null and b/static/images/icons/email.png differ diff --git a/static/images/icons/facebook.png b/static/images/icons/facebook.png new file mode 100755 index 00000000..e3e05ea0 Binary files /dev/null and b/static/images/icons/facebook.png differ diff --git a/static/images/icons/google.png b/static/images/icons/google.png new file mode 100755 index 00000000..11010d03 Binary files /dev/null and b/static/images/icons/google.png differ diff --git a/static/images/icons/group.png b/static/images/icons/group.png new file mode 100755 index 00000000..45742541 Binary files /dev/null and b/static/images/icons/group.png differ diff --git a/static/images/icons/r-arrow.png b/static/images/icons/r-arrow.png new file mode 100755 index 00000000..23cf145a Binary files /dev/null and b/static/images/icons/r-arrow.png differ diff --git a/static/images/icons/twitter.png b/static/images/icons/twitter.png new file mode 100755 index 00000000..9f028cdd Binary files /dev/null and b/static/images/icons/twitter.png differ diff --git a/static/images/images/icon-book-37by25-0.png b/static/images/images/icon-book-37by25-0.png new file mode 100755 index 00000000..3ca01221 Binary files /dev/null and b/static/images/images/icon-book-37by25-0.png differ diff --git a/static/images/images/icon-book-37by25-1.png b/static/images/images/icon-book-37by25-1.png new file mode 100755 index 00000000..3ca01221 Binary files /dev/null and b/static/images/images/icon-book-37by25-1.png differ diff --git a/static/images/images/icon-book-37by25-2.png b/static/images/images/icon-book-37by25-2.png new file mode 100755 index 00000000..1e432056 Binary files /dev/null and b/static/images/images/icon-book-37by25-2.png differ diff --git a/static/images/images/icon-book-37by25-3.png b/static/images/images/icon-book-37by25-3.png new file mode 100755 index 00000000..1e432056 Binary files /dev/null and b/static/images/images/icon-book-37by25-3.png differ diff --git a/static/images/images/icon-book-37by25-4.png b/static/images/images/icon-book-37by25-4.png new file mode 100755 index 00000000..0c2ead04 Binary files /dev/null and b/static/images/images/icon-book-37by25-4.png differ diff --git a/static/images/images/icon-book-37by25-5.png b/static/images/images/icon-book-37by25-5.png new file mode 100755 index 00000000..0c2ead04 Binary files /dev/null and b/static/images/images/icon-book-37by25-5.png differ diff --git a/static/images/images/icon-book-37by25-6.png b/static/images/images/icon-book-37by25-6.png new file mode 100755 index 00000000..3cb60ed0 Binary files /dev/null and b/static/images/images/icon-book-37by25-6.png differ diff --git a/static/less/book-panel-unimported.less b/static/less/book-panel-unimported.less new file mode 100644 index 00000000..5bb2cb95 --- /dev/null +++ b/static/less/book-panel-unimported.less @@ -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; + } diff --git a/static/less/book_list-test.css b/static/less/book_list-test.css new file mode 100644 index 00000000..b2f26c20 --- /dev/null +++ b/static/less/book_list-test.css @@ -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; +} diff --git a/static/less/book_list-test.less b/static/less/book_list-test.less new file mode 100644 index 00000000..28607420 --- /dev/null +++ b/static/less/book_list-test.less @@ -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; +} diff --git a/static/less/book_panel_unimported.css b/static/less/book_panel_unimported.css new file mode 100644 index 00000000..7bf9c83b --- /dev/null +++ b/static/less/book_panel_unimported.css @@ -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; +} diff --git a/static/less/book_panel_unimported.less b/static/less/book_panel_unimported.less new file mode 100644 index 00000000..2c36dd28 --- /dev/null +++ b/static/less/book_panel_unimported.less @@ -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; + } diff --git a/static/less/book_panel_unimported_test.css b/static/less/book_panel_unimported_test.css new file mode 100644 index 00000000..03c376a8 --- /dev/null +++ b/static/less/book_panel_unimported_test.css @@ -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; +} diff --git a/static/less/book_panel_unimported_test.less b/static/less/book_panel_unimported_test.less new file mode 100644 index 00000000..2a0734e2 --- /dev/null +++ b/static/less/book_panel_unimported_test.less @@ -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; + } diff --git a/static/less/layout.css b/static/less/layout.css new file mode 100644 index 00000000..09b43c19 --- /dev/null +++ b/static/less/layout.css @@ -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; +} diff --git a/static/less/layout.less b/static/less/layout.less index 38fbe4aa..79589735 100644 --- a/static/less/layout.less +++ b/static/less/layout.less @@ -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... diff --git a/static/less/sitewide.less b/static/less/sitewide.less index 2c6155a3..11ab5a15 100644 --- a/static/less/sitewide.less +++ b/static/less/sitewide.less @@ -258,6 +258,7 @@ div.content-block { div.content-block-content { width:100%; overflow:hidden; + padding-left: 10px; .cols3 .column { width:33.33%; diff --git a/static/less/supporter_layout.less b/static/less/supporter_layout.less index b2669c54..aea7f350 100644 --- a/static/less/supporter_layout.less +++ b/static/less/supporter_layout.less @@ -205,3 +205,11 @@ ul.tabs { text-transform:capitalize; } } + +div.content-block-content { + padding-left: 10px; +} + +#tabs { + margin-left: 10px; +} \ No newline at end of file diff --git a/static/supporter_integration_test.html b/static/supporter_integration_test.html new file mode 100644 index 00000000..b2503649 --- /dev/null +++ b/static/supporter_integration_test.html @@ -0,0 +1,69 @@ + + + + + + + + + + + + + + + + + + +List view +Panel view +
+ +
+
+
+ Book name +
+
+ + Title + +
+
+ James K. Polk +
+
+ Remove from Wishlist +
+
+ Status: Active + + + + book list status +

100%

+

+ +
+
+
+
+
+
+
+
+
+ +