Distributions : img chargement en position fixed

backend/web/css/screen.css

@@ -1624,148 +1624,160 @@ termes.
 }
 /* line 60, ../sass/distribution/_index.scss */
 .distribution-index #loading {
-  position: absolute;
-  top: -60px;
+  position: fixed;
+  top: 50%;
   left: 50%;
-  margin-left: -15px;
+  width: 100px;
+  height: 100px;
+  -moz-border-radius: 50px;
+  -webkit-border-radius: 50px;
+  border-radius: 50px;
+  background-color: white;
+  z-index: 10;
+  -moz-box-shadow: 0px 0px 5px #d0d0d0;
+  -webkit-box-shadow: 0px 0px 5px #d0d0d0;
+  box-shadow: 0px 0px 5px #d0d0d0;
 }
-/* line 66, ../sass/distribution/_index.scss */
+/* line 71, ../sass/distribution/_index.scss */
 .distribution-index #loading img {
+  position: relative;
+  top: 35px;
+  left: 35px;
   width: 30px;
   height: 30px;
 }
-/* line 72, ../sass/distribution/_index.scss */
+/* line 80, ../sass/distribution/_index.scss */
 .distribution-index #calendar {
   margin-bottom: 15px;
 }
-/* line 74, ../sass/distribution/_index.scss */
+/* line 82, ../sass/distribution/_index.scss */
 .distribution-index #calendar .c-header .c-title-layout .c-title-popover .c-title-anchor .c-title[data-v-2083cb72] {
   font-size: 2rem;
 }
-/* line 77, ../sass/distribution/_index.scss */
+/* line 85, ../sass/distribution/_index.scss */
 .distribution-index #calendar .c-day-background {
   padding: 16px;
 }
-/* line 84, ../sass/distribution/_index.scss */
+/* line 92, ../sass/distribution/_index.scss */
 .distribution-index #calendar .c-day-popover-content {
   font-size: 1.3rem;
 }
-/* line 88, ../sass/distribution/_index.scss */
+/* line 96, ../sass/distribution/_index.scss */
 .distribution-index #calendar .c-title {
   text-transform: uppercase;
   font-family: "capsuularegular";
 }
-/* line 95, ../sass/distribution/_index.scss */
+/* line 103, ../sass/distribution/_index.scss */
 .distribution-index #products td.quantities {
   width: 100px;
   text-align: right;
 }
-/* line 99, ../sass/distribution/_index.scss */
+/* line 107, ../sass/distribution/_index.scss */
 .distribution-index #products input.quantity-max {
   width: 50px;
   text-align: center;
   display: inline;
 }
-/* line 107, ../sass/distribution/_index.scss */
+/* line 115, ../sass/distribution/_index.scss */
 .distribution-index #infos-top .col-md-4 {
   padding: 0px;
 }
-/* line 111, ../sass/distribution/_index.scss */
+/* line 119, ../sass/distribution/_index.scss */
 .distribution-index #infos-top .info-box {
   min-height: 96px;
   height: 96px;
 }
-/* line 114, ../sass/distribution/_index.scss */
+/* line 122, ../sass/distribution/_index.scss */
 .distribution-index #infos-top .info-box .info-box-icon {
   height: 96px;
   width: 50px;
   line-height: 96px;
 }
-/* line 118, ../sass/distribution/_index.scss */
+/* line 126, ../sass/distribution/_index.scss */
 .distribution-index #infos-top .info-box .info-box-icon i.fa {
   font-size: 30px;
 }
-/* line 122, ../sass/distribution/_index.scss */
+/* line 130, ../sass/distribution/_index.scss */
 .distribution-index #infos-top .info-box .info-box-content {
   margin-left: 55px;
 }
-/* line 124, ../sass/distribution/_index.scss */
+/* line 132, ../sass/distribution/_index.scss */
 .distribution-index #infos-top .info-box .info-box-content .info-box-text {
   font-size: 12px;
 }
-/* line 126, ../sass/distribution/_index.scss */
+/* line 134, ../sass/distribution/_index.scss */
 .distribution-index #infos-top .info-box .info-box-content .info-box-text .btn {
   font-size: 12px;
   text-transform: uppercase;
 }
-/* line 131, ../sass/distribution/_index.scss */
+/* line 139, ../sass/distribution/_index.scss */
 .distribution-index #infos-top .info-box .info-box-content .info-box-number {
   font-size: 14px;
 }
-/* line 138, ../sass/distribution/_index.scss */
+/* line 146, ../sass/distribution/_index.scss */
 .distribution-index #infos-top #info-box-distribution .btn-active-week {
   float: right;
 }
-/* line 144, ../sass/distribution/_index.scss */
+/* line 152, ../sass/distribution/_index.scss */
 .distribution-index #infos-top #summary-ca-weight .normal {
   font-weight: normal;
 }
-/* line 154, ../sass/distribution/_index.scss */
+/* line 162, ../sass/distribution/_index.scss */
 .distribution-index #modal-products table.table thead tr td {
   font-weight: bold;
 }
-/* line 159, ../sass/distribution/_index.scss */
+/* line 167, ../sass/distribution/_index.scss */
 .distribution-index #modal-products table.table td.quantity-ordered,
 .distribution-index #modal-products table.table td.quantity-max {
   text-align: center;
 }
-/* line 164, ../sass/distribution/_index.scss */
+/* line 172, ../sass/distribution/_index.scss */
 .distribution-index #modal-products table.table td.quantity-ordered {
   width: 50px;
 }
-/* line 167, ../sass/distribution/_index.scss */
+/* line 175, ../sass/distribution/_index.scss */
 .distribution-index #modal-products table.table td.quantity-max {
   width: 70px;
 }
-/* line 170, ../sass/distribution/_index.scss */
+/* line 178, ../sass/distribution/_index.scss */
 .distribution-index #modal-products table.table td.quantity-max input {
   text-align: center;
 }
-/* line 177, ../sass/distribution/_index.scss */
+/* line 185, ../sass/distribution/_index.scss */
 .distribution-index #orders {
   position: relative;
 }
-/* line 179, ../sass/distribution/_index.scss */
+/* line 187, ../sass/distribution/_index.scss */
 .distribution-index #orders #btn-add-order {
   position: absolute;
   top: 9px;
   right: 10px;
 }
-/* line 185, ../sass/distribution/_index.scss */
+/* line 193, ../sass/distribution/_index.scss */
 .distribution-index #orders #wrapper-nav-points-sale {
   margin-bottom: 10px;
 }
-/* line 188, ../sass/distribution/_index.scss */
+/* line 196, ../sass/distribution/_index.scss */
 .distribution-index #orders #wrapper-nav-points-sale ul#nav-points-sale {
   margin: 0px;
   padding: 0px;
   list-style-type: none;
 }
-/* line 193, ../sass/distribution/_index.scss */
+/* line 201, ../sass/distribution/_index.scss */
 .distribution-index #orders #wrapper-nav-points-sale ul#nav-points-sale li {
   float: left;
   margin-right: 10px;
   margin-bottom: 10px;
 }
-/* line 198, ../sass/distribution/_index.scss */
+/* line 206, ../sass/distribution/_index.scss */
 .distribution-index #orders #wrapper-nav-points-sale ul#nav-points-sale li a {
   position: relative;
 }
-/* line 202, ../sass/distribution/_index.scss */
+/* line 210, ../sass/distribution/_index.scss */
 .distribution-index #orders #wrapper-nav-points-sale ul#nav-points-sale li a.btn-primary .glyphicon {
   display: block;
 }
-/* line 207, ../sass/distribution/_index.scss */
+/* line 215, ../sass/distribution/_index.scss */
 .distribution-index #orders #wrapper-nav-points-sale ul#nav-points-sale li a .glyphicon {
   display: none;
   position: absolute;
@@ -1776,7 +1788,7 @@ termes.
   color: #FF7F00;
   position: absolute;
 }
-/* line 218, ../sass/distribution/_index.scss */
+/* line 226, ../sass/distribution/_index.scss */
 .distribution-index #orders #wrapper-nav-points-sale ul#nav-points-sale li a .label {
   background-color: white;
   border: solid 1px #e0e0e0;
@@ -1784,61 +1796,61 @@ termes.
   -webkit-border-radius: 10px;
   border-radius: 10px;
 }
-/* line 231, ../sass/distribution/_index.scss */
+/* line 239, ../sass/distribution/_index.scss */
 .distribution-index #orders table td.column-actions {
   text-align: right;
   width: 230px;
 }
-/* line 235, ../sass/distribution/_index.scss */
+/* line 243, ../sass/distribution/_index.scss */
 .distribution-index #orders table td.column-actions .modal-form-order,
 .distribution-index #orders table td.column-actions .modal-payment {
   text-align: left;
 }
-/* line 242, ../sass/distribution/_index.scss */
+/* line 250, ../sass/distribution/_index.scss */
 .distribution-index #orders table tr.view ul {
   list-style-type: none;
   margin-left: 0px;
   padding-left: 15px;
 }
-/* line 258, ../sass/distribution/_index.scss */
+/* line 266, ../sass/distribution/_index.scss */
 .distribution-index .modal-form-order table.table-products .product-ordered td {
   background-color: #e9e9e9;
 }
-/* line 262, ../sass/distribution/_index.scss */
+/* line 270, ../sass/distribution/_index.scss */
 .distribution-index .modal-form-order table.table-products .product-ordered input {
   font-size: 16px;
   font-weight: bold;
 }
-/* line 268, ../sass/distribution/_index.scss */
+/* line 276, ../sass/distribution/_index.scss */
 .distribution-index .modal-form-order table.table-products td.quantity {
   width: 150px;
 }
-/* line 271, ../sass/distribution/_index.scss */
+/* line 279, ../sass/distribution/_index.scss */
 .distribution-index .modal-form-order table.table-products td.quantity input {
   text-align: center;
   color: gray;
 }
-/* line 277, ../sass/distribution/_index.scss */
+/* line 285, ../sass/distribution/_index.scss */
 .distribution-index .modal-form-order table.table-products td.quantity-remaining {
   text-align: right;
 }
-/* line 283, ../sass/distribution/_index.scss */
+/* line 291, ../sass/distribution/_index.scss */
 .distribution-index .modal-form-order .actions-form button {
   margin-left: 15px;
 }
-/* line 291, ../sass/distribution/_index.scss */
+/* line 299, ../sass/distribution/_index.scss */
 .distribution-index .modal-payment .info-box .info-box-icon {
   width: 50px;
 }
-/* line 293, ../sass/distribution/_index.scss */
+/* line 301, ../sass/distribution/_index.scss */
 .distribution-index .modal-payment .info-box .info-box-icon i {
   font-size: 30px;
 }
-/* line 297, ../sass/distribution/_index.scss */
+/* line 305, ../sass/distribution/_index.scss */
 .distribution-index .modal-payment .info-box .info-box-content {
   margin-left: 50px;
 }
-/* line 303, ../sass/distribution/_index.scss */
+/* line 311, ../sass/distribution/_index.scss */
 .distribution-index .modal-mask {
   position: fixed;
   z-index: 9998;
@@ -1850,12 +1862,12 @@ termes.
   display: table;
   transition: opacity .3s ease;
 }
-/* line 315, ../sass/distribution/_index.scss */
+/* line 323, ../sass/distribution/_index.scss */
 .distribution-index .modal-wrapper {
   display: table-cell;
   vertical-align: middle;
 }
-/* line 320, ../sass/distribution/_index.scss */
+/* line 328, ../sass/distribution/_index.scss */
 .distribution-index .modal-container {
   width: 70%;
   margin: 0px auto;
@@ -1866,37 +1878,37 @@ termes.
   transition: all .3s ease;
   font-family: Helvetica, Arial, sans-serif;
 }
-/* line 331, ../sass/distribution/_index.scss */
+/* line 339, ../sass/distribution/_index.scss */
 .distribution-index .modal-header {
   padding-bottom: 0px;
 }
-/* line 333, ../sass/distribution/_index.scss */
+/* line 341, ../sass/distribution/_index.scss */
 .distribution-index .modal-header h3 {
   margin-top: 0;
   color: #333;
   text-transform: uppercase;
   margin-bottom: 0px;
 }
-/* line 341, ../sass/distribution/_index.scss */
+/* line 349, ../sass/distribution/_index.scss */
 .distribution-index .modal-body {
   margin: 20px 0;
   max-height: 300px;
   height: 300px;
   overflow-y: scroll;
 }
-/* line 348, ../sass/distribution/_index.scss */
+/* line 356, ../sass/distribution/_index.scss */
 .distribution-index .modal-default-button {
   float: right;
 }
-/* line 361, ../sass/distribution/_index.scss */
+/* line 369, ../sass/distribution/_index.scss */
 .distribution-index .modal-enter {
   opacity: 0;
 }
-/* line 365, ../sass/distribution/_index.scss */
+/* line 373, ../sass/distribution/_index.scss */
 .distribution-index .modal-leave-active {
   opacity: 0;
 }
-/* line 369, ../sass/distribution/_index.scss */
+/* line 377, ../sass/distribution/_index.scss */
 .distribution-index .modal-enter .modal-container,
 .distribution-index .modal-leave-active .modal-container {
   -webkit-transform: scale(1.1);

backend/web/sass/distribution/_index.scss

@@ -58,12 +58,20 @@ termes.
     }
     
     #loading {
-        position: absolute ; 
-        top: -60px ;
+        position: fixed ; 
+        top: 50% ;
         left: 50% ;
-        margin-left: -15px ;
+        width: 100px ;
+        height: 100px ;
+        @include border-radius(50px) ;
+        background-color: white ;
+        z-index: 10 ;
+        @include box-shadow(0px 0px 5px #d0d0d0) ;
         
         img {
+            position: relative ;
+            top: 35px ;
+            left: 35px ;
             width: 30px ;
             height: 30px ;
         }