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 | 51 | |
| 52 | 52 | <!-- Page --> |
| 53 | 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 | 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 | 94 | <ul class="side-nav"> |
| 91 | 95 | <li><a>TODO</a></li> |
| 92 | 96 | </ul> |
| ... | ... | @@ -133,7 +137,7 @@ |
| 133 | 137 | <input type="number" name="solde" v-model="solde"> |
| 134 | 138 | <label for="solde">Solde initial (€)</label> |
| 135 | 139 | </div> |
| 136 | - <div class="input-field" v-if="droit >= 3"> | |
| 140 | + <div class="row" v-if="droit >= 3"> | |
| 137 | 141 | <strong>Découvert autorisé</strong> |
| 138 | 142 | <div class="switch"> |
| 139 | 143 | <label> | ... | ... |
scss/style.scss
| ... | ... | @@ -55,6 +55,19 @@ nav i.material-icons { |
| 55 | 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 | 71 | // Stylisation de tous les boutons |
| 59 | 72 | button { |
| 60 | 73 | @extend .btn-large; |
| ... | ... | @@ -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 | 92 | #grilleBieres { |
| 94 | 93 | >div { |
| 95 | 94 | @extend .row; |
| ... | ... | @@ -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 | + | ... | ... |