Improve responsiveness of modal

This commit is contained in:
Jos de Jong 2020-09-16 12:15:31 +02:00
parent 1bf3f7e1c2
commit 34534bba0c
2 changed files with 20 additions and 5 deletions

View File

@ -1,13 +1,14 @@
@import '../../styles.scss'; @import '../../styles.scss';
.jsoneditor-modal { .jsoneditor-modal {
// styling for the select box, // styling for the select box, svelte-select
// see docs: https://github.com/rob-balfre/svelte-select#styling // see docs: https://github.com/rob-balfre/svelte-select#styling
--height: 36px; --height: 36px;
--multiItemHeight: 28px; --multiItemHeight: 28px;
--multiItemMargin: 2px; --multiItemMargin: 2px;
--multiItemPadding: 2px 8px; --multiItemPadding: 2px 8px;
--multiClearTop: 6px; --multiClearTop: 5px;
--multiItemBorderRadius: 6px;
--clearSelectTop: 2px; --clearSelectTop: 2px;
--clearSelectBottom: 2px; --clearSelectBottom: 2px;
--itemIsActiveBG: #3883fa; // theme-color --itemIsActiveBG: #3883fa; // theme-color
@ -18,6 +19,7 @@
.contents { .contents {
padding: 20px; padding: 20px;
overflow: hidden;
.actions { .actions {
display: flex; display: flex;
@ -31,6 +33,19 @@
// custom styling for the modal. // custom styling for the modal.
// FIXME: not neat to override global styles! // FIXME: not neat to override global styles!
:global(.bg .window-wrap) { :global(.bg) {
margin-top: 8rem; width: 100%;
height: 100%;
}
:global(.bg .window-wrap) {
margin: 0;
}
:global(.bg .window) {
max-width: 80%;
margin: 4rem auto 2rem auto;
overflow: auto;
}
:global(.bg .content) {
max-height: calc(100vh - 6rem);
} }

View File

@ -69,7 +69,7 @@
queryOptions = newQueryOptions queryOptions = newQueryOptions
const query = createQuery(json, queryOptions) const query = createQuery(json, queryOptions)
console.log('query updated', query, queryOptions) // console.log('query updated', query, queryOptions)
onQuery(query) onQuery(query)
} }