From d27bc73b502e26d3f2ef36dfce94a294ba89d4f1 Mon Sep 17 00:00:00 2001
From: Beluzsar Peter <beluzsarp@gmail.com>
Date: Fri, 25 Sep 2026 23:05:17 +0200
Subject: [PATCH] add dockerfile, fix frontend

---
 Dockerfile                       | 11 ++++++
 resources/js/components/Wish.vue | 57 ++++++++++++++++++++------------
 2 files changed, 46 insertions(+), 22 deletions(-)
 create mode 100644 Dockerfile

diff --git a/Dockerfile b/Dockerfile
new file mode 100644
index 0000000..ded9791
--- /dev/null
+++ b/Dockerfile
@@ -0,0 +1,11 @@
+FROM gitea.sc0tt.org/belupeti/laravel-franken:1.0
+
+COPY . /app
+
+WORKDIR /app
+
+RUN curl -sS https://getcomposer.org/installer | php -- --install-dir=/usr/bin --filename=composer && \
+    composer install --no-ansi --no-dev --no-interaction --no-plugins --no-progress --optimize-autoloader && \
+    npm install && \
+    npm run build && \
+    rm -rf node_modules
\ No newline at end of file
diff --git a/resources/js/components/Wish.vue b/resources/js/components/Wish.vue
index bdac771..737043b 100644
--- a/resources/js/components/Wish.vue
+++ b/resources/js/components/Wish.vue
@@ -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;