From ba45db0e782ba390cf95fb10883c3ff7d7f59af8 Mon Sep 17 00:00:00 2001 From: Andromeda Yelton Date: Tue, 8 Nov 2011 20:34:15 -0500 Subject: [PATCH 1/5] added live data to panel view hover state; put js that search & supporter share into separate files --- frontend/templates/search.html | 15 +- frontend/templates/supporter.html | 131 +++---- static/css/book_panel.css | 88 +++-- static/js/greenpanel.js | 14 + static/js/tabs.js | 39 ++ static/js/toggle.js | 10 + static/less/book_panel.less | 122 +++--- static/less/layout.css | 606 +++++++++++++++++++++++++++--- 8 files changed, 789 insertions(+), 236 deletions(-) create mode 100644 static/js/greenpanel.js create mode 100644 static/js/tabs.js create mode 100644 static/js/toggle.js diff --git a/frontend/templates/search.html b/frontend/templates/search.html index 4ae5da28..f207ae0c 100644 --- a/frontend/templates/search.html +++ b/frontend/templates/search.html @@ -5,19 +5,8 @@ - - - + + {% endblock %} {% block title %}Search Results{% endblock %} diff --git a/frontend/templates/supporter.html b/frontend/templates/supporter.html index c355f7bd..2ecc91a8 100644 --- a/frontend/templates/supporter.html +++ b/frontend/templates/supporter.html @@ -8,81 +8,12 @@ - + - - - - - - - + + + {% endblock %} @@ -273,19 +204,53 @@ how do I integrate the your wishlist thing with the tabs thing?
-
Unglued! -

Sept 12 2011

-

Raised: $12,000

+
+ {% if work.first_ebook %} + AVAILABLE! + {% else %} + {{ work.last_campaign_status }} + {% if work.last_campaign_status == 'SUCCESSFUL' %} +

On: {{ work.last_campaign.deadline|date:"M d, Y" }}

+

Raised: {{ work.last_campaign.current_total }}

+ {% else %}{% if work.last_campaign_status == 'ACTIVE' %} +

Until: {{ work.last_campaign.deadline|date:"M d, Y" }}

+

Raised: {{ work.last_campaign.current_total }}

+ {% else %}{% if work.last_campaign_status == 'INITIALIZED' %} +

Campaign coming soon!

+ {% else %}{% if work.last_campaign_status == 'SUSPENDED' %} +

This campaign was suspended on {{ work.last_campaign.suspended }}.

+ {% else %}{% if work.last_campaign_status == 'WITHDRAWN' %} +

This campaign was withdrawn on {{ work.last_campaign.withdrawn }}.

+ {% else %}{% if work.last_campaign_status == 'UNSUCCESSFUL' %} +

{{ work.last_campaign.deadline }}

+

Watch for a new campaign.

+ {% endif %}{% endif %}{% endif %}{% endif %}{% endif %}{% endif %}{% endif %}
-
Read it Now
-
Add to Wishlist
-
Nineteen Eighty-Four -

George Orwell

-

Genre: Sci-Fi

-

Status: In Progress

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

{{ work.title }}

+

{{ work.author }}

- More Info + More Info
diff --git a/static/css/book_panel.css b/static/css/book_panel.css index 7fa3ede1..4934dfa2 100644 --- a/static/css/book_panel.css +++ b/static/css/book_panel.css @@ -30,6 +30,17 @@ text-decoration: none; color: #3d4e53; } +.readit { + width: 118px; + height: 35px; + padding: 0px 0px; + background: #FFFFFF; + margin: 0px; + -moz-border-radius: 4px 4px 4px 4px; + -webkit-border-radius: 4px 4px 4px 4px; + border-radius: 4px 4px 4px 4px; + border: 1px solid #81bb38; +} @charset "utf-8"; * { padding: 0px; @@ -65,18 +76,6 @@ color: #3d4e53; border: 5px solid #edf3f4; position: relative; - /* might need this for panel hover state; don't want it for nonhover. hm. - a { - color: @dark-green; - text-decoration: none; - - &:hover { - color: @green; - text-decoration: none; - } - } -*/ - } .panelview.book-list:hover { color: #3d4e53; @@ -162,6 +161,7 @@ div.panelview.side2 > div { margin: 0px auto; margin-bottom: 5px; padding: 10px 0px; + height: 48px; } .read_itbutton { width: 118px; @@ -182,20 +182,46 @@ div.panelview.side2 > div { font-weight: bold; text-decoration: none; text-transform: uppercase; - background: url(/static/images/book-panel/book_icon.png) no-repeat 10% center; + background: "/static/images/book-panel/book_icon.png) no-repeat 10% center"; padding: 0px 0px 0px 30px; color: #73a334; } .read_itbutton a:hover { text-decoration: none; } -.add_towish { - width: 125px; - height: 30px; +.read_itbutton_fail { + width: 118px; + height: 35px; padding: 0px 0px; - margin: 15px auto; + background: #FFFFFF; + margin: 0px; + -moz-border-radius: 4px 4px 4px 4px; + -webkit-border-radius: 4px 4px 4px 4px; + border-radius: 4px 4px 4px 4px; + border: 1px solid #81bb38; } -.add_towish a { +.read_itbutton_fail span { + line-height: 40px; + font-size: 11px; + background-repeat: no-repeat; + background-position: 10px center; + font-weight: bold; + text-decoration: none; + text-transform: uppercase; + background: none; + padding: 0px 0px 0px 15px; + color: #73a334; +} +.read_itbutton_fail span:hover { + text-decoration: none; +} +.add_towish { + width: 130px; + height: 30px; + padding: 0px; + margin: 15px 0 0; +} +.add_towish div { line-height: 40px; font-size: 11px; background-repeat: no-repeat; @@ -203,8 +229,8 @@ div.panelview.side2 > div { 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; + background-image: url("/static/images/book-panel/add_wish_icon.png"); + padding: 0px 5px 12px 20px; color: #FFFFFF; border-top-width: 1px; border-bottom-width: 1px; @@ -212,8 +238,11 @@ div.panelview.side2 > div { border-bottom-style: solid; border-top-color: #FFFFFF; border-bottom-color: #FFFFFF; + overflow: visible; + width: 75px; + height: 24px; } -.add_towish a:hover { +.add_towish div:hover { text-decoration: none; color: #3d4e53; } @@ -231,6 +260,11 @@ div.panelview.side2 > div { text-decoration: none; color: #3d4e53; } +.white_text p { + line-height: 16px; + max-height: 32px; + overflow: hidden; +} /*more info*/ .moreinfo { width: 130px; @@ -238,7 +272,7 @@ div.panelview.side2 > div { padding: 0px; margin: 15px 0 0; } -.moreinfo a { +.moreinfo div { line-height: 40px; font-size: 11px; background-repeat: no-repeat; @@ -246,9 +280,8 @@ div.panelview.side2 > div { 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; + background-image: url("/static/images/book-panel/more_icon.png"); + padding: 0px 42px 12px 20px; color: #FFFFFF; border-top-width: 1px; border-bottom-width: 1px; @@ -256,8 +289,11 @@ div.panelview.side2 > div { border-bottom-style: solid; border-top-color: #FFFFFF; border-bottom-color: #FFFFFF; + overflow: visible; + width: 75px; + height: 24px; } -.moreinfo a:hover { +.moreinfo div:hover { text-decoration: none; color: #3d4e53; } diff --git a/static/js/greenpanel.js b/static/js/greenpanel.js new file mode 100644 index 00000000..1f2d6178 --- /dev/null +++ b/static/js/greenpanel.js @@ -0,0 +1,14 @@ + $(document).ready(function(){ + $('.book-list').bind("mouseenter", (function() + { + $(this).removeClass('side1').addClass('side2'); + $(this).children('.panelback').removeClass('side2').addClass('side1'); + })); + + $('.book-list').bind("mouseleave", (function() + { + $(this).children('.panelback').removeClass('side1').addClass('side2'); + $(this).removeClass('side2').addClass('side1'); + })); + + }); diff --git a/static/js/tabs.js b/static/js/tabs.js new file mode 100644 index 00000000..c6d9a578 --- /dev/null +++ b/static/js/tabs.js @@ -0,0 +1,39 @@ + var $j = jQuery.noConflict(); + $j(document).ready(function(){ + $j('.user-block-hide').hide(); + $j('.user-block1 a').click( + function() { + $j(this).toggleClass("active"); + $j(".user-block-hide").slideToggle(300); + } + ); + $j('.tabs1').click(function(){ + $j('.tabs').find('.active').removeClass('active'); + $j(this).addClass('active'); + $j('.content-block-content').find('.active').removeClass('active'); + $j('.tabs-1').addClass('active').show(300); + $j('.tabs-2').hide(200); + $j('.tabs-3').hide(200); + }); + $j('.tabs2').click(function(){ + $j('.tabs').find('.active').removeClass('active'); + $j(this).addClass('active'); + $j('.content-block-content').find('.active').removeClass('active'); + $j('.tabs-2').addClass('active').show(300); + $j('.tabs-1').hide(200); + $j('.tabs-3').hide(200); + }); + $j('.tabs3').click(function(){ + $j('.tabs').find('.active').removeClass('active'); + $j(this).addClass('active'); + $j('.content-block-content').find('.active').removeClass('active'); + $j('.tabs-3').addClass('active').show(300); + $j('.tabs-2').hide(200); + $j('.tabs-1').hide(200); + }); + $j('.empty-wishlist span.bounce-search').click(function(){ + $j('div.js-search-inner').effect("bounce", 500, function() { + $j('div.js-search-inner input[type="text"]').focus(); + }); + }); + }); \ No newline at end of file diff --git a/static/js/toggle.js b/static/js/toggle.js new file mode 100644 index 00000000..c5983aa7 --- /dev/null +++ b/static/js/toggle.js @@ -0,0 +1,10 @@ +/* Beware of fadeIn/fadeOut jQuery animations; they add an inline "display: block" +which overrides display: none in the stylesheet. Sneaky! */ +$(document).ready(function(){ + $('#toggle-list').click(function(){ + $('.panelview').addClass("listview").removeClass("panelview"); + }); + $('#toggle-panel').click(function(){ + $('.listview').addClass("panelview").removeClass("listview"); + }); +}); \ No newline at end of file diff --git a/static/less/book_panel.less b/static/less/book_panel.less index 3f5b0e9b..9ca26383 100644 --- a/static/less/book_panel.less +++ b/static/less/book_panel.less @@ -32,6 +32,47 @@ color:@text-blue; } +.readit { + width:118px; + height:35px; + padding:0px 0px; + background:#FFFFFF; + margin:0px; + .border-radius(4px, 4px, 4px, 4px); + border: 1px solid #81bb38; +} + +.readit_inner (@image, @padding) { + .greenpanelactionitems(10px); + background: @image; + padding:0px 0px 0px @padding; + color:@dark-green; + + &:hover { + text-decoration:none; + } +} + +.banners (@image, @right) { + width:130px; + height:30px; + padding:0px; + margin:15px 0 0; + + div { + .greenpanelactionitems(left); + background-image: url(@image); + padding:0px @right 12px 20px; + color:#FFFFFF; + .greenpanelactionborders; + overflow: visible; + width: 75px; + height: 24px; + + &:hover { .panelhoverlink;} + } +} + @charset "utf-8"; *{ padding:0px; @@ -69,7 +110,6 @@ color: @text-blue; border: 5px solid @pale-blue; position: relative; -// float: left; &:hover { color: @text-blue; @@ -79,18 +119,6 @@ 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; - } - } -*/ } .panelview { @@ -182,45 +210,27 @@ div.panelview.side2 > div { margin: 0px auto; margin-bottom:5px; padding: 10px 0px; + height:48px; } .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 10% center; - padding:0px 0px 0px 30px; - color:@dark-green; - - &:hover { - text-decoration:none; - } - } + .readit; + a { + .readit_inner("/static/images/book-panel/book_icon.png) no-repeat 10% center", 30px); + } +} + +.read_itbutton_fail { + .readit; + + span { + .readit_inner(none, 15px); + } } .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;} - } + .banners("/static/images/book-panel/add_wish_icon.png", 5px); } .white_text { @@ -235,25 +245,17 @@ div.panelview.side2 > div { &:hover { .panelhoverlink;} } + + p { + line-height:16px; + max-height:32px; + overflow: hidden; + } } /*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;} - } + .banners("/static/images/book-panel/more_icon.png", 42px); } diff --git a/static/less/layout.css b/static/less/layout.css index 0e759968..432bd191 100644 --- a/static/less/layout.css +++ b/static/less/layout.css @@ -347,6 +347,32 @@ div.content-block-content { text-decoration: none; color: #3d4e53; } +.readit { + width: 118px; + height: 35px; + padding: 0px 0px; + background: #FFFFFF; + margin: 0px; + -moz-border-radius: 4px 4px 4px 4px; + -webkit-border-radius: 4px 4px 4px 4px; + border-radius: 4px 4px 4px 4px; + -moz-border-radius: 4px 4px 4px 4px; + -webkit-border-radius: 4px 4px 4px 4px; + border-radius: 4px 4px 4px 4px; + -moz-border-radius: 4px 4px 4px 4px; + -webkit-border-radius: 4px 4px 4px 4px; + border-radius: 4px 4px 4px 4px; + -moz-border-radius: 4px 4px 4px 4px; + -webkit-border-radius: 4px 4px 4px 4px; + border-radius: 4px 4px 4px 4px; + -moz-border-radius: 4px 4px 4px 4px; + -webkit-border-radius: 4px 4px 4px 4px; + border-radius: 4px 4px 4px 4px; + -moz-border-radius: 4px 4px 4px 4px; + -webkit-border-radius: 4px 4px 4px 4px; + border-radius: 4px 4px 4px 4px; + border: 1px solid #81bb38; +} @charset "utf-8"; * { padding: 0px; @@ -386,18 +412,6 @@ div.content-block-content { color: #3d4e53; border: 5px solid #edf3f4; position: relative; - /* might need this for panel hover state; don't want it for nonhover. hm. - a { - color: @dark-green; - text-decoration: none; - - &:hover { - color: @green; - text-decoration: none; - } - } -*/ - } .panelview.book-list:hover { color: #3d4e53; @@ -487,6 +501,7 @@ div.panelview.side2 > div { margin: 0px auto; margin-bottom: 5px; padding: 10px 0px; + height: 48px; } .read_itbutton { width: 118px; @@ -513,6 +528,30 @@ div.panelview.side2 > div { -webkit-border-radius: 4px 4px 4px 4px; border-radius: 4px 4px 4px 4px; border: 1px solid #81bb38; + width: 118px; + height: 35px; + padding: 0px 0px; + background: #FFFFFF; + margin: 0px; + -moz-border-radius: 4px 4px 4px 4px; + -webkit-border-radius: 4px 4px 4px 4px; + border-radius: 4px 4px 4px 4px; + -moz-border-radius: 4px 4px 4px 4px; + -webkit-border-radius: 4px 4px 4px 4px; + border-radius: 4px 4px 4px 4px; + -moz-border-radius: 4px 4px 4px 4px; + -webkit-border-radius: 4px 4px 4px 4px; + border-radius: 4px 4px 4px 4px; + -moz-border-radius: 4px 4px 4px 4px; + -webkit-border-radius: 4px 4px 4px 4px; + border-radius: 4px 4px 4px 4px; + -moz-border-radius: 4px 4px 4px 4px; + -webkit-border-radius: 4px 4px 4px 4px; + border-radius: 4px 4px 4px 4px; + -moz-border-radius: 4px 4px 4px 4px; + -webkit-border-radius: 4px 4px 4px 4px; + border-radius: 4px 4px 4px 4px; + border: 1px solid #81bb38; } .read_itbutton a { line-height: 40px; @@ -529,20 +568,136 @@ div.panelview.side2 > div { font-weight: bold; text-decoration: none; text-transform: uppercase; - background: url(/static/images/book-panel/book_icon.png) no-repeat 10% center; + background: "/static/images/book-panel/book_icon.png) no-repeat 10% center"; + padding: 0px 0px 0px 30px; + color: #73a334; + line-height: 40px; + font-size: 11px; + background-repeat: no-repeat; + background-position: 10px center; + font-weight: bold; + text-decoration: none; + text-transform: uppercase; + line-height: 40px; + font-size: 11px; + background-repeat: no-repeat; + background-position: 10px center; + font-weight: bold; + text-decoration: none; + text-transform: uppercase; + background: "/static/images/book-panel/book_icon.png) no-repeat 10% center"; padding: 0px 0px 0px 30px; color: #73a334; } .read_itbutton a:hover { text-decoration: none; } -.add_towish { - width: 125px; - height: 30px; - padding: 0px 0px; - margin: 15px auto; +.read_itbutton a:hover { + text-decoration: none; } -.add_towish a { +.read_itbutton_fail { + width: 118px; + height: 35px; + padding: 0px 0px; + background: #FFFFFF; + margin: 0px; + -moz-border-radius: 4px 4px 4px 4px; + -webkit-border-radius: 4px 4px 4px 4px; + border-radius: 4px 4px 4px 4px; + -moz-border-radius: 4px 4px 4px 4px; + -webkit-border-radius: 4px 4px 4px 4px; + border-radius: 4px 4px 4px 4px; + -moz-border-radius: 4px 4px 4px 4px; + -webkit-border-radius: 4px 4px 4px 4px; + border-radius: 4px 4px 4px 4px; + -moz-border-radius: 4px 4px 4px 4px; + -webkit-border-radius: 4px 4px 4px 4px; + border-radius: 4px 4px 4px 4px; + -moz-border-radius: 4px 4px 4px 4px; + -webkit-border-radius: 4px 4px 4px 4px; + border-radius: 4px 4px 4px 4px; + -moz-border-radius: 4px 4px 4px 4px; + -webkit-border-radius: 4px 4px 4px 4px; + border-radius: 4px 4px 4px 4px; + border: 1px solid #81bb38; + width: 118px; + height: 35px; + padding: 0px 0px; + background: #FFFFFF; + margin: 0px; + -moz-border-radius: 4px 4px 4px 4px; + -webkit-border-radius: 4px 4px 4px 4px; + border-radius: 4px 4px 4px 4px; + -moz-border-radius: 4px 4px 4px 4px; + -webkit-border-radius: 4px 4px 4px 4px; + border-radius: 4px 4px 4px 4px; + -moz-border-radius: 4px 4px 4px 4px; + -webkit-border-radius: 4px 4px 4px 4px; + border-radius: 4px 4px 4px 4px; + -moz-border-radius: 4px 4px 4px 4px; + -webkit-border-radius: 4px 4px 4px 4px; + border-radius: 4px 4px 4px 4px; + -moz-border-radius: 4px 4px 4px 4px; + -webkit-border-radius: 4px 4px 4px 4px; + border-radius: 4px 4px 4px 4px; + -moz-border-radius: 4px 4px 4px 4px; + -webkit-border-radius: 4px 4px 4px 4px; + border-radius: 4px 4px 4px 4px; + border: 1px solid #81bb38; +} +.read_itbutton_fail span { + line-height: 40px; + font-size: 11px; + background-repeat: no-repeat; + background-position: 10px center; + font-weight: bold; + text-decoration: none; + text-transform: uppercase; + line-height: 40px; + font-size: 11px; + background-repeat: no-repeat; + background-position: 10px center; + font-weight: bold; + text-decoration: none; + text-transform: uppercase; + background: none; + padding: 0px 0px 0px 15px; + color: #73a334; + line-height: 40px; + font-size: 11px; + background-repeat: no-repeat; + background-position: 10px center; + font-weight: bold; + text-decoration: none; + text-transform: uppercase; + line-height: 40px; + font-size: 11px; + background-repeat: no-repeat; + background-position: 10px center; + font-weight: bold; + text-decoration: none; + text-transform: uppercase; + background: none; + padding: 0px 0px 0px 15px; + color: #73a334; +} +.read_itbutton_fail span:hover { + text-decoration: none; +} +.read_itbutton_fail span:hover { + text-decoration: none; +} +.add_towish { + width: 130px; + height: 30px; + padding: 0px; + margin: 15px 0 0; + width: 130px; + height: 30px; + padding: 0px; + margin: 15px 0 0; +} +.add_towish div { line-height: 40px; font-size: 11px; background-repeat: no-repeat; @@ -557,8 +712,8 @@ div.panelview.side2 > div { 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; + background-image: url("/static/images/book-panel/add_wish_icon.png"); + padding: 0px 5px 12px 20px; color: #FFFFFF; border-top-width: 1px; border-bottom-width: 1px; @@ -572,8 +727,51 @@ div.panelview.side2 > div { border-bottom-style: solid; border-top-color: #FFFFFF; border-bottom-color: #FFFFFF; + overflow: visible; + width: 75px; + height: 24px; } -.add_towish a:hover { +.add_towish div:hover { + text-decoration: none; + color: #3d4e53; + text-decoration: none; + color: #3d4e53; +} +.add_towish div { + line-height: 40px; + font-size: 11px; + background-repeat: no-repeat; + background-position: left center; + font-weight: bold; + text-decoration: none; + text-transform: uppercase; + line-height: 40px; + font-size: 11px; + background-repeat: no-repeat; + background-position: left center; + font-weight: bold; + text-decoration: none; + text-transform: uppercase; + background-image: url("/static/images/book-panel/add_wish_icon.png"); + padding: 0px 5px 12px 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; + border-top-width: 1px; + border-bottom-width: 1px; + border-top-style: solid; + border-bottom-style: solid; + border-top-color: #FFFFFF; + border-bottom-color: #FFFFFF; + overflow: visible; + width: 75px; + height: 24px; +} +.add_towish div:hover { text-decoration: none; color: #3d4e53; text-decoration: none; @@ -595,14 +793,23 @@ div.panelview.side2 > div { text-decoration: none; color: #3d4e53; } +.white_text p { + line-height: 16px; + max-height: 32px; + overflow: hidden; +} /*more info*/ .moreinfo { width: 130px; height: 30px; padding: 0px; margin: 15px 0 0; + width: 130px; + height: 30px; + padding: 0px; + margin: 15px 0 0; } -.moreinfo a { +.moreinfo div { line-height: 40px; font-size: 11px; background-repeat: no-repeat; @@ -617,9 +824,8 @@ div.panelview.side2 > div { 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; + background-image: url("/static/images/book-panel/more_icon.png"); + padding: 0px 42px 12px 20px; color: #FFFFFF; border-top-width: 1px; border-bottom-width: 1px; @@ -633,8 +839,51 @@ div.panelview.side2 > div { border-bottom-style: solid; border-top-color: #FFFFFF; border-bottom-color: #FFFFFF; + overflow: visible; + width: 75px; + height: 24px; } -.moreinfo a:hover { +.moreinfo div:hover { + text-decoration: none; + color: #3d4e53; + text-decoration: none; + color: #3d4e53; +} +.moreinfo div { + line-height: 40px; + font-size: 11px; + background-repeat: no-repeat; + background-position: left center; + font-weight: bold; + text-decoration: none; + text-transform: uppercase; + line-height: 40px; + font-size: 11px; + background-repeat: no-repeat; + background-position: left center; + font-weight: bold; + text-decoration: none; + text-transform: uppercase; + background-image: url("/static/images/book-panel/more_icon.png"); + padding: 0px 42px 12px 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; + border-top-width: 1px; + border-bottom-width: 1px; + border-top-style: solid; + border-bottom-style: solid; + border-top-color: #FFFFFF; + border-bottom-color: #FFFFFF; + overflow: visible; + width: 75px; + height: 24px; +} +.moreinfo div:hover { text-decoration: none; color: #3d4e53; text-decoration: none; @@ -1633,6 +1882,32 @@ div.content-block-content { text-decoration: none; color: #3d4e53; } +.readit { + width: 118px; + height: 35px; + padding: 0px 0px; + background: #FFFFFF; + margin: 0px; + -moz-border-radius: 4px 4px 4px 4px; + -webkit-border-radius: 4px 4px 4px 4px; + border-radius: 4px 4px 4px 4px; + -moz-border-radius: 4px 4px 4px 4px; + -webkit-border-radius: 4px 4px 4px 4px; + border-radius: 4px 4px 4px 4px; + -moz-border-radius: 4px 4px 4px 4px; + -webkit-border-radius: 4px 4px 4px 4px; + border-radius: 4px 4px 4px 4px; + -moz-border-radius: 4px 4px 4px 4px; + -webkit-border-radius: 4px 4px 4px 4px; + border-radius: 4px 4px 4px 4px; + -moz-border-radius: 4px 4px 4px 4px; + -webkit-border-radius: 4px 4px 4px 4px; + border-radius: 4px 4px 4px 4px; + -moz-border-radius: 4px 4px 4px 4px; + -webkit-border-radius: 4px 4px 4px 4px; + border-radius: 4px 4px 4px 4px; + border: 1px solid #81bb38; +} @charset "utf-8"; * { padding: 0px; @@ -1672,18 +1947,6 @@ div.content-block-content { color: #3d4e53; border: 5px solid #edf3f4; position: relative; - /* might need this for panel hover state; don't want it for nonhover. hm. - a { - color: @dark-green; - text-decoration: none; - - &:hover { - color: @green; - text-decoration: none; - } - } -*/ - } .panelview.book-list:hover { color: #3d4e53; @@ -1773,6 +2036,7 @@ div.panelview.side2 > div { margin: 0px auto; margin-bottom: 5px; padding: 10px 0px; + height: 48px; } .read_itbutton { width: 118px; @@ -1799,6 +2063,30 @@ div.panelview.side2 > div { -webkit-border-radius: 4px 4px 4px 4px; border-radius: 4px 4px 4px 4px; border: 1px solid #81bb38; + width: 118px; + height: 35px; + padding: 0px 0px; + background: #FFFFFF; + margin: 0px; + -moz-border-radius: 4px 4px 4px 4px; + -webkit-border-radius: 4px 4px 4px 4px; + border-radius: 4px 4px 4px 4px; + -moz-border-radius: 4px 4px 4px 4px; + -webkit-border-radius: 4px 4px 4px 4px; + border-radius: 4px 4px 4px 4px; + -moz-border-radius: 4px 4px 4px 4px; + -webkit-border-radius: 4px 4px 4px 4px; + border-radius: 4px 4px 4px 4px; + -moz-border-radius: 4px 4px 4px 4px; + -webkit-border-radius: 4px 4px 4px 4px; + border-radius: 4px 4px 4px 4px; + -moz-border-radius: 4px 4px 4px 4px; + -webkit-border-radius: 4px 4px 4px 4px; + border-radius: 4px 4px 4px 4px; + -moz-border-radius: 4px 4px 4px 4px; + -webkit-border-radius: 4px 4px 4px 4px; + border-radius: 4px 4px 4px 4px; + border: 1px solid #81bb38; } .read_itbutton a { line-height: 40px; @@ -1815,20 +2103,136 @@ div.panelview.side2 > div { font-weight: bold; text-decoration: none; text-transform: uppercase; - background: url(/static/images/book-panel/book_icon.png) no-repeat 10% center; + background: "/static/images/book-panel/book_icon.png) no-repeat 10% center"; + padding: 0px 0px 0px 30px; + color: #73a334; + line-height: 40px; + font-size: 11px; + background-repeat: no-repeat; + background-position: 10px center; + font-weight: bold; + text-decoration: none; + text-transform: uppercase; + line-height: 40px; + font-size: 11px; + background-repeat: no-repeat; + background-position: 10px center; + font-weight: bold; + text-decoration: none; + text-transform: uppercase; + background: "/static/images/book-panel/book_icon.png) no-repeat 10% center"; padding: 0px 0px 0px 30px; color: #73a334; } .read_itbutton a:hover { text-decoration: none; } -.add_towish { - width: 125px; - height: 30px; - padding: 0px 0px; - margin: 15px auto; +.read_itbutton a:hover { + text-decoration: none; } -.add_towish a { +.read_itbutton_fail { + width: 118px; + height: 35px; + padding: 0px 0px; + background: #FFFFFF; + margin: 0px; + -moz-border-radius: 4px 4px 4px 4px; + -webkit-border-radius: 4px 4px 4px 4px; + border-radius: 4px 4px 4px 4px; + -moz-border-radius: 4px 4px 4px 4px; + -webkit-border-radius: 4px 4px 4px 4px; + border-radius: 4px 4px 4px 4px; + -moz-border-radius: 4px 4px 4px 4px; + -webkit-border-radius: 4px 4px 4px 4px; + border-radius: 4px 4px 4px 4px; + -moz-border-radius: 4px 4px 4px 4px; + -webkit-border-radius: 4px 4px 4px 4px; + border-radius: 4px 4px 4px 4px; + -moz-border-radius: 4px 4px 4px 4px; + -webkit-border-radius: 4px 4px 4px 4px; + border-radius: 4px 4px 4px 4px; + -moz-border-radius: 4px 4px 4px 4px; + -webkit-border-radius: 4px 4px 4px 4px; + border-radius: 4px 4px 4px 4px; + border: 1px solid #81bb38; + width: 118px; + height: 35px; + padding: 0px 0px; + background: #FFFFFF; + margin: 0px; + -moz-border-radius: 4px 4px 4px 4px; + -webkit-border-radius: 4px 4px 4px 4px; + border-radius: 4px 4px 4px 4px; + -moz-border-radius: 4px 4px 4px 4px; + -webkit-border-radius: 4px 4px 4px 4px; + border-radius: 4px 4px 4px 4px; + -moz-border-radius: 4px 4px 4px 4px; + -webkit-border-radius: 4px 4px 4px 4px; + border-radius: 4px 4px 4px 4px; + -moz-border-radius: 4px 4px 4px 4px; + -webkit-border-radius: 4px 4px 4px 4px; + border-radius: 4px 4px 4px 4px; + -moz-border-radius: 4px 4px 4px 4px; + -webkit-border-radius: 4px 4px 4px 4px; + border-radius: 4px 4px 4px 4px; + -moz-border-radius: 4px 4px 4px 4px; + -webkit-border-radius: 4px 4px 4px 4px; + border-radius: 4px 4px 4px 4px; + border: 1px solid #81bb38; +} +.read_itbutton_fail span { + line-height: 40px; + font-size: 11px; + background-repeat: no-repeat; + background-position: 10px center; + font-weight: bold; + text-decoration: none; + text-transform: uppercase; + line-height: 40px; + font-size: 11px; + background-repeat: no-repeat; + background-position: 10px center; + font-weight: bold; + text-decoration: none; + text-transform: uppercase; + background: none; + padding: 0px 0px 0px 15px; + color: #73a334; + line-height: 40px; + font-size: 11px; + background-repeat: no-repeat; + background-position: 10px center; + font-weight: bold; + text-decoration: none; + text-transform: uppercase; + line-height: 40px; + font-size: 11px; + background-repeat: no-repeat; + background-position: 10px center; + font-weight: bold; + text-decoration: none; + text-transform: uppercase; + background: none; + padding: 0px 0px 0px 15px; + color: #73a334; +} +.read_itbutton_fail span:hover { + text-decoration: none; +} +.read_itbutton_fail span:hover { + text-decoration: none; +} +.add_towish { + width: 130px; + height: 30px; + padding: 0px; + margin: 15px 0 0; + width: 130px; + height: 30px; + padding: 0px; + margin: 15px 0 0; +} +.add_towish div { line-height: 40px; font-size: 11px; background-repeat: no-repeat; @@ -1843,8 +2247,8 @@ div.panelview.side2 > div { 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; + background-image: url("/static/images/book-panel/add_wish_icon.png"); + padding: 0px 5px 12px 20px; color: #FFFFFF; border-top-width: 1px; border-bottom-width: 1px; @@ -1858,8 +2262,51 @@ div.panelview.side2 > div { border-bottom-style: solid; border-top-color: #FFFFFF; border-bottom-color: #FFFFFF; + overflow: visible; + width: 75px; + height: 24px; } -.add_towish a:hover { +.add_towish div:hover { + text-decoration: none; + color: #3d4e53; + text-decoration: none; + color: #3d4e53; +} +.add_towish div { + line-height: 40px; + font-size: 11px; + background-repeat: no-repeat; + background-position: left center; + font-weight: bold; + text-decoration: none; + text-transform: uppercase; + line-height: 40px; + font-size: 11px; + background-repeat: no-repeat; + background-position: left center; + font-weight: bold; + text-decoration: none; + text-transform: uppercase; + background-image: url("/static/images/book-panel/add_wish_icon.png"); + padding: 0px 5px 12px 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; + border-top-width: 1px; + border-bottom-width: 1px; + border-top-style: solid; + border-bottom-style: solid; + border-top-color: #FFFFFF; + border-bottom-color: #FFFFFF; + overflow: visible; + width: 75px; + height: 24px; +} +.add_towish div:hover { text-decoration: none; color: #3d4e53; text-decoration: none; @@ -1881,14 +2328,23 @@ div.panelview.side2 > div { text-decoration: none; color: #3d4e53; } +.white_text p { + line-height: 16px; + max-height: 32px; + overflow: hidden; +} /*more info*/ .moreinfo { width: 130px; height: 30px; padding: 0px; margin: 15px 0 0; + width: 130px; + height: 30px; + padding: 0px; + margin: 15px 0 0; } -.moreinfo a { +.moreinfo div { line-height: 40px; font-size: 11px; background-repeat: no-repeat; @@ -1903,9 +2359,8 @@ div.panelview.side2 > div { 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; + background-image: url("/static/images/book-panel/more_icon.png"); + padding: 0px 42px 12px 20px; color: #FFFFFF; border-top-width: 1px; border-bottom-width: 1px; @@ -1919,8 +2374,51 @@ div.panelview.side2 > div { border-bottom-style: solid; border-top-color: #FFFFFF; border-bottom-color: #FFFFFF; + overflow: visible; + width: 75px; + height: 24px; } -.moreinfo a:hover { +.moreinfo div:hover { + text-decoration: none; + color: #3d4e53; + text-decoration: none; + color: #3d4e53; +} +.moreinfo div { + line-height: 40px; + font-size: 11px; + background-repeat: no-repeat; + background-position: left center; + font-weight: bold; + text-decoration: none; + text-transform: uppercase; + line-height: 40px; + font-size: 11px; + background-repeat: no-repeat; + background-position: left center; + font-weight: bold; + text-decoration: none; + text-transform: uppercase; + background-image: url("/static/images/book-panel/more_icon.png"); + padding: 0px 42px 12px 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; + border-top-width: 1px; + border-bottom-width: 1px; + border-top-style: solid; + border-bottom-style: solid; + border-top-color: #FFFFFF; + border-bottom-color: #FFFFFF; + overflow: visible; + width: 75px; + height: 24px; +} +.moreinfo div:hover { text-decoration: none; color: #3d4e53; text-decoration: none; From 243778b40c62a704e790607910cb51fd65e07859 Mon Sep 17 00:00:00 2001 From: Andromeda Yelton Date: Tue, 8 Nov 2011 21:23:23 -0500 Subject: [PATCH 2/5] tweaking css for panel hover state --- frontend/templates/supporter.html | 6 +- static/css/book_panel.css | 73 +++-------- static/less/book_panel.less | 72 +++-------- static/less/layout.css | 198 +++++++++--------------------- 4 files changed, 101 insertions(+), 248 deletions(-) diff --git a/frontend/templates/supporter.html b/frontend/templates/supporter.html index 2ecc91a8..b09929d7 100644 --- a/frontend/templates/supporter.html +++ b/frontend/templates/supporter.html @@ -229,10 +229,10 @@ how do I integrate the your wishlist thing with the tabs thing? {% if work.first_ebook %}
Read it Now
{% else %} -
No ebook yet
+
Unglue it!
{% endif %} {% ifequal supporter request.user %} -
Remove
+
Remove
{% else %}{% if work in shared_works %}
On Your Wishlist! @@ -250,7 +250,7 @@ how do I integrate the your wishlist thing with the tabs thing?

{{ work.author }}

- More Info + More Info
diff --git a/static/css/book_panel.css b/static/css/book_panel.css index 4934dfa2..e2c57ddd 100644 --- a/static/css/book_panel.css +++ b/static/css/book_panel.css @@ -12,6 +12,7 @@ border-style: solid none; border-color: #FFFFFF; } +/* Local variables */ .greenpanelstuff { font-family: Arial, Helvetica, sans-serif; font-size: 12px; @@ -41,12 +42,12 @@ border-radius: 4px 4px 4px 4px; border: 1px solid #81bb38; } +/* background */ @charset "utf-8"; * { padding: 0px; margin: 0px; } -/*main_Css*/ #main-wrapper { height: 100%; width: 725px; @@ -64,6 +65,7 @@ margin: 15px 0px; font-weight: bold; } +/* styling of front side elements */ .panelview.book-list { font-family: Arial, Helvetica, sans-serif; font-size: 12px; @@ -126,10 +128,7 @@ padding: 10px 10px 0 0; width: 24px; } -/*2 start*/ -.panelback { - position: relative; -} +/* switch to/from hover state when jquery swaps class names */ span.panelview.panelback.side1, span.panelview.panelback.side1 div { display: visible; } @@ -142,6 +141,10 @@ div.panelview.side1 > div { div.panelview.side2 > div { display: none; } +/* styling of hover state */ +.panelback { + position: relative; +} .greenpanel2 { font-family: Arial, Helvetica, sans-serif; font-size: 12px; @@ -219,9 +222,10 @@ div.panelview.side2 > div { width: 130px; height: 30px; padding: 0px; - margin: 15px 0 0; + margin: 15px 0 15px 0; + vertical-align: baseline; } -.add_towish div { +.add_towish a { line-height: 40px; font-size: 11px; background-repeat: no-repeat; @@ -230,7 +234,7 @@ div.panelview.side2 > div { text-decoration: none; text-transform: uppercase; background-image: url("/static/images/book-panel/add_wish_icon.png"); - padding: 0px 5px 12px 20px; + padding: 8px 5px 8px 21px; color: #FFFFFF; border-top-width: 1px; border-bottom-width: 1px; @@ -238,11 +242,8 @@ div.panelview.side2 > div { border-bottom-style: solid; border-top-color: #FFFFFF; border-bottom-color: #FFFFFF; - overflow: visible; - width: 75px; - height: 24px; } -.add_towish div:hover { +.add_towish a:hover { text-decoration: none; color: #3d4e53; } @@ -265,14 +266,14 @@ div.panelview.side2 > div { max-height: 32px; overflow: hidden; } -/*more info*/ .moreinfo { width: 130px; height: 30px; padding: 0px; - margin: 15px 0 0; + margin: 15px 0 0px 0; + vertical-align: baseline; } -.moreinfo div { +.moreinfo a { line-height: 40px; font-size: 11px; background-repeat: no-repeat; @@ -281,7 +282,7 @@ div.panelview.side2 > div { text-decoration: none; text-transform: uppercase; background-image: url("/static/images/book-panel/more_icon.png"); - padding: 0px 42px 12px 20px; + padding: 8px 42px 8px 21px; color: #FFFFFF; border-top-width: 1px; border-bottom-width: 1px; @@ -289,52 +290,18 @@ div.panelview.side2 > div { border-bottom-style: solid; border-top-color: #FFFFFF; border-bottom-color: #FFFFFF; - overflow: visible; - width: 75px; - height: 24px; } -.moreinfo div:hover { +.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; -} +/* 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 auto; + 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; diff --git a/static/less/book_panel.less b/static/less/book_panel.less index 9ca26383..4228aeb8 100644 --- a/static/less/book_panel.less +++ b/static/less/book_panel.less @@ -1,6 +1,6 @@ @import "variables.less"; -// Local variables +/* Local variables */ .greenpanelstuff { font-family: Arial, Helvetica, sans-serif; font-size: 12px; @@ -53,34 +53,31 @@ } } -.banners (@image, @right) { +.banners (@image, @right, @bottom) { width:130px; height:30px; padding:0px; - margin:15px 0 0; + margin:15px 0 @bottom 0; + vertical-align: baseline; - div { + a { .greenpanelactionitems(left); background-image: url(@image); - padding:0px @right 12px 20px; + padding:8px @right 8px 21px; color:#FFFFFF; .greenpanelactionborders; - overflow: visible; - width: 75px; - height: 24px; &:hover { .panelhoverlink;} } } +/* background */ @charset "utf-8"; *{ padding:0px; margin:0px; } -/*main_Css*/ - #main-wrapper{ height: 100%; width: 725px; @@ -101,6 +98,7 @@ } } +/* styling of front side elements */ .panelview.book-list { .greenpanelstuff; margin: auto; @@ -158,7 +156,6 @@ .booklist-status-label { position: absolute; -// float: left; color: @green; padding-left: 5px; left: 40px; @@ -172,11 +169,7 @@ } } -/*2 start*/ - -.panelback { - position: relative; -} +/* switch to/from hover state when jquery swaps class names */ span.panelview.panelback.side1, span.panelview.panelback.side1 div { display:visible; @@ -194,6 +187,11 @@ div.panelview.side2 > div { display: none; } +/* styling of hover state */ +.panelback { + position: relative; +} + .greenpanel2 { .greenpanelstuff; margin: 0px auto; @@ -230,7 +228,7 @@ div.panelview.side2 > div { .add_towish { - .banners("/static/images/book-panel/add_wish_icon.png", 5px); + .banners("/static/images/book-panel/add_wish_icon.png", 5px, 15px); } .white_text { @@ -253,53 +251,19 @@ div.panelview.side2 > div { } } -/*more info*/ .moreinfo { - .banners("/static/images/book-panel/more_icon.png", 42px); + .banners("/static/images/book-panel/more_icon.png", 42px, 0px); } -/*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; -} +/* 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 auto; + margin:0px 15px 0px -5px; .border-radius(4px, 4px, 4px, 4px); border: 1px solid #d4dcdd; } diff --git a/static/less/layout.css b/static/less/layout.css index 432bd191..5c6a8ed7 100644 --- a/static/less/layout.css +++ b/static/less/layout.css @@ -329,6 +329,7 @@ div.content-block-content { border-style: solid none; border-color: #FFFFFF; } +/* Local variables */ .greenpanelstuff { font-family: Arial, Helvetica, sans-serif; font-size: 12px; @@ -373,12 +374,12 @@ div.content-block-content { border-radius: 4px 4px 4px 4px; border: 1px solid #81bb38; } +/* background */ @charset "utf-8"; * { padding: 0px; margin: 0px; } -/*main_Css*/ #main-wrapper { height: 100%; width: 725px; @@ -396,6 +397,7 @@ div.content-block-content { margin: 15px 0px; font-weight: bold; } +/* styling of front side elements */ .panelview.book-list { font-family: Arial, Helvetica, sans-serif; font-size: 12px; @@ -462,10 +464,7 @@ div.content-block-content { padding: 10px 10px 0 0; width: 24px; } -/*2 start*/ -.panelback { - position: relative; -} +/* switch to/from hover state when jquery swaps class names */ span.panelview.panelback.side1, span.panelview.panelback.side1 div { display: visible; } @@ -478,6 +477,10 @@ div.panelview.side1 > div { div.panelview.side2 > div { display: none; } +/* styling of hover state */ +.panelback { + position: relative; +} .greenpanel2 { font-family: Arial, Helvetica, sans-serif; font-size: 12px; @@ -691,13 +694,15 @@ div.panelview.side2 > div { width: 130px; height: 30px; padding: 0px; - margin: 15px 0 0; + margin: 15px 0 15px 0; + vertical-align: baseline; width: 130px; height: 30px; padding: 0px; - margin: 15px 0 0; + margin: 15px 0 15px 0; + vertical-align: baseline; } -.add_towish div { +.add_towish a { line-height: 40px; font-size: 11px; background-repeat: no-repeat; @@ -713,7 +718,7 @@ div.panelview.side2 > div { text-decoration: none; text-transform: uppercase; background-image: url("/static/images/book-panel/add_wish_icon.png"); - padding: 0px 5px 12px 20px; + padding: 8px 5px 8px 21px; color: #FFFFFF; border-top-width: 1px; border-bottom-width: 1px; @@ -727,17 +732,14 @@ div.panelview.side2 > div { border-bottom-style: solid; border-top-color: #FFFFFF; border-bottom-color: #FFFFFF; - overflow: visible; - width: 75px; - height: 24px; } -.add_towish div:hover { +.add_towish a:hover { text-decoration: none; color: #3d4e53; text-decoration: none; color: #3d4e53; } -.add_towish div { +.add_towish a { line-height: 40px; font-size: 11px; background-repeat: no-repeat; @@ -753,7 +755,7 @@ div.panelview.side2 > div { text-decoration: none; text-transform: uppercase; background-image: url("/static/images/book-panel/add_wish_icon.png"); - padding: 0px 5px 12px 20px; + padding: 8px 5px 8px 21px; color: #FFFFFF; border-top-width: 1px; border-bottom-width: 1px; @@ -767,11 +769,8 @@ div.panelview.side2 > div { border-bottom-style: solid; border-top-color: #FFFFFF; border-bottom-color: #FFFFFF; - overflow: visible; - width: 75px; - height: 24px; } -.add_towish div:hover { +.add_towish a:hover { text-decoration: none; color: #3d4e53; text-decoration: none; @@ -798,18 +797,19 @@ div.panelview.side2 > div { max-height: 32px; overflow: hidden; } -/*more info*/ .moreinfo { width: 130px; height: 30px; padding: 0px; - margin: 15px 0 0; + margin: 15px 0 0px 0; + vertical-align: baseline; width: 130px; height: 30px; padding: 0px; - margin: 15px 0 0; + margin: 15px 0 0px 0; + vertical-align: baseline; } -.moreinfo div { +.moreinfo a { line-height: 40px; font-size: 11px; background-repeat: no-repeat; @@ -825,7 +825,7 @@ div.panelview.side2 > div { text-decoration: none; text-transform: uppercase; background-image: url("/static/images/book-panel/more_icon.png"); - padding: 0px 42px 12px 20px; + padding: 8px 42px 8px 21px; color: #FFFFFF; border-top-width: 1px; border-bottom-width: 1px; @@ -839,17 +839,14 @@ div.panelview.side2 > div { border-bottom-style: solid; border-top-color: #FFFFFF; border-bottom-color: #FFFFFF; - overflow: visible; - width: 75px; - height: 24px; } -.moreinfo div:hover { +.moreinfo a:hover { text-decoration: none; color: #3d4e53; text-decoration: none; color: #3d4e53; } -.moreinfo div { +.moreinfo a { line-height: 40px; font-size: 11px; background-repeat: no-repeat; @@ -865,7 +862,7 @@ div.panelview.side2 > div { text-decoration: none; text-transform: uppercase; background-image: url("/static/images/book-panel/more_icon.png"); - padding: 0px 42px 12px 20px; + padding: 8px 42px 8px 21px; color: #FFFFFF; border-top-width: 1px; border-bottom-width: 1px; @@ -879,56 +876,20 @@ div.panelview.side2 > div { border-bottom-style: solid; border-top-color: #FFFFFF; border-bottom-color: #FFFFFF; - overflow: visible; - width: 75px; - height: 24px; } -.moreinfo div:hover { +.moreinfo a:hover { text-decoration: none; color: #3d4e53; 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; - text-decoration: none; - color: #3d4e53; -} -.graypanel a:hover { - color: #8dc63f; - text-decoration: none; -} +/* 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 auto; + 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; @@ -1864,6 +1825,7 @@ div.content-block-content { border-style: solid none; border-color: #FFFFFF; } +/* Local variables */ .greenpanelstuff { font-family: Arial, Helvetica, sans-serif; font-size: 12px; @@ -1908,12 +1870,12 @@ div.content-block-content { border-radius: 4px 4px 4px 4px; border: 1px solid #81bb38; } +/* background */ @charset "utf-8"; * { padding: 0px; margin: 0px; } -/*main_Css*/ #main-wrapper { height: 100%; width: 725px; @@ -1931,6 +1893,7 @@ div.content-block-content { margin: 15px 0px; font-weight: bold; } +/* styling of front side elements */ .panelview.book-list { font-family: Arial, Helvetica, sans-serif; font-size: 12px; @@ -1997,10 +1960,7 @@ div.content-block-content { padding: 10px 10px 0 0; width: 24px; } -/*2 start*/ -.panelback { - position: relative; -} +/* switch to/from hover state when jquery swaps class names */ span.panelview.panelback.side1, span.panelview.panelback.side1 div { display: visible; } @@ -2013,6 +1973,10 @@ div.panelview.side1 > div { div.panelview.side2 > div { display: none; } +/* styling of hover state */ +.panelback { + position: relative; +} .greenpanel2 { font-family: Arial, Helvetica, sans-serif; font-size: 12px; @@ -2226,13 +2190,15 @@ div.panelview.side2 > div { width: 130px; height: 30px; padding: 0px; - margin: 15px 0 0; + margin: 15px 0 15px 0; + vertical-align: baseline; width: 130px; height: 30px; padding: 0px; - margin: 15px 0 0; + margin: 15px 0 15px 0; + vertical-align: baseline; } -.add_towish div { +.add_towish a { line-height: 40px; font-size: 11px; background-repeat: no-repeat; @@ -2248,7 +2214,7 @@ div.panelview.side2 > div { text-decoration: none; text-transform: uppercase; background-image: url("/static/images/book-panel/add_wish_icon.png"); - padding: 0px 5px 12px 20px; + padding: 8px 5px 8px 21px; color: #FFFFFF; border-top-width: 1px; border-bottom-width: 1px; @@ -2262,17 +2228,14 @@ div.panelview.side2 > div { border-bottom-style: solid; border-top-color: #FFFFFF; border-bottom-color: #FFFFFF; - overflow: visible; - width: 75px; - height: 24px; } -.add_towish div:hover { +.add_towish a:hover { text-decoration: none; color: #3d4e53; text-decoration: none; color: #3d4e53; } -.add_towish div { +.add_towish a { line-height: 40px; font-size: 11px; background-repeat: no-repeat; @@ -2288,7 +2251,7 @@ div.panelview.side2 > div { text-decoration: none; text-transform: uppercase; background-image: url("/static/images/book-panel/add_wish_icon.png"); - padding: 0px 5px 12px 20px; + padding: 8px 5px 8px 21px; color: #FFFFFF; border-top-width: 1px; border-bottom-width: 1px; @@ -2302,11 +2265,8 @@ div.panelview.side2 > div { border-bottom-style: solid; border-top-color: #FFFFFF; border-bottom-color: #FFFFFF; - overflow: visible; - width: 75px; - height: 24px; } -.add_towish div:hover { +.add_towish a:hover { text-decoration: none; color: #3d4e53; text-decoration: none; @@ -2333,18 +2293,19 @@ div.panelview.side2 > div { max-height: 32px; overflow: hidden; } -/*more info*/ .moreinfo { width: 130px; height: 30px; padding: 0px; - margin: 15px 0 0; + margin: 15px 0 0px 0; + vertical-align: baseline; width: 130px; height: 30px; padding: 0px; - margin: 15px 0 0; + margin: 15px 0 0px 0; + vertical-align: baseline; } -.moreinfo div { +.moreinfo a { line-height: 40px; font-size: 11px; background-repeat: no-repeat; @@ -2360,7 +2321,7 @@ div.panelview.side2 > div { text-decoration: none; text-transform: uppercase; background-image: url("/static/images/book-panel/more_icon.png"); - padding: 0px 42px 12px 20px; + padding: 8px 42px 8px 21px; color: #FFFFFF; border-top-width: 1px; border-bottom-width: 1px; @@ -2374,17 +2335,14 @@ div.panelview.side2 > div { border-bottom-style: solid; border-top-color: #FFFFFF; border-bottom-color: #FFFFFF; - overflow: visible; - width: 75px; - height: 24px; } -.moreinfo div:hover { +.moreinfo a:hover { text-decoration: none; color: #3d4e53; text-decoration: none; color: #3d4e53; } -.moreinfo div { +.moreinfo a { line-height: 40px; font-size: 11px; background-repeat: no-repeat; @@ -2400,7 +2358,7 @@ div.panelview.side2 > div { text-decoration: none; text-transform: uppercase; background-image: url("/static/images/book-panel/more_icon.png"); - padding: 0px 42px 12px 20px; + padding: 8px 42px 8px 21px; color: #FFFFFF; border-top-width: 1px; border-bottom-width: 1px; @@ -2414,56 +2372,20 @@ div.panelview.side2 > div { border-bottom-style: solid; border-top-color: #FFFFFF; border-bottom-color: #FFFFFF; - overflow: visible; - width: 75px; - height: 24px; } -.moreinfo div:hover { +.moreinfo a:hover { text-decoration: none; color: #3d4e53; 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; - text-decoration: none; - color: #3d4e53; -} -.graypanel a:hover { - color: #8dc63f; - text-decoration: none; -} +/* 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 auto; + 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; From 3a7ba8cb45adeb36cab230e0c2df5a92cdb99c90 Mon Sep 17 00:00:00 2001 From: eric Date: Wed, 9 Nov 2011 12:24:26 -0500 Subject: [PATCH 3/5] fixed bug https://www.pivotaltracker.com/story/show/20482327 also added error output on profile edit form --- frontend/templates/supporter.html | 7 ++++--- frontend/views.py | 30 +++++++++++++++--------------- 2 files changed, 19 insertions(+), 18 deletions(-) diff --git a/frontend/templates/supporter.html b/frontend/templates/supporter.html index b09929d7..97876631 100644 --- a/frontend/templates/supporter.html +++ b/frontend/templates/supporter.html @@ -103,6 +103,7 @@ how do I integrate the your wishlist thing with the tabs thing?

Your Tagline

+ {{ profile_form.tagline.errors }} {{ profile_form.tagline }} @@ -112,12 +113,12 @@ how do I integrate the your wishlist thing with the tabs thing?

Links

- - {{ profile_form.home_url }} + + {{ profile_form.home_url }}{{ profile_form.home_url.errors }}
- {{ profile_form.twitter_id }} + {{ profile_form.twitter_id }}{{ profile_form.twitter_id.errors }}
diff --git a/frontend/views.py b/frontend/views.py index a52f764a..86200fac 100755 --- a/frontend/views.py +++ b/frontend/views.py @@ -41,8 +41,8 @@ def home(request): return render(request, 'home.html', {'suppress_search_box': True}) def stub(request): - path = request.path[6:] # get rid of /stub/ - return render(request,'stub.html', {'path': path}) + path = request.path[6:] # get rid of /stub/ + return render(request,'stub.html', {'path': path}) def work(request, work_id, action='display'): work = get_object_or_404(models.Work, id=work_id) @@ -76,13 +76,13 @@ def supporter(request, supporter_username, template_name): transet = Transaction.objects.all().filter(user = supporter) for transaction in transet: - try: - if(transaction.campaign.status == 'SUCCESSFUL'): - backed += 1 - elif(transaction.campaign.status == 'ACTIVE'): - backing += 1 - except: - continue + try: + if(transaction.campaign.status == 'SUCCESSFUL'): + backed += 1 + elif(transaction.campaign.status == 'ACTIVE'): + backing += 1 + except: + continue wished = supporter.wishlist.works.count() @@ -100,17 +100,17 @@ def supporter(request, supporter_username, template_name): # following block to support profile admin form in supporter page if request.user.is_authenticated() and request.user.username == supporter_username: + try: + profile_obj=request.user.get_profile() + except ObjectDoesNotExist: + profile_obj= models.UserProfile() + profile_obj.user=request.user if request.method == 'POST': - try: - profile_obj=request.user.get_profile() - except ObjectDoesNotExist: - profile_obj= models.UserProfile() - profile_obj.user=request.user profile_form = ProfileForm(data=request.POST,instance=profile_obj) if profile_form.is_valid(): profile_form.save() else: - profile_form = ProfileForm() + profile_form= ProfileForm(instance=profile_obj) else: profile_form = '' From 49aca6428cf693e6b5d7f3afa0225c2f63714eef Mon Sep 17 00:00:00 2001 From: Raymond Yee Date: Wed, 9 Nov 2011 10:05:03 -0800 Subject: [PATCH 4/5] The /pledge page now has the correct radio button to correpond to the premium clicked on. HOWEVER, there's no enforcement currently of the pledge amount to be the same as the premium clicked on. Also, no form validation on pledge page yet too. --- frontend/forms.py | 2 +- frontend/templates/pledge.html | 4 +--- frontend/views.py | 43 ++++++++++++++++++++-------------- 3 files changed, 27 insertions(+), 22 deletions(-) diff --git a/frontend/forms.py b/frontend/forms.py index 9015a94b..eaf29133 100644 --- a/frontend/forms.py +++ b/frontend/forms.py @@ -42,7 +42,7 @@ class UserData(forms.Form): raise forms.ValidationError(_("Your username is already "+oldusername)) class CampaignPledgeForm(forms.Form): - preapproval_amount = forms.DecimalField(initial=D('20.00'), min_value=D('0.00'), max_value=D('10000.00'), decimal_places=2) + preapproval_amount = forms.DecimalField(initial=None, required=True, min_value=D('0.00'), max_value=D('10000.00'), decimal_places=2, label="Pledge Amount") anonymous = forms.BooleanField(required=False, label="Don't display my username in the supporters list") class GoodreadsShelfLoadingForm(forms.Form): diff --git a/frontend/templates/pledge.html b/frontend/templates/pledge.html index 884b5351..58eb13c1 100644 --- a/frontend/templates/pledge.html +++ b/frontend/templates/pledge.html @@ -42,14 +42,12 @@ - {{request.GET.premium_id}} -
    {% for premium in premiums %}
  • - + ${{ premium.amount }} {{ premium.description }}
    • diff --git a/frontend/views.py b/frontend/views.py index 86200fac..28f8c892 100755 --- a/frontend/views.py +++ b/frontend/views.py @@ -64,8 +64,15 @@ def pledge(request,work_id): if campaign: premiums = campaign.premiums.all() if premiums.count() == 0: - premiums = models.Premium.objects.filter(campaign__isnull=True) - form = CampaignPledgeForm() + premiums = models.Premium.objects.filter(campaign__isnull=True) + premium_id = request.GET.get('premium_id', None) + if premium_id is not None: + preapproval_amount = D(models.Premium.objects.get(id=premium_id).amount) + else: + preapproval_amount = D('0.00') + data = {'preapproval_amount':preapproval_amount} + form = CampaignPledgeForm(data) + return render(request,'pledge.html',{'work':work,'campaign':campaign, 'premiums':premiums, 'form':form}) def supporter(request, supporter_username, template_name): @@ -216,23 +223,23 @@ class CampaignFormView(FormView): user = self.request.user else: user = None + + # calculate the work corresponding to the campaign id + work_id = campaign.work.id + return_url = self.request.build_absolute_uri(reverse('work',kwargs={'work_id': str(work_id)})) + t, url = p.authorize('USD', TARGET_TYPE_CAMPAIGN, preapproval_amount, campaign=campaign, list=None, user=user, + return_url=return_url, anonymous=anonymous) - if (preapproval_amount > D('0.00')): - # handle preapproval: get preapproval to charge amount of money in preapproval_amount - - return_url = self.request.build_absolute_uri(reverse('campaign_by_id',kwargs={'pk': str(pk)})) - t, url = p.authorize('USD', TARGET_TYPE_CAMPAIGN, preapproval_amount, campaign=campaign, list=None, user=user, - return_url=return_url, anonymous=anonymous) - else: - # instant payment: send to the partnering RH - # right now, all money going to Gluejar. - receiver_list = [{'email':settings.PAYPAL_GLUEJAR_EMAIL, 'amount':pledge_amount}] - - # redirect the page back to campaign page on success - #return_url = self.request.build_absolute_uri("/campaigns/%s" %(str(pk))) - return_url = self.request.build_absolute_uri(reverse('campaign_by_id',kwargs={'pk': str(pk)})) - t, url = p.pledge('USD', TARGET_TYPE_CAMPAIGN, receiver_list, campaign=campaign, list=None, user=user, - return_url=return_url, anonymous=anonymous) + #else: + # # instant payment: send to the partnering RH + # # right now, all money going to Gluejar. + # receiver_list = [{'email':settings.PAYPAL_GLUEJAR_EMAIL, 'amount':pledge_amount}] + # + # # redirect the page back to campaign page on success + # #return_url = self.request.build_absolute_uri("/campaigns/%s" %(str(pk))) + # return_url = self.request.build_absolute_uri(reverse('campaign_by_id',kwargs={'pk': str(pk)})) + # t, url = p.pledge('USD', TARGET_TYPE_CAMPAIGN, receiver_list, campaign=campaign, list=None, user=user, + # return_url=return_url, anonymous=anonymous) if url: logger.info("CampaignFormView paypal: " + url) From 4860ec430a974ee2f58d8f128f1112bf1daa5fb1 Mon Sep 17 00:00:00 2001 From: Ed Summers Date: Wed, 9 Nov 2011 18:22:23 +0000 Subject: [PATCH 5/5] added script to update please.unglueit.com --- deploy/update-regluit | 10 ++++++++++ settings/prod.py | 2 +- 2 files changed, 11 insertions(+), 1 deletion(-) create mode 100755 deploy/update-regluit diff --git a/deploy/update-regluit b/deploy/update-regluit new file mode 100755 index 00000000..df66f0a1 --- /dev/null +++ b/deploy/update-regluit @@ -0,0 +1,10 @@ +#!/bin/bash + +# put this in one of root's crontabs and it'll refresh and restart regluit + +cd /opt/regluit +sudo -u ubuntu -c "git pull" +source ENV/bin/activate +django-admin.py syncdb --migrate --settings regluit.settings.prod +sudo /etc/init.d/apache2 restart +sudo /etc/init.d/celeryd restart diff --git a/settings/prod.py b/settings/prod.py index ba9de5d9..1cf6c5b6 100644 --- a/settings/prod.py +++ b/settings/prod.py @@ -54,7 +54,7 @@ PAYPAL_SIGNATURE = '' PAYPAL_APPID = '' PAYPAL_ENDPOINT = 'svcs.sandbox.paypal.com' # sandbox -PAYPAL_PAYMENT_HOST = 'http://www.sandbox.paypal.com' # sandbox +PAYPAL_PAYMENT_HOST = 'https://www.sandbox.paypal.com' # sandbox PAYPAL_SANDBOX_LOGIN = '' PAYPAL_SANDBOX_PASSWORD = ''