diff --git a/viewer/static/css/styles.css b/viewer/static/css/styles.css index a5b4abe..1d4a007 100644 --- a/viewer/static/css/styles.css +++ b/viewer/static/css/styles.css @@ -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); - } -} diff --git a/viewer/templates/gallery_view.html b/viewer/templates/gallery_view.html index 7e5eb50..4c59dc0 100644 --- a/viewer/templates/gallery_view.html +++ b/viewer/templates/gallery_view.html @@ -23,16 +23,26 @@ Files -
-
- {% for image in images %} -
- - - -
- {% endfor %} -
+
+ + + {% for row in images %} + + {% for cell in row %} + + {% endfor %} + + {% endfor %} + +
+ + +
+ + {{cell.path|truncatechars:15}} + +
+
{% endif %} {% if subdirs|length > 0 %} @@ -41,25 +51,30 @@ Sub-directories
-
-
- {% for dir in subdirs%} -
- {% if request.path == '/gallery/' %} - - {% else %} - - {% endif %} -
- -
- - {{dir.name}} - -
-
- {% endfor %} -
+
+ + + {% for row in subdirs %} + + {% for cell in row %} + + {% endfor %} + + {% endfor %} + +
+ {% if request.path == '/gallery/' %} + + {% else %} + + {% endif %} + +
+ + {{cell.name}} + +
+
{% endif %} diff --git a/viewer/views.py b/viewer/views.py index d5df849..d502c99 100644 --- a/viewer/views.py +++ b/viewer/views.py @@ -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)