firstgarden/firstgarden-web-gnu
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Activity

모바일 상품 정렬 스크립트 패딩 방식으로 수정

Browse Source
This commit is contained in:
chicpro
2013-09-25 11:26:53 +09:00
parent da47699642
commit 964870a27d
3 changed files with 16 additions and 58 deletions
Download Patch File Download Diff File Expand all files Collapse all files

44
css/mobile_shop.css
View File

@ -102,51 +102,7 @@ a.sanchor_on {background:#626870;color:#fff !important;text-decoration:none}
#sct_lst button.sct_lst_gallery span {background-position:-30px 0}
#sct_lst button.sct_lst_gallery span.sct_lst_on {background-position:-30px -30px}
/* ##### maintype(nn).inc.php, list.skin.(nn).php 공통 적용 시작 ##### */
/* 공통 */
.sct_wrap {margin:0 0 2em;zoom:1}
.sct_wrap:after {display:block;visibility:hidden;clear:both;content:""}
.sct_wrap header {margin:0 0 1.8em;zoom:1}
.sct_wrap header:after {display:block;visibility:hidden;clear:both;content:""}
.sct_wrap h2 {float:left;margin:0 1.8em 0 0;padding:0;line-height:1em}
.sct_wrap h2 a {text-decoration:none}
.sct_wrap_hdesc {float:left;margin:0;padding:0;color:#777;line-height:1em}
.sct {margin:0;padding:0;list-style:none;zoom:1}
.sct:after {display:block;visibility:hidden;clear:both;content:""}
.sct_li {position:relative}
.sct_noitem {padding:100px 0;text-align:center}
.sct_nofile {padding:100px 0;text-align:center}
/* 상품 목록 스킨 10 */
.sct_10 {padding:1em 0 0}
.sct_10 .sct_li {display:inline-block;margin:0 0.8em 1em 0}
.sct_10 .sct_a {display:block;position:relative;text-decoration:none}
.sct_10 .sct_a:focus,
.sct_10 .sct_a:hover {text-decoration:none}
.sct_10 .sct_img {display:block;margin:0 0 15px}
.sct_10 b {display:block;margin:0 0 0.8em;font-weight:normal}
.sct_10 s {display:block}
.sct_10 .sct_cost {display:block;margin:0 0 1em;font-weight:bold}
.sct_10 .sct_icon {position:absolute;top:10px;left:-5px;margin:0 !important}
.sct_10 .sct_icon img {display:block}
.sct_10 .sct_sns {position:absolute;top:190px;right:20px}
.sct_11 .sct_li {width:100%;border-bottom:1px solid #e9e9e9}
.sct_11 .sct_a {display:block;position:relative;padding:1em;text-decoration:none;zoom:1}
.sct_11 .sct_a:after {display:block;visibility:hidden;clear:both;content:""}
.sct_11 .sct_a:focus,
.sct_11 .sct_a:hover {text-decoration:none}
.sct_11 .sct_arw_toleft {display:block;z-index:2;position:absolute;top:1.8em;left:2.8em;width:1em;height:1.8em;background:url('../../shop/img/icon_arw_toleft.gif') no-repeat}
.sct_11 .sct_img {float:left;margin:0 1em 0 0}
.sct_11 b {display:block;margin:0 0 1em;font-size:1.2em;letter-spacing:-0.1em}
.sct_11 p {margin:0 0 1em;padding:0;line-height:1.5em}
.sct_11 s {display:block}
.sct_11 .sct_cost {display:block;margin:0 0 0.8em;font-weight:bold}
.sct_11 .sct_icon {position:absolute;bottom:2em;left:-5px;margin:0 !important}
.sct_11 .sct_icon img {display:block}
.sct_11 .sct_sns {position:absolute;top:2em;right:2em}
/* ##### maintype(nn).inc.php, list.skin.(nn).php 공통 적용 끝 ##### */
/* 상품 상세보기 */
#sit {margin:0.5em 0;border-top:1px solid #e9e9e9}

28
mobile/skin/shop/basic/list.10.skin.php
View File

@ -81,32 +81,34 @@ $(window).resize(function() {
function set_list_margin()
{
var li_margin = 0;
if($("li.sct_li:first").data("margin-right") == undefined) {
li_margin = parseInt($("li.sct_li:first").css("margin-right"));
$("li.sct_li:first").data("margin-right", li_margin);
var li_padding = 0;
if($("li.sct_li:first").data("padding-right") == undefined) {
li_padding = parseInt($("li.sct_li:first").css("padding-right"));
$("li.sct_li:first").data("padding-right", li_padding);
}
else
li_margin = $("li.sct_li:first").data("margin-right");
li_padding = $("li.sct_li:first").data("padding-right");
$("li.sct_li").css("margin-left", 0).css("margin-right", li_margin);
$("li.sct_li").css("padding-left", 0).css("padding-right", li_padding);
$("li.sct_clear").removeClass("sct_clear");
var ul_width = parseInt($("ul.sct").width());
var li_width = parseInt($("li.sct_li:first").outerWidth(true));
var li_count = parseInt((ul_width + li_margin) / li_width);
var li_width = parseInt($("li.sct_li:first").outerWidth());
var li_count = parseInt((ul_width + li_padding) / li_width);
if(li_count == 0)
return;
var space = parseInt(ul_width % li_width);
if((space + li_margin) < li_width) {
var new_margin = parseInt((space + li_margin) / (li_count * 2));
if((space + li_padding) < li_width) {
var new_padding = parseInt((space + li_padding) / (li_count * 2));
if(new_margin > li_margin)
$("li.sct_li").css("margin-left", new_margin+"px").css("margin-right", new_margin);
if(new_padding > li_padding)
$("li.sct_li").css("padding-left", new_padding+"px").css("padding-right", new_padding);
}
$("li.sct_li:nth-child("+li_count+"n)").css("margin-right", 0);
$("li.sct_li:nth-child("+li_count+"n)").css("padding-right", 0);
$("li.sct_li:nth-child("+li_count+"n+1)").addClass("sct_clear");
}
</script>

2
mobile/skin/shop/basic/style.css
View File

@ -15,7 +15,7 @@
.sct_noitem {padding:100px 0;text-align:center}
/* 상품 목록 스킨 10 */
.sct_10 .sct_li {float:left;margin:0 25px 15px 0;}
.sct_10 .sct_li {float:left;padding:0 25px 15px 0;}
.sct_10 .sct_last {margin:0 0 15px !important}
.sct_10 .sct_clear {clear:both}
.sct_10 .sct_a {display:block;position:relative;text-decoration:none}