Arthur Lefebvre
aee6fbaf73
It will do the same behavior as clicking on the "read" button again to cancel it.
102 lines
1.8 KiB
Vue
102 lines
1.8 KiB
Vue
<script setup>
|
|
import { ref, computed, onMounted, onUnmounted } from 'vue'
|
|
|
|
const props = defineProps({
|
|
icon: String,
|
|
legend: String,
|
|
isSet: Boolean,
|
|
})
|
|
|
|
const hovered = ref(false)
|
|
const isOnMobile = ref(computeIsOnMobile())
|
|
|
|
const computedIcon = computed(
|
|
() => props.icon + ((hovered.value && !isOnMobile.value) || props.isSet ? 'Fill' : ''),
|
|
)
|
|
|
|
function computeIsOnMobile() {
|
|
return window.innerWidth < 1024
|
|
}
|
|
|
|
function updateOnMobile() {
|
|
isOnMobile.value = computeIsOnMobile()
|
|
}
|
|
onMounted(() => {
|
|
window.addEventListener('resize', updateOnMobile)
|
|
})
|
|
onUnmounted(() => {
|
|
window.removeEventListener('resize', updateOnMobile)
|
|
})
|
|
</script>
|
|
|
|
<template>
|
|
<div
|
|
class="bigiconandlegend showcanclick"
|
|
@mouseover="hovered = true"
|
|
@mouseout="hovered = false"
|
|
>
|
|
<span class="bigicon" :title="props.legend">
|
|
<component :is="computedIcon"></component>
|
|
</span>
|
|
<div class="bigiconlegend">{{ props.legend }}</div>
|
|
</div>
|
|
</template>
|
|
|
|
<style scoped>
|
|
.bigiconandlegend {
|
|
border-radius: 30px;
|
|
margin: 25px;
|
|
}
|
|
|
|
@media (min-width: 1024px) {
|
|
.showcanclick:hover {
|
|
transform: scale(1.03);
|
|
transition: ease-in-out 0.02s;
|
|
cursor: pointer;
|
|
}
|
|
}
|
|
|
|
.bigicon {
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
height: 90px;
|
|
width: 200px;
|
|
font-size: 78px;
|
|
padding-top: 20px;
|
|
}
|
|
|
|
.bigiconlegend {
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
font-size: 34px;
|
|
width: 200px;
|
|
padding-bottom: 30px;
|
|
}
|
|
|
|
@media (max-width: 1024px) {
|
|
.bigicon {
|
|
flex: 1;
|
|
height: 40px;
|
|
width: 50px;
|
|
padding-top: 5px;
|
|
}
|
|
|
|
.bigiconlegend {
|
|
flex: 1;
|
|
font-size: 16px;
|
|
width: 100%;
|
|
padding-bottom: 5px;
|
|
}
|
|
|
|
.bigiconandlegend {
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
flex-flow: column;
|
|
margin: 0px;
|
|
}
|
|
}
|
|
</style>
|