모바일 디자인 적용

src/main/webapp/mobile/app/mrtnmng/MRTNMNG02010.html

@@ -1,50 +1,52 @@
 <section id="ITP_MOBILE_MRTNMNG02010">
 	<div id="ITP_AJAX_MRTNMNG02010_LIST_CONTAINER" style="display: none;">
 		<div class="content">
-			<form id="ITP_FORM_MRTNMNG02010_LIST_SEARCH" class="form-horizontal" onsubmit="return false;">
-				<input type="hidden" id="ITP_FORM_MRTNMNG02010_LIST_SEARCH_BRAND_ID" name="sbrandId" value="">
-				<input type="hidden" id="ITP_FORM_MRTNMNG02010_LIST_SEARCH_STORE_ID" name="sstoreId" value="">
-			  	<div class="line header">
-					<div class="itp_search_header"><img src="../img/right_arrow_pink.png" alt="">반품요청현황</div>
-		      	</div>
-				<div class="line mt5">
-					<label>반품요청일</label>
-					<div class="input-group date_to date">
-						<input type="text" id="ITP_FORM_MRTNMNG02010_LIST_SEARCH_FROM_DT" name="fromDt" class="itp_input date">
-						<div class="at">~</div>
-						<input type="text" id="ITP_FORM_MRTNMNG02010_LIST_SEARCH_TO_DT" name="toDt" class="itp_input date">
+			<div class="content_fix">
+				<form id="ITP_FORM_MRTNMNG02010_LIST_SEARCH" class="form-horizontal" onsubmit="return false;">
+					<input type="hidden" id="ITP_FORM_MRTNMNG02010_LIST_SEARCH_BRAND_ID" name="sbrandId" value="">
+					<input type="hidden" id="ITP_FORM_MRTNMNG02010_LIST_SEARCH_STORE_ID" name="sstoreId" value="">
+				  	<div class="line header">
+						<div class="itp_search_header"><img src="../img/right_arrow_pink.png" alt="">반품요청현황</div>
+			      	</div>
+					<div class="line mt5">
+						<label>반품요청일</label>
+						<div class="input-group date_to date">
+							<input type="text" id="ITP_FORM_MRTNMNG02010_LIST_SEARCH_FROM_DT" name="fromDt" class="itp_input date">
+							<div class="at">~</div>
+							<input type="text" id="ITP_FORM_MRTNMNG02010_LIST_SEARCH_TO_DT" name="toDt" class="itp_input date">
+						</div>
 					</div>
-				</div>
-				<div class="line">
-					<label>반품요청상태</label>
-					<div class="float_left">
-						<select id="ITP_FORM_MRTNMNG02010_LIST_SEARCH_RTN_REQ_ST_CD" data-select-code="RTN_REQ_ST_CD" class="stcd" name="srtnReqStCd">
-							<option value="">상태</option>
-						</select>
+					<div class="line">
+						<label>반품요청상태</label>
+						<div class="float_left">
+							<select id="ITP_FORM_MRTNMNG02010_LIST_SEARCH_RTN_REQ_ST_CD" data-select-code="RTN_REQ_ST_CD" class="stcd" name="srtnReqStCd">
+								<option value="">상태</option>
+							</select>
+						</div>
 					</div>
-				</div>
-				<div class="line">
-					<label>납품장소</label>
-					<div class="float_left">
-						<input id="ITP_FORM_MRTNMNG02010_LIST_SEARCH_WHS_NM" class="" name="swhsNm" type="text" placeholder="납품창고" readonly>
-						<input type="hidden" id="ITP_FORM_MRTNMNG02010_LIST_SEARCH_WHS_ID" name="swhsId" value="">
-						<div class="itp_input_btn">
-							<button id="ITP_BTN_MRTNMNG02010_LIST_SEARCH_WHS_NM"><img src="../img/search.png" alt=""></button>
+					<div class="line">
+						<label>납품장소</label>
+						<div class="float_left">
+							<input id="ITP_FORM_MRTNMNG02010_LIST_SEARCH_WHS_NM" class="" name="swhsNm" type="text" placeholder="납품창고" readonly>
+							<input type="hidden" id="ITP_FORM_MRTNMNG02010_LIST_SEARCH_WHS_ID" name="swhsId" value="">
+							<div class="itp_input_btn">
+								<button id="ITP_BTN_MRTNMNG02010_LIST_SEARCH_WHS_NM"><img src="../img/search.png" alt=""></button>
+							</div>
+						</div>
+						<div class="float_right_btn">
+							<button id="ITP_BTN_MRTNMNG02010_LIST_DELETE_WHS_NM"><img src="../img/delete.png" alt=""></button>
 						</div>
 					</div>
-					<div class="float_right_btn">
-						<button id="ITP_BTN_MRTNMNG02010_LIST_DELETE_WHS_NM"><img src="../img/delete.png" alt=""></button>
+					<div class="line">
+						<div class="search">
+							<button id="ITP_BTN_MRTNMNG02010_LIST_SEARCH" class="btn-primary btn-sm ADB">검색</button>
+						</div>
 					</div>
-				</div>
-				<div class="line">
-					<div class="search">
-						<button id="ITP_BTN_MRTNMNG02010_LIST_SEARCH" class="btn-primary btn-sm ADB">검색</button>
+					<div class="table_header">
+						<h1><반품 요청 내역></h1>
 					</div>
-				</div>
-				<div class="table_header">
-					<h1><반품 요청 내역></h1>
-				</div>
-			</form>
+				</form>
+			</div>
 		</div>
 		<div id="ITP_LIST_MRTNMNG02010_LIST_AREA" class="scroll_area row-8">
 			<ul id="ITP_LIST_MRTNMNG02010_LIST_ROWS" class="mb_0 panel-group"></ul>
@@ -84,47 +86,49 @@
 	</div>
 	<div id="ITP_AJAX_MRTNMNG02010_DETAIL_CONTAINER" style="display: none;">
 		<div class="content">
-			<div class="line header">
-				<div class="itp_search_header"><img src="../img/right_arrow_pink.png" alt="">반품요청현황</div>
-	      	</div>
-			<div class="line">
-				<label>반품요청일</label>
-				<div class="line_right">
-					<div class="fnRtnReqDt">2022.10.10</div>
+			<div class="content_fix">
+				<div class="line header">
+					<div class="itp_search_header"><img src="../img/right_arrow_pink.png" alt="">반품요청현황</div>
+		      	</div>
+				<div class="line">
+					<label>반품요청일</label>
+					<div class="line_right">
+						<div class="fnRtnReqDt">2022.10.10</div>
+					</div>
 				</div>
-			</div>
-			<div class="line">
-				<label>반품요청금액</label>
-				<div class="line_right">
-					<div class="fnRtnReqAmt">1,000,000</div>
+				<div class="line">
+					<label>반품요청금액</label>
+					<div class="line_right">
+						<div class="fnRtnReqAmt">1,000,000</div>
+					</div>
 				</div>
-			</div>
-			<div class="line">
-				<label>반품장소</label>
-				<div class="line_right">
-					<div class="fnRtnWhsNm">누리 테스트 창고이름 어쩌고</div>
+				<div class="line">
+					<label>반품장소</label>
+					<div class="line_right">
+						<div class="fnRtnWhsNm">누리 테스트 창고이름 어쩌고</div>
+					</div>
 				</div>
-			</div>
-			<div class="line">
-				<label>반려일자</label>
-				<div class="line_right">
-					<div class="fnRjctDt">2022.20.10</div>
+				<div class="line">
+					<label>반려일자</label>
+					<div class="line_right">
+						<div class="fnRjctDt">2022.20.10</div>
+					</div>
 				</div>
-			</div>
-			<div class="line">
-				<label>반려담당자</label>
-				<div class="line_right">
-					<div class="fnRjctMgrNm">홍길동</div>
+				<div class="line">
+					<label>반려담당자</label>
+					<div class="line_right">
+						<div class="fnRjctMgrNm">홍길동</div>
+					</div>
 				</div>
-			</div>
-			<div class="line">
-				<label>반려사유</label>
-				<div class="line_right">
-					<div class="fnRjctRsn">물이 새고 색이 마음에 안들고</div>
+				<div class="line">
+					<label>반려사유</label>
+					<div class="line_right">
+						<div class="fnRjctRsn">물이 새고 색이 마음에 안들고</div>
+					</div>
+				</div>
+				<div class="table_header">
+					<h1><반품 품목></h1>
 				</div>
-			</div>
-			<div class="table_header">
-				<h1><반품 품목></h1>
 			</div>
 		</div>
 		<div id="ITP_LIST_MRTNMNG02010_DETAIL_AREA" class="scroll_area row-7">
@@ -163,38 +167,42 @@
 			<input type="hidden" id="ITP_FORM_MRTNMNG02010_MODIFY_RTN_REQ_MGR_ID" name="rtnReqMgrId" value="">
 			<input type="hidden" id="ITP_FORM_MRTNMNG02010_MODIFY_RTN_REQ_ST_CD" name="rtnReqStCd" value="">
 			<div class="content">
-				<div class="line header">
-					<div class="itp_search_header"><img src="../img/right_arrow_pink.png" alt="">반품요청현황</div>
-		      	</div>
-				<div class="line">
-					<label>반품요청일</label>
-					<input type="text" id="ITP_FORM_MRTNMNG02010_MODIFY_COL_REQ_DT" name="colReqDt" class="itp_input date" data-check-required="empty" data-alert-required="ONLYCHK" data-alert-msg="수거요청일">
-				</div>
-				<div class="line">
-					<label>반품요청금액</label>
-					<div class="input_text">
-						<div class="fnRtnReqAmt">1,000,000원</div>
+				<div class="content_fix">
+					<div class="line header">
+						<div class="itp_search_header"><img src="../img/right_arrow_pink.png" alt="">반품요청현황</div>
+			      	</div>
+					<div class="line">
+						<label>반품요청일</label>
+						<input type="text" id="ITP_FORM_MRTNMNG02010_MODIFY_COL_REQ_DT" name="colReqDt" class="itp_input date" data-check-required="empty" data-alert-required="ONLYCHK" data-alert-msg="수거요청일">
 					</div>
-				</div>
-				<div class="line">
-					<label>반품장소</label>
-					<div class="float_left">
-						<input type="text" id="ITP_FORM_MRTNMNG02010_MODIFY_WHS_NM" class="" name="rtnWhsNm" data-check-required="empty" data-alert-required="ONLYCHK" data-alert-msg="반품장소" placeholder="매장명" readonly />
-						<input type="hidden" id="ITP_FORM_MRTNMNG02010_MODIFY_WHS_ID" class="form-control itp_input" name="rtnWhsId" value="" />
-						<input type="hidden" id="ITP_FORM_MRTNMNG02010_MODIFY_LOCATION" class="form-control itp_input" name="rtnLocation" value="" />
-						<div class="itp_input_btn">
-							<button id="ITP_BTN_MRTNMNG02010_MODIFY_SEARCH_WHS_NM"><img src="../img/search.png" alt=""></button>
+					<div class="line">
+						<label>반품요청금액</label>
+						<div class="float_left">
+							<div class="input_text">
+								<div class="fnRtnReqAmt">1,000,000원</div>
+							</div>
+						</div>
+					</div>
+					<div class="line">
+						<label>반품장소</label>
+						<div class="float_left">
+							<input type="text" id="ITP_FORM_MRTNMNG02010_MODIFY_WHS_NM" class="" name="rtnWhsNm" data-check-required="empty" data-alert-required="ONLYCHK" data-alert-msg="반품장소" placeholder="매장명" readonly />
+							<input type="hidden" id="ITP_FORM_MRTNMNG02010_MODIFY_WHS_ID" class="form-control itp_input" name="rtnWhsId" value="" />
+							<input type="hidden" id="ITP_FORM_MRTNMNG02010_MODIFY_LOCATION" class="form-control itp_input" name="rtnLocation" value="" />
+							<div class="itp_input_btn">
+								<button id="ITP_BTN_MRTNMNG02010_MODIFY_SEARCH_WHS_NM"><img src="../img/search.png" alt=""></button>
+							</div>
+						</div>
+						<div class="float_right_btn">
+							<button id="ITP_BTN_MRTNMNG02010_MODIFY_DELETE_WHS_NM"><img src="../img/delete.png" alt=""></button>
 						</div>
 					</div>
-					<div class="float_right_btn">
-						<button id="ITP_BTN_MRTNMNG02010_MODIFY_DELETE_WHS_NM"><img src="../img/delete.png" alt=""></button>
+					<div class="table_header">
+						<h1><반품 품목></h1>
+						<button type="button" id="ITP_BTN_MRTNMNG02010_MODIFY_DEL_ROW" class="btn-primary btn-sm ADB">품목삭제</button>
+						<button type="button" id="ITP_BTN_MRTNMNG02010_MODIFY_ADD_ROW" class="btn-primary btn-sm ADB">품목추가</button>
 					</div>
 				</div>
-				<div class="table_header">
-					<h1><반품 품목></h1>
-					<button type="button" id="ITP_BTN_MRTNMNG02010_MODIFY_DEL_ROW" class="btn-primary btn-sm ADB">품목삭제</button>
-					<button type="button" id="ITP_BTN_MRTNMNG02010_MODIFY_ADD_ROW" class="btn-primary btn-sm ADB">품목추가</button>
-				</div>
 			</div>
 			<div id="ITP_LIST_MRTNMNG02010_MODIFY_AREA" class="scroll_area row-7">
 				<ul id="ITP_LIST_MRTNMNG02010_MODIFY_ROWS" class="mb_0 panel-group"></ul>
@@ -224,8 +232,8 @@
 				</div>
 			</div>
 			<div class="button_bar">
-				<button id="ITP_BTN_MRTNMNG02010_MODIFY_REQ_ORDER" class="col_3 btn-primary REQ">반품요청</button>
-				<button id="ITP_BTN_MRTNMNG02010_MODIFY_TEMP_SAVE" class="col_3 btn-gray TSA">임시저장</button>
+				<button id="ITP_BTN_MRTNMNG02010_MODIFY_REQ_ORDER" class="col_3 btn-m-orange REQ">반품요청</button>
+				<button id="ITP_BTN_MRTNMNG02010_MODIFY_TEMP_SAVE" class="col_3 btn-w-gray TSA">임시저장</button>
 				<button id="ITP_BTN_MRTNMNG02010_MODIFY_CANCEL" class="col_3 btn-gray CLB">취소</button>
 			</div>
 		</form>
@@ -318,7 +326,7 @@
 					<button id="ITP_BTN_MRTNMNG02010_POP_ITEM_SEARCH"><img src="../img/search.png"></button>
 				</div>
 				<div class="select_btn">
-					<button id="ITP_BTN_MRTNMNG02010_POP_ITEM_NM" class="btn_blue">품목명 <img src="../img/arrow_down.png"></button>
+					<button id="ITP_BTN_MRTNMNG02010_POP_ITEM_NM" class="btn_red">품목명 <img src="../img/arrow_down.png"></button>
 				</div>
 			</form>
 			<div id="ITP_LIST_MRTNMNG02010_POP_ITEM_AREA" class="popup_scroll">

src/main/webapp/mobile/css/style.css

@@ -94,12 +94,12 @@ section .popup2 .pop .popup_scroll li .left .nomal {float: left; margin: 15px 0p
 section .popup2 .pop .popup_scroll li .left .history {font-weight: 700; font-size: 2.4rem; margin-left: 20px;}
 section .popup2 .pop .popup_scroll li .left .history input{width: 150px;}
 section .popup2 .pop .popup_scroll li .scroll_left {float: left; display:grid; width:50%;}
-section .popup2 .pop .popup_scroll li .scroll_left div {text-overflow:ellipsis; overflow:hidden; white-space:nowrap; text-align:left; float: left; font-size: 18px; font-weight: 100; width: 100%; margin:8px 6px -6px 10px;}
+section .popup2 .pop .popup_scroll li .scroll_left div {text-overflow:ellipsis; overflow:hidden; white-space:nowrap; text-align:left; float: left; font-size: 18px; font-weight: 100; width: 80%; margin:8px 6px -6px 10px;}
 section .popup2 .pop .popup_scroll li .scroll_left .con_2 {padding-top:0px;}
-section .popup2 .pop .popup_scroll li .scroll_left .mg_0 {margin:0;}
-section .popup2 .pop .popup_scroll li .scroll_left .mg_0 div {text-overflow:ellipsis; overflow:hidden; white-space:nowrap; width:46%; margin:0; padding: 8px 2px 0px 2px;}
+section .popup2 .pop .popup_scroll li .scroll_left .mg_0 {margin:0; width:100%;}
+section .popup2 .pop .popup_scroll li .scroll_left .mg_0 div {text-overflow:ellipsis; overflow:hidden; white-space:nowrap; width:40%; margin:0; padding: 8px 2px 0px 2px;}
 section .popup2 .pop .popup_scroll li .scroll_left .mg_0 .type_hide {width:auto;}
-section .popup2 .pop .popup_scroll li .scroll_left .sub{font-size:14pt; color:gray; width:auto !important;}
+section .popup2 .pop .popup_scroll li .scroll_left .sub{font-size:14pt; color:gray; width:75px !important;}
 section .popup2 .pop .popup_scroll li .scroll_left .amt{font-size:14pt; color:#b88278;}
 section .popup2 .pop .popup_scroll li .scroll_right {float: right;}
 section .popup2 .pop .popup_scroll li .scroll_right input[type=checkbox]{width:27px; margin:18px 11px 0 11px;}
@@ -318,7 +318,8 @@ input .day {margin: 18%; width: 45%; height: 80px; float: right;}
   padding-top: 49px;
   font-size: 16px;
 }
-.content {position: fixed; z-index: 10; width:100%; background: #f5f6f6; border-bottom:1px solid #E0B8AB;}
+.content {position: fixed; display:contents; z-index: 10; width:100%; background: #f5f6f6; border-bottom:1px solid #E0B8AB;}
+.content .content_fix {background: #f5f6f6; border-bottom:1px solid #E0B8AB;}
 .content .content_inside {background: #f5f6f6; border-bottom:1px solid #E0B8AB;}
 .content .header {width:100% !important; margin:0 !important;}
 .content .line {position: relative; display: inline-block; width: 332px; margin:0 auto; height: 40px; margin-bottom: -10px;}
@@ -352,7 +353,7 @@ input .day {margin: 18%; width: 45%; height: 80px; float: right;}
 .content .line .float_right_btn button img {width:18px; height:18px;}
 .content .line .float_left select {float: left; width: 100%; height: 34px; margin-top:3px; border: 1px solid #aaa; border-radius:5px; font-size: 14pt; font-weight:100;}
 .content .line .line_right {float: left; margin-right: 0%; width:57%}
-.content .line .line_right div {text-overflow:ellipsis; overflow:hidden; white-space:nowrap; width:100%; text-align:right; float: right; font-size: 14pt; margin-top: 7px; margin-right:0%; color:#555;}
+.content .line .line_right div {text-overflow:ellipsis; overflow:hidden; white-space:nowrap; width:100%; text-align:right; float: right; font-size: 14pt; margin-top: 7px; margin-right:0%; color:#555;padding-right:5px;}
 .content .line .line_right input {position: relative; text-align: right; margin-right: 84px;}
 .content .line .line_right input.m9 {margin-right:93px;}
 .content .line .line_right input.left {text-align: left;}
@@ -412,7 +413,7 @@ input .day {margin: 18%; width: 45%; height: 80px; float: right;}
 } */
 
 .button_bar {width: 100%; height: 47px; background: #ccc; position: fixed; bottom: 0px; z-index: 10;}
-.button_bar button.col_3{float: left; height: 47px; font-size: 14px; margin: 0; width: 33.3%; font-weight: 100; border: 1px solid #aaa;}
+.button_bar button.col_3{float: left; height: 47px; font-size: 14px; margin: 0; width: 33.3%; font-weight: 100; border: none;}
 .button_bar button.btn-gray {border-radius: 0px; background-color: #858076; color: #eee;}
 .button_bar button.btn-gray:active {border:3px solid #858076; background-color: #fff; color:#B7B8B8;}
 .button_bar button.btn-w-gray{border-radius: 0px; background-color: #b6b8b8; color: #eee;}
@@ -452,7 +453,7 @@ input .day {margin: 18%; width: 45%; height: 80px; float: right;}
 .scroll_area li .left_info .thick {float:left; text-align: left; width: 90%; height:36px; font-weight: 100;}
 .scroll_area li .left_info .thick .itp_item {color:gray;text-overflow:ellipsis; overflow:hidden; white-space:nowrap; width:60%; top:7px; text-align:left; position:relative;}
 .scroll_area li .left_info .thick .itp_gram {color:#aaa; font-size:14pt;}
-.scroll_area li .left_info .thick .itp_amt {color:#b88278; margin-top: 4px;}
+.scroll_area li .left_info .thick .itp_amt {color:#b88278; text-overflow:ellipsis; overflow:hidden; white-space:nowrap; width:60%; top: 7px; position:relative; text-align:left;}
 .scroll_area li .left_info .history {font-weight: 700; font-size: 1.1rem; margin-top:-2px;}
 .scroll_area li .left_info .history input{width: 150px;}
 .scroll_area li.history_list {height: 140px; padding-top:8px;}
@@ -473,7 +474,7 @@ input .day {margin: 18%; width: 45%; height: 80px; float: right;}
 .scroll_area li.history_list6 {height: 110px; padding-top:5px;}
 .scroll_area li.history_list7 {height: 120px; padding-top:5px;}
 .scroll_area li .history_info {width: auto;}
-.scroll_area li .left {width:100%; height:26px; margin-top:0px;}
+.scroll_area li .left {width:100%; height:27px; margin-top:0px;}
 .scroll_area li .btn_list {width:calc(100% - 65px); height:35px; padding-top:12px;}
 .scroll_area li .left div {display: inline-block;}
 .scroll_area li .left label{font-size: 1.1rem;}
@@ -557,7 +558,6 @@ input .day {margin: 18%; width: 45%; height: 80px; float: right;}
 #ITP_FOOTER .itp_modal .itp_form .itp_mip {padding: 8px 5px 4px 12px; height:42px; text-align: left; font-size: 16px; border:1px solid #ccc;}
 
 @media screen and (min-width: 550px) {
-	.content .line .line_right {width:80%}
 	.content .line div.date_to input {width:47%}
 	.content .line .float_left.name {width:76%;}
 	.modal-dialog {margin:auto 20% !important;}
@@ -566,15 +566,19 @@ input .day {margin: 18%; width: 45%; height: 80px; float: right;}
 	.content .line .search_wrap select {width:78%;}	
 	
 }
-@media screen and (min-width: 500px) {
-	.content .line {margin:-4px 0px; width:625px;}
-}
+
 @media screen and (max-width: 380px) {
 	section .popup2 .barcode_area {width: 250px; height: 250px;}
 /* 	section .popup2 .pop .popup_scroll li .scroll_left .mg_0 {margin:0; width:100px;}
 	.type_hide {display:none;}
 	section .popup2 .pop .popup_scroll li .scroll_left .mg_0 div {margin:0; padding: 4px 8px 0px 2px;} */
 }
+@media screen and (min-width: 650px) {
+	.content .line {margin:0 100px -10px 100px;}
+}
+@media screen and (min-width: 600px) {
+	.scroll_area li .left .nomal  {margin:0 100px;
+}
 @media screen and (max-height: 720px) {
 	#ITP_LOGIN {position:fixed; top:80px; max-width: 500px; margin: 0 auto;}
 	.bg_gray {position:relative; top:-90px;}