Skip to content

Commit

Permalink
Bigger illustrations on create screens (#210)
Browse files Browse the repository at this point in the history 
Fix #201
  • Loading branch information
@ThibaudDauce
ThibaudDauce authored Dec 16, 2024
1 parent e126734 commit e72c775
Show file tree
Hide file tree
Showing 6 changed files with 108 additions and 105 deletions.
38 changes: 17 additions & 21 deletions components/Dataservices/DescribeDataservice.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -151,30 +151,26 @@
@submit.prevent="submit"
>
<div class="fr-p-3w bg-white">
<Well
<SimpleBanner
v-if="type === 'create'"
color="blue-cumulus"
weight="regular"
class="fr-mb-2w"
type="primary"
class="mb-4 flex items-center space-x-5"
>
<div class="fr-grid-row">
<div class="fr-col-auto fr-mr-3v">
<NuxtImg
src="/illustrations/dataservice.svg"
loading="lazy"
alt=""
/>
</div>
<div class="fr-col">
<p class="fr-m-0 fr-text--bold">
{{ t('What is a dataservice?') }}
</p>
<p class="fr-m-0 fr-text--xs">
{{ t('A dataservice is a computer tool that allows a website or software to communicate with another computer and exchange data.') }}
</p>
</div>
<NuxtImg
src="/illustrations/dataservice.svg"
loading="lazy"
class="size-14 shrink-0"
alt=""
/>
<div class="w-full">
<p class="font-bold mb-1">
{{ t('What is a dataservice?') }}
</p>
<p class="m-0 text-xs/5">
{{ t('A dataservice is a computer tool that allows a website or software to communicate with another computer and exchange data.') }}
</p>
</div>
</Well>
</SimpleBanner>

<fieldset
v-if="type === 'create'"
Expand Down
39 changes: 18 additions & 21 deletions components/Datasets/DescribeDataset.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -153,30 +153,27 @@
</Sidemenu>
<div class="fr-col-12 fr-col-lg-7">
<div class="fr-p-3w bg-white">
<Well
<SimpleBanner
v-if="type === 'create'"
color="blue-cumulus"
weight="regular"
class="mb-4"
type="primary"
class="mb-4 flex items-center space-x-5"
>
<div class="fr-grid-row">
<div class="fr-col-auto mr-3">
<NuxtImg
src="/illustrations/edit.svg"
loading="lazy"
alt=""
/>
</div>
<div class="fr-col">
<p class="m-0 font-bold">
{{ $t('What is a dataset?') }}
</p>
<p class="m-0 text-xs">
{{ $t('On {site}, a dataset is a set of files.', { site: config.public.title }) }}
</p>
</div>
<NuxtImg
src="/illustrations/edit.svg"
loading="lazy"
class="size-14 shrink-0"
alt=""
/>
<div class="w-full">
<p class="font-bold mb-1">
{{ $t('What is a dataset?') }}
</p>
<p class="m-0 text-xs/5">
{{ $t('On {site}, a dataset is a set of files.', { site: config.public.title }) }}
</p>
</div>
</Well>
</SimpleBanner>

<RequiredExplanation />
<fieldset
v-if="type === 'create'"
Expand Down
39 changes: 18 additions & 21 deletions components/Datasets/New/Step3AddFiles.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -69,29 +69,26 @@
</Sidemenu>
<div class="fr-col-12 fr-col-md-7">
<PaddedContainer>
<Well
color="blue-cumulus"
weight="regular"
class="fr-mb-2w"
<SimpleBanner
type="primary"
class="mb-4 flex items-center space-x-5"
>
<div class="fr-grid-row">
<div class="fr-col-auto fr-mr-3v">
<NuxtImg
src="/illustrations/edit.svg"
loading="lazy"
alt=""
/>
</div>
<div class="fr-col">
<p class="fr-m-0 fr-text--bold">
{{ $t('What is a file?') }}
</p>
<p class="fr-m-0 fr-text--xs">
{{ $t('A dataset can contain multiple types of files (updates, history, documentation, source code, API, link, etc.)') }}
</p>
</div>
<NuxtImg
src="/illustrations/edit.svg"
loading="lazy"
class="size-14 shrink-0"
alt=""
/>
<div class="w-full">
<p class="font-bold mb-1">
{{ $t('What is a file?') }}
</p>
<p class="m-0 text-xs/5">
{{ $t('A dataset can contain multiple types of files (updates, history, documentation, source code, API, link, etc.)') }}
</p>
</div>
</Well>
</SimpleBanner>

<fieldset
class="fr-fieldset min-width-0"
aria-labelledby="description-legend"
Expand Down
39 changes: 18 additions & 21 deletions components/Organization/New/Step2DescribeOrganization.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -94,30 +94,27 @@
</Sidemenu>
<div class="fr-col-12 fr-col-md-7">
<PaddedContainer>
<Well
<SimpleBanner
v-if="showWell"
color="blue-cumulus"
weight="regular"
class="fr-mb-2w"
type="primary"
class="mb-4 flex items-center space-x-5"
>
<div class="fr-grid-row">
<div class="fr-col-auto fr-mr-3v">
<NuxtImg
src="/illustrations/organization.svg"
loading="lazy"
alt=""
/>
</div>
<div class="fr-col">
<p class="fr-m-0 fr-text--bold">
{{ t('What is an organization?') }}
</p>
<p class="fr-m-0 fr-text--xs">
{{ t('An organization is an entity in which many users can collaborate. The datasets published under the organization can be edited by its members.') }}
</p>
</div>
<NuxtImg
src="/illustrations/organization.svg"
loading="lazy"
class="size-14 shrink-0"
alt=""
/>
<div class="w-full">
<p class="font-bold mb-1">
{{ t('What is an organization?') }}
</p>
<p class="m-0 text-xs/5">
{{ t('An organization is an entity in which many users can collaborate. The datasets published under the organization can be edited by its members.') }}
</p>
</div>
</Well>
</SimpleBanner>

<fieldset
class="fr-fieldset"
:aria-labelledby="legend"
Expand Down
38 changes: 17 additions & 21 deletions components/Reuses/DescribeReuse.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -121,30 +121,26 @@
@submit.prevent="submit"
>
<div class="fr-p-3w bg-white">
<Well
<SimpleBanner
v-if="type === 'create'"
color="blue-cumulus"
weight="regular"
class="fr-mb-2w"
type="primary"
class="mb-4 flex items-center space-x-5"
>
<div class="fr-grid-row">
<div class="fr-col-auto fr-mr-3v">
<NuxtImg
src="/illustrations/reuse.svg"
loading="lazy"
alt=""
/>
</div>
<div class="fr-col">
<p class="fr-m-0 fr-text--bold">
{{ t('What is a reuse?') }}
</p>
<p class="fr-m-0 fr-text--xs">
{{ t("A reuse is an exemple of public data's usage.") }} {{ t('Publishing a reuse can allow you to gain visibility and start start a dialogue with the dataset producer.') }}
</p>
</div>
<NuxtImg
src="/illustrations/reuse.svg"
loading="lazy"
class="size-14 shrink-0"
alt=""
/>
<div class="w-full">
<p class="font-bold mb-1">
{{ t('What is a reuse?') }}
</p>
<p class="m-0 text-xs/5">
{{ t("A reuse is an exemple of public data's usage.") }} {{ t('Publishing a reuse can allow you to gain visibility and start start a dialogue with the dataset producer.') }}
</p>
</div>
</Well>
</SimpleBanner>

<fieldset
v-if="type === 'create'"
Expand Down
20 changes: 20 additions & 0 deletions components/SimpleBanner.vue
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,20 @@
<template>
<div
class="rounded p-3"
:class="classes"
>
<slot />
</div>
</template>

<script setup lang="ts">
const props = defineProps<{
type: 'primary'
}>()
const classes = computed(() => {
return {
primary: 'bg-datagouv-lightest text-datagouv-dark',
}[props.type]
})
</script>

0 comments on commit e72c775

Please sign in to comment.