Improve Photo Card CSS: Filename hover and metadata font

README.md

@@ -4,6 +4,7 @@ Etiquette
 This is the readme file.
 
 ### To do list
+- Make the wording between "new", "create", "add" and "remove", "delete" more consistent.
 - At the moment I don't like the way that warnings and exceptions are so far apart, and need to be updated individually. Consider moving the warning strings to be class properties of the matching exceptions.
 - User account system, permission levels, private pages.
 - Generalize the filename expression filter so it can work with any strings.

etiquette/constants.py

@@ -110,7 +110,16 @@ WARNING_ORDERBY_BADDIRECTION = 'You can\'t order "{column}" by "{direction}". De
 EXPRESSION_OPERATORS = {'(', ')', 'OR', 'AND', 'NOT'}
 ADDITIONAL_MIMETYPES = {
     'srt': 'text',
+
     'mkv': 'video',
+
+    'm4a': 'audio',
+
+    '7z': 'archive',
+    'gz': 'archive',
+    'rar': 'archive',
+    'tar': 'archive',
+    'zip': 'archive',
 }
 
 DEFAULT_DATADIR = '.\\_etiquette'

etiquette_site.py

@@ -112,7 +112,7 @@ def P_user(username):
     except exceptions.NoSuchUser as e:
         return 'That user doesnt exist: %s' % e
 
-def send_file(filepath):
+def send_file(filepath, override_mimetype=None):
     '''
     Range-enabled file sending.
     '''
@@ -122,7 +122,10 @@ def send_file(filepath):
         flask.abort(404)
 
     outgoing_headers = {}
-    mimetype = mimetypes.guess_type(filepath)[0]
+    if override_mimetype is not None:
+        mimetype = override_mimetype
+    else:
+        mimetype = mimetypes.guess_type(filepath)[0]
     if mimetype is not None:
         if 'text/' in mimetype:
             mimetype += '; charset=utf-8'
@@ -385,7 +388,7 @@ def get_file(photoid):
         response.headers['Content-Disposition'] = 'attachment; filename*=UTF-8\'\'%s' % download_as
         return response
     else:
-        return send_file(photo.real_filepath)
+        return send_file(photo.real_filepath, override_mimetype=photo.mimetype)
 
 
 def get_photo_core(photoid):

static/common.css

@@ -124,7 +124,7 @@ li
     align-items: center;
 
     width: 100%;
-    height: 150px;
+    height: 100%;
 }
 .photo_card_grid_thumb img
 {
@@ -136,27 +136,46 @@ li
 {
     display: flex;
     flex: 1;
-    justify-content: space-between;
     flex-direction: column;
-    font-size: 0.8em;
-}
-.photo_card_grid_file_metadata
-{
-    display: flex;
     justify-content: space-between;
+    font-size: 12.8px;
+    background-color: inherit;
+
+    /*
+    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
+    card size, prioritizing the thumbnail.
+    */
+    min-width: 100%;
+    width: 0;
 }
 .photo_card_grid_filename
 {
-    /*position: absolute;*/
+    background-color: inherit;
     max-height: 30px;
     overflow: hidden;
     align-self: flex-start;
     word-break:break-word;
+    z-index: 1;
+}
+.photo_card_grid_filename a
+{
+    background-color: inherit;
 }
 .photo_card_grid_filename:hover
 {
     overflow: visible;
 }
+.photo_card_grid_file_metadata
+{
+    font-family: monospace;
+    font-size: 12px;
+    display: flex;
+    justify-content: space-between;
+    z-index: 0;
+}
 .photo_card_grid_tags
 {
     align-self: flex-start;

templates/photo_card.html

@@ -1,15 +1,10 @@
 {% set thumbnails =
     {
         "audio": "audio",
+        "archive": "archive",
         "txt": "txt",
         "svg": "svg",
         "video": "video",
-
-        "7z": "archive",
-        "gz": "archive",
-        "rar": "archive",
-        "tar": "archive",
-        "zip": "archive",
     }
 %}
 {% macro create_photo_card(photo, view="grid") %}
@@ -39,7 +34,9 @@
         </a>
     </div>
     <div class="photo_card_grid_info">
-        <a target="_blank" class="photo_card_grid_filename" href="/photo/{{photo.id}}">{{photo.basename}}</a>
+        <div class="photo_card_grid_filename">
+            <a target="_blank" href="/photo/{{photo.id}}">{{photo.basename}}</a>
+        </div>
         <div class="photo_card_grid_file_metadata">
             <div class="photo_card_grid_tags">
                 {% set tags = photo.tags() %}
@@ -53,7 +50,7 @@
             </div>
             <span>
             {% if photo.width %}
-                {{photo.width}}x{{photo.height}},
+                {{photo.width}}&times;{{photo.height}},
             {% endif %}
             {% if photo.duration %}
                 {{photo.duration_string()}},