From 1df23a839a24321d91193fa8a89c0a3bd077109a Mon Sep 17 00:00:00 2001
From: syuilo <Syuilotan@yahoo.co.jp>
Date: Mon, 2 Jan 2023 09:52:10 +0900
Subject: [PATCH] fix style
---
packages/frontend/src/components/MkModal.vue | 23 +++++++++-----------
1 file changed, 10 insertions(+), 13 deletions(-)
diff --git a/packages/frontend/src/components/MkModal.vue b/packages/frontend/src/components/MkModal.vue
index 871f8d4f62..bd6ac02cc8 100644
--- a/packages/frontend/src/components/MkModal.vue
+++ b/packages/frontend/src/components/MkModal.vue
@@ -63,17 +63,17 @@ let transformOrigin = $ref('center');
let showing = $ref(true);
let content = $ref<HTMLElement>();
const zIndex = os.claimZIndex(props.zPriority);
-let type = $ref<ModalTypes>();
-console.log(props.preferType, isTouchUsing, deviceKind);
-if (props.preferType === 'auto') {
- if (!defaultStore.state.disableDrawer && isTouchUsing && deviceKind === 'smartphone') {
- type = 'drawer';
+const type = $computed<ModalTypes>(() => {
+ if (props.preferType === 'auto') {
+ if (!defaultStore.state.disableDrawer && isTouchUsing && deviceKind === 'smartphone') {
+ return 'drawer';
+ } else {
+ return props.src != null ? 'popup' : 'dialog';
+ }
} else {
- type = props.src != null ? 'popup' : 'dialog';
+ return props.preferType!;
}
-} else {
- type = props.preferType!;
-}
+});
let transitionName = $ref(defaultStore.state.animation ? (type === 'drawer') ? 'modal-drawer' : (type === 'popup') ? 'modal-popup' : 'modal' : '');
let transitionDuration = $ref(defaultStore.state.animation ? 200 : 0);
@@ -369,10 +369,6 @@ defineExpose({
}
}
- > .content {
- container-type: inline-size;
- }
-
&.dialog {
> .content {
position: fixed;
@@ -387,6 +383,7 @@ defineExpose({
mask-image: linear-gradient(0deg, rgba(0,0,0,0) 0%, rgba(0,0,0,1) 32px, rgba(0,0,0,1) calc(100% - 32px), rgba(0,0,0,0) 100%);
overflow: auto;
display: flex;
+ container-type: inline-size;
@media (max-width: 500px) {
padding: 16px;