Merge pull request #376 from dalf/simple-image-detail

Browse Source 
Simple theme: image detail
This commit is contained in:
Alexandre Flament 2021-10-28 08:50:55 +02:00 committed by GitHub
commit 8985d3e6ef
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
21 changed files with 951 additions and 71 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

15
searx/static/themes/__common__/js/image_layout.js
View File

@ -11,11 +11,12 @@
*/
(function (w, d) {
function ImageLayout(container_selector, results_selector, img_selector, margin, maxHeight) {
function ImageLayout(container_selector, results_selector, img_selector, verticalMargin, horizontalMargin, maxHeight) {
this.container_selector = container_selector;
this.results_selector = results_selector;
this.img_selector = img_selector;
this.margin = margin;
this.verticalMargin = verticalMargin;
this.horizontalMargin = horizontalMargin;
this.maxHeight = maxHeight;
this.isAlignDone = true;
}
@ -45,7 +46,7 @@
}
}
return (width - images.length * this.margin) / r; //have to round down because Firefox will automatically roundup value with number of decimals > 3
return (width - images.length * this.verticalMargin) / r; //have to round down because Firefox will automatically roundup value with number of decimals > 3
};
ImageLayout.prototype._setSize = function (images, height) {
@ -62,10 +63,10 @@
}
img.style.width = imgWidth + 'px';
img.style.height = height + 'px';
img.style.marginLeft = '3px';
img.style.marginTop = '3px';
img.style.marginRight = this.margin - 7 + 'px'; // -4 is the negative margin of the inline element
img.style.marginBottom = this.margin - 7 + 'px';
img.style.marginLeft = this.horizontalMargin + 'px';
img.style.marginTop = this.horizontalMargin + 'px';
img.style.marginRight = this.verticalMargin - 7 + 'px'; // -4 is the negative margin of the inline element
img.style.marginBottom = this.verticalMargin - 7 + 'px';
resultNode = img.parentNode.parentNode;
if (!resultNode.classList.contains('js')) {
resultNode.classList.add('js');

BIN
searx/static/themes/oscar/css/logicodev-dark.min.css.map
View File

Binary file not shown.

17
searx/static/themes/oscar/js/searxng.js
View File

@ -179,7 +179,7 @@ $(document).ready(function(){
/**
* Layout images according to their sizes
*/
searxng.image_thumbnail_layout = new searxng.ImageLayout('#main_results', '#main_results .result-images', 'img.img-thumbnail', 15, 200);
searxng.image_thumbnail_layout = new searxng.ImageLayout('#main_results', '#main_results .result-images', 'img.img-thumbnail', 15, 3, 200);
searxng.image_thumbnail_layout.watch();
});
;/**
@ -330,11 +330,12 @@ $(document).ready(function(){
*/
(function (w, d) {
function ImageLayout(container_selector, results_selector, img_selector, margin, maxHeight) {
function ImageLayout(container_selector, results_selector, img_selector, verticalMargin, horizontalMargin, maxHeight) {
this.container_selector = container_selector;
this.results_selector = results_selector;
this.img_selector = img_selector;
this.margin = margin;
this.verticalMargin = verticalMargin;
this.horizontalMargin = horizontalMargin;
this.maxHeight = maxHeight;
this.isAlignDone = true;
}
@ -364,7 +365,7 @@ $(document).ready(function(){
}
}
return (width - images.length * this.margin) / r; //have to round down because Firefox will automatically roundup value with number of decimals > 3
return (width - images.length * this.verticalMargin) / r; //have to round down because Firefox will automatically roundup value with number of decimals > 3
};
ImageLayout.prototype._setSize = function (images, height) {
@ -381,10 +382,10 @@ $(document).ready(function(){
}
img.style.width = imgWidth + 'px';
img.style.height = height + 'px';
img.style.marginLeft = '3px';
img.style.marginTop = '3px';
img.style.marginRight = this.margin - 7 + 'px'; // -4 is the negative margin of the inline element
img.style.marginBottom = this.margin - 7 + 'px';
img.style.marginLeft = this.horizontalMargin + 'px';
img.style.marginTop = this.horizontalMargin + 'px';
img.style.marginRight = this.verticalMargin - 7 + 'px'; // -4 is the negative margin of the inline element
img.style.marginBottom = this.verticalMargin - 7 + 'px';
resultNode = img.parentNode.parentNode;
if (!resultNode.classList.contains('js')) {
resultNode.classList.add('js');

BIN
searx/static/themes/oscar/js/searxng.min.js vendored
View File

Binary file not shown.

BIN
searx/static/themes/oscar/js/searxng.min.js.map
View File

Binary file not shown.

2
searx/static/themes/oscar/src/js/element_modifiers.js
View File

@ -103,6 +103,6 @@ $(document).ready(function(){
/**
* Layout images according to their sizes
*/
searxng.image_thumbnail_layout = new searxng.ImageLayout('#main_results', '#main_results .result-images', 'img.img-thumbnail', 15, 200);
searxng.image_thumbnail_layout = new searxng.ImageLayout('#main_results', '#main_results .result-images', 'img.img-thumbnail', 15, 3, 200);
searxng.image_thumbnail_layout.watch();
});

237
searx/static/themes/simple/css/searxng-rtl.css
View File

@ -871,6 +871,13 @@ html {
--color-result-image-background: #000bbb;
--color-settings-tr-hover: #f7f7f7;
--color-settings-engine-description-font: #909090;
--color-result-detail-font: #fff;
--color-result-detail-label-font: lightgray;
--color-result-detail-background: #000;
--color-result-detail-hr: #333;
--color-result-detail-link: #8af;
--color-result-detail-loader-border: rgba(255, 255, 255, 0.2);
--color-result-detail-loader-borderleft: rgba(0, 0, 0, 0);
--color-toolkit-badge-font: #fff;
--color-toolkit-badge-background: #777;
--color-toolkit-kbd-font: #fff;
@ -941,6 +948,13 @@ html {
--color-result-engines-font: #777;
--color-result-search-url-border: #333;
--color-result-search-url-font: #fff;
--color-result-detail-font: #fff;
--color-result-detail-label-font: lightgray;
--color-result-detail-background: #000;
--color-result-detail-hr: #333;
--color-result-detail-link: #8af;
--color-result-detail-loader-border: rgba(255, 255, 255, 0.2);
--color-result-detail-loader-borderleft: rgba(0, 0, 0, 0);
--color-result-image-span-background-hover: rgba(0, 0, 0, 0.6);
--color-result-image-span-font: #fff;
--color-result-image-background: #8af;
@ -965,8 +979,8 @@ html {
--color-toolkit-engine-tooltip-border: #333;
--color-toolkit-engine-tooltip-shadow: #444;
--color-toolkit-engine-tooltip-background: #222;
--color-toolkit-loader-border: rgba(0, 0, 0, 0.2);
--color-toolkit-loader-borderleft: rgba(255, 255, 255, 0);
--color-toolkit-loader-border: rgba(255, 255, 255, 0.2);
--color-toolkit-loader-borderleft: rgba(0, 0, 0, 0);
}
}
/*
@ -1971,6 +1985,213 @@ td:hover .engine-tooltip,
text-align: left;
}
}
#main_results #results.image-detail-open.only_template_images {
width: 59.25rem !important;
}
#main_results #results.only_template_images.image-detail-open #backToTop {
left: 56.75rem !important;
right: inherit;
}
article.result-images .detail {
display: none;
}
#results.image-detail-open article.result-images[data-vim-selected] .detail {
display: flex;
flex-direction: column;
position: fixed;
left: 60rem;
right: 0;
top: 7rem;
bottom: 0;
background: var(--color-result-detail-background);
border: 1px solid var(--color-result-detail-background);
z-index: 10000;
padding: 4rem 3rem 3rem 3rem;
}
#results.image-detail-open article.result-images[data-vim-selected] .detail a.result-images-source {
display: block;
flex: 1;
text-align: left;
width: 100%;
border: none;
text-decoration: none;
}
#results.image-detail-open article.result-images[data-vim-selected] .detail a.result-images-source img {
padding: 0;
margin: 0;
border: none;
object-fit: contain;
width: inherit;
max-width: 100%;
min-height: inherit;
max-height: calc(100vh - 25rem - 7rem);
background: inherit;
}
#results.image-detail-open article.result-images[data-vim-selected] .detail .result-images-labels {
color: var(--color-result-detail-font);
max-height: 16rem;
min-height: 16rem;
}
#results.image-detail-open article.result-images[data-vim-selected] .detail .result-images-labels hr {
border-top: 1px solid var(--color-result-detail-hr);
border-bottom: none;
}
#results.image-detail-open article.result-images[data-vim-selected] .detail .result-images-labels h4 {
height: 2rem;
overflow: hidden;
text-overflow: ellipsis;
font-size: 0.9rem;
}
#results.image-detail-open article.result-images[data-vim-selected] .detail .result-images-labels p {
color: var(--color-result-detail-label-font);
font-size: 0.9rem;
}
#results.image-detail-open article.result-images[data-vim-selected] .detail .result-images-labels p span {
display: inline-block;
width: 12rem;
}
#results.image-detail-open article.result-images[data-vim-selected] .detail .result-images-labels h4,
#results.image-detail-open article.result-images[data-vim-selected] .detail .result-images-labels p,
#results.image-detail-open article.result-images[data-vim-selected] .detail .result-images-labels a {
text-align: left;
}
#results.image-detail-open article.result-images[data-vim-selected] .detail .result-images-labels p.result-content {
height: 2rem;
overflow: hidden;
text-overflow: ellipsis;
}
#results.image-detail-open article.result-images[data-vim-selected] .detail .result-images-labels p.result-url {
white-space: nowrap;
overflow-x: hidden;
text-overflow: ellipsis;
}
#results.image-detail-open article.result-images[data-vim-selected] .detail .result-images-labels p.result-content:hover,
#results.image-detail-open article.result-images[data-vim-selected] .detail .result-images-labels p.result-url:hover {
position: relative;
overflow: inherit !important;
background: var(--color-result-detail-background);
text-overflow: inherit !important;
}
#results.image-detail-open article.result-images[data-vim-selected] .detail .result-images-labels a,
#results.image-detail-open article.result-images[data-vim-selected] .detail .result-images-labels a:visited,
#results.image-detail-open article.result-images[data-vim-selected] .detail .result-images-labels a:hover,
#results.image-detail-open article.result-images[data-vim-selected] .detail .result-images-labels a:active {
color: var(--color-result-detail-link);
}
#results.image-detail-open article.result-images[data-vim-selected] .detail .result-images-labels a:hover {
text-decoration: underline;
}
#results.image-detail-open article.result-images[data-vim-selected] .detail a.result-detail-close {
top: 1rem;
left: 1rem;
padding: 0.4rem;
}
#results.image-detail-open article.result-images[data-vim-selected] .detail a.result-detail-previous {
top: 1rem;
right: 6rem;
padding: 0.4rem 0.5rem 0.4rem 0.3rem;
}
#results.image-detail-open article.result-images[data-vim-selected] .detail a.result-detail-next {
top: 1rem;
right: 2rem;
padding: 0.4rem;
}
#results.image-detail-open article.result-images[data-vim-selected] .detail a.result-detail-close,
#results.image-detail-open article.result-images[data-vim-selected] .detail a.result-detail-next,
#results.image-detail-open article.result-images[data-vim-selected] .detail a.result-detail-previous {
border-radius: 50%;
display: block;
width: 1.5rem;
height: 1.5rem;
position: absolute;
filter: opacity(40%);
z-index: 2000002;
}
#results.image-detail-open article.result-images[data-vim-selected] .detail a.result-detail-close span,
#results.image-detail-open article.result-images[data-vim-selected] .detail a.result-detail-next span,
#results.image-detail-open article.result-images[data-vim-selected] .detail a.result-detail-previous span {
display: block;
width: 1.5rem;
height: 1.5rem;
text-align: center;
}
#results.image-detail-open article.result-images[data-vim-selected] .detail a.result-detail-next span::before,
#results.image-detail-open article.result-images[data-vim-selected] .detail a.result-detail-previous span::before {
vertical-align: sub;
}
#results.image-detail-open article.result-images[data-vim-selected] .detail a.result-detail-close,
#results.image-detail-open article.result-images[data-vim-selected] .detail a.result-detail-close:visited,
#results.image-detail-open article.result-images[data-vim-selected] .detail a.result-detail-close:hover,
#results.image-detail-open article.result-images[data-vim-selected] .detail a.result-detail-close:active,
#results.image-detail-open article.result-images[data-vim-selected] .detail a.result-detail-previous,
#results.image-detail-open article.result-images[data-vim-selected] .detail a.result-detail-previous:visited,
#results.image-detail-open article.result-images[data-vim-selected] .detail a.result-detail-previous:hover,
#results.image-detail-open article.result-images[data-vim-selected] .detail a.result-detail-previous:active,
#results.image-detail-open article.result-images[data-vim-selected] .detail a.result-detail-next,
#results.image-detail-open article.result-images[data-vim-selected] .detail a.result-detail-next:visited,
#results.image-detail-open article.result-images[data-vim-selected] .detail a.result-detail-next:hover,
#results.image-detail-open article.result-images[data-vim-selected] .detail a.result-detail-next:active {
color: var(--color-result-detail-font);
background: var(--color-result-detail-background);
border: 1px solid var(--color-result-detail-font);
}
#results.image-detail-open article.result-images[data-vim-selected] .detail a.result-detail-close:focus,
#results.image-detail-open article.result-images[data-vim-selected] .detail a.result-detail-close:hover,
#results.image-detail-open article.result-images[data-vim-selected] .detail a.result-detail-previous:focus,
#results.image-detail-open article.result-images[data-vim-selected] .detail a.result-detail-previous:hover,
#results.image-detail-open article.result-images[data-vim-selected] .detail a.result-detail-next:focus,
#results.image-detail-open article.result-images[data-vim-selected] .detail a.result-detail-next:hover {
filter: opacity(80%);
}
#results.image-detail-open article.result-images[data-vim-selected] .detail .loader {
position: absolute;
top: 1rem;
right: 50%;
border-top: 0.5em solid var(--color-result-detail-loader-border);
border-right: 0.5em solid var(--color-result-detail-loader-border);
border-bottom: 0.5em solid var(--color-result-detail-loader-border);
border-left: 0.5em solid var(--color-result-detail-loader-borderleft);
}
#results.image-detail-open.scrolling article.result-images[data-vim-selected] .detail {
top: 0;
}
#results.image-detail-open.scrolling article.result-images[data-vim-selected] .detail a.result-images-source img {
max-height: calc(100vh - 25rem);
}
@media screen and (max-width: 80em) {
#results.image-detail-open article.result-images[data-vim-selected] .detail {
top: 0;
left: 0;
}
#results.image-detail-open article.result-images[data-vim-selected] .detail a.result-images-source {
display: flex;
flex-direction: column;
justify-content: center;
}
#results.image-detail-open article.result-images[data-vim-selected] .detail a.result-images-source img {
width: 100%;
max-height: calc(100vh - 24rem);
}
#results.image-detail-open article.result-images[data-vim-selected] .detail a.result-detail-next {
right: 1rem;
}
}
@media screen and (max-width: 50em) {
#results.image-detail-open article.result-images[data-vim-selected] .detail {
top: 0;
left: 0;
padding: 1rem;
}
#results.image-detail-open article.result-images[data-vim-selected] .detail a.result-images-source img {
width: 100%;
max-height: calc(100vh - 20rem);
margin: 0;
}
#results.image-detail-open article.result-images[data-vim-selected] .detail .result-images-labels p span {
width: inherit;
margin-right: 1rem;
}
}
#main_index {
margin-top: 16em;
}
@ -2457,6 +2678,9 @@ article[data-vim-selected]::before {
article.result-images[data-vim-selected] {
background: var(--color-result-vim-arrow);
}
article.result-images[data-vim-selected] .image_thumbnail {
filter: opacity(60%);
}
article.result-images[data-vim-selected]::before {
display: none;
content: "";
@ -2577,17 +2801,17 @@ article.result-images[data-vim-selected]::before {
}
.result-images img {
float: inherit;
margin: 0;
margin: 0.125rem;
padding: 0;
border: none;
max-height: 200px;
background: var(--color-result-image-background);
}
.result-images span a {
.result-images span.title {
display: none;
color: var(--color-result-image-span-font);
}
.result-images:hover span a {
.result-images:hover span.title {
display: block;
position: absolute;
bottom: 0;
@ -2824,6 +3048,9 @@ article.result-images[data-vim-selected]::before {
margin: 0;
padding: 0.7em;
}
#results.scrolling #backToTop {
opacity: 1;
}
@media screen and (max-width: 80em) {
#main_preferences,
#main_about,

BIN
searx/static/themes/simple/css/searxng-rtl.min.css vendored
View File

Binary file not shown.

BIN
searx/static/themes/simple/css/searxng-rtl.min.css.map
View File

Binary file not shown.

237
searx/static/themes/simple/css/searxng.css
View File

@ -871,6 +871,13 @@ html {
--color-result-image-background: #000bbb;
--color-settings-tr-hover: #f7f7f7;
--color-settings-engine-description-font: #909090;
--color-result-detail-font: #fff;
--color-result-detail-label-font: lightgray;
--color-result-detail-background: #000;
--color-result-detail-hr: #333;
--color-result-detail-link: #8af;
--color-result-detail-loader-border: rgba(255, 255, 255, 0.2);
--color-result-detail-loader-borderleft: rgba(0, 0, 0, 0);
--color-toolkit-badge-font: #fff;
--color-toolkit-badge-background: #777;
--color-toolkit-kbd-font: #fff;
@ -941,6 +948,13 @@ html {
--color-result-engines-font: #777;
--color-result-search-url-border: #333;
--color-result-search-url-font: #fff;
--color-result-detail-font: #fff;
--color-result-detail-label-font: lightgray;
--color-result-detail-background: #000;
--color-result-detail-hr: #333;
--color-result-detail-link: #8af;
--color-result-detail-loader-border: rgba(255, 255, 255, 0.2);
--color-result-detail-loader-borderleft: rgba(0, 0, 0, 0);
--color-result-image-span-background-hover: rgba(0, 0, 0, 0.6);
--color-result-image-span-font: #fff;
--color-result-image-background: #8af;
@ -965,8 +979,8 @@ html {
--color-toolkit-engine-tooltip-border: #333;
--color-toolkit-engine-tooltip-shadow: #444;
--color-toolkit-engine-tooltip-background: #222;
--color-toolkit-loader-border: rgba(0, 0, 0, 0.2);
--color-toolkit-loader-borderleft: rgba(255, 255, 255, 0);
--color-toolkit-loader-border: rgba(255, 255, 255, 0.2);
--color-toolkit-loader-borderleft: rgba(0, 0, 0, 0);
}
}
/*
@ -1971,6 +1985,213 @@ td:hover .engine-tooltip,
text-align: left;
}
}
#main_results #results.image-detail-open.only_template_images {
width: 59.25rem !important;
}
#main_results #results.only_template_images.image-detail-open #backToTop {
left: 56.75rem !important;
right: inherit;
}
article.result-images .detail {
display: none;
}
#results.image-detail-open article.result-images[data-vim-selected] .detail {
display: flex;
flex-direction: column;
position: fixed;
left: 60rem;
right: 0;
top: 7rem;
bottom: 0;
background: var(--color-result-detail-background);
border: 1px solid var(--color-result-detail-background);
z-index: 10000;
padding: 4rem 3rem 3rem 3rem;
}
#results.image-detail-open article.result-images[data-vim-selected] .detail a.result-images-source {
display: block;
flex: 1;
text-align: left;
width: 100%;
border: none;
text-decoration: none;
}
#results.image-detail-open article.result-images[data-vim-selected] .detail a.result-images-source img {
padding: 0;
margin: 0;
border: none;
object-fit: contain;
width: inherit;
max-width: 100%;
min-height: inherit;
max-height: calc(100vh - 25rem - 7rem);
background: inherit;
}
#results.image-detail-open article.result-images[data-vim-selected] .detail .result-images-labels {
color: var(--color-result-detail-font);
max-height: 16rem;
min-height: 16rem;
}
#results.image-detail-open article.result-images[data-vim-selected] .detail .result-images-labels hr {
border-top: 1px solid var(--color-result-detail-hr);
border-bottom: none;
}
#results.image-detail-open article.result-images[data-vim-selected] .detail .result-images-labels h4 {
height: 2rem;
overflow: hidden;
text-overflow: ellipsis;
font-size: 0.9rem;
}
#results.image-detail-open article.result-images[data-vim-selected] .detail .result-images-labels p {
color: var(--color-result-detail-label-font);
font-size: 0.9rem;
}
#results.image-detail-open article.result-images[data-vim-selected] .detail .result-images-labels p span {
display: inline-block;
width: 12rem;
}
#results.image-detail-open article.result-images[data-vim-selected] .detail .result-images-labels h4,
#results.image-detail-open article.result-images[data-vim-selected] .detail .result-images-labels p,
#results.image-detail-open article.result-images[data-vim-selected] .detail .result-images-labels a {
text-align: left;
}
#results.image-detail-open article.result-images[data-vim-selected] .detail .result-images-labels p.result-content {
height: 2rem;
overflow: hidden;
text-overflow: ellipsis;
}
#results.image-detail-open article.result-images[data-vim-selected] .detail .result-images-labels p.result-url {
white-space: nowrap;
overflow-x: hidden;
text-overflow: ellipsis;
}
#results.image-detail-open article.result-images[data-vim-selected] .detail .result-images-labels p.result-content:hover,
#results.image-detail-open article.result-images[data-vim-selected] .detail .result-images-labels p.result-url:hover {
position: relative;
overflow: inherit !important;
background: var(--color-result-detail-background);
text-overflow: inherit !important;
}
#results.image-detail-open article.result-images[data-vim-selected] .detail .result-images-labels a,
#results.image-detail-open article.result-images[data-vim-selected] .detail .result-images-labels a:visited,
#results.image-detail-open article.result-images[data-vim-selected] .detail .result-images-labels a:hover,
#results.image-detail-open article.result-images[data-vim-selected] .detail .result-images-labels a:active {
color: var(--color-result-detail-link);
}
#results.image-detail-open article.result-images[data-vim-selected] .detail .result-images-labels a:hover {
text-decoration: underline;
}
#results.image-detail-open article.result-images[data-vim-selected] .detail a.result-detail-close {
top: 1rem;
left: 1rem;
padding: 0.4rem;
}
#results.image-detail-open article.result-images[data-vim-selected] .detail a.result-detail-previous {
top: 1rem;
right: 6rem;
padding: 0.4rem 0.5rem 0.4rem 0.3rem;
}
#results.image-detail-open article.result-images[data-vim-selected] .detail a.result-detail-next {
top: 1rem;
right: 2rem;
padding: 0.4rem;
}
#results.image-detail-open article.result-images[data-vim-selected] .detail a.result-detail-close,
#results.image-detail-open article.result-images[data-vim-selected] .detail a.result-detail-next,
#results.image-detail-open article.result-images[data-vim-selected] .detail a.result-detail-previous {
border-radius: 50%;
display: block;
width: 1.5rem;
height: 1.5rem;
position: absolute;
filter: opacity(40%);
z-index: 2000002;
}
#results.image-detail-open article.result-images[data-vim-selected] .detail a.result-detail-close span,
#results.image-detail-open article.result-images[data-vim-selected] .detail a.result-detail-next span,
#results.image-detail-open article.result-images[data-vim-selected] .detail a.result-detail-previous span {
display: block;
width: 1.5rem;
height: 1.5rem;
text-align: center;
}
#results.image-detail-open article.result-images[data-vim-selected] .detail a.result-detail-next span::before,
#results.image-detail-open article.result-images[data-vim-selected] .detail a.result-detail-previous span::before {
vertical-align: sub;
}
#results.image-detail-open article.result-images[data-vim-selected] .detail a.result-detail-close,
#results.image-detail-open article.result-images[data-vim-selected] .detail a.result-detail-close:visited,
#results.image-detail-open article.result-images[data-vim-selected] .detail a.result-detail-close:hover,
#results.image-detail-open article.result-images[data-vim-selected] .detail a.result-detail-close:active,
#results.image-detail-open article.result-images[data-vim-selected] .detail a.result-detail-previous,
#results.image-detail-open article.result-images[data-vim-selected] .detail a.result-detail-previous:visited,
#results.image-detail-open article.result-images[data-vim-selected] .detail a.result-detail-previous:hover,
#results.image-detail-open article.result-images[data-vim-selected] .detail a.result-detail-previous:active,
#results.image-detail-open article.result-images[data-vim-selected] .detail a.result-detail-next,
#results.image-detail-open article.result-images[data-vim-selected] .detail a.result-detail-next:visited,
#results.image-detail-open article.result-images[data-vim-selected] .detail a.result-detail-next:hover,
#results.image-detail-open article.result-images[data-vim-selected] .detail a.result-detail-next:active {
color: var(--color-result-detail-font);
background: var(--color-result-detail-background);
border: 1px solid var(--color-result-detail-font);
}
#results.image-detail-open article.result-images[data-vim-selected] .detail a.result-detail-close:focus,
#results.image-detail-open article.result-images[data-vim-selected] .detail a.result-detail-close:hover,
#results.image-detail-open article.result-images[data-vim-selected] .detail a.result-detail-previous:focus,
#results.image-detail-open article.result-images[data-vim-selected] .detail a.result-detail-previous:hover,
#results.image-detail-open article.result-images[data-vim-selected] .detail a.result-detail-next:focus,
#results.image-detail-open article.result-images[data-vim-selected] .detail a.result-detail-next:hover {
filter: opacity(80%);
}
#results.image-detail-open article.result-images[data-vim-selected] .detail .loader {
position: absolute;
top: 1rem;
right: 50%;
border-top: 0.5em solid var(--color-result-detail-loader-border);
border-right: 0.5em solid var(--color-result-detail-loader-border);
border-bottom: 0.5em solid var(--color-result-detail-loader-border);
border-left: 0.5em solid var(--color-result-detail-loader-borderleft);
}
#results.image-detail-open.scrolling article.result-images[data-vim-selected] .detail {
top: 0;
}
#results.image-detail-open.scrolling article.result-images[data-vim-selected] .detail a.result-images-source img {
max-height: calc(100vh - 25rem);
}
@media screen and (max-width: 80em) {
#results.image-detail-open article.result-images[data-vim-selected] .detail {
top: 0;
left: 0;
}
#results.image-detail-open article.result-images[data-vim-selected] .detail a.result-images-source {
display: flex;
flex-direction: column;
justify-content: center;
}
#results.image-detail-open article.result-images[data-vim-selected] .detail a.result-images-source img {
width: 100%;
max-height: calc(100vh - 24rem);
}
#results.image-detail-open article.result-images[data-vim-selected] .detail a.result-detail-next {
right: 1rem;
}
}
@media screen and (max-width: 50em) {
#results.image-detail-open article.result-images[data-vim-selected] .detail {
top: 0;
left: 0;
padding: 1rem;
}
#results.image-detail-open article.result-images[data-vim-selected] .detail a.result-images-source img {
width: 100%;
max-height: calc(100vh - 20rem);
margin: 0;
}
#results.image-detail-open article.result-images[data-vim-selected] .detail .result-images-labels p span {
width: inherit;
margin-right: 1rem;
}
}
#main_index {
margin-top: 16em;
}
@ -2457,6 +2678,9 @@ article[data-vim-selected]::before {
article.result-images[data-vim-selected] {
background: var(--color-result-vim-arrow);
}
article.result-images[data-vim-selected] .image_thumbnail {
filter: opacity(60%);
}
article.result-images[data-vim-selected]::before {
display: none;
content: "";
@ -2577,17 +2801,17 @@ article.result-images[data-vim-selected]::before {
}
.result-images img {
float: inherit;
margin: 0;
margin: 0.125rem;
padding: 0;
border: none;
max-height: 200px;
background: var(--color-result-image-background);
}
.result-images span a {
.result-images span.title {
display: none;
color: var(--color-result-image-span-font);
}
.result-images:hover span a {
.result-images:hover span.title {
display: block;
position: absolute;
bottom: 0;
@ -2824,6 +3048,9 @@ article.result-images[data-vim-selected]::before {
margin: 0;
padding: 0.7em;
}
#results.scrolling #backToTop {
opacity: 1;
}
@media screen and (max-width: 80em) {
#main_preferences,
#main_about,

BIN
searx/static/themes/simple/css/searxng.min.css vendored
View File

Binary file not shown.

BIN
searx/static/themes/simple/css/searxng.min.css.map
View File

Binary file not shown.

102
searx/static/themes/simple/js/searxng.js
View File

@ -276,9 +276,7 @@ searxng.ready(function() {
if (Object.prototype.hasOwnProperty.call(vimKeys, e.keyCode) && !e.ctrlKey && !e.altKey && !e.shiftKey && !e.metaKey) {
var tagName = e.target.tagName.toLowerCase();
if (e.keyCode === 27) {
if (tagName === 'input' || tagName === 'select' || tagName === 'textarea') {
vimKeys[e.keyCode].fun();
}
vimKeys[e.keyCode].fun(e);
} else {
if (e.target === document.body || tagName === 'a' || tagName === 'button') {
e.preventDefault();
@ -365,9 +363,12 @@ searxng.ready(function() {
document.location.reload(true);
}
function removeFocus() {
if (document.activeElement) {
function removeFocus(e) {
const tagName = e.target.tagName.toLowerCase();
if (document.activeElement && (tagName === 'input' || tagName === 'select' || tagName === 'textarea')) {
document.activeElement.blur();
} else {
searxng.closeDetail();
}
}
@ -437,6 +438,9 @@ searxng.ready(function() {
function openResult(newTab) {
return function() {
var link = document.querySelector('.result[data-vim-selected] h3 a');
if (link === null) {
link = document.querySelector('.result[data-vim-selected] > a');
}
if (link !== null) {
var url = link.getAttribute('href');
if (newTab) {
@ -520,6 +524,10 @@ searxng.ready(function() {
return;
}
}
searxng.scrollPageToSelected = scrollPageToSelected;
searxng.selectNext = highlightResult('down');
searxng.selectPrevious = highlightResult('up');
});
;/* SPDX-License-Identifier: AGPL-3.0-or-later */
/* global L */
@ -628,7 +636,7 @@ searxng.ready(function() {
'use strict';
searxng.ready(function() {
searxng.image_thumbnail_layout = new searxng.ImageLayout('#urls', '#urls .result-images', 'img.image_thumbnail', 10, 200);
searxng.image_thumbnail_layout = new searxng.ImageLayout('#urls', '#urls .result-images', 'img.image_thumbnail', 14, 6, 200);
searxng.image_thumbnail_layout.watch();
searxng.on('.btn-collapse', 'click', function() {
@ -656,17 +664,74 @@ searxng.ready(function() {
}
});
function selectImage(e) {
/*eslint no-unused-vars: 0*/
let t = e.target;
while (t && t.nodeName != 'ARTICLE') {
t = t.parentNode;
}
if (t) {
// load full size image in background
const imgElement = t.querySelector('.result-images-source img');
const thumbnailElement = t.querySelector('.image_thumbnail');
const detailElement = t.querySelector('.detail');
if (imgElement) {
const imgSrc = imgElement.getAttribute('data-src');
if (imgSrc) {
const loader = d.createElement('div');
const imgLoader = new Image();
loader.classList.add('loader');
detailElement.appendChild(loader);
imgLoader.onload = e => {
imgElement.src = imgSrc;
loader.remove();
};
imgLoader.onerror = e => {
loader.remove();
};
imgLoader.src = imgSrc;
imgElement.src = thumbnailElement.src;
imgElement.removeAttribute('data-src');
}
}
}
d.getElementById('results').classList.add('image-detail-open');
searxng.image_thumbnail_layout.align();
searxng.scrollPageToSelected();
}
searxng.closeDetail = function(e) {
d.getElementById('results').classList.remove('image-detail-open');
searxng.image_thumbnail_layout.align();
searxng.scrollPageToSelected();
}
searxng.on('.result-images', 'click', e => {
e.preventDefault();
selectImage(e);
});
searxng.on('.result-images a', 'focus', selectImage, true);
searxng.on('.result-detail-close', 'click', e => {
e.preventDefault();
searxng.closeDetail();
});
searxng.on('.result-detail-previous', 'click', e => searxng.selectPrevious(false));
searxng.on('.result-detail-next', 'click', e => searxng.selectNext(false));
w.addEventListener('scroll', function() {
var e = d.getElementById('backToTop'),
scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
scrollTop = document.documentElement.scrollTop || document.body.scrollTop,
results = d.getElementById('results');
if (e !== null) {
if (scrollTop >= 200) {
e.style.opacity = 1;
if (scrollTop >= 100) {
results.classList.add('scrolling');
} else {
e.style.opacity = 0;
results.classList.remove('scrolling');
}
}
});
}, true);
});
@ -791,11 +856,12 @@ searxng.ready(function() {
*/
(function (w, d) {
function ImageLayout(container_selector, results_selector, img_selector, margin, maxHeight) {
function ImageLayout(container_selector, results_selector, img_selector, verticalMargin, horizontalMargin, maxHeight) {
this.container_selector = container_selector;
this.results_selector = results_selector;
this.img_selector = img_selector;
this.margin = margin;
this.verticalMargin = verticalMargin;
this.horizontalMargin = horizontalMargin;
this.maxHeight = maxHeight;
this.isAlignDone = true;
}
@ -825,7 +891,7 @@ searxng.ready(function() {
}
}
return (width - images.length * this.margin) / r; //have to round down because Firefox will automatically roundup value with number of decimals > 3
return (width - images.length * this.verticalMargin) / r; //have to round down because Firefox will automatically roundup value with number of decimals > 3
};
ImageLayout.prototype._setSize = function (images, height) {
@ -842,10 +908,10 @@ searxng.ready(function() {
}
img.style.width = imgWidth + 'px';
img.style.height = height + 'px';
img.style.marginLeft = '3px';
img.style.marginTop = '3px';
img.style.marginRight = this.margin - 7 + 'px'; // -4 is the negative margin of the inline element
img.style.marginBottom = this.margin - 7 + 'px';
img.style.marginLeft = this.horizontalMargin + 'px';
img.style.marginTop = this.horizontalMargin + 'px';
img.style.marginRight = this.verticalMargin - 7 + 'px'; // -4 is the negative margin of the inline element
img.style.marginBottom = this.verticalMargin - 7 + 'px';
resultNode = img.parentNode.parentNode;
if (!resultNode.classList.contains('js')) {
resultNode.classList.add('js');

BIN
searx/static/themes/simple/js/searxng.min.js vendored
View File

Binary file not shown.

BIN
searx/static/themes/simple/js/searxng.min.js.map
View File

Binary file not shown.

18
searx/static/themes/simple/src/js/main/searx_keyboard.js
View File

@ -124,9 +124,7 @@ searxng.ready(function() {
if (Object.prototype.hasOwnProperty.call(vimKeys, e.keyCode) && !e.ctrlKey && !e.altKey && !e.shiftKey && !e.metaKey) {
var tagName = e.target.tagName.toLowerCase();
if (e.keyCode === 27) {
if (tagName === 'input' || tagName === 'select' || tagName === 'textarea') {
vimKeys[e.keyCode].fun();
}
vimKeys[e.keyCode].fun(e);
} else {
if (e.target === document.body || tagName === 'a' || tagName === 'button') {
e.preventDefault();
@ -213,9 +211,12 @@ searxng.ready(function() {
document.location.reload(true);
}
function removeFocus() {
if (document.activeElement) {
function removeFocus(e) {
const tagName = e.target.tagName.toLowerCase();
if (document.activeElement && (tagName === 'input' || tagName === 'select' || tagName === 'textarea')) {
document.activeElement.blur();
} else {
searxng.closeDetail();
}
}
@ -285,6 +286,9 @@ searxng.ready(function() {
function openResult(newTab) {
return function() {
var link = document.querySelector('.result[data-vim-selected] h3 a');
if (link === null) {
link = document.querySelector('.result[data-vim-selected] > a');
}
if (link !== null) {
var url = link.getAttribute('href');
if (newTab) {
@ -368,4 +372,8 @@ searxng.ready(function() {
return;
}
}
searxng.scrollPageToSelected = scrollPageToSelected;
searxng.selectNext = highlightResult('down');
searxng.selectPrevious = highlightResult('up');
});

69
searx/static/themes/simple/src/js/main/searx_results.js
View File

@ -3,7 +3,7 @@
'use strict';
searxng.ready(function() {
searxng.image_thumbnail_layout = new searxng.ImageLayout('#urls', '#urls .result-images', 'img.image_thumbnail', 10, 200);
searxng.image_thumbnail_layout = new searxng.ImageLayout('#urls', '#urls .result-images', 'img.image_thumbnail', 14, 6, 200);
searxng.image_thumbnail_layout.watch();
searxng.on('.btn-collapse', 'click', function() {
@ -31,17 +31,74 @@
}
});
function selectImage(e) {
/*eslint no-unused-vars: 0*/
let t = e.target;
while (t && t.nodeName != 'ARTICLE') {
t = t.parentNode;
}
if (t) {
// load full size image in background
const imgElement = t.querySelector('.result-images-source img');
const thumbnailElement = t.querySelector('.image_thumbnail');
const detailElement = t.querySelector('.detail');
if (imgElement) {
const imgSrc = imgElement.getAttribute('data-src');
if (imgSrc) {
const loader = d.createElement('div');
const imgLoader = new Image();
loader.classList.add('loader');
detailElement.appendChild(loader);
imgLoader.onload = e => {
imgElement.src = imgSrc;
loader.remove();
};
imgLoader.onerror = e => {
loader.remove();
};
imgLoader.src = imgSrc;
imgElement.src = thumbnailElement.src;
imgElement.removeAttribute('data-src');
}
}
}
d.getElementById('results').classList.add('image-detail-open');
searxng.image_thumbnail_layout.align();
searxng.scrollPageToSelected();
}
searxng.closeDetail = function(e) {
d.getElementById('results').classList.remove('image-detail-open');
searxng.image_thumbnail_layout.align();
searxng.scrollPageToSelected();
}
searxng.on('.result-images', 'click', e => {
e.preventDefault();
selectImage(e);
});
searxng.on('.result-images a', 'focus', selectImage, true);
searxng.on('.result-detail-close', 'click', e => {
e.preventDefault();
searxng.closeDetail();
});
searxng.on('.result-detail-previous', 'click', e => searxng.selectPrevious(false));
searxng.on('.result-detail-next', 'click', e => searxng.selectNext(false));
w.addEventListener('scroll', function() {
var e = d.getElementById('backToTop'),
scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
scrollTop = document.documentElement.scrollTop || document.body.scrollTop,
results = d.getElementById('results');
if (e !== null) {
if (scrollTop >= 200) {
e.style.opacity = 1;
if (scrollTop >= 100) {
results.classList.add('scrolling');
} else {
e.style.opacity = 0;
results.classList.remove('scrolling');
}
}
});
}, true);
});

20
searx/static/themes/simple/src/less/definitions.less
View File

@ -71,6 +71,14 @@ html {
/// Settings Colors
--color-settings-tr-hover: #f7f7f7;
--color-settings-engine-description-font: darken(#dcdcdc, 30%);
/// Detail modal
--color-result-detail-font: #fff;
--color-result-detail-label-font: lightgray;
--color-result-detail-background: #000;
--color-result-detail-hr: #333;
--color-result-detail-link: #8af;
--color-result-detail-loader-border: rgba(255, 255, 255, 0.2);
--color-result-detail-loader-borderleft: rgba(0, 0, 0, 0);
/// Toolkit Colors
--color-toolkit-badge-font: #fff;
--color-toolkit-badge-background: #777;
@ -156,6 +164,14 @@ html {
--color-result-engines-font: #777;
--color-result-search-url-border: #333;
--color-result-search-url-font: #fff;
/// Detail modal : same as the light version
--color-result-detail-font: #fff;
--color-result-detail-label-font: lightgray;
--color-result-detail-background: #000;
--color-result-detail-hr: #333;
--color-result-detail-link: #8af;
--color-result-detail-loader-border: rgba(255, 255, 255, 0.2);
--color-result-detail-loader-borderleft: rgba(0, 0, 0, 0);
// Images Colors
--color-result-image-span-background-hover: rgba(0, 0, 0, 0.6);
--color-result-image-span-font: #fff;
@ -183,8 +199,8 @@ html {
--color-toolkit-engine-tooltip-border: #333;
--color-toolkit-engine-tooltip-shadow: #444;
--color-toolkit-engine-tooltip-background: #222;
--color-toolkit-loader-border: rgba(0, 0, 0, 0.2);
--color-toolkit-loader-borderleft: rgba(255, 255, 255, 0);
--color-toolkit-loader-border: rgba(255, 255, 255, 0.2);
--color-toolkit-loader-borderleft: rgba(0, 0, 0, 0);
}
}

243
searx/static/themes/simple/src/less/detail.less Normal file
View File

@ -0,0 +1,243 @@
#main_results #results.image-detail-open.only_template_images {
width: 59.25rem !important;
}
#main_results #results.only_template_images.image-detail-open #backToTop {
left: 56.75rem !important;
right: inherit;
}
article.result-images .detail {
display: none;
}
#results.image-detail-open article.result-images[data-vim-selected] .detail {
display: flex;
flex-direction: column;
position: fixed;
left: 60rem;
right: 0;
top: 7rem;
bottom: 0;
background: var(--color-result-detail-background);
border: 1px solid var(--color-result-detail-background);
z-index: 10000;
padding: 4rem 3rem 3rem 3rem;
a.result-images-source {
display: block;
flex: 1;
text-align: left;
width: 100%;
border: none;
text-decoration: none;
img {
padding: 0;
margin: 0;
border: none;
object-fit: contain;
width: inherit;
max-width: 100%;
min-height: inherit;
max-height: calc(100vh - 25rem - 7rem);
background: inherit;
}
}
.result-images-labels {
color: var(--color-result-detail-font);
max-height: 16rem;
min-height: 16rem;
hr {
border-top: 1px solid var(--color-result-detail-hr);
border-bottom: none;
}
h4 {
height: 2rem;
overflow: hidden;
text-overflow: ellipsis;
font-size: 0.9rem;
}
p {
color: var(--color-result-detail-label-font);
font-size: 0.9rem;
span {
display: inline-block;
width: 12rem;
}
}
h4,
p,
a {
text-align: left;
}
p.result-content {
height: 2rem;
overflow: hidden;
text-overflow: ellipsis;
}
p.result-url {
white-space: nowrap;
overflow-x: hidden;
text-overflow: ellipsis;
}
p.result-content:hover,
p.result-url:hover {
position: relative;
overflow: inherit !important;
background: var(--color-result-detail-background);
text-overflow: inherit !important;
}
a,
a:visited,
a:hover,
a:active {
color: var(--color-result-detail-link);
}
a:hover {
text-decoration: underline;
}
}
a.result-detail-close {
top: 1rem;
left: 1rem;
padding: 0.4rem;
}
a.result-detail-previous {
top: 1rem;
right: 6rem;
// center the icon by moving it slightly on the left
padding: 0.4rem 0.5rem 0.4rem 0.3rem;
}
a.result-detail-next {
top: 1rem;
right: 2rem;
padding: 0.4rem;
}
a.result-detail-close,
a.result-detail-next,
a.result-detail-previous {
border-radius: 50%;
display: block;
width: 1.5rem;
height: 1.5rem;
position: absolute;
filter: opacity(40%);
z-index: 2000002;
span {
display: block;
width: 1.5rem;
height: 1.5rem;
text-align: center;
}
}
a.result-detail-next,
a.result-detail-previous {
span::before {
// vertical center small icons
vertical-align: sub;
}
}
a.result-detail-close,
a.result-detail-close:visited,
a.result-detail-close:hover,
a.result-detail-close:active,
a.result-detail-previous,
a.result-detail-previous:visited,
a.result-detail-previous:hover,
a.result-detail-previous:active,
a.result-detail-next,
a.result-detail-next:visited,
a.result-detail-next:hover,
a.result-detail-next:active {
color: var(--color-result-detail-font);
background: var(--color-result-detail-background);
border: 1px solid var(--color-result-detail-font);
}
a.result-detail-close:focus,
a.result-detail-close:hover,
a.result-detail-previous:focus,
a.result-detail-previous:hover,
a.result-detail-next:focus,
a.result-detail-next:hover {
filter: opacity(80%);
}
.loader {
position: absolute;
top: 1rem;
right: 50%;
border-top: 0.5em solid var(--color-result-detail-loader-border);
border-right: 0.5em solid var(--color-result-detail-loader-border);
border-bottom: 0.5em solid var(--color-result-detail-loader-border);
border-left: 0.5em solid var(--color-result-detail-loader-borderleft);
}
}
#results.image-detail-open.scrolling article.result-images[data-vim-selected] .detail {
top: 0;
a.result-images-source img {
max-height: calc(100vh - 25rem);
}
}
@media screen and (max-width: @tablet) {
#results.image-detail-open article.result-images[data-vim-selected] .detail {
top: 0;
left: 0;
a.result-images-source {
display: flex;
flex-direction: column;
justify-content: center;
img {
width: 100%;
max-height: calc(100vh - 24rem);
}
}
a.result-detail-next {
right: 1rem;
}
}
}
@media screen and (max-width: @phone) {
#results.image-detail-open article.result-images[data-vim-selected] .detail {
top: 0;
left: 0;
padding: 1rem;
a.result-images-source img {
width: 100%;
max-height: calc(100vh - 20rem);
margin: 0;
}
.result-images-labels p span {
width: inherit;
margin-right: 1rem;
}
}
}

16
searx/static/themes/simple/src/less/style.less
View File

@ -16,6 +16,7 @@
@import "code.less";
@import "toolkit.less";
@import "autocomplete.less";
@import "detail.less";
// for index.html template
@import "index.less";
@ -138,6 +139,10 @@ article[data-vim-selected]::before {
article.result-images[data-vim-selected] {
background: var(--color-result-vim-arrow);
.image_thumbnail {
filter: opacity(60%);
}
}
article.result-images[data-vim-selected]::before {
@ -283,25 +288,26 @@ article.result-images[data-vim-selected]::before {
img {
float: inherit;
margin: 0;
margin: 0.125rem;
padding: 0;
border: none;
max-height: 200px;
background: var(--color-result-image-background);
}
span a {
span.title {
display: none;
color: var(--color-result-image-span-font);
}
&:hover span a {
&:hover span.title {
display: block;
position: absolute;
bottom: 0;
right: 0;
padding: 4px;
margin: 0 0 4px 4px;
// color: @color-result-image-span-font;
background-color: var(--color-result-image-span-background-hover);
font-size: 0.7em;
}
@ -569,6 +575,10 @@ article.result-images[data-vim-selected]::before {
}
}
#results.scrolling #backToTop {
opacity: 1;
}
@media screen and (max-width: @tablet) {
#main_preferences,
#main_about,

30
searx/templates/simple/result_templates/images.html
View File

@ -1,4 +1,28 @@
<article class="result result-images {% if result['category'] %}category-{{ result['category'] }}{% endif %}">
<a href="{{ result.img_src }}" {% if results_on_new_tab %}target="_blank" rel="noopener noreferrer"{% else %}rel="noreferrer"{% endif %}><img class="image_thumbnail" src="{% if result.thumbnail_src %}{{ image_proxify(result.thumbnail_src) }}{% else %}{{ image_proxify(result.img_src) }}{% endif %}" title="{{ result.title|striptags }}" alt="{{ result.title|striptags }}" /></a>
<span class="url"><a href="{{ result.url }}" {% if results_on_new_tab %}target="_blank" rel="noopener noreferrer"{% else %}rel="noreferrer"{% endif %} class="small_font">{{ result.parsed_url[0] }}://{{ result.parsed_url[1] }}</a></span>
<article class="result result-images {% if result['category'] %}category-{{ result['category'] }}{% endif %}">{{- "" -}}
<a {% if results_on_new_tab %}target="_blank" rel="noopener noreferrer"{% else %}rel="noreferrer"{% endif %} href="{{ result.img_src }}">{{- "" -}}
<img class="image_thumbnail" src="{% if result.thumbnail_src %}{{ image_proxify(result.thumbnail_src) }}{% else %}{{ image_proxify(result.img_src) }}{% endif %}" loading="lazy" title="{{ result.title|striptags }}" alt="{{ result.title|striptags }}" />{{- "" -}}
<span class="title">{{ result.title|striptags }}</span>{{- "" -}}
</a>{{- "" -}}
<div class="detail">{{- "" -}}
<a class="result-detail-close" href="#">{{ icon('close') }}</a>{{- "" -}}
<a class="result-detail-previous" href="#">{{ icon_small('chevron-left') }}</a>{{- "" -}}
<a class="result-detail-next" href="#">{{ icon_small('chevron-right') }}</a>{{- "" -}}
<a class="result-images-source" {% if results_on_new_tab %}target="_blank" rel="noopener noreferrer"{% else %}rel="noreferrer"{% endif %} href="{{ result.img_src }}">
{%- if result.thumbnail_src -%}
<img src="" data-src="{{ image_proxify(result.img_src) }}" alt="{{ result.title|striptags }}">
{%- else -%}
<img src="{{ image_proxify(result.img_src) }}" alt="{{ result.title|striptags }}" loading="lazy">
{%- endif -%}
</a>{{- "" -}}
<div class="result-images-labels">{{- "" -}}
<h4>{{ result.title|striptags }}</h4>{{- "" -}}
<p class="result-content">{%- if result.content %}{{ result.content|striptags }}{% else %}&nbsp;{% endif -%}</p>{{- "" -}}
<hr>{{- "" -}}
<p class="result-author">{%- if result.author %}<span>{{ _('Author') }}:</span>{{ result.author|striptags }}{% else %}&nbsp;{% endif -%}</p>{{- "" -}}
<p class="result-format">{%- if result.img_format %}<span>{{ _('Format') }}:</span>{{ result.img_format }}{% else %}&nbsp;{% endif -%}</p>{{- "" -}}
<p class="result-source">{%- if result.source %}<span>{{ _('Source') }}:</span>{{ result.source }}{% else %}&nbsp;{% endif -%}</p>{{- "" -}}
<p class="result-engine"><span>{{ _('Engine') }}:</span>{{ result.engine }}</p>{{- "" -}}{{- "" -}}
<p class="result-url"><span>{{ _('View source') }}:</span><a {% if results_on_new_tab %}target="_blank" rel="noopener noreferrer"{% else %}rel="noreferrer"{% endif %} href="{{ result.url }}">{{ result.url }}</a></p>{{- "" -}}
</div>{{- "" -}}
</div>{{- "" -}}
</article>