etiquette/frontends/etiquette_flask/static/css/photo_card.css
Ethan Dalool 707fdcc637 Add album cards and improve album pages.
- album card has placeholder for future thumbnail.
- replaced nested tree hierarchy lists with separate boxes.
- list/grid view also applies to the root listing.
- added a sticky right panel for all the tools. not pretty yet.
- mechanism for adding sticky panel changed. instead of applying
  it to the #right, you apply it to #content_body so that its
  grid layout can be updated properly.
2018-11-12 22:15:59 -08:00

179 lines
3.2 KiB
CSS

.album_card
{
background-color: var(--color_site_secondary);
}
.album_card:hover
{
box-shadow: 2px 2px 5px 0px var(--color_site_dropshadow);
}
.album_card_list
{
display: grid;
grid-template:
"title metadata"
/1fr;
min-width: 600px;
margin: 8px;
padding: 4px;
}
.album_card_grid
{
position: relative;
display: inline-grid;
vertical-align: top;
grid-template:
"thumbnail title" auto
"thumbnail metadata" auto
/auto 1fr;
width: 400px;
margin: 8px;
padding: 8px;
}
.album_card_thumbnail
{
grid-area: thumbnail;
background-color: var(--color_site_transparency);
width: 64px;
height: 64px;
margin-right: 8px;
}
.album_card_thumbnail img
{
max-width: 100%;
max-height: 100%;
margin: auto;
}
.album_card_title
{
grid-area: title;
}
.album_card_metadata
{
grid-area: metadata;
}
.album_card_tools
{
position: absolute;
right: 4px;
bottom: 4px;
}
.photo_card
{
background-color: var(--color_site_secondary);
}
.photo_card_list
{
display: grid;
grid-template:
"checkbox filename metadata" auto
/auto 1fr auto;
max-width: 800px;
margin: 8px;
padding: 4px;
}
.photo_card:hover
{
box-shadow: 2px 2px 5px 0px var(--color_site_dropshadow);
}
.photo_card_list .photo_card_selector_checkbox
{
grid-area: checkbox;
}
.photo_card_grid
{
position: relative;
display: inline-grid;
vertical-align: top;
grid-template:
"thumbnail thumbnail" auto
"filename filename" 1fr
"tags metadata" auto
/10px auto;
min-width: 150px;
max-width: 300px;
height: 210px;
padding: 8px;
margin: 8px;
border-radius: 8px;
}
.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;
display: flex;
width: 100%;
height: 150px;
}
.photo_card_thumbnail img
{
max-width: 100%;
max-height: 100%;
margin: auto;
}
.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;
overflow: hidden;
min-width: 100%;
width: 0;
max-height: 30px;
background-color: inherit;
word-break: break-word;
}
.photo_card_grid .photo_card_filename
{
align-self: start;
font-size: 12.8px;
}
.photo_card_list .photo_card_filename
{
align-self: center;
}
.photo_card_filename:hover
{
overflow: visible;
max-height: none;
z-index: 1;
}
.photo_card_tags
{
grid-area: tags;
align-self: end;
justify-self: start;
font-family: monospace;
font-size: 11px;
cursor: help;
}
.photo_card_metadata
{
grid-area: metadata;
align-self: end;
justify-self: end;
font-family: monospace;
font-size: 11px;
}