WallyHackenslacker/NibasaViewer
1
0
Fork 0
Code Issues 14 Pull Requests Packages Projects 2 Releases Wiki Activity

Changed CSS grid layout for a table layout.

Browse Source
This commit is contained in:
Wally Hackenslacker
2023-07-30 21:18:36 -04:00
parent 84faf3d84c
commit 468769275b
3 changed files with 68 additions and 93 deletions
Download Patch File Download Diff File Expand all files Collapse all files

62
viewer/static/css/styles.css
View File

@@ -24,69 +24,15 @@
height: 100%;
}
.mauto {
margin: auto;
}
/****************************************************************************
* Grid. *
****************************************************************************/
.grid-container {
display: flex;
flex: 1;
}
.grid {
max-width: 1920px;
margin: 0 auto;
display: grid;
grid-gap: 1rem;
grid-template-rows: auto auto 1fr 1fr 1fr auto auto;
}
.grid-icon {
text-align: center;
}
.column {
flex-direction: column;
text-align: center;
border: black 1px solid;
}
/****************************************************************************
* Media queries. *
****************************************************************************/
@media (min-width: 300px) {
.grid {
grid-template-columns: repeat(2, 1fr);
}
}
@media (min-width: 500px) {
.grid {
grid-template-columns: repeat(3, 1fr);
}
}
@media (min-width: 600px) {
.grid {
grid-template-columns: repeat(5, 1fr);
}
}
@media (min-width: 1024px) {
.grid {
grid-template-columns: repeat(7, 1fr);
}
}
@media (min-width: 1280px) {
.grid {
grid-template-columns: repeat(9, 1fr);
}
}
@media (min-width: 1500px) {
.grid {
grid-template-columns: repeat(11, 1fr);
}
}

73
viewer/templates/gallery_view.html
View File

@@ -23,16 +23,26 @@
Files
</h1>
</div>
<div class=grid-container>
<div class="grid">
{% for image in images %}
<div class="column">
<a href="{{image.path}}">
<img src="{{image.thumbnail}}">
</a>
</div>
{% endfor %}
</div>
<div class="centered-container">
<table class="mauto">
<tbody>
{% for row in images %}
<tr>
{% for cell in row %}
<td class="column">
<a href="{{cell.path}}">
<img src="{{cell.thumbnail}}">
<br>
<span>
{{cell.path|truncatechars:15}}
</span>
</a>
</td>
{% endfor %}
</tr>
{% endfor %}
</tbody>
</table>
</div>
{% endif %}
{% if subdirs|length > 0 %}
@@ -41,25 +51,30 @@
Sub-directories
</h1>
</div>
<div class=grid-container>
<div class="grid">
{% for dir in subdirs%}
<div class="column">
{% if request.path == '/gallery/' %}
<a href="{{dir.name}}">
{% else %}
<a href="{{request.path}}{{dir.name}}">
{% endif %}
<div class="grid-icon">
<img src="{% static 'imgs/folder-pictures.png' %}">
</div>
<span>
{{dir.name}}
</span>
</a>
</div>
{% endfor %}
</div>
<div class="centered-container">
<table class="mauto">
<tbody>
{% for row in subdirs %}
<tr>
{% for cell in row %}
<td class="column">
{% if request.path == '/gallery/' %}
<a href="{{cell.name}}">
{% else %}
<a href="{{request.path}}{{cell.name}}">
{% endif %}
<img src="{% static 'imgs/folder-pictures.png' %}">
<br>
<span>
{{cell.name}}
</span>
</a>
</td>
{% endfor %}
</tr>
{% endfor %}
</tbody>
</table>
</div>
{% endif %}
</body>

26
viewer/views.py
View File

@@ -23,13 +23,27 @@ def gallery_view(request, path = None):
The path should be inside the GALLERY_ROOT path, otherwise a 404 error will be thrown.
"""
def list2rows(lst, cells = 5):
rows = []
i = 0
while i < len(lst):
row = []
for c in range(cells):
try:
row.append(lst[i + c])
except:
pass
rows.append(row)
i += cells
return rows
full_path = settings.GALLERY_ROOT.joinpath(path) if path is not None else settings.GALLERY_ROOT
if full_path.exists():
if full_path.is_dir():
subdirs = sorted([i for i in full_path.iterdir() if i.is_dir()])
images = sorted([i for i in full_path.iterdir() if i.is_file() and filetype.is_image(str(i))])
display_images = []
subdirs = sorted([i for i in full_path.iterdir() if i.is_dir()])
images = sorted([i for i in full_path.iterdir() if i.is_file() and filetype.is_image(str(i))])
img_data = []
for image in images:
make_thumbnail(image)
@@ -40,12 +54,12 @@ def gallery_view(request, path = None):
'thumbnail': '/thumbs/' + path + '/' + image.name if path is not None else '/thumbs/' + image.name
}
display_images.append(img_context)
img_data.append(img_context)
context = {
'path': path,
'subdirs': subdirs,
'images': display_images
'subdirs': list2rows(subdirs),
'images': list2rows(img_data)
}
return render(request, 'gallery_view.html', context)