From 51d8c71069b6fc0c387f89d6eb5cdbb45280e5c3 Mon Sep 17 00:00:00 2001 From: Andromeda Yelton Date: Mon, 7 Nov 2011 15:11:52 -0500 Subject: [PATCH] aligned search box with main content container; fixed flow of panel view in search page; added bottom-padding to allow for cover images to be fully displayed in list view --- frontend/templates/base.html | 2 +- frontend/templates/search.html | 2 ++ static/css/book_list.css | 8 +++++--- static/css/book_panel.css | 4 ++-- static/css/sitewide.css | 2 +- static/css/supporter_layout.css | 2 +- static/less/book_list.less | 15 ++++++++++++++- static/less/book_panel.less | 5 ++++- static/less/layout.css | 25 +++++++++++++++++++------ static/less/sitewide.less | 4 ++-- static/less/supporter_layout.less | 1 - 11 files changed, 51 insertions(+), 19 deletions(-) diff --git a/frontend/templates/base.html b/frontend/templates/base.html index 5fcb9d35..1127d7f2 100644 --- a/frontend/templates/base.html +++ b/frontend/templates/base.html @@ -23,7 +23,7 @@ unglue.it {% if not suppress_search_box %} -
+
diff --git a/frontend/templates/search.html b/frontend/templates/search.html index 7f6db2f2..bdd42c10 100644 --- a/frontend/templates/search.html +++ b/frontend/templates/search.html @@ -50,6 +50,7 @@ $(document).ready(function(){
{% for result in results %} +
{{ result.title }} @@ -87,6 +88,7 @@ $(document).ready(function(){
+
{% endfor %}
diff --git a/static/css/book_list.css b/static/css/book_list.css index 718e44b1..8ec92cf7 100755 --- a/static/css/book_list.css +++ b/static/css/book_list.css @@ -1,10 +1,11 @@ .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{clear:both;display:block;vertical-align:middle;height:43px;line-height:43px;margin:0 5px 0 0;padding:7px 0;position:relative;}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.book-name{width:260px;margin-right:10px;background:url("../images/booklist/booklist-vline.png") right center no-repeat;float:left;overflow:hidden;}div.book-list.listview div.book-name:hover{z-index:1000;overflow:visible;} +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;} @@ -25,5 +26,6 @@ ul.navigation li a:hover,ul.navigation li.active a{color:#8ac3d7;text-decoration .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;} .listview.author{display:none;} -.listview.icons{float:left;}.listview.icons .booklist-status-img{-moz-border-radius:4px 4px 4px 4px;-webkit-border-radius:4px 4px 4px 4px;border-radius:4px 4px 4px 4px;background-color:#fff;margin-top:4px;height:37px;}.listview.icons .booklist-status-img img{padding:5px;} +.listview.icons{position:absolute;right:31px;}.listview.icons .booklist-status-img{-moz-border-radius:4px 4px 4px 4px;-webkit-border-radius:4px 4px 4px 4px;border-radius:4px 4px 4px 4px;background-color:#fff;margin-top:4px;height:37px;}.listview.icons .booklist-status-img img{padding:5px;} .listview.icons .booklist-status-label,.listview.icons .right_add{display:none;} +div.content-block-content{padding-bottom:200px;} diff --git a/static/css/book_panel.css b/static/css/book_panel.css index 2b85907b..ff3c2271 100644 --- a/static/css/book_panel.css +++ b/static/css/book_panel.css @@ -10,9 +10,9 @@ .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;position:relative;}.panelview.book-list:hover{color:#3d4e53;} .panelview.book-list img{padding:5px 0px;margin:0px;} .panelview.remove-wishlist,.panelview.on-wishlist,.panelview.create-account,.panelview.add-wishlist{display:none;} -.panelview.book-name,.panelview.author{font-family:Arial,Helvetica,sans-serif;font-size:12px;line-height:16px;color:#3d4e53;} +.panelview.book-name,.panelview.author{font-family:Arial,Helvetica,sans-serif;font-size:12px;line-height:16px;max-height:32px;color:#3d4e53;overflow:hidden;} .panelview.booklist-status{color:#8dc63f;text-align:left;}.panelview.booklist-status .booklist-status-label{float:left;font-weight:bold;} -.panelview.icons{position:absolute;bottom:0px;width:140px;}.panelview.icons .booklist-status-img{float:left;} +.panelview.icons{position:absolute;bottom:-3px;width:140px;}.panelview.icons .booklist-status-img{float:left;} .panelview.icons .booklist-status-label{position:absolute;color:#8dc63f;padding-left:5px;left:40px;bottom:5px;} .panelview.icons .right_add{float:right;padding:10px 10px 0 0;width:24px;} .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;} diff --git a/static/css/sitewide.css b/static/css/sitewide.css index ec3ff8e0..d45ee96c 100644 --- a/static/css/sitewide.css +++ b/static/css/sitewide.css @@ -18,7 +18,7 @@ a{font-weight:bold;font-size:13px;text-decoration:none;cursor:pointer;} .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{float:left;padding-top:25px;margin-left:81px;}.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;} diff --git a/static/css/supporter_layout.css b/static/css/supporter_layout.css index 3c992864..c27ead62 100644 --- a/static/css/supporter_layout.css +++ b/static/css/supporter_layout.css @@ -29,7 +29,7 @@ a.my-setting.active{background:#d6dde0 url("/static/images/header/collspane.png" 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;} -div.content-block-content{padding-left:10px;padding-bottom:200px;} +div.content-block-content{padding-left:10px;} .js-news-text{float:left;width:70%;font-size:16px;color:#3d4e53;font-family:lucida grande;} .js-news-links{float:right;width:30%;} .column-left .item{margin:0 10px 10px 0;} diff --git a/static/less/book_list.less b/static/less/book_list.less index dbf9ffbd..033671c9 100755 --- a/static/less/book_list.less +++ b/static/less/book_list.less @@ -8,6 +8,7 @@ div.book-list.listview{ margin:0 5px 0 0; padding:7px 0; // overflow:hidden; + position: relative; &.row1 { background:#f6f9f9; @@ -30,6 +31,12 @@ div.book-list.listview{ margin-right:10px; background:url("../images/booklist/booklist-vline.png") right center no-repeat; float: left; + overflow: hidden; + + &:hover { + z-index: 1000; + overflow: visible; + } span { display:block; @@ -200,7 +207,9 @@ ul.navigation li a:hover, ul.navigation li.active a { } .listview.icons { - float: left; + position: absolute; + right: 31px; + .booklist-status-img { .border-radius(4px, 4px, 4px, 4px); background-color: #fff; @@ -215,3 +224,7 @@ ul.navigation li a:hover, ul.navigation li.active a { display: none; } } + +div.content-block-content { + padding-bottom: 200px; +} diff --git a/static/less/book_panel.less b/static/less/book_panel.less index 544cb5f3..89af3b12 100644 --- a/static/less/book_panel.less +++ b/static/less/book_panel.less @@ -69,6 +69,7 @@ color: @text-blue; border: 5px solid @pale-blue; position: relative; +// float: left; &:hover { color: @text-blue; @@ -102,7 +103,9 @@ font-family: Arial, Helvetica, sans-serif; font-size: 12px; line-height:16px; + max-height:32px; color: #3d4e53; + overflow: hidden; } @@ -118,7 +121,7 @@ .panelview.icons { position: absolute; - bottom: 0px; + bottom: -3px; width: 140px; .booklist-status-img { diff --git a/static/less/layout.css b/static/less/layout.css index 00a5b445..e42609ba 100644 --- a/static/less/layout.css +++ b/static/less/layout.css @@ -50,6 +50,7 @@ div.book-list.listview { line-height: 43px; margin: 0 5px 0 0; padding: 7px 0; + position: relative; } div.book-list.listview.row1 { background: #f6f9f9; @@ -69,6 +70,11 @@ div.book-list.listview div.book-name { margin-right: 10px; background: url("../images/booklist/booklist-vline.png") right center no-repeat; float: left; + overflow: hidden; +} +div.book-list.listview div.book-name:hover { + z-index: 1000; + overflow: visible; } div.book-list.listview div.book-name span { display: block; @@ -275,7 +281,8 @@ ul.navigation li a:hover, ul.navigation li.active a { display: none; } .listview.icons { - float: left; + position: absolute; + right: 31px; } .listview.icons .booklist-status-img { -moz-border-radius: 4px 4px 4px 4px; @@ -306,6 +313,9 @@ ul.navigation li a:hover, ul.navigation li.active a { .listview.icons .booklist-status-label, .listview.icons .right_add { display: none; } +div.content-block-content { + padding-bottom: 200px; +} .header-text { height: 36px; line-height: 36px; @@ -407,7 +417,9 @@ ul.navigation li a:hover, ul.navigation li.active a { font-family: Arial, Helvetica, sans-serif; font-size: 12px; line-height: 16px; + max-height: 32px; color: #3d4e53; + overflow: hidden; } .panelview.booklist-status { color: #8dc63f; @@ -419,7 +431,7 @@ ul.navigation li a:hover, ul.navigation li.active a { } .panelview.icons { position: absolute; - bottom: 0px; + bottom: -3px; width: 140px; } .panelview.icons .booklist-status-img { @@ -1103,9 +1115,9 @@ a { padding: 10px; } .js-search { - float: right; - width: 30%; + float: left; padding-top: 25px; + margin-left: 81px; } .js-search input { float: left; @@ -1501,7 +1513,6 @@ ul.tabs li a:hover, ul.tabs li.active a { } div.content-block-content { padding-left: 10px; - padding-bottom: 200px; } .js-news-text { float: left; @@ -1676,7 +1687,9 @@ div.content-block-content { font-family: Arial, Helvetica, sans-serif; font-size: 12px; line-height: 16px; + max-height: 32px; color: #3d4e53; + overflow: hidden; } .panelview.booklist-status { color: #8dc63f; @@ -1688,7 +1701,7 @@ div.content-block-content { } .panelview.icons { position: absolute; - bottom: 0px; + bottom: -3px; width: 140px; } .panelview.icons .booklist-status-img { diff --git a/static/less/sitewide.less b/static/less/sitewide.less index f13f9f7b..4af99d1d 100644 --- a/static/less/sitewide.less +++ b/static/less/sitewide.less @@ -159,9 +159,9 @@ a { } .js-search { - float:right; - width:30%; + float:left; padding-top:25px; + margin-left: 81px; input { float: left; diff --git a/static/less/supporter_layout.less b/static/less/supporter_layout.less index 6afc9887..e2307e74 100644 --- a/static/less/supporter_layout.less +++ b/static/less/supporter_layout.less @@ -210,7 +210,6 @@ ul.tabs { div.content-block-content { padding-left: 10px; - padding-bottom: 200px; } .js-news-text {