github-mirror/BookStack
github-mirror/BookStack
2
0
Fork 0
mirror of https://github.com/BookStackApp/BookStack.git synced 2025-02-24 06:51:54 +08:00
Code Issues Actions Packages Projects Releases Wiki Activity

Lexical: Adjusted modals and content area for mobile sizes
Some checks are pending
test-js / build (push) Waiting to run
Details

Browse Source
This commit is contained in:
Dan Brown 2024-12-15 15:29:00 +00:00
parent 5f07f31c9f
commit 2f119d3033
No known key found for this signature in database
GPG Key ID: 46D9F943C24A2EF9
1 changed files with 32 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

35
resources/sass/_editor.scss
View File

@ -48,6 +48,7 @@ body.editor-is-fullscreen {
.editor-content-wrap { .editor-content-wrap {
position: relative; position: relative;
overflow-y: scroll; overflow-y: scroll;
padding-inline: vars.$s;
flex: 1; flex: 1;
} }
@ -275,6 +276,9 @@ body.editor-is-fullscreen {
border-radius: 4px; border-radius: 4px;
overflow: hidden; overflow: hidden;
box-shadow: 0 0 15px 0 rgba(0, 0, 0, 0.3); box-shadow: 0 0 15px 0 rgba(0, 0, 0, 0.3);
margin: vars.$xs;
max-height: 100%;
overflow-y: auto;
} }
.editor-modal-header { .editor-modal-header {
display: flex; display: flex;
@ -490,19 +494,29 @@ body.editor-is-fullscreen {
/** /**
* Form elements * Form elements
*/ */
$inputWidth: 260px;
.editor-form-field-wrapper { .editor-form-field-wrapper {
margin-bottom: .5rem; margin-bottom: .5rem;
} }
.editor-form-field-input { .editor-form-field-input {
display: block; display: block;
width: 100%; width: $inputWidth;
min-width: 250px; min-width: 100px;
max-width: 100%;
border: 1px solid; border: 1px solid;
@include mixins.lightDark(border-color, #DDD, #000); @include mixins.lightDark(border-color, #DDD, #000);
padding: .5rem; padding: .5rem;
border-radius: 4px; border-radius: 4px;
@include mixins.lightDark(color, #444, #BBB); @include mixins.lightDark(color, #444, #BBB);
} }
@include mixins.smaller-than(vars.$bp-xs) {
.editor-form-field-input {
min-width: 160px;
}
}
textarea.editor-form-field-input { textarea.editor-form-field-input {
font-family: var(--font-code); font-family: var(--font-code);
width: 350px; width: 350px;
@ -575,6 +589,17 @@ textarea.editor-form-field-input {
align-items: stretch; align-items: stretch;
gap: .25rem; gap: .25rem;
} }
@include mixins.smaller-than(vars.$bp-m) {
.editor-form-tab-container {
flex-direction: column;
gap: .5rem;
}
.editor-form-tab-controls {
flex-direction: row;
}
}
.editor-form-tab-control { .editor-form-tab-control {
font-weight: bold; font-weight: bold;
font-size: 14px; font-size: 14px;
@ -601,7 +626,8 @@ textarea.editor-form-field-input {
} }
} }
.editor-form-tab-contents { .editor-form-tab-contents {
width: 360px; width: $inputWidth;
max-width: 100%;
} }
.editor-action-input-container { .editor-action-input-container {
display: flex; display: flex;
@ -612,6 +638,9 @@ textarea.editor-form-field-input {
.editor-button { .editor-button {
margin-bottom: 12px; margin-bottom: 12px;
} }
input {
width: $inputWidth - 40px;
}
} }
// Editor theme styles // Editor theme styles