Integration css au formulaire

MobiParc/assets/css/custom.css

@@ -1,5 +1,23 @@
 
+.flex-row{
+    display: flex;
+    flex-direction: row;
+}
+
+.flex-col{
+    display: flex;
+    flex-direction: column;
+}
+
+.flex-extend{
+	flex: 1;
+}
+
+.flex-end{
+    align-self: flex-end;
+}
 
 .hidden {
     display: none;
-}
+}
+

MobiParc/assets/css/template.css

@@ -1853,6 +1853,8 @@
 	input[type="password"],
 	input[type="email"],
 	input[type="tel"],
+	input[type="date"],
+	input[type="number"],
 	select,
 	textarea {
 		-moz-appearance: none;
@@ -1875,6 +1877,8 @@
 		input[type="password"]:invalid,
 		input[type="email"]:invalid,
 		input[type="tel"]:invalid,
+		input[type="date"]:invalid,
+        input[type="number"]:invalid,
 		select:invalid,
 		textarea:invalid {
 			box-shadow: none;
@@ -1884,6 +1888,8 @@
 		input[type="password"]:focus,
 		input[type="email"]:focus,
 		input[type="tel"]:focus,
+		input[type="date"]:focus,
+		input[type="number"]:focus,
 		select:focus,
 		textarea:focus {
 			border-color: #25a2c3;
@@ -1926,6 +1932,8 @@
 	input[type="text"],
 	input[type="password"],
 	input[type="email"],
+	input[type="date"],
+	input[type="number"],
 	select {
 		height: 3.5em;
 		line-height: 3.5em;
@@ -1949,58 +1957,58 @@
 		z-index: -1;
 	}
 
-		input[type="checkbox"] + label,
-		input[type="radio"] + label {
-			text-decoration: none;
-			color: #767d85;
-			cursor: pointer;
-			display: inline-block;
-			font-size: 1em;
-			font-weight: 300;
-			padding-left: 2.4em;
-			padding-right: 0.75em;
-			position: relative;
-		}
+	input[type="checkbox"] + label,
+	input[type="radio"] + label {
+		text-decoration: none;
+		color: #767d85;
+		cursor: pointer;
+		display: inline-block;
+		font-size: 1em;
+		font-weight: 300;
+		padding-left: 2.4em;
+		padding-right: 0.75em;
+		position: relative;
+	}
 
-			input[type="checkbox"] + label:before,
-			input[type="radio"] + label:before {
-				-moz-osx-font-smoothing: grayscale;
-				-webkit-font-smoothing: antialiased;
-				font-family: FontAwesome;
-				font-style: normal;
-				font-weight: normal;
-				text-transform: none !important;
-			}
+	input[type="checkbox"] + label:before,
+	input[type="radio"] + label:before {
+		-moz-osx-font-smoothing: grayscale;
+		-webkit-font-smoothing: antialiased;
+		font-family: FontAwesome;
+		font-style: normal;
+		font-weight: normal;
+		text-transform: none !important;
+	}
 
-			input[type="checkbox"] + label:before,
-			input[type="radio"] + label:before {
-				background: rgba(144, 144, 144, 0.075);
-				border-radius: 4px;
-				border: solid 1px #dee1e3;
-				content: '';
-				display: inline-block;
-				height: 1.65em;
-				left: 0;
-				line-height: 1.58125em;
-				position: absolute;
-				text-align: center;
-				top: 0;
-				width: 1.65em;
-			}
+	input[type="checkbox"] + label:before,
+	input[type="radio"] + label:before {
+		background: rgba(144, 144, 144, 0.075);
+		border-radius: 4px;
+		border: solid 1px #dee1e3;
+		content: '';
+		display: inline-block;
+		height: 1.65em;
+		left: 0;
+		line-height: 1.58125em;
+		position: absolute;
+		text-align: center;
+		top: 0;
+		width: 1.65em;
+	}
 
-		input[type="checkbox"]:checked + label:before,
-		input[type="radio"]:checked + label:before {
-			background: #f6755e;
-			border-color: #f6755e;
-			color: #ffffff;
-			content: '\f00c';
-		}
+	input[type="checkbox"]:checked + label:before,
+	input[type="radio"]:checked + label:before {
+		background: #f6755e;
+		border-color: #f6755e;
+		color: #ffffff;
+		content: '\f00c';
+	}
 
-		input[type="checkbox"]:focus + label:before,
-		input[type="radio"]:focus + label:before {
-			border-color: #25a2c3;
-			box-shadow: 0 0 0 1px #25a2c3;
-		}
+	input[type="checkbox"]:focus + label:before,
+	input[type="radio"]:focus + label:before {
+		border-color: #25a2c3;
+		box-shadow: 0 0 0 1px #25a2c3;
+	}
 
 	input[type="checkbox"] + label:before {
 		border-radius: 4px;

MobiParc/assets/js/main.js

@@ -49,7 +49,7 @@ var section;
 
 var load = function () {
     // Vide la section main
-    $(".main").empty();
+    $("#main").empty();
 
     // Page en cours
     sectionId = (window.location.hash.slice(1).length > 0 ? window.location.hash.slice(1) : "index");
@@ -81,21 +81,21 @@ var load = function () {
             store = txs.objectStore(model);
             store.getAll().onsuccess = function (event) {
                 var data = { data: event.target.result };
-                $(".main").html(template(data));
+                $("#main").html(template(data));
             };
         };
 
         request.onerror = function () {
             console.log("Error while loading the db '" + model + "'");
-            $(".main").html(template({}));
+            $("#main").html(template({}));
             return;
         };
 
         // Intercepte la soumision de formulaires
-        $(".main").on("submit", ".data-form", function (event) {
+        $("#main").on("submit", "form", function (event) {
             console.log("handle submit");
 
-            var form = $(".main").find(".data-form")[0];
+            var form = $("#main").find(".data-form")[0];
 
             // Stop the form from submitting since we’re handling that with AJAX.
             event.preventDefault();
@@ -103,11 +103,6 @@ var load = function () {
             // Call our function to get the form data.
             var data = formToJSON(form.elements);
 
-            //// DEMO ONLY: print the form data onscreen as a formatted JSON object.
-            //var dataContainer = document.getElementsByClassName('results-display')[0];
-            //// Use `JSON.stringify()` to make the output valid, human-readable JSON.
-            //dataContainer.textContent = JSON.stringify(data, null, "  ");
-
             data.guid = createGuid();
             //data.tstamp = Date.now();
             data.user = localStorage.hasOwnProperty("params") ? JSON.parse(localStorage.getItem("params")).user : "(unknown)";
@@ -117,10 +112,10 @@ var load = function () {
             store.put(data);
                 
             store.getAll().onsuccess = function (event) {
-                $(".main").empty();
+                $("#main").empty();
                 var data = { data: event.target.result };
                 var template = Handlebars.compile(section.html());
-                $(".main").html(template(data));
+                $("#main").html(template(data));
             };
         });
 
@@ -148,8 +143,8 @@ var load = function () {
     }
     else {
         //template = Handlebars.compile(section.html());
-        //$(".main").html(template({}));
-        $(".main").html(section.html());
+        //$("#main").html(template({}));
+        $("#main").html(section.html());
     }
 
 }
@@ -188,21 +183,22 @@ else {
 
 /* retour haut de page*/
 window.onscroll = function (ev) {
-    document.getElementById("cRetour").className = (window.pageYOffset > 100) ? "cVisible" : "cInvisible";
+
+    document.getElementById("back-top").className =(window.pageYOffset > 100) ? "": "hidden";
 };
 
-$('#cRetour').on('click', function () {
+$('#back-top').on('click', function () {
     $('html, body').animate({ scrollTop: 0 }, 200);
 });
 
 // Gere l'affichage des classes modales
-$(".modal-open, .modal-background, .modal-close").click(function () {
+$(".toggle-sync-dlg").click(function () {
     $(".modal-content,.modal-background").toggleClass("active");
     if ($(this).hasClass("modal-close")) location.reload();
 });
 
 // Rend selectionables les lignes des tables (.selectable)
-$(".main").selectable({
+$("#main").selectable({
     filter: ".selectable tr",
     stop: function () {
         $(".del").removeAttr("disabled");

MobiParc/index.html

@@ -16,29 +16,29 @@
     <script src="assets/js/main.js" defer></script>
    
 </head>
-<body class="nojs">
+<body class="nojs wrapper">
 	<!-- Header -->
 	<header id="header">
 		<nav class="left">
 			<a href="#menu"><span>Menu</span></a>
 		</nav>
+
 		<a href="index.html" class="logo">MobiParc</a>
 		
         <nav class="right">
-            <button class="modal-open alt">Sync</button>
+            <button class="alt toggle-sync-dlg">Sync</button>
 		</nav>
-
 	</header>
 
     <!-- Boite de dialogue synchro -->
-    <section class="hidden">
+    <section id="sync-dlg" class="hidden">
         <div class="sync-result"></div>
-        <span class="modal-close">X</span>
+        <span class="toggle-sync-dlg">X</span>
         <button class="data-sync" disabled>Sync</button>
         <br>
     </section>
 
-    <section class="main">
+    <section id="main" class="inner">
         <noscript>
             <h1>Suivi mobile d'Activités</h1>
             Pour accéder à toutes les fonctionnalités de ce site, vous devez activer JavaScript. Voici les 
@@ -49,164 +49,154 @@
 
     </section>
 
-    <section class="footer-top">
-        <pre class="results__display-wrapper"><code class="results-display"></code></pre>       
-    </section>
-        
     <footer>
-        <span id="cRetour" class="cInvisible"></span>
+        <span id="back-top" class="hidden"></span>
     </footer>
-    
-    <section class="modal-background"></section>
 
 
+    <!-- Templates et boites de dialogues -->
 
     <script id="index" type="x-tmpl-mustache">
-        <h1>Suivi mobile d'activités</h1>
+
+        <header class="align-center">
+            <h1>Suivi mobile d'activités</h1>
+        </header>
       
-        <div class="home-pp">
-            <a href="#activites">
-                <div>
-                    <picture>
-                        <source type="image/svg+xml" srcset="img/alert.svg" media="(min-width:240px)">
-                        <img src="img/alert.png" width="224" alt="" />
-                    </picture><h3>
-                        Saisie d'activité
-                    </h3>
-                </div>
-            </a>
-        </div>
     </script>
 
     <script id="activites" type="x-tmpl-mustache" model="activites">
-        <h1>Activité</h1>
-        <h2>Nouvelle saisie</h2>
-
-        <form class="data-form activite" data-dbname="activites">
-
-            <h3>Activité</h3>
-            
-            <div class="input-group">
-                <label class="label" for="dateint">Date: </label>
-                <input class="input-text" id="dateint" name="dateint" type="date" title="Date de l'intervention'" /> <!--required-->
-            </div>
-
-            <div class="input-group">
-                <label class="label" for="datefin">Date de fin: </label>
-                <input class="input-text" id="datefin" name="datefin" type="date" title="Date de fin de l'intervention'" />
-            </div>
-
-            <div class="input-group">
-                <label class="label" for="localisation">Localisation: </label>
-                <select class="input-select" id="localisation" name="localisation">
-                    <option value="6703400">BERSTETT</option>
-                    <option value="6711200">DUTTLENHEIM</option>
-                </select>
-            </div>
-
-            <div class="input-group">
-                <label class="label" for="engin">Engin: </label>
-                <select class="input-select" id="engin" name="engin">
-                    <option value="01P037">MINI PELLE CASE P037</option>
-                    <option value="01P038">PELLE LIEBHERR P038 R313/2013</option>
-                </select>
-            </div>
-
-            <div class="input-group">
-                <label class="label" for="realisation">Réalisation: </label>
-                <select class="input-select" id="realisation" name="realisation">
-                    <option value="13">Pose d'enrochements</option>
-                    <option value="16">Terrassement:déblais,remblais,tranchées</option>
-                </select>
-            </div>
-
-            <div class="input-group">
-                <label class="label" for="commentaire">Commentaire: </label>
-                <input class="input-text" id="commentaire" name="commentaire" type="text" title="Commentaire" />
-            </div>
-
-            <h3>Heures supplémentaires</h3>
-
-            <div class="input-group">
-                <label class="label" for="hsjour">Jour (7h-7h30, 16h30-22h): </label>
-                <input class="input-text" id="hsjour" name="hsjour" type="number" title="Heures sup. (jour)" />
-            </div>
-
-            <div class="input-group">
-                <label class="label" for="hsnuit">Nuit: </label>
-                <input class="input-text" id="hsnuit" name="hsnuit" type="number" title="Heures sup. (nuit)" />
-            </div>
-
-            <div class="input-group">
-                <label class="label" for="hsdim">Dimanche et jours fériés: </label>
-                <input class="input-text" id="hsdim" name="hsdim" type="number" title="Heures sup. (dimanche et jours feriés)" />
-            </div>
-
-            <h3>Frais</h3>
-
-            <div class="input-group">
-                <label class="label" for="nbrepas">Nombre de repas: </label>
-                <input class="input-text" id="nbrepas" name="nbrepas" type="number" title="Nombre de repas" />
-            </div>
-
-            <div class="input-group">
-                <label class="label" for="depart">Départ: </label>
-                <select class="input-select" id="depart" name="depart">
-                    <option value="6703400">BERSTETT</option>
-                    <option value="6711200">DUTTLENHEIM</option>
-                </select>
-            </div>
-
-            <div class="input-group">
-                <label class="label" for="kmstt">Kilomètres sur temps de travail (7h30 - 16h30): </label>
-                <input class="input-text" id="kmstt" name="kmstt" type="number" title="Kilomètres sur temps de travail" />
-            </div>
-
-            <div class="input-group">
-                <label class="label" for="vpstt">Avec véhicule personnel</label>
-                <input class="input-text" id="vpstt" name="vpstt" type="checkbox" title="Avec véhicule personnel" />
-            </div>
-
-            <div class="input-group">
-                <label class="label" for="kmhtt">Kilomètres hors temps de travail : </label>
-                <input class="input-text" id="kmhtt" name="kmhtt" type="number" title="Kilomètres hors temps de travail" />
-            </div>
-
-            <div class="input-group">
-                <label class="label" for="vphtt">Avec véhicule personnel</label>
-                <input class="input-text" id="vphtt" name="vphtt" type="checkbox" title="Avec véhicule personnel" />
-            </div>
-
-            <button class="button-submit btn btn-save" type="submit">Enregistrer</button>
-        </form>
+        
+        <header class="align-center">
+            <h1>Nouvel enregistrement</h1>
+        </header>
+
+        <div class="row 200% uniform">
+
+            <form>
+                <div class="row uniform">
+
+                    <h3 class="12u$">Activité</h3>
+
+                    <div class="6u 12u$(xsmall)">
+                        <input id="dateint" name="dateint" type="text" required placeholder="Date de l'intervention" value="" onfocus="(this.type='date')" onblur="(this.type='text')" />
+                    </div>
+
+                    <div class="6u 12u$(xsmall)">
+                        <input id="datefin" name="datefin" type="text" placeholder="Date de fin de l'intervention" onfocus="(this.type='date')" onblur="(this.type='text')" />
+                    </div>
+
+                    <div class="12u$">
+                        <div class="select-wrapper">
+                            <select id="localisation" name="localisation">
+                                <option value="">- Localisation -</option>
+                                <option value="6703400">BERSTETT</option>
+                                <option value="6711200">DUTTLENHEIM</option>
+                            </select>
+                        </div>
+                    </div>
+
+                    <div class="12u$">
+                        <select id="engin" name="engin">
+                            <option value="">- Engin -</option>
+                            <option value="01P037">MINI PELLE CASE P037</option>
+                            <option value="01P038">PELLE LIEBHERR P038 R313/2013</option>
+                        </select>
+                    </div>
+
+                    <div class="12u$">
+                        <select id="realisation" name="realisation">
+                            <option value="13">- Type d'intervention -</option>
+                            <option value="13">Pose d'enrochements</option>
+                            <option value="16">Terrassement:déblais,remblais,tranchées</option>
+                        </select>
+                    </div>
+
+                    <div class="12u$">
+                        <textarea id="commentaire" name="commentaire" type="text" placeholder="Commentaire" rows="3"/>
+                    </div>
+
+                    <h3 class="12u$">Heures supplémentaires</h3>
+
+                    <div class="4u 12u$(small)">
+                        <input id="hsjour" name="hsjour" type="number" placeholder="Jour (7h-7h30, 16h30-22h)"/>
+                    </div>
+
+                    <div class="4u 12u$(small)">
+                        <input id="hsnuit" name="hsnuit" type="number" placeholder="Nuit"/>
+                    </div>
+
+                    <div class="4u 12u$(small)">
+                        <input id="hsdim" name="hsdim" type="number" placeholder="Dimanche et jours fériés"/>
+                    </div>
+
+                    <h3 class="12u$">Frais</h3>
+
+                    <div class="12u$">
+                        <input id="nbrepas" name="nbrepas" type="number" placeholder="Nombre de repas"/>
+                    </div>
+
+                    <div class="12u$">
+                        <select id="depart" name="depart" placeholder="Départ">
+                            <option value="">- Lieu de départ -</option>
+                            <option value="6703400">BERSTETT</option>
+                            <option value="6711200">DUTTLENHEIM</option>
+                        </select>
+                    </div>
+
+                    <div class="12u$">
+                        <input id="kmstt" name="kmstt" type="number" placeholder="Kilomètres sur temps de travail (7h30 - 16h30)"/>
+                    </div>
+
+                    <div class="12u$">
+                        <input id="vpstt" name="vpstt" type="checkbox"/>
+                        <label for="vpstt">Avec véhicule personnel</label>
+                    </div>
+
+                    <div class="12u$">
+                        <input id="kmhtt" name="kmhtt" type="number" title="Kilomètres hors temps de travail" placeholder="Kilomètres hors temps de travail"/>
+                    </div>
+
+                    <div class="12u$">
+                        <input id="vphtt" name="vphtt" type="checkbox"/>
+                        <label for="vphtt">Avec véhicule personnel</label>
+                    </div>
+
+                    <div class="12u$">
+                        <button type="submit" class="fit">Enregistrer</button>
+                    </div>
+
+                </div>
+
+            </form>
         
 
-        {{#if data}}
-        <button class="del btn btn-delete" disabled>Supprimer</button>
-
-        <h2>Mes données</h2>
-        <table class="selectable">
-            <thead>
-                <tr>
-                    <td>Date</td>
-                    <td>Loc.</td>
-                    <td>Real.</td>
-                    <td>...</td>
-                </tr>
-            </thead>
-            <tbody>
-                {{#data}}
-                <tr data-id="{{tstamp}}" data-type="activite">
-                    <td>{{dateint}}</td>
-                    <td>{{localisation}}</td>
-                    <td>{{realisation}}</td>
-                    <td>Voir+</td>
-                </tr>
-                {{/data}}
-            </tbody>
-        </table>
-        {{/if}}
+            {{#if data}}
+            <button class="del btn btn-delete" disabled>Supprimer</button>
+
+            <h2>Mes données</h2>
+            <table class="selectable">
+                <thead>
+                    <tr>
+                        <td>Date</td>
+                        <td>Loc.</td>
+                        <td>Real.</td>
+                        <td>...</td>
+                    </tr>
+                </thead>
+                <tbody>
+                    {{#data}}
+                    <tr data-id="{{tstamp}}" data-type="activite">
+                        <td>{{dateint}}</td>
+                        <td>{{localisation}}</td>
+                        <td>{{realisation}}</td>
+                        <td>Voir+</td>
+                    </tr>
+                    {{/data}}
+                </tbody>
+            </table>
+            {{/if}}
 
+        </div>
     </script>
 
 </body>