feat [front]: extract social buttons
This commit is contained in:
parent
7852589ea7
commit
006aa19205
|
@ -34,21 +34,9 @@
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="networks">
|
<div class="networks">
|
||||||
<a
|
<SocialsFacebook />
|
||||||
class="navbar-item"
|
<SocialsInstagram />
|
||||||
href="https://www.facebook.com/cineclub.ensulm"
|
<SocialsNewsletter />
|
||||||
>
|
|
||||||
<v-icon scale="1.8" name="ri-facebook-box-fill" /> Facebook
|
|
||||||
</a>
|
|
||||||
<a
|
|
||||||
class="navbar-item"
|
|
||||||
href="https://www.instagram.com/cineclubens/"
|
|
||||||
>
|
|
||||||
<v-icon scale="1.8" name="ri-instagram-fill" /> Instagram
|
|
||||||
</a>
|
|
||||||
<div class="navbar-item">
|
|
||||||
<v-icon scale="1.8" name="ri-mail-fill" /> Newsletter
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="navbar-start">
|
<div class="navbar-start">
|
||||||
|
@ -164,7 +152,3 @@ $navbar-item-img-max-height: 105px
|
||||||
justify-content: space-between
|
justify-content: space-between
|
||||||
flex-direction: column
|
flex-direction: column
|
||||||
</style>
|
</style>
|
||||||
<style lang="sass">
|
|
||||||
.navbar .networks .navbar-item .ov-icon
|
|
||||||
margin-right: 0.5rem
|
|
||||||
</style>
|
|
||||||
|
|
9
front/components/socials/facebook.vue
Normal file
9
front/components/socials/facebook.vue
Normal file
|
@ -0,0 +1,9 @@
|
||||||
|
<template>
|
||||||
|
<a
|
||||||
|
class="navbar-item network-item"
|
||||||
|
href="https://www.facebook.com/cineclub.ensulm"
|
||||||
|
>
|
||||||
|
<v-icon scale="1.8" name="ri-facebook-box-fill" />
|
||||||
|
Facebook
|
||||||
|
</a>
|
||||||
|
</template>
|
9
front/components/socials/instagram.vue
Normal file
9
front/components/socials/instagram.vue
Normal file
|
@ -0,0 +1,9 @@
|
||||||
|
<template>
|
||||||
|
<a
|
||||||
|
class="navbar-item network-item"
|
||||||
|
href="https://www.instagram.com/cineclubens/"
|
||||||
|
>
|
||||||
|
<v-icon scale="1.8" name="ri-instagram-fill" />
|
||||||
|
Instagram
|
||||||
|
</a>
|
||||||
|
</template>
|
73
front/components/socials/newsletter.vue
Normal file
73
front/components/socials/newsletter.vue
Normal file
|
@ -0,0 +1,73 @@
|
||||||
|
<template>
|
||||||
|
<a class="navbar-item network-item" :href="mailToLink" @click="waitForBlur">
|
||||||
|
<v-icon scale="1.8" name="ri-mail-fill" />
|
||||||
|
Newsletter
|
||||||
|
</a>
|
||||||
|
<div class="modal" :class="{ 'is-active': showModal }">
|
||||||
|
<div class="modal-background"></div>
|
||||||
|
<div class="modal-card">
|
||||||
|
<div class="modal-card-body content">
|
||||||
|
<p>
|
||||||
|
Si aucun mail ne s'est ouvert, alors désolée, il faudra faire
|
||||||
|
l'inscription manuellement. Une solution plus pratique est en cours de
|
||||||
|
développement.
|
||||||
|
</p>
|
||||||
|
<p>
|
||||||
|
Il vous faut envoyer à l'adresse
|
||||||
|
<span
|
||||||
|
class="copyable-text"
|
||||||
|
@click="copyClipboard(mailDestination, 'L\'adresse email')"
|
||||||
|
>
|
||||||
|
{{ mailDestination }}
|
||||||
|
</span>
|
||||||
|
un mail dont l'objet soit
|
||||||
|
<span
|
||||||
|
class="copyable-text"
|
||||||
|
@click="copyClipboard(mailSubject, 'L\'objet du mail')"
|
||||||
|
>
|
||||||
|
{{ mailSubject }}
|
||||||
|
</span>
|
||||||
|
</p>
|
||||||
|
<div v-if="copiedItemFr" class="notification is-primary is-light">
|
||||||
|
{{ copiedItemFr }} a été copié dans votre presse-papier
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<button
|
||||||
|
class="modal-close is-large"
|
||||||
|
aria-label="close"
|
||||||
|
@click="showModal = false"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script lang="ts" setup>
|
||||||
|
const mailToLink =
|
||||||
|
"mailto:sympa@lists.ens.psl.eu?subject=SUBSCRIBE%20cineclub-informations&body=Envoyez%20ce%20mail%20pour%20terminer%20de%20vous%20inscrire"
|
||||||
|
const mailDestination = "sympa@lists.ens.psl.eu"
|
||||||
|
const mailSubject = "SUBSCRIBE cineclub-informations"
|
||||||
|
const showModal = ref<boolean>(false)
|
||||||
|
const copiedItemFr = ref<string>("")
|
||||||
|
|
||||||
|
function waitForBlur() {
|
||||||
|
if (process.server) return
|
||||||
|
let t
|
||||||
|
window.addEventListener("blur", () => clearTimeout(t), { once: true })
|
||||||
|
t = setTimeout(() => (showModal.value = true), 500)
|
||||||
|
}
|
||||||
|
|
||||||
|
function copyClipboard(itemToCopy, itemName) {
|
||||||
|
if (process.server) return
|
||||||
|
navigator.clipboard.writeText(itemToCopy)
|
||||||
|
copiedItemFr.value = itemName
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="sass">
|
||||||
|
.copyable-text
|
||||||
|
font-family: monospace
|
||||||
|
cursor: pointer
|
||||||
|
|
||||||
|
&:hover
|
||||||
|
color: $primary
|
||||||
|
</style>
|
|
@ -13,6 +13,7 @@
|
||||||
@import "bulma/sass/elements/container"
|
@import "bulma/sass/elements/container"
|
||||||
@import "bulma/sass/elements/content"
|
@import "bulma/sass/elements/content"
|
||||||
@import "bulma/sass/elements/image"
|
@import "bulma/sass/elements/image"
|
||||||
|
@import "bulma/sass/elements/notification"
|
||||||
@import "bulma/sass/elements/other"
|
@import "bulma/sass/elements/other"
|
||||||
@import "bulma/sass/elements/tag"
|
@import "bulma/sass/elements/tag"
|
||||||
@import "bulma/sass/elements/title"
|
@import "bulma/sass/elements/title"
|
||||||
|
@ -33,3 +34,7 @@
|
||||||
font-family: "Carter One", serif
|
font-family: "Carter One", serif
|
||||||
font-size: 7em
|
font-size: 7em
|
||||||
color: #90001C
|
color: #90001C
|
||||||
|
|
||||||
|
|
||||||
|
.network-item .ov-icon
|
||||||
|
margin-right: 0.5rem
|
||||||
|
|
Loading…
Reference in a new issue