zaclys
/
searxng
mirror of https://github.com/searxng/searxng.git
1
0
Fork 1
Code Issues Packages Projects Releases Wiki Activity

Merge pull request #793 from kvch/pics-modal 

CSS modal window for image results
This commit is contained in:
Adam Tauber 2016-12-30 00:33:40 +01:00 committed by GitHub
parent d08108be62 1710043eb7
commit bff41987a4
7 changed files with 117 additions and 31 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
searx/static/plugins/js/infinite_scroll.js
View File

@ -4,9 +4,13 @@ $(document).ready(function() {
if ($(document).height() - win.height() == win.scrollTop()) {
var formData = $('#pagination form:last').serialize();
if (formData) {
var pageno = $('#pagination input[name=pageno]:last').attr('value');
$('#pagination').html('<div class="loading-spinner"></div>');
$.post('./', formData, function (data) {
var lastImageHref = $('.result-images:last a').attr('href');
var body = $(data);
$('a[href^="#open-modal"]:last').attr('href', '#open-modal-1-' + pageno);
body.find('.modal-image a:first').attr('href', lastImageHref);
$('#pagination').remove();
$('#main_results').append('<hr/>');
$('#main_results').append(body.find('.result'));

2
searx/static/themes/oscar/css/logicodev.min.css vendored
View File

File diff suppressed because one or more lines are too long

2
searx/static/themes/oscar/css/pointhi.min.css vendored
View File

File diff suppressed because one or more lines are too long

61
searx/static/themes/oscar/less/logicodev/modal-pic.less Normal file
View File

@ -0,0 +1,61 @@
.modal-image {
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
background: rgba(0,0,0,0.8);
z-index: 1000000001;
opacity:0 !important;
pointer-events: none;
button {
display: none;
}
&:target {
opacity: 1 !important;
pointer-events: auto;
}
& > div {
margin: 2% auto;
width: 97%;
background: @dim-gray;
border: @gray 0.1rem solid;
}
@media (min-width: 769px) {
& > div {
max-width: 60.0rem;
}
}
.image-paging-left {
font-size: 2.2rem;
padding-right: 1.0rem;
}
.image-paging-right {
font-size: 2.2rem;
padding-left: 1.2rem;
}
.image-container::before {
display: block;
min-width: 1.0rem;
max-width: 60.0rem;
min-height: 10.0rem;
height: 30.0rem;
content: "";
}
}
.modal-close {
position:fixed;
top: 0;
left: 0;
height: 100% !important;
width: 100% !important;
z-index: -1;
}

2
searx/static/themes/oscar/less/logicodev/oscar.less
View File

@ -19,3 +19,5 @@
@import "cursor.less";
@import "code.less";
@import "modal-pic.less";

4
searx/static/themes/oscar/less/pointhi/oscar.less
View File

@ -17,3 +17,7 @@
@import "code.less";
@import "navbar.less";
@import "../logicodev/variables.less";
@import "../logicodev/modal-pic.less";

73
searx/templates/oscar/result_templates/images.html
View File

@ -1,39 +1,54 @@
{% from 'oscar/macros.html' import draw_favicon %}
<a href="{{ result.img_src }}" {% if results_on_new_tab %}target="_blank" rel="noopener noreferrer"{% else %}rel="noreferrer"{% endif %} data-toggle="modal" data-target="#modal-{{ index }}-{{pageno}}">
<img src="{% if result.thumbnail_src %}{{ image_proxify(result.thumbnail_src) }}{% else %}{{ image_proxify(result.img_src) }}{% endif %}" alt="{{ result.title|striptags }}" title="{{ result.title|striptags }}" class="img-thumbnail">
<a href="#open-modal-{{ index }}-{{ pageno }}">
<img src="{% if result.thumbnail_src %}{{ image_proxify(result.thumbnail_src) }}{% else %}{{ image_proxify(result.img_src) }}{% endif %}" alt="{{ result.title|striptags }}" title="{{ result.title|striptags }}" class="img-thumbnail" id="img-result-thumb-{{ index }}" />
</a>
<div class="modal fade" id="modal-{{ index }}-{{ pageno }}" tabindex="-1" role="dialog" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-wrapper">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
<h4 class="modal-title">{% if result.engine~".png" in favicons %}{{ draw_favicon(result.engine) }} {% endif %}{{ result.title|striptags }}</h4>
<style type="text/css" media="screen">
#open-modal-{{ index }}-{{ pageno }}:target .image-container::before {
background: url({{ image_proxify(result.img_src)|safe }}) no-repeat center/contain;
}
</style>
<div id="open-modal-{{ index }}-{{ pageno }}" class="modal-image">
<div class="container modal-dialog">
<div class="row">
<div class="col-md-12 col-sm-12 col-xs-12 modal-header">
<a {% if index != 1 %}href="#open-modal-{{ index-1 }}-{{ pageno }}"{% endif %}>
<span class="pull-left glyphicon glyphicon-chevron-left image-paging-left"></span>
</a>
<a href="#open-modal-{{ index+1 }}-{{ pageno }}">
<span class="image-paging-right pull-right glyphicon glyphicon-chevron-right"></span>
</a>
<h4 class="modal-title image-title">{{ result.title|striptags }}</h4>
</div>
<div class="modal-body">
<img class="img-responsive center-block" src="{% if result.thumbnail_src %}{{ image_proxify(result.thumbnail_src) }}{% else %}{{ image_proxify(result.img_src) }}{% endif %}" alt="{{ result.title|striptags }}">
</div>
<div class="row">
<div class="col-md-12 col-sm-12 col-xs-12 modal-body">
<a href="{{ result.img_src }}" {% if results_on_new_tab %}target="_blank" rel="noopener noreferrer"{% else %}rel="noreferrer"{% endif %}><div class="image-container"></div></a>
</div>
</div>
{% if result.content %}
<div class="row">
<div class="col-md-12 hidden-sm hidden-xs modal-body">
<p class="result-content">{{ result.content|safe }}</p>
{% if result.author %}<span class="photo-author">{{ result.author }}</span><br />{% endif %}
{% if result.content %}
<p class="result-content">
{{ result.content }}
</p>
{% endif %}
</div>
<div class="modal-footer">
<div class="clearfix"></div>
<span class="label label-default pull-right">{{ result.engine }}</span>
<p class="text-muted pull-left">{{ result.pretty_url }}</p>
<div class="clearfix"></div>
<div class="row">
<div class="col-md-6">
<a href="{{ result.img_src }}" {% if results_on_new_tab %}target="_blank" rel="noopener noreferrer"{% else %}rel="noreferrer"{% endif %} class="btn btn-default">{{ _('Get image') }}</a>
</div>
<div class="col-md-6">
<a href="{{ result.url }}" {% if results_on_new_tab %}target="_blank" rel="noopener noreferrer"{% else %}rel="noreferrer"{% endif %} class="btn btn-default">{{ _('View source') }}</a>
</div>
</div>
{% endif %}
<div class="modal-footer">
<div class="row">
<div class="col-md-10 col-xs-12">
<p class="text-muted pull-left">{{ result.pretty_url }}</p>
</div>
<div class="col-md-2 hidden-sm hidden-xs">
<span class="label label-default pull-right">{{ result.engine }}</span>
</div>
</div>
<div class="row">
<a href="{{ result.url }}" class="btn btn-default">
{{ _('View source') }}
</a>
</div>
</div>
</div>
<a href="#img-result-thumb-{{ index }}-{{ pageno }}" class="modal-close"></a>
</div>