From 93ba28a72f0df1e113ad12736839b8c6e12de7ae Mon Sep 17 00:00:00 2001
From: Sandrine Caruso <sandrine.caruso@ens-cachan.org>
Date: Fri, 19 Jun 2020 16:19:28 +0200
Subject: Bouton importer fichier avec jolie image et import tout de suite

---
 static/icons/import.png | Bin 0 -> 19119 bytes
 static/requetes.js      |   4 ++++
 static/style.css        |  32 +++++++++++++++++++++++++++++++-
 templates/index.html    |  16 +++++++++-------
 4 files changed, 44 insertions(+), 8 deletions(-)
 create mode 100644 static/icons/import.png

diff --git a/static/icons/import.png b/static/icons/import.png
new file mode 100644
index 0000000..e184925
Binary files /dev/null and b/static/icons/import.png differ
diff --git a/static/requetes.js b/static/requetes.js
index b7e719a..4442470 100644
--- a/static/requetes.js
+++ b/static/requetes.js
@@ -103,3 +103,7 @@ function download_file(filename,mimetype,data) {
   document.body.removeChild(element);	
 	
 }
+
+function upload_file(data) {
+	document.getElementById('form_import_donnees').submit();
+}
\ No newline at end of file
diff --git a/static/style.css b/static/style.css
index 97f20d9..e2d42ff 100644
--- a/static/style.css
+++ b/static/style.css
@@ -42,10 +42,40 @@ input[type="text"] {
 	display: none;
 }
 
-#import_donnees, #pref_graphique{
+#pref_graphique {
 	display: none;
 }
 
+#import_donnees label {
+    height: 128px;
+    display: inline-block;
+	cursor: pointer;
+	position: relative;
+}
+
+#import_donnees label img {
+    border-radius: 100%;
+    box-shadow: 0px 0px 10px #55f;
+}
+
+#import_donnees label .icon_legend {
+	position: absolute;
+	top: 50%;
+	left: 50%;
+	transform: translate(-50%,-50%);
+	width: 90%;
+	text-align: center;
+	opacity: 0.7;
+	line-height: 1.5;
+	background: rgba(256,256,256,0.5);
+}
+
+#import_donnees input {
+	opacity: 0;
+	position: absolute;
+	z-index: -1;
+}
+
 .bouton {
 	text-decoration: underline;
 }
diff --git a/templates/index.html b/templates/index.html
index 3404f22..3ca5eac 100644
--- a/templates/index.html
+++ b/templates/index.html
@@ -6,19 +6,21 @@
 
 <h2>Données de l'enfant</h2>
 
-<h3>Importer un fichier </h3>
-<div class="bouton" onclick="affiche_cache('import_donnees',this)">Afficher</div>
+<!--<h3>Importer un fichier </h3>
+<div class="bouton" onclick="affiche_cache('import_donnees',this)">Afficher</div>-->
 <div id="import_donnees">
- <form action="/" method="post" enctype="multipart/form-data">
+ <form action="/" method="post" enctype="multipart/form-data" id="form_import_donnees">
 
 
 
-  <label for="fichier_donnees">Importer le fichier de données</label>
-  <input type="file" name="fichier_donnees">
-  <input type="submit" name="valider_fichier" value="Charger les données">
+  <label for="fichier_donnees">
+	<img src="static/icons/import.png">
+	<div class="icon_legend">Importer un fichier</div>
+  </label>
+  <input type="file" name="fichier_donnees" id="fichier_donnees" oninput="upload_file()">
+  <!--<input type="submit" name="valider_fichier" value="Charger les données">-->
 </form> 
 </div>
-<hr>
 
 <form id="donnees_enfant">
 	
-- 
cgit v1.2.3