Skip to content

Commit 1608cb2

Browse files
ThibaudDauceThibaudDauce
authored
fix: default height for ReadMore (#762)
Not sure if this solution is the cleanest… - Fix datagouv/data.gouv.fr#1893
1 parent fdd5332 commit 1608cb2

File tree

3 files changed

+102
-72
lines changed

3 files changed

+102
-72
lines changed

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

Lines changed: 9 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -42,30 +42,32 @@ import BrandedButton from './BrandedButton.vue'
4242
import { useTranslation } from '../composables/useTranslation'
4343
4444
const props = withDefaults(defineProps<{
45+
wantedHeight?: number
4546
maxHeight?: string
4647
}>(), {
48+
wantedHeight: 284,
4749
maxHeight: '',
4850
})
4951
5052
const { t } = useTranslation()
5153
52-
const DEFAULT_HEIGHT = 284
5354
const expanded = ref(false)
5455
const readMoreRequired = ref(false)
5556
const containerRef = useTemplateRef<HTMLElement | null>('containerRef')
5657
const readMoreRef = useTemplateRef<HTMLElement | null>('readMoreRef')
5758
const { height } = useElementSize(containerRef)
58-
const containerHeight = ref(DEFAULT_HEIGHT)
59+
const containerHeight = ref(props.wantedHeight)
5960
const getHeight = (elt: Element) => {
6061
const style = getComputedStyle(elt)
6162
return parseFloat(style.getPropertyValue('height'))
6263
+ parseFloat(style.getPropertyValue('margin-top'))
6364
+ parseFloat(style.getPropertyValue('margin-bottom'))
6465
}
66+
6567
const getDefaultHeight = () => {
6668
const elementMaxHeight = document.querySelector(`[data-read-more-max-height="${props.maxHeight}"]`)
6769
if (!elementMaxHeight) {
68-
return DEFAULT_HEIGHT
70+
return props.wantedHeight
6971
}
7072
return Array.from(elementMaxHeight.children)
7173
.map(getHeight)
@@ -78,6 +80,10 @@ const updateReadMoreHeight = (height: number) => {
7880
containerHeight.value = height
7981
}
8082
}
83+
84+
watch(() => props.wantedHeight, () => {
85+
updateReadMoreHeight(height.value)
86+
})
8187
const toggle = () => {
8288
if (!readMoreRef.value) {
8389
return

‎pages/dataservices/[did].vue‎

Lines changed: 43 additions & 31 deletions
Original file line numberDiff line numberDiff line change
@@ -42,46 +42,51 @@
4242
>
4343
<div class="space-y-8">
4444
<div class="container pt-3 min-h-32">
45-
<div class="flex flex-col md:space-x-10 md:flex-row">
45+
<div class="flex flex-col md:space-x-10 md:flex-row md:items-start">
4646
<div class="flex-1 overflow-x-hidden">
47-
<div class="flex gap-3 mb-2">
48-
<AdminBadge
49-
v-if="dataservice.deleted_at"
50-
:icon="RiDeleteBinLine"
51-
size="sm"
52-
type="secondary"
53-
>
54-
{{ $t('Supprimé') }}
55-
</AdminBadge>
56-
<AdminBadge
57-
v-if="dataservice.private"
58-
:icon="RiLockLine"
59-
size="sm"
60-
type="secondary"
61-
>
62-
{{ $t('Brouillon') }}
63-
</AdminBadge>
64-
<AdminBadge
65-
v-if="dataservice.archived_at"
66-
:icon="RiLockLine"
67-
size="sm"
68-
type="secondary"
69-
>
70-
{{ $t('Archivé') }}
71-
</AdminBadge>
47+
<div ref="header">
48+
<div class="flex gap-3 mb-2">
49+
<AdminBadge
50+
v-if="dataservice.deleted_at"
51+
:icon="RiDeleteBinLine"
52+
size="sm"
53+
type="secondary"
54+
>
55+
{{ $t('Supprimé') }}
56+
</AdminBadge>
57+
<AdminBadge
58+
v-if="dataservice.private"
59+
:icon="RiLockLine"
60+
size="sm"
61+
type="secondary"
62+
>
63+
{{ $t('Brouillon') }}
64+
</AdminBadge>
65+
<AdminBadge
66+
v-if="dataservice.archived_at"
67+
:icon="RiLockLine"
68+
size="sm"
69+
type="secondary"
70+
>
71+
{{ $t('Archivé') }}
72+
</AdminBadge>
73+
</div>
74+
<h1 class="text-2xl text-gray-title mb-6 font-extrabold">
75+
{{ dataservice.title }}
76+
</h1>
7277
</div>
73-
<h1 class="text-2xl text-gray-title mb-6 font-extrabold">
74-
{{ dataservice.title }}
75-
</h1>
76-
<ReadMore class="">
78+
<ReadMore :wanted-height="sidebarHeight - headerHeight">
7779
<MarkdownViewer
7880
size="md"
7981
:content="dataservice.description"
8082
:min-heading="3"
8183
/>
8284
</ReadMore>
8385
</div>
84-
<dl class="pl-0 w-full shrink-0 md:w-[384px] space-y-2.5">
86+
<dl
87+
ref="sidebar"
88+
class="pl-0 w-full shrink-0 md:w-[384px] space-y-2.5"
89+
>
8590
<div class="space-y-1">
8691
<dt class="text-gray-plain font-bold">
8792
{{ $t('Producteur') }}
@@ -298,12 +303,19 @@ import BreadcrumbItem from '~/components/Breadcrumbs/BreadcrumbItem.vue'
298303
import ContactPoint from '~/components/ContactPoint.vue'
299304
import OrganizationOwner from '~/components/OrganizationOwner.vue'
300305
import ReportModal from '~/components/Spam/ReportModal.vue'
306+
import { useElementSize } from '@vueuse/core'
301307
302308
const config = useRuntimeConfig()
303309
const route = useRoute()
304310
const { formatDate } = useFormatDate()
305311
const { $matomo } = useNuxtApp()
306312
313+
const sidebar = useTemplateRef('sidebar')
314+
const header = useTemplateRef('header')
315+
316+
const { height: sidebarHeight } = useElementSize(sidebar)
317+
const { height: headerHeight } = useElementSize(header)
318+
307319
const url = computed(() => `/api/1/dataservices/${route.params.did}/`)
308320
const { data: dataservice, status } = await useAPI<Dataservice>(url, { redirectOn404: true, redirectOnSlug: 'did' })
309321

‎pages/datasets/[did].vue‎

Lines changed: 50 additions & 38 deletions
Original file line numberDiff line numberDiff line change
@@ -53,56 +53,61 @@
5353
>
5454
<div class="space-y-8">
5555
<div class="container pt-3 min-h-32">
56-
<div class="flex flex-col md:space-x-10 md:flex-row">
56+
<div class="flex flex-col md:space-x-10 md:flex-row md:items-start">
5757
<div class="flex-1 overflow-x-hidden">
58-
<div class="flex gap-3 mb-2">
59-
<AdminBadge
60-
v-if="dataset.deleted"
61-
:icon="RiDeleteBinLine"
62-
size="sm"
63-
type="secondary"
64-
>
65-
{{ $t("Supprimé") }}
66-
</AdminBadge>
67-
<AdminBadge
68-
v-if="dataset.private"
69-
:icon="RiLockLine"
70-
size="sm"
71-
type="secondary"
72-
>
73-
{{ $t("Brouillon") }}
74-
</AdminBadge>
75-
<AdminBadge
76-
v-if="dataset.archived"
77-
:icon="RiLockLine"
78-
size="sm"
79-
type="secondary"
80-
>
81-
{{ $t("Archivé") }}
82-
</AdminBadge>
83-
</div>
84-
<h1 class="text-2xl text-gray-title font-extrabold mb-6">
85-
{{ dataset.title }}
58+
<div ref="header">
59+
<div class="flex gap-3 mb-2">
60+
<AdminBadge
61+
v-if="dataset.deleted"
62+
:icon="RiDeleteBinLine"
63+
size="sm"
64+
type="secondary"
65+
>
66+
{{ $t("Supprimé") }}
67+
</AdminBadge>
68+
<AdminBadge
69+
v-if="dataset.private"
70+
:icon="RiLockLine"
71+
size="sm"
72+
type="secondary"
73+
>
74+
{{ $t("Brouillon") }}
75+
</AdminBadge>
76+
<AdminBadge
77+
v-if="dataset.archived"
78+
:icon="RiLockLine"
79+
size="sm"
80+
type="secondary"
81+
>
82+
{{ $t("Archivé") }}
83+
</AdminBadge>
84+
</div>
85+
<h1 class="text-2xl text-gray-title font-extrabold mb-6">
86+
{{ dataset.title }}
8687

87-
<span
88-
v-if="dataset.acronym"
89-
class="text-xs text-gray-title font-bold"
90-
>
91-
{{ dataset.acronym }}
92-
</span>
93-
</h1>
88+
<span
89+
v-if="dataset.acronym"
90+
class="text-xs text-gray-title font-bold"
91+
>
92+
{{ dataset.acronym }}
93+
</span>
94+
</h1>
95+
</div>
9496
<div class="text-sm text-gray-plain font-bold mb-1 pb-0">
9597
{{ $t("Description") }}
9698
</div>
97-
<ReadMore>
99+
<ReadMore :wanted-height="sidebarHeight - headerHeight">
98100
<MarkdownViewer
99101
size="sm"
100102
:content="dataset.description"
101103
:min-heading="3"
102104
/>
103105
</ReadMore>
104106
</div>
105-
<dl class="pl-0 w-full shrink-0 md:w-[384px] space-y-4">
107+
<dl
108+
ref="sidebar"
109+
class="pl-0 w-full shrink-0 md:w-[384px] space-y-4"
110+
>
106111
<div class="space-y-1">
107112
<dt class="text-sm text-gray-plain font-bold mb-0 pb-0">
108113
<template v-if="hasContactPointsWithSpecificRole">
@@ -403,6 +408,7 @@ import ContactPoint from '~/components/ContactPoint.vue'
403408
import OrganizationOwner from '~/components/OrganizationOwner.vue'
404409
import ReportModal from '~/components/Spam/ReportModal.vue'
405410
import type { PaginatedArray } from '~/types/types'
411+
import { useElementSize } from '@vueuse/core'
406412
407413
const config = useRuntimeConfig()
408414
const route = useRoute()
@@ -412,6 +418,12 @@ definePageMeta({
412418
keepScroll: true,
413419
})
414420
421+
const sidebar = useTemplateRef('sidebar')
422+
const header = useTemplateRef('header')
423+
424+
const { height: sidebarHeight } = useElementSize(sidebar)
425+
const { height: headerHeight } = useElementSize(header)
426+
415427
const url = computed(() => `/api/2/datasets/${route.params.did}/`)
416428
const { data: dataset, status } = await useAPI<DatasetV2WithFullObject>(url, {
417429
headers: {

0 commit comments

Comments
 (0)