worldcone/cherrypick
2
0
Fork 0
Code Issues Pull requests Packages Projects Releases Wiki Activity

fix style

Browse source
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 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;