Preview icon for images

This commit is contained in:
Simon 2018-06-19 13:56:00 -04:00
parent d8486104b4
commit e0b5aad654
2 changed files with 30 additions and 8 deletions

View File

@ -51,6 +51,15 @@
-o-animation: vimCaret 1s linear infinite; -o-animation: vimCaret 1s linear infinite;
animation: vimCaret 1s linear infinite; } animation: vimCaret 1s linear infinite; }
.prev-img {
width: 100%;
max-width: 250px;
height: 100%;
}
.prev-icon {
cursor: pointer;
}
@-webkit-keyframes vimCaret { @-webkit-keyframes vimCaret {
0% { 0% {
background-color: transparent; } background-color: transparent; }

View File

@ -57,21 +57,24 @@
<tr> <tr>
<td> <td>
{% set category = get_mime(src["ext"]) %}
{% set url = src["website_url"] + src["path"] + "/" + src["name"] + ("." if src["ext"] != "" else "") + src["ext"] %}
{# Preview #}
{% if category == "image" %}
<i class="fas fa-eye prev-icon" data-toggle="popover" tabindex="-1"
data-content='<img class="prev-img" src="{{ url }}">'></i>
{% endif %}
{# File name & link #} {# File name & link #}
<a href="{{ src["website_url"] + src["path"] + "/" + src["name"] + ("." if src["ext"] != "" else "") + src["ext"] }}" title="{{ src["name"] + src["ext"] }}"> <a href="{{ url }}"><span>{{ hl_name |safe }}{{ ("." if src["ext"] != "" else "") + src["ext"] }}</span></a>
{{ hl_name |safe }}{{ ("." if src["ext"] != "" else "") + src["ext"] }}
</a>
{# File type badge #} {# File type badge #}
{% set mime = get_mime(src["ext"]) %} {% if category %}
{% if mime %} <span class="badge badge-pill {{ get_color(category ) }}">
<span class="badge badge-pill {{ get_color(mime) }}">
{{ src["ext"] }} {{ src["ext"] }}
</span> </span>
{% endif %} {% endif %}
{# File path #} {# File path #}
<div class="text-muted" title="{{ path }}" style="font-size: 10px;"> <div class="text-muted" title="{{ path }}" style="font-size: 10px;">
<a style="color: #6c757d" title="See files from this website" <a title="See files from this website" href="/website/{{ src["website_id"] }}">{{ src["website_url"] }}</a>{{ hl_path|safe }}
href="/website/{{ src["website_id"] }}">{{ src["website_url"] }}</a>{{ hl_path|safe }}
</div> </div>
</td> </td>
{# File size & date #} {# File size & date #}
@ -100,6 +103,16 @@
<div class="card-body">No results</div> <div class="card-body">No results</div>
</div> </div>
{% endif %} {% endif %}
<script>
$('[data-toggle="popover"]').popover({
trigger: "focus",
delay: {"show": 0, "hide": 100},
placement: "right",
html: true
});
</script>
</div> </div>
{% endblock body %} {% endblock body %}