Skip to content

GeoInt_SIDT
GeoInt_SIDT
Commit e3c68d64 authored by Sergio Adrian Gongora Euan's avatar Sergio Adrian Gongora Euan
Browse files
Options

reponsive the list products

parent f06929bc
Show whitespace changes
Inline Side-by-side
Showing with 210 additions and 120 deletions
catalog/static/catalog/css/body.css
View file @ e3c68d64
...@@ -111,7 +111,10 @@ li.pol { ...@@ -111,7 +111,10 @@ li.pol {
.pol-src { .pol-src {
font: 10px Helvetica; font: 10px Helvetica;
font-style: italic; font-style: italic;
padding-left: 280px; text-align: right;
padding-right: 2px;
padding-top: 5px;
/* padding-left: 280px; */
} }
/*--------option list classes--------*/ /*--------option list classes--------*/
......
catalog/static/catalog/css/responsivePhone.css
View file @ e3c68d64
/*-------------------------------------------IOS-----------------------------------------*/ /*-------------------------------------------IOS-----------------------------------------*/
/* ----------- iPhone 5, 5S, 5C and 5SE ----------- */
/* ----------- iPhone X ----------- */
/* Portrait and Landscape */ /* Portrait and Landscape */
@media only screen @media only screen
and (min-device-width: 320px) and (min-device-width: 375px)
and (max-device-width: 568px) and (max-device-width: 812px)
and (-webkit-min-device-pixel-ratio: 2) { and (-webkit-min-device-pixel-ratio: 3)
.skin-yellow .main-header .navbar .dropdown-menu li.divider { and (orientation: portrait) {
background-color: rgba(255, 255, 255, 0.1);
}
.skin-yellow .main-header .navbar .dropdown-menu li a { .skin-yellow .main-header .navbar .dropdown-menu li a {
color: #3c8dbc; color: #3c8dbc;
} }
.skin-yellow .main-header .navbar .dropdown-menu li a:hover {
background: #e08e0b; div .info-product-box {
display: none !important;
}
div .product_list_category {
max-height: 163px !important;
} }
#option-list { div #product-list-globe {
margin-top: 8px; max-height: 345px !important;
display: none;
position: absolute;
border-radius: 3px;
background-color: white;
width: 210px !important;
max-height: 541px;
overflow: auto;
left: 26px;
z-index: 1;
} }
} }
/* ----------- iPhone 6, 6S, 7 and 8 ----------- */
/* Portrait and Landscape */
@media only screen @media only screen
and (min-device-width: 375px) and (min-device-width: 375px)
and (max-device-width: 667px) and (max-device-width: 812px)
and (-webkit-min-device-pixel-ratio: 2) { and (-webkit-min-device-pixel-ratio: 3)
.skin-yellow .main-header .navbar .dropdown-menu li.divider { and (orientation: landscape) {
background-color: rgba(255, 255, 255, 0.1);
}
.skin-yellow .main-header .navbar .dropdown-menu li a { .skin-yellow .main-header .navbar .dropdown-menu li a {
color: #3c8dbc; color: #3c8dbc;
} }
.skin-yellow .main-header .navbar .dropdown-menu li a:hover {
background: #e08e0b;
}
#option-list { #option-list {
margin-top: 8px;
display: none;
position: absolute;
border-radius: 3px;
background-color: white;
width: 210px !important; width: 210px !important;
max-height: 541px;
overflow: auto;
left: 26px;
z-index: 1;
} }
div .info-product-box {
top: 10% !important;
left: -251px !important;
height: 80px !important;
width: 92% !important;
}
.info-product-box-img {
height: 80px !important;
width: 80px !important;
}
.info-product-box-img img {
height: 80px !important;
}
.info-product-box .progress,
.info-product-cart-box .progress {
margin: 5px 0px 5px -20px !important;
}
.info-product-box-content {
padding: 2px 1px !important;
}
div .product_list_category {
max-height: 107px !important;
}
div #product-list-globe {
max-height: 194px !important;
}
} }
/* -----------END iPhone X ----------- */
/* ----------- iPhone 6+, 7+ and 8+ ----------- */ /* ----------- iPhone 6+, 7+ and 8+ ----------- */
...@@ -66,119 +71,201 @@ ...@@ -66,119 +71,201 @@
@media only screen @media only screen
and (min-device-width: 414px) and (min-device-width: 414px)
and (max-device-width: 736px) and (max-device-width: 736px)
and (-webkit-min-device-pixel-ratio: 3) { and (-webkit-min-device-pixel-ratio: 3)
.skin-yellow .main-header .navbar .dropdown-menu li.divider { and (orientation: portrait) {
background-color: rgba(255, 255, 255, 0.1);
}
.skin-yellow .main-header .navbar .dropdown-menu li a { .skin-yellow .main-header .navbar .dropdown-menu li a {
color: #3c8dbc; color: #3c8dbc;
} }
.skin-yellow .main-header .navbar .dropdown-menu li a:hover {
background: #e08e0b; div .info-product-box {
display: none !important;
}
div .product_list_category {
max-height: 163px !important;
}
div #product-list-globe {
max-height: 345px !important;
}
}
@media only screen
and (min-device-width: 414px)
and (max-device-width: 736px)
and (-webkit-min-device-pixel-ratio: 3)
and (orientation: landscape) {
.skin-yellow .main-header .navbar .dropdown-menu li a {
color: #3c8dbc;
} }
#option-list { #option-list {
margin-top: 8px;
display: none;
position: absolute;
border-radius: 3px;
background-color: white;
width: 210px !important; width: 210px !important;
max-height: 541px;
overflow: auto;
left: 26px;
z-index: 1;
} }
} div .info-product-box {
top: 17% !important;
left: -251px !important;
height: 80px !important;
width: 92% !important;
}
.info-product-box-img {
height: 80px !important;
width: 80px !important;
}
.info-product-box-img img {
height: 80px !important;
}
.info-product-box .progress,
.info-product-cart-box .progress {
margin: 5px 0px 5px -20px !important;
}
.info-product-box-content {
padding: 2px 1px !important;
}
div .product_list_category {
max-height: 107px !important;
}
/* ----------- iPhone X ----------- */ div #product-list-globe {
max-height: 194px !important;
}
}
/* ----------- END iPhone 6+, 7+ and 8+ ----------- */
/* ----------- iPhone 6, 6S, 7 and 8 ----------- */
/* Portrait and Landscape */ /* Portrait and Landscape */
@media only screen @media only screen
and (min-device-width: 375px) and (min-device-width: 375px)
and (max-device-width: 812px) and (max-device-width: 667px)
and (-webkit-min-device-pixel-ratio: 3) { and (-webkit-min-device-pixel-ratio: 2)
.skin-yellow .main-header .navbar .dropdown-menu li.divider { and (orientation: portrait) {
background-color: rgba(255, 255, 255, 0.1);
}
.skin-yellow .main-header .navbar .dropdown-menu li a { .skin-yellow .main-header .navbar .dropdown-menu li a {
color: #3c8dbc; color: #3c8dbc;
} }
.skin-yellow .main-header .navbar .dropdown-menu li a:hover {
background: #e08e0b; div .info-product-box {
display: none !important;
}
div .product_list_category {
max-height: 163px !important;
}
div #product-list-globe {
max-height: 425px !important;
} }
}
@media only screen
and (min-device-width: 375px)
and (max-device-width: 667px)
and (-webkit-min-device-pixel-ratio: 2)
and (orientation: landscape) {
.skin-yellow .main-header .navbar .dropdown-menu li a {
color: #3c8dbc;
}
#option-list { #option-list {
margin-top: 8px;
display: none;
position: absolute;
border-radius: 3px;
background-color: white;
width: 210px !important; width: 210px !important;
max-height: 541px;
overflow: auto;
left: 26px;
z-index: 1;
} }
}
div .info-product-box {
top: 17% !important;
left: -251px !important;
height: 80px !important;
width: 92% !important;
}
.info-product-box-img {
height: 80px !important;
width: 80px !important;
}
.info-product-box-img img {
height: 80px !important;
}
.info-product-box .progress,
.info-product-cart-box .progress {
margin: 5px 0px 5px -20px !important;
}
.info-product-box-content {
padding: 2px 1px !important;
}
/*-------------------------------------------ANDROID-----------------------------------------*/ div .product_list_category {
max-height: 107px !important;
}
/* ----------- Galaxy S4, S5 and Note 3 ----------- */ div #product-list-globe {
max-height: 194px !important;
}
}
/* ----------- END iPhone 6, 6S, 7 and 8 ----------- */
/* ----------- iPhone 5, 5S, 5C and 5SE ----------- */
/* Portrait and Landscape */ /* Portrait and Landscape */
@media screen @media only screen
and (device-width: 320px) and (min-device-width: 320px)
and (device-height: 640px) and (max-device-width: 568px)
and (-webkit-device-pixel-ratio: 3) { and (-webkit-min-device-pixel-ratio: 2)
.skin-yellow .main-header .navbar .dropdown-menu li.divider { and (orientation: portrait){
background-color: rgba(255, 255, 255, 0.1);
}
.skin-yellow .main-header .navbar .dropdown-menu li a { .skin-yellow .main-header .navbar .dropdown-menu li a {
color: #3c8dbc; color: #3c8dbc;
} }
.skin-yellow .main-header .navbar .dropdown-menu li a:hover {
background: #e08e0b;
}
#option-list { #option-list {
margin-top: 8px;
display: none;
position: absolute;
border-radius: 3px;
background-color: white;
width: 210px !important; width: 210px !important;
max-height: 541px;
overflow: auto;
left: 26px;
z-index: 1;
} }
}
/* ----------- Galaxy S6 ----------- */ div .info-product-box {
display: none !important;
}
/* Portrait and Landscape */ div .product_list_category {
@media screen max-height: 163px !important;
and (device-width: 360px) }
and (device-height: 640px)
and (-webkit-device-pixel-ratio: 4) { div #product-list-globe {
.skin-yellow .main-header .navbar .dropdown-menu li.divider { max-height: 345px !important;
background-color: rgba(255, 255, 255, 0.1);
} }
}
@media only screen
and (min-device-width: 320px)
and (max-device-width: 568px)
and (-webkit-min-device-pixel-ratio: 2)
and (orientation: landscape){
.skin-yellow .main-header .navbar .dropdown-menu li a { .skin-yellow .main-header .navbar .dropdown-menu li a {
color: #3c8dbc; color: #3c8dbc;
} }
.skin-yellow .main-header .navbar .dropdown-menu li a:hover {
background: #e08e0b;
}
#option-list { #option-list {
margin-top: 8px;
display: none;
position: absolute;
border-radius: 3px;
background-color: white;
width: 210px !important; width: 210px !important;
max-height: 541px; }
overflow: auto; div .info-product-box {
left: 26px; /* position: fixed !important; */
z-index: 1; top: 17% !important;
left: -251px !important;
height: 80px !important;
width: 92% !important;
}
.info-product-box-img {
height: 80px !important;
width: 80px !important;
}
.info-product-box-img img {
height: 80px !important;
}
.info-product-box .progress,
.info-product-cart-box .progress {
margin: 5px 0px 5px -20px !important;
}
.info-product-box-content {
padding: 2px 1px !important;
}
div .product_list_category {
max-height: 107px !important;
}
div #product-list-globe {
max-height: 194px !important;
} }
} }
\ No newline at end of file
catalog/templates/templates.html
View file @ e3c68d64
...@@ -73,10 +73,10 @@ ...@@ -73,10 +73,10 @@
<li class="treeview"> <li class="treeview">
<a href="#"> <a href="#">
<div class="row"> <div class="row">
<div class="col-lg-2" style="padding-top:33px"> <div class="col-lg-2 col-xs-2" style="padding-top:33px">
<i class="fa fa-cubes"></i> <i class="fa fa-cubes"></i>
</div> </div>
<div class="col-lg-8" style="padding: 0px"> <div class="col-lg-8 col-xs-8" style="padding: 0px">
<div> <div>
<span id="" ></span> <span id="" ></span>
</div> </div>
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment