Commit 07329faa4a24da1794592c58eae5a791a9ee9dd3
1 parent
40f71ab1
Simplification de l'HTML et du CSS
Et on enlève le cancer avec du cancer ! Comme on dit, on soigne le mal par le mal.
Showing
3 changed files
with
126 additions
and
117 deletions
Show diff stats
index.html
@@ -50,7 +50,7 @@ | @@ -50,7 +50,7 @@ | ||
50 | </div> | 50 | </div> |
51 | 51 | ||
52 | <!-- Page --> | 52 | <!-- Page --> |
53 | - <nav class="red" role="navigation"> | 53 | + <nav role="navigation"> |
54 | <div class="nav-wrapper container"> | 54 | <div class="nav-wrapper container"> |
55 | <a class="brand-logo" v-if="page == 'connexion'">10⁵</a> | 55 | <a class="brand-logo" v-if="page == 'connexion'">10⁵</a> |
56 | <div class="left" v-else> | 56 | <div class="left" v-else> |
@@ -68,8 +68,8 @@ | @@ -68,8 +68,8 @@ | ||
68 | <li><a>TODO</a></li> | 68 | <li><a>TODO</a></li> |
69 | </ul> | 69 | </ul> |
70 | </div> | 70 | </div> |
71 | - <div class="col s12 red" v-show="page == 'operations'"> | ||
72 | - <ul class="tabs red"> | 71 | + <div class="col s12" v-show="page == 'operations'"> |
72 | + <ul class="tabs"> | ||
73 | <li class="tab col s3"><a href="#creation">Création</a></li> | 73 | <li class="tab col s3"><a href="#creation">Création</a></li> |
74 | <li class="tab col s3"><a href="#rechargement">Rechargement</a></li> | 74 | <li class="tab col s3"><a href="#rechargement">Rechargement</a></li> |
75 | <li class="tab col s3"><a class="active" href="#paiement">Paiement</a></li> | 75 | <li class="tab col s3"><a class="active" href="#paiement">Paiement</a></li> |
@@ -78,125 +78,102 @@ | @@ -78,125 +78,102 @@ | ||
78 | </div> | 78 | </div> |
79 | </nav> | 79 | </nav> |
80 | 80 | ||
81 | - <div class="section no-pad-bot" id="main"> | ||
82 | - <br><br><br> | 81 | + <div id="main"> |
83 | <div class="container" v-show="page == 'connexion'"> | 82 | <div class="container" v-show="page == 'connexion'"> |
84 | <h4>Se connecter</h4> | 83 | <h4>Se connecter</h4> |
85 | - <h5>Avec votre identifiant et votre mot de passe</h5> | ||
86 | - <div class="row"> | ||
87 | - <form class="col s12"> | ||
88 | - <div class="row"> | ||
89 | - <div class="input-field col s12"> | ||
90 | - <input type="text" name="login" v-model="login"> | ||
91 | - <label for="login">Identifiant</label> | ||
92 | - </div> | ||
93 | - </div> | ||
94 | - <div class="row"> | ||
95 | - <div class="input-field col s12"> | ||
96 | - <input type="password" name="mdp" v-model="mdp"> | ||
97 | - <label for="mdp">Mot de passe</label> | ||
98 | - </div> | 84 | + <div> |
85 | + <h5>Avec votre identifiant et votre mot de passe</h5> | ||
86 | + <form @submit="connecter"> | ||
87 | + <div class="input-field"> | ||
88 | + <input type="text" name="login" v-model="login"> | ||
89 | + <label for="login">Identifiant</label> | ||
99 | </div> | 90 | </div> |
100 | - <div class="row"> | ||
101 | - <a class="btn-large waves-effect waves-light disabled" @click="connecter" :class="{'disabled': !peutConnecter}">Se connecter</a> | 91 | + <div class="input-field"> |
92 | + <input type="password" name="mdp" v-model="mdp"> | ||
93 | + <label for="mdp">Mot de passe</label> | ||
102 | </div> | 94 | </div> |
103 | - </form> | ||
104 | - </div> | ||
105 | - <div v-if="PEUT_NFC"> | ||
106 | - <h5>Avec votre carte étudiant</h5> | ||
107 | - <p>Passez-la simplement devant le lecteur</p> | 95 | + <button :disabled="!login || !mdp">Se connecter</button> |
108 | </div> | 96 | </div> |
97 | + </form> | ||
98 | + </div> | ||
99 | + <div v-if="PEUT_NFC"> | ||
100 | + <h5>Avec votre carte étudiant</h5> | ||
101 | + <p>Passez-la simplement devant le lecteur.</p> | ||
109 | </div> | 102 | </div> |
110 | 103 | ||
111 | <div class="container" v-show="page == 'operations'"> | 104 | <div class="container" v-show="page == 'operations'"> |
112 | <div class="row center"> | 105 | <div class="row center"> |
113 | <div id="creation"> | 106 | <div id="creation"> |
114 | <h5>Créer un nouveau client</h5> | 107 | <h5>Créer un nouveau client</h5> |
115 | - <div class="row"> | ||
116 | - <form class="col s12"> | ||
117 | - <div class="input-field col s12" v-if="!PEUT_NFC"> | ||
118 | - <input type="text" name="idCarte" maxlength="8" v-model="idCarte"> | ||
119 | - <label for="idCarte">Identifiant de la carte</label> | ||
120 | - </div> | ||
121 | - <div class="input-field col s12"> | ||
122 | - <input type="number" name="solde" v-model="solde"> | ||
123 | - <label for="solde">Solde initial (€)</label> | ||
124 | - </div> | ||
125 | - <div class="row center"> | ||
126 | - <a class="btn-large waves-effect waves-light" @click="creer" :class="{'disabled': !peutCreer}">Créer</a> | ||
127 | - </div> | ||
128 | - </form> | ||
129 | - </div> | 108 | + <form @submit="creer"> |
109 | + <div class="input-field" v-if="!PEUT_NFC"> | ||
110 | + <input type="text" name="idCarte" maxlength="8" v-model="idCarte"> | ||
111 | + <label for="idCarte">Identifiant de la carte</label> | ||
112 | + </div> | ||
113 | + <div class="input-field"> | ||
114 | + <input type="number" name="solde" v-model="solde"> | ||
115 | + <label for="solde">Solde initial (€)</label> | ||
116 | + </div> | ||
117 | + <button :disabled="!solde || (!PEUT_NFC && !idCarte)">Créer</button> | ||
118 | + </form> | ||
130 | </div> | 119 | </div> |
131 | <div id="rechargement"> | 120 | <div id="rechargement"> |
132 | <h5>Recharger un client</h5> | 121 | <h5>Recharger un client</h5> |
133 | - <div class="row"> | ||
134 | - <form class="col s12"> | ||
135 | - <div class="input-field col s12" v-if="!PEUT_NFC"> | ||
136 | - <input type="text" name="idCarte" maxlength="8" v-model="idCarte"> | ||
137 | - <label for="idCarte">Identifiant de la carte</label> | ||
138 | - </div> | ||
139 | - <div class="input-field col s12"> | ||
140 | - <input type="number" name="credit"> | ||
141 | - <label for="credit">Crédit (€)</label> | ||
142 | - </div> | ||
143 | - <div class="row center"> | ||
144 | - <a class="btn-large waves-effect waves-light btn modal-trigger">Recharger</a> | ||
145 | - </div> | ||
146 | - </form> | ||
147 | - </div> | 122 | + <form @submit="recharger"> |
123 | + <div class="input-field" v-if="!PEUT_NFC"> | ||
124 | + <input type="text" name="idCarte" maxlength="8" v-model="idCarte"> | ||
125 | + <label for="idCarte">Identifiant de la carte</label> | ||
126 | + </div> | ||
127 | + <div class="input-field"> | ||
128 | + <input type="number" name="credit" v-model="credit"> | ||
129 | + <label for="credit">Crédit (€)</label> | ||
130 | + </div> | ||
131 | + <button :disabled="!credit || (!PEUT_NFC && !idCarte)">Créer</button> | ||
132 | + </form> | ||
148 | </div> | 133 | </div> |
149 | <div id="paiement"> | 134 | <div id="paiement"> |
150 | <h5>Vendre à un client</h5> | 135 | <h5>Vendre à un client</h5> |
151 | - <div class="row"> | ||
152 | - <form class="col s12"> | ||
153 | - <div class="input-field col s12" v-if="!PEUT_NFC"> | ||
154 | - <input type="text" name="idCarte" maxlength="8" v-model="idCarte"> | ||
155 | - <label for="idCarte">Identifiant de la carte</label> | ||
156 | - </div> | ||
157 | - <br/> | 136 | + <form @submit="payer"> |
137 | + <div class="input-field" v-if="!PEUT_NFC"> | ||
138 | + <input type="text" name="idCarte" maxlength="8" v-model="idCarte"> | ||
139 | + <label for="idCarte">Identifiant de la carte</label> | ||
140 | + </div> | ||
141 | + <div> | ||
158 | <h6>En spécifiant le nombre de consommations</h6> | 142 | <h6>En spécifiant le nombre de consommations</h6> |
159 | <div id="grilleBieres"> | 143 | <div id="grilleBieres"> |
160 | - <div class="row"> | ||
161 | - <div class="col s4"><a class="waves-effect waves-light btn">1</a></div> | ||
162 | - <div class="col s4"><a class="waves-effect waves-light btn">2</a></div> | ||
163 | - <div class="col s4"><a class="waves-effect waves-light btn">3</a></div> | 144 | + <div> |
145 | + <div v-for="i in [1, 2, 3]"><button :disabled="!PEUT_NFC && !idCarte">{{ i }}</button></div> | ||
164 | </div> | 146 | </div> |
165 | - <div class="row"> | ||
166 | - <div class="col s4"><a class="waves-effect waves-light btn">4</a></div> | ||
167 | - <div class="col s4"><a class="waves-effect waves-light btn">5</a></div> | ||
168 | - <div class="col s4"><a class="waves-effect waves-light btn">6</a></div> | 147 | + <div> |
148 | + <div v-for="i in [4, 5, 6]"><button :disabled="!PEUT_NFC && !idCarte">{{ i }}</button></div> | ||
169 | </div> | 149 | </div> |
170 | </div> | 150 | </div> |
171 | - <br/> | 151 | + </div> |
152 | + <div class="row"> | ||
172 | <h6>En spécifiant un montant</h6> | 153 | <h6>En spécifiant un montant</h6> |
173 | - <div class="row"> | ||
174 | - <div class="input-field col s12"> | ||
175 | - <input type="number" name="prix"> | ||
176 | - <label for="prix">Prix (€)</label> | ||
177 | - </div> | 154 | + <div class="input-field"> |
155 | + <input type="number" name="prix" v-model="prix"> | ||
156 | + <label for="prix">Prix (€)</label> | ||
178 | </div> | 157 | </div> |
179 | - <div class="row center"> | ||
180 | - <a class="btn-large waves-effect waves-light">Payer</a> | ||
181 | - </div> | ||
182 | - </form> | ||
183 | - </div> | 158 | + </div> |
159 | + <button :disabled="!prix || (!PEUT_NFC && !idCarte)">Payer</button> | ||
160 | + </form> | ||
184 | </div> | 161 | </div> |
185 | <div id="vidange"> | 162 | <div id="vidange"> |
186 | <h5>Vider le contenu de la carte d'un client</h5> | 163 | <h5>Vider le contenu de la carte d'un client</h5> |
187 | - <div class="input-field col s12" v-if="!PEUT_NFC"> | ||
188 | - <input type="text" name="idCarte" maxlength="8" v-model="idCarte"> | ||
189 | - <label for="idCarte">Identifiant de la carte</label> | ||
190 | - </div> | ||
191 | - <div class="row center"> | ||
192 | - <a class="btn-large waves-effect waves-light">Vider</a> | ||
193 | - </div> | 164 | + <form @submit="vidanger"> |
165 | + <div class="input-field" v-if="!PEUT_NFC"> | ||
166 | + <input type="text" name="idCarte" maxlength="8" v-model="idCarte"> | ||
167 | + <label for="idCarte">Identifiant de la carte</label> | ||
168 | + </div> | ||
169 | + <button :disabled="!PEUT_NFC && !idCarte">Vider</button> | ||
170 | + </form> | ||
194 | </div> | 171 | </div> |
195 | </div> | 172 | </div> |
196 | </div> | 173 | </div> |
197 | </div> | 174 | </div> |
198 | 175 | ||
199 | - <footer class="page-footer red"> | 176 | + <footer class="page-footer"> |
200 | <div class="footer-copyright"> | 177 | <div class="footer-copyright"> |
201 | <div class="container"> | 178 | <div class="container"> |
202 | 10p5 v0.0.0 - © Copyright 2016, <a href="http://clubinfo.plil.net">Le Club Info Polytech Lille</a> | 179 | 10p5 v0.0.0 - © Copyright 2016, <a href="http://clubinfo.plil.net">Le Club Info Polytech Lille</a> |
js/init.js
@@ -11,10 +11,11 @@ var TRANSACTION_DUREE = 60 | @@ -11,10 +11,11 @@ var TRANSACTION_DUREE = 60 | ||
11 | 11 | ||
12 | var PEUT_NFC = false | 12 | var PEUT_NFC = false |
13 | 13 | ||
14 | -// Fonctions pour Materialize | 14 | +// Préparation de l'interactivité |
15 | $(function(){ | 15 | $(function(){ |
16 | $('.button-collapse').sideNav(); | 16 | $('.button-collapse').sideNav(); |
17 | $('.modal-trigger').leanModal() | 17 | $('.modal-trigger').leanModal() |
18 | + $('form').submit(function() { return false }); | ||
18 | }); | 19 | }); |
19 | 20 | ||
20 | // Application | 21 | // Application |
@@ -54,7 +55,7 @@ var app = new Vue({ | @@ -54,7 +55,7 @@ var app = new Vue({ | ||
54 | }, | 55 | }, |
55 | // Fonctionnement | 56 | // Fonctionnement |
56 | connecter: function() { | 57 | connecter: function() { |
57 | - if (!this.peutConnecter) return | 58 | + console.log(57) |
58 | var that = this; | 59 | var that = this; |
59 | this.apiBrute("utilisateur/connexion", {login: this.login , mdp: this.mdp} , function(retour, donnees) { | 60 | this.apiBrute("utilisateur/connexion", {login: this.login , mdp: this.mdp} , function(retour, donnees) { |
60 | that.mdp = '' | 61 | that.mdp = '' |
@@ -77,9 +78,9 @@ var app = new Vue({ | @@ -77,9 +78,9 @@ var app = new Vue({ | ||
77 | break; | 78 | break; |
78 | } | 79 | } |
79 | }) | 80 | }) |
81 | + return false | ||
80 | }, | 82 | }, |
81 | creer: function() { | 83 | creer: function() { |
82 | - if (!this.peutCreer) return | ||
83 | var that = this | 84 | var that = this |
84 | this.api("client/ajouter", {idCarte: this.idCarte, solde: this.solde}, function(retour, donnees) { | 85 | this.api("client/ajouter", {idCarte: this.idCarte, solde: this.solde}, function(retour, donnees) { |
85 | switch(retour) { | 86 | switch(retour) { |
@@ -99,12 +100,6 @@ var app = new Vue({ | @@ -99,12 +100,6 @@ var app = new Vue({ | ||
99 | } | 100 | } |
100 | }, | 101 | }, |
101 | computed: { | 102 | computed: { |
102 | - peutConnecter: function() { | ||
103 | - return this.login && this.mdp; | ||
104 | - }, | ||
105 | - peutCreer: function() { | ||
106 | - return this.solde && (this.PEUT_NFC || this.idCarte) | ||
107 | - }, | ||
108 | timer: function() { | 103 | timer: function() { |
109 | var secondes = this.connecte + JETON_DUREE - this.date | 104 | var secondes = this.connecte + JETON_DUREE - this.date |
110 | var minutes = Math.floor(secondes/60) | 105 | var minutes = Math.floor(secondes/60) |
scss/style.scss
@@ -5,7 +5,7 @@ | @@ -5,7 +5,7 @@ | ||
5 | @import "../lib/Materialize/sass/components/color"; | 5 | @import "../lib/Materialize/sass/components/color"; |
6 | 6 | ||
7 | // Définition de la couleur principale de Materialize | 7 | // Définition de la couleur principale de Materialize |
8 | -$primary-color: color("red", "lighten-2") !default; | 8 | +$primary-color: color("red", "base") !default; |
9 | $primary-color-light: lighten($primary-color, 15%) !default; | 9 | $primary-color-light: lighten($primary-color, 15%) !default; |
10 | $primary-color-dark: darken($primary-color, 15%) !default; | 10 | $primary-color-dark: darken($primary-color, 15%) !default; |
11 | 11 | ||
@@ -14,12 +14,18 @@ $success-color: color("green", "base") !default; | @@ -14,12 +14,18 @@ $success-color: color("green", "base") !default; | ||
14 | $error-color: color("pink", "base") !default; | 14 | $error-color: color("pink", "base") !default; |
15 | $link-color: color("blue", "darken-1") !default; | 15 | $link-color: color("blue", "darken-1") !default; |
16 | 16 | ||
17 | +// Couleur des onglets : texte clair sur fond coloré | ||
18 | +$tabs-underline-color: $secondary-color !default; | ||
19 | +$tabs-text-color: #fff !default; | ||
20 | +$tabs-bg-color: $primary-color !default; | ||
21 | + | ||
17 | // Import du reste de Materialize | 22 | // Import du reste de Materialize |
18 | @import "../lib/Materialize/sass/materialize.scss"; | 23 | @import "../lib/Materialize/sass/materialize.scss"; |
19 | 24 | ||
20 | // Import des icônes Material Design | 25 | // Import des icônes Material Design |
21 | @import "../lib/material-design-icons/iconfont/material-icons.css"; | 26 | @import "../lib/material-design-icons/iconfont/material-icons.css"; |
22 | 27 | ||
28 | +// Permet le footer de se mettre toujours en bas | ||
23 | body { | 29 | body { |
24 | display: flex; | 30 | display: flex; |
25 | min-height: 100vh; | 31 | min-height: 100vh; |
@@ -28,39 +34,70 @@ body { | @@ -28,39 +34,70 @@ body { | ||
28 | 34 | ||
29 | #main { | 35 | #main { |
30 | flex: 1 0 auto; | 36 | flex: 1 0 auto; |
37 | + margin-top: 100px; | ||
31 | } | 38 | } |
32 | 39 | ||
40 | +footer.page-footer { | ||
41 | + margin-top: 0; | ||
42 | + padding-top: 0; | ||
43 | +} | ||
44 | + | ||
45 | +// Suppression de l'espace entre les onglets | ||
46 | +nav { | ||
47 | + line-height: $navbar-height-mobile; | ||
48 | +} | ||
49 | + | ||
50 | +// Affichage correct des icônes dans le header | ||
33 | nav i.material-icons { | 51 | nav i.material-icons { |
34 | display: inline; | 52 | display: inline; |
35 | font-size: 1rem; | 53 | font-size: 1rem; |
36 | } | 54 | } |
37 | 55 | ||
38 | -nav .tabs .tab a { | ||
39 | - color: white; | 56 | +// Stylisation de tous les boutons |
57 | +button { | ||
58 | + @extend .btn-large; | ||
59 | + @extend .waves-effect; | ||
60 | + @extend .waves-light; | ||
61 | +} | ||
62 | + | ||
63 | +button[disabled] { | ||
64 | + @extend .disabled; | ||
40 | } | 65 | } |
41 | 66 | ||
42 | -nav .tabs .indicator { | ||
43 | - background-color: #fff59d; | 67 | +// Simplification des formulaires |
68 | +form { | ||
69 | + @extend .row; | ||
70 | + >.input-field { | ||
71 | + @extend .col; | ||
72 | + @extend .s12; | ||
73 | + } | ||
44 | } | 74 | } |
45 | 75 | ||
76 | + | ||
77 | + | ||
78 | +// On met les toasts en bas | ||
46 | #toast-container { | 79 | #toast-container { |
47 | top: inherit; | 80 | top: inherit; |
48 | bottom: 10%; | 81 | bottom: 10%; |
49 | -} | ||
50 | 82 | ||
51 | -#toast a { | ||
52 | - text-transform: uppercase; | 83 | + a { |
84 | + text-transform: uppercase; | ||
85 | + } | ||
53 | } | 86 | } |
54 | 87 | ||
55 | -#grilleBieres a { | ||
56 | - width: 90%; | ||
57 | - padding: 25px; | ||
58 | - height: 100px; | ||
59 | - font-size: 3em; | ||
60 | -} | ||
61 | - | ||
62 | -footer.page-footer { | ||
63 | - margin-top: 0; | ||
64 | - padding-top: 0; | 88 | +#grilleBieres { |
89 | + >div { | ||
90 | + @extend .row; | ||
91 | + >div { | ||
92 | + @extend .col; | ||
93 | + @extend .s4; | ||
94 | + >button { | ||
95 | + width: 90%; | ||
96 | + padding: 25px; | ||
97 | + height: 150px; | ||
98 | + font-size: 3em; | ||
99 | + } | ||
100 | + } | ||
101 | + } | ||
65 | } | 102 | } |
66 | 103 |