68 lines
2.2 KiB
Vue
68 lines
2.2 KiB
Vue
<script>
|
|
import {ref} from "vue";
|
|
import {useScheduleStore} from '../../stores/schedule.js';
|
|
|
|
export default {
|
|
name: "Links",
|
|
data: () => ({
|
|
links: ref(),
|
|
fetching: true,
|
|
scheduleStore: useScheduleStore(),
|
|
windowHeight: document.documentElement.clientHeight,
|
|
windowWidth: document.documentElement.clientWidth,
|
|
isWide: window.innerWidth >= 460
|
|
}),
|
|
mounted() {
|
|
this.scheduleStore.getLinks().then(()=>{
|
|
this.links = this.scheduleStore.links;
|
|
this.fetching = false;
|
|
});
|
|
this.myEventHandler();
|
|
window.addEventListener("resize", this.myEventHandler, { passive: true });
|
|
},
|
|
created() {
|
|
window.addEventListener("resize", this.myEventHandler);
|
|
},
|
|
methods: {
|
|
myEventHandler(e) {
|
|
this.windowHeight = document.documentElement.clientHeight;
|
|
this.windowWidth = document.documentElement.clientWidth;
|
|
this.isWide = this.windowWidth >= 460;
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<template>
|
|
<div class="w-100 d-flex justify-center">
|
|
<v-list :class="isWide ? 'w-66' : 'w-100'">
|
|
<v-skeleton-loader v-if="fetching" type="list-item"/>
|
|
<v-list-item v-else class="ma-5 box-gradient" elevation="6" v-for="link in links" :href="link.link"> <!-- style="background-color: #E57373; color: #FFFFFF" -->
|
|
<template v-slot:prepend>
|
|
<v-avatar :image="link.image" rounded="0"></v-avatar>
|
|
</template>
|
|
<v-list-item-title>{{ link.link_name }}</v-list-item-title>
|
|
</v-list-item>
|
|
</v-list>
|
|
</div>
|
|
</template>
|
|
|
|
<style scoped>
|
|
.bg-gradient-noh {
|
|
background: linear-gradient(-45deg, #f103b0, #f0a068, #4fdbfeff);
|
|
background-size: 200% 200%;
|
|
animation: gradient 15s ease infinite;
|
|
}
|
|
.box-gradient {
|
|
border: 10px solid transparent;
|
|
background: linear-gradient(
|
|
#ffffff,
|
|
#ffffff) padding-box,
|
|
linear-gradient(45deg,
|
|
#FF52E5,
|
|
#F6D242) border-box;
|
|
border-radius: 14px;
|
|
}
|
|
|
|
</style>
|