From 2a23d61f0b561fd5b03bfa18d0b6b8620a40dead Mon Sep 17 00:00:00 2001 From: Thibaud Dauce Date: Thu, 26 Feb 2026 14:55:31 +0100 Subject: [PATCH 1/4] fix: meter bar design in Chrome --- datagouv-components/assets/main.css | 28 ----------------- .../src/components/DatasetQualityScore.vue | 27 +++++++--------- .../src/components/ProgressBar.vue | 31 +++++++++++++++++++ datagouv-components/src/main.ts | 2 ++ 4 files changed, 45 insertions(+), 43 deletions(-) create mode 100644 datagouv-components/src/components/ProgressBar.vue diff --git a/datagouv-components/assets/main.css b/datagouv-components/assets/main.css index 211925edb..ba55d3f6d 100644 --- a/datagouv-components/assets/main.css +++ b/datagouv-components/assets/main.css @@ -188,34 +188,6 @@ .code { @apply p-1! font-mono! bg-gray-lower! text-sm! text-gray-medium! rounded!; } - meter.quality-score { - background: none; - border: 1px solid var(--color-gray-default); - border-radius: 8px; - height: 10px; - vertical-align: baseline; - } - meter.quality-score::-webkit-meter-bar { - height: 10px; - background: whiteSmoke; - border-radius: 8px; - } - meter.quality-score::-moz-meter-bar { - background: whiteSmoke; - border-radius: 8px; - } - meter.quality-score::-webkit-meter-suboptimum-value { - background-color: var(--color-gray-low); - } - meter.quality-score:-moz-meter-sub-optimum::-moz-meter-bar { - background-color: var(--color-gray-low); - } - meter.quality-score::-webkit-meter-optimum-value { - background-color: #27A658; - } - meter.quality-score:-moz-meter-optimum::-moz-meter-bar { - background-color: #27A658; - } /* Vue Sonner Toast custom colors */ [data-sonner-toast][data-type="success"] { diff --git a/datagouv-components/src/components/DatasetQualityScore.vue b/datagouv-components/src/components/DatasetQualityScore.vue index 1ca32eede..c0b5e3168 100644 --- a/datagouv-components/src/components/DatasetQualityScore.vue +++ b/datagouv-components/src/components/DatasetQualityScore.vue @@ -1,26 +1,23 @@ diff --git a/datagouv-components/src/main.ts b/datagouv-components/src/main.ts index 6e8d7fd25..47abe01a2 100644 --- a/datagouv-components/src/main.ts +++ b/datagouv-components/src/main.ts @@ -49,6 +49,7 @@ import DatasetQuality from './components/DatasetQuality.vue' import DatasetQualityInline from './components/DatasetQualityInline.vue' import DatasetQualityItem from './components/DatasetQualityItem.vue' import DatasetQualityScore from './components/DatasetQualityScore.vue' +import ProgressBar from './components/ProgressBar.vue' import DatasetQualityTooltipContent from './components/DatasetQualityTooltipContent.vue' import ExtraAccordion from './components/ExtraAccordion.vue' import LabelTag from './components/DatasetLabelTag.vue' @@ -285,6 +286,7 @@ export { PaddedContainer, Pagination, Placeholder, + ProgressBar, PostCard, RadioGroup, RadioInput, From 2a0c4678f307bfd1ec5d8d9670d722272a5f14a9 Mon Sep 17 00:00:00 2001 From: Thibaud Dauce Date: Thu, 26 Feb 2026 15:47:59 +0100 Subject: [PATCH 2/4] try to improve click zone for quality progress bar --- .../src/components/DatasetCard.vue | 2 +- .../src/components/DatasetQuality.vue | 39 +++++++++++-------- .../src/components/DatasetQualityInline.vue | 30 +++++++------- .../src/components/Toggletip.vue | 7 +++- 4 files changed, 42 insertions(+), 36 deletions(-) diff --git a/datagouv-components/src/components/DatasetCard.vue b/datagouv-components/src/components/DatasetCard.vue index a6a30273d..aa554d646 100644 --- a/datagouv-components/src/components/DatasetCard.vue +++ b/datagouv-components/src/components/DatasetCard.vue @@ -60,7 +60,7 @@
-