Belupeti/wishboard
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

add dockerfile, fix frontend
Build / Build-image (push) Failing after 29s
Details

Browse Source
This commit is contained in:
Belupeti
2026-09-25 23:05:17 +02:00
parent e265d84cfc
commit d27bc73b50
2 changed files with 46 additions and 22 deletions
Download Patch File Download Diff File Expand all files Collapse all files
resources/js/components/Wish.vue
+35 -22
View File
@@ -40,21 +40,27 @@ function openWish() {
</template>
<template v-else>
<div class="large-container" @mouseover="hover = true" @mouseleave="hover = false" @click="$emit('selectedWish', index)">
<div class="backdrop" v-if="hover || selected">
<img :src="'/skonk/large/backdrop_filter.png'" :style="'width: 100%; height: 100%; filter: hue-rotate(' + wish.color + 'deg) saturate(0.8)'">
</div>
<img :src="'/skonk/large/' + wish.type + '.png'" class="large large-icon">
<div class="large-text">
<div class="large-text-title" :style="'color: hsl(' + wish.color + ', 20%, 50%);'">
Lorem Ipsum
<div style="position: relative; width: 100%; height: 100%;">
<div class="backdrop" >
<img v-if="hover || selected" :src="'/skonk/large/backdrop_filter.png'" :style="'height: 100%; width: 100%; filter: hue-rotate(' + wish.color + 'deg) saturate(0.8)'">
</div>
<div>
{{ wish.title }}
<template v-if="hover || selected">
<img :src="'/skonk/cursor_corner.png'" class="cursor">
<img :src="'/skonk/cursor_corner.png'" class="opposite-corner cursor ">
</template>
<div class="large-flex">
<img :src="'/skonk/large/' + wish.type + '.png'" class="large large-icon z-index-normal">
<div class="large-text">
<div class="large-text-title z-index-normal" :style="'color: hsl(' + wish.color + ', 20%, 50%);'">
Lorem Ipsum
</div>
<div class="z-index-normal">
{{ wish.title }}
</div>
</div>
</div>
</div>
<div class="cursor" v-if="hover || selected">
<img :src="'/skonk/cursor_corner.png'" class="cursor">
<img :src="'/skonk/cursor_corner.png'" class="cursor opposite-corner">
</div>
</div>
@@ -64,35 +70,42 @@ function openWish() {
<style scoped>
.backdrop {
position: absolute;
width: 100%;
z-index: 0;
height: 100%;
width: 100%;
filter: opacity(20%);
z-index: -1;
}
.z-index-normal {
z-index: 10;
}
img.cursor{
position: absolute;
width: 40px;
height: 40px;
}
.opposite-corner {
rotate: 180deg;
right: 0;
bottom: 0;
right: 10px;
bottom: 10px;
}
.cursor {
position: absolute;
width: 100%;
height: 100%;
z-index: 10;
}
.large-container {
.large-flex {
display: flex;
height: 100px;
flex-direction: row;
justify-content: left;
}
.large-container {
display: absolute;
height: 100px;
margin: 10px;
}
.large-container:hover {
scale: 1.01;
.large-absolute {
display: absolute;
height: 100px;;
}
.large-text-title {
text-transform: uppercase;