dashboard responsive for phone

parent e3c68d64
......@@ -118,7 +118,7 @@
{% block content %}
<section class="content">
<section class="content" style="overflow-y: auto; height: 89vh">
<div class="row">
<div class="col-md-2 col-sm-6 col-xs-12">
<div class="info-box">
......@@ -255,8 +255,9 @@
<div class="chart">
<!-- Sales Chart Canvas -->
<canvas id="salesChart" style="height: 142px; width: 814px;" width="814"
height="142"></canvas>
<!-- <canvas id="salesChart" style="height: 142px; width: 814px;" width="814"
height="142"></canvas> -->
<canvas id="salesChart"></canvas>
</div>
<!-- /.chart-responsive -->
</div>
......
......@@ -442,3 +442,11 @@ div .sidebar-input input[type="text"] {
.control-sidebar-open{
right: 0px !important;
}
.titleShoppingCart{
padding-top: 5px;
}
.actionsShoppingCart{
/* padding-top: 0px; */
}
/*-------------------------------------------IOS-----------------------------------------*/
/* ----------- iPhone X ----------- */
/* Portrait and Landscape */
@media only screen
and (min-device-width: 375px)
and (max-device-width: 812px)
and (-webkit-min-device-pixel-ratio: 3)
and (orientation: portrait) {
.skin-yellow .main-header .navbar .dropdown-menu li a {
color: #3c8dbc;
}
div .info-product-box {
display: none !important;
}
div .product_list_category {
max-height: 163px !important;
}
div #product-list-globe {
max-height: 345px !important;
}
}
/*--------------------------------------- LANDSCAPE -----------------------------------------*/
/* ----------- iPhone X Landscape ----------- */
@media only screen
and (min-device-width: 375px)
and (max-device-width: 812px)
......@@ -63,32 +41,9 @@
}
}
/* -----------END iPhone X ----------- */
/* -----------END iPhone X Landscape ----------- */
/* ----------- iPhone 6+, 7+ and 8+ ----------- */
/* Portrait and Landscape */
@media only screen
and (min-device-width: 414px)
and (max-device-width: 736px)
and (-webkit-min-device-pixel-ratio: 3)
and (orientation: portrait) {
.skin-yellow .main-header .navbar .dropdown-menu li a {
color: #3c8dbc;
}
div .info-product-box {
display: none !important;
}
div .product_list_category {
max-height: 163px !important;
}
div #product-list-globe {
max-height: 345px !important;
}
}
/* ----------- iPhone 6+, 7+ and 8+ Landscape ----------- */
@media only screen
and (min-device-width: 414px)
......@@ -129,37 +84,59 @@
max-height: 194px !important;
}
}
/* ----------- END iPhone 6+, 7+ and 8+ ----------- */
/* ----------- END iPhone 6+, 7+ and 8+ Landscape----------- */
/* ----------- iPhone 6, 6S, 7 and 8 ----------- */
/* Portrait and Landscape */
/* ----------- iPhone 6, 6S, 7 and 8 Landscape----------- */
@media only screen
and (min-device-width: 375px)
and (max-device-width: 667px)
and (-webkit-min-device-pixel-ratio: 2)
and (orientation: portrait) {
and (orientation: landscape) {
.skin-yellow .main-header .navbar .dropdown-menu li a {
color: #3c8dbc;
}
#option-list {
width: 210px !important;
}
div .info-product-box {
display: none !important;
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: 163px !important;
max-height: 107px !important;
}
div #product-list-globe {
max-height: 425px !important;
max-height: 194px !important;
}
}
/* ----------- END iPhone 6, 6S, 7 and 8 Landscape----------- */
/* ----------- iPhone 5, 5S, 5C and 5SE landscape ----------- */
@media only screen
and (min-device-width: 375px)
and (max-device-width: 667px)
and (min-device-width: 320px)
and (max-device-width: 568px)
and (-webkit-min-device-pixel-ratio: 2)
and (orientation: landscape) {
and (orientation: landscape){
.skin-yellow .main-header .navbar .dropdown-menu li a {
color: #3c8dbc;
}
......@@ -167,8 +144,8 @@
#option-list {
width: 210px !important;
}
div .info-product-box {
/* position: fixed !important; */
top: 17% !important;
left: -251px !important;
height: 80px !important;
......@@ -197,10 +174,13 @@
max-height: 194px !important;
}
}
/* ----------- END iPhone 6, 6S, 7 and 8 ----------- */
/* ----------- END iPhone 5, 5S, 5C and 5SE landscape ----------- */
/*--------------------------------------- END SECTION LANDSCAPE -----------------------------------------*/
/*--------------------------------------- START SECTION PORTRAIT -----------------------------------------*/
/* ----------- iPhone 5, 5S, 5C and 5SE ----------- */
/* Portrait and Landscape */
/* ----------- iPhone 5, 5S, 5C and 5SE Portrait ----------- */
@media only screen
and (min-device-width: 320px)
and (max-device-width: 568px)
......@@ -225,13 +205,18 @@
div #product-list-globe {
max-height: 345px !important;
}
.actionsShoppingCart{
padding-top: 25px;
}
}
/* ----------- END iPhone 5, 5S, 5C and 5SE Portrait ----------- */
@media only screen
and (min-device-width: 320px)
and (max-device-width: 568px)
and (-webkit-min-device-pixel-ratio: 2)
and (orientation: landscape){
/* ----------- Device HUAWEI ----------- */
@media screen
and (min-device-width: 360px)
and (max-device-width: 640px)
and (orientation: portrait) {
.skin-yellow .main-header .navbar .dropdown-menu li a {
color: #3c8dbc;
}
......@@ -239,33 +224,100 @@
#option-list {
width: 210px !important;
}
div .info-product-box {
/* position: fixed !important; */
top: 17% !important;
left: -251px !important;
height: 80px !important;
width: 92% !important;
display: none !important;
}
.info-product-box-img {
height: 80px !important;
width: 80px !important;
div .product_list_category {
max-height: 163px !important;
}
.info-product-box-img img {
height: 80px !important;
div #product-list-globe {
max-height: 345px !important;
}
.info-product-box .progress,
.info-product-cart-box .progress {
margin: 5px 0px 5px -20px !important;
.actionsShoppingCart{
padding-top: 16px;
}
.info-product-box-content {
padding: 2px 1px !important;
}
/* ----------- END Device HUAWEI ----------- */
/* ----------- iPhone 6, 6S, 7 and 8 Portrait----------- */
@media only screen
and (min-device-width: 375px)
and (max-device-width: 667px)
and (-webkit-min-device-pixel-ratio: 2)
and (orientation: portrait) {
.skin-yellow .main-header .navbar .dropdown-menu li a {
color: #3c8dbc;
}
div .info-product-box {
display: none !important;
}
div .product_list_category {
max-height: 107px !important;
max-height: 163px !important;
}
div #product-list-globe {
max-height: 194px !important;
max-height: 425px !important;
}
.actionsShoppingCart{
padding-top: 15px;
}
}
/* ----------- END iPhone 6, 6S, 7 and 8 Portrait----------- */
/* ----------- iPhone 6+, 7+ and 8+ portrait ----------- */
@media only screen
and (min-device-width: 414px)
and (max-device-width: 736px)
and (-webkit-min-device-pixel-ratio: 3)
and (orientation: portrait) {
.skin-yellow .main-header .navbar .dropdown-menu li a {
color: #3c8dbc;
}
div .info-product-box {
display: none !important;
}
div .product_list_category {
max-height: 163px !important;
}
div #product-list-globe {
max-height: 345px !important;
}
}
/* -----------END iPhone 6+, 7+ and 8+ portrait ----------- */
/* ----------- iPhone X portrait----------- */
@media only screen
and (min-device-width: 375px)
and (max-device-width: 812px)
and (-webkit-min-device-pixel-ratio: 3)
and (orientation: portrait) {
.skin-yellow .main-header .navbar .dropdown-menu li a {
color: #3c8dbc;
}
div .info-product-box {
display: none !important;
}
div .product_list_category {
max-height: 163px !important;
}
div #product-list-globe {
max-height: 345px !important;
}
}
/* -----------END iPhone X portrait----------- */
/*--------------------------------------- END SECTION PORTRAIT -----------------------------------------*/
\ No newline at end of file
......@@ -146,23 +146,27 @@
<h2 class="text-center">Your Shopping Cart is empty.</h2>
</div>
{% else %}
<div class="col-md-5 col-md-offset-2">
<div class="col-md-5 col-md-offset-2" style="padding-bottom: 10px">
{% for product in product_list %}
<div class="box box-warning collapsed-box" style="margin-bottom: 10px">
<div class="box box-warning collapsed-box">
<div class="box-header with-border">
<div class="row">
<div class="col-lg-8 col-md-10 col-xs-6 titleShoppingCart" >
<h3 class="box-title">{{ product.process }}: {{ product.aggreg_date }}</h3>
</div>
<div class="col-lg-4 col-md-2 col-xs-6 actionsShoppingCart">
<div class="box-tools pull-right">
<span class="badge bg-green">Price ${{ product.price }}</span>
<button type="button" class="btn btn-box-tool" data-widget="collapse">
<i class="fa fa-plus"></i>
</button>
<button type="button" class="btn btn-box-tool" data-toggle="tooltip"
data-original-title="Delete"
onclick="deleteProductFromShoppingCart({{ product.id }})">
<button type="button" class="btn btn-box-tool" data-toggle="tooltip" data-original-title="Delete" onclick="deleteProductFromShoppingCart({{ product.id }})">
<i class="fa fa-trash"></i>
</button>
</div>
</div>
</div>
</div>
<div class="box-body" style="display: none">
<ul class="products-list product-list-in-box">
{% for catalog in product.catalog %}
......
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