From 0457e713f7ae89ba1deda5e6db82d1eb5cfa0037 Mon Sep 17 00:00:00 2001
From: George Todea <george.todea@pwmuc.de>
Date: Fri, 12 Apr 2024 11:42:36 +0100
Subject: [PATCH] [TASK] Style search results

---
 .../Private/Language/de.locallang.xlf         |  4 ++
 .../Resources/Private/Language/locallang.xlf  |  3 +
 .../Private/Scss/Elements/_import.scss        |  1 +
 .../Private/Scss/Elements/search.scss         | 70 +++++++++++++++++++
 .../Plugins/IndexedSearch/Partials/Form.html  |  4 +-
 .../IndexedSearch/Partials/Pagination.html    | 37 ++++++++++
 .../IndexedSearch/Partials/Searchresult.html  | 24 +++++++
 .../Templates/Search/Search.html              | 30 ++++----
 .../football/Resources/Public/Css/index.css   | 69 ++++++++++++++++++
 9 files changed, 225 insertions(+), 17 deletions(-)
 create mode 100644 local_packages/football/Resources/Private/Scss/Elements/search.scss
 create mode 100644 local_packages/football/Resources/Private/Templates/Plugins/IndexedSearch/Partials/Pagination.html
 create mode 100644 local_packages/football/Resources/Private/Templates/Plugins/IndexedSearch/Partials/Searchresult.html

diff --git a/local_packages/football/Resources/Private/Language/de.locallang.xlf b/local_packages/football/Resources/Private/Language/de.locallang.xlf
index d8e86f8..17842b4 100644
--- a/local_packages/football/Resources/Private/Language/de.locallang.xlf
+++ b/local_packages/football/Resources/Private/Language/de.locallang.xlf
@@ -14,6 +14,10 @@
                 <source>Search</source>
                 <target>Suche</target>
             </trans-unit>
+            <trans-unit id="indexedSearch.displayResults">
+                <source><![CDATA[Found <strong>%s</strong> results]]></source>
+                <source><![CDATA[<strong>%s</strong> Ergebnisse gefunden]]></source>
+            </trans-unit>
         </body>
     </file>
 </xliff>
diff --git a/local_packages/football/Resources/Private/Language/locallang.xlf b/local_packages/football/Resources/Private/Language/locallang.xlf
index 051da42..6d73f9f 100644
--- a/local_packages/football/Resources/Private/Language/locallang.xlf
+++ b/local_packages/football/Resources/Private/Language/locallang.xlf
@@ -15,6 +15,9 @@
             <trans-unit id="indexedSearch.placeholder">
                 <source>Search</source>
             </trans-unit>
+            <trans-unit id="indexedSearch.displayResults">
+                <source><![CDATA[Found <strong>%s</strong> results]]></source>
+            </trans-unit>
         </body>
     </file>
 </xliff>
diff --git a/local_packages/football/Resources/Private/Scss/Elements/_import.scss b/local_packages/football/Resources/Private/Scss/Elements/_import.scss
index 4e17ed3..a27dd04 100644
--- a/local_packages/football/Resources/Private/Scss/Elements/_import.scss
+++ b/local_packages/football/Resources/Private/Scss/Elements/_import.scss
@@ -1,2 +1,3 @@
 @import "cta";
 @import "footer-menu";
+@import "search";
diff --git a/local_packages/football/Resources/Private/Scss/Elements/search.scss b/local_packages/football/Resources/Private/Scss/Elements/search.scss
new file mode 100644
index 0000000..9b062cd
--- /dev/null
+++ b/local_packages/football/Resources/Private/Scss/Elements/search.scss
@@ -0,0 +1,70 @@
+.tx-indexedsearch-form {
+  width: 25%;
+}
+
+.tx-indexedsearch-info-sword {
+  padding: 16px 0;
+
+  .tx-indexedsearch-info-sword-word {
+    font-weight: bold;
+  }
+}
+
+.tx-indexedsearch-results {
+  margin-top: 20px;
+
+  .tx-indexedsearch-res {
+    padding: 16px 0;
+    border-top: 1px solid $color__light-gray;
+
+    .tx-indexedsearch-title {
+      a {
+        color: #FF3232;
+        text-decoration: none;
+      }
+    }
+
+    .tx-indexedsearch-description {
+      margin-bottom: 0;
+    }
+  }
+}
+
+.tx-indexedsearch-browsebox {
+  margin-top: 20px;
+
+  ul {
+    list-style: none;
+    padding: 0;
+    display: flex;
+
+    li {
+      display: flex;
+      width: 30px;
+      height: 30px;
+      border: 1px solid $color__light-gray;
+      margin-right: 15px;
+
+      &:hover,
+      &.active{
+        border-color: $color__primary--dark-blue;
+      }
+
+      a {
+        display: flex;
+        -ms-flex-pack: center;
+        justify-content: center;
+        -ms-flex-align: center;
+        align-items: center;
+        width: 30px;
+        height: 30px;
+        text-decoration: none;
+        color: $color__text__default;
+      }
+
+      &.tx-indexedsearch-browselist-next{
+        border: 0;
+      }
+    }
+  }
+}
diff --git a/local_packages/football/Resources/Private/Templates/Plugins/IndexedSearch/Partials/Form.html b/local_packages/football/Resources/Private/Templates/Plugins/IndexedSearch/Partials/Form.html
index a87d5c3..38c7bc4 100644
--- a/local_packages/football/Resources/Private/Templates/Plugins/IndexedSearch/Partials/Form.html
+++ b/local_packages/football/Resources/Private/Templates/Plugins/IndexedSearch/Partials/Form.html
@@ -16,9 +16,9 @@
             <f:form.hidden name="search[extendedSearch]" value="{searchParams.extendedSearch}" />
         </div>
 
-        <legend><f:translate key="form.legend" /></legend>
+        <h2><f:translate key="form.legend" /></h2>
         <div class="tx-indexedsearch-form">
-            <f:form.textfield name="search[sword]" value="{sword}" id="tx-indexedsearch-searchbox-sword" class="tx-indexedsearch-searchbox-sword" placeholder="{f:translate(key: 'indexedSearch.placeholder', extensionName: 'football')}" />
+            <f:form.textfield name="search[sword]" value="{sword}" id="tx-indexedsearch-searchbox-sword" class="form-control" placeholder="{f:translate(key: 'indexedSearch.placeholder', extensionName: 'football')}" />
         </div>
 
     </f:form>
diff --git a/local_packages/football/Resources/Private/Templates/Plugins/IndexedSearch/Partials/Pagination.html b/local_packages/football/Resources/Private/Templates/Plugins/IndexedSearch/Partials/Pagination.html
new file mode 100644
index 0000000..60d639f
--- /dev/null
+++ b/local_packages/football/Resources/Private/Templates/Plugins/IndexedSearch/Partials/Pagination.html
@@ -0,0 +1,37 @@
+<html
+    xmlns:f="http://typo3.org/ns/TYPO3/CMS/Fluid/ViewHelpers"
+    data-namespace-typo3-fluid="true"
+>
+
+<f:if condition="{pagination}">
+    <ul>
+        <f:if condition="{pagination.previousPageNumber}">
+            <li class="tx-indexedsearch-browselist-next">
+                <a href="#" class="tx-indexedsearch-page-selector" data-prefix="tx_indexedsearch" data-pointer="{pagination.previousPageNumber - 1}" data-free-index-uid="{freeIndexUid}">
+                    <
+                </a>
+            </li>
+        </f:if>
+
+        <f:for each="{pagination.allPageNumbers}" as="pageNumber">
+            <f:if condition="{pageNumber} == {searchParams.pointer + 1}">
+                <f:then>
+                    <li class="active"><a href="#" class="tx-indexedsearch-page-selector" data-prefix="tx_indexedsearch" data-pointer="{pageNumber - 1}" data-free-index-uid="{freeIndexUid}" aria-current="page">{pageNumber}</a></li>
+                </f:then>
+                <f:else>
+                    <li><a href="#" class="tx-indexedsearch-page-selector" data-prefix="tx_indexedsearch" data-pointer="{pageNumber - 1}" data-free-index-uid="{freeIndexUid}">{pageNumber}</a></li>
+                </f:else>
+            </f:if>
+        </f:for>
+
+        <f:if condition="{pagination.nextPageNumber}">
+            <li class="tx-indexedsearch-browselist-next">
+                <a href="#" class="tx-indexedsearch-page-selector" data-prefix="tx_indexedsearch" data-pointer="{pagination.nextPageNumber - 1}" data-free-index-uid="{freeIndexUid}">
+                    >
+                </a>
+            </li>
+        </f:if>
+    </ul>
+</f:if>
+
+</html>
diff --git a/local_packages/football/Resources/Private/Templates/Plugins/IndexedSearch/Partials/Searchresult.html b/local_packages/football/Resources/Private/Templates/Plugins/IndexedSearch/Partials/Searchresult.html
new file mode 100644
index 0000000..b2fc5a6
--- /dev/null
+++ b/local_packages/football/Resources/Private/Templates/Plugins/IndexedSearch/Partials/Searchresult.html
@@ -0,0 +1,24 @@
+<html
+    xmlns:f="http://typo3.org/ns/TYPO3/CMS/Fluid/ViewHelpers"
+    xmlns:is="http://typo3.org/ns/TYPO3/CMS/IndexedSearch/ViewHelpers"
+    data-namespace-typo3-fluid="true">
+<div class="tx-indexedsearch-res">
+    <h4>
+        <f:if condition="{settings.displayResultNumber}"><span class="tx-indexedsearch-result-number">{row.result_number}</span></f:if>
+        <span class="tx-indexedsearch-title">{row.title -> f:format.raw()}</span>
+    </h4>
+    <f:if condition="{row.headerOnly} == 0">
+    <p class="tx-indexedsearch-description">{row.description -> f:format.raw()}</p>
+    </f:if>
+    <f:if condition="{row.headerOnly} == 1">
+        <p class="tx-indexedsearch-description">{row.description -> f:format.raw()}</p>
+    </f:if>
+    <f:if condition="{row.subresults}">
+        <p class="tx-indexedsearch-list">
+            <f:for each="{row.subresults.items}" as="subrow">
+                <f:render partial="Searchresult" arguments="{row: subrow}" />
+            </f:for>
+        </p>
+    </f:if>
+</div>
+</html>
diff --git a/local_packages/football/Resources/Private/Templates/Plugins/IndexedSearch/Templates/Search/Search.html b/local_packages/football/Resources/Private/Templates/Plugins/IndexedSearch/Templates/Search/Search.html
index 15b3edb..59eba08 100644
--- a/local_packages/football/Resources/Private/Templates/Plugins/IndexedSearch/Templates/Search/Search.html
+++ b/local_packages/football/Resources/Private/Templates/Plugins/IndexedSearch/Templates/Search/Search.html
@@ -31,7 +31,7 @@ <h1 class="tx-indexedsearch-category">{result.categoryTitle}</h1>
         <f:then>
             <div class="tx-indexedsearch-browsebox">
                 <f:sanitize.html>
-                    <f:translate key="displayResults" arguments="{0: result.pagination.startRecordNumber, 1: result.pagination.endRecordNumber, 2: result.pagination.totalAmount}" />
+                    <f:translate key="indexedSearch.displayResults" extensionName="football" arguments="{0: result.count}" />
                 </f:sanitize.html>
 
                 <!-- render the anchor-links to the sections inside the displayed result rows -->
@@ -55,21 +55,21 @@ <h1 class="tx-indexedsearch-category">{result.categoryTitle}</h1>
                         </table>
                     </div>
                 </f:if>
-
-                <f:render partial="Pagination" arguments="{pagination: result.pagination, searchParams: searchParams}" />
             </div>
-            <f:for each="{result.rows}" as="row">
-                <f:if condition="{row.isSectionHeader}">
-                    <f:then>
-                    <div id="anchor_{row.sectionId}" class="tx-indexedsearch-sectionhead">
-                        <h2 class="tx-indexedsearch-title"><f:format.html>{row.sectionTitle}</f:format.html> <span class="tx-indexedsearch-result-count">{row.numResultRows} <f:translate key="{f:if(condition: '{row.numResultRows} > 1', then: 'result.pages', else: 'result.page')}" /></span></h2>
-                    </div>
-                    </f:then>
-                    <f:else>
-                        <f:render partial="Searchresult" arguments="{row: row, searchParams: searchParams, firstRow: firstRow}" />
-                    </f:else>
-                </f:if>
-            </f:for>
+            <div class="tx-indexedsearch-results">
+                <f:for each="{result.rows}" as="row">
+                    <f:if condition="{row.isSectionHeader}">
+                        <f:then>
+                        <div id="anchor_{row.sectionId}" class="tx-indexedsearch-sectionhead">
+                            <h2 class="tx-indexedsearch-title"><f:format.html>{row.sectionTitle}</f:format.html> <span class="tx-indexedsearch-result-count">{row.numResultRows} <f:translate key="{f:if(condition: '{row.numResultRows} > 1', then: 'result.pages', else: 'result.page')}" /></span></h2>
+                        </div>
+                        </f:then>
+                        <f:else>
+                            <f:render partial="Searchresult" arguments="{row: row, searchParams: searchParams, firstRow: firstRow}" />
+                        </f:else>
+                    </f:if>
+                </f:for>
+            </div>
             <div class="tx-indexedsearch-browsebox">
                 <f:render partial="Pagination" arguments="{pagination: result.pagination, searchParams: searchParams, freeIndexUid: freeIndexUid}" />
             </div>
diff --git a/local_packages/football/Resources/Public/Css/index.css b/local_packages/football/Resources/Public/Css/index.css
index e90a564..e5c1a87 100644
--- a/local_packages/football/Resources/Public/Css/index.css
+++ b/local_packages/football/Resources/Public/Css/index.css
@@ -10812,4 +10812,73 @@ a {
 .footer-menu--secondary {
   display: flex;
   flex-direction: column;
+}
+
+.tx-indexedsearch-form {
+  width: 25%;
+}
+
+.tx-indexedsearch-info-sword {
+  padding: 16px 0;
+}
+
+.tx-indexedsearch-info-sword .tx-indexedsearch-info-sword-word {
+  font-weight: bold;
+}
+
+.tx-indexedsearch-results {
+  margin-top: 20px;
+}
+
+.tx-indexedsearch-results .tx-indexedsearch-res {
+  padding: 16px 0;
+  border-top: 1px solid #ECECE7;
+}
+
+.tx-indexedsearch-results .tx-indexedsearch-res .tx-indexedsearch-title a {
+  color: #FF3232;
+  text-decoration: none;
+}
+
+.tx-indexedsearch-results .tx-indexedsearch-res .tx-indexedsearch-description {
+  margin-bottom: 0;
+}
+
+.tx-indexedsearch-browsebox {
+  margin-top: 20px;
+}
+
+.tx-indexedsearch-browsebox ul {
+  list-style: none;
+  padding: 0;
+  display: flex;
+}
+
+.tx-indexedsearch-browsebox ul li {
+  display: flex;
+  width: 30px;
+  height: 30px;
+  border: 1px solid #ECECE7;
+  margin-right: 15px;
+}
+
+.tx-indexedsearch-browsebox ul li:hover,
+.tx-indexedsearch-browsebox ul li.active {
+  border-color: #002345;
+}
+
+.tx-indexedsearch-browsebox ul li a {
+  display: flex;
+  -ms-flex-pack: center;
+  justify-content: center;
+  -ms-flex-align: center;
+  align-items: center;
+  width: 30px;
+  height: 30px;
+  text-decoration: none;
+  color: #002345;
+}
+
+.tx-indexedsearch-browsebox ul li.tx-indexedsearch-browselist-next {
+  border: 0;
 }
\ No newline at end of file