From 0e33932435e55371765ae9d8fc99f0a66788629c Mon Sep 17 00:00:00 2001 From: Andromeda Yelton Date: Mon, 28 Nov 2011 10:13:21 -0500 Subject: [PATCH] improving display of hover state of book panel (still in progress) --- core/tests.py | 2 + frontend/templates/book_panel.html | 2 +- frontend/templates/supporter.html | 2 +- frontend/templates/work.html | 3 +- static/css/book_panel.css | 106 +++++++++++++++-------------- static/less/book_panel.less | 53 +++++++-------- 6 files changed, 86 insertions(+), 82 deletions(-) diff --git a/core/tests.py b/core/tests.py index a83f83c2..fd34a5a6 100755 --- a/core/tests.py +++ b/core/tests.py @@ -133,6 +133,8 @@ class TestBookLoader(TestCase): w = edition.work self.assertEqual(w.first_epub().url, "http://books.google.com/books/download/The_Latin_language.epub?id=U3FXAAAAYAAJ&ie=ISO-8859-1&output=epub&source=gbs_api") self.assertEqual(w.first_pdf().url, "http://books.google.com/books/download/The_Latin_language.pdf?id=U3FXAAAAYAAJ&ie=ISO-8859-1&output=pdf&sig=ACfU3U2yLt3nmTncB8ozxOWUc4iHKUznCA&source=gbs_api") + self.assertEqual(w.first_epub_url(), "http://books.google.com/books/download/The_Latin_language.epub?id=U3FXAAAAYAAJ&ie=ISO-8859-1&output=epub&source=gbs_api") + self.assertEqual(w.first_pdf_url(), "http://books.google.com/books/download/The_Latin_language.pdf?id=U3FXAAAAYAAJ&ie=ISO-8859-1&output=pdf&sig=ACfU3U2yLt3nmTncB8ozxOWUc4iHKUznCA&source=gbs_api") def test_add_no_ebook(self): # this edition lacks an ebook, but we should still be able to load it diff --git a/frontend/templates/book_panel.html b/frontend/templates/book_panel.html index 754ebc82..d9ce0597 100644 --- a/frontend/templates/book_panel.html +++ b/frontend/templates/book_panel.html @@ -36,7 +36,7 @@
Unglue it!
{% endif %} {% ifequal supporter request.user %} -
Remove
+
Remove
{% else %}{% if work in shared_works %}
On Your Wishlist! diff --git a/frontend/templates/supporter.html b/frontend/templates/supporter.html index 37080856..7f2205a8 100644 --- a/frontend/templates/supporter.html +++ b/frontend/templates/supporter.html @@ -9,7 +9,7 @@ - + diff --git a/frontend/templates/work.html b/frontend/templates/work.html index c07641c9..a3b73984 100644 --- a/frontend/templates/work.html +++ b/frontend/templates/work.html @@ -5,7 +5,7 @@ {% block extra_head %} - + @@ -27,7 +27,6 @@ $(document).ready(function(){
{{ work.last_campaign.id }} {{ work.campaigns.0.id }} {% if work.last_campaign %} {% with work.last_campaign_status as status %} - {{ work.last_campaign_status}} {% if status == 'ACTIVE' %} Campaign in Progress:
${{ work.last_campaign.current_total }}/${{ work.last_campaign.target }} {% else %}{% if status == 'SUCCESSFUL' %} diff --git a/static/css/book_panel.css b/static/css/book_panel.css index 98e1c3d9..d23acdea 100644 --- a/static/css/book_panel.css +++ b/static/css/book_panel.css @@ -158,11 +158,12 @@ div.panelview.side2 > div { padding: 10px; height: 295px; background-color: #8dc63f; - color: #ffffff; + color: #fff; position: absolute; top: -5px; left: -10px; } +/* Campaign status text at top of hover state */ .unglued_white { font-size: 12px; margin: 0px auto; @@ -170,6 +171,7 @@ div.panelview.side2 > div { padding: 10px 0px; height: 48px; } +/* White-background action buttons; vary by state of campaign */ .read_itbutton { width: 118px; height: 35px; @@ -222,12 +224,43 @@ div.panelview.side2 > div { .read_itbutton_fail span:hover { text-decoration: none; } +.Unglue_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; +} +.Unglue_itbutton a { + background-image: url("/static/images/book-panel/unglue_icon.png"); + line-height: 40px; + font-size: 11px; + background-repeat: no-repeat; + background-position: 10px center; + font-weight: bold; + text-decoration: none; + text-transform: uppercase; + padding: 0px 0px 0px 25px; + color: #73a334; +} +.Unglue_itbutton a:hover { + text-decoration: none; +} .add_towish { - width: 130px; + width: 120px; height: 30px; padding: 0px; margin: 15px 0 15px 0; - vertical-align: baseline; + border-top-width: 1px; + border-bottom-width: 1px; + border-top-style: solid; + border-bottom-style: solid; + border-top-color: #FFFFFF; + border-bottom-color: #FFFFFF; background-image: url("/static/images/book-panel/add_wish_icon.png"); } .add_towish a { @@ -238,19 +271,14 @@ div.panelview.side2 > div { font-weight: bold; text-decoration: none; text-transform: uppercase; - 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; + padding: 0 5px 0 21px; + color: #FFF; } .add_towish a:hover { text-decoration: none; color: #3d4e53; } +/* title, author */ .white_text { width: 130px; height: 40px; @@ -266,16 +294,23 @@ div.panelview.side2 > div { color: #3d4e53; } .white_text p { + /* necessary to ensure title/author don't overflow onto icons */ + line-height: 16px; max-height: 32px; overflow: hidden; } .moreinfo { - width: 130px; + width: 120px; height: 30px; padding: 0px; - margin: 15px 0 0px 0; - vertical-align: baseline; + margin: 15px 0 0 0; + border-top-width: 1px; + border-bottom-width: 1px; + border-top-style: solid; + border-bottom-style: solid; + border-top-color: #FFFFFF; + border-bottom-color: #FFFFFF; background-image: url("/static/images/book-panel/more_icon.png") no-repeat 10% center; } .moreinfo a { @@ -286,48 +321,19 @@ div.panelview.side2 > div { font-weight: bold; text-decoration: none; text-transform: uppercase; - padding: 8px 42px 8px 21px; - color: #FFFFFF; - border-top-width: 1px; - border-bottom-width: 1px; - border-top-style: solid; - border-bottom-style: solid; - border-top-color: #FFFFFF; - border-bottom-color: #FFFFFF; + padding: 0 0 0 21px; + color: #FFF; } .moreinfo a:hover { text-decoration: none; color: #3d4e53; } +.moreinfo > div { + height: 30px; + line-height: 30px; + padding-bottom: 8px; +} /* styling of hover state when book has not been unglued, and a bunch of stuff I haven't figured out yet */ -.Unglue_itbutton { - width: 110px; - height: 40px; - padding: 0px 9px; - background: #FFFFFF; - margin: 0px 15px 0px -5px; - -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; diff --git a/static/less/book_panel.less b/static/less/book_panel.less index e9b8a143..13060d99 100644 --- a/static/less/book_panel.less +++ b/static/less/book_panel.less @@ -39,7 +39,7 @@ background:#FFFFFF; margin:0px; .border-radius(4px, 4px, 4px, 4px); - border: 1px solid #81bb38; + border: 1px solid #81bb38; } .readit_inner (@padding) { @@ -53,17 +53,16 @@ } .banners (@right, @bottom) { - width:130px; + width:120px; height:30px; padding:0px; margin:15px 0 @bottom 0; - vertical-align: baseline; + .greenpanelactionborders; a { .greenpanelactionitems(left); - padding:8px @right 8px 21px; - color:#FFFFFF; - .greenpanelactionborders; + padding:0 @right 0 21px; + color:#FFF; &:hover { .panelhoverlink;} } @@ -200,11 +199,13 @@ div.panelview.side2 > div { padding: 10px; height: 295px; background-color: @green; - color: #ffffff; + color: #fff; position:absolute; top:-5px; left:-10px; } + +/* Campaign status text at top of hover state */ .unglued_white { font-size: 12px; margin: 0px auto; @@ -213,6 +214,7 @@ div.panelview.side2 > div { height:48px; } +/* White-background action buttons; vary by state of campaign */ .read_itbutton { .readit; a { @@ -230,6 +232,14 @@ div.panelview.side2 > div { } } +.Unglue_itbutton{ + .readit; + + a { + background-image: url("@{image-base}book-panel/unglue_icon.png"); + .readit_inner(25px); + } +} .add_towish { .banners(5px, 15px); @@ -237,6 +247,7 @@ div.panelview.side2 > div { } +/* title, author */ .white_text { width:130px; height:40px; @@ -251,6 +262,7 @@ div.panelview.side2 > div { } p { + /* necessary to ensure title/author don't overflow onto icons */ line-height:16px; max-height:32px; overflow: hidden; @@ -258,33 +270,18 @@ div.panelview.side2 > div { } .moreinfo { - .banners(42px, 0px); + .banners(0, 0); background-image: url("@{image-base}book-panel/more_icon.png") no-repeat 10% center; + + > div { + .height(30px); + padding-bottom:8px; + } } /* styling of hover state when book has not been unglued, and a bunch of stuff I haven't figured out yet */ -.Unglue_itbutton{ - width:110px; - height:40px; - padding:0px 9px; - background:#FFFFFF; - margin:0px 15px 0px -5px; - .border-radius(4px, 4px, 4px, 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;