sysadmin/ct-dtv-hx0100-002kwos
1
0
Fork 0
Code Issues 5 Pull Requests Actions Packages Projects Releases Wiki Activity

issue #11 Done amenity quantity control pop ui.

Browse Source
This commit is contained in:
Paul Kim
2024-03-15 17:43:02 +09:00
parent 08ad96e59b
commit d805f4bb44
5 changed files with 1079 additions and 99 deletions
Download Patch File Download Diff File Expand all files Collapse all files

449
procentric/application/theme/HJS00001/hoteltv.app.full.popup.css
View File

@@ -432,7 +432,7 @@
/********************************************************************************
* AMENITY STYLE [ START HERE] *
********************************************************************************/
/*[AM1. Amenity bg style ] */
/*[AM1. Amenity style ] */
.popup .amenity {
top: 0px;
left: 0px;
@@ -447,6 +447,7 @@
padding: 0;
}
/*[AM1-1. Amenity bg style ] */
.popup .amenity .bg {
position: absolute;
top: 0px;
@@ -465,11 +466,12 @@
padding: 0;
}
/*[AM1-1-1. Amenity bg: owl style ] */
.popup .amenity .bg .owl-carousel .owl-stage .owl-item {
width: 100%;
}
/*[AM1-1-1-1. Amenity bg: owl: top gradient style ] */
.popup .amenity .bg .owl-carousel .owl-stage .top_gradient{
top: 0;
left: 0;
@@ -478,6 +480,7 @@
background: linear-gradient(0deg, rgba(7,8,11,0) 0%, rgba(7,8,11,0.5) 45%, rgba(7,8,11,0.9) 100%);
}
/*[AM1-1-1-2. Amenity bg: owl: bottom gradient style ] */
.popup .amenity .bg .owl-carousel .owl-stage .bottom_gradient{
position: absolute;
left: 0;
@@ -487,7 +490,7 @@
background: linear-gradient(0deg, rgba(7,8,11,0.9) 0%, rgba(7,8,11,0.5) 65%, rgba(7,8,11,0) 100%);
}
/*[AM1-1-1-3. Amenity bg: owl: amenity item sel window ] */
.popup .amenity .bg .owl-carousel .owl-stage .am_item_sel_win {
position: absolute;
left: 21px;
@@ -501,6 +504,7 @@
}
.popup .amenity .bg .owl-carousel .owl-stage .am_item_sel_win .winleft {
position: relative;
width: 902px;
height: 100%;
margin: 0;
@@ -652,6 +656,7 @@
/**** Amenity Item Description ::> */
.popup .amenity .bg .owl-carousel .owl-stage .am_item_sel_win .winright {
position: relative;
width: 902px;
height: 740px;
margin: 0;
@@ -693,6 +698,7 @@
}
.popup .amenity .bg .owl-carousel .owl-stage .am_item_sel_win .winright .amItemDescDetails div#description{
height:174px;
line-height: 30px;
font-size: 30px;
white-space: pre-wrap;
@@ -701,10 +707,382 @@
padding: 14px 0px 0px 0px;
}
/*[AM1-1-1-4. Amenity bg: owl: selected item cart style window ] */
.popup .amenity .bg .owl-carousel .owl-stage .am_item_sel_cart_win {
position: absolute;
left: 21px;
top: 207px;
width: 1874px;
height: 740px;
margin: 0;
padding: 0;
/* background: rgba(114,18,22,0.65); */
display: flex;
}
.popup .amenity .bg .owl-carousel .owl-stage .am_item_sel_cart_win .winleft {
position: relative;
width: 902px;
height: 100%;
margin: 0;
padding: 0;
background: rgba(14,18,22,0.8);
margin: 0px 10px 0px 25px;
color: rgb(249, 249, 249);
border-top: 5px solid rgba(121,121,121,1);
border-bottom: 5px solid rgba(121,121,121,1);
/* border-top: 6px solid rgba(218,165,32,1);
border-bottom: 6px solid rgba(218,165,32,1); */
/* display: none; */
}
.popup .amenity .bg .owl-carousel .owl-stage .am_item_sel_cart_win .winleft>.title{
height: 54px;
width: 96%;
line-height: 54px;
font-size: 44px;
white-space: pre-wrap;
text-overflow: ellipsis;
overflow: hidden;
border-bottom: 4px solid rgb(235,235,235);
filter: drop-shadow(0 0 5px rgb(0, 0, 0));
margin: 10px 2% 0px 2%;
}
.popup .amenity .bg .owl-carousel .owl-stage .am_item_sel_cart_win .winleft>.control{
position: relative;
height: 254px;
width: 96%;
padding: 20px 2% 20px 2%;
}
.popup .amenity .bg .owl-carousel .owl-stage .am_item_sel_cart_win .winleft>.control #img_thumbnail{
width: 42%;
height: 228px;
background-repeat: no-repeat;
background-position: center center;
background-size: contain;
float: left;
}
.popup .amenity .bg .owl-carousel .owl-stage .am_item_sel_cart_win .winleft>.control>.quantity{
height: 228px;
width: 58%;
display: flex;
float: left;
flex-direction: row;
flex-wrap: wrap;
padding: 0px 30px 0px 30px;
overflow: hidden;
}
.popup .amenity .bg .owl-carousel .owl-stage .am_item_sel_cart_win .winleft>.control #lable_quantity{
line-height: 137px;
width: 50%;
height: 60%;
font-size: 38px;
text-align: center;
}
.popup .amenity .bg .owl-carousel .owl-stage .am_item_sel_cart_win .winleft>.control #value_quantity{
line-height: 137px;
width: 50%;
height: 60%;
font-size: 52px;
text-align: center;
color: rgba(218,165,32,1.0);
background-image: url(./images/quantity_edit_arrow.png);
background-size: contain;
background-repeat: no-repeat;
background-position: center;
}
.popup .amenity .bg .owl-carousel .owl-stage .am_item_sel_cart_win .winleft>.control #lable_amount{
line-height: 91px;
width: 50%;
height: 40%;
font-size: 38px;
text-align: center;
}
.popup .amenity .bg .owl-carousel .owl-stage .am_item_sel_cart_win .winleft>.control #value_amount{
line-height: 91px;
width: 50%;
height: 40%;
font-size: 52px;
text-align: center;
color: rgba(218,165,32,1.0);
}
.popup .amenity .bg .owl-carousel .owl-stage .am_item_sel_cart_win .winleft>.description{
height: 316px;
width: 100%;
padding: 20px 2% 20px 2%;
}
.popup .amenity .bg .owl-carousel .owl-stage .am_item_sel_cart_win .winleft>.description>#title{
height: 54px;
width: 100%;
line-height: 54px;
font-size: 44px;
white-space: pre-wrap;
text-overflow: ellipsis;
overflow: hidden;
border-bottom: 4px solid rgb(235,235,235);
filter: drop-shadow(0 0 5px rgb(0, 0, 0));
}
.popup .amenity .bg .owl-carousel .owl-stage .am_item_sel_cart_win .winleft>.description>#details{
/* height:174px; */
line-height: 30px;
font-size: 30px;
white-space: pre-wrap;
text-overflow: ellipsis;
overflow: hidden;
padding: 14px 0px 0px 0px;
}
.popup .amenity .bg .owl-carousel .owl-stage .am_item_sel_cart_win .winleft>.buttons{
line-height: 65px;
height: 65px;
width: 100%;
display: flex;
float: left;
flex-direction: row;
flex-wrap: nowrap;
padding: 0px 30px 0px 30px;
overflow: hidden;
text-align: center;
font-size: 32px;
color: rgba(51,51,51,1.0);
}
.popup .amenity .bg .owl-carousel .owl-stage .am_item_sel_cart_win .winleft>.buttons>div{
border-radius: 14px;
background-color: rgba(255,255,255,1.0);
}
.popup .amenity .bg .owl-carousel .owl-stage .am_item_sel_cart_win .winleft>.buttons>div.focus{
/*border: 8px solid rgba(218,165,32,1.0); */
/* color: rgba(0,0,0,1); */
/* background-color: rgba(218,165,32,1.0); */
background-color: rgba(173,255,47,1.0);
}
.popup .amenity .bg .owl-carousel .owl-stage .am_item_sel_cart_win .winleft>.buttons #btn_addtocart{
/* border-radius: 14px; */
/* background-color: rgba(255,255,255,1.0); */
margin: 0px 20px 0px 0px;
}
.popup .amenity .bg .owl-carousel .owl-stage .am_item_sel_cart_win .winleft>.buttons #btn_ordernow{
/* border-radius: 14px; */
/* background-color: rgba(255,255,255,1.0); */
margin: 0px 20px 0px 20px;
}
.popup .amenity .bg .owl-carousel .owl-stage .am_item_sel_cart_win .winleft>.buttons #btn_back{
/* border-radius: 14px; */
/* background-color: rgba(255,255,255,1.0); */
margin: 0px 0px 0px 20px;
}
/** Amenity slider style */
.popup .amenity .bg .owl-carousel .owl-stage .am_item_sel_cart_win .winright {
position: relative;
width: 902px;
height: 740px;
margin: 0;
padding: 0;
background: rgba(14,18,22,0.8);
margin: 0px 25px 0px 10px;
color: rgb(249, 249, 249);
border-top: 5px solid rgba(121,121,121,1);
border-bottom: 5px solid rgba(121,121,121,1);
/* border-top: 6px solid rgba(218,165,32,1);
border-bottom: 6px solid rgba(218,165,32,1); */
/* display: none; */
}
.popup .amenity .bg .owl-carousel .owl-stage .am_item_sel_cart_win .winright>.title{
height: 54px;
width: 96%;
line-height: 54px;
font-size: 44px;
white-space: pre-wrap;
text-overflow: ellipsis;
overflow: hidden;
border-bottom: 4px solid rgb(235,235,235);
filter: drop-shadow(0 0 5px rgb(0, 0, 0));
margin: 10px 2% 0px 2%;
}
.popup .amenity .bg .owl-carousel .owl-stage .am_item_sel_cart_win .winright>.cart_table{
position: relative;
height: 550px;
width: 100%;
padding: 20px 2% 20px 2%;
}
/**** Amenity Category item ::> Table Header */
.popup .amenity .bg .owl-carousel .owl-stage .am_item_sel_cart_win .winright>.cart_table>.tbl_header {
width:100%;
line-height: 54px;
font-size: 30px;
text-align: center;
/* margin: 5px 0 15px 0; */
border-bottom: 4px solid rgba(121,121,121,1);
/* border-top: 2px solid rgba(121,121,121,1); */
}
.popup .amenity .bg .owl-carousel .owl-stage .am_item_sel_cart_win .winright>.cart_table>.tbl_header tbody tr {
height: 54px;
max-height: 54px;
background-color: rgba(21, 27, 34, 1);
}
.popup .amenity .bg .owl-carousel .owl-stage .am_item_sel_cart_win .winright>.cart_table>.tbl_header tbody tr>#title {
width: 50%;
float: left;
/* text-align: left; */
padding: 0 0px 0 80px;
}
.popup .amenity .bg .owl-carousel .owl-stage .am_item_sel_cart_win .winright>.cart_table>.tbl_header tbody tr>#quantity {
width: 25%;
float: left;
}
.popup .amenity .bg .owl-carousel .owl-stage .am_item_sel_cart_win .winright>.cart_table>.tbl_header tbody tr>#amount {
width: 25%;
float: left;
padding: 0px 30px 0 0px;
}
/**** Amenity Category item ::> Table Recored */
.popup .amenity .bg .owl-carousel .owl-stage .am_item_sel_cart_win .winright>.cart_table>.tbl_record {
/* height: 284px;*/
width:100%;
line-height: 54px;
font-size: 30px;
text-align: center;
/* margin: 5px 0 15px 0; */
}
.popup .amenity .bg .owl-carousel .owl-stage .am_item_sel_cart_win .winright>.cart_table>.tbl_record tbody {
/* height: 285px; */
overflow-y: auto;
display: block;
}
.popup .amenity .bg .owl-carousel .owl-stage .am_item_sel_cart_win .winright>.cart_table>.tbl_record tbody tr {
/* height: 52px; */
display: block;
background-color: rgba(36, 45, 57, 1);
}
.popup .amenity .bg .owl-carousel .owl-stage .am_item_sel_cart_win .winright>.cart_table>.tbl_record tbody tr>.cartItem {
height: 52px;
width: 100%;
font-size: 30px;
/* line-height: 54px; */
border-bottom: 2px solid rgb(21, 27, 34);
}
.popup .amenity .bg .owl-carousel .owl-stage .am_item_sel_cart_win .winright>.cart_table>.tbl_record tbody tr>.cartItem.focus {
/* border-bottom: 2px solid rgb(255, 192, 0); */
border-bottom: 2px solid rgb(173, 255, 47);
background: rgba(29,36,47,1.0);
}
.popup .amenity .bg .owl-carousel .owl-stage .am_item_sel_cart_win .winright>.cart_table>.tbl_record tbody tr>.cartItem.unavailable {
/* border-bottom: 2px solid rgb(255, 192, 0); */
background: rgba(21,27,34,1.0);
color: rgb(121, 121, 121);
}
.popup .amenity .bg .owl-carousel .owl-stage .am_item_sel_cart_win .winright>.cart_table>.tbl_record tbody tr>.cartItem.focus.unavailable {
/* border-bottom: 2px solid rgb(255, 192, 0); */
border-bottom: 2px solid rgb(173, 255, 47);
background: rgba(21,27,34,1.0);
color: rgb(121, 121, 121);
}
.popup .amenity .bg .owl-carousel .owl-stage .am_item_sel_cart_win .winright>.cart_table>.tbl_record tbody tr>.cartItem>#title {
width: 50%;
float: left;
padding: 0px 0px 0px 20px;
}
.popup .amenity .bg .owl-carousel .owl-stage .am_item_sel_cart_win .winright>.cart_table>.tbl_record tbody tr>.cartItem>#quantity {
width: 20%;
float: left;
text-align: center;
}
.popup .amenity .bg .owl-carousel .owl-stage .am_item_sel_cart_win .winright>.cart_table>.tbl_record tbody tr>.cartItem>#amount {
width: 30%;
float: left;
/* text-align: right; */
padding: 0px 30px 0 0px;
}
.popup .amenity .bg .owl-carousel .owl-stage .am_item_sel_cart_win .winright>.cart_table>.tbl_record ::-webkit-scrollbar {
display: block;
width: 20px;
/* 세로축 스크롤바 길이 */
height: 20px;
/* 가로축 스크롤바 길이 */
}
.popup .amenity .bg .owl-carousel .owl-stage .am_item_sel_cart_win .winright>.cart_table>.tbl_record ::-webkit-scrollbar-track {
background-color: rgb(67, 82, 105);
}
.popup .amenity .bg .owl-carousel .owl-stage .am_item_sel_cart_win .winright>.cart_table>.tbl_record ::-webkit-scrollbar-track-piece {
background-color: rgb(80, 98, 124);
}
.popup .amenity .bg .owl-carousel .owl-stage .am_item_sel_cart_win .winright>.cart_table>.tbl_record ::-webkit-scrollbar-thumb {
border-radius: 8px;
background-color: rgb(51, 63, 80);
}
.popup .amenity .bg .owl-carousel .owl-stage .am_item_sel_cart_win .winright>.cart_table>.tbl_record ::-webkit-scrollbar-button:start {
display: none;
/* background-color: orange; */
/* Top, Left 방향의 이동버튼 */
}
.popup .amenity .bg .owl-carousel .owl-stage .am_item_sel_cart_win .winright>.cart_table>.tbl_record ::-webkit-scrollbar-button:end {
display: none;
/* background-color: orange; */
/* Bottom, Right 방향의 이동버튼 */
}
.popup .amenity .bg .owl-carousel .owl-stage .am_item_sel_cart_win .winright>.summary{
position: relative;
height: 65px;
width: 96%;
padding: 20px 2% 20px 2%;
/* background: blue; */
}
/********************************************************************************/
/*[AM2. Amenity slider style ] */
.popup .amenity .slider {
position: absolute;
top: 60px;
@@ -821,6 +1199,69 @@
padding: 0;
}
/*[AMx. Amenity cart style ] */
.popup .amenity>div.cart {
position: absolute;
top: 0px;
left: 0px;
width: 100%;
height: 946px;
padding: 0px;
overflow: hidden;
display: none;
background: rgba(0,0,0,0.7);
z-index: 1;
}
.popup .amenity>div.cart>div {
top: 60px;
left: 0px;
width: 100%;
height: 100%;
display: flex;
/* background: rgba(1,1,1,1.0); */
}
.popup .amenity>div.cart .menu {
width: 902px;
height: 876px;
margin: 0px 37px 0px 21px;
display: block;
/* background: rgba(100,1,1,1.0); */
}
.popup .amenity>div.cart .items {
width: 902px;
height: 876px;
margin: 0px 37px 0px 21px;
display: block;
/* background: rgba(100,1,1,1.0); */
}
.popup .amenity>div.cart .menu div#title {
}
.popup .amenity>div.cart .menu div#control {
}
.popup .amenity>div.cart .menu div#control #thumb {
}
.popup .amenity>div.cart .menu div#control #quantity {
}
.popup .amenity>div.cart .menu div#description {
}
/********************************************************************************/
/* AMENITY STYLE [ END ] */
/********************************************************************************/

BIN
procentric/application/theme/HJS00001/images/quantity_edit_arrow.png Executable file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 2.2 KiB