improve layout (#192)

* wip * touchups * fixes
yomidevs · Jan 17, 2025 · 92e13a3 · 92e13a3
1 parent 20a5ad2
commit 92e13a3
Show file tree

Hide file tree

Showing 27 changed files with 7,061 additions and 4,623 deletions.
diff --git a/3-tidy-up.js b/3-tidy-up.js
@@ -323,15 +323,14 @@ function getGlossTree(sensesWithoutInflectionGlosses) {
         examples = examples
             .filter(example => example.text)
             .map(example => standardizeExample(example))
-            .filter(({text, translation}) => text.length <= 70 || text.length <= 90 && !translation)  // Filter out verbose examples
+            .filter(({text}) => text.length <= 120)  // Filter out verbose examples
             .map((example, index) => ({ ...example, originalIndex: index }))  // Step 1: Decorate with original index
             .sort(({ translation: translationA, originalIndex: indexA }, { translation: translationB, originalIndex: indexB }) => {
                 if (translationA && !translationB) return -1;   // translation items first
                 if (!translationA && translationB) return 1;    // Non-translation items last
                 return indexA - indexB;                 // Step 2: Stable sort by original index if equal
             })
             .map(({text, translation}) => ({text, translation}))  // Step 3: Pick only properties that will be used
-            .slice(0, 2);
 
         /** @type {GlossTree|GlossBranch} */
         let temp = glossTree;

diff --git a/4-make-yomitan.js b/4-make-yomitan.js
@@ -254,15 +254,9 @@ function getStructuredPreamble(info) {
     const preambleContent = [];
 
     if(head_info_text) {
-        preambleContent.push({
-            "tag": "div",
-            "data": {
-                "content": "head-info"
-            },
-            "content": head_info_text
-        });
+        preambleContent.push(buildDetailsEntry('Grammar', head_info_text));
     }
-    
+
     if(morpheme_text) {
         preambleContent.push(buildDetailsEntry('Morphemes', morpheme_text));
     }
@@ -340,7 +334,7 @@ function handleNest(glossBranch, lemmaTags, pos) {
     const nestedGloss = handleLevel(glossBranch, lemmaTags, pos, 0);
 
     if (nestedGloss.length > 0) {
-        glosses.push({ "tag": "div", "content": nestedGloss });
+        glosses.push({ "tag": "li", "content": nestedGloss });
     }
 
     return glosses;
@@ -416,9 +410,6 @@ let lastTermBankIndex = 0;
                     const foundPos = findPartOfSpeech(pos, partsOfSpeech, skippedPartsOfSpeech);
                     const {glossTree} = info;
 
-                    /** @type {import('types').TermBank.StructuredContent}*/
-                    const entryContent = [];
-
                     ipa.push(...info.ipa);
 
                     let commonTags = null;
@@ -433,6 +424,9 @@ let lastTermBankIndex = 0;
                     }
                     commonTags = processTags([pos, ...(commonTags || [])], [], pos).recognizedTags;
 
+                    /** @type {import('types').TermBank.StructuredContent}*/
+                    const glossContent = [];
+
                     for (const [gloss, branches] of glossTree.entries()) {
 
                         /** @type {GlossBranch} */
@@ -441,14 +435,23 @@ let lastTermBankIndex = 0;
                         const glosses = handleNest(syntheticBranch, commonTags, pos);
 
                         if(glosses && glosses.length) {
-                            entryContent.push(...glosses);
+                            glossContent.push(...glosses);
                         };
                     }
 
-                    if (!entryContent.length) {
+                    if (!glossContent.length) {
                         continue;
                     }
 
+                    /** @type {import('types').TermBank.StructuredContent}*/
+                    const entryContent = [{
+                        "tag": "ol",
+                        "data" : {
+                            "content": "glosses"
+                        },
+                        "content": glossContent
+                    }]
+
                     if (info.etymology_text || info.head_info_text || info.morpheme_text) {
                         const preamble = getStructuredPreamble(info);
                         entryContent.unshift({

diff --git a/data/styles.css b/data/styles.css
@@ -38,15 +38,17 @@ summary[data-sc-content="summary-entry"] {
     width: max-content;
     padding: 0.1em 0.2em;
 }
-ul.gloss-list[data-count="1"] summary[data-sc-content="summary-entry"] {
-    list-style-position: inside;
+ol[data-sc-content="glosses"] {
+    list-style-type: upper-roman;
 }
-summary[data-sc-content="summary-entry"]::marker {
+[data-sc-content="summary-entry"]::marker {
     color: var(--checkbox-disabled-color);
 }
 summary[data-sc-content="summary-entry"] {
+    list-style-position: inside;
     color: var(--text-color-light4);
 }
+details[data-sc-content^="details-entry-Grammar"] summary[data-sc-content="summary-entry"],
 details[data-sc-content^="details-entry-Etymology"] summary[data-sc-content="summary-entry"],
 details[data-sc-content^="details-entry-Morphemes"] summary[data-sc-content="summary-entry"] {
     font-weight: bold;