From a0341d94b65b8b1ed5a6d70edb3ae452077ca87e Mon Sep 17 00:00:00 2001
From: Darius Jahandarie <djahandarie@gmail.com>
Date: Sun, 29 Dec 2024 17:03:28 +0900
Subject: [PATCH] Continue popup design improvements

---
 ext/css/display.css                 | 20 ++++++++++++-
 ext/js/display/display-generator.js |  1 +
 ext/templates-display.html          | 44 +++++++++++++++++++++++------
 3 files changed, 55 insertions(+), 10 deletions(-)

diff --git a/ext/css/display.css b/ext/css/display.css
index faf781360..4c9a84a61 100644
--- a/ext/css/display.css
+++ b/ext/css/display.css
@@ -840,7 +840,6 @@ button.action-button:active {
 .entry {
     padding: 0;
     position: relative;
-    overflow: hidden;
     content-visibility: auto;
     contain-intrinsic-size: auto 500px;
 }
@@ -857,6 +856,18 @@ button.action-button:active {
     display: none;
 }
 .entry-header {
+    position: sticky;
+    top: 0;
+    z-index: 2;
+    background: var(--background-color);
+    padding: 5px;
+    border-bottom: 2px var(--light-border-color) solid;
+    min-height: 45px;
+}
+.entry-header::after {
+    content: "";
+    display: table;
+    clear: both;
 }
 
 /* Inflections */
@@ -913,6 +924,9 @@ button.action-button:active {
     float: left;
     margin-right: var(--headword-list-end-space);
 }
+.headword-list-details {
+    float: left;
+}
 .headword-list-tag-list {
     display: inline-block;
 }
@@ -1230,6 +1244,7 @@ button.action-button:active {
     display: flex;
     flex-flow: row nowrap;
     padding: 5px 10px;
+    height: 100%;
 }
 .definition-item-content {
     width: 100%;
@@ -1313,6 +1328,9 @@ button.expansion-button:focus:focus-visible+.kanji-glyph-table {
 .definition-tag-list {
     display: flex;
     margin-bottom: 2px;
+    position: sticky;
+    top: 60px;
+    z-index: 1;
 }
 
 .headword-extras {
diff --git a/ext/js/display/display-generator.js b/ext/js/display/display-generator.js
index 68da3adff..762cc3045 100644
--- a/ext/js/display/display-generator.js
+++ b/ext/js/display/display-generator.js
@@ -719,6 +719,7 @@ export class DisplayGenerator {
         const n1 = this._querySelector(node, '.pronunciation-group-tag-list');
         const tag = this._createTag(this._createTagData(dictionaryAlias, 'pronunciation-dictionary'));
         tag.dataset.details = dictionary;
+        console.log('node', node);
         const tagLabel = this._querySelector(node, '.tag-label-content');
         this._setTextContent(tagLabel, dictionary);
         n1.appendChild(tag);
diff --git a/ext/templates-display.html b/ext/templates-display.html
index 5ea7daeec..a868fde01 100644
--- a/ext/templates-display.html
+++ b/ext/templates-display.html
@@ -4,6 +4,11 @@
 <template id="term-entry-template" data-remove-whitespace-text="true"><div class="entry" data-type="term">
     <div class="entry-current-indicator" title="Current entry"><span class="entry-current-indicator-inner"></span></div>
     <div class="entry-header">
+        <div class="headword-list"></div>
+        <div class="headword-list-details">
+            <div class="headword-list-tag-list tag-list"></div>
+            <ul class="inflection-rule-chains"></ul>
+        </div>
         <div class="actions">
             <button type="button" class="action-button action-button-collapsible" data-action="view-flags" hidden disabled>
                 <span class="action-icon icon" data-icon="flag"></span>
@@ -32,11 +37,6 @@
                 <span class="action-icon icon" data-icon="kebab-menu"></span>
             </button>
         </div>
-        <div class="headword-list"></div>
-        <div class="headword-list-details">
-            <div class="headword-list-tag-list tag-list"></div>
-            <ul class="inflection-rule-chains"></ul>
-        </div>
     </div>
     <div class="entry-body">
         <div class="entry-body-section" data-section-type="frequencies">
@@ -105,10 +105,36 @@
 </span></span></template>
 
 <!-- Pitch accent -->
-<template id="pronunciation-group-template"><li class="pronunciation-group"><span class="pronunciation-group-tag-list tag-list"></span><ul class="pronunciation-list"></ul></li></template>
-<template id="pronunciation-disambiguation-template"><span class="pronunciation-disambiguation"></span></template>
-<template id="pronunciation-template"><li class="pronunciation"><span class="pronunciation-tag-list tag-list"></span><span class="pronunciation-disambiguation-list"></span><span class="pronunciation-representation-list"><span class="pronunciation-text-container"></span><span class="pronunciation-downstep-notation-container"></span><span class="pronunciation-graph-container"></span></span></li></template>
-
+<template id="pronunciation-group-template">
+    <li class="pronunciation-group">
+        <span class="pronunciation-group-tag-list tag-list">
+            <span class="tag tag-has-body" data-category="pronunciation-dictionary">
+                <span class="tag-label">
+                    <span class="tag-label-content"></span>
+                </span>
+                <span class="tag-body">
+                    <span class="tag-body-content">
+                        <ul class="pronunciation-list"></ul>
+                    </span>
+                </span>
+            </span>
+        </span>
+    </li>
+</template>
+<template id="pronunciation-disambiguation-template">
+    <span class="pronunciation-disambiguation"></span>
+</template>
+<template id="pronunciation-template">
+    <li class="pronunciation">
+        <span class="pronunciation-tag-list tag-list"></span>
+        <span class="pronunciation-disambiguation-list"></span>
+        <span class="pronunciation-representation-list">
+            <span class="pronunciation-text-container"></span>
+            <span class="pronunciation-downstep-notation-container"></span>
+            <span class="pronunciation-graph-container"></span>
+        </span>
+    </li>
+</template>
 <!-- Kanji entry -->
 <template id="kanji-entry-template" data-remove-whitespace-text="true"><div class="entry kanji-entry" data-type="kanji">
     <div class="entry-current-indicator" title="Current entry"><span class="entry-current-indicator-inner"></span></div>