From a121e148e21d0019ab52fc0d2305486811412b12 Mon Sep 17 00:00:00 2001
From: Hamid Reza Mohammadi <mohammadi.hr@gmail.com>
Date: Sat, 8 Mar 2025 10:42:58 +0330
Subject: [PATCH] comparison of usage stats of a selected word among all poets
 #471

---
 GanjooRazor/Pages/Search.cshtml | 75 ++++++++++++++++++++++++++++++---
 1 file changed, 69 insertions(+), 6 deletions(-)

diff --git a/GanjooRazor/Pages/Search.cshtml b/GanjooRazor/Pages/Search.cshtml
index 0d4f2af5..98bc920c 100644
--- a/GanjooRazor/Pages/Search.cshtml
+++ b/GanjooRazor/Pages/Search.cshtml
@@ -42,6 +42,31 @@
         }
     </script>
 
+    <style>
+        .expandable-container-wrapper {
+            position: relative;
+        }
+
+        .expandable-content {
+            width: 100%;
+            overflow: hidden;
+            transition: height 0.3s ease-out;
+            position: relative;
+        }
+
+        /* Blurred bottom overlay effect */
+        .expandable-blur-overlay {
+            position: absolute;
+            bottom: 0;
+            left: 0;
+            width: 100%;
+            height: 200px; /* Height of the blur effect */
+            background: linear-gradient(to bottom, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.9));
+            pointer-events: none; /* Prevents interaction */
+            transition: opacity 0.3s ease-out;
+        }
+    </style>
+
 </head>
 <body>
 
@@ -204,16 +229,54 @@
                 else
                 {
 
-                    @if(Model.QueryIsSingleWord)
+                    @if (Model.QueryIsSingleWord)
                     {
-                        <div class="sitem" id="wordcounts-placeholder">
-                            <a href="javascript:loadWordCountsByPoet('@Model.Query')" id="load-word-counts" class="pagebutton comments-link">
-                                مشاهدهٔ بسامد واژگان «@Model.Query» به تفکیک سخنور
-                                <svg class="noindent-info-button" enable-background="new 0 0 24 24" height="24px" viewBox="0 0 24 24" width="24px" fill="#5f6368"><g><rect fill="none" height="24" width="24" /></g><g><g><g><path d="M7.5,4C5.57,4,4,5.57,4,7.5S5.57,11,7.5,11S11,9.43,11,7.5S9.43,4,7.5,4z M7.5,9C6.67,9,6,8.33,6,7.5S6.67,6,7.5,6 S9,6.67,9,7.5S8.33,9,7.5,9z M16.5,13c-1.93,0-3.5,1.57-3.5,3.5s1.57,3.5,3.5,3.5s3.5-1.57,3.5-3.5S18.43,13,16.5,13z M16.5,18 c-0.83,0-1.5-0.67-1.5-1.5s0.67-1.5,1.5-1.5s1.5,0.67,1.5,1.5S17.33,18,16.5,18z M5.41,20L4,18.59L18.59,4L20,5.41L5.41,20z" /></g></g></g></svg>
+                        <div class="sitem">
+                            <div class="expandable-container-wrapper">
+                                <div class="expandable-content" id="expandableContent">
+                                    <div id="wordcounts-placeholder">
+                                        <a href="javascript:loadWordCountsByPoet('@Model.Query')" id="load-word-counts" class="pagebutton comments-link">
+                                            مشاهدهٔ بسامد واژگان «@Model.Query» به تفکیک سخنور
+                                            <svg class="noindent-info-button" enable-background="new 0 0 24 24" height="24px" viewBox="0 0 24 24" width="24px" fill="#5f6368"><g><rect fill="none" height="24" width="24" /></g><g><g><g><path d="M7.5,4C5.57,4,4,5.57,4,7.5S5.57,11,7.5,11S11,9.43,11,7.5S9.43,4,7.5,4z M7.5,9C6.67,9,6,8.33,6,7.5S6.67,6,7.5,6 S9,6.67,9,7.5S8.33,9,7.5,9z M16.5,13c-1.93,0-3.5,1.57-3.5,3.5s1.57,3.5,3.5,3.5s3.5-1.57,3.5-3.5S18.43,13,16.5,13z M16.5,18 c-0.83,0-1.5-0.67-1.5-1.5s0.67-1.5,1.5-1.5s1.5,0.67,1.5,1.5S17.33,18,16.5,18z M5.41,20L4,18.59L18.59,4L20,5.41L5.41,20z" /></g></g></g></svg>
+                                        </a>
+                                    </div>
+                                </div>
+                                <div class="expandable-blur-overlay" id="expandableBlur"></div>
+                            </div>
+
+                            <a id="expand-toggle-btn" href="javascript:toggleExpandableContent()" class="pagebutton comments-link">
+                                نمایش فهرست کامل
                             </a>
+
+                            <script>
+                                const expandableDiv = document.getElementById("expandableContent");
+                                const blurOverlay = document.getElementById("expandableBlur");
+                                const toggleButton = document.getElementById("expand-toggle-btn");
+                                let isExpanded = false;
+
+                                // Set initial height (collapsed state)
+                                const collapsedHeight = 200;
+                                expandableDiv.style.height = collapsedHeight + "px";
+
+                                function toggleExpandableContent() {
+                                    if (isExpanded) {
+                                        // Collapse
+                                        expandableDiv.style.height = collapsedHeight + "px";
+                                        blurOverlay.style.opacity = "1"; // Show blur
+                                        toggleButton.textContent = "نمایش فهرست کامل";
+                                    } else {
+                                        // Expand to full height
+                                        expandableDiv.style.height = expandableDiv.scrollHeight + "px";
+                                        blurOverlay.style.opacity = "0"; // Remove blur
+                                        toggleButton.textContent = "جمع کردن فهرست";
+                                    }
+                                    isExpanded = !isExpanded;
+                                }
+                            </script>
+
                         </div>
                     }
-                   
+
 
                     for (int poemIndex = 0; poemIndex < Model.Poems.Count; poemIndex++)
                     {