extern/2FAuth
1
0
Fork 0
mirror of https://github.com/Bubka/2FAuth.git synced 2025-06-24 05:51:48 +02:00
Code Issues Packages Projects Releases Wiki Activity

Fix hidden content in Modal on small screen

Browse Source
This commit is contained in:
Bubka 2024-11-07 16:12:07 +01:00
parent fd42ad8b3e
commit 63a700da44
2 changed files with 17 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
resources/js/assets/app.scss vendored
View File

@ -109,6 +109,13 @@ a:hover {
z-index: 2000; z-index: 2000;
} }
@media screen and (max-height: 700px) {
.modal-with-footer {
margin-bottom: 9rem;
max-height: none !important;
}
}
.otp:focus-visible { .otp:focus-visible {
outline-offset: 3px; outline-offset: 3px;
outline: 2px dotted $dark; outline: 2px dotted $dark;

11
resources/js/layouts/Modal.vue
View File

@ -7,6 +7,10 @@
type: Boolean, type: Boolean,
default: true default: true
}, },
isFullHeight: {
type: Boolean,
default: false
}
}) })
const emit = defineEmits(['update:modelValue']) const emit = defineEmits(['update:modelValue'])
@ -29,7 +33,12 @@
<template> <template>
<div class="modal modal-otp" v-bind:class="{ 'is-active': isActive }"> <div class="modal modal-otp" v-bind:class="{ 'is-active': isActive }">
<div class="modal-background" @click.stop="closeModal"></div> <div class="modal-background" @click.stop="closeModal"></div>
<div class="modal-content"> <div v-if="isFullHeight" class="modal-content modal-with-footer">
<div class="modal-slot p-4 has-text-centered">
<slot></slot>
</div>
</div>
<div v-else class="modal-content modal-with-footer">
<section class="section"> <section class="section">
<div class="columns is-centered"> <div class="columns is-centered">
<div class="column is-three-quarters"> <div class="column is-three-quarters">