This commit is contained in:
+11
@@ -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
|
||||||
@@ -40,21 +40,27 @@ function openWish() {
|
|||||||
</template>
|
</template>
|
||||||
<template v-else>
|
<template v-else>
|
||||||
<div class="large-container" @mouseover="hover = true" @mouseleave="hover = false" @click="$emit('selectedWish', index)">
|
<div class="large-container" @mouseover="hover = true" @mouseleave="hover = false" @click="$emit('selectedWish', index)">
|
||||||
<div class="backdrop" v-if="hover || selected">
|
<div style="position: relative; width: 100%; height: 100%;">
|
||||||
<img :src="'/skonk/large/backdrop_filter.png'" :style="'width: 100%; height: 100%; filter: hue-rotate(' + wish.color + 'deg) saturate(0.8)'">
|
|
||||||
</div>
|
<div class="backdrop" >
|
||||||
<img :src="'/skonk/large/' + wish.type + '.png'" class="large large-icon">
|
<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 class="large-text">
|
|
||||||
<div class="large-text-title" :style="'color: hsl(' + wish.color + ', 20%, 50%);'">
|
|
||||||
Lorem Ipsum
|
|
||||||
</div>
|
</div>
|
||||||
<div>
|
<template v-if="hover || selected">
|
||||||
{{ wish.title }}
|
<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>
|
|
||||||
<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>
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
@@ -64,35 +70,42 @@ function openWish() {
|
|||||||
<style scoped>
|
<style scoped>
|
||||||
.backdrop {
|
.backdrop {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
width: 100%;
|
z-index: 0;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
|
width: 100%;
|
||||||
filter: opacity(20%);
|
filter: opacity(20%);
|
||||||
z-index: -1;
|
}
|
||||||
|
.z-index-normal {
|
||||||
|
z-index: 10;
|
||||||
}
|
}
|
||||||
img.cursor{
|
img.cursor{
|
||||||
|
position: absolute;
|
||||||
width: 40px;
|
width: 40px;
|
||||||
height: 40px;
|
height: 40px;
|
||||||
}
|
}
|
||||||
.opposite-corner {
|
.opposite-corner {
|
||||||
rotate: 180deg;
|
rotate: 180deg;
|
||||||
right: 0;
|
right: 10px;
|
||||||
bottom: 0;
|
bottom: 10px;
|
||||||
}
|
}
|
||||||
.cursor {
|
.cursor {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
z-index: 10;
|
|
||||||
}
|
}
|
||||||
.large-container {
|
.large-flex {
|
||||||
display: flex;
|
display: flex;
|
||||||
height: 100px;
|
|
||||||
flex-direction: row;
|
flex-direction: row;
|
||||||
justify-content: left;
|
justify-content: left;
|
||||||
|
}
|
||||||
|
.large-container {
|
||||||
|
display: absolute;
|
||||||
|
height: 100px;
|
||||||
margin: 10px;
|
margin: 10px;
|
||||||
}
|
}
|
||||||
.large-container:hover {
|
.large-absolute {
|
||||||
scale: 1.01;
|
display: absolute;
|
||||||
|
height: 100px;;
|
||||||
}
|
}
|
||||||
.large-text-title {
|
.large-text-title {
|
||||||
text-transform: uppercase;
|
text-transform: uppercase;
|
||||||
|
|||||||
Reference in New Issue
Block a user