Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Feat/home big title and search #556

Closed
wants to merge 17 commits into from
Closed

Feat/home big title and search #556

Show file tree
Hide file tree
Changes from 12 commits
Commits
Show all changes
17 commits
Select commit Hold shift + click to select a range
7ff6893
Style new home title
Oct 21, 2024
909a75d
User HeaderSearch component on home
Oct 21, 2024
b717502
Rename HeaderSearch to Search
Oct 21, 2024
88fa800
Fix placeholder render under icon
Oct 21, 2024
7dcec80
Fix placeholder input and define it for home
Oct 21, 2024
ead3d73
Fix component name
Oct 21, 2024
9040c59
Fix placeholder on mobile
Oct 21, 2024
8d2809f
Review - Fix space
at-github Oct 24, 2024
f19c25b
Fix title after rebase
at-github Oct 30, 2024
e7745ed
Review - Fix title
at-github Oct 30, 2024
6c94039
Review - Set forgotten search width
at-github Oct 30, 2024
3ad1fed
Review - Fix placeholder
at-github Oct 30, 2024
6f6a1ae
Review - Fix title size unit
at-github Oct 31, 2024
6edc77e
Review - Dont use pixel for font-size
at-github Nov 4, 2024
5d9e52e
Review - Use clamp for title font size
at-github Nov 4, 2024
12cbbe7
Fix duplicate ids
at-github Nov 4, 2024
2a3ac7b
Update title wording
at-github Nov 4, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion configs/ecospheres/config.yaml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -29,7 +29,7 @@ website:
# leave empty if not pertinent
logo_operator:
homepage:
title: 'La plateforme des données de la transition écologique'
title: ''
at-github marked this conversation as resolved.
Show resolved Hide resolved
subtitle:
sections:
- title:
Expand Down
22 changes: 19 additions & 3 deletions src/components/header/HeaderSearch.vue → src/components/SearchComponent.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,12 +14,15 @@ defineProps({
searchLabel: {
type: String,
required: true
},
placeholder: {
type: String,
default: ''
}
})

const emits = defineEmits(['search'])

const placeholder = config.website.header_search.placeholder
const dropdown = config.website.header_search.dropdown
const query = ref('')
const selectedMultiSearch = ref()
Expand Down Expand Up @@ -69,7 +72,7 @@ const dropdownLabel = (text: string) => {
:options="dropdown"
label="text"
track-by="route"
placeholder=""
:placeholder="placeholder"
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

ce n'est peut-être pas la peine d'avoir une valeur ici vu qu'on override avec le slot placeholder plus bas non ?

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

D'après ma compréhension et mes tests :

  • Ligne 79 : ce placeholder s'affiche après focus
  • Ligne : 103 : ce placeholder s'affiche avant focus

select-label=""
deselect-label=""
aria-labelledby="search-label"
Expand All @@ -93,7 +96,7 @@ const dropdownLabel = (text: string) => {
<span class="fr-icon-search-line search-icon"></span>
</template>
<template #placeholder>
<span aria-hidden="true" class="visible-label">Rechercher</span>
<span aria-hidden="true" class="visible-label">{{ placeholder }}</span>
</template>
</Multiselect>
</div>
Expand All @@ -115,6 +118,19 @@ const dropdownLabel = (text: string) => {
.visible-label {
margin-left: var(--icon-width);
}
.multiselect__placeholder {
margin-inline-start: var(--icon-width);
font-style: italic;
color: var(--text-mention-grey);
white-space: nowrap;
text-overflow: ellipsis;
width: 100%;
overflow: hidden;
}
::placeholder {
font-style: italic;
color: var(--text-mention-grey);
}
}
:deep(.multiselect__tags) {
border: 0;
Expand Down
6 changes: 3 additions & 3 deletions src/components/header/HeaderComponent.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,8 +9,8 @@ import {
type StyleValue
} from 'vue'

import SearchComponent from '../SearchComponent.vue'
import type { DsfrHeaderMenuLinkProps } from './DsfrHeaderMenuLink.vue'
import HeaderSearch from './HeaderSearch.vue'

type DsfrHeaderProps = {
serviceTitle?: string
Expand Down Expand Up @@ -192,7 +192,7 @@ const badgeCss = 'fr-badge fr-badge--sm fr-badge--' + props.badgeStyle
/>
</div>
<div v-if="showSearch" class="fr-header__search fr-modal">
<HeaderSearch :search-label="searchLabel" />
<SearchComponent :search-label="searchLabel" />
</div>
</div>
</div>
Expand All @@ -217,7 +217,7 @@ const badgeCss = 'fr-badge fr-badge--sm fr-badge--' + props.badgeStyle
>
Fermer
</button>
<HeaderSearch
<SearchComponent
v-if="searchModalOpened"
:search-label="searchLabel"
@search="hideModal(false)"
Expand Down
54 changes: 29 additions & 25 deletions src/custom/ecospheres/views/HomeView.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,7 @@ import { ref } from 'vue'
import { useRouter } from 'vue-router'

import HomeThemes from '@/components/HomeThemes.vue'
import SearchComponent from '@/components/SearchComponent.vue'
import config from '@/config'

import contributeSvg from '../assets/contribuer.svg'
Expand All @@ -16,7 +17,6 @@ const doSearch = () => {
router.push({ name: 'datasets', query: { q: query.value } })
}

const homepageTitle = config.website.homepage.title
const searchConfig = config.website.search_bar

useHead({
Expand All @@ -34,30 +34,16 @@ useHead({

<template>
<div class="datagouv-components">
<section class="fr-container fr-py-12v">
<div class="fr-grid-row fr-grid-row--gutters">
<div class="fr-col">
<h1>{{ homepageTitle }}</h1>
<p>
<i>ecologie</i><strong>.data.gouv</strong><i>.fr</i> référence et
centralise les données de la transition écologique.
</p>
<p>
Le catalogue rassemble les données utiles au déploiement des
politiques publiques portées par le Ministère de la Transition
écologique et de la Cohésion des territoires.
</p>
</div>
<div class="fr-col-md-6 fr-hidden fr-unhidden-md fr-grid-row--center">
<img
src="../assets/home-global-schema.svg"
alt=""
class="illustration"
width="441"
height="290"
/>
</div>
</div>
<section class="fr-container fr-pt-12v">
<h1 class="main-title-v2">
Le&nbsp;catalogue des&nbsp;données&nbsp;de
<br />
la <span class="highlight">transition écologique</span>
</h1>
<SearchComponent
class="big-search"
placeholder="Aménagement des villes dans les jeux de données"
at-github marked this conversation as resolved.
Show resolved Hide resolved
/>
</section>
<section class="fr-container">
<ul class="fr-grid-row fr-grid-row--gutters fr-py-12v" role="list">
Expand Down Expand Up @@ -319,4 +305,22 @@ useHead({
height: 120%;
}
}

.main-title-v2 {
text-align: center;
font-size: 64px;
at-github marked this conversation as resolved.
Show resolved Hide resolved

@media (max-width: 768px) {
at-github marked this conversation as resolved.
Show resolved Hide resolved
text-align: inherit;
font-size: 22px;
at-github marked this conversation as resolved.
Show resolved Hide resolved
}
}
.main-title-v2 :deep(.highlight) {
color: #000091;
}

.big-search {
max-width: 792px;
margin: 0 auto;
}
</style>
Loading