Commit ec1973b4 authored by Curtis Adam's avatar Curtis Adam

Add a modal backdrop to the search results

parent b8b99124
......@@ -3398,6 +3398,9 @@ $themes: (
}
//modal
#searchResultsContainer {
background-color: $modal_overlay !important;
}
.modal-open {
.modal.fade.in {
background-color: $modal_overlay !important;
......
......@@ -17,7 +17,8 @@ export let Search = class Search {
}
leftOffset = destination.offset().left;
target.css('max-height', ($(window).height() - offsetTop));
target.css('left', leftOffset);
target.css('max-width', ($(window).width()));
target.css('margin-left', leftOffset);
target.css('top', offsetTop);
} else {
target.removeAttr('style');
......
<template name="mainItemSearchResult">
<div id="searchResults" class="cards-search-element" style="{{#if
searchCategories}}display: unset !important;{{else}}display: none !important;{{/if}}">
{{#each searchCategories}}
<div class="list-group-item clearfix search-result-item cards-search-element">
<h4 class="list-group-item-heading search-subject search-subject-{{kind}} cards-search-element">{{{getCardsetIcons
this.shuffled}}}{{name}}</h4>
<p class="list-group-item-text search-result-info cards-search-element">
{{> cardsetLabels}}
<div id="searchResultsContainer" class="modal" style="{{#if searchCategories}}display: block !important;{{else}}display: none !important;{{/if}}">
<div id="searchResults" class="cards-search-element">
{{#each searchCategories}}
<div class="list-group-item clearfix search-result-item cards-search-element">
<h4 class="list-group-item-heading search-subject search-subject-{{kind}} cards-search-element">{{{getCardsetIcons
this.shuffled}}}{{name}}</h4>
<p class="list-group-item-text search-result-info cards-search-element">
{{> cardsetLabels}}
{{#with getAuthor this.owner}}
<span class="hidden-xs pull-right cards-search-element">
{{givenname}}
{{birthname}}
</span>
{{/with}}
</p>
{{#with getAuthor this.owner}}
<span class="hidden-xs pull-right cards-search-element">
<p class="list-group-item-text search-result-info visible-xs cards-search-element">
{{givenname}}
{{birthname}}
</span>
</p>
{{/with}}
</p>
{{#with getAuthor this.owner}}
<p class="list-group-item-text search-result-info visible-xs cards-search-element">
{{givenname}}
{{birthname}}
<p class="list-group-item-text search-result-info cards-search-element">
<a href="/cardset/{{_id}}" target="{{#if isShuffleRoute}}_blank{{/if}}"
class="btn btn-sm btn-raised open-search-result cards-search-element"><span class="flex-content cards-search-element"><i
class="fas fa-sign-in-alt cards-search-element"></i>&nbsp;{{#if this.shuffled}}{{_
"navbar-collapse.search.item.open.repetitorium"}}{{else}}{{_
"navbar-collapse.search.item.open.cardset"}}{{/if}}</span></a>
&nbsp;
{{#if isShuffleRoute}}
{{> filterIndexItemBottomShuffle}}
{{/if}}
</p>
{{/with}}
<p class="list-group-item-text search-result-info cards-search-element">
<a href="/cardset/{{_id}}" target="{{#if isShuffleRoute}}_blank{{/if}}"
class="btn btn-sm btn-raised open-search-result cards-search-element"><span class="flex-content cards-search-element"><i
class="fas fa-sign-in-alt cards-search-element"></i>&nbsp;{{#if this.shuffled}}{{_
"navbar-collapse.search.item.open.repetitorium"}}{{else}}{{_
"navbar-collapse.search.item.open.cardset"}}{{/if}}</span></a>
&nbsp;
{{#if isShuffleRoute}}
{{> filterIndexItemBottomShuffle}}
{{/if}}
</p>
<p class="list-group-item-text search-content markdeepCardset markdeepCardsetContent cards-search-element">{{#markdeep}}{{description}}{{/markdeep}}</p>
</div>
<div class="search-result-divider"></div>
{{/each}}
<p class="list-group-item-text search-content markdeepCardset markdeepCardsetContent cards-search-element">{{#markdeep}}{{description}}{{/markdeep}}</p>
</div>
<div class="search-result-divider"></div>
{{/each}}
</div>
</div>
</template>
......@@ -20,6 +20,7 @@ Template.mainItemSearchResult.events({
'click .open-search-result': function () {
if (!Route.isShuffle() && !Route.isEditShuffle()) {
MainNavigation.clearSearch();
$(document.body).addClass('modal-backdrop');
}
}
});
#searchResults {
display: block;
position: absolute;
float: left;
@media(max-width: 767px) {
......@@ -13,8 +14,6 @@
}
padding-top: 0;
padding-bottom: 0;
z-index: 1000;
margin: 0 !important;
background-color: hsla(100, 100%, 100%, 0.8) !important;
.open-search-result {
......@@ -23,6 +22,11 @@
}
}
#searchResultsContainer {
z-index: 1500 !important;
}
#searchResults .search-result-item {
border-bottom: solid $size_search_results_separator !important;
padding: 0 !important;
......
Markdown is supported
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