Update web/templates/entry_view.html

web/templates/entry_view.html

@@ -34,10 +34,21 @@
 
   <!-- Main card -->
   <div class="result-card">
-    <!-- SUBJECT as the main title -->
+    <!-- SUBJECT pills (WOL-linked) -->
-    <h1 class="subject-title">
+    <div class="subject-pills">
-      {{ entry.subject|default:"(no subject)" }}
+      {% if subject_list %}
-    </h1>
+        {% for s in subject_list %}
+          <a
+            class="chip chip-subject"
+            href="https://wol.jw.org/en/wol/s/r1/lp-e?q={{ s }}"
+            target="_blank" rel="noopener noreferrer"
+            title="Search WOL for {{ s }}"
+          >{{ s }}</a>
+        {% endfor %}
+      {% else %}
+        <span class="chip chip-muted">(no subject)</span>
+      {% endif %}
+    </div>
 
     <!-- ILLUSTRATION -->
     <div class="section">
@@ -59,15 +70,7 @@
     <div class="meta-grid">
       <div class="meta-item">
         <div class="meta-label">Source</div>
-        <div class="meta-value">
+        <div class="meta-value">{{ entry.source|default:"—" }}</div>
-          {% if entry.source %}
-            <a class="chip chip-link chip-lg"
-               href="https://wol.jw.org/en/wol/l/r1/lp-e?q={{ entry.source|urlencode }}"
-               target="_blank" rel="noopener noreferrer">
-              {{ entry.source }}
-            </a>
-          {% else %}—{% endif %}
-        </div>
       </div>
 
       <div class="meta-item">
@@ -76,8 +79,8 @@
           {% if scripture_list %}
             {% for sc in scripture_list %}
               <a class="chip chip-link"
-                 href="https://wol.jw.org/en/wol/l/r1/lp-e?q={{ sc|urlencode }}"
+                href="https://wol.jw.org/en/wol/l/r1/lp-e?q={{ sc|urlencode }}"
-                 target="_blank" rel="noopener noreferrer">
+                target="_blank" rel="noopener noreferrer">
                 {{ sc }}
               </a>
             {% endfor %}
@@ -110,12 +113,27 @@
 
 </div>
 
-<!-- Tiny style tweak to make the Source pill larger/bold without touching global CSS -->
 <style>
-  .chip-lg {
+  .subject-pills{
-    font-weight: 700;
+    display:flex;
-    font-size: 15px;
+    flex-wrap:wrap;
-    padding: 6px 12px;
+    gap:10px;
+    margin:0 0 10px;
+  }
+  .chip-subject{
+    font-weight:700;
+    font-size:16px;
+    padding:8px 14px;
+    border-radius:999px;
+    background:#eef5fc;
+    border:1px solid #d7e6f7;
+    color:#0f172a;
+    text-decoration:none;
+    text-transform: capitalize; /* Capitalize each word */
+  }
+  .chip-subject:hover{
+    background:#e2effc;
+    border-color:#c9def5;
   }
 </style>
 {% endblock %}