Commit 0f3ee795 authored by Gradl, Tobias's avatar Gradl, Tobias
Browse files

1255: Migrate search result presentation

Task-Url: https://pm.winseda.de/issues/1255
parent e9f3f28a
......@@ -175,10 +175,93 @@
position: absolute;
right: 0; }
#search-results-container > .nav-tabs .nav-link {
font-size: 110%; }
#search-results-container #search-results .tab-pane {
border-right: 1px solid #dee2e6;
border-bottom: 1px solid #dee2e6;
border-left: 1px solid #dee2e6; }
border-left: 1px solid #dee2e6;
padding: 12px; }
#search-results-container #search-results .tab-pane .search-result-tab-heading {
font-style: italic; }
#search-results-container #search-results .tab-pane .search-results-item {
margin: 12px 12px 24px 12px; }
#search-results-container #search-results .tab-pane .search-results-item .search-results-image {
position: relative;
padding: 5px;
border: 1px solid #dee2e6;
margin-top: 6px;
margin-right: 24px;
-webkit-box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
-webkit-border-radius: 0.25rem;
border-radius: 0.25rem;
/* useful if you don't want a bg color from leaking outside the border: */
-webkit-background-clip: padding-box;
background-clip: padding-box;
background: url("../../img/page_icon_faded.png") center 20px no-repeat;
height: 145px;
width: 145px; }
#search-results-container #search-results .tab-pane .search-results-item .search-results-image .search-result-image-tmb {
height: 135px;
width: 135px; }
#search-results-container #search-results .tab-pane .search-results-item .search-results-image .search-result-image-tmb,
#search-results-container #search-results .tab-pane .search-results-item .search-results-image .item-image {
background-repeat: no-repeat;
background-position: center center;
background-size: cover; }
#search-results-container #search-results .tab-pane .search-results-item .search-results-image .no-preview-overlay {
position: absolute;
top: 60px;
bottom: 25px;
left: 0px;
right: 0px;
border-top: 2px solid #494e7d;
border-bottom: 2px solid #494e7d;
background-color: #213365;
opacity: 0.8;
text-align: center;
vertical-align: middle;
padding: 8px 5px;
color: white;
font-style: italic;
z-index: 100; }
#search-results-container #search-results .tab-pane .search-results-item .search-results-resource-item .search-result-score {
float: right;
font-size: 90%; }
#search-results-container #search-results .tab-pane .search-results-item .search-results-resource-item .search-result-datasource {
margin-bottom: 0; }
#search-results-container #search-results .tab-pane .search-results-item .search-results-resource-item .search-result-title {
margin-bottom: 8px; }
#search-results-container #search-results .tab-pane .search-results-item .search-results-resource-item ul.search-result-links {
list-style: none;
padding: 0;
margin-bottom: 8px; }
#search-results-container #search-results .tab-pane .search-results-item .search-results-resource-item ul.search-result-links li {
overflow-wrap: break-word;
word-wrap: break-word;
word-break: break-word; }
#search-results-container #search-results .tab-pane .search-results-item .search-results-resource-item .search-result-objects > span {
display: inline-block;
padding: 0 0.25rem 0.25rem 0.25rem;
cursor: pointer; }
#search-results-container #search-results .tab-pane .search-results-item .search-results-resource-item .search-result-objects > span i.fa {
margin-right: 5px; }
#search-results-container #search-results .tab-pane .search-results-item .search-results-resource-item .search-result-panel {
border: 1px solid #dee2e6;
margin-top: 6px;
margin-bottom: 12px;
padding-left: 12px;
padding-right: 12px;
overflow-wrap: break-word;
word-wrap: break-word; }
#search-results-container #search-results .tab-pane .search-results-item .search-results-resource-item .search-result-panel .btn {
padding-left: 0; }
#search-results-container #search-results .tab-pane .search-results-item .search-results-resource-item .search-result-panel .collapse ul {
padding-left: 1.25rem;
border-bottom: 0; }
#search-results-container #search-results .tab-pane .result-collection {
margin-bottom: 24px; }
#search-available-collections {
margin-bottom: 0; }
......
......@@ -415,44 +415,41 @@ QueryHandler.prototype.processResponseDatasources = function(datasources) {
for (var i=0; i<datasources.length; i++) {
var fmtDocCount = datasources[i].hitCount.toLocaleString();
var provider = "<div class=\"result-collection well well-sm\">" +
"<h4>" + datasources[i].providerName + " <small>";
var provider = "<div class=\"result-collection \">" +
"<h2>" + datasources[i].providerName + " <small>";
if (datasources[i].hitCount==1) {
provider += "1 " + __translator.translate("~eu.dariah.de.minfba.search.view.datamodel_info.document");
} else {
provider += fmtDocCount + " " + __translator.translate("~eu.dariah.de.minfba.search.view.datamodel_info.documents");
}
provider += "</small></h4>" +
"<div id=\"datasource-aggregation-carousel-" + datasources[i].providerId + "\" class=\"aggregation-carousel carousel slide\" data-ride=\"carousel\">" +
"<ol class=\"carousel-indicators\">" +
"<li data-target=\"#datasource-aggregation-carousel-" + datasources[i].providerId + "\" data-slide-to=\"0\" class=\"active\"></li>" +
"<li data-target=\"#datasource-aggregation-carousel-" + datasources[i].providerId + "\" data-slide-to=\"1\"></li>" +
"</ol>" +
"<div class=\"carousel-inner\" role=\"listbox\">" +
"<div class=\"item active\">" +
"<h5>" + __translator.translate("~eu.dariah.de.minfba.search.search.collections.terms") + "</h5>" +
"<div id=\"datasource-wordcloud-" + datasources[i].providerId + "-Wordcloud\" class=\"wordcloud\" style=\"height: " + this.options.wordcloud.height + "px;\"></div>" +
"</div>" +
"<div class=\"item\">" +
"<h5>" + __translator.translate("~eu.dariah.de.minfba.search.search.collections.subjects") + "</h5>" +
"<div id=\"datasource-wordcloud-" + datasources[i].providerId + "-Subject\" class=\"wordcloud\" style=\"height: " + this.options.wordcloud.height + "px;\"></div>" +
"</div>" +
"</div>" +
"<a class=\"left carousel-control\" href=\"#datasource-aggregation-carousel-" + datasources[i].providerId + "\" role=\"button\" data-slide=\"prev\">" +
"<span class=\"glyphicon glyphicon-chevron-left\" aria-hidden=\"true\"></span>" +
"<span class=\"sr-only\">Previous</span>" +
"</a>" +
"<a class=\"right carousel-control\" href=\"#datasource-aggregation-carousel-" + datasources[i].providerId + "\" role=\"button\" data-slide=\"next\">" +
"<span class=\"glyphicon glyphicon-chevron-right\" aria-hidden=\"true\"></span>" +
"<span class=\"sr-only\">Next</span>" +
"</a>" +
"</div>" +
"</div>";
$("#search-results-collections").append(provider);
$("#datasource-aggregation-carousel-" + datasources[i].providerId).carousel({interval: false});
provider += "</small></h2>";
provider += "<div id='collection-results-item'>" +
"<ul class='nav nav-tabs' role='tablist'>" +
"<li class='nav-item'>" +
"<a class='nav-link active' id='collection-results" + i + "-terms-tab' href='#collection-results" + i + "-terms-panel' data-toggle='tab' role='tab' aria-controls='collection-results" + i + "-terms-panel' aria-selected='true'>" +
__translator.translate("~eu.dariah.de.minfba.search.search.collections.terms") +
"</a>" +
"</li>" +
"<li class='nav-item'>" +
"<a class='nav-link' id='collection-results" + i + "-subjects-tab' href='#collection-results" + i + "-subjects-panel' data-toggle='tab' role='tab' aria-controls='collection-results" + i + "-subjects-panel' aria-selected='true'>" +
__translator.translate("~eu.dariah.de.minfba.search.search.collections.subjects") +
"</a>" +
"</li>" +
"</ul>" +
"<div class='tab-content'>" +
"<div class='tab-pane fade show active' id='collection-results" + i + "-terms-panel' role='tabpanel' aria-labelledby='collection-results" + i + "-terms-tab'>" +
"<div id=\"datasource-wordcloud-" + datasources[i].providerId + "-Wordcloud\" class=\"wordcloud\" style=\"height: " + this.options.wordcloud.height + "px;\"></div>" +
"</div>" +
"<div class='tab-pane fade' id='collection-results" + i + "-subjects-panel' role='tabpanel' aria-labelledby='collection-results" + i + "-subjects-tab'>" +
"<div id=\"datasource-wordcloud-" + datasources[i].providerId + "-Subject\" class=\"wordcloud\" style=\"height: " + this.options.wordcloud.height + "px;\"></div>" +
"</div>" +
"</div>" +
"</div>";
$("#search-results-collections").append(provider);
$("#search-available-collection-" + datasources[i].providerId).find(".search-available-collection-doccount").text(fmtDocCount);
var tagQuery = this.buildQuery(false);
......@@ -696,7 +693,7 @@ QueryHandler.prototype.handleSubject = function(subject) {
}
}
var label = $("<span class=\"label search-result-label\"><i class=\"fa fa-users\" aria-hidden=\"true\"></i> </span>");
var label = $("<span><i class=\"fa fa-users\" aria-hidden=\"true\"></i></span>");
if (strPrimary!==undefined) {
$(label).append("<u>" + __util.escapeHtml(strPrimary) + "</u>");
......@@ -708,7 +705,7 @@ QueryHandler.prototype.handleSubject = function(subject) {
_this.addFilter($(this).data("queryFilter"), $(this).html());
});
return $("<div class='search-result-label-wrapper'>").append(label);
return label;
}
QueryHandler.prototype.addFilter = function(queryFilter, html) {
......@@ -788,7 +785,7 @@ QueryHandler.prototype.createLink = function(link, type) {
} else {
linkLabel = (link["~"].length > 100 ? link["~"].substring(0, 100) + "..." : link["~"]);
}
return "<a href='" + link["~"] + "' target='_blank'><i class='fa fa-external-link' aria-hidden='true'></i> " + linkLabel + "</a><br />";
return "<li><a href='" + link["~"] + "' target='_blank'>" + linkLabel + "</a></li>";
};
......
Supports Markdown
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment