Skip to content

Commit

Permalink
chore: remove PoiLayout component #447
Browse files Browse the repository at this point in the history
  • Loading branch information
@wazolab
wazolab committed Dec 18, 2024
1 parent bd134ca commit 35ed322
Show file tree
Hide file tree
Showing 2 changed files with 125 additions and 202 deletions.
107 changes: 0 additions & 107 deletions components/Layout/PoiLayout.vue
View file

This file was deleted.

220 changes: 125 additions & 95 deletions components/PoisDetails/PoiDetails.vue
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,5 @@
<script setup lang="ts">
import { storeToRefs } from 'pinia'
import PoiLayout from '~/components/Layout/PoiLayout.vue'
import MapPois from '~/components/Map/MapPois.vue'
import Carousel from '~/components/PoisDetails/Carousel.vue'
import FieldsGroup from '~/components/PoisDetails/FieldsGroup.vue'
Expand All @@ -11,6 +10,7 @@ import FavoriteIcon from '~/components/UI/FavoriteIcon.vue'
import IconButton from '~/components/UI/IconButton.vue'
import RelativeDate from '~/components/UI/RelativeDate.vue'
import TeritorioIcon from '~/components/UI/TeritorioIcon.vue'
import TeritorioIconBadge from '~/components/UI/TeritorioIconBadge.vue'
import type { ContentEntry } from '~/lib/apiContent'
import type { ApiPoiDeps } from '~/lib/apiPoiDeps'
import type { ApiPoi, FieldsList } from '~/lib/apiPois'
Expand All @@ -19,6 +19,8 @@ import { favoriteStore as useFavoriteStore } from '~/stores/favorite'
import { OriginEnum } from '~/utils/types'
import FieldsHeader from '~/components/UI/FieldsHeader.vue'
import ContribFieldGroup from '~/components/Fields/ContribFieldGroup.vue'
import Header from '~/components/Layout/Header.vue'
import Footer from '~/components/Layout/Footer.vue'
//
// Props
Expand Down Expand Up @@ -147,15 +149,12 @@ function back() {
</script>

<template>
<PoiLayout
:settings="settings"
:nav-menu-entries="navMenuEntries"
:name="pageTitle"
:icon="poi.properties.display && poi.properties.display.icon"
:color-line="colorLine"
:color-fill="colorFill"
>
<template #headerButtons>
<VContainer>
<Header
:theme="settings.themes[0]"
:nav-menu-entries="navMenuEntries"
:color-line="colorLine"
>
<IconButton
:label="
isFavorite ? t('poiCard.favoriteOn') : t('poiCard.favoriteOff')
Expand All @@ -173,95 +172,93 @@ function back() {
>
<TeritorioIcon picto="map" class="tw-text-zinc-800" />
</IconButton>
</template>
<template #actions>
<Share
class="print:tw-hidden"
:title="poi.properties.name"
:href="
poi.properties.editorial
&& poi.properties.editorial['website:details']
"
:color-line="colorLine"
/>
</template>
<template #body>
<div class="detail-wrapper">
<div class="detail-left">
<FieldsGroup
v-if="detailsFields"
:group="{
group: 'root',
fields: detailsFields,
display_mode: 'standard',
icon: '',
}"
:properties="properties"
:color-fill="colorFill"
:geom="poi.geometry"
/>
<div v-if="contribMode && isContribEligible(poi.properties)">
<FieldsHeader :recursion-stack="[]">
{{ t('fields.contrib.heading') }}
</FieldsHeader>
<ContribFieldGroup v-bind="getContributorFields(poi)" />
</div>
</Header>
<div v-if="poi.properties.display && poi.properties.display.icon" class="tw-flex tw-justify-center">
<TeritorioIconBadge :color-fill="colorFill" size="2xl" :picto="poi.properties.display.icon" />
</div>
<h1 class="print:tw-pb-4">
{{ pageTitle }}
</h1>
<Share
class="print:tw-hidden"
:title="poi.properties.name"
:href="poi.properties.editorial && poi.properties.editorial['website:details']"
:color-line="colorLine"
/>
<div class="detail-wrapper">
<div class="detail-left">
<FieldsGroup
v-if="detailsFields"
:group="{
group: 'root',
fields: detailsFields,
display_mode: 'standard',
icon: '',
}"
:properties="properties"
:color-fill="colorFill"
:geom="poi.geometry"
/>
<div v-if="contribMode && isContribEligible(poi.properties)">
<FieldsHeader :recursion-stack="[]">
{{ t('fields.contrib.heading') }}
</FieldsHeader>
<ContribFieldGroup v-bind="getContributorFields(poi)" />
</div>
</div>

<div class="detail-right">
<Mapillary
v-if="poi.properties.mapillary"
:image-id="poi.properties.mapillary"
/>
<Carousel
v-else-if="poi.properties.image"
:images="poi.properties.image"
/>
<div class="detail-right">
<Mapillary
v-if="poi.properties.mapillary"
:image-id="poi.properties.mapillary"
/>
<Carousel
v-else-if="poi.properties.image"
:images="poi.properties.image"
/>

<template v-if="!isLargeLayeout">
<MapPois
:extra-attributions="settings.attributions"
:feature-ids="[id]"
:features="[poi]"
class="tw-relative poi-map"
:off-map-attribution="true"
/>
</template>

<FieldsGroup
v-else
:group="{
group: 'root',
display_mode: 'standard',
icon: '',
fields: [
{
group: 'description',
display_mode: 'standard',
fields: [{ field: 'description' }],
icon: '',
},
],
}"
:properties="poi.properties"
:geom="poi.geometry"
:color-fill="colorFill"
<template v-if="!isLargeLayeout">
<MapPois
:extra-attributions="settings.attributions"
:feature-ids="[id]"
:features="[poi]"
class="tw-relative poi-map"
:off-map-attribution="true"
/>
</div>
</template>

<FieldsGroup
v-else
:group="{
group: 'root',
display_mode: 'standard',
icon: '',
fields: [
{
group: 'description',
display_mode: 'standard',
fields: [{ field: 'description' }],
icon: '',
},
],
}"
:properties="poi.properties"
:geom="poi.geometry"
:color-fill="colorFill"
/>
</div>
</div>

<RouteMap
v-if="isLargeLayeout && poiDeps"
id="route-map"
:poi-id="id"
:route="poiDeps"
:color-fill="colorFill"
:color-line="colorLine"
:favorites-mode-enabled="favoritesModeEnabled"
/>
</template>

<template #footer>
<RouteMap
v-if="isLargeLayeout && poiDeps"
id="route-map"
:poi-id="id"
:route="poiDeps"
:color-fill="colorFill"
:color-line="colorLine"
:favorites-mode-enabled="favoritesModeEnabled"
/>
<Footer :attributions="settings.attributions">
<span v-if="poi.properties.metadata.updated_at">
{{ t('poiDetails.lastUpdate') }}
<a
Expand All @@ -273,8 +270,8 @@ function back() {
</a>
<RelativeDate v-else :date="poi.properties.metadata.updated_at" />
</span>
</template>
</PoiLayout>
</Footer>
</VContainer>
</template>

<style lang="scss" scoped>
Expand Down Expand Up @@ -329,4 +326,37 @@ function back() {
width: 100%;
height: 500px;
}
body {
color: $color-text;
background-color: #fefefe;
padding: 1rem;
min-width: 21rem;
-webkit-font-smoothing: antialiased;
text-rendering: optimizelegibility;
line-height: 1.3;
word-wrap: break-word;
@extend %font-light;
}
h1 {
font-size: 2.4rem;
text-align: center;
margin: 0.6rem 0.3rem 0;
text-transform: uppercase;
}
h2 {
font-size: 1.8rem;
margin-top: 0;
margin-bottom: 0.7rem;
text-transform: uppercase;
}
h3 {
font-size: 1.2rem;
margin-top: 1.2rem;
margin-bottom: 0.7rem;
}
</style>

0 comments on commit 35ed322

Please sign in to comment.