diff --git a/src/stylesheets/bootstrap/bootstrap/_forms.scss b/src/stylesheets/bootstrap/bootstrap/_forms.scss index 2dad6638c..b16ca2166 100644 --- a/src/stylesheets/bootstrap/bootstrap/_forms.scss +++ b/src/stylesheets/bootstrap/bootstrap/_forms.scss @@ -247,7 +247,8 @@ input[type="search"] { .radio + .radio, .checkbox + .checkbox { - margin-top: -5px; // Move up sibling radios or checkboxes for tighter spacing + //margin-top: -5px; // Move up sibling radios or checkboxes for tighter spacing + margin: 0; } // Radios and checkboxes on same line diff --git a/src/stylesheets/vortex/dialogs.scss b/src/stylesheets/vortex/dialogs.scss index ca4a01273..6ac77a920 100644 --- a/src/stylesheets/vortex/dialogs.scss +++ b/src/stylesheets/vortex/dialogs.scss @@ -1,176 +1,177 @@ -.modal-dialog { - max-width: 80%; - min-width: 400px; -} - -.modal-title { - display: flex; - align-items: center; - - - svg { - width: 2em; - height: 2em; - margin-right: 1em; - } - - .icon-info, - .icon-question { - color: $brand-info; - } - - .icon-error { - color: $brand-danger; - } -} - -.common-dialog-regular { - display: flex !important; - justify-content: center; - - .modal-dialog { - width: 60em; - display: flex; - margin: 0; - align-items: center; - height: 100; - } -} - -.common-dialog-wide { - .modal-dialog { - height: 80%; - width: auto; - } - - .modal-content { - height: 100%; - width: 100%; - display: flex; - flex-direction: column; - } - - .modal-body { - flex: 1 0%; - display: flex; - padding: $half-gutter $gutter-width; - - div { - display: flex; - flex-direction: column; - } - - webview { - height: 100%; - background-color: white; - } - } -} - -.dialog-container { - width: 100%; - min-height: 300px; - max-height: 60vh; - overflow-y: auto; - display: flex; - flex-direction: column; - - // the flex sizing may not be optimal - textarea { - width: 100%; - resize: none; - //border: none; - //padding: 4px 8px; - border-radius: $border-radius-base; - flex: 1 1 0%; - - //resize: none; - padding: 5px 8px; - background-color: $brand-bg; - border: 1px solid $border-color; - } - - >div { - flex: 1 1 90%; - } - - >.dialog-content-bbcode { - - table { - width: 100%; - } - - ul { - margin-bottom: 0; - } - - .bbcode-spoiler-tag { - - - .bbcode-spoiler-content { - padding: 8px; - border: 1px solid $border-color; - border-radius: $border-radius-base; - background: $brand-bg; - margin-top: 4px; - } - } - } - - .dialog-content-input { - display: flex; - flex-direction: column; - - >div { - flex: 1 1 0; - display: flex; - flex-direction: column; - } - } - - >.dialog-content-text { - flex: initial; - margin-bottom: $half-gutter; - white-space: pre-wrap; - } - - - - >.dialog-content-html { - white-space: pre-wrap; - } - - >.dialog-content-choices { - flex: 1 1 0; - display: flex; - flex-direction: column; - justify-content: flex-end; - - >div { - overflow: auto; - display: flex; - flex-direction: column; - gap: 8px; - - .radio label, - .checkbox label { - display: flex; - align-items: center; - - input[type=radio], - input[type=checkbox] { - margin: 0 0 0 -20px; - } - - } - } - - .choice-maintext { - font-weight: bold; - } - - .choice-subtext { - margin-bottom: 1em; - } - } +.modal-dialog { + max-width: 80%; + min-width: 400px; +} + +.modal-title { + display: flex; + align-items: center; + + + svg { + width: 2em; + height: 2em; + margin-right: 1em; + } + + .icon-info, + .icon-question { + color: $brand-info; + } + + .icon-error { + color: $brand-danger; + } +} + +.common-dialog-regular { + display: flex !important; + justify-content: center; + + .modal-dialog { + width: 60em; + display: flex; + margin: 0; + align-items: center; + height: 100; + } +} + +.common-dialog-wide { + .modal-dialog { + height: 80%; + width: auto; + } + + .modal-content { + height: 100%; + width: 100%; + display: flex; + flex-direction: column; + } + + .modal-body { + flex: 1 0%; + display: flex; + padding: $half-gutter $gutter-width; + + div { + display: flex; + flex-direction: column; + } + + webview { + height: 100%; + background-color: white; + } + } +} + +.dialog-container { + width: 100%; + min-height: 300px; + max-height: 60vh; + overflow-y: auto; + display: flex; + flex-direction: column; + gap: 8px; + + // the flex sizing may not be optimal + textarea { + width: 100%; + resize: none; + //border: none; + //padding: 4px 8px; + border-radius: $border-radius-base; + flex: 1 1 0%; + + //resize: none; + padding: 5px 8px; + background-color: $brand-bg; + border: 1px solid $border-color; + } + + >div { + flex: 1 1 90%; + } + + >.dialog-content-bbcode { + + table { + width: 100%; + } + + ul { + margin-bottom: 0; + } + + .bbcode-spoiler-tag { + + + .bbcode-spoiler-content { + padding: 8px; + border: 1px solid $border-color; + border-radius: $border-radius-base; + background: $brand-bg; + margin-top: 4px; + } + } + } + + .dialog-content-input { + display: flex; + flex-direction: column; + + >div { + flex: 1 1 0; + display: flex; + flex-direction: column; + } + } + + >.dialog-content-text { + flex: initial; + margin-bottom: $half-gutter; + white-space: pre-wrap; + } + + + + >.dialog-content-html { + white-space: pre-wrap; + } + + >.dialog-content-choices { + flex: 1 1 0; + display: flex; + flex-direction: column; + //justify-content: flex-end; + + >div { + overflow: auto; + display: flex; + flex-direction: column; + gap: 8px; + + .radio label, + .checkbox label { + display: flex; + //align-items: center; + + input[type=radio], + input[type=checkbox] { + margin: 2px 0 0 -20px; // 2px top border accounts for natural margins of text above when compared to the radio input + } + + } + } + + .choice-maintext { + font-weight: bold; + } + + /*.choice-subtext { + //margin-bottom: 1em; + }*/ + } } \ No newline at end of file diff --git a/src/views/Dialog.tsx b/src/views/Dialog.tsx index b5dee1462..f52642ee2 100644 --- a/src/views/Dialog.tsx +++ b/src/views/Dialog.tsx @@ -454,12 +454,18 @@ class Dialog extends ComponentEx { private renderRadiobutton = (checkbox: ICheckbox) => { const { t } = this.props; - const content = (checkbox.subText !== undefined) - ? <> + const content = +
{ + checkbox.subText !== undefined + ? ( + <>
{t(checkbox.text)}
{t(checkbox.subText)}
- - : <>{t(checkbox.text)}; + ) + : + (
{t(checkbox.text)}
) + } +
return (