Style fix for radios when they include a 'subtext' property (#15175)

Nexus-Mods · Jan 22, 2024 · 342f78d · 342f78d
1 parent 7974ff4
commit 342f78d
Show file tree

Hide file tree

Showing 3 changed files with 188 additions and 180 deletions.
diff --git 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
@@ -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;
+    }*/
+  }
 }
diff --git a/src/views/Dialog.tsx b/src/views/Dialog.tsx
@@ -454,12 +454,18 @@ class Dialog extends ComponentEx<IProps, IComponentState> {
 
   private renderRadiobutton = (checkbox: ICheckbox) => {
     const { t } = this.props;
-    const content = (checkbox.subText !== undefined)
-      ? <>
+    const content = 
+    <div>{
+      checkbox.subText !== undefined
+      ? (
+      <>
         <div className='choice-maintext'>{t(checkbox.text)}</div>
         <div className='choice-subtext'>{t(checkbox.subText)}</div>
-      </>
-      : <>{t(checkbox.text)}</>;
+      </> )           
+      : 
+      (<div className='choice-text'>{t(checkbox.text)}</div>)
+      }
+    </div>
 
     return (
       <Radio