Redesigning Saimiar anciliary information

src/App.scss

@@ -41,6 +41,19 @@ input {
     padding-bottom: 1em;
 }
 
-.synclass {
+.additionalNotes {
     color: #a63333;
 }
+
+.semField {
+    font-variant: small-caps;
+    color: #6a3131;
+}
+
+.saimiarNounMorpho {
+    color: #a63333;
+    i {
+        color: #6a3131;
+
+    }
+}

src/Entries.tsx

@@ -54,16 +54,11 @@ const EntryBase = (props: BaseProps) => {
             : <a href="" onClick={edit}>Edit</a>);
     };
 
-    const expand = (evt) => {
-        evt.preventDefault();
-    };
-
     return (
         <div className="searchResult" key={ props.id }>
             <div style={mainEntryStyle}>
                 <span><b>{ props.conlangEntry }</b> { engTranslation }</span>
                 <span style={controlStyle}>
-                    <a href="" onClick={expand}>Expand</a>
                     <EditControls onSave={save} />
                 </span>
             </div>
@@ -77,38 +72,45 @@ const SaiEntry = (props: {entry: SaiEntryProps}) => {
 
     const synCategory = entry.syn_category;
     const isNominal = synCategory === "nominal";
+    const barStyle = {
+        display: "inline-flex",
+        gap: "1em",
+    };
+
+    let morphology = null;
+    if (isNominal) {
+        const decl = declineSaimiar(entry);
+        if (decl) {
+            morphology = (<span className="saimiarNounMorpho">
+        Abs: <i>{decl.abs}</i>, Erg: <i>{decl.erg}</i>, Adp: <i>{decl.adp}</i>,
+        All: <i>{decl.all}</i>, Loc: <i>{decl.loc}</i>, Ell: <i>{decl.ell}</i>,
+        Inst: <i>{decl.inst}</i>, Rel: <i>{decl.rel}</i>
+            </span>);
+        }
+    }
 
     const langSpecific = (
-        <div>
+        <div className="additionalNotes">
-            <span className="synclass">
+            <span style={barStyle}>
-                <i>{ entry.syn_category }</i>
+                <span className="synCategory">
-                { entry.morph_type ? `\t\t${entry.morph_type}` : null }
+                    <i>{ entry.syn_category }</i>
-                <br/>
+                </span>
-                { isNominal ? formatMorphology(entry) : null }
+                <span className="morphType">
+                    { entry.morph_type ? `\t\t${entry.morph_type}` : null }
+                </span>
+                { entry.etym ? <span className="etym">etym.: <i>{entry.etym}</i></span>
+                    : null
+                }
+                { entry.semantic_field ? <span className="semField">{entry.semantic_field}</span> : null }
             </span>
+            <br/>
+            { morphology }
         </div>
     );
 
     return <EntryBase id={entry.id} conlang={Conlang.Saimiar} conlangEntry={entry.sai} english={entry.eng} langSpecific={langSpecific} />;
 };
 
-function formatMorphology(entry) {
-    const decl = declineSaimiar(entry);
-    if (!decl) {
-        return "";
-    }
-
-    return (<span style={ {fontSize: "medium", color: "#6a3131"} } >
-        Abs: <i>{decl.abs}</i>, Erg: <i>{decl.erg}</i>,
-        Adp: <i>{decl.adp}</i>,
-        All: <i>{decl.all}</i>,
-        Loc: <i>{decl.loc}</i>,
-        Ell: <i>{decl.ell}</i>,
-        Inst: <i>{decl.inst}</i>,
-        Rel: <i>{decl.rel}</i>
-    </span>);
-}
-
 const JutEntry = (props: {entry: JutEntryProps}) => {
     const {entry} = props;