Adjusting view of ordered signs (#479)

* * Added space between lines * Signs are aligned by KWIC * Added space after similar text * Underline restored for signs' links * Fixed gradient * Reduced complexity * Refactoring
ElectronicBabylonianLiterature · May 15, 2024 · b9ee8f1 · b9ee8f1
1 parent 804f143
commit b9ee8f1
Show file tree

Hide file tree

Showing 2 changed files with 65 additions and 17 deletions.
diff --git a/src/signs/ui/search/Signs.sass b/src/signs/ui/search/Signs.sass
@@ -48,16 +48,28 @@
   font-family: Assurbanipal, Junicode, serif
 
 .Neo-Babylonian
-  font-size: 125%
-  font-family: 'Esagil'
+  font-size: 150%
+  font-family: Neo-Babylonian,'Adobe Blank', Junicode, serif
 
 .beginning
   background: linear-gradient(to left, grey 50%, blue 50%)
 
 .ending
   background: linear-gradient(to right, grey 50%, blue 50%)
 
+.similar_text
+  padding-right: 5px
 .secondary
   -webkit-background-clip: text
   -webkit-text-fill-color: transparent
   padding: 0.3em 0
+  margin-left: 5px
+
+.before
+  text-align: right
+.after
+  text-align: left
+
+span a:hover
+  text-decoration: underline
+  -webkit-text-fill-color: #0056b3
diff --git a/src/signs/ui/search/SignsSearch.tsx b/src/signs/ui/search/SignsSearch.tsx
@@ -10,7 +10,6 @@ import 'dictionary/ui/search/Word.css'
 import { compareCleanedAkkadianString } from 'dictionary/domain/compareAkkadianStrings'
 import './Signs.sass'
 import MesZL from 'signs/ui/search/MesZL'
-import classnames from 'classnames'
 
 interface Props {
   signs: Sign[]
@@ -28,6 +27,38 @@ function displayUnicode(unicode: readonly number[]): string {
   return unicode.map((unicode) => String.fromCodePoint(unicode)).join('')
 }
 
+const renderSignColumn = (
+  data,
+  startIndex,
+  endIndex,
+  label,
+  direction,
+  language
+) => (
+  <>
+    {label === 'before' && (
+      <td className="similar_text">{`Similar ${direction} (${language}): `}</td>
+    )}
+    <td className={label}>
+      {data.slice(startIndex, endIndex).map((item, index) => (
+        <span
+          key={index}
+          className={
+            label === 'center' ? language : `${language} secondary ${direction}`
+          }
+        >
+          {label === 'center' ? (
+            displayUnicode(item.unicode)
+          ) : (
+            <a href={`/signs?listsName=MZL&listsNumber=${item.mzl}`}>
+              {displayUnicode(item.unicode)}
+            </a>
+          )}
+        </span>
+      ))}
+    </td>
+  </>
+)
 const SignLists = withData<
   { sign: Sign; sortEra: string },
   { signService: SignService },
@@ -38,22 +69,27 @@ const SignLists = withData<
     const language = sortEra.includes('Babylonian')
       ? 'Neo-Babylonian'
       : 'Neo-Assyrian'
+    const signIndex = data.findIndex((item) => item.name === sign.name)
+
     return _.isEmpty(data) ? null : (
       <>
-        <td className="similar_text">{`Similar ${direction} (${language}): `}</td>
-        {data.map((item, index) => (
-          <React.Fragment key={index}>
-            {item.name === sign.name ? (
-              <td className={language}>{displayUnicode(item.unicode)}</td>
-            ) : (
-              <td className={classnames(language, 'secondary', direction)}>
-                <a href={`/signs?listsName=MZL&listsNumber=${item.mzl}`}>
-                  {displayUnicode(item.unicode)}
-                </a>
-              </td>
-            )}
-          </React.Fragment>
-        ))}
+        {renderSignColumn(data, 0, signIndex, 'before', direction, language)}
+        {renderSignColumn(
+          data,
+          signIndex,
+          signIndex + 1,
+          'center',
+          direction,
+          language
+        )}
+        {renderSignColumn(
+          data,
+          signIndex + 1,
+          data.length,
+          'after',
+          direction,
+          language
+        )}
       </>
     )
   },