From 9f32a8c3c52db4ea933c50ead37eafef9bb11526 Mon Sep 17 00:00:00 2001 From: eric Date: Wed, 30 Nov 2011 21:06:27 -0500 Subject: [PATCH] rebuilding the scripts and classes running book panel to be not so flaky --- static/css/book_panel.css | 10 +- static/css/variables.css | 1 + static/js/greenpanel.js | 4 +- static/less/book_panel.less | 834 ++++++++++++++++++------------------ 4 files changed, 418 insertions(+), 431 deletions(-) diff --git a/static/css/book_panel.css b/static/css/book_panel.css index d23acdea..742817f6 100644 --- a/static/css/book_panel.css +++ b/static/css/book_panel.css @@ -133,16 +133,10 @@ display: none; } /* switch to/from hover state when jquery swaps class names */ -span.panelview.panelback.side1, span.panelview.panelback.side1 div { +div.panelview.side1 { display: visible; } -span.panelview.panelback.side2, span.panelview.panelback.side2 div { - display: none; -} -div.panelview.side1 > div { - display: visible; -} -div.panelview.side2 > div { +div.panelview.side2 { display: none; } /* styling of hover state */ diff --git a/static/css/variables.css b/static/css/variables.css index eedf0d84..4d261f86 100644 --- a/static/css/variables.css +++ b/static/css/variables.css @@ -1,3 +1,4 @@ +/* variables and mixins used in multiple less files go here */ .header-text { height: 36px; line-height: 36px; diff --git a/static/js/greenpanel.js b/static/js/greenpanel.js index 1f2d6178..3aeedc02 100644 --- a/static/js/greenpanel.js +++ b/static/js/greenpanel.js @@ -1,14 +1,14 @@ $(document).ready(function(){ $('.book-list').bind("mouseenter", (function() { - $(this).removeClass('side1').addClass('side2'); + $(this).children('.panelfront').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'); + $(this).children('.panelfront').removeClass('side2').addClass('side1'); })); }); diff --git a/static/less/book_panel.less b/static/less/book_panel.less index 13060d99..70aa1731 100644 --- a/static/less/book_panel.less +++ b/static/less/book_panel.less @@ -1,422 +1,414 @@ -@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; -} - -.readit { - width:118px; - height:35px; - padding:0px 0px; - background:#FFFFFF; - margin:0px; - .border-radius(4px, 4px, 4px, 4px); - border: 1px solid #81bb38; -} - -.readit_inner (@padding) { - .greenpanelactionitems(10px); - padding:0px 0px 0px @padding; - color:@dark-green; - - &:hover { - text-decoration:none; - } -} - -.banners (@right, @bottom) { - width:120px; - height:30px; - padding:0px; - margin:15px 0 @bottom 0; - .greenpanelactionborders; - - a { - .greenpanelactionitems(left); - padding:0 @right 0 21px; - color:#FFF; - - &:hover { .panelhoverlink;} - } -} - -/* background */ -@charset "utf-8"; -*{ - padding:0px; - margin:0px; -} - -#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; - } -} - -/* styling of front side elements */ -.panelview.book-list { - .greenpanelstuff; - margin: auto; - padding: 0px 5px 5px 5px; - height: 300px; - background-color: #ffffff; - color: @text-blue; - border: 5px solid @pale-blue; - position: relative; - - &:hover { - color: @text-blue; - } - - img { - padding:5px 0px; - margin:0px; - } -} - -.panelview { - &.remove-wishlist, &.on-wishlist, &.create-account, &.add-wishlist { - display: none; - } -} - -.panelview.book-name div { - font-family: Arial, Helvetica, sans-serif; - font-size: 12px; - line-height:16px; - max-height:32px; - color: #3d4e53; - overflow: hidden; -} - - -.panelview.booklist-status { - color: @green; - text-align: left; - - .booklist-status-label { - float: left; - font-weight: bold; - } -} - -.panelview.icons { - position: absolute; - bottom: -3px; - width: 140px; - - .booklist-status-img { - float: left; - } - - .booklist-status-label { - position: absolute; - color: @green; - padding-left: 5px; - left: 40px; - bottom: 5px; - } - - .right_add { - float: right; - padding:10px 10px 0 0; - width:24px; - } -} - -.panelview.boolist-ebook a { - display: none; -} - -/* switch to/from hover state when jquery swaps class names */ - -span.panelview.panelback.side1, span.panelview.panelback.side1 div { - display:visible; -} - -span.panelview.panelback.side2, span.panelview.panelback.side2 div { - display:none; -} - -div.panelview.side1 > div { - display: visible; -} - -div.panelview.side2 > div { - display: none; -} - -/* styling of hover state */ -.panelback { - position: relative; -} - -.greenpanel2 { - .greenpanelstuff; - margin: 10px auto 0; - padding: 10px; - height: 295px; - background-color: @green; - color: #fff; - position:absolute; - top:-5px; - left:-10px; -} - -/* Campaign status text at top of hover state */ -.unglued_white { - font-size: 12px; - margin: 0px auto; - margin-bottom:5px; - padding: 10px 0px; - height:48px; -} - -/* White-background action buttons; vary by state of campaign */ -.read_itbutton { - .readit; - a { - .readit_inner(30px); - background: url("@{image-base}book-panel/book_icon.png") no-repeat 10% center; - } -} - -.read_itbutton_fail { - .readit; - - span { - .readit_inner(15px); - background: none; - } -} - -.Unglue_itbutton{ - .readit; - - a { - background-image: url("@{image-base}book-panel/unglue_icon.png"); - .readit_inner(25px); - } -} - -.add_towish { - .banners(5px, 15px); - background-image: url("@{image-base}book-panel/add_wish_icon.png"); - -} - -/* title, author */ -.white_text { - width:130px; - height:40px; - padding:17px 0px; - margin:0px; - - a { - color:#FFFFFF; - text-decoration:none; - - &:hover { .panelhoverlink;} - } - - p { - /* necessary to ensure title/author don't overflow onto icons */ - line-height:16px; - max-height:32px; - overflow: hidden; - } -} - -.moreinfo { - .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 */ - - -.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 ) --------------------------------------------- */ -.panelview.book-thumb { - position: relative; - margin:0px; - padding:0px; - left:0px; - - img { - z-index: 100; - width: 120px; - height: 182px; - } - - span { - position:absolute; - bottom: 0; - left:-10px; - top:-5px; - z-index: 1000; - height:auto; - } - +@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; +} + +.readit { + width:118px; + height:35px; + padding:0px 0px; + background:#FFFFFF; + margin:0px; + .border-radius(4px, 4px, 4px, 4px); + border: 1px solid #81bb38; +} + +.readit_inner (@padding) { + .greenpanelactionitems(10px); + padding:0px 0px 0px @padding; + color:@dark-green; + + &:hover { + text-decoration:none; + } +} + +.banners (@right, @bottom) { + width:120px; + height:30px; + padding:0px; + margin:15px 0 @bottom 0; + .greenpanelactionborders; + + a { + .greenpanelactionitems(left); + padding:0 @right 0 21px; + color:#FFF; + + &:hover { .panelhoverlink;} + } +} + +/* background */ +@charset "utf-8"; +*{ + padding:0px; + margin:0px; +} + +#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; + } +} + +/* styling of front side elements */ +.panelview.book-list { + .greenpanelstuff; + margin: auto; + padding: 0px 5px 5px 5px; + height: 300px; + background-color: #ffffff; + color: @text-blue; + border: 5px solid @pale-blue; + position: relative; + + &:hover { + color: @text-blue; + } + + img { + padding:5px 0px; + margin:0px; + } +} + +.panelview { + &.remove-wishlist, &.on-wishlist, &.create-account, &.add-wishlist { + display: none; + } +} + +.panelview.book-name div { + font-family: Arial, Helvetica, sans-serif; + font-size: 12px; + line-height:16px; + max-height:32px; + color: #3d4e53; + overflow: hidden; +} + + +.panelview.booklist-status { + color: @green; + text-align: left; + + .booklist-status-label { + float: left; + font-weight: bold; + } +} + +.panelview.icons { + position: absolute; + bottom: -3px; + width: 140px; + + .booklist-status-img { + float: left; + } + + .booklist-status-label { + position: absolute; + color: @green; + padding-left: 5px; + left: 40px; + bottom: 5px; + } + + .right_add { + float: right; + padding:10px 10px 0 0; + width:24px; + } +} + +.panelview.boolist-ebook a { + display: none; +} + +/* switch to/from hover state when jquery swaps class names */ + +div.panelview.side1 { + display: visible; +} + +div.panelview.side2 { + display: none; +} + +/* styling of hover state */ +.panelback { + position: relative; +} + +.greenpanel2 { + .greenpanelstuff; + margin: 10px auto 0; + padding: 10px; + height: 295px; + background-color: @green; + color: #fff; + position:absolute; + top:-5px; + left:-10px; +} + +/* Campaign status text at top of hover state */ +.unglued_white { + font-size: 12px; + margin: 0px auto; + margin-bottom:5px; + padding: 10px 0px; + height:48px; +} + +/* White-background action buttons; vary by state of campaign */ +.read_itbutton { + .readit; + a { + .readit_inner(30px); + background: url("@{image-base}book-panel/book_icon.png") no-repeat 10% center; + } +} + +.read_itbutton_fail { + .readit; + + span { + .readit_inner(15px); + background: none; + } +} + +.Unglue_itbutton{ + .readit; + + a { + background-image: url("@{image-base}book-panel/unglue_icon.png"); + .readit_inner(25px); + } +} + +.add_towish { + .banners(5px, 15px); + background-image: url("@{image-base}book-panel/add_wish_icon.png"); + +} + +/* title, author */ +.white_text { + width:130px; + height:40px; + padding:17px 0px; + margin:0px; + + a { + color:#FFFFFF; + text-decoration:none; + + &:hover { .panelhoverlink;} + } + + p { + /* necessary to ensure title/author don't overflow onto icons */ + line-height:16px; + max-height:32px; + overflow: hidden; + } +} + +.moreinfo { + .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 */ + + +.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 ) --------------------------------------------- */ +.panelview.book-thumb { + position: relative; + margin:0px; + padding:0px; + left:0px; + + img { + z-index: 100; + width: 120px; + height: 182px; + } + + span { + position:absolute; + bottom: 0; + left:-10px; + top:-5px; + z-index: 1000; + height:auto; + } + } \ No newline at end of file