Joururi/leim-maps
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Added cover to search list

Browse Source
This commit is contained in:
Alexis
2024-12-24 16:12:59 +01:00
parent e07ee03aee
commit 90084c1d37
1 changed files with 34 additions and 11 deletions
Download Patch File Download Diff File Expand all files Collapse all files

27
src/components/maps/overlay/SearchMarkers.vue
View File

@@ -220,6 +220,9 @@ function resetAllFields(actionAfter?: "focusAfter") {
tabindex="0" tabindex="0"
:title="m.group === 'quests' ? 'Voir la quête' : 'Visiter ce lieu'" :title="m.group === 'quests' ? 'Voir la quête' : 'Visiter ce lieu'"
> >
<img v-if="m.cover && !m.coverPortrait" :src="`/images/cover/${m.cover}`" :alt="m.title" width="300" />
<div class="content-wrapper">
<span class="title">{{ m.title }}</span> <span class="title">{{ m.title }}</span>
<div class="desc" v-html="m.description"></div> <div class="desc" v-html="m.description"></div>
@@ -232,6 +235,7 @@ function resetAllFields(actionAfter?: "focusAfter") {
<svg v-else-if="m.group === 'capitals'" class="icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256"><rect width="256" height="256" fill="none"/><path d="M200,24h-8a16,16,0,0,0-16,16V56H148V40a16,16,0,0,0-16-16h-8a16,16,0,0,0-16,16V56H80V40A16,16,0,0,0,64,24H56A16,16,0,0,0,40,40V84.69A15.86,15.86,0,0,0,44.69,96L56,107.31V216a16,16,0,0,0,16,16H184a16,16,0,0,0,16-16V107.31L211.31,96A15.86,15.86,0,0,0,216,84.69V40A16,16,0,0,0,200,24ZM152,216H104V152a24,24,0,0,1,48,0Z"/></svg> <svg v-else-if="m.group === 'capitals'" class="icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256"><rect width="256" height="256" fill="none"/><path d="M200,24h-8a16,16,0,0,0-16,16V56H148V40a16,16,0,0,0-16-16h-8a16,16,0,0,0-16,16V56H80V40A16,16,0,0,0,64,24H56A16,16,0,0,0,40,40V84.69A15.86,15.86,0,0,0,44.69,96L56,107.31V216a16,16,0,0,0,16,16H184a16,16,0,0,0,16-16V107.31L211.31,96A15.86,15.86,0,0,0,216,84.69V40A16,16,0,0,0,200,24ZM152,216H104V152a24,24,0,0,1,48,0Z"/></svg>
<svg v-else-if="m.group === 'landmarks'" class="icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256"><rect width="256" height="256" fill="none"/><path d="M208,80a8,8,0,0,0-8,8v16H188.85L184,55.2A8,8,0,0,0,181.31,50h0L138.44,11.88l-.2-.17a16,16,0,0,0-20.48,0l-.2.17L74.68,50v0A7.93,7.93,0,0,0,72,55.2L67.15,104H56V88a8,8,0,0,0-16,0v24a8,8,0,0,0,8,8H65.54l-9.47,94.48A16,16,0,0,0,72,232H184a16,16,0,0,0,15.92-17.56L190.46,120H208a8,8,0,0,0,8-8V88A8,8,0,0,0,208,80ZM87.24,64h81.52l4,40H136V88a8,8,0,0,0-16,0v16H83.23ZM72,216l4.81-48H179.19L184,216Z"/></svg> <svg v-else-if="m.group === 'landmarks'" class="icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256"><rect width="256" height="256" fill="none"/><path d="M208,80a8,8,0,0,0-8,8v16H188.85L184,55.2A8,8,0,0,0,181.31,50h0L138.44,11.88l-.2-.17a16,16,0,0,0-20.48,0l-.2.17L74.68,50v0A7.93,7.93,0,0,0,72,55.2L67.15,104H56V88a8,8,0,0,0-16,0v24a8,8,0,0,0,8,8H65.54l-9.47,94.48A16,16,0,0,0,72,232H184a16,16,0,0,0,15.92-17.56L190.46,120H208a8,8,0,0,0,8-8V88A8,8,0,0,0,208,80ZM87.24,64h81.52l4,40H136V88a8,8,0,0,0-16,0v16H83.23ZM72,216l4.81-48H179.19L184,216Z"/></svg>
</div> </div>
</div>
</button> </button>
<!-- Custom marker actions --> <!-- Custom marker actions -->
@@ -401,6 +405,12 @@ function resetAllFields(actionAfter?: "focusAfter") {
li { li {
position: relative; position: relative;
border-radius: .5rem;
overflow: clip;
&:not(:last-child) {
margin-bottom: .25rem;
}
&:hover:not(:has(a:hover)) { &:hover:not(:has(a:hover)) {
background-color: var(--slate-100); background-color: var(--slate-100);
@@ -413,11 +423,24 @@ function resetAllFields(actionAfter?: "focusAfter") {
.search-item { .search-item {
position: relative; position: relative;
cursor: pointer; cursor: pointer;
padding: .4rem .25em;
padding-right: 2.75rem;
width: 100%; width: 100%;
border-radius: .5rem;
outline-offset: -1px; outline-offset: -1px;
img {
display: block;
width: 100%;
max-height: 15dvh;
max-height: 15vh;
object-fit: cover;
}
.content-wrapper {
position: relative;
padding: .4rem .5em .6rem;
padding-right: 2.75rem;
}
.title, .title,
.desc { .desc {
display: block; display: block;