Update fronend's css

assets/lib/doodle/css/doodle.css

@@ -12,8 +12,8 @@
     overflow-x: visible;
 }
 
-thead tr th {
-    color: #6d5cae;
+.doodle-table thead tr th, .doodle-table tbody tr td {
+    color: #2c2c2c;
 }
 
 .doodle-table thead tr th{
@@ -46,11 +46,14 @@ thead tr th {
     border-right: none;
     min-width: 130px;
     max-width: 145px;
+}
+
+.doodle-table.backend thead tr th:last-child {
     background: #fafafa;
     border-bottom: 1px dashed #e6e6e6 !important;
 }
 
-.doodle-table tr td:last-child {
+.doodle-table.backend tr td:last-child {
     background: #fafafa;
     border: 1px dashed #e6e6e6;
 }
@@ -65,6 +68,10 @@ thead tr th {
     cursor: default;
 }
 
+.doodle-table.frontend tr td:first-child:hover {
+    background: none;
+}
+
 .doodle-table thead tr th {
     border-top: none !important;
     border-left: none;
@@ -73,7 +80,6 @@ thead tr th {
 }
 
 .doodle-table tbody tr td {
-    color: #6d5cae;
     padding: 0 !important;
     line-height: 1.2;
     text-transform: uppercase;
@@ -108,7 +114,7 @@ thead tr th {
     transition: background 200ms ease;
 }
 
-.doodle-table tr:last-child td:hover, .doodle-table tr:last-child td {
+.doodle-table.backend tr:last-child td:hover, .doodle-table.backend tr:last-child td {
     background: #fafafa;
 }
 

assets/lib/doodle/js/doodle.js

@@ -26,6 +26,9 @@
             this.getHours();
             this.createTable();
 
+            //Remet l'overflow pour le responsive en front
+            $('table').parent().css('overflow-x', 'auto');
+
         };
 
         /**
@@ -35,7 +38,7 @@
             $(document).on('click', 'input[type=checkbox]', this.eventInput);
 
             this.item.append(`
-                <table class="table doodle-table">
+                <table class="table doodle-table frontend">
                 <thead>
                     ${this.createHeaderTable()}
                 </thead>
@@ -58,11 +61,10 @@
             for(let index in this.days) {
                 let $tr = $('<tr>');
 
-                let formatDateDay = moment(this.days[index], 'DD/MM/YYYY').locale('fr').format('dddd');
-                let formatDateMonth = moment(this.days[index], 'DD/MM/YYYY').locale('fr').format('DD <br> MMMM');
+                let formatDateDay = moment(this.days[index], 'DD/MM/YYYY').locale('fr').format('dddd DD');
+                let formatDateMonth = moment(this.days[index], 'DD/MM/YYYY').locale('fr').format('MMMM');
 
-                    html = $tr.append('<td>' + formatDateDay + '</td>')
-                        .append('<td>' + formatDateMonth + '</td>')
+                    html = $tr.append('<td><span class="date_format"><b>' + formatDateDay + '</b></span> ' + formatDateMonth + '</td>')
                         .append(this.createBodyContent(this.days[index]));
 
                 tbodyFinal = $tbody.append(html);
@@ -114,7 +116,7 @@
             let finalSortedTab = [];
 
             // Nombre de cases vide
-            const NBRCASEVIDE = 2;
+            const NBRCASEVIDE = 1;
 
             //Ajoute les cases vide
             for (let i = 0; i < NBRCASEVIDE; i++) {
@@ -232,8 +234,10 @@
 
             if (isChecked) {
                 this.addInOutputObject(data);
+                $(e.target).parent().parent().css('background', '#e2deef');
             } else {
-                this.removeInOutputObject(data)
+                this.removeInOutputObject(data);
+                $(e.target).parent().parent().css('background', '');
             }
 
             this.createJSON();

index.html

@@ -23,11 +23,11 @@
     <!-- Example row of columns -->
     <div class="row">
         <div class="col-md-12">
-            <div class="doodle table-responsive"></div>
-            <input type="hidden" id="inputVal" value='{"19/01/2018":["10","11","12"],"20/01/2018":["10","11","12"],"21/01/2018":["10","11","12"],"22/01/2018":["10","11","12"],"23/01/2018":["10","11","12"],"24/01/2018":["10","11:15","12"]}'>
+            <!--<div class="doodle table-responsive"></div>
+            <input type="hidden" id="inputVal" value='{"19/01/2018":["10","11","12"],"20/01/2018":["10","11","12"],"21/01/2018":["10","11","12"],"22/01/2018":["10","11","12"],"23/01/2018":["10","11","12"],"24/01/2018":["10","11:15","12"]}'>-->
 
-            <!--<div class="doodle table-responsive" data-json="json/data.json"></div>
-            <input type="hidden" id="inputVal" value='' />-->
+            <div class="doodle table-responsive" data-json="json/data.json"></div>
+            <input type="hidden" id="inputVal" value='' />
         </div>
     </div>
 

js/app.js

 $( document ).ready(function() {
     $('.doodle').Doodle({
-        editMode: true,
+        editMode: false,
         output: '#inputVal',
         input: '#inputVal'
     });