From aabcb61a9cbdc7d0b293e267400c073716b72257 Mon Sep 17 00:00:00 2001 From: Ethan Dalool Date: Sat, 24 Feb 2018 00:58:43 -0800 Subject: [PATCH] Create css folder. Move photo_card rules to own file. --- frontends/etiquette_flask/static/common.css | 114 ------------------ .../etiquette_flask/static/css/photo_card.css | 113 +++++++++++++++++ .../etiquette_flask/templates/album.html | 1 + .../etiquette_flask/templates/clipboard.html | 1 + .../etiquette_flask/templates/search.html | 1 + 5 files changed, 116 insertions(+), 114 deletions(-) create mode 100644 frontends/etiquette_flask/static/css/photo_card.css 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 @@ +