* Wrapped css into class (#484)

ElectronicBabylonianLiterature · Jun 18, 2024 · 52a3797 · 52a3797
1 parent 7ce07c2
commit 52a3797
Show file tree

Hide file tree

Showing 3 changed files with 100 additions and 89 deletions.
diff --git a/src/chronology/ui/CuneiformConverter/CuneiformConverterForm.sass b/src/chronology/ui/CuneiformConverter/CuneiformConverterForm.sass
@@ -1,17 +1,24 @@
-textarea.form-control
-    font-size: 150%
+.cuneiform-converter-form 
+    textarea.form-control 
+        font-size: 150%
 
-    &.assurbanipal
-        font-family: Assurbanipal, Junicode, serif
+        &.assurbanipal 
+            font-family: Assurbanipal, Junicode, serif;
+
 
-    &.esagil
-        font-family: 'Neo-Babylonian', Junicode, serif
+        &.esagil 
+            font-family: 'Neo-Babylonian', Junicode, serif;
+
 
-    &.santakku
-        font-family: 'Old-Babylonian Cursive', Junicode, serif
+        &.santakku 
+            font-family: 'Old-Babylonian Cursive', Junicode, serif;
+
 
-    &.santakkum
-        font-family: 'Old-Babylonian (Monumental)', Junicode, serif
+        &.santakkum 
+            font-family: 'Old-Babylonian (Monumental)', Junicode, serif;
+
 
-    &.ullikummia
-        font-family: 'Hittite', Junicode, serif
+        &.ullikummia 
+            font-family: 'Hittite', Junicode, serif;
+
+
diff --git a/src/chronology/ui/CuneiformConverter/CuneiformConverterForm.tsx b/src/chronology/ui/CuneiformConverter/CuneiformConverterForm.tsx
@@ -62,7 +62,7 @@ function CuneiformConverterForm({
   }
 
   return (
-    <>
+    <div className="cuneiform-converter-form">
       <Form.Label htmlFor="inputText">
         This tool allows to convert transliterations to Unicode cuneiform
         (ranges U+12000-U+123FF, U+12400-U+1247F, and U+12480-U+1254F), using
@@ -111,7 +111,7 @@ function CuneiformConverterForm({
       <Form.Text id="outputHelpBlock" muted>
         This is the converted Unicode text.
       </Form.Text>
-    </>
+    </div>
   )
 }
 

diff --git a/src/chronology/ui/CuneiformConverter/__snapshots__/CuneiformConverterForm.test.tsx.snap b/src/chronology/ui/CuneiformConverter/__snapshots__/CuneiformConverterForm.test.tsx.snap
@@ -2,86 +2,90 @@
 
 exports[`CuneiformConverterForm renders form, options, and scenario panel correctly 1`] = `
 <div>
-  <label
-    class="form-label"
-    for="inputText"
+  <div
+    class="cuneiform-converter-form"
   >
-    This tool allows to convert transliterations to Unicode cuneiform (ranges U+12000-U+123FF, U+12400-U+1247F, and U+12480-U+1254F), using the mapping from the eBL sign list. Different fonts, developed by S. Vanseveren, can be used to display the cuneiform text.
-  </label>
-  <textarea
-    aria-describedby="textHelpBlock"
-    aria-label="input-atf"
-    class="form-control"
-    id="inputText"
-  />
-  <small
-    class="form-text text-muted"
-    id="textHelpBlock"
-  >
-    Enter the text you want to convert to Unicode.
-  </small>
-  <label
-    class="form-label"
-    for="fontSelector"
-    style="padding-right: 8px;"
-  >
-    Select Font
-  </label>
-  <select
-    class="form-select"
-    id="fontSelector"
-  >
-    <option
-      value="Assurbanipal"
+    <label
+      class="form-label"
+      for="inputText"
     >
-      Neo-Assyrian
-    </option>
-    <option
-      value="Esagil"
+      This tool allows to convert transliterations to Unicode cuneiform (ranges U+12000-U+123FF, U+12400-U+1247F, and U+12480-U+1254F), using the mapping from the eBL sign list. Different fonts, developed by S. Vanseveren, can be used to display the cuneiform text.
+    </label>
+    <textarea
+      aria-describedby="textHelpBlock"
+      aria-label="input-atf"
+      class="form-control"
+      id="inputText"
+    />
+    <small
+      class="form-text text-muted"
+      id="textHelpBlock"
     >
-      Neo-Babylonian
-    </option>
-    <option
-      value="Santakku"
+      Enter the text you want to convert to Unicode.
+    </small>
+    <label
+      class="form-label"
+      for="fontSelector"
+      style="padding-right: 8px;"
     >
-      Old Babylonian
-    </option>
-    <option
-      value="SantakkuM"
+      Select Font
+    </label>
+    <select
+      class="form-select"
+      id="fontSelector"
     >
-      Old Babylonian Monumental
-    </option>
-    <option
-      value="UllikummiA"
+      <option
+        value="Assurbanipal"
+      >
+        Neo-Assyrian
+      </option>
+      <option
+        value="Esagil"
+      >
+        Neo-Babylonian
+      </option>
+      <option
+        value="Santakku"
+      >
+        Old Babylonian
+      </option>
+      <option
+        value="SantakkuM"
+      >
+        Old Babylonian Monumental
+      </option>
+      <option
+        value="UllikummiA"
+      >
+        Hittite
+      </option>
+    </select>
+    <br />
+    <button
+      class="btn btn-primary"
+      type="button"
     >
-      Hittite
-    </option>
-  </select>
-  <br />
-  <button
-    class="btn btn-primary"
-    type="button"
-  >
-    Convert
-  </button>
-  <br />
-  <label
-    class="form-label"
-    for="outputText"
-  >
-    Converted Text
-  </label>
-  <textarea
-    aria-describedby="outputHelpBlock"
-    class="assurbanipal form-control"
-    id="outputText"
-    readonly=""
-  />
-  <small
-    class="form-text text-muted"
-    id="outputHelpBlock"
-  >
-    This is the converted Unicode text.
-  </small>
+      Convert
+    </button>
+    <br />
+    <label
+      class="form-label"
+      for="outputText"
+    >
+      Converted Text
+    </label>
+    <textarea
+      aria-describedby="outputHelpBlock"
+      class="assurbanipal form-control"
+      id="outputText"
+      readonly=""
+    />
+    <small
+      class="form-text text-muted"
+      id="outputHelpBlock"
+    >
+      This is the converted Unicode text.
+    </small>
+  </div>
 </div>
 `;