Madeorsk/rudeshark.net
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

wip

Browse Source
This commit is contained in:
syuilo 2020-11-28 12:19:57 +09:00
parent ab50d5ef20
commit fede4eeb89
2 changed files with 10 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
src/client/components/ui/modal.vue
View File

@ -1,5 +1,5 @@
<template> <template>
<div class="mk-modal" v-hotkey.global="keymap" :style="{ pointerEvents: showing ? 'auto' : 'none' }"> <div class="mk-modal" v-hotkey.global="keymap" :style="{ pointerEvents: showing ? 'auto' : 'none', '--transformOrigin': transformOrigin }">
<transition :name="$store.state.device.animation ? 'modal-bg' : ''" appear> <transition :name="$store.state.device.animation ? 'modal-bg' : ''" appear>
<div class="bg _modalBg" v-if="showing" @click="onBgClick"></div> <div class="bg _modalBg" v-if="showing" @click="onBgClick"></div>
</transition> </transition>
@ -153,7 +153,7 @@ export default defineComponent({
<style> <style>
.modal-popup-content-enter-active, .modal-popup-content-leave-active, .modal-popup-content-enter-active, .modal-popup-content-leave-active,
.modal-content-enter-from, .modal-content-leave-to { .modal-content-enter-from, .modal-content-leave-to {
transform-origin: v-bind(transformOrigin); transform-origin: var(--transformOrigin);
} }
</style> </style>

16
src/client/ui/_common_/header.vue
View File

@ -1,5 +1,5 @@
<template> <template>
<div class="fdidabkb"> <div class="fdidabkb" :style="`--height:${height};`">
<transition :name="$store.state.device.animation ? 'header' : ''" mode="out-in" appear> <transition :name="$store.state.device.animation ? 'header' : ''" mode="out-in" appear>
<button class="_button back" v-if="withBack && canBack" @click.stop="back()"><Fa :icon="faChevronLeft"/></button> <button class="_button back" v-if="withBack && canBack" @click.stop="back()"><Fa :icon="faChevronLeft"/></button>
</transition> </transition>
@ -79,24 +79,24 @@ export default defineComponent({
text-align: center; text-align: center;
> .back { > .back {
height: v-bind(height); height: var(--height);
width: v-bind(height); width: var(--height);
} }
> .action { > .action {
height: v-bind(height); height: var(--height);
width: v-bind(height); width: var(--height);
} }
> .titleContainer { > .titleContainer {
width: calc(100% - (v-bind(height) * 2)); width: calc(100% - (var(--height) * 2));
> .title { > .title {
height: v-bind(height); height: var(--height);
> .avatar { > .avatar {
$size: 32px; $size: 32px;
margin: calc((v-bind(height) - #{$size}) / 2) 8px calc((v-bind(height) - #{$size}) / 2) 0; margin: calc((var(--height) - #{$size}) / 2) 8px calc((var(--height) - #{$size}) / 2) 0;
pointer-events: none; pointer-events: none;
} }
} }