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%; height: 100%;
} }
.mauto {
margin: auto;
}
/**************************************************************************** /****************************************************************************
* Grid. * * 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 { .column {
flex-direction: column;
text-align: center; text-align: center;
border: black 1px solid; 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 Files
</h1> </h1>
</div> </div>
<div class=grid-container> <div class="centered-container">
<div class="grid"> <table class="mauto">
{% for image in images %} <tbody>
<div class="column"> {% for row in images %}
<a href="{{image.path}}"> <tr>
<img src="{{image.thumbnail}}"> {% for cell in row %}
</a> <td class="column">
</div> <a href="{{cell.path}}">
{% endfor %} <img src="{{cell.thumbnail}}">
</div> <br>
<span>
{{cell.path|truncatechars:15}}
</span>
</a>
</td>
{% endfor %}
</tr>
{% endfor %}
</tbody>
</table>
</div> </div>
{% endif %} {% endif %}
{% if subdirs|length > 0 %} {% if subdirs|length > 0 %}
@@ -41,25 +51,30 @@
Sub-directories Sub-directories
</h1> </h1>
</div> </div>
<div class=grid-container> <div class="centered-container">
<div class="grid"> <table class="mauto">
{% for dir in subdirs%} <tbody>
<div class="column"> {% for row in subdirs %}
{% if request.path == '/gallery/' %} <tr>
<a href="{{dir.name}}"> {% for cell in row %}
{% else %} <td class="column">
<a href="{{request.path}}{{dir.name}}"> {% if request.path == '/gallery/' %}
{% endif %} <a href="{{cell.name}}">
<div class="grid-icon"> {% else %}
<img src="{% static 'imgs/folder-pictures.png' %}"> <a href="{{request.path}}{{cell.name}}">
</div> {% endif %}
<span> <img src="{% static 'imgs/folder-pictures.png' %}">
{{dir.name}} <br>
</span> <span>
</a> {{cell.name}}
</div> </span>
{% endfor %} </a>
</div> </td>
{% endfor %}
</tr>
{% endfor %}
</tbody>
</table>
</div> </div>
{% endif %} {% endif %}
</body> </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. 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 full_path = settings.GALLERY_ROOT.joinpath(path) if path is not None else settings.GALLERY_ROOT
if full_path.exists(): if full_path.exists():
if full_path.is_dir(): if full_path.is_dir():
subdirs = sorted([i for i in full_path.iterdir() if i.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))]) images = sorted([i for i in full_path.iterdir() if i.is_file() and filetype.is_image(str(i))])
display_images = [] img_data = []
for image in images: for image in images:
make_thumbnail(image) 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 '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 = { context = {
'path': path, 'path': path,
'subdirs': subdirs, 'subdirs': list2rows(subdirs),
'images': display_images 'images': list2rows(img_data)
} }
return render(request, 'gallery_view.html', context) return render(request, 'gallery_view.html', context)