diff --git a/frontends/etiquette_flask/static/common.css b/frontends/etiquette_flask/static/common.css
index cd740b3..2cff845 100644
--- a/frontends/etiquette_flask/static/common.css
+++ b/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;
diff --git a/frontends/etiquette_flask/static/css/photo_card.css b/frontends/etiquette_flask/static/css/photo_card.css
new file mode 100644
index 0000000..b42c260
--- /dev/null
+++ b/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;
+}
diff --git a/frontends/etiquette_flask/templates/album.html b/frontends/etiquette_flask/templates/album.html
index c1cfab6..21ea749 100644
--- a/frontends/etiquette_flask/templates/album.html
+++ b/frontends/etiquette_flask/templates/album.html
@@ -8,6 +8,7 @@
+
diff --git a/frontends/etiquette_flask/templates/clipboard.html b/frontends/etiquette_flask/templates/clipboard.html
index ad76df0..6f32143 100644
--- a/frontends/etiquette_flask/templates/clipboard.html
+++ b/frontends/etiquette_flask/templates/clipboard.html
@@ -7,6 +7,7 @@
+
diff --git a/frontends/etiquette_flask/templates/search.html b/frontends/etiquette_flask/templates/search.html
index 0fc85ee..cfc064d 100644
--- a/frontends/etiquette_flask/templates/search.html
+++ b/frontends/etiquette_flask/templates/search.html
@@ -9,6 +9,7 @@
+