Better mobile datepicker

shared/static/css/main.css

@@ -3608,7 +3608,7 @@ a.tag:hover {
 .field.is-grouped.is-grouped-multiline:not(:last-child) {
   margin-bottom: 0;
 }
-@media screen and (min-width: 769px), print {
+@media screen and (max-width: 768px) {
   .field.is-horizontal {
     display: flex;
   }
@@ -3620,10 +3620,6 @@ a.tag:hover {
 @media screen and (max-width: 768px) {
   .field-label {
     margin-bottom: 0.5rem;
-  }
-}
-@media screen and (min-width: 769px), print {
-  .field-label {
     flex-basis: 0;
     flex-grow: 1;
     flex-shrink: 0;
@@ -3650,7 +3646,7 @@ a.tag:hover {
 .field-body .field .field {
   margin-bottom: 0;
 }
-@media screen and (min-width: 769px), print {
+@media screen and (max-width: 768px) {
   .field-body {
     display: flex;
     flex-basis: 0;

shared/static/src/bulma/sass/form/tools.sass

@@ -117,7 +117,7 @@ $label-colors: $form-colors !default
       &:not(:last-child)
         margin-bottom: 0
   &.is-horizontal
-    +tablet
+    +mobile
       display: flex
 
 .field-label
@@ -125,7 +125,6 @@ $label-colors: $form-colors !default
     font-size: inherit
   +mobile
     margin-bottom: 0.5rem
-  +tablet
     flex-basis: 0
     flex-grow: 1
     flex-shrink: 0
@@ -146,7 +145,7 @@ $label-colors: $form-colors !default
 .field-body
   .field .field
     margin-bottom: 0
-  +tablet
+  +mobile
     display: flex
     flex-basis: 0
     flex-grow: 5

shared/static/vendor/datetimepicker/picker.js

@@ -68,7 +68,7 @@ class DateTimePicker {
     // Création du modal
     this.modal = document.createElement('div');
     this.modal.classList.add('modal');
-    this.modal.innerHTML = `<div class="modal-background"></div><div class="modal-card"><header class="modal-card-head"><div class="field is-grouped has-addons is-flex-grow-1"><div class="control"><a class="button"><span class="icon"><i class="fas fa-chevron-left"></i></span></a></div><div class="control is-expanded"><a class="button is-fullwidth"></a></div><div class="control"><a class="button"><span class="icon"><i class="fas fa-chevron-right"></i></span></a></div></div></header><section class="modal-card-body"><div class="columns is-centered"><div class="column is-narrow"></div></div></section><footer class="modal-card-foot"><div class="field is-horizontal is-flex-grow-1"><div class="field-label is-normal"><label class="label">${_horaire[this.config.lang]}</label></div><div class="field-body"><div class="field has-addons"><div class="control"><div class="select is-left"><select><option>00</option><option>01</option><option>02</option><option>03</option><option>04</option><option>05</option><option>06</option><option>07</option><option>08</option><option>09</option><option>10</option><option>11</option><option>12</option><option>13</option><option>14</option><option>15</option><option>16</option><option>17</option><option>18</option><option>19</option><option>20</option><option>21</option><option>22</option><option>23</option></select></div></div><div class="control"><button class="button is-static has-text-primary"><b>h</b></button></div></div><div class="field has-addons"><div class="control"><div class="select"><select><option>00</option><option>05</option><option>10</option><option>15</option><option>20</option><option>25</option><option>30</option><option>35</option><option>40</option><option>45</option><option>50</option><option>55</option></select></div></div><div class="control"><button class="button is-static has-text-primary"><b>min</b></button></div></div><div class="field is-expanded"><button class="button is-primary is-fullwidth button-close">${_valider[this.config.lang]}</button></div></div></div></footer></div><button class="modal-close is-large" aria-label="close"></button>`;
+    this.modal.innerHTML = `<div class="modal-background"></div><div class="modal-card"><header class="modal-card-head"><div class="field is-grouped has-addons is-flex-grow-1"><div class="control"><a class="button"><span class="icon"><i class="fas fa-chevron-left"></i></span></a></div><div class="control is-expanded"><a class="button is-fullwidth"></a></div><div class="control"><a class="button"><span class="icon"><i class="fas fa-chevron-right"></i></span></a></div></div></header><section class="modal-card-body"><div class="columns is-centered is-mobile"><div class="column is-narrow"></div></div></section><footer class="modal-card-foot is-block"><div class="field is-horizontal is-flex-grow-1"><div class="field-label is-normal"><label class="label">${_horaire[this.config.lang]}</label></div><div class="field-body"><div class="field has-addons"><div class="control"><div class="select is-left"><select><option>00</option><option>01</option><option>02</option><option>03</option><option>04</option><option>05</option><option>06</option><option>07</option><option>08</option><option>09</option><option>10</option><option>11</option><option>12</option><option>13</option><option>14</option><option>15</option><option>16</option><option>17</option><option>18</option><option>19</option><option>20</option><option>21</option><option>22</option><option>23</option></select></div></div><div class="control"><button class="button is-static has-text-primary"><b>h</b></button></div></div><div class="field has-addons"><div class="control"><div class="select"><select><option>00</option><option>05</option><option>10</option><option>15</option><option>20</option><option>25</option><option>30</option><option>35</option><option>40</option><option>45</option><option>50</option><option>55</option></select></div></div><div class="control"><button class="button is-static has-text-primary"><b>min</b></button></div></div></div></div><br><button class="button is-primary is-fullwidth button-close">${_valider[this.config.lang]}</button></footer></div><button class="modal-close is-large" aria-label="close"></button>`;
     let _controls = this.modal.querySelectorAll('header a.button');
     this._leftArrow = _controls[0];
     this._menu = _controls[1];