Switch to CSS Grid for the photo cards.

frontends/etiquette_flask/static/common.css

@@ -133,21 +133,31 @@ is hovered over.
 
 .photo_card_list
 {
-    display: flex;
+    display: grid;
-    flex-direction: row;
+    grid-template-columns: 1fr auto;
-    justify-content: space-between;
+    grid-template-rows: auto;
+    grid-template-areas:
+        "filename metadata";
 
+    max-width: 800px;
     margin: 8px;
     padding: 4px;
 
     background-color: #ffffd4;
 }
+.photo_card_list:hover
+{
+    box-shadow: 2px 2px 5px 0px rgba(0,0,0,0.25);
+}
 .photo_card_grid
 {
-    display: inline-flex;
+    display: inline-grid;
-    flex-direction: column;
+    grid-template-columns: auto auto;
-    vertical-align: middle;
+    grid-template-rows: auto 1fr auto;
-
+    grid-template-areas:
+        "thumbnail thumbnail"
+        "filename filename"
+        "tags metadata";
     min-width: 150px;
     max-width: 300px;
     height: 200px;
@@ -159,91 +169,64 @@ is hovered over.
 
     background-color: #ffffd4;
 }
-.photo_card_grid_thumb
+.photo_card_thumbnail
 {
-    display:flex;
+    grid-area: thumbnail;
-    flex-direction: column;
+    align-self: start;
-    justify-content: center;
+    justify-self: center;
-    align-items: center;
-
-    width:  100%;
-    height: 150px;
 }
-.photo_card_grid_thumb a
+.photo_card_thumbnail img
-{
-    display:flex;
-    flex-direction: column;
-    justify-content: center;
-    align-items: center;
-
-    width: 100%;
-    height: 100%;
-}
-.photo_card_grid_thumb img
 {
     max-width: 100%;
-    max-height: 100%;
-    height: auto;
 }
-.photo_card_grid_info
+.photo_card_filename
 {
-    display: flex;
-    flex: 1;
-    flex-direction: column;
-    justify-content: space-between;
-
-    background-color: inherit;
-
-    font-size: 12.8px;
-}
-.photo_card_grid_filename
-{
-    align-self: flex-start;
-
     /*
     The width of photo cards should be based on the aspect ratio of the
     thumbnail image. Previously, I had problems where the card would be wider
     than necessary because the file had a long name.
-    These min-width:100% + width:0 prevent the info div from controlling
+    The min-width:100% + width:0 prevent the info div from controlling
     card size, so we can prioritize the thumbnail instead.
     */
+    align-self: start;
+    justify-self: start;
+    grid-area: filename;
+
+    z-index: 1;
+    overflow: hidden;
+
     min-width: 100%;
     width: 0;
-    overflow: hidden;
-    z-index: 1;
-
     max-height: 30px;
-
     background-color: inherit;
+    word-break: break-word;
 
-    word-break:break-word;
+    font-size: 12.8px;
 }
-.photo_card_grid_filename:hover
+.photo_card_filename:hover
 {
     overflow: visible;
+    max-height: none;
 }
-.photo_card_grid_filename_hoverhelper:hover
+.photo_card_tags
 {
-    background-color: inherit;
+    grid-area: tags;
-}
+    align-self: end;
-.photo_card_grid_file_metadata
+    justify-self: start;
-{
-    display: flex;
-    z-index: 0;
-    justify-content: space-between;
 
     font-family: monospace;
     font-size: 11px;
 }
-.photo_card_grid_tags
+.photo_card_metadata
 {
-    align-self: flex-start;
+    grid-area: metadata;
-    /*
+    align-self: end;
-    When the metadata is long it tends to squish against the T, so give it
+    justify-self: end;
-    some breathing room.
+
-    */
+    font-family: monospace;
-    margin-right: 8px;
+    font-size: 11px;
 }
+
 .tag_object
 {
     border-radius: 2px;

frontends/etiquette_flask/templates/photo_card.html

@@ -18,59 +18,57 @@
 
 {% if view == "list" %}
 <div class="photo_card_list">
-    <a target="_blank" href="/photo/{{photo.id}}">{{photo.basename}}</a>
+    <span class="photo_card_filename"><a target="_blank" href="/photo/{{photo.id}}">{{photo.basename}}</a></span>
-    <a target="_blank" href="/file/{{photo.id}}.{{photo.extension}}">{{photo.bytestring()}}</a>
+    <a class="photo_card_metadata" target="_blank" href="/file/{{photo.id}}.{{photo.extension}}">{{photo.bytestring()}}</a>
 </div>
 
 {% else %}
+{% if photo.thumbnail %}
+    {% set thumbnail_src = "/thumbnail/" + photo.id + ".jpg" %}
+{% else %}
+    {% set thumbnail_src =
+        thumbnails.get(photo.extension, "") or
+        thumbnails.get(photo.mimetype, "") or
+        thumbnails.get(photo.simple_mimetype, "") or
+        "other"
+    %}
+    {% set thumbnail_src = "/static/basic_thumbnails/" + thumbnail_src + ".png" %}
+{% endif %}
+
+{% set tag_names_title = [] %}
+{% for tag in photo.tags() %}
+{% do tag_names_title.append(tag.name) %}
+{% endfor %}
+{% set tag_names_title = ", ".join(tag_names_title) %}
+{% if tag_names_title %}
+    {% set tag_names_inner = "T" %}
+{% else %}
+    {% set tag_names_inner = "" %}
+{% endif %}
+
+{% set metadata_inner = "" %}
+{% if photo.width %}
+    {% set metadata_inner = "{m}{w}&times;{h}, ".format(m=metadata_inner, w=photo.width, h=photo.height) %}
+{% endif %}
+{% if photo.duration %}
+    {% set metadata_inner = "{m}{d}, ".format(m=metadata_inner, d=photo.duration_string) %}
+{% endif %}
+
 <div class="photo_card_grid">
-    <div class="photo_card_grid_thumb">
+    <a class="photo_card_thumbnail" target="_blank" href="/photo/{{photo.id}}">
-        <a target="_blank" href="/photo/{{photo.id}}">
+        <img height="150" src="{{thumbnail_src}}">
-            <img height="150"
+    </a>
-            {% if photo.thumbnail %}
+
-                src="/thumbnail/{{photo.id}}.jpg"
+    <div class="photo_card_filename">
-            {% else %}
+        <a target="_blank" href="/photo/{{photo.id}}">{{photo.basename}}</a>
-                {% set choice =
-                    thumbnails.get(photo.extension,
-                    thumbnails.get(photo.mimetype,
-                    thumbnails.get(photo.simple_mimetype,
-                    'other')))
-                %}
-                src="/static/basic_thumbnails/{{choice}}.png"
-            {% endif %}
-            >
-        </a>
-    </div>
-    <div class="photo_card_grid_info">
-        <div class="photo_card_grid_filename">
-            <div class="photo_card_grid_filename_hoverhelper">
-            <a target="_blank" href="/photo/{{photo.id}}">{{photo.basename}}</a>
-            </div>
-        </div>
-        <div class="photo_card_grid_file_metadata">
-            {% set tag_names = [] %}
-            {% for tag in photo.tags() %}
-            {% do tag_names.append(tag.name) %}
-            {% endfor %}
-            {% if tag_names %}
-                <div class="photo_card_grid_tags">
-                    {% set tag_names = ", ".join(tag_names) %}
-                    <span title="{{tag_names}}">T</span>
-                </div>
-            {% else %}
-                <div></div>
-            {% endif %}
-            <span>
-            {% if photo.width %}
-                {{photo.width}}&times;{{photo.height}},
-            {% endif %}
-            {% if photo.duration %}
-                {{photo.duration_string}},
-            {% endif %}
-            <a target="_blank" href="/file/{{photo.id}}.{{photo.extension}}">{{photo.bytestring()}}</a>
-            </span>
-        </div>
     </div>
+
+    <span class="photo_card_tags" title="{{tag_names_title}}">{{tag_names_inner}}</span>
+
+    <span class="photo_card_metadata">
+    {{- metadata_inner|safe -}}
+    <a target="_blank" href="/file/{{photo.id}}.{{photo.extension}}">{{photo.bytestring()}}</a>
+    </span>
 </div>
 {% endif %}
 {% endmacro %}