From a46f4c058c7ea7c0ea0de6aadea02e5edbb0fe74 Mon Sep 17 00:00:00 2001 From: Thomas Citharel <tcit@tcit.fr> Date: Tue, 5 Nov 2019 15:51:34 +0100 Subject: [PATCH] Fix add to calendar section with low screen width Signed-off-by: Thomas Citharel <tcit@tcit.fr> --- js/src/views/Event/Event.vue | 20 +++++++++++--------- 1 file changed, 11 insertions(+), 9 deletions(-) diff --git a/js/src/views/Event/Event.vue b/js/src/views/Event/Event.vue index 14fe43f80..f96290106 100644 --- a/js/src/views/Event/Event.vue +++ b/js/src/views/Event/Event.vue @@ -173,8 +173,8 @@ import {ParticipantRole} from "@/types/event.model"; </div> <section class="share" v-if="!event.draft"> <div class="container"> - <div class="columns"> - <div class="column is-half-desktop has-text-centered"> + <div class="columns is-centered is-multiline"> + <div class="column is-half-widescreen has-text-centered"> <h3 class="title">{{ $t('Share this event') }}</h3> <small class="maximumNumberOfPlacesWarning" v-if="!eventCapacityOK"> {{ $t('All the places have already been taken') }} @@ -189,7 +189,8 @@ import {ParticipantRole} from "@/types/event.model"; </div> </div> <hr /> - <div class="column is-half has-text-right add-to-calendar"> + <div class="column is-half-widescreen has-text-right add-to-calendar"> + <img src="../../assets/undraw_events.svg" class="is-hidden-mobile is-hidden-tablet-only" /> <h3 @click="downloadIcsEvent()"> {{ $t('Add to my calendar') }} </h3> @@ -911,20 +912,21 @@ export default class Event extends EventMixin { h3 { margin-right: 0; - margin-left: auto; } } .add-to-calendar { - background-repeat: no-repeat; - background-size: 400px; - background-position: 10% 50%; - background-image: url('../../assets/undraw_events.svg'); - position: relative; + display: flex; + h3 { + margin-left: 0; cursor: pointer; } + img { + max-width: 400px; + } + &::before { content:""; background: #B3B3B2;