Commit 958e6af73cddbd48f0281721044b8f963f634dc4
1 parent
9868802a
Corrections du CSS
Showing
2 changed files
with
69 additions
and
51 deletions
Show diff stats
index.html
| @@ -51,42 +51,46 @@ | @@ -51,42 +51,46 @@ | ||
| 51 | 51 | ||
| 52 | <!-- Page --> | 52 | <!-- Page --> |
| 53 | <nav role="navigation"> | 53 | <nav role="navigation"> |
| 54 | - <div class="nav-wrapper container"> | ||
| 55 | - <a class="brand-logo" v-if="page == 'connexion'">10⁵</a> | ||
| 56 | - <div class="left" v-else> | ||
| 57 | - <a class="breadcrumb">10⁵</a> | ||
| 58 | - <a class="breadcrumb" v-if="page == 'operations'">Opérations</a> | ||
| 59 | - <a class="breadcrumb" v-if="page == 'gestion'">Gestion</a> | 54 | + <div> |
| 55 | + <div> | ||
| 56 | + <a class="brand-logo" v-if="page == 'connexion'">10⁵</a> | ||
| 57 | + <div class="left" v-else> | ||
| 58 | + <a class="breadcrumb">10⁵</a> | ||
| 59 | + <a class="breadcrumb" v-if="page == 'operations'">Opérations</a> | ||
| 60 | + <a class="breadcrumb" v-if="page == 'gestion'">Gestion</a> | ||
| 61 | + </div> | ||
| 62 | + <ul class="right hide-on-med-and-down"> | ||
| 63 | + <li v-if="connecte"> | ||
| 64 | + <a class="dropdown-button" data-activates="menuUtilisateur"> | ||
| 65 | + <i class="material-icons">perm_identity</i> {{ login }} (<i class="material-icons">timer</i> {{ timer }}) | ||
| 66 | + </a> | ||
| 67 | + </li> | ||
| 68 | + <li v-if="connecte && page == 'operations'"> | ||
| 69 | + <a @click="page = 'gestion'"> | ||
| 70 | + <i class="material-icons">settings</i> Gestion | ||
| 71 | + </a> | ||
| 72 | + </li> | ||
| 73 | + <li v-if="connecte && page == 'gestion'"> | ||
| 74 | + <a @click="page = 'operations'"> | ||
| 75 | + <i class="material-icons">play_arrow</i> Opérations | ||
| 76 | + </a> | ||
| 77 | + </li> | ||
| 78 | + </ul> | ||
| 79 | + </div> | ||
| 80 | + <div> | ||
| 81 | + <ul class="tabs" v-show="page == 'operations'"> | ||
| 82 | + <li class="tab col s3"><a href="#creation">Création</a></li> | ||
| 83 | + <li class="tab col s3"><a href="#rechargement">Rechargement</a></li> | ||
| 84 | + <li class="tab col s3"><a class="active" href="#paiement">Paiement</a></li> | ||
| 85 | + <li class="tab col s3"><a href="#vidange">Vidange</a></li> | ||
| 86 | + </ul> | ||
| 87 | + <ul class="tabs" v-show="page == 'gestion'"> | ||
| 88 | + <li class="tab col s3"><a href="#clients">Clients</a></li> | ||
| 89 | + <li class="tab col s3"><a href="#transactions">Transactions</a></li> | ||
| 90 | + <li class="tab col s3"><a href="#utilisateurs">Utilisateurs</a></li> | ||
| 91 | + <li class="tab col s3"><a href="#statistiques">Statistiques</a></li> | ||
| 92 | + </ul> | ||
| 60 | </div> | 93 | </div> |
| 61 | - <ul class="right hide-on-med-and-down"> | ||
| 62 | - <li v-if="connecte"> | ||
| 63 | - <a class="dropdown-button" data-activates="menuUtilisateur"> | ||
| 64 | - <i class="material-icons">perm_identity</i> {{ login }} (<i class="material-icons">timer</i> {{ timer }}) | ||
| 65 | - </a> | ||
| 66 | - </li> | ||
| 67 | - <li v-if="connecte && page == 'operations'"> | ||
| 68 | - <a @click="page = 'gestion'"> | ||
| 69 | - <i class="material-icons">settings</i> Gestion | ||
| 70 | - </a> | ||
| 71 | - </li> | ||
| 72 | - <li v-if="connecte && page == 'gestion'"> | ||
| 73 | - <a @click="page = 'operations'"> | ||
| 74 | - <i class="material-icons">play_arrow</i> Opérations | ||
| 75 | - </a> | ||
| 76 | - </li> | ||
| 77 | - </ul> | ||
| 78 | - <ul class="tabs" v-show="page == 'operations'"> | ||
| 79 | - <li class="tab col s3"><a href="#creation">Création</a></li> | ||
| 80 | - <li class="tab col s3"><a href="#rechargement">Rechargement</a></li> | ||
| 81 | - <li class="tab col s3"><a class="active" href="#paiement">Paiement</a></li> | ||
| 82 | - <li class="tab col s3"><a href="#vidange">Vidange</a></li> | ||
| 83 | - </ul> | ||
| 84 | - <ul class="tabs" v-show="page == 'gestion'"> | ||
| 85 | - <li class="tab col s3"><a href="#clients">Clients</a></li> | ||
| 86 | - <li class="tab col s3"><a href="#transactions">Transactions</a></li> | ||
| 87 | - <li class="tab col s3"><a href="#utilisateurs">Utilisateurs</a></li> | ||
| 88 | - <li class="tab col s3"><a href="#statistiques">Statistiques</a></li> | ||
| 89 | - </ul> | ||
| 90 | <ul class="side-nav"> | 94 | <ul class="side-nav"> |
| 91 | <li><a>TODO</a></li> | 95 | <li><a>TODO</a></li> |
| 92 | </ul> | 96 | </ul> |
| @@ -133,7 +137,7 @@ | @@ -133,7 +137,7 @@ | ||
| 133 | <input type="number" name="solde" v-model="solde"> | 137 | <input type="number" name="solde" v-model="solde"> |
| 134 | <label for="solde">Solde initial (€)</label> | 138 | <label for="solde">Solde initial (€)</label> |
| 135 | </div> | 139 | </div> |
| 136 | - <div class="input-field" v-if="droit >= 3"> | 140 | + <div class="row" v-if="droit >= 3"> |
| 137 | <strong>Découvert autorisé</strong> | 141 | <strong>Découvert autorisé</strong> |
| 138 | <div class="switch"> | 142 | <div class="switch"> |
| 139 | <label> | 143 | <label> |
scss/style.scss
| @@ -55,6 +55,19 @@ nav i.material-icons { | @@ -55,6 +55,19 @@ nav i.material-icons { | ||
| 55 | font-size: 1rem; | 55 | font-size: 1rem; |
| 56 | } | 56 | } |
| 57 | 57 | ||
| 58 | +// Simplification du HTML | ||
| 59 | + | ||
| 60 | +nav>div { | ||
| 61 | + @extend .nav-wrapper; | ||
| 62 | + @extend .container; | ||
| 63 | + >div { | ||
| 64 | + @extend .row; | ||
| 65 | + margin-bottom: 0px; | ||
| 66 | + } | ||
| 67 | + | ||
| 68 | +} | ||
| 69 | + | ||
| 70 | + | ||
| 58 | // Stylisation de tous les boutons | 71 | // Stylisation de tous les boutons |
| 59 | button { | 72 | button { |
| 60 | @extend .btn-large; | 73 | @extend .btn-large; |
| @@ -75,21 +88,7 @@ form { | @@ -75,21 +88,7 @@ form { | ||
| 75 | } | 88 | } |
| 76 | } | 89 | } |
| 77 | 90 | ||
| 78 | -.collapsible-body { | ||
| 79 | - padding: 20px; | ||
| 80 | - | ||
| 81 | -} | ||
| 82 | - | ||
| 83 | -// On met les toasts en bas | ||
| 84 | -#toast-container { | ||
| 85 | - top: inherit; | ||
| 86 | - bottom: 10%; | ||
| 87 | - | ||
| 88 | - a { | ||
| 89 | - text-transform: uppercase; | ||
| 90 | - } | ||
| 91 | -} | ||
| 92 | - | 91 | +// Personalisé |
| 93 | #grilleBieres { | 92 | #grilleBieres { |
| 94 | >div { | 93 | >div { |
| 95 | @extend .row; | 94 | @extend .row; |
| @@ -106,3 +105,18 @@ form { | @@ -106,3 +105,18 @@ form { | ||
| 106 | } | 105 | } |
| 107 | } | 106 | } |
| 108 | 107 | ||
| 108 | +.collapsible-body { | ||
| 109 | + padding: 20px; | ||
| 110 | +} | ||
| 111 | + | ||
| 112 | + | ||
| 113 | +// On met les toasts en bas | ||
| 114 | +#toast-container { | ||
| 115 | + top: inherit; | ||
| 116 | + bottom: 10%; | ||
| 117 | + | ||
| 118 | + a { | ||
| 119 | + text-transform: uppercase; | ||
| 120 | + } | ||
| 121 | +} | ||
| 122 | + |