bachir/drupal-caravane
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

correction popup étape map

Browse Source
This commit is contained in:
Valentin Le Moign 2025-01-23 19:58:58 +01:00
parent faa98fbec0
commit 2e47c8dd1b
3 changed files with 39 additions and 22 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

18
web/themes/custom/caravane/assets/js/vuejs/components/parties/ModaleCarteSensible.vue
View File

@ -6,16 +6,34 @@
:zoom-amount="2.5"
alt="Carte sensible du territoire"
hover-message="Survolez pour zoomer dans la carte"
@regular-loaded="setVerticalImages()"
/>
<figcaption class="caption">{{ partie.carteSensible.alt }}</figcaption>
</figure>
</template>
<script setup>
import { nextTick, onMounted } from 'vue';
import { VueImageZoomer } from 'vue-image-zoomer';
import 'vue-image-zoomer/dist/style.css';
const props = defineProps({
partie: Object
});
function setVerticalImages() {
const zoomer = document.querySelector('.sensible-map');
setTimeout(() => {
if (zoomer.offsetWidth / zoomer.offsetHeight < 1) {
zoomer.style.padding = '0 7vw';
const caption = zoomer.querySelector('figcaption');
caption.style.marginLeft = 0;
}
}, 100);
}
onMounted(() => {
const zoomer = document.querySelector('.sensible-map');
// console.log('mounted');
});
</script>

41
web/themes/custom/caravane/assets/scss/main.scss
View File

@ -386,33 +386,33 @@ body{
border: none;
width: 100%;
> div {
max-height: 15vh;
overflow: hidden;
display: grid;
grid-template-columns: minmax(10px, 12.5vw) 12.5vw;
grid-template-columns: 1fr 1fr;
grid-template-rows: 1.5fr 0.5fr;
transform: translateY(-60%);
background-color: white;
opacity: 0;
transition: opacity 0.3s ease-out;
> div:first-of-type {
line-height: 1.2;
grid-column: 1 / span 1;
grid-row: 1 / span 1;
font-family: 'Joost', sans-serif;
font-size: $m-font-size-mobile;
/* display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
*/
display: flex;
padding-top: 10px;
padding-left: 20px;
padding-right: 20px;
text-wrap: wrap;
width: 100%;
box-sizing: border-box;
@media screen and (min-width: $desktop-min-width) {
font-size: $m-font-size-desktop;
}
> a {
width: 100%;
align-self: center;
display: inline-block;
text-align: center;
font-weight: bold;
@ -427,7 +427,9 @@ body{
grid-column: 1 / span 1;
grid-row: 2 / span 1;
text-align: center;
padding: 10px 0;
padding: 10px 0 20px 0;
width: 100%;
box-sizing: border-box;
> time {
font-size: $sm-font-size-mobile;
font-family: 'Marianne', sans-serif;
@ -440,24 +442,20 @@ body{
> div:nth-of-type(3) {
width: 100%;
height: 100%;
display: block;
display: flex;
justify-content: center;
align-items: center;
padding: 0;
grid-column: 2 / span 1;
grid-row: 1 / span 2;
overflow: hidden;
> a {
display: block;
width: 100%;
height: 100%;
> img {
padding: 0;
> img {
padding: 0;
height: 100%;
width: auto;
object-fit: cover;
margin: 0;
display: block;
}
height: auto;
width: 100%;
object-fit: cover;
margin: 0;
display: block;
}
}
}
@ -933,6 +931,7 @@ body{
width: 100%;
display: inline-block;
> .sensible-map {
box-sizing: border-box;
margin: 0;
width: calc(100% + $modale-x-padding);
margin-left: calc(($modale-x-padding / 2) * -1);

2
web/themes/custom/caravane/templates/views-view-field--block-2--popup-map.html.twig
View File

@ -32,7 +32,7 @@
</div>
{% endif %}
{% else %}
{% if content != '' %}
{% if content|render|striptags|trim is not empty or content|render matches '/<img/' %}
<div class="separated-content">{{ content|trim }}</div>
{% endif %}
{% endif %}