heartles
/
egirlskey
1
0
Fork 0
Code Issues 1 Pull Requests Packages Projects Releases Wiki Activity

fix style

This commit is contained in:
syuilo 2023-01-02 09:52:10 +09:00
parent 9f3b93929d
commit 1df23a839a
1 changed files with 10 additions and 13 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

23
packages/frontend/src/components/MkModal.vue
View File

@ -63,17 +63,17 @@ let transformOrigin = $ref('center');
let showing = $ref(true); let showing = $ref(true);
let content = $ref<HTMLElement>(); let content = $ref<HTMLElement>();
const zIndex = os.claimZIndex(props.zPriority); const zIndex = os.claimZIndex(props.zPriority);
let type = $ref<ModalTypes>(); const type = $computed<ModalTypes>(() => {
console.log(props.preferType, isTouchUsing, deviceKind); if (props.preferType === 'auto') {
if (props.preferType === 'auto') { if (!defaultStore.state.disableDrawer && isTouchUsing && deviceKind === 'smartphone') {
if (!defaultStore.state.disableDrawer && isTouchUsing && deviceKind === 'smartphone') { return 'drawer';
type = 'drawer'; } else {
return props.src != null ? 'popup' : 'dialog';
}
} else { } 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 transitionName = $ref(defaultStore.state.animation ? (type === 'drawer') ? 'modal-drawer' : (type === 'popup') ? 'modal-popup' : 'modal' : '');
let transitionDuration = $ref(defaultStore.state.animation ? 200 : 0); let transitionDuration = $ref(defaultStore.state.animation ? 200 : 0);
@ -369,10 +369,6 @@ defineExpose({
} }
} }
> .content {
container-type: inline-size;
}
&.dialog { &.dialog {
> .content { > .content {
position: fixed; 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%); 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; overflow: auto;
display: flex; display: flex;
container-type: inline-size;
@media (max-width: 500px) { @media (max-width: 500px) {
padding: 16px; padding: 16px;