1255: Migrate search result presentation

Task-Url: https://pm.winseda.de/issues/1255

search/incl/result_item.jsp

@@ -2,9 +2,9 @@
 <%@ taglib prefix="s" uri="http://www.springframework.org/tags" %>
 
 
-<div class="search-results-item d-flex flex-row">
+<div class="search-results-item d-md-flex flex-row">
 
-	<div class="search-results-image" id="search-results-image-~{index}">
+	<div class="search-results-image" id="search-results-image-~{index}" style="flex: 0 0 145px;">
 		<div class="no-preview-overlay">
 		    <s:message code="~eu.dariah.de.minfba.search.view.result.resources.no_preview" />
 		</div>
@@ -24,11 +24,35 @@
 
 	</div>
 	
-	<div class="flex-fill" style="background-color: red;">
-		lorem ipsum
+	<div class="flex-grow-1">
+		<div class="search-results-resource-item">
+			<span class="search-result-score">~{score}</span>
+			<h3 class="search-result-datasource">~{datasource}</h3>
+			<h2 class="search-result-title">~{title}</h2>
+			<ul class="search-result-links">~{link}</ul>
+			<div class="search-result-objects" id="search-result-objects-~{index}"></div>
+			<div class="search-result-panel" id="search-results-content-~{index}-accordion">
+				<button class="btn btn-link" data-toggle="collapse" href="#search-results-content-~{index}" role="button" aria-expanded="false" aria-controls="search-results-content-~{index}">
+					<s:message code="~eu.dariah.de.minfba.search.view.result.resources.content" />
+				</button>
+				<div class="collapse" id="search-results-content-~{index}">~{snippet}</div>
+			</div>
+			<div class="search-result-panel original-data-panel" id="search-results-original-~{index}-accordion">
+				<button class="btn btn-link" data-toggle="collapse" href="#search-results-original-~{index}" role="button" aria-expanded="false" aria-controls="search-results-original-~{index}">
+					<s:message code="~eu.dariah.de.minfba.search.view.result.original.content" />
+				</button>
+				<div class="collapse" id="search-results-original-~{index}">~{original}</div>
+			</div>
+			<c:if test="${explain}">
+				<div class="search-result-panel" id="search-results-explanation-~{index}-accordion">
+					<button class="btn btn-link" data-toggle="collapse" href="#search-results-explanation-~{index}" role="button" aria-expanded="false" aria-controls="search-results-explanation-~{index}">
+						<s:message code="~eu.dariah.de.minfba.search.view.result.resources.explanation" />
+					</button>
+					<div class="collapse" id="search-results-explanation-~{index}">~{explanation}</div>
+				</div>
+			</c:if>
+		</div>	
 	</div>
-
-
 </div>
 
 

search/incl/tabs_results.jsp

@@ -35,24 +35,23 @@
 	</ul>
 	<div id="search-results" class="tab-content">
 		<div class="tab-pane fade show active" id="search-results-resources-panel" role="tabpanel" aria-labelledby="search-results-resources-tab">
-			<p id="search-results-resources-heading"></p>
+			<p class="search-result-tab-heading" id="search-results-resources-heading"></p>
 			<div id="search-results-resources"></div>
 		</div>
 		<div class="tab-pane fade" id="search-results-collection-panel" role="tabpanel" aria-labelledby="search-results-collection-tab">
-			<h4><s:message code="~eu.dariah.de.minfba.search.search.collections.info" /></h4>
-			<p id="search-results-collections-heading"></p>
+			<p class="search-result-tab-heading" id="search-results-collections-heading"></p>
 			<div id="search-results-collections"></div>
 		</div>
 		<div class="tab-pane fade" id="search-results-subjects-panel" role="tabpanel" aria-labelledby="search-results-subjects-tab">
-			<h4><s:message code="~eu.dariah.de.minfba.search.search.subjects.info" /></h4>
+			<p class="search-result-tab-heading"><s:message code="~eu.dariah.de.minfba.search.search.subjects.info" /></p>
 			<div id="search-results-subjects"></div>
 		</div>
 		<div class="tab-pane fade" id="search-results-terms-panel" role="tabpanel" aria-labelledby="search-results-terms-tab">
-			<h4><s:message code="~eu.dariah.de.minfba.search.search.terms.info" /></h4>
+			<p class="search-result-tab-heading"><s:message code="~eu.dariah.de.minfba.search.search.terms.info" /></p>
 			<div id="search-results-terms"></div>
 		</div>
 		<div class="tab-pane fade hide" id="search-results-explanations-panel" role="tabpanel" aria-labelledby="search-results-explanations-tab">
-			<h3><s:message code="~eu.dariah.de.minfba.search.view.result.queries" /></h3>
+			<p class="search-result-tab-heading"><s:message code="~eu.dariah.de.minfba.search.view.result.queries" /></p>
 			<div id="executed-queries"></div>
 		</div>
 	</div>