refactor: migrate Figure component
This commit is contained in:
Sebin Nyshkim
parent
b37e067efd
commit
81941a9e45
2 changed files with 193 additions and 187 deletions
|
|
@ -1,187 +0,0 @@
|
||||||
<template>
|
|
||||||
<figure class="figure">
|
|
||||||
<div
|
|
||||||
class="figure__border"
|
|
||||||
:class="{ 'figure__border--polaroid': polaroidBorder }"
|
|
||||||
>
|
|
||||||
<template v-if="!nsfw || $root.nsfw">
|
|
||||||
<div
|
|
||||||
class="figure__image"
|
|
||||||
:class="{ 'figure__image--dropshadow': dropshadow }"
|
|
||||||
>
|
|
||||||
<slot name="img"></slot>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<template v-else>
|
|
||||||
<div class="figure__cencor">
|
|
||||||
<div class="hazard-tape"></div>
|
|
||||||
<div class="hazard-tape"></div>
|
|
||||||
<div class="hazard-tape"></div>
|
|
||||||
<div class="hazard-tape"></div>
|
|
||||||
|
|
||||||
<div class="figure__reveal">
|
|
||||||
<p>🔥 Here be spicy dragons 🌶</p>
|
|
||||||
|
|
||||||
<nsfw-switch
|
|
||||||
:id="id"
|
|
||||||
v-model="$root.nsfw"
|
|
||||||
@change="$root.showWarning()"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<figcaption class="figure__meta">
|
|
||||||
<template v-if="!nsfw || $root.nsfw">
|
|
||||||
<div class="caption"><slot name="caption"></slot></div>
|
|
||||||
<div class="copyright">© <slot name="copyright"></slot></div>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<template v-else>
|
|
||||||
<p>😳 2 hot 4 u 🍆</p>
|
|
||||||
</template>
|
|
||||||
</figcaption>
|
|
||||||
</div>
|
|
||||||
</figure>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script>
|
|
||||||
import NsfwSwitch from "@/components/NsfwSwitch.vue";
|
|
||||||
|
|
||||||
export default {
|
|
||||||
props: {
|
|
||||||
polaroidBorder: Boolean,
|
|
||||||
dropshadow: Boolean,
|
|
||||||
nsfw: Boolean,
|
|
||||||
id: String,
|
|
||||||
},
|
|
||||||
components: {
|
|
||||||
NsfwSwitch,
|
|
||||||
},
|
|
||||||
};
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<style lang="scss">
|
|
||||||
@import "@/scss/_variables.scss";
|
|
||||||
@import "@/scss/_mixins.scss";
|
|
||||||
|
|
||||||
.figure {
|
|
||||||
display: flex;
|
|
||||||
flex-flow: row nowrap;
|
|
||||||
justify-content: center;
|
|
||||||
|
|
||||||
margin: 1em auto;
|
|
||||||
text-align: center;
|
|
||||||
|
|
||||||
&__border {
|
|
||||||
display: flex;
|
|
||||||
flex-flow: column nowrap;
|
|
||||||
justify-content: center;
|
|
||||||
|
|
||||||
margin: auto;
|
|
||||||
|
|
||||||
&--polaroid {
|
|
||||||
margin: 1em auto;
|
|
||||||
padding: 1em;
|
|
||||||
|
|
||||||
box-shadow: inset 0 0 1em rgba(#000, 0.7), 0 0 1em rgba(#000, 0.7);
|
|
||||||
border-radius: 0.325em;
|
|
||||||
|
|
||||||
background-color: #fff;
|
|
||||||
|
|
||||||
.figure__meta {
|
|
||||||
margin: 0.5em 0;
|
|
||||||
font-family: "Permanent Marker", fantasy;
|
|
||||||
color: $copy-color-darkgrey;
|
|
||||||
|
|
||||||
* {
|
|
||||||
color: inherit;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
&__image {
|
|
||||||
flex: 1 0 auto;
|
|
||||||
|
|
||||||
img {
|
|
||||||
max-width: 100%;
|
|
||||||
max-height: 35em;
|
|
||||||
}
|
|
||||||
|
|
||||||
&--dropshadow {
|
|
||||||
filter: drop-shadow(0.5em 0.25em 0.375em #000);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
&__meta {
|
|
||||||
flex: 0 0 auto;
|
|
||||||
}
|
|
||||||
|
|
||||||
&__cencor {
|
|
||||||
flex: 1 0 auto;
|
|
||||||
|
|
||||||
display: flex;
|
|
||||||
flex-flow: row wrap;
|
|
||||||
justify-content: center;
|
|
||||||
align-items: center;
|
|
||||||
|
|
||||||
padding: 0;
|
|
||||||
width: 50vw;
|
|
||||||
height: 35vh;
|
|
||||||
max-width: 35em;
|
|
||||||
max-height: 70em;
|
|
||||||
position: relative;
|
|
||||||
|
|
||||||
background-color: $bg-color-lighter;
|
|
||||||
overflow: hidden;
|
|
||||||
|
|
||||||
@include mq-desktop {
|
|
||||||
width: 20em;
|
|
||||||
height: 20em;
|
|
||||||
}
|
|
||||||
|
|
||||||
.figure__border & .nsfw-switch {
|
|
||||||
position: relative;
|
|
||||||
padding: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.hazard-tape {
|
|
||||||
position: absolute;
|
|
||||||
left: -1em;
|
|
||||||
right: -1em;
|
|
||||||
top: 0;
|
|
||||||
transform: rotate(0deg);
|
|
||||||
height: 1em;
|
|
||||||
background-image: repeating-linear-gradient(
|
|
||||||
-55deg,
|
|
||||||
#000,
|
|
||||||
#000 0.75em,
|
|
||||||
#ffb101 0.75em,
|
|
||||||
#ffb101 1.5em
|
|
||||||
);
|
|
||||||
|
|
||||||
&:nth-child(1) {
|
|
||||||
top: 10%;
|
|
||||||
transform: rotate(5deg);
|
|
||||||
}
|
|
||||||
|
|
||||||
&:nth-child(2) {
|
|
||||||
top: 15%;
|
|
||||||
transform: rotate(-10deg);
|
|
||||||
}
|
|
||||||
|
|
||||||
&:nth-child(3) {
|
|
||||||
top: 75%;
|
|
||||||
transform: rotate(-15deg);
|
|
||||||
}
|
|
||||||
|
|
||||||
&:nth-child(4) {
|
|
||||||
top: 85%;
|
|
||||||
transform: translate(-5em, -2em) rotate(40deg);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
193
src/components/RefFigure.vue
Normal file
193
src/components/RefFigure.vue
Normal file
|
|
@ -0,0 +1,193 @@
|
||||||
|
<script setup lang="ts">
|
||||||
|
import { inject } from "vue";
|
||||||
|
import { nsfwKey, showModalKey } from "@/keys";
|
||||||
|
import RefToggle from "@/components/RefToggle.vue";
|
||||||
|
|
||||||
|
interface Props {
|
||||||
|
polaroidBorder?: boolean;
|
||||||
|
dropshadow?: boolean;
|
||||||
|
nsfw?: boolean;
|
||||||
|
id: string;
|
||||||
|
}
|
||||||
|
|
||||||
|
const isNsfw = inject<boolean>(nsfwKey, false);
|
||||||
|
const showModal = inject<Function>(showModalKey, Function);
|
||||||
|
|
||||||
|
defineProps<Props>();
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<template>
|
||||||
|
<figure class="figure">
|
||||||
|
<div
|
||||||
|
class="figure__border"
|
||||||
|
:class="{ 'figure__border--polaroid': polaroidBorder }"
|
||||||
|
>
|
||||||
|
<template v-if="!nsfw || isNsfw">
|
||||||
|
<div
|
||||||
|
class="figure__image"
|
||||||
|
:class="{ 'figure__image--dropshadow': dropshadow }"
|
||||||
|
>
|
||||||
|
<slot name="img"></slot>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<template v-else>
|
||||||
|
<div class="figure__cencor">
|
||||||
|
<div class="figure__tape"></div>
|
||||||
|
<div class="figure__tape"></div>
|
||||||
|
<div class="figure__tape"></div>
|
||||||
|
<div class="figure__tape"></div>
|
||||||
|
|
||||||
|
<div class="figure__reveal">
|
||||||
|
<p>🔥 Here be spicy dragons 🌶</p>
|
||||||
|
|
||||||
|
<RefToggle
|
||||||
|
class="figure__toggle"
|
||||||
|
:id="id"
|
||||||
|
v-model="isNsfw"
|
||||||
|
@click.prevent="showModal()"
|
||||||
|
>
|
||||||
|
<template #off>😇</template>
|
||||||
|
<template #on>😈</template>
|
||||||
|
</RefToggle>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<figcaption class="figure__meta">
|
||||||
|
<template v-if="!nsfw || isNsfw">
|
||||||
|
<div class="caption">
|
||||||
|
<slot name="caption"></slot>
|
||||||
|
</div>
|
||||||
|
<div class="copyright">© <slot name="copyright"></slot></div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<template v-else>
|
||||||
|
<p>😳 2 hot 4 u 🍆</p>
|
||||||
|
</template>
|
||||||
|
</figcaption>
|
||||||
|
</div>
|
||||||
|
</figure>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<style lang="scss">
|
||||||
|
.figure {
|
||||||
|
display: flex;
|
||||||
|
flex-flow: row nowrap;
|
||||||
|
justify-content: center;
|
||||||
|
|
||||||
|
text-align: center;
|
||||||
|
|
||||||
|
margin: 1em auto;
|
||||||
|
padding: 0 var(--container-spacing-right-safe) 0
|
||||||
|
var(--container-spacing-left-safe);
|
||||||
|
|
||||||
|
&__border {
|
||||||
|
display: flex;
|
||||||
|
flex-flow: column nowrap;
|
||||||
|
justify-content: center;
|
||||||
|
|
||||||
|
margin: auto;
|
||||||
|
|
||||||
|
&--polaroid {
|
||||||
|
margin: 1em auto;
|
||||||
|
padding: 1em;
|
||||||
|
|
||||||
|
box-shadow: inset 0 0 1em rgba(0, 0, 0, 0.7), 0 0 1em rgba(0, 0, 0, 0.7);
|
||||||
|
border-radius: 0.325em;
|
||||||
|
|
||||||
|
background-color: #fff;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&__border--polaroid &__meta {
|
||||||
|
font-family: "Permanent Marker", fantasy;
|
||||||
|
color: var(--color-figure-polaroid-text);
|
||||||
|
|
||||||
|
max-width: 35rem;
|
||||||
|
|
||||||
|
margin: 0.5rem auto;
|
||||||
|
|
||||||
|
* {
|
||||||
|
color: inherit;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&__image {
|
||||||
|
flex: 1 0 auto;
|
||||||
|
|
||||||
|
&--dropshadow {
|
||||||
|
filter: drop-shadow(0.5rem 0.25rem 0.375rem #000);
|
||||||
|
}
|
||||||
|
|
||||||
|
img {
|
||||||
|
max-width: 100%;
|
||||||
|
max-height: 35rem;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&__meta {
|
||||||
|
flex: 0 0 auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
&__cencor {
|
||||||
|
flex: 1 0 auto;
|
||||||
|
|
||||||
|
display: flex;
|
||||||
|
flex-flow: row wrap;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
|
||||||
|
padding: 0;
|
||||||
|
width: var(--figure-cencor-width);
|
||||||
|
height: var(--figure-cencor-height);
|
||||||
|
max-width: 35rem;
|
||||||
|
max-height: 70rem;
|
||||||
|
position: relative;
|
||||||
|
|
||||||
|
background-color: var(--figure-cencor-background-color);
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
&__toggle {
|
||||||
|
position: relative;
|
||||||
|
padding: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
&__tape {
|
||||||
|
position: absolute;
|
||||||
|
left: -1rem;
|
||||||
|
right: -1rem;
|
||||||
|
top: 0;
|
||||||
|
transform: rotate(0deg);
|
||||||
|
height: 1rem;
|
||||||
|
background-image: repeating-linear-gradient(
|
||||||
|
-55deg,
|
||||||
|
#000,
|
||||||
|
#000 0.75rem,
|
||||||
|
#ffb101 0.75rem,
|
||||||
|
#ffb101 1.5rem
|
||||||
|
);
|
||||||
|
|
||||||
|
&:nth-child(1) {
|
||||||
|
top: 10%;
|
||||||
|
transform: rotate(5deg);
|
||||||
|
}
|
||||||
|
|
||||||
|
&:nth-child(2) {
|
||||||
|
top: 15%;
|
||||||
|
transform: rotate(-10deg);
|
||||||
|
}
|
||||||
|
|
||||||
|
&:nth-child(3) {
|
||||||
|
top: 75%;
|
||||||
|
transform: rotate(-15deg);
|
||||||
|
}
|
||||||
|
|
||||||
|
&:nth-child(4) {
|
||||||
|
top: 85%;
|
||||||
|
transform: translate(-5rem, -2rem) rotate(40deg);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
Loading…
Add table
Add a link
Reference in a new issue