Skip to content

Commit e8aa3d2

Browse files
nicolaskempf57nicolaskempf57
authored
fix: use remixicon instead of removed css class (#853)
1 parent fbddcd3 commit e8aa3d2

File tree

3 files changed

+72
-45
lines changed

3 files changed

+72
-45
lines changed

‎components/FileCard/FileCard.vue‎

Lines changed: 42 additions & 28 deletions
Original file line numberDiff line numberDiff line change
@@ -1,46 +1,60 @@
11
<template>
22
<div class="border border-gray-default fr-p-1w">
33
<div class="fr-grid-row fr-grid-row--middle flex-nowrap md:flex-wrap justify-between">
4-
<div class="fr-col-auto min-width-0">
4+
<div class="fr-col-auto min-w-0">
55
<div class="flex items-center mb-1">
66
<ResourceIcon
77
:resource="resourceForm"
88
class="size-4 mr-1"
99
/>
10-
<h4 class="fr-m-0 text-base/6 overflow-wrap-anywhere truncate">
10+
<h4 class="m-0 text-base/6 overflow-wrap-anywhere truncate">
1111
{{ resourceForm.title || $t('Fichier sans nom') }}
1212
</h4>
1313
</div>
14-
<div class="fr-my-0 text-gray-medium fr-grid-row fr-grid-row--middle">
14+
<div class="my-0 text-gray-medium flex flex-wrap items-center gap-1">
1515
<div
1616
v-if="resourceForm.schema?.name"
17-
class="flex items-center space-x-1 text-sm fr-m-0 overflow-wrap-anywhere truncate dash-after"
17+
class="flex items-center space-x-1 text-sm m-0 overflow-wrap-anywhere truncate"
1818
>
19-
<RiInformationLine class="size-3 shrink-0" />
19+
<RiInformationLine
20+
aria-hidden="true"
21+
class="size-3 shrink-0"
22+
/>
2023
<span class="truncate">{{ $t('Schéma : {schema}', { schema: resourceForm.schema?.name }) }}</span>
2124
</div>
22-
<p
23-
v-if="resourceForm.filetype === 'file' && resourceForm.file && resourceForm.file.raw.name != resourceForm.title"
24-
class="text-sm fr-m-0 overflow-wrap-anywhere truncate dash-after"
25-
>
26-
{{ resourceForm.file.raw.name }}
27-
</p>
28-
<p
29-
v-if="resourceForm.resource"
30-
class="text-sm fr-m-0 dash-after"
31-
>
32-
<!-- Not sure if this date is useful, since it's about modification on a ressource -->
33-
{{ $t('Mis à jour {date}', { date: formatRelativeIfRecentDate(resourceForm.resource.last_modified) }) }}
34-
</p>
35-
<p
36-
v-if="guessFormat(resourceForm, extensions)"
37-
class="text-sm fr-m-0"
38-
>
39-
{{ guessFormat(resourceForm, extensions) }}
40-
<template v-if="filesize">
41-
({{ formatFilesize(filesize) }})
42-
</template>
43-
</p>
25+
<template v-if="resourceForm.filetype === 'file' && resourceForm.file && resourceForm.file.raw.name != resourceForm.title">
26+
<RiSubtractLine
27+
aria-hidden="true"
28+
class="first:hidden size-3 mt-0.5"
29+
/>
30+
<p class="text-sm m-0 overflow-wrap-anywhere truncate">
31+
{{ resourceForm.file.raw.name }}
32+
</p>
33+
</template>
34+
35+
<template v-if="resourceForm.resource">
36+
<RiSubtractLine
37+
aria-hidden="true"
38+
class="first:hidden size-3 mt-0.5"
39+
/>
40+
<p class="text-sm m-0">
41+
<!-- Not sure if this date is useful, since it's about modification on a ressource -->
42+
{{ $t('Mis à jour {date}', { date: formatRelativeIfRecentDate(resourceForm.resource.last_modified) }) }}
43+
</p>
44+
</template>
45+
46+
<template v-if="guessFormat(resourceForm, extensions)">
47+
<RiSubtractLine
48+
aria-hidden="true"
49+
class="first:hidden size-3 mt-0.5"
50+
/>
51+
<p class="text-sm m-0">
52+
{{ guessFormat(resourceForm, extensions) }}
53+
<template v-if="filesize">
54+
({{ formatFilesize(filesize) }})
55+
</template>
56+
</p>
57+
</template>
4458
</div>
4559
<div
4660
v-if="resourceForm.filetype === 'file'"
@@ -148,7 +162,7 @@
148162
<script setup lang="ts">
149163
import { BrandedButton, filesize as formatFilesize, useFormatDate, ResourceIcon } from '@datagouv/components-next'
150164
import { computed } from 'vue'
151-
import { RiCodeSSlashLine, RiDeleteBinLine, RiInformationLine, RiLink, RiMapPin2Line } from '@remixicon/vue'
165+
import { RiCodeSSlashLine, RiDeleteBinLine, RiInformationLine, RiLink, RiMapPin2Line, RiSubtractLine } from '@remixicon/vue'
152166
import FileEditModal from '../Datasets/FileEditModal.vue'
153167
import FileLoader from './FileLoader.vue'
154168
import type { CommunityResourceForm, ResourceForm } from '~/types/types'

‎datagouv-components/src/components/DatasetCard.vue‎

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -100,9 +100,13 @@
100100
</div>
101101
</div>
102102
<div class="mx-0 -mb-1 flex flex-wrap items-center text-sm text-gray-medium">
103-
<div class="fr-hidden flex-sm dash-after-sm text-gray-medium -ml-2.5">
103+
<div class="fr-hidden flex-sm text-gray-medium -ml-2.5">
104104
<DatasetQualityInline :quality="dataset.quality" />
105105
</div>
106+
<RiSubtractLine
107+
aria-hidden="true"
108+
class="hidden sm:block size-3"
109+
/>
106110
<div class="flex flex-wrap items-center gap-1">
107111
<p
108112
class="text-sm mb-0 flex items-center gap-0.5"

‎datagouv-components/src/components/ResourceAccordion/ResourceAccordion.vue‎

Lines changed: 25 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -51,22 +51,33 @@
5151
class="z-2"
5252
/>
5353
</div>
54-
<div class="text-gray-medium subheaders-infos">
54+
<div class="text-gray-medium subheaders-infos flex items-center gap-1">
5555
<SchemaBadge
5656
:resource
57-
class="dash-after"
5857
/>
59-
<span class="fr-text--xs fr-mb-0 dash-after">{{ t('Mis à jour {date}', { date: formatRelativeIfRecentDate(lastUpdate) }) }}</span>
60-
<span
61-
v-if="resource.format"
62-
class="fr-text--xs fr-mb-0 dash-after"
63-
>
64-
<span class="hidden show-on-small">{{ t("Format") }}</span>
65-
{{ resource.format.trim().toLowerCase() }}
66-
<span v-if="resourceFilesize">({{ filesize(resourceFilesize) }})</span>
67-
</span>
58+
<RiSubtractLine
59+
v-if="resource.schema"
60+
aria-hidden="true"
61+
class="size-3 fill-gray-medium"
62+
/>
63+
<span class="text-xs mb-0">{{ t('Mis à jour {date}', { date: formatRelativeIfRecentDate(lastUpdate) }) }}</span>
64+
<RiSubtractLine
65+
aria-hidden="true"
66+
class="size-3 fill-gray-medium"
67+
/>
68+
<template v-if="resource.format">
69+
<span class="text-xs mb-0">
70+
<span class="hidden sm:inline">{{ t("Format") }}</span>
71+
{{ resource.format.trim().toLowerCase() }}
72+
<span v-if="resourceFilesize">({{ filesize(resourceFilesize) }})</span>
73+
</span>
74+
<RiSubtractLine
75+
aria-hidden="true"
76+
class="size-3 fill-gray-medium"
77+
/>
78+
</template>
6879
<span
69-
class="inline-flex items-center fr-text--xs fr-mb-0"
80+
class="inline-flex items-center text-xs mb-0"
7081
:aria-label="t('{n} téléchargements', resource.metrics.views)"
7182
>
7283
<span class="fr-icon-download-line fr-icon--xs fr-mr-1v" />
@@ -359,7 +370,7 @@
359370

360371
<script setup lang="ts">
361372
import { ref, computed, defineAsyncComponent } from 'vue'
362-
import { RiDownloadLine, RiFileCopyLine, RiFileWarningLine } from '@remixicon/vue'
373+
import { RiDownloadLine, RiFileCopyLine, RiFileWarningLine, RiSubtractLine } from '@remixicon/vue'
363374
import OrganizationNameWithCertificate from '../OrganizationNameWithCertificate.vue'
364375
import { filesize, summarize } from '../../functions/helpers'
365376
import { useFormatDate } from '../../functions/dates'
@@ -596,9 +607,7 @@ article {
596607
article header .subheaders-infos .hidden.show-on-small {
597608
display: inline !important;
598609
}
599-
article header .dash-after::after {
600-
content: ''
601-
} */
610+
*/
602611
603612
/* article .fr-pl-4v fr-pr-4v {
604613
padding: 0.75rem !important;

0 commit comments

Comments
 (0)