diff --git a/kfet/static/kfet/css/index.css b/kfet/static/kfet/css/index.css
index b7cf2e09..241785ae 100644
--- a/kfet/static/kfet/css/index.css
+++ b/kfet/static/kfet/css/index.css
@@ -1,5 +1,6 @@
@import url("nav.css");
@import url("kpsul.css");
+@import url("jconfirm-kfet.css");
body {
margin-top:50px;
diff --git a/kfet/static/kfet/css/jconfirm-kfet.css b/kfet/static/kfet/css/jconfirm-kfet.css
new file mode 100644
index 00000000..8509c274
--- /dev/null
+++ b/kfet/static/kfet/css/jconfirm-kfet.css
@@ -0,0 +1,62 @@
+.jconfirm .jconfirm-box {
+ padding:0;
+ border-radius:0 !important;
+ font-family:"Roboto Mono";
+}
+
+.jconfirm .jconfirm-box div.title-c .title {
+ display: block;
+
+ padding:0 15px;
+ height:40px;
+ line-height:40px;
+
+ font-size:20px;
+ font-weight:bold;
+
+ color:#FFF;
+ background-color:#C8102E;
+}
+
+.jconfirm .jconfirm-box .content-pane {
+ margin:0 !important;
+}
+
+.jconfirm .jconfirm-box .content {
+ border-bottom:1px solid #ddd;
+}
+
+.jconfirm .jconfirm-box input {
+ width:100%;
+ height:70px;
+
+ border:0;
+
+ font-size:40px;
+
+ text-align:center;
+}
+
+.jconfirm .jconfirm-box .buttons {
+ margin-top:-5px; /* j'arrive pas à voir pk y'a un espace au dessus sinon... */
+ padding:0;
+ height:40px;
+}
+
+.jconfirm .jconfirm-box .buttons button {
+ height:100%;
+ margin:0;
+ margin:0 !important;
+}
+
+.jconfirm .jconfirm-box .buttons button:first-child:focus,
+.jconfirm .jconfirm-box .buttons button:first-child:hover {
+ color:#FFF !important;
+ background:#009011 !important;
+}
+
+.jconfirm .jconfirm-box .buttons button:nth-child(2):focus,
+.jconfirm .jconfirm-box .buttons button:nth-child(2):hover {
+ color:#FFF !important;
+ background:#C8102E !important;
+}
diff --git a/kfet/static/kfet/css/jquery-confirm.css b/kfet/static/kfet/css/jquery-confirm.css
new file mode 100644
index 00000000..e11388ef
--- /dev/null
+++ b/kfet/static/kfet/css/jquery-confirm.css
@@ -0,0 +1,519 @@
+/*!
+ * jquery-confirm v2.5.1 (http://craftpip.github.io/jquery-confirm/)
+ * Author: boniface pereira
+ * Website: www.craftpip.com
+ * Contact: hey@craftpip.com
+ *
+ * Copyright 2013-2016 jquery-confirm
+ * Licensed under MIT (https://github.com/craftpip/jquery-confirm/blob/master/LICENSE)
+ */
+@-webkit-keyframes jconfirm-rotate {
+ from {
+ -webkit-transform: rotate(0deg);
+ transform: rotate(0deg);
+ }
+ to {
+ -webkit-transform: rotate(360deg);
+ transform: rotate(360deg);
+ }
+}
+@keyframes jconfirm-rotate {
+ from {
+ -webkit-transform: rotate(0deg);
+ transform: rotate(0deg);
+ }
+ to {
+ -webkit-transform: rotate(360deg);
+ transform: rotate(360deg);
+ }
+}
+body.jconfirm-noscroll {
+ overflow: hidden !important;
+}
+.jconfirm {
+ position: fixed;
+ top: 0;
+ left: 0;
+ right: 0;
+ bottom: 0;
+ z-index: 99999999;
+ font-family: inherit;
+ overflow: hidden;
+}
+.jconfirm .jconfirm-bg {
+ position: fixed;
+ top: 0;
+ left: 0;
+ right: 0;
+ bottom: 0;
+ opacity: 0;
+ -webkit-transition: all .4s;
+ transition: all .4s;
+}
+.jconfirm .jconfirm-bg.seen {
+ opacity: 1;
+}
+.jconfirm .jconfirm-scrollpane {
+ position: fixed;
+ top: 0;
+ left: 0;
+ right: 0;
+ bottom: 0;
+ overflow-y: auto;
+ -webkit-perspective: 500px;
+ perspective: 500px;
+ -webkit-perspective-origin: center;
+ perspective-origin: center;
+}
+.jconfirm .jconfirm-box {
+ background: white;
+ border-radius: 4px;
+ position: relative;
+ outline: none;
+ padding: 15px 15px 0;
+}
+.jconfirm .jconfirm-box div.closeIcon {
+ height: 20px;
+ width: 20px;
+ position: absolute;
+ top: 5px;
+ right: 5px;
+ cursor: pointer;
+ opacity: .6;
+ text-align: center;
+ -webkit-transition: opacity 0.1s ease-in;
+ transition: opacity 0.1s ease-in;
+ display: none;
+ font-size: 27px;
+ line-height: 14px;
+}
+.jconfirm .jconfirm-box div.closeIcon .fa {
+ font-size: 16px;
+}
+.jconfirm .jconfirm-box div.closeIcon .glyphicon {
+ font-size: 16px;
+}
+.jconfirm .jconfirm-box div.closeIcon .zmdi {
+ font-size: 16px;
+}
+.jconfirm .jconfirm-box div.closeIcon:hover {
+ opacity: 1;
+}
+.jconfirm .jconfirm-box div.title-c {
+ display: block;
+ font-size: 22px;
+ line-height: 20px;
+}
+.jconfirm .jconfirm-box div.title-c .icon-c {
+ font-size: inherit;
+ padding-bottom: 15px;
+ display: inline-block;
+ margin-right: 8px;
+ vertical-align: middle;
+}
+.jconfirm .jconfirm-box div.title-c .icon-c i {
+ vertical-align: middle;
+}
+.jconfirm .jconfirm-box div.title-c .icon-c:empty {
+ display: none;
+}
+.jconfirm .jconfirm-box div.title-c .title {
+ font-size: inherit;
+ font-family: inherit;
+ display: inline-block;
+ vertical-align: middle;
+ padding-bottom: 15px;
+}
+.jconfirm .jconfirm-box div.title-c .title:empty {
+ display: none;
+}
+.jconfirm .jconfirm-box div.content-pane {
+ margin-bottom: 15px;
+ height: auto;
+ -webkit-transition: height 0.4s ease-in;
+ transition: height 0.4s ease-in;
+ display: inline-block;
+ width: 100%;
+ position: relative;
+}
+.jconfirm .jconfirm-box div.content-pane .content {
+ position: absolute;
+ top: 0;
+ left: 0;
+ -webkit-transition: all 0.2s ease-in;
+ transition: all 0.2s ease-in;
+ right: 0;
+}
+.jconfirm .jconfirm-box div.content-pane .content img {
+ width: 100%;
+ height: auto;
+}
+.jconfirm .jconfirm-box div.content-pane .content:empty {
+ display: none;
+}
+.jconfirm .jconfirm-box div.content-pane .content:empty.loading {
+ height: 40px;
+ position: relative;
+ opacity: 0.6;
+ display: block;
+}
+.jconfirm .jconfirm-box div.content-pane .content:empty.loading:before {
+ content: '';
+ height: 20px;
+ width: 20px;
+ border: solid 2px transparent;
+ position: absolute;
+ left: 50%;
+ margin-left: -10px;
+ border-radius: 50%;
+ -webkit-animation: jconfirm-rotate 1s infinite linear;
+ animation: jconfirm-rotate 1s infinite linear;
+ border-bottom-color: #aaa;
+ top: 50%;
+ margin-top: -10px;
+}
+.jconfirm .jconfirm-box div.content-pane .content:empty.loading:after {
+ content: '';
+ position: absolute;
+ left: 50%;
+ margin-left: -15px;
+}
+.jconfirm .jconfirm-box .buttons {
+ padding-bottom: 15px;
+}
+.jconfirm .jconfirm-box .buttons button + button {
+ margin-left: 5px;
+}
+.jconfirm .jquery-clear {
+ clear: both;
+}
+.jconfirm.rtl {
+ direction: rtl;
+}
+.jconfirm.rtl div.closeIcon {
+ left: 12px;
+ right: auto;
+}
+.jconfirm.jconfirm-white .jconfirm-bg {
+ background-color: rgba(0, 0, 0, 0.2);
+}
+.jconfirm.jconfirm-white .jconfirm-box {
+ box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
+ border-radius: 5px;
+}
+.jconfirm.jconfirm-white .jconfirm-box .buttons {
+ float: right;
+}
+.jconfirm.jconfirm-white .jconfirm-box .buttons button {
+ border: none;
+ background-image: none;
+ text-transform: uppercase;
+ font-size: 14px;
+ font-weight: bold;
+ text-shadow: none;
+ -webkit-transition: background .1s;
+ transition: background .1s;
+ color: white;
+}
+.jconfirm.jconfirm-white .jconfirm-box .buttons button.btn-default {
+ box-shadow: none;
+ color: #333;
+}
+.jconfirm.jconfirm-white .jconfirm-box .buttons button.btn-default:hover {
+ background: #ddd;
+}
+.jconfirm.jconfirm-black .jconfirm-bg {
+ background-color: rgba(0, 0, 0, 0.5);
+}
+.jconfirm.jconfirm-black .jconfirm-box {
+ box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
+ background: #444;
+ border-radius: 5px;
+ color: white;
+}
+.jconfirm.jconfirm-black .jconfirm-box .buttons {
+ float: right;
+}
+.jconfirm.jconfirm-black .jconfirm-box .buttons button {
+ border: none;
+ background-image: none;
+ text-transform: uppercase;
+ font-size: 14px;
+ font-weight: bold;
+ text-shadow: none;
+ -webkit-transition: background .1s;
+ transition: background .1s;
+ color: white;
+}
+.jconfirm.jconfirm-black .jconfirm-box .buttons button.btn-default {
+ box-shadow: none;
+ color: #fff;
+ background: none;
+}
+.jconfirm.jconfirm-black .jconfirm-box .buttons button.btn-default:hover {
+ background: #666;
+}
+.jconfirm .jconfirm-box.hilight {
+ -webkit-animation: hilight 0.82s cubic-bezier(0.36, 0.07, 0.19, 0.97) both;
+ animation: hilight 0.82s cubic-bezier(0.36, 0.07, 0.19, 0.97) both;
+ -webkit-transform: translate3d(0, 0, 0);
+ transform: translate3d(0, 0, 0);
+}
+@-webkit-keyframes hilight {
+ 10%,
+ 90% {
+ -webkit-transform: translate3d(-2px, 0, 0);
+ transform: translate3d(-2px, 0, 0);
+ }
+ 20%,
+ 80% {
+ -webkit-transform: translate3d(4px, 0, 0);
+ transform: translate3d(4px, 0, 0);
+ }
+ 30%,
+ 50%,
+ 70% {
+ -webkit-transform: translate3d(-8px, 0, 0);
+ transform: translate3d(-8px, 0, 0);
+ }
+ 40%,
+ 60% {
+ -webkit-transform: translate3d(8px, 0, 0);
+ transform: translate3d(8px, 0, 0);
+ }
+}
+@keyframes hilight {
+ 10%,
+ 90% {
+ -webkit-transform: translate3d(-2px, 0, 0);
+ transform: translate3d(-2px, 0, 0);
+ }
+ 20%,
+ 80% {
+ -webkit-transform: translate3d(4px, 0, 0);
+ transform: translate3d(4px, 0, 0);
+ }
+ 30%,
+ 50%,
+ 70% {
+ -webkit-transform: translate3d(-8px, 0, 0);
+ transform: translate3d(-8px, 0, 0);
+ }
+ 40%,
+ 60% {
+ -webkit-transform: translate3d(8px, 0, 0);
+ transform: translate3d(8px, 0, 0);
+ }
+}
+/*Transition rules*/
+.jconfirm {
+ -webkit-perspective: 400px;
+ perspective: 400px;
+}
+.jconfirm .jconfirm-box {
+ opacity: 1;
+ -webkit-transition-property: -webkit-transform, opacity, box-shadow;
+ transition-property: transform, opacity, box-shadow;
+}
+.jconfirm .jconfirm-box.anim-top,
+.jconfirm .jconfirm-box.anim-left,
+.jconfirm .jconfirm-box.anim-right,
+.jconfirm .jconfirm-box.anim-bottom,
+.jconfirm .jconfirm-box.anim-opacity,
+.jconfirm .jconfirm-box.anim-zoom,
+.jconfirm .jconfirm-box.anim-scale,
+.jconfirm .jconfirm-box.anim-none,
+.jconfirm .jconfirm-box.anim-rotate,
+.jconfirm .jconfirm-box.anim-rotatex,
+.jconfirm .jconfirm-box.anim-rotatey,
+.jconfirm .jconfirm-box.anim-scaley,
+.jconfirm .jconfirm-box.anim-scalex {
+ opacity: 0;
+}
+.jconfirm .jconfirm-box.anim-rotate {
+ -webkit-transform: rotate(90deg);
+ -ms-transform: rotate(90deg);
+ transform: rotate(90deg);
+}
+.jconfirm .jconfirm-box.anim-rotatex {
+ -webkit-transform: rotateX(90deg);
+ transform: rotateX(90deg);
+ -webkit-transform-origin: center;
+ -ms-transform-origin: center;
+ transform-origin: center;
+}
+.jconfirm .jconfirm-box.anim-rotatexr {
+ -webkit-transform: rotateX(-90deg);
+ transform: rotateX(-90deg);
+ -webkit-transform-origin: center;
+ -ms-transform-origin: center;
+ transform-origin: center;
+}
+.jconfirm .jconfirm-box.anim-rotatey {
+ -webkit-transform: rotatey(90deg);
+ -ms-transform: rotatey(90deg);
+ transform: rotatey(90deg);
+ -webkit-transform-origin: center;
+ -ms-transform-origin: center;
+ transform-origin: center;
+}
+.jconfirm .jconfirm-box.anim-rotateyr {
+ -webkit-transform: rotatey(-90deg);
+ -ms-transform: rotatey(-90deg);
+ transform: rotatey(-90deg);
+ -webkit-transform-origin: center;
+ -ms-transform-origin: center;
+ transform-origin: center;
+}
+.jconfirm .jconfirm-box.anim-scaley {
+ -webkit-transform: scaley(1.5);
+ -ms-transform: scaley(1.5);
+ transform: scaley(1.5);
+ -webkit-transform-origin: center;
+ -ms-transform-origin: center;
+ transform-origin: center;
+}
+.jconfirm .jconfirm-box.anim-scalex {
+ -webkit-transform: scalex(1.5);
+ -ms-transform: scalex(1.5);
+ transform: scalex(1.5);
+ -webkit-transform-origin: center;
+ -ms-transform-origin: center;
+ transform-origin: center;
+}
+.jconfirm .jconfirm-box.anim-top {
+ -webkit-transform: translate(0px, -100px);
+ -ms-transform: translate(0px, -100px);
+ transform: translate(0px, -100px);
+}
+.jconfirm .jconfirm-box.anim-left {
+ -webkit-transform: translate(-100px, 0px);
+ -ms-transform: translate(-100px, 0px);
+ transform: translate(-100px, 0px);
+}
+.jconfirm .jconfirm-box.anim-right {
+ -webkit-transform: translate(100px, 0px);
+ -ms-transform: translate(100px, 0px);
+ transform: translate(100px, 0px);
+}
+.jconfirm .jconfirm-box.anim-bottom {
+ -webkit-transform: translate(0px, 100px);
+ -ms-transform: translate(0px, 100px);
+ transform: translate(0px, 100px);
+}
+.jconfirm .jconfirm-box.anim-zoom {
+ -webkit-transform: scale(1.2);
+ -ms-transform: scale(1.2);
+ transform: scale(1.2);
+}
+.jconfirm .jconfirm-box.anim-scale {
+ -webkit-transform: scale(0.5);
+ -ms-transform: scale(0.5);
+ transform: scale(0.5);
+}
+.jconfirm .jconfirm-box.anim-none {
+ display: none;
+}
+.jconfirm.jconfirm-supervan .jconfirm-bg {
+ background-color: rgba(54, 70, 93, 0.95);
+}
+.jconfirm.jconfirm-supervan .jconfirm-box {
+ background-color: transparent;
+}
+.jconfirm.jconfirm-supervan .jconfirm-box div.closeIcon {
+ color: white;
+}
+.jconfirm.jconfirm-supervan .jconfirm-box div.title-c {
+ text-align: center;
+ color: white;
+ font-size: 28px;
+ font-weight: normal;
+}
+.jconfirm.jconfirm-supervan .jconfirm-box div.title-c > * {
+ padding-bottom: 25px;
+}
+.jconfirm.jconfirm-supervan .jconfirm-box div.content-pane {
+ margin-bottom: 25px;
+}
+.jconfirm.jconfirm-supervan .jconfirm-box div.content {
+ text-align: center;
+ color: white;
+}
+.jconfirm.jconfirm-supervan .jconfirm-box .buttons {
+ text-align: center;
+}
+.jconfirm.jconfirm-supervan .jconfirm-box .buttons button {
+ font-size: 16px;
+ border-radius: 2px;
+ background: #303f53;
+ text-shadow: none;
+ border: none;
+ color: white;
+ padding: 10px;
+ min-width: 100px;
+}
+.jconfirm.jconfirm-material .jconfirm-bg {
+ background-color: rgba(0, 0, 0, 0.67);
+}
+.jconfirm.jconfirm-material .jconfirm-box {
+ background-color: white;
+ box-shadow: 0 7px 8px -4px rgba(0, 0, 0, 0.2), 0 13px 19px 2px rgba(0, 0, 0, 0.14), 0 5px 24px 4px rgba(0, 0, 0, 0.12);
+ padding: 30px 25px 10px 25px;
+}
+.jconfirm.jconfirm-material .jconfirm-box div.closeIcon {
+ color: rgba(0, 0, 0, 0.87);
+}
+.jconfirm.jconfirm-material .jconfirm-box div.title-c {
+ color: rgba(0, 0, 0, 0.87);
+ font-size: 22px;
+ font-weight: bold;
+}
+.jconfirm.jconfirm-material .jconfirm-box div.content {
+ text-align: left;
+ color: rgba(0, 0, 0, 0.87);
+}
+.jconfirm.jconfirm-material .jconfirm-box .buttons {
+ text-align: right;
+}
+.jconfirm.jconfirm-material .jconfirm-box .buttons button {
+ text-transform: uppercase;
+ font-weight: 500;
+}
+.jconfirm.jconfirm-bootstrap .jconfirm-bg {
+ background-color: rgba(0, 0, 0, 0.21);
+}
+.jconfirm.jconfirm-bootstrap .jconfirm-box {
+ background-color: white;
+ box-shadow: 0 3px 8px 0px rgba(0, 0, 0, 0.2);
+ border: solid 1px rgba(0, 0, 0, 0.4);
+ padding: 15px 0 0;
+}
+.jconfirm.jconfirm-bootstrap .jconfirm-box div.closeIcon {
+ color: rgba(0, 0, 0, 0.87);
+}
+.jconfirm.jconfirm-bootstrap .jconfirm-box div.title-c {
+ color: rgba(0, 0, 0, 0.87);
+ font-size: 22px;
+ font-weight: bold;
+ padding-left: 15px;
+ padding-right: 15px;
+}
+.jconfirm.jconfirm-bootstrap .jconfirm-box div.content {
+ text-align: left;
+ color: rgba(0, 0, 0, 0.87);
+ padding: 0px 15px;
+}
+.jconfirm.jconfirm-bootstrap .jconfirm-box .buttons {
+ text-align: right;
+ padding: 0px 0 0px;
+ margin: -5px 0 0px;
+ border-top: solid 1px #ddd;
+ overflow: hidden;
+ border-radius: 0 0 4px 4px;
+}
+.jconfirm.jconfirm-bootstrap .jconfirm-box .buttons button {
+ font-weight: 500;
+ border-radius: 0px;
+ margin: 0;
+ border-left: solid 1px #ddd;
+}
diff --git a/kfet/static/kfet/css/kpsul.css b/kfet/static/kfet/css/kpsul.css
index 40008749..21be5417 100644
--- a/kfet/static/kfet/css/kpsul.css
+++ b/kfet/static/kfet/css/kpsul.css
@@ -1,3 +1,13 @@
+input[type=number] {
+ -moz-appearance:textfield;
+}
+
+input[type=number]::-webkit-inner-spin-button,
+input[type=number]::-webkit-outer-spin-button {
+ -webkit-appearance: none;
+ margin: 0;
+}
+
/*
* Top row
*/
@@ -16,7 +26,7 @@
#account {
border:1px solid #ddd;
color:black;
- height:160px;
+ height:120px;
}
#account[data-balance="ok"] { border-color:#009011; }
@@ -46,52 +56,62 @@
background:#ddd;
font-family:'Roboto Mono';
- font-size:70px;
+ font-size:50px;
font-weight:bold;
text-align:center;
text-transform:uppercase;
}
-@media (min-width: 768px) {
- #account {
- margin-right:0;
- }
-
- #account_form input {
- font-size:85px;
- }
-
- @media (min-width: 992px) {
- #account_form input {
- font-size:100px;
- }
- }
-}
-
#account_data {
height:100%;
}
#account_data .data_line {
- line-height:24px;
+ line-height:16px;
font-family:'Roboto Mono';
- font-size:14px;
+ font-size:12px;
}
-#account_data #account-balance{
- height:60px;
- line-height:60px;
+#account_data #account-balance {
+ height:40px;
+ line-height:40px;
- font-size:60px;
+ font-size:35px;
font-weight:bold;
}
-#account_data #account-name {
+#account-name {
font-weight:bold;
}
+@media (min-width: 600px) {
+ #account_form input { font-size:60px; }
+
+ @media (min-width: 768px) {
+ #account{ height:160px; }
+ #account_form input { font-size: 70px; }
+ #account_name { font-size:60px; }
+ #account_data .data_line {
+ font-size:14px;
+ line-height:24px;
+ }
+ #account_data #account-balance {
+ font-size:50px;
+ line-height:60px;
+ height:60px;
+ }
+
+ #account { margin-right:0; }
+ #account_form input { font-size:85px; }
+
+ @media (min-width: 992px) {
+ #account_form input { font-size:100px; }
+ }
+ }
+}
+
/* Checkout */
#checkout {
@@ -210,17 +230,6 @@
border-left:0;
}
-#article_selection input[type=number] {
- -moz-appearance:textfield;
-}
-
-#article_selection input[type=number]::-webkit-inner-spin-button,
-#article_selection input[type=number]::-webkit-outer-spin-button {
- -webkit-appearance: none;
- margin: 0;
-}
-
-
#article_autocomplete {
width:95%;
padding-left:10px;
@@ -233,4 +242,76 @@
/* Article data */
+#articles_data {
+ border:1px solid #ddd;
+ border-top:0;
+ overflow:auto;
+ max-height:500px;
+}
+
+#articles_data table {
+ width: 100%;
+}
+
+#articles_data table tr.article {
+ height:25px;
+ font-size:14px;
+}
+
+#articles_data table tr.article>td:first-child {
+ padding-left:10px;
+}
+
+#articles_data table tr.category {
+ height:35px;
+ background-color:#ddd;
+ font-size:16px;
+ font-weight:bold;
+}
+
+#articles_data table tr.category>td:first-child {
+ padding-left:20px;
+}
+
+/* Second part - Left - bottom */
+
+.kpsul_middle_left_bottom {
+ height:160px;
+ margin:15px 0;
+ border:1px solid #ddd;
+}
+
+.kpsul_middle_left_bottom > div {
+ height:100%;
+ padding:0;
+}
+
+#basket {
+ overflow:auto;
+}
+
+#basket_rel {
+ border-left:1px solid #ddd;
+}
+
+#basket table {
+ width:100%;
+}
+
+#basket table tr {
+ height:25px;
+ font-size:14px;
+}
+
+#basket tr .amount {
+ width:70px;
+ padding-right:10px;
+ text-align:right;
+}
+
+#basket tr .number {
+ width:50px;
+ padding-right:10px;
+ text-align:right;
+}
diff --git a/kfet/static/kfet/css/kpsul_grid.css b/kfet/static/kfet/css/kpsul_grid.css
new file mode 100644
index 00000000..e8121f1c
--- /dev/null
+++ b/kfet/static/kfet/css/kpsul_grid.css
@@ -0,0 +1,10 @@
+@media (min-width:768px) {
+ html { height:100%; }
+ body { height:calc(100% - 50px); }
+ .container-fluid { height:100%; }
+ .kpsul_middle { height:calc(100% - 175px); }
+ .kpsul_middle_left_col { height:calc(100% - 15px); }
+ .kpsul_middle_left_top { height:calc(100% - 190px); min-height:80px; }
+ .kpsul_middle_left { height:100%; }
+ #articles_data { height: calc(100% - 80px); }
+}
diff --git a/kfet/static/kfet/js/jquery-confirm.js b/kfet/static/kfet/js/jquery-confirm.js
new file mode 100644
index 00000000..77d708e7
--- /dev/null
+++ b/kfet/static/kfet/js/jquery-confirm.js
@@ -0,0 +1,605 @@
+/*!
+ * jquery-confirm v2.5.1 (http://craftpip.github.io/jquery-confirm/)
+ * Author: Boniface Pereira
+ * Website: www.craftpip.com
+ * Contact: hey@craftpip.com
+ *
+ * Copyright 2013-2015 jquery-confirm
+ * Licensed under MIT (https://github.com/craftpip/jquery-confirm/blob/master/LICENSE)
+ *
+ * Modifié par: Aurélien Delobelle
+ * Contact: aure.delo@gmail.com
+ * Contenu des modifications:
+ * Cas où il y a un input avec autofocus dans 'content' -> Fix
+ */
+
+if (typeof jQuery === 'undefined') {
+ throw new Error('jquery-confirm requires jQuery');
+}
+
+var jconfirm, Jconfirm;
+(function ($) {
+ "use strict";
+
+ $.fn.confirm = function (options, option2) {
+ if (typeof options === 'undefined') options = {};
+ if (typeof options === 'string')
+ options = {
+ content: options,
+ title: (option2) ? option2 : false
+
+ };
+ /*
+ * Alias of $.confirm to emulate native confirm()
+ */
+ $(this).each(function () {
+ var $this = $(this);
+ $this.on('click', function (e) {
+ e.preventDefault();
+ var jcOption = $.extend({}, options);
+ if ($this.attr('data-title'))
+ jcOption['title'] = $this.attr('data-title');
+ if ($this.attr('data-content'))
+ jcOption['content'] = $this.attr('data-content');
+
+ jcOption['$target'] = $this;
+ if ($this.attr('href') && !options['confirm'])
+ jcOption['confirm'] = function () {
+ location.href = $this.attr('href');
+ };
+ $.confirm(jcOption);
+ });
+ });
+ return $(this);
+ };
+ $.confirm = function (options, option2) {
+ if (typeof options === 'undefined') options = {};
+ if (typeof options === 'string')
+ options = {
+ content: options,
+ title: (option2) ? option2 : false
+ };
+ /*
+ * Alias of jconfirm
+ */
+ return jconfirm(options);
+ };
+ $.alert = function (options, option2) {
+ if (typeof options === 'undefined') options = {};
+ if (typeof options === 'string')
+ options = {
+ content: options,
+ title: (option2) ? option2 : false
+ };
+ /*
+ * Alias of jconfirm
+ */
+ options.cancelButton = false;
+ return jconfirm(options);
+ };
+ $.dialog = function (options, option2) {
+ if (typeof options === 'undefined') options = {};
+ if (typeof options === 'string')
+ options = {
+ content: options,
+ title: (option2) ? option2 : false
+ };
+ /*
+ * Alias of jconfirm
+ */
+ options.cancelButton = false;
+ options.confirmButton = false;
+ options.confirmKeys = [13];
+ return jconfirm(options);
+ };
+ jconfirm = function (options) {
+ if (typeof options === 'undefined') options = {};
+ /*
+ * initial function for calling.
+ */
+ if (jconfirm.defaults) {
+ /*
+ * Merge global defaults with plugin defaults
+ */
+ $.extend(jconfirm.pluginDefaults, jconfirm.defaults);
+ }
+ /*
+ * merge options with plugin defaults.
+ */
+ var options = $.extend({}, jconfirm.pluginDefaults, options);
+ return new Jconfirm(options);
+ };
+ Jconfirm = function (options) {
+ /*
+ * constructor function Jconfirm,
+ * options = user options.
+ */
+ $.extend(this, options);
+ this._init();
+ };
+ Jconfirm.prototype = {
+ _init: function () {
+ var that = this;
+ this._rand = Math.round(Math.random() * 99999);
+ this._buildHTML();
+ this._bindEvents();
+ setTimeout(function () {
+ that.open();
+ that._watchContent();
+ }, 0);
+ },
+ _buildHTML: function () {
+ var that = this;
+ /*
+ * Prefixing animations.
+ */
+ this.animation = 'anim-' + this.animation.toLowerCase();
+ this.closeAnimation = 'anim-' + this.closeAnimation.toLowerCase();
+ this.theme = 'jconfirm-' + this.theme.toLowerCase();
+ if (this.animation == 'anim-none')
+ this.animationSpeed = 0;
+
+ this._lastFocused = $('body').find(':focus');
+
+ /*
+ * Append html.
+ */
+ this.$el = $(this.template).appendTo(this.container).addClass(this.theme);
+ this.$el.find('.jconfirm-box-container').addClass(this.columnClass);
+ this.$el.find('.jconfirm-bg').css(this._getCSS(this.animationSpeed, 1));
+ this.$el.find('.jconfirm-bg').css('opacity', this.opacity);
+ this.$b = this.$el.find('.jconfirm-box').css(this._getCSS(this.animationSpeed, this.animationBounce)).addClass(this.animation);
+ this.$body = this.$b; // alias
+
+ /*
+ * Add rtl class if rtl option has selected
+ */
+ if (this.rtl)
+ this.$el.addClass("rtl");
+
+ this._contentReady = $.Deferred();
+ this._modalReady = $.Deferred();
+
+ /*
+ * Setup title contents
+ */
+ this.$title = this.$el.find('.title');
+ this.contentDiv = this.$el.find('div.content');
+ this.$content = this.contentDiv; // alias
+ this.$contentPane = this.$el.find('.content-pane');
+ this.$icon = this.$el.find('.icon-c');
+ this.$closeIcon = this.$el.find('.closeIcon');
+ this.$contentPane.css(this._getCSS(this.animationSpeed, 1));
+ this.setTitle();
+ this.setIcon();
+ this._setButtons();
+
+ if (this.closeIconClass)
+ this.$closeIcon.html('');
+
+ that._contentHash = this._hash(that.$content.html());
+ $.when(this._contentReady, this._modalReady).then(function () {
+ that.setContent();
+ that.setTitle();
+ that.setIcon();
+ });
+
+ this._getContent();
+ this._imagesLoaded();
+
+ if (this.autoClose)
+ this._startCountDown();
+ },
+ _unwatchContent: function () {
+ clearInterval(this._timer);
+ },
+ _hash: function () {
+ return btoa((encodeURIComponent(this.$content.html())));
+ },
+ _watchContent: function () {
+ var that = this;
+ this._timer = setInterval(function () {
+ var now = that._hash(that.$content.html());
+ if (that._contentHash != now) {
+ that._contentHash = now;
+ that.setDialogCenter();
+ that._imagesLoaded();
+ }
+ }, this.watchInterval);
+ },
+ _bindEvents: function () {
+ var that = this;
+ var boxClicked = false;
+
+ this.$el.find('.jconfirm-scrollpane').click(function (e) {
+ // ignore propagated clicks
+ if (!boxClicked) {
+ // background clicked
+ if (that.backgroundDismiss) {
+ that.cancel();
+ that.close();
+ } else {
+ that.$b.addClass('hilight');
+ setTimeout(function () {
+ that.$b.removeClass('hilight');
+ }, 800);
+ }
+ }
+ boxClicked = false;
+ });
+
+ this.$el.find('.jconfirm-box').click(function (e) {
+ boxClicked = true;
+ });
+
+ if (this.$confirmButton) {
+ this.$confirmButton.click(function (e) {
+ e.preventDefault();
+ var r = that.confirm(that.$b);
+ that._stopCountDown();
+ that.onAction('confirm');
+ if (typeof r === 'undefined' || r)
+ that.close();
+ });
+ }
+ if (this.$cancelButton) {
+ this.$cancelButton.click(function (e) {
+ e.preventDefault();
+ var r = that.cancel(that.$b);
+ that._stopCountDown();
+ that.onAction('cancel');
+
+ if (typeof r === 'undefined' || r)
+ that.close();
+ });
+ }
+ if (this.$closeButton) {
+ this.$closeButton.click(function (e) {
+ e.preventDefault();
+ that._stopCountDown();
+ that.cancel();
+ that.onAction('close');
+ that.close();
+ });
+ }
+ if (this.keyboardEnabled) {
+ setTimeout(function () {
+ $(window).on('keyup.' + this._rand, function (e) {
+ that.reactOnKey(e);
+ });
+ }, 500);
+ }
+
+ $(window).on('resize.' + this._rand, function () {
+ that.setDialogCenter(true);
+ });
+ },
+ _getCSS: function (speed, bounce) {
+ return {
+ '-webkit-transition-duration': speed / 1000 + 's',
+ 'transition-duration': speed / 1000 + 's',
+ '-webkit-transition-timing-function': 'cubic-bezier(.36,1.1,.2, ' + bounce + ')',
+ 'transition-timing-function': 'cubic-bezier(.36,1.1,.2, ' + bounce + ')'
+ };
+ },
+ _imagesLoaded: function () {
+ var that = this;
+ $.each(this.$content.find('img:not(.loaded)'), function (i, a) {
+ var interval = setInterval(function () {
+ var h = $(a).css('height');
+ if (h !== '0px') {
+ $(a).addClass('loaded');
+ that.setDialogCenter();
+ clearInterval(interval);
+ }
+ }, 40);
+ })
+ },
+ _setButtons: function () {
+ /*
+ * Settings up buttons
+ */
+ this.$btnc = this.$el.find('.buttons');
+ if (this.confirmButton && $.trim(this.confirmButton) !== '') {
+ this.$confirmButton = $('').appendTo(this.$btnc).addClass(this.confirmButtonClass);
+ }
+ if (this.cancelButton && $.trim(this.cancelButton) !== '') {
+ this.$cancelButton = $('').appendTo(this.$btnc).addClass(this.cancelButtonClass);
+ }
+ if (!this.confirmButton && !this.cancelButton) {
+ this.$btnc.hide();
+ }
+ if (!this.confirmButton && !this.cancelButton && this.closeIcon === null) {
+ this.$closeButton = this.$b.find('.closeIcon').show();
+ }
+ if (this.closeIcon === true) {
+ this.$closeButton = this.$b.find('.closeIcon').show();
+ }
+ },
+ setTitle: function (string) {
+ this.title = (typeof string !== 'undefined') ? string : this.title;
+ this.$title.html(this.title || '');
+ },
+ setIcon: function (iconClass) {
+ this.title = (typeof string !== 'undefined') ? iconClass : this.title;
+ this.$icon.html(this.icon ? '' : '');
+ },
+ setContent: function (string) {
+ // only set the content on the modal.
+ var that = this;
+ this.content = (typeof string == 'undefined') ? this.content : string;
+
+ if (this.content == '') {
+ this.$content.html(this.content);
+ this.$contentPane.hide();
+ } else {
+ this.$content.html(this.content);
+ this.$contentPane.show();
+ }
+ if (this.$content.hasClass('loading')) {
+ this.$content.removeClass('loading');// it was loading via ajax.
+ this.$btnc.find('button').prop('disabled', false);
+ }
+ },
+ _getContent: function (string) {
+ // get content from remote & stuff.
+ var that = this;
+ string = (string) ? string : this.content;
+ this._isAjax = false;
+ /*
+ * Set content.
+ */
+ if (!this.content) { // if the content is falsy
+ this.content = '';
+ this.setContent(this.content);
+ this._contentReady.reject();
+ } else if (typeof this.content === 'string') {
+ if (this.content.substr(0, 4).toLowerCase() === 'url:') {
+ this._isAjax = true;
+ this.$content.addClass('loading');
+ this.$btnc.find('button').prop('disabled', true);
+ var url = this.content.substring(4, this.content.length);
+ $.get(url).done(function (html) {
+ that.content = html;
+ that._contentReady.resolve();
+ }).always(function (data, status, xhr) {
+ if (typeof that.contentLoaded === 'function')
+ that.contentLoaded(data, status, xhr);
+ });
+ } else {
+ this.setContent(this.content);
+ this._contentReady.reject();
+ }
+ } else if (typeof this.content === 'function') {
+ this.$content.addClass('loading');
+ this.$btnc.find('button').attr('disabled', 'disabled');
+ var promise = this.content(this);
+ if (typeof promise !== 'object') {
+ console.error('The content function must return jquery promise.');
+ } else if (typeof promise.always !== 'function') {
+ console.error('The object returned is not a jquery promise.');
+ } else {
+ this._isAjax = true;
+ promise.always(function (data, status) {
+ that._contentReady.resolve();
+ });
+ }
+ } else {
+ console.error('Invalid option for property content, passed: ' + typeof this.content);
+ }
+ this.setDialogCenter();
+ },
+ _stopCountDown: function () {
+ clearInterval(this.timerInterval);
+ if (this.$cd)
+ this.$cd.remove();
+ },
+ _startCountDown: function () {
+ var opt = this.autoClose.split('|');
+ if (/cancel/.test(opt[0]) && this.type === 'alert') {
+ return false;
+ } else if (/confirm|cancel/.test(opt[0])) {
+ this.$cd = $('').appendTo(this['$' + opt[0] + 'Button']);
+ var that = this;
+ that.$cd.parent().click();
+ var time = opt[1] / 1000;
+ this.timerInterval = setInterval(function () {
+ that.$cd.html(' (' + (time -= 1) + ')');
+ if (time === 0) {
+ that.$cd.html('');
+ that.$cd.parent().trigger('click');
+ clearInterval(that.timerInterval);
+ }
+ }, 1000);
+ } else {
+ console.error('Invalid option ' + opt[0] + ', must be confirm/cancel');
+ }
+ },
+ reactOnKey: function key(e) {
+
+ /*
+ * prevent keyup event if the dialog is not last!
+ */
+ var a = $('.jconfirm');
+ if (a.eq(a.length - 1)[0] !== this.$el[0])
+ return false;
+
+ var key = e.which;
+ // Do not react if Enter/Space is pressed on input elements
+ if (this.contentDiv.find(':input').is(':focus') && /13|32/.test(key))
+ return false;
+
+ if ($.inArray(key, this.cancelKeys) !== -1) {
+ /*
+ * Cancel key pressed.
+ */
+ if (this.$cancelButton) {
+ this.$cancelButton.click();
+ } else {
+ this.close();
+ }
+ }
+ if ($.inArray(key, this.confirmKeys) !== -1) {
+ /*
+ * Confirm key pressed.
+ */
+ if (this.$confirmButton) {
+ this.$confirmButton.click();
+ }
+ }
+ },
+ setDialogCenter: function () {
+ if (this.$contentPane.css('display') == 'none') {
+ var contentHeight = 0;
+ var paneHeight = 0;
+ } else {
+ var contentHeight = this.$content.outerHeight();
+ var paneHeight = this.$contentPane.height();
+ if (paneHeight == 0)
+ paneHeight = contentHeight;
+ }
+ var off = 100;
+ var w = this.$content.outerWidth();
+
+ //var s = '-clip-path: inset(0px 0px '+contentHeight+'px 0px);' +
+ // 'clip-path: inset(0px 0px '+contentHeight+'px 0px)';
+
+ this.$content.css({
+ 'clip': 'rect(0px ' + (off + w) + 'px ' + contentHeight + 'px -' + off + 'px)'
+ });
+
+ this.$contentPane.css({
+ 'height': contentHeight
+ });
+
+ var windowHeight = $(window).height();
+ var boxHeight = this.$b.outerHeight() - paneHeight + contentHeight;
+ var topMargin = (windowHeight - boxHeight) / 2;
+ var minMargin = 100;
+ if (boxHeight > (windowHeight - minMargin)) {
+ var style = {
+ 'margin-top': minMargin / 2,
+ 'margin-bottom': minMargin / 2
+ }
+ $('body').addClass('jconfirm-noscroll');
+ } else {
+ var style = {
+ 'margin-top': topMargin
+ }
+ $('body').removeClass('jconfirm-noscroll');
+ }
+ this.$b.css(style);
+ },
+ close: function () {
+ var that = this;
+
+ if (this.isClosed())
+ return false;
+
+ if (typeof this.onClose === 'function')
+ this.onClose();
+
+ this._unwatchContent();
+ that._lastFocused.focus();
+
+ //this.observer.disconnect();
+ /*
+ unbind the window resize & keyup event.
+ */
+ $(window).unbind('resize.' + this._rand);
+ if (this.keyboardEnabled)
+ $(window).unbind('keyup.' + this._rand);
+
+ that.$el.find('.jconfirm-bg').removeClass('seen');
+ $('body').removeClass('jconfirm-noscroll');
+
+ this.$b.addClass(this.closeAnimation);
+ var closeTimer = (this.closeAnimation == 'anim-none') ? 0 : this.animationSpeed;
+ setTimeout(function () {
+ that.$el.remove();
+ }, closeTimer * 25 / 100);
+
+ jconfirm.record.closed += 1;
+ jconfirm.record.currentlyOpen -= 1;
+
+ return true;
+ },
+ open: function () {
+ var that = this;
+ if (this.isClosed())
+ return false;
+
+ that.$el.find('.jconfirm-bg').addClass('seen');
+ this.$b.removeClass(this.animation);
+ jconfirm.record.opened += 1;
+ jconfirm.record.currentlyOpen += 1;
+ if (typeof this.onOpen === 'function')
+ this.onOpen();
+
+ var jcr = 'jconfirm-box' + this._rand;
+ this.$b.attr('aria-labelledby', jcr).attr('tabindex', -1).focus();
+ this.$b.find('input[autofocus]:visible:first').focus();
+ if (this.$title)
+ this.$title.attr('id', jcr); else if (this.$content)
+ this.$content.attr('id', jcr);
+
+ setTimeout(function () {
+ that.$b.css({
+ 'transition-property': that.$b.css('transition-property') + ', margin'
+ });
+ that._modalReady.resolve();
+ }, this.animationSpeed);
+
+ return true;
+ },
+ isClosed: function () {
+ return this.$el.css('display') === '';
+ }
+ };
+
+ jconfirm.pluginDefaults = {
+ template: '',
+ title: 'Hello',
+ content: 'Are you sure to continue?',
+ contentLoaded: function () {
+ },
+ icon: '',
+ opacity: 0.2,
+ confirmButton: 'Okay',
+ cancelButton: 'Close',
+ confirmButtonClass: 'btn-default',
+ cancelButtonClass: 'btn-default',
+ theme: 'white',
+ animation: 'zoom',
+ closeAnimation: 'scale',
+ animationSpeed: 500,
+ animationBounce: 1.2,
+ keyboardEnabled: false,
+ rtl: false,
+ confirmKeys: [13], // ENTER key
+ cancelKeys: [27], // ESC key
+ container: 'body',
+ confirm: function () {
+ },
+ cancel: function () {
+ },
+ backgroundDismiss: false,
+ autoClose: false,
+ closeIcon: null,
+ closeIconClass: false,
+ watchInterval: 100,
+ columnClass: 'col-md-4 col-md-offset-4 col-sm-6 col-sm-offset-3 col-xs-10 col-xs-offset-1',
+ onOpen: function () {
+ },
+ onClose: function () {
+ },
+ onAction: function () {
+ }
+ };
+
+ jconfirm.record = {
+ opened: 0,
+ closed: 0,
+ currentlyOpen: 0
+ };
+})(jQuery);
diff --git a/kfet/templates/kfet/base.html b/kfet/templates/kfet/base.html
index 8c0d4713..e57c4cbe 100644
--- a/kfet/templates/kfet/base.html
+++ b/kfet/templates/kfet/base.html
@@ -10,11 +10,13 @@
{# CSS #}
+
{# JS #}
+
{% block extra_head %}{% endblock %}
diff --git a/kfet/templates/kfet/kpsul.html b/kfet/templates/kfet/kpsul.html
index 1874b941..06f75350 100644
--- a/kfet/templates/kfet/kpsul.html
+++ b/kfet/templates/kfet/kpsul.html
@@ -2,8 +2,10 @@
{% load staticfiles %}
{% block extra_head %}
+
+
{% endblock %}
{% block title %}K-Psul{% endblock %}
@@ -54,37 +56,41 @@
-
-
-
-
-
+
+
+
-
-
-
-
-
-
-
-
-
- Nom |
- Catégorie |
- Prix |
- Stock |
-
-
-
-
-
+
-
+