Skip to content
Snippets Groups Projects
Commit 5f981dd5 authored by Pierre-Jean CHANCELLIER's avatar Pierre-Jean CHANCELLIER
Browse files

improve css for a11y

parent 9f7700b4
No related branches found
No related tags found
No related merge requests found
...@@ -10,43 +10,43 @@ ...@@ -10,43 +10,43 @@
<tbody> <tbody>
<tr v-if="hash.status == 'MEMBER'"> <tr v-if="hash.status == 'MEMBER'">
<th scope="row">Référent :</th> <th scope="row">Référent :</th>
<td :class="{'table-success': isReferent, 'table-danger': !isReferent}">{{ isReferent ? 'Oui' : 'Non' }}</td> <td :class="{'list-group-item-success': isReferent, 'list-group-item-danger': !isReferent}">{{ isReferent ? 'Oui' : 'Non' }}</td>
</tr> </tr>
<tr v-if="hash.status != 'NEWCOMER'"> <tr v-if="hash.status != 'NEWCOMER'">
<th scope="row">Qualité :</th> <th scope="row">Qualité :</th>
<td :class="{ <td :class="{
'table-success': hash.quality.ratio >= 80, 'list-group-item-success': hash.quality.ratio >= 80,
'table-warning': hash.quality.ratio < 80, 'list-group-item-warning': hash.quality.ratio < 80,
}">{{ Math.round(hash.quality.ratio*100)/100 }}</td> }">{{ Math.round(hash.quality.ratio*100)/100 }}</td>
</tr> </tr>
<tr v-if="hash.status != 'NEWCOMER'"> <tr v-if="hash.status != 'NEWCOMER'">
<th scope="row">Distance :</th> <th scope="row">Distance :</th>
<td :class="{ <td :class="{
'table-success': hash.distance.value.ratio >= 80, 'list-group-item-success': hash.distance.value.ratio >= 80,
'table-danger': hash.distance.value.ratio < 80, 'list-group-item-danger': hash.distance.value.ratio < 80,
}">{{ Math.round(hash.distance.value.ratio*100)/100 }}</td> }">{{ Math.round(hash.distance.value.ratio*100)/100 }}</td>
</tr> </tr>
<tr> <tr>
<th scope="row">Date limite d'adhésion :</th> <th scope="row">Date limite d'adhésion :</th>
<td :class="'table-'+ $options.filters.dateStatus(hash.limitDate)">{{ hash.limitDate | formatDate }}</td> <td :class="'list-group-item-'+ $options.filters.dateStatus(hash.limitDate)">{{ hash.limitDate | formatDate }}</td>
</tr> </tr>
<tr v-if="hash.status == 'MEMBER'"> <tr v-if="hash.status == 'MEMBER'">
<th scope="row">Date avant de manquer de certifs :</th> <th scope="row">Date avant de manquer de certifs :</th>
<td :class="'table-'+ $options.filters.dateStatus(hash.received_certifications.limit)">{{ hash.received_certifications.limit | formatDate }}</td> <td :class="'list-group-item-'+ $options.filters.dateStatus(hash.received_certifications.limit)">{{ hash.received_certifications.limit | formatDate }}</td>
</tr> </tr>
<tr v-if="hash.status == 'MEMBER'"> <tr v-if="hash.status == 'MEMBER'">
<th scope="row">Disponible pour certifier :</th> <th scope="row">Disponible pour certifier :</th>
<td :class="{ <td :class="{
'table-success': hash.minDatePassed, 'list-group-item-success': hash.minDatePassed,
'table-danger': !hash.minDatePassed, 'list-group-item-danger': !hash.minDatePassed,
}">{{ hash.minDatePassed ? 'Oui' : 'Non' }} <small v-if="!hash.minDatePassed">( > {{ hash.minDate | formatDate }} )</small></td> }">{{ hash.minDatePassed ? 'Oui' : 'Non' }} <small v-if="!hash.minDatePassed">( > {{ hash.minDate | formatDate }} )</small></td>
</tr> </tr>
<tr v-if="hash.status == 'MEMBER'"> <tr v-if="hash.status == 'MEMBER'">
<th scope="row">Nbre de certifs disponibles :</th> <th scope="row">Nbre de certifs disponibles :</th>
<td :class="{ <td :class="{
'table-success': hash.sent_certifications.length<=80, 'list-group-item-success': hash.sent_certifications.length<=80,
'table-warning': hash.sent_certifications.length>80, 'list-group-item-warning': hash.sent_certifications.length>80,
'table-danger': hash.sent_certifications.length>90, 'list-group-item-danger': hash.sent_certifications.length>90,
}">{{ 100-hash.sent_certifications.length }}</td> }">{{ 100-hash.sent_certifications.length }}</td>
</tr> </tr>
</tbody> </tbody>
...@@ -70,6 +70,7 @@ export default { ...@@ -70,6 +70,7 @@ export default {
</script> </script>
<style lang="sass" scoped> <style lang="sass" scoped>
.member th .member
text-align: right th
text-align: right
</style> </style>
\ No newline at end of file
...@@ -38,7 +38,7 @@ export default { ...@@ -38,7 +38,7 @@ export default {
/* Define styles for the default root window element */ /* Define styles for the default root window element */
:root { :root {
--text-primary-color: var(--dark); --text-primary-color: var(--dark);
--text-secondary-color: var(--secondary); --text-secondary-color: #322959;
--background-color-primary: var(--white); --background-color-primary: var(--white);
--background-color-secondary: #e9ecef; --background-color-secondary: #e9ecef;
--element-size: 4rem; --element-size: 4rem;
...@@ -48,7 +48,7 @@ export default { ...@@ -48,7 +48,7 @@ export default {
/* Define styles for the root window with dark - mode preference */ /* Define styles for the root window with dark - mode preference */
:root.dark-theme { :root.dark-theme {
--text-primary-color: var(--white); --text-primary-color: var(--white);
--text-secondary-color: var(--secondary); --text-secondary-color: #173346;
--background-color-primary: var(--dark); --background-color-primary: var(--dark);
--background-color-secondary: hsl(210, 16%, 60%); --background-color-secondary: hsl(210, 16%, 60%);
} }
......
...@@ -110,6 +110,7 @@ export default { ...@@ -110,6 +110,7 @@ export default {
}; };
</script> </script>
<style lang="sass" scoped> <style lang="sass">
.dark-theme *[class*="list-group-item-"]
opacity: .9
</style> </style>
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment