mirror of
https://github.com/searxng/searxng.git
synced 2025-02-18 11:20:03 +00:00
Merge pull request #689 from mrpaulblack/images-flexbox
[simple theme] use flexbox instead of js for positioning images
This commit is contained in:
commit
afde954df8
@ -278,12 +278,18 @@ class ResultContainer:
|
||||
result['parsed_url'] = result['parsed_url']._replace(scheme="http")
|
||||
result['url'] = result['parsed_url'].geturl()
|
||||
|
||||
# avoid duplicate content between the content and title fields
|
||||
if result.get('content') == result.get('title'):
|
||||
del result['content']
|
||||
|
||||
# make sure there is a template
|
||||
if 'template' not in result:
|
||||
result['template'] = 'default.html'
|
||||
|
||||
# strip multiple spaces and cariage returns from content
|
||||
if result.get('content'):
|
||||
result['content'] = WHITESPACE_REGEX.sub(' ', result['content'])
|
||||
|
||||
return True
|
||||
|
||||
def __merge_url_result(self, result, position):
|
||||
result['engines'] = set([result['engine']])
|
||||
with self._lock:
|
||||
|
Binary file not shown.
@ -60,7 +60,7 @@ module.exports = function(grunt) {
|
||||
separator: ';'
|
||||
},
|
||||
dist: {
|
||||
src: ['src/js/*.js', '../__common__/js/image_layout.js'],
|
||||
src: ['src/js/*.js'],
|
||||
dest: 'js/searxng.js'
|
||||
}
|
||||
},
|
||||
|
@ -183,6 +183,230 @@ $(document).ready(function(){
|
||||
searxng.image_thumbnail_layout = new searxng.ImageLayout('#main_results', '#main_results .result-images', 'img.img-thumbnail', 15, 3, 200);
|
||||
searxng.image_thumbnail_layout.watch();
|
||||
});
|
||||
;/**
|
||||
*
|
||||
* Google Image Layout v0.0.1
|
||||
* Description, by Anh Trinh.
|
||||
* Heavily modified for searx
|
||||
* https://ptgamr.github.io/2014-09-12-google-image-layout/
|
||||
* https://ptgamr.github.io/google-image-layout/src/google-image-layout.js
|
||||
*
|
||||
* @license Free to use under the MIT License.
|
||||
*
|
||||
* @example <caption>Example usage of searxng.ImageLayout class.</caption>
|
||||
* searxng.image_thumbnail_layout = new searxng.ImageLayout(
|
||||
* '#urls', // container_selector
|
||||
* '#urls .result-images', // results_selector
|
||||
* 'img.image_thumbnail', // img_selector
|
||||
* 14, // verticalMargin
|
||||
* 6, // horizontalMargin
|
||||
* 200 // maxHeight
|
||||
* );
|
||||
* searxng.image_thumbnail_layout.watch();
|
||||
*/
|
||||
|
||||
|
||||
(function (w, d) {
|
||||
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.verticalMargin = verticalMargin;
|
||||
this.horizontalMargin = horizontalMargin;
|
||||
this.maxHeight = maxHeight;
|
||||
this.trottleCallToAlign = null;
|
||||
this.alignAfterThrotteling = false;
|
||||
}
|
||||
|
||||
/**
|
||||
* Get the height that make all images fit the container
|
||||
*
|
||||
* width = w1 + w2 + w3 + ... = r1*h + r2*h + r3*h + ...
|
||||
*
|
||||
* @param {[type]} images the images to be calculated
|
||||
* @param {[type]} width the container witdth
|
||||
* @param {[type]} margin the margin between each image
|
||||
*
|
||||
* @return {[type]} the height
|
||||
*/
|
||||
ImageLayout.prototype._getHeigth = function (images, width) {
|
||||
var i, img;
|
||||
var r = 0;
|
||||
|
||||
for (i = 0; i < images.length; i++) {
|
||||
img = images[i];
|
||||
if ((img.naturalWidth > 0) && (img.naturalHeight > 0)) {
|
||||
r += img.naturalWidth / img.naturalHeight;
|
||||
} else {
|
||||
// assume that not loaded images are square
|
||||
r += 1;
|
||||
}
|
||||
}
|
||||
|
||||
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) {
|
||||
var i, img, imgWidth;
|
||||
var imagesLength = images.length, resultNode;
|
||||
|
||||
for (i = 0; i < imagesLength; i++) {
|
||||
img = images[i];
|
||||
if ((img.naturalWidth > 0) && (img.naturalHeight > 0)) {
|
||||
imgWidth = height * img.naturalWidth / img.naturalHeight;
|
||||
} else {
|
||||
// not loaded image : make it square as _getHeigth said it
|
||||
imgWidth = height;
|
||||
}
|
||||
img.setAttribute('width', Math.round(imgWidth));
|
||||
img.setAttribute('height', Math.round(height));
|
||||
img.style.marginLeft = Math.round(this.horizontalMargin) + 'px';
|
||||
img.style.marginTop = Math.round(this.horizontalMargin) + 'px';
|
||||
img.style.marginRight = Math.round(this.verticalMargin - 7) + 'px'; // -4 is the negative margin of the inline element
|
||||
img.style.marginBottom = Math.round(this.verticalMargin - 7) + 'px';
|
||||
resultNode = img.parentNode.parentNode;
|
||||
if (!resultNode.classList.contains('js')) {
|
||||
resultNode.classList.add('js');
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
ImageLayout.prototype._alignImgs = function (imgGroup) {
|
||||
var isSearching, slice, i, h;
|
||||
var containerElement = d.querySelector(this.container_selector);
|
||||
var containerCompStyles = window.getComputedStyle(containerElement);
|
||||
var containerPaddingLeft = parseInt(containerCompStyles.getPropertyValue('padding-left'), 10);
|
||||
var containerPaddingRight = parseInt(containerCompStyles.getPropertyValue('padding-right'), 10);
|
||||
var containerWidth = containerElement.clientWidth - containerPaddingLeft - containerPaddingRight;
|
||||
|
||||
while (imgGroup.length > 0) {
|
||||
isSearching = true;
|
||||
for (i = 1; i <= imgGroup.length && isSearching; i++) {
|
||||
slice = imgGroup.slice(0, i);
|
||||
h = this._getHeigth(slice, containerWidth);
|
||||
if (h < this.maxHeight) {
|
||||
this._setSize(slice, h);
|
||||
// continue with the remaining images
|
||||
imgGroup = imgGroup.slice(i);
|
||||
isSearching = false;
|
||||
}
|
||||
}
|
||||
if (isSearching) {
|
||||
this._setSize(slice, Math.min(this.maxHeight, h));
|
||||
break;
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
ImageLayout.prototype.throttleAlign = function () {
|
||||
var obj = this;
|
||||
if (obj.trottleCallToAlign) {
|
||||
obj.alignAfterThrotteling = true;
|
||||
} else {
|
||||
obj.alignAfterThrotteling = false;
|
||||
obj.align();
|
||||
obj.trottleCallToAlign = setTimeout(function () {
|
||||
if (obj.alignAfterThrotteling) {
|
||||
obj.align();
|
||||
}
|
||||
obj.alignAfterThrotteling = false;
|
||||
obj.trottleCallToAlign = null;
|
||||
}, 20);
|
||||
}
|
||||
};
|
||||
|
||||
ImageLayout.prototype.align = function () {
|
||||
var i;
|
||||
var results_selectorNode = d.querySelectorAll(this.results_selector);
|
||||
var results_length = results_selectorNode.length;
|
||||
var previous = null;
|
||||
var current = null;
|
||||
var imgGroup = [];
|
||||
|
||||
for (i = 0; i < results_length; i++) {
|
||||
current = results_selectorNode[i];
|
||||
if (current.previousElementSibling !== previous && imgGroup.length > 0) {
|
||||
// the current image is not connected to previous one
|
||||
// so the current image is the start of a new group of images.
|
||||
// so call _alignImgs to align the current group
|
||||
this._alignImgs(imgGroup);
|
||||
// and start a new empty group of images
|
||||
imgGroup = [];
|
||||
}
|
||||
// add the current image to the group (only the img tag)
|
||||
imgGroup.push(current.querySelector(this.img_selector));
|
||||
// update the previous variable
|
||||
previous = current;
|
||||
}
|
||||
// align the remaining images
|
||||
if (imgGroup.length > 0) {
|
||||
this._alignImgs(imgGroup);
|
||||
}
|
||||
};
|
||||
|
||||
ImageLayout.prototype._monitorImages = function () {
|
||||
var i, img;
|
||||
var objthrottleAlign = this.throttleAlign.bind(this);
|
||||
var results_nodes = d.querySelectorAll(this.results_selector);
|
||||
var results_length = results_nodes.length;
|
||||
|
||||
function img_load_error (event) {
|
||||
// console.log("ERROR can't load: " + event.originalTarget.src);
|
||||
event.originalTarget.src = w.searxng.static_path + w.searxng.theme.img_load_error;
|
||||
}
|
||||
|
||||
for (i = 0; i < results_length; i++) {
|
||||
img = results_nodes[i].querySelector(this.img_selector);
|
||||
if (img !== null && img !== undefined && !img.classList.contains('aligned')) {
|
||||
img.addEventListener('load', objthrottleAlign);
|
||||
// https://developer.mozilla.org/en-US/docs/Web/API/GlobalEventHandlers/onerror
|
||||
img.addEventListener('error', objthrottleAlign);
|
||||
img.addEventListener('timeout', objthrottleAlign);
|
||||
if (w.searxng.theme.img_load_error) {
|
||||
img.addEventListener('error', img_load_error, {once: true});
|
||||
}
|
||||
img.classList.add('aligned');
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
ImageLayout.prototype.watch = function () {
|
||||
var objthrottleAlign = this.throttleAlign.bind(this);
|
||||
|
||||
// https://developer.mozilla.org/en-US/docs/Web/API/Window/pageshow_event
|
||||
w.addEventListener('pageshow', objthrottleAlign);
|
||||
// https://developer.mozilla.org/en-US/docs/Web/API/FileReader/load_event
|
||||
w.addEventListener('load', objthrottleAlign);
|
||||
// https://developer.mozilla.org/en-US/docs/Web/API/Window/resize_event
|
||||
w.addEventListener('resize', objthrottleAlign);
|
||||
|
||||
this._monitorImages();
|
||||
|
||||
var obj = this;
|
||||
|
||||
let observer = new MutationObserver(entries => {
|
||||
let newElement = false;
|
||||
for (let i = 0; i < entries.length; i++) {
|
||||
if (entries[i].addedNodes.length > 0 && entries[i].addedNodes[0].classList.contains('result')) {
|
||||
newElement = true;
|
||||
break;
|
||||
}
|
||||
}
|
||||
if (newElement) {
|
||||
obj._monitorImages();
|
||||
}
|
||||
});
|
||||
observer.observe(d.querySelector(this.container_selector), {
|
||||
childList: true,
|
||||
subtree: true,
|
||||
attributes: false,
|
||||
characterData: false,
|
||||
});
|
||||
};
|
||||
|
||||
w.searxng.ImageLayout = ImageLayout;
|
||||
|
||||
}(window, document));
|
||||
;/**
|
||||
* @license
|
||||
* (C) Copyright Contributors to the SearXNG project.
|
||||
@ -368,227 +592,3 @@ $(document).ready(function(){
|
||||
});
|
||||
});
|
||||
|
||||
;/**
|
||||
*
|
||||
* Google Image Layout v0.0.1
|
||||
* Description, by Anh Trinh.
|
||||
* Heavily modified for searx
|
||||
* https://ptgamr.github.io/2014-09-12-google-image-layout/
|
||||
* https://ptgamr.github.io/google-image-layout/src/google-image-layout.js
|
||||
*
|
||||
* @license Free to use under the MIT License.
|
||||
*
|
||||
* @example <caption>Example usage of searxng.ImageLayout class.</caption>
|
||||
* searxng.image_thumbnail_layout = new searxng.ImageLayout(
|
||||
* '#urls', // container_selector
|
||||
* '#urls .result-images', // results_selector
|
||||
* 'img.image_thumbnail', // img_selector
|
||||
* 14, // verticalMargin
|
||||
* 6, // horizontalMargin
|
||||
* 200 // maxHeight
|
||||
* );
|
||||
* searxng.image_thumbnail_layout.watch();
|
||||
*/
|
||||
|
||||
|
||||
(function (w, d) {
|
||||
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.verticalMargin = verticalMargin;
|
||||
this.horizontalMargin = horizontalMargin;
|
||||
this.maxHeight = maxHeight;
|
||||
this.trottleCallToAlign = null;
|
||||
this.alignAfterThrotteling = false;
|
||||
}
|
||||
|
||||
/**
|
||||
* Get the height that make all images fit the container
|
||||
*
|
||||
* width = w1 + w2 + w3 + ... = r1*h + r2*h + r3*h + ...
|
||||
*
|
||||
* @param {[type]} images the images to be calculated
|
||||
* @param {[type]} width the container witdth
|
||||
* @param {[type]} margin the margin between each image
|
||||
*
|
||||
* @return {[type]} the height
|
||||
*/
|
||||
ImageLayout.prototype._getHeigth = function (images, width) {
|
||||
var i, img;
|
||||
var r = 0;
|
||||
|
||||
for (i = 0; i < images.length; i++) {
|
||||
img = images[i];
|
||||
if ((img.naturalWidth > 0) && (img.naturalHeight > 0)) {
|
||||
r += img.naturalWidth / img.naturalHeight;
|
||||
} else {
|
||||
// assume that not loaded images are square
|
||||
r += 1;
|
||||
}
|
||||
}
|
||||
|
||||
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) {
|
||||
var i, img, imgWidth;
|
||||
var imagesLength = images.length, resultNode;
|
||||
|
||||
for (i = 0; i < imagesLength; i++) {
|
||||
img = images[i];
|
||||
if ((img.naturalWidth > 0) && (img.naturalHeight > 0)) {
|
||||
imgWidth = height * img.naturalWidth / img.naturalHeight;
|
||||
} else {
|
||||
// not loaded image : make it square as _getHeigth said it
|
||||
imgWidth = height;
|
||||
}
|
||||
img.setAttribute('width', Math.round(imgWidth));
|
||||
img.setAttribute('height', Math.round(height));
|
||||
img.style.marginLeft = Math.round(this.horizontalMargin) + 'px';
|
||||
img.style.marginTop = Math.round(this.horizontalMargin) + 'px';
|
||||
img.style.marginRight = Math.round(this.verticalMargin - 7) + 'px'; // -4 is the negative margin of the inline element
|
||||
img.style.marginBottom = Math.round(this.verticalMargin - 7) + 'px';
|
||||
resultNode = img.parentNode.parentNode;
|
||||
if (!resultNode.classList.contains('js')) {
|
||||
resultNode.classList.add('js');
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
ImageLayout.prototype._alignImgs = function (imgGroup) {
|
||||
var isSearching, slice, i, h;
|
||||
var containerElement = d.querySelector(this.container_selector);
|
||||
var containerCompStyles = window.getComputedStyle(containerElement);
|
||||
var containerPaddingLeft = parseInt(containerCompStyles.getPropertyValue('padding-left'), 10);
|
||||
var containerPaddingRight = parseInt(containerCompStyles.getPropertyValue('padding-right'), 10);
|
||||
var containerWidth = containerElement.clientWidth - containerPaddingLeft - containerPaddingRight;
|
||||
|
||||
while (imgGroup.length > 0) {
|
||||
isSearching = true;
|
||||
for (i = 1; i <= imgGroup.length && isSearching; i++) {
|
||||
slice = imgGroup.slice(0, i);
|
||||
h = this._getHeigth(slice, containerWidth);
|
||||
if (h < this.maxHeight) {
|
||||
this._setSize(slice, h);
|
||||
// continue with the remaining images
|
||||
imgGroup = imgGroup.slice(i);
|
||||
isSearching = false;
|
||||
}
|
||||
}
|
||||
if (isSearching) {
|
||||
this._setSize(slice, Math.min(this.maxHeight, h));
|
||||
break;
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
ImageLayout.prototype.throttleAlign = function () {
|
||||
var obj = this;
|
||||
if (obj.trottleCallToAlign) {
|
||||
obj.alignAfterThrotteling = true;
|
||||
} else {
|
||||
obj.alignAfterThrotteling = false;
|
||||
obj.align();
|
||||
obj.trottleCallToAlign = setTimeout(function () {
|
||||
if (obj.alignAfterThrotteling) {
|
||||
obj.align();
|
||||
}
|
||||
obj.alignAfterThrotteling = false;
|
||||
obj.trottleCallToAlign = null;
|
||||
}, 20);
|
||||
}
|
||||
}
|
||||
|
||||
ImageLayout.prototype.align = function () {
|
||||
var i;
|
||||
var results_selectorNode = d.querySelectorAll(this.results_selector);
|
||||
var results_length = results_selectorNode.length;
|
||||
var previous = null;
|
||||
var current = null;
|
||||
var imgGroup = [];
|
||||
|
||||
for (i = 0; i < results_length; i++) {
|
||||
current = results_selectorNode[i];
|
||||
if (current.previousElementSibling !== previous && imgGroup.length > 0) {
|
||||
// the current image is not connected to previous one
|
||||
// so the current image is the start of a new group of images.
|
||||
// so call _alignImgs to align the current group
|
||||
this._alignImgs(imgGroup);
|
||||
// and start a new empty group of images
|
||||
imgGroup = [];
|
||||
}
|
||||
// add the current image to the group (only the img tag)
|
||||
imgGroup.push(current.querySelector(this.img_selector));
|
||||
// update the previous variable
|
||||
previous = current;
|
||||
}
|
||||
// align the remaining images
|
||||
if (imgGroup.length > 0) {
|
||||
this._alignImgs(imgGroup);
|
||||
}
|
||||
};
|
||||
|
||||
ImageLayout.prototype._monitorImages = function () {
|
||||
var i, img;
|
||||
var objthrottleAlign = this.throttleAlign.bind(this);
|
||||
var results_nodes = d.querySelectorAll(this.results_selector);
|
||||
var results_length = results_nodes.length;
|
||||
|
||||
function img_load_error (event) {
|
||||
// console.log("ERROR can't load: " + event.originalTarget.src);
|
||||
event.originalTarget.src = w.searxng.static_path + w.searxng.theme.img_load_error;
|
||||
}
|
||||
|
||||
for (i = 0; i < results_length; i++) {
|
||||
img = results_nodes[i].querySelector(this.img_selector);
|
||||
if (img !== null && img !== undefined && !img.classList.contains('aligned')) {
|
||||
img.addEventListener('load', objthrottleAlign);
|
||||
// https://developer.mozilla.org/en-US/docs/Web/API/GlobalEventHandlers/onerror
|
||||
img.addEventListener('error', objthrottleAlign);
|
||||
img.addEventListener('timeout', objthrottleAlign);
|
||||
if (w.searxng.theme.img_load_error) {
|
||||
img.addEventListener('error', img_load_error, {once: true});
|
||||
}
|
||||
img.classList.add('aligned');
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
ImageLayout.prototype.watch = function () {
|
||||
var objthrottleAlign = this.throttleAlign.bind(this);
|
||||
|
||||
// https://developer.mozilla.org/en-US/docs/Web/API/Window/pageshow_event
|
||||
w.addEventListener('pageshow', objthrottleAlign);
|
||||
// https://developer.mozilla.org/en-US/docs/Web/API/FileReader/load_event
|
||||
w.addEventListener('load', objthrottleAlign);
|
||||
// https://developer.mozilla.org/en-US/docs/Web/API/Window/resize_event
|
||||
w.addEventListener('resize', objthrottleAlign);
|
||||
|
||||
this._monitorImages();
|
||||
|
||||
var obj = this;
|
||||
|
||||
let observer = new MutationObserver(entries => {
|
||||
let newElement = false;
|
||||
for (let i = 0; i < entries.length; i++) {
|
||||
if (entries[i].addedNodes.length > 0 && entries[i].addedNodes[0].classList.contains('result')) {
|
||||
newElement = true;
|
||||
break;
|
||||
}
|
||||
}
|
||||
if (newElement) {
|
||||
obj._monitorImages();
|
||||
}
|
||||
});
|
||||
observer.observe(d.querySelector(this.container_selector), {
|
||||
childList: true,
|
||||
subtree: true,
|
||||
attributes: false,
|
||||
characterData: false,
|
||||
})
|
||||
};
|
||||
|
||||
w.searxng.ImageLayout = ImageLayout;
|
||||
|
||||
}(window, document));
|
||||
|
BIN
searx/static/themes/oscar/js/searxng.min.js
vendored
BIN
searx/static/themes/oscar/js/searxng.min.js
vendored
Binary file not shown.
Binary file not shown.
@ -128,7 +128,7 @@
|
||||
obj.trottleCallToAlign = null;
|
||||
}, 20);
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
ImageLayout.prototype.align = function () {
|
||||
var i;
|
||||
@ -183,7 +183,7 @@
|
||||
img.classList.add('aligned');
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
ImageLayout.prototype.watch = function () {
|
||||
var objthrottleAlign = this.throttleAlign.bind(this);
|
||||
@ -216,7 +216,7 @@
|
||||
subtree: true,
|
||||
attributes: false,
|
||||
characterData: false,
|
||||
})
|
||||
});
|
||||
};
|
||||
|
||||
w.searxng.ImageLayout = ImageLayout;
|
BIN
searx/static/themes/simple/css/searxng-rtl.min.css
vendored
BIN
searx/static/themes/simple/css/searxng-rtl.min.css
vendored
Binary file not shown.
Binary file not shown.
BIN
searx/static/themes/simple/css/searxng.min.css
vendored
BIN
searx/static/themes/simple/css/searxng.min.css
vendored
Binary file not shown.
Binary file not shown.
@ -108,7 +108,6 @@ module.exports = function (grunt) {
|
||||
'js/searxng.head.min.js': ['src/js/head/*.js'],
|
||||
'js/searxng.min.js': [
|
||||
'src/js/main/*.js',
|
||||
'../__common__/js/*.js',
|
||||
'./node_modules/autocomplete-js/dist/autocomplete.js'
|
||||
]
|
||||
}
|
||||
|
BIN
searx/static/themes/simple/js/searxng.min.js
vendored
BIN
searx/static/themes/simple/js/searxng.min.js
vendored
Binary file not shown.
Binary file not shown.
@ -7,9 +7,6 @@
|
||||
}
|
||||
|
||||
searxng.ready(function () {
|
||||
searxng.image_thumbnail_layout = new searxng.ImageLayout('#urls', '#urls .result-images', 'img.image_thumbnail', 14, 6, 200);
|
||||
searxng.image_thumbnail_layout.watch();
|
||||
|
||||
d.querySelectorAll('#urls img.image').forEach(
|
||||
img =>
|
||||
img.addEventListener(
|
||||
@ -74,13 +71,11 @@
|
||||
}
|
||||
}
|
||||
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-detail-close', 'click', e => {
|
||||
|
@ -68,8 +68,8 @@
|
||||
--color-result-search-url-border: #ddd;
|
||||
--color-result-search-url-font: #000;
|
||||
// Images Colors
|
||||
--color-result-image-span-background-hover: rgba(0, 0, 0, 0.6);
|
||||
--color-result-image-span-font: #fff;
|
||||
--color-result-image-span-font: #444;
|
||||
--color-result-image-span-font-selected: #fff;
|
||||
--color-result-image-background: #fff;
|
||||
/// Settings Colors
|
||||
--color-settings-tr-hover: #f7f7f7;
|
||||
@ -179,8 +179,8 @@
|
||||
--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;
|
||||
--color-result-image-span-font: #bbb;
|
||||
--color-result-image-span-font-selected: #222;
|
||||
--color-result-image-background: #222;
|
||||
/// Settings Colors
|
||||
--color-settings-tr-hover: #2d2d2d;
|
||||
@ -230,9 +230,11 @@
|
||||
@results-gap: 5rem;
|
||||
@results-margin: 0.125rem;
|
||||
@result-padding: 1rem;
|
||||
@results-image-row-height: 12rem;
|
||||
@results-image-row-height-phone: 6rem;
|
||||
@search-width: 40rem;
|
||||
// heigh of #search, see detail.less
|
||||
@search-height: 7.75rem;
|
||||
@search-height: 7.6rem;
|
||||
|
||||
/// Device Size
|
||||
/// @desktop > @tablet
|
||||
|
@ -39,6 +39,7 @@ article.result-images .detail {
|
||||
border: none;
|
||||
object-fit: contain;
|
||||
width: inherit;
|
||||
height: inherit;
|
||||
max-width: 100%;
|
||||
min-height: inherit;
|
||||
max-height: calc(100vh - 25rem - 7rem);
|
||||
|
@ -83,6 +83,11 @@
|
||||
}
|
||||
}
|
||||
|
||||
// Image flexbox
|
||||
#main_results div#results.only_template_images #urls {
|
||||
direction: rtl;
|
||||
}
|
||||
|
||||
// Image detail
|
||||
#results.image-detail-open article.result-images[data-vim-selected] .detail .result-images-labels p {
|
||||
direction: rtl;
|
||||
|
@ -143,6 +143,10 @@ article.result-images[data-vim-selected] {
|
||||
.image_thumbnail {
|
||||
filter: opacity(60%);
|
||||
}
|
||||
|
||||
span.title {
|
||||
color: var(--color-result-image-span-font-selected);
|
||||
}
|
||||
}
|
||||
|
||||
article[data-vim-selected].category-videos,
|
||||
@ -284,6 +288,16 @@ article[data-vim-selected].category-social {
|
||||
}
|
||||
}
|
||||
|
||||
.template_group_images {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.template_group_images::after {
|
||||
flex-grow: 10;
|
||||
content: "";
|
||||
}
|
||||
|
||||
.category-videos,
|
||||
.category-news,
|
||||
.category-map,
|
||||
@ -357,40 +371,38 @@ article[data-vim-selected].category-social {
|
||||
}
|
||||
|
||||
.result-images {
|
||||
display: inline-block;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
position: relative;
|
||||
max-height: 200px;
|
||||
flex-grow: 1;
|
||||
padding: 0.5rem 0.5rem 2rem 0.5rem;
|
||||
margin: 0.25rem;
|
||||
border: none !important;
|
||||
height: @results-image-row-height;
|
||||
|
||||
& > a {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
img {
|
||||
float: inherit;
|
||||
margin: 0.125rem;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
border: none;
|
||||
max-height: 200px;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
object-fit: cover;
|
||||
vertical-align: bottom;
|
||||
background: var(--color-result-image-background);
|
||||
}
|
||||
|
||||
span.title {
|
||||
display: none;
|
||||
color: var(--color-result-image-span-font);
|
||||
}
|
||||
|
||||
&:hover span.title {
|
||||
display: block;
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
.ltr-right(0);
|
||||
padding: 4px;
|
||||
margin-top: 0;
|
||||
.ltr-margin-right(0);
|
||||
margin-bottom: 4px;
|
||||
.ltr-margin-left(4px);
|
||||
// color: @color-result-image-span-font;
|
||||
background-color: var(--color-result-image-span-background-hover);
|
||||
font-size: 0.7em;
|
||||
|
||||
width: 100%;
|
||||
font-size: 0.9rem;
|
||||
color: var(--color-result-image-span-font);
|
||||
padding: 0.5rem 0 0 0;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
}
|
||||
|
||||
@ -785,8 +797,14 @@ article[data-vim-selected].category-social {
|
||||
}
|
||||
|
||||
#urls {
|
||||
width: inherit;
|
||||
margin: 0;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
#urls::after {
|
||||
flex-grow: 10;
|
||||
content: "";
|
||||
}
|
||||
|
||||
#backToTop {
|
||||
@ -837,8 +855,7 @@ article[data-vim-selected].category-social {
|
||||
|
||||
.result-images {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
border: none;
|
||||
height: @results-image-row-height-phone;
|
||||
}
|
||||
}
|
||||
|
||||
|
@ -15,7 +15,7 @@
|
||||
{% if results and results|map(attribute='template')|unique|list|count == 1 %}
|
||||
{% set only_template = 'only_template_' + results[0]['template']|default('default')|replace('.html', '') %}
|
||||
{% else %}
|
||||
{% set unique_template = '' %}
|
||||
{% set only_template = '' %}
|
||||
{% endif %}
|
||||
|
||||
<div id="results" class="{{ only_template }}">
|
||||
@ -131,12 +131,10 @@
|
||||
|
||||
<div id="urls">
|
||||
{% for result in results %}
|
||||
{% if result.open_group and not only_template %}<div class="template_group_{{ result['template']|replace('.html', '') }}">{% endif %}
|
||||
{% set index = loop.index %}
|
||||
{% if result['template'] %}
|
||||
{% include get_result_template('simple', result['template']) %}
|
||||
{% else %}
|
||||
{% include 'simple/result_templates/default.html' %}
|
||||
{% endif %}
|
||||
{% include get_result_template('simple', result['template']) %}
|
||||
{% if result.close_group and not only_template %}</div>{% endif %}
|
||||
{% endfor %}
|
||||
{% if not results and not answers %}
|
||||
{% include 'simple/messages/no_results.html' %}
|
||||
|
@ -726,6 +726,9 @@ def search():
|
||||
# Server-Timing header
|
||||
request.timings = result_container.get_timings() # pylint: disable=assigning-non-slot
|
||||
|
||||
current_template = None
|
||||
previous_result = None
|
||||
|
||||
# output
|
||||
for result in results:
|
||||
if output_format == 'html':
|
||||
@ -762,6 +765,18 @@ def search():
|
||||
else:
|
||||
result['publishedDate'] = format_date(result['publishedDate'])
|
||||
|
||||
# set result['open_group'] = True when the template changes from the previous result
|
||||
# set result['close_group'] = True when the template changes on the next result
|
||||
if current_template != result.get('template'):
|
||||
result['open_group'] = True
|
||||
if previous_result:
|
||||
previous_result['close_group'] = True # pylint: disable=unsupported-assignment-operation
|
||||
current_template = result.get('template')
|
||||
previous_result = result
|
||||
|
||||
if previous_result:
|
||||
previous_result['close_group'] = True
|
||||
|
||||
if output_format == 'json':
|
||||
x = {
|
||||
'query': search_query.query,
|
||||
|
@ -33,7 +33,8 @@ class ViewsTestCase(SearxTestCase):
|
||||
'engine': 'startpage',
|
||||
'parsed_url': ParseResult(
|
||||
scheme='http', netloc='first.test.xyz', path='/', params='', query='', fragment=''
|
||||
), # noqa
|
||||
),
|
||||
'template': 'default.html',
|
||||
},
|
||||
{
|
||||
'content': 'second test content',
|
||||
@ -43,7 +44,8 @@ class ViewsTestCase(SearxTestCase):
|
||||
'engine': 'youtube',
|
||||
'parsed_url': ParseResult(
|
||||
scheme='http', netloc='second.test.xyz', path='/', params='', query='', fragment=''
|
||||
), # noqa
|
||||
),
|
||||
'template': 'default.html',
|
||||
},
|
||||
]
|
||||
|
||||
|
Loading…
Reference in New Issue
Block a user