Files
simple-viewer/viewer/templates/browse.html
2020-10-31 23:36:12 -05:00

90 lines
3.2 KiB
HTML

{% extends 'base.html' %}
{% block head %}
{{ block.super }}
<style>
.media {
width: 100%;
}
.media .media-filename {
text-decoration: underline;
text-decoration-color: #3273dc;
}
</style>
{% endblock head %}
{% block content %}
<div class="card">
<div class="card-header">
<p class="card-header-title">
{{ directory.path }}
<span class="pl-1" style="font-weight: 400; font-style: italic; font-size: 70%;">
{{ files|length }} files
</span>
<span class="icon align-self">
<a href="{% url 'refresh' directory.id %}">
<i class="fas fa-sync"></i>
</a>
</span>
</p>
</div>
<div class="card-content">
<div class="content">
{% for directory in directories %}
<div>
<span class="icon">
<i class="fas fa-folder"></i>
</span>
{{ directory }}
</div>
{% endfor %}
{% for file in files %}
<div class="media">
{% load static %}
<img class="px-2" loading="lazy" src="{% static "/thumbnails/"|add:file.thumbnail %}">
<span class="media-filename">
<a href="{% url 'file' directory.id file.filename %}">
{{ file.filename }}
</a>
</span>
</div>
{% endfor %}
</div>
</div>
</div>
<div class="panel">
<div class="panel-heading">
{{ directory.path }}
<span style="font-weight: 400; font-style: italic; font-size: 70%;">
{{ files|length }} files
</span>
<span style="vertical-align: middle;" class="panel-icon">
<a href="{% url 'index' %}">
<i class="fas fa-arrow-up" aria-hidden="true"></i>
</a>
</span>
</div>
{% for file in files %}
<div class="panel-block">
<span class="panel-icon pr-4">
{# <i class="fas fa-{{ file }} fa-lg" aria-hidden="true"></i>#}
</span>
{% if file.1 == 'folder' %}
<a href="{% url 'add' %}?path={{ file.fullpath }}">
{{ file.filename }}
</a>
{% else %}
<a href="{% url 'file' directory.id file.filename %}">
{{ file.filename }}
</a>
{% endif %}
</div>
{% endfor %}
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"
integrity="sha512-bLT0Qm9VnAYZDflyKcBaQ2gg0hSYNQrJ8RilYldYQ1FxQYoCLtUjuuRuZo+fjqhx/qtq/1itJ0C2ejDxltZVFg=="
crossorigin="anonymous"></script>
<script src="{% static "hover.js" %}"></script>
{% endblock content %}