diff --git a/css/mobile_shop.css b/css/mobile_shop.css index 52da3621c..1589972d4 100644 --- a/css/mobile_shop.css +++ b/css/mobile_shop.css @@ -33,16 +33,16 @@ a:hover, a:focus, a:active {color:#000;text-decoration:underline} #hd_sch .frm_input {height:2.5em;border-color:#999;background:#fff;line-height:2.5em} #hd_sch .pop_close {position:absolute;bottom:0.5em;right:0.5em;border:0;background:transparent} -#hd_mb {margin:1em 1em 0;text-align:center} -#hd_mb li {display:inline-block;margin:0 0 0 1em} -#hd_mb a {display:block;text-decoration:none} +#hd_mb {margin:10px 10px 0;text-align:center} +#hd_mb li {display:inline-block;margin:0 0 0 10px} +#hd_mb a {display:block;text-decoration:none;letter-spacing:-0.1em} /* 중간 레이아웃 */ #container {padding:10px} #container_title {margin:0 0 10px;padding:0;font-size:1.333em} /* 하단 레이아웃 */ -#ft {margin:2em 0 0;padding:2em 0 0;border-top:1px solid #e9e9e9;font-size:0.6em;text-align:center} +#ft {margin:20px 0 0;padding:20px 0 0;border-top:1px solid #e9e9e9;font-size:0.833em;text-align:center;letter-spacing:-0.1em} #ft h2 {position:absolute;font-size:0;text-indent:-9999em;line-height:0;overflow:hidden} #ft_to_top {display:block;margin:1em 0 2em} @@ -50,7 +50,7 @@ a:hover, a:focus, a:active {color:#000;text-decoration:underline} .sanchor {margin:0 0 0.5em;padding:0;zoom:1} .sanchor:after {display:block;visibility:hidden;clear:both;content:""} .sanchor li {float:left;margin-left:-1px;list-style:none} -.sanchor a {display:inline-block;border:1px solid #e9e9e9;background:#f5f6fa;padding:0 0.5em;text-decoration:none;line-height:2.6em} +.sanchor a {display:inline-block;padding:10px;border:1px solid #e9e9e9;background:#f0f1f2;text-decoration:none} .sanchor a:focus, .sanchor a:hover {background:#626870;color:#fff;text-decoration:none} a.sanchor_on {background:#626870;color:#fff !important;text-decoration:none} @@ -59,9 +59,9 @@ a.sanchor_on {background:#626870;color:#fff !important;text-decoration:none} #sidx {padding:0} /* 인덱스 상품 */ -#slide_tab {position:relative;margin:0 0 30px;padding:0;width:100%;height:50px;background:#383838;list-style:none;overflow:hidden} +#slide_tab {position:relative;margin:-10px 0 30px;padding:0;width:100%;height:40px;background:#383838;list-style:none;overflow:hidden} #slide_tab li {position:absolute;top:0;text-align:center} -#slide_tab button {margin:0;padding:0 15px;height:50px;border:0;background:#585858;color:#fff} +#slide_tab button {margin:0;padding:0 15px;height:40px;border:0;background:#585858;color:#fff} #slide_tab .tab_active button {background:transparent;font-weight:bold} #sidx_slide {position:relative;top:0;left:0;width:100%;overflow:hidden} .sidx_slide {position:absolute;top:0;left:0;width:100%} @@ -182,15 +182,22 @@ a.sanchor_on {background:#626870;color:#fff !important;text-decoration:none} #sit_ov_btn {margin:0;padding:0;text-align:center;list-style:none} #sit_ov_btn li {display:inline-block;margin:0 0 0 1px} -#sit_ov_btn a {display:inline-block;padding:1em 0 0.7em;width:80px;font-size:0.95em;text-align:center;text-decoration:none;letter-spacing:-0.1em} +#sit_ov_btn a {display:inline-block;padding:10px 0;width:80px;font-size:0.95em;text-align:center;text-decoration:none;letter-spacing:-0.1em} +#sit_ov_btn input {margin:0;padding:10px 0;width:80px;border:0;font-size:0.95em;text-align:center;text-decoration:none;letter-spacing:-0.1em} #sit_btn_buy {background:#ff5b89;color:#fff} #sit_btn_cart, #sit_btn_wish {background:#555;color:#fff} #sit_btn_rec {background:#888;color:#fff} /* 상품 상세보기 - 다른 상품 보기 */ -#sit_siblings {margin:0 0 1em;padding:1em 1em 2em;border-bottom:1px solid #e9e9e9;text-align:center} +#sit_siblings {margin:0 0 10px;padding:10px 10px 20px;border-bottom:1px solid #e9e9e9;text-align:center} #sit_siblings h2 {position:absolute;font-size:0;line-height:0;content:""} +/* 상품 상세보기 하단 버튼 */ +#sit_more {padding:0 0 0 1px} +#sit_more li {position:relative;margin:-1px 0 0 -1px;width:33%} +#sit_more li:nth-of-type(3n) {width:34%} +#sit_more a {display:block;padding:15px 0;text-align:center} + /* 상품 상세보기 - 상품정보 */ #sit_inf {margin:0 0 1em;padding:1em 1em 2em;border-bottom:1px solid #e9e9e9} #sit_inf h2 {margin:0 0 1em} @@ -482,7 +489,9 @@ html.no-overflowscrolling #sc_coupon_frm, html.no-overflowscrolling #od_coupon_f .ssch_cost {display:block;margin:0.5em 0 0} /* 쇼핑몰 이벤트 */ -#sev {} +#sev {margin:0;padding:0;min-height:150px;list-style:none} +#sev li {position:relative;margin:-1px 0 0;border-bottom:1px solid #e9e9e9} +#sev a {display:block;padding:10px;border:1px solid #e9e9e9;border-bottom:0;background:#f5f6fa} .sev_admin {text-align:right} /* 화면낭독기 사용자용 */ diff --git a/js/jquery.fancyalert.js b/js/jquery.fancyalert.js index eb4cc6bba..448d52029 100644 --- a/js/jquery.fancyalert.js +++ b/js/jquery.fancyalert.js @@ -11,17 +11,17 @@ function fancyalert(msg) } box = "
"; - box += ""+msg; + box += "
"+msg; box += "
"; box += ""; - box += ""; + box += "
"; box += "
"; $("body").append(box); } $(function() { - $("#fancyalert_close").live("click", function() { + $("#fancyalert_close, #fancyalert_inner").live("click", function() { $("#fancyalert").fadeOut().remove(); $("html, body").off("touchmove", blockScroll); }); diff --git a/js/shop.mobile.main.js b/js/shop.mobile.main.js index 8d712815d..c5d139628 100644 --- a/js/shop.mobile.main.js +++ b/js/shop.mobile.main.js @@ -76,33 +76,22 @@ width = $wrap.width(); tabw_width = $tab.width(); - tab_width = $tabs.eq(0).width(); height = $slides.eq(idx).height(); $wrap.height(height); $slides.not("."+cfg.active_class).css("left", "-"+width+"px"); - if(count < 3) { - pos_left = 0; - li_left = parseInt((tabw_width - (tab_width * count)) / (count + 1)); - - $tabs.each(function(index) { - pos_left += (li_left + (tab_width * index)); - $(this).css("left", pos_left); - }); - - $tabs.removeClass(cfg.tab_actie); + if(count == 1) { + tab_width = $tabs.eq(0).outerWidth(); + pos_left = parseInt((tabw_width - tab_width) / 2); + $tabs.eq(0).css("left", pos_left).addClass(cfg.tab_active); + } else if(count == 2) { + $tabs.eq(0).css("left", 0).addClass("tab_left"); + $tabs.eq(1).css("right", 0); + $tabs.removeClass(cfg.tab_active); $tabs.eq(idx).addClass(cfg.tab_active); - } else { - li_left = parseInt((tabw_width - (tab_width * 3)) / 2); - pos_left = tab_width + li_left; - pos_right = tabw_width - tab_width; - - $tabs.removeClass(cfg.tab_actie+" tab_listed").css("left", "-"+tab_width+"px"); - - $tabs.eq(idx - 1).addClass("tab_listed").css("left", "0px"); - $tabs.eq(idx).addClass(cfg.tab_active+" tab_listed").css("left", pos_left+"px"); - $tabs.eq((idx + 1) % count).addClass("tab_listed").css("left", pos_right+"px"); + } else if(count >= 3) { + tab_position(idx); $slides.eq((idx - 1)).css("left", "-"+width+"px"); $slides.eq((idx + 1) % count).css("left", width+"px"); @@ -131,6 +120,12 @@ $slides.eq(next).css("left", width+"px"); $tabs.removeClass(cfg.tab_active); + if(count >= 3) { + tab_position(next); + } else { + $tabs.eq(next).addClass(cfg.tab_active); + } + $slides.eq(idx).clearQueue().animate( { left: "-="+width }, cfg.duration, function() { @@ -141,16 +136,7 @@ $slides.eq(next).clearQueue().animate( { left: "-="+width }, cfg.duration, function() { - if(count >= 3) { - $tabs.removeClass("tab_listed").css("left", "-"+tab_width+"px"); - - $tabs.eq(next - 1).addClass("tab_listed").css("left", "0px"); - $tabs.eq(next).addClass("tab_listed").css("left", pos_left+"px"); - $tabs.eq((next + 1) % count).addClass("tab_listed").css("left", pos_right+"px"); - } - $wrap.height(next_height); - $tabs.eq(next).addClass(cfg.tab_active); } ); @@ -182,6 +168,12 @@ $slides.eq(next).css("left", "-"+width+"px"); $tabs.removeClass(cfg.tab_active); + if(count >= 3) { + tab_position(next); + } else { + $tabs.eq(next).addClass(cfg.tab_active); + } + $slides.eq(idx).clearQueue().animate( { left: "+="+width }, cfg.duration, function() { @@ -192,16 +184,7 @@ $slides.eq(next).clearQueue().animate( { left: "+="+width }, cfg.duration, function() { - if(count >= 3) { - $tabs.removeClass("tab_listed").css("left", "-"+tab_width+"px"); - - $tabs.eq(next - 1).addClass("tab_listed").css("left", "0px"); - $tabs.eq(next).addClass("tab_listed").css("left", pos_left+"px"); - $tabs.eq((next + 1) % count).addClass("tab_listed").css("left", pos_right+"px"); - } - $wrap.height(next_height); - $tabs.eq(next).addClass(cfg.tab_active); } ); @@ -209,6 +192,25 @@ $slides.eq(next).addClass(cfg.active_class); } + function tab_position(idx) + { + $tabs.removeClass(cfg.tab_actie+" tab_listed tab_left").css("left", "-"+tabw_width+"px"); + + var $tab_l = $tabs.eq(idx - 1); + var $tab_c = $tabs.eq(idx); + var $tab_r = $tabs.eq((idx + 1) % count); + var w_c = $tab_c.outerWidth(); + var w_r = $tab_r.outerWidth(); + + var pl = 0; + var pc = parseInt((tabw_width - w_c) / 2); + var pr = tabw_width - w_r; + + $tab_l.addClass("tab_listed tab_left").css("left", pl); + $tab_c.addClass(cfg.tab_active+" tab_listed").css("left", pc); + $tab_r.addClass("tab_listed").css("left", pr); + } + function check_animated() { if($slides.filter(":animated").size()) @@ -225,14 +227,9 @@ if($el.parent().hasClass(cfg.tab_active)) return; - idx = $slides.index($slides.filter("."+cfg.active_class)); - - var idx_pos = parseInt($tabs.eq(idx).css("left")); - var btn_pos = parseInt($el.parent().css("left")); - - if(idx_pos > btn_pos) + if($el.parent().hasClass("tab_left")) swipe_right(); - else(idx_pos < btn_pos) + else swipe_left(); } diff --git a/mobile/shop/shop.head.php b/mobile/shop/shop.head.php index 255e695ec..850ffb41c 100644 --- a/mobile/shop/shop.head.php +++ b/mobile/shop/shop.head.php @@ -40,7 +40,7 @@ include_once(G5_LIB_PATH.'/popular.lib.php');