67 lines
1.5 KiB
Vue
67 lines
1.5 KiB
Vue
<template>
|
|
<div>
|
|
<button
|
|
class="flex items-center text-white transform transition-transform duration-200 hover:text-gray-300 hover:scale-125 mr-2"
|
|
@click="AboutUs = true"
|
|
>
|
|
<v-icon style="font-size: 35px; height: 35px; width: 55px;">mdi-information</v-icon>
|
|
</button>
|
|
|
|
<v-dialog v-model="AboutUs" max-width="500px">
|
|
<v-card>
|
|
<v-card-title>
|
|
À propos
|
|
<br><br>
|
|
<div class="flex justify-center"> {{ creator.about }}</div>
|
|
<br>
|
|
</v-card-title>
|
|
<v-card-text class="scrollable-content">
|
|
{{ creator.description }}
|
|
</v-card-text>
|
|
<v-card-actions>
|
|
<v-spacer></v-spacer>
|
|
<v-btn text class="ml-auto" @click="isModalOpen = false">Fermer</v-btn>
|
|
</v-card-actions>
|
|
</v-card>
|
|
</v-dialog>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup>
|
|
|
|
import {ref} from 'vue';
|
|
import {useUserStore} from "@/stores/user.js";
|
|
|
|
const AboutUs = ref(false);
|
|
|
|
const props = defineProps({
|
|
creator: {type: Object, required: true},
|
|
});
|
|
</script>
|
|
|
|
<style scoped>
|
|
.scrollable-content {
|
|
max-height: 600px;
|
|
overflow-y: auto;
|
|
|
|
}
|
|
|
|
.scrollable-content::-webkit-scrollbar {
|
|
width: 6px;
|
|
}
|
|
|
|
.scrollable-content::-webkit-scrollbar-thumb {
|
|
background-color: #A30E79;
|
|
border-radius: 10px;
|
|
}
|
|
|
|
.scrollable-content::-webkit-scrollbar-thumb:hover {
|
|
background-color: #a21caf;
|
|
}
|
|
|
|
.transparent-btn {
|
|
background-color: transparent;
|
|
color: inherit;
|
|
box-shadow: none;
|
|
}
|
|
</style> |