Files
NibasaViewer/viewer/templates/gallery_view.html

167 lines
5.7 KiB
HTML

{% load static %}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, height=device-height" />
<title>
Folder: {{request.path}}
</title>
<link href="{% static 'css/styles.css' %}" rel="stylesheet">
</head>
<body class="background">
<!-- Navigation bar. -->
<table class="fc mauto">
<tr>
<!-- Home button. -->
<td>
<a href="/gallery/" class="mr-2">
<img src="{% static 'imgs/gohome.png' %}" class="small-nav-icon">
</a>
</td>
<!-- Back button. -->
{% if not search %}
<td>
<a href=".." class="mr-2">
<img src="{% static 'imgs/back.png' %}" class="small-nav-icon">
</a>
</td>
{% endif %}
<!-- Directory path. -->
<td>
<h1 class="mr-2">
{% if not search %}
{{request.path}} - Files: {{num_files}}
{% else %}
Search: {{search_text}} - Files: {{num_files}}
{% endif %}
</h1>
</td>
<!-- Page links. -->
{% if num_pages > 1 %}
<td>
<div class="mauto">
{% for page in pages %}<a href="./?page={{page}}{%if search %}&{{search}}{% endif %}">{{page}}</a>{% if not forloop.last %}<span> </span>{% endif %}{% endfor %}
</div>
</td>
{% endif %}
</tr>
</table>
<!-- Search form. -->
{% if not search %}
<form action="{% url 'gallery_view_root' %}" method="GET">
<table class="fc mauto">
<tr>
<!-- Search title. -->
<td>
<h3>
Search:
</h3>
</td>
<!-- Search bar. -->
<td>
<input type="search" name="search" class="search-box">
</td>
<!-- Search submit. -->
<td>
<button type="submit" class="search-btn">
<img src="{% static 'imgs/find.png' %}" class="small-nav-icon">
</button>
</td>
</tr>
</table>
</form>
{% endif %}
<!-- Images in current directory. -->
{% if images|length > 0 %}
<table class="fc mauto">
<tr>
<!-- Previous page button. -->
{% if page != 1 %}
<td class="fc">
<a href="./?page={{prev_page}}{%if search %}&{{search}}{% endif %}">
<img src="{% static 'imgs/back.png' %}" class="navigation-icon">
</a>
</td>
{% endif %}
<!-- Image rows. -->
<td class="fc">
<table class="mauto">
<tbody>
{% for row in images %}
<tr>
{% for image in row %}
<td class="column">
<a href="{{image.path}}">
<!-- Thumbnail. -->
<img src="{{image.thumbnail}}">
<br>
<!-- Image name. -->
<span>
{{image.name|truncatechars:15}}
</span>
</a>
</td>
{% endfor %}
</tr>
{% endfor %}
</tbody>
</table>
</td>
<!-- Next page button. -->
{% if page != num_pages %}
<td class="fc">
<a href="./?page={{next_page}}{%if search %}&{{search}}{% endif %}">
<img src="{% static 'imgs/forward.png' %}" class="navigation-icon">
</a>
</td>
{% endif %}
</tr>
</table>
{% endif %}
{% if subdirs|length > 0 %}
<!-- Sub-directories title. -->
<div class="centered-container">
<h1>
Sub-directories
</h1>
</div>
<!-- Sub-directory rows. -->
<div class="centered-container">
<table class="mauto">
<tbody>
{% for row in subdirs %}
<tr>
{% for subdir in row %}
<td class="column">
<a href="{{subdir.path}}">
<img src="{% static 'imgs/folder-pictures.png' %}">
<br>
<span>
{{subdir.name}}
</span>
</a>
</td>
{% endfor %}
</tr>
{% endfor %}
</tbody>
</table>
</div>
{% endif %}
</body>
</html>