Boutons avec icones

diff --git a/static/icons/courbe.png b/static/icons/courbe.png
new file mode 100644 (file)
index 0000000..a46c889
Binary files /dev/null and b/static/icons/courbe.png differ

diff --git a/static/icons/export.png b/static/icons/export.png
new file mode 100644 (file)
index 0000000..16ffba2
Binary files /dev/null and b/static/icons/export.png differ

diff --git a/static/icons/trash.png b/static/icons/trash.png
new file mode 100644 (file)
index 0000000..85a6029
Binary files /dev/null and b/static/icons/trash.png differ

diff --git a/static/style.css b/static/style.css
index b5f041abdbd7d942717017d7ce9fbe1caef2db25..a66176235b0d35cdaedeba40be183e57e2fa5794 100644 (file)
--- a/static/style.css
+++ b/static/style.css
@@ -49,19 +49,19 @@ img#courbe {
        display: none;
 }
 
-#import_donnees label {
+.icon_button {
     display: inline-block;
        cursor: pointer;
        position: relative;
 }
 
-#import_donnees label img {
+.icon_button img {
     border-radius: 100%;
        box-shadow: 0px 0px 5px #55f;
        vertical-align: middle;
 }
 
-#import_donnees label .icon_legend {
+.icon_button .icon_legend {
        text-align: center;
        opacity: 0.7;
        line-height: 1.5;
@@ -70,7 +70,7 @@ img#courbe {
        vertical-align: middle;
 }
 
-#import_donnees input {
+#fichier_donnees, #reset_donnees {
        display: none;
 }
 

diff --git a/templates/index.html b/templates/index.html
index cc8c4ec5d252b8dc4e864d92f4b4d0d4ab9c74fd..0b2a4c57d3c5a72e5b943bd44a545913ffc509c9 100644 (file)
--- a/templates/index.html
+++ b/templates/index.html
@@ -13,7 +13,7 @@
 
 
 
-  <label for="fichier_donnees">
+  <label for="fichier_donnees" class="icon_button">
        <img src="static/icons/import.png">
        <span class="icon_legend">Importer un fichier</span>
   </label>
@@ -27,8 +27,12 @@
 
        
 <h3>Informations sur l'enfant</h3>
-<div>   
-<input type="reset" value="Effacer les données du formulaire">         
+<div>
+       <label for="reset_donnees" class="icon_button">
+               <img src="static/icons/trash.png">
+               <span class="icon_legend">Effacer les données du formulaire</span>
+       </label>         
+       <input type="reset" id="reset_donnees" value="Effacer les données du formulaire">       
 </div>
 <ul>
 <li><label>Nom de l'enfant&nbsp;:</label> <input type="text" name="nom" value="{{ valform.nom }}"></li>
@@ -98,7 +102,10 @@
 <!-- section retour -->
 <hr>
 
-<button onclick="appelle_image()">Je veux la courbe !</button>
+<div onclick="appelle_image()" class="icon_button">
+       <img src="static/icons/courbe.png">
+       <span class="icon_legend">Je veux la courbe !</span>
+</div>
 
 <hr>
 <div id="courbe_warnings">
@@ -113,8 +120,9 @@
 
        <h2>Courbe</h2>
        <img id="courbe">
-       <div>
-       <button id="courbe_dl">Télécharger la courbe</button>
+       <div id="courbe_dl" class="icon_button">
+               <img src="static/icons/export.png">
+               <span class="icon_legend">Télécharger la courbe</span>
        </div>
 </div>
 
@@ -123,7 +131,10 @@
        <h2>Export des données</h2>
        <p>Vous pouvez télécharger les données afin de ne pas avoir à les re-saisir la prochaine fois.</p>
 
-       <div><button id="export_dl">Télécharger les données</button></div>
+       <div id="export_dl" class="icon_button">
+               <img src="static/icons/export.png">
+               <span class="icon_legend">Télécharger les données</span>
+       </div>
        <p>Si vous n'arrivez pas à télécharger les données, <a href='#export' onclick="affiche_export()">cliquez ici</a> pour les voir en texte clair&nbsp;: il vous suffira de les copier/coller dans un fichier texte.</p>
        <textarea readonly id="export">
        </textarea>