From 7770f7640a4c416d824b2067e653d057555e854b Mon Sep 17 00:00:00 2001
From: Ethan Dalool <git@voussoir.net>
Date: Wed, 4 Nov 2020 17:11:48 -0800
Subject: [PATCH] Add class photos_holder which is centers photos in narrow
 mode.

In narrow mode, it's very possible to wind up with only 1 photo per row,
and it looks silly when they are left-justified. Centered looks a little
more natural to me in this case.
---
 frontends/etiquette_flask/static/css/common.css | 6 ++++++
 frontends/etiquette_flask/templates/album.html  | 2 +-
 frontends/etiquette_flask/templates/search.html | 2 +-
 3 files changed, 8 insertions(+), 2 deletions(-)

diff --git a/frontends/etiquette_flask/static/css/common.css b/frontends/etiquette_flask/static/css/common.css
index c1162c6..819bcd9 100644
--- a/frontends/etiquette_flask/static/css/common.css
+++ b/frontends/etiquette_flask/static/css/common.css
@@ -12,6 +12,12 @@
     {
         --narrow: 1;
     }
+    .photos_holder
+    {
+        display: flex;
+        justify-content: center;
+        flex-wrap: wrap;
+    }
 }
 
 .hidden
diff --git a/frontends/etiquette_flask/templates/album.html b/frontends/etiquette_flask/templates/album.html
index ce7691f..a4e2ada 100644
--- a/frontends/etiquette_flask/templates/album.html
+++ b/frontends/etiquette_flask/templates/album.html
@@ -253,7 +253,7 @@ const ALBUM_ID = undefined;
 
         {% set photos = album.get_photos() %}
         {% if photos %}
-        <div id="hierarchy_photos" class="panel">
+        <div id="hierarchy_photos" class="photos_holder panel">
             <h3>{{photos|length}} Photos</h3>
             <div id="photo_list">
             {% for photo in photos|sort(attribute='basename', case_sensitive=False) %}
diff --git a/frontends/etiquette_flask/templates/search.html b/frontends/etiquette_flask/templates/search.html
index 350f86e..4e32291 100644
--- a/frontends/etiquette_flask/templates/search.html
+++ b/frontends/etiquette_flask/templates/search.html
@@ -371,7 +371,7 @@
 
         {{prev_next_buttons()}}
 
-        <div id="search_results_holder">
+        <div id="search_results_holder" class="photos_holder">
             {% for result in results %}
                 {% if result.__class__.__name__ == 'Photo' %}
                 {{photo_card.create_photo_card(result, view=search_kwargs["view"])}}