Create css folder. Move photo_card rules to own file.

frontends/etiquette_flask/static/common.css

@@ -118,120 +118,6 @@ is hovered over.
     display:inline;
 }
 
-.photo_card
-{
-    background-color: #ffffd4;
-}
-.photo_card_list
-{
-    display: grid;
-    grid-template-columns: auto 1fr auto;
-    grid-template-rows: auto;
-    grid-template-areas:
-        "checkbox filename metadata";
-
-    max-width: 800px;
-    margin: 8px;
-    padding: 4px;
-}
-.photo_card_list:hover
-{
-    box-shadow: 2px 2px 5px 0px rgba(0,0,0,0.25);
-}
-.photo_card_list .photo_card_selector_checkbox
-{
-    grid-area: checkbox;
-}
-.photo_card_grid
-{
-    position: relative;
-    display: inline-grid;
-    grid-template-columns: auto auto;
-    grid-template-rows: auto 1fr auto;
-    grid-template-areas:
-        "thumbnail thumbnail"
-        "filename filename"
-        "tags metadata";
-    min-width: 150px;
-    max-width: 300px;
-    height: 200px;
-    padding: 8px;
-    margin: 8px;
-
-    border-radius: 8px;
-    box-shadow: 2px 2px 5px 0px rgba(0,0,0,0.25);
-}
-.photo_card_grid .photo_card_selector_checkbox
-{
-    position:absolute;
-    left:5px;
-    top:5px;
-}
-.photo_card_thumbnail
-{
-    grid-area: thumbnail;
-    align-self: start;
-    justify-self: center;
-}
-.photo_card_thumbnail img
-{
-    max-width: 100%;
-}
-.photo_card_filename
-{
-    /*
-    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.
-    The min-width:100% + width:0 prevent the info div from controlling
-    card size, so we can prioritize the thumbnail instead.
-    */
-    justify-self: start;
-    grid-area: filename;
-
-    z-index: 1;
-    overflow: hidden;
-
-    min-width: 100%;
-    width: 0;
-    max-height: 30px;
-    background-color: inherit;
-    word-break: break-word;
-
-    font-size: 12.8px;
-}
-.photo_card_grid .photo_card_filename
-{
-    align-self: start;
-}
-.photo_card_list .photo_card_filename
-{
-    align-self: center;
-}
-.photo_card_filename:hover
-{
-    overflow: visible;
-    max-height: none;
-}
-.photo_card_tags
-{
-    grid-area: tags;
-    align-self: end;
-    justify-self: start;
-
-    font-family: monospace;
-    font-size: 11px;
-}
-.photo_card_metadata
-{
-    grid-area: metadata;
-    align-self: end;
-    justify-self: end;
-
-    font-family: monospace;
-    font-size: 11px;
-}
-
 .tag_object
 {
     border-radius: 2px;

frontends/etiquette_flask/static/css/photo_card.css

@@ -0,0 +1,113 @@
+.photo_card
+{
+    background-color: #ffffd4;
+}
+.photo_card_list
+{
+    display: grid;
+    grid-template-columns: auto 1fr auto;
+    grid-template-rows: auto;
+    grid-template-areas:
+        "checkbox filename metadata";
+
+    max-width: 800px;
+    margin: 8px;
+    padding: 4px;
+}
+.photo_card_list:hover
+{
+    box-shadow: 2px 2px 5px 0px rgba(0,0,0,0.25);
+}
+.photo_card_list .photo_card_selector_checkbox
+{
+    grid-area: checkbox;
+}
+.photo_card_grid
+{
+    position: relative;
+    display: inline-grid;
+    grid-template-columns: auto auto;
+    grid-template-rows: auto 1fr auto;
+    grid-template-areas:
+        "thumbnail thumbnail"
+        "filename filename"
+        "tags metadata";
+    min-width: 150px;
+    max-width: 300px;
+    height: 200px;
+    padding: 8px;
+    margin: 8px;
+
+    border-radius: 8px;
+    box-shadow: 2px 2px 5px 0px rgba(0,0,0,0.25);
+}
+.photo_card_grid .photo_card_selector_checkbox
+{
+    position:absolute;
+    left:5px;
+    top:5px;
+}
+.photo_card_thumbnail
+{
+    grid-area: thumbnail;
+    align-self: start;
+    justify-self: center;
+}
+.photo_card_thumbnail img
+{
+    max-width: 100%;
+}
+.photo_card_filename
+{
+    /*
+    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.
+    The min-width:100% + width:0 prevent the info div from controlling
+    card size, so we can prioritize the thumbnail instead.
+    */
+    justify-self: start;
+    grid-area: filename;
+
+    z-index: 1;
+    overflow: hidden;
+
+    min-width: 100%;
+    width: 0;
+    max-height: 30px;
+    background-color: inherit;
+    word-break: break-word;
+
+    font-size: 12.8px;
+}
+.photo_card_grid .photo_card_filename
+{
+    align-self: start;
+}
+.photo_card_list .photo_card_filename
+{
+    align-self: center;
+}
+.photo_card_filename:hover
+{
+    overflow: visible;
+    max-height: none;
+}
+.photo_card_tags
+{
+    grid-area: tags;
+    align-self: end;
+    justify-self: start;
+
+    font-family: monospace;
+    font-size: 11px;
+}
+.photo_card_metadata
+{
+    grid-area: metadata;
+    align-self: end;
+    justify-self: end;
+
+    font-family: monospace;
+    font-size: 11px;
+}

frontends/etiquette_flask/templates/album.html

@@ -8,6 +8,7 @@
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
     <link rel="stylesheet" href="/static/common.css">
+    <link rel="stylesheet" href="/static/css/photo_card.css">
     <script src="/static/common.js"></script>
     <script src="/static/js/editor.js"></script>
     <script src="/static/js/photoclipboard.js"></script>

frontends/etiquette_flask/templates/clipboard.html

@@ -7,6 +7,7 @@
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
     <link rel="stylesheet" href="/static/common.css">
+    <link rel="stylesheet" href="/static/css/photo_card.css">
     <script src="/static/common.js"></script>
     <script src="/static/js/photoclipboard.js"></script>
 

frontends/etiquette_flask/templates/search.html

@@ -9,6 +9,7 @@
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
     <link rel="stylesheet" href="/static/common.css">
+    <link rel="stylesheet" href="/static/css/photo_card.css">
     <script src="/static/common.js"></script>
     <script src="/static/js/photoclipboard.js"></script>