Switch to CSS Grid for the photo cards.
This commit is contained in:
parent
89d9c1d893
commit
f9524a1858
2 changed files with 93 additions and 112 deletions
|
|
@ -133,21 +133,31 @@ is hovered over.
|
|||
|
||||
.photo_card_list
|
||||
{
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: space-between;
|
||||
display: grid;
|
||||
grid-template-columns: 1fr auto;
|
||||
grid-template-rows: auto;
|
||||
grid-template-areas:
|
||||
"filename metadata";
|
||||
|
||||
max-width: 800px;
|
||||
margin: 8px;
|
||||
padding: 4px;
|
||||
|
||||
background-color: #ffffd4;
|
||||
}
|
||||
.photo_card_list:hover
|
||||
{
|
||||
box-shadow: 2px 2px 5px 0px rgba(0,0,0,0.25);
|
||||
}
|
||||
.photo_card_grid
|
||||
{
|
||||
display: inline-flex;
|
||||
flex-direction: column;
|
||||
vertical-align: middle;
|
||||
|
||||
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;
|
||||
|
|
@ -159,91 +169,64 @@ is hovered over.
|
|||
|
||||
background-color: #ffffd4;
|
||||
}
|
||||
.photo_card_grid_thumb
|
||||
.photo_card_thumbnail
|
||||
{
|
||||
display:flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
|
||||
width: 100%;
|
||||
height: 150px;
|
||||
grid-area: thumbnail;
|
||||
align-self: start;
|
||||
justify-self: center;
|
||||
}
|
||||
.photo_card_grid_thumb a
|
||||
{
|
||||
display:flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
.photo_card_grid_thumb img
|
||||
.photo_card_thumbnail img
|
||||
{
|
||||
max-width: 100%;
|
||||
max-height: 100%;
|
||||
height: auto;
|
||||
}
|
||||
.photo_card_grid_info
|
||||
.photo_card_filename
|
||||
{
|
||||
display: flex;
|
||||
flex: 1;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
|
||||
background-color: inherit;
|
||||
|
||||
font-size: 12.8px;
|
||||
}
|
||||
.photo_card_grid_filename
|
||||
{
|
||||
align-self: flex-start;
|
||||
|
||||
/*
|
||||
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
|
||||
The min-width:100% + width:0 prevent the info div from controlling
|
||||
card size, so we can prioritize the thumbnail instead.
|
||||
*/
|
||||
align-self: start;
|
||||
justify-self: start;
|
||||
grid-area: filename;
|
||||
|
||||
z-index: 1;
|
||||
overflow: hidden;
|
||||
|
||||
min-width: 100%;
|
||||
width: 0;
|
||||
overflow: hidden;
|
||||
z-index: 1;
|
||||
|
||||
max-height: 30px;
|
||||
|
||||
background-color: inherit;
|
||||
word-break: break-word;
|
||||
|
||||
word-break:break-word;
|
||||
font-size: 12.8px;
|
||||
}
|
||||
.photo_card_grid_filename:hover
|
||||
.photo_card_filename:hover
|
||||
{
|
||||
overflow: visible;
|
||||
max-height: none;
|
||||
}
|
||||
.photo_card_grid_filename_hoverhelper:hover
|
||||
.photo_card_tags
|
||||
{
|
||||
background-color: inherit;
|
||||
}
|
||||
.photo_card_grid_file_metadata
|
||||
{
|
||||
display: flex;
|
||||
z-index: 0;
|
||||
justify-content: space-between;
|
||||
grid-area: tags;
|
||||
align-self: end;
|
||||
justify-self: start;
|
||||
|
||||
font-family: monospace;
|
||||
font-size: 11px;
|
||||
}
|
||||
.photo_card_grid_tags
|
||||
.photo_card_metadata
|
||||
{
|
||||
align-self: flex-start;
|
||||
/*
|
||||
When the metadata is long it tends to squish against the T, so give it
|
||||
some breathing room.
|
||||
*/
|
||||
margin-right: 8px;
|
||||
grid-area: metadata;
|
||||
align-self: end;
|
||||
justify-self: end;
|
||||
|
||||
font-family: monospace;
|
||||
font-size: 11px;
|
||||
}
|
||||
|
||||
.tag_object
|
||||
{
|
||||
border-radius: 2px;
|
||||
|
|
|
|||
|
|
@ -18,59 +18,57 @@
|
|||
|
||||
{% if view == "list" %}
|
||||
<div class="photo_card_list">
|
||||
<a target="_blank" href="/photo/{{photo.id}}">{{photo.basename}}</a>
|
||||
<a target="_blank" href="/file/{{photo.id}}.{{photo.extension}}">{{photo.bytestring()}}</a>
|
||||
<span class="photo_card_filename"><a target="_blank" href="/photo/{{photo.id}}">{{photo.basename}}</a></span>
|
||||
<a class="photo_card_metadata" target="_blank" href="/file/{{photo.id}}.{{photo.extension}}">{{photo.bytestring()}}</a>
|
||||
</div>
|
||||
|
||||
{% else %}
|
||||
<div class="photo_card_grid">
|
||||
<div class="photo_card_grid_thumb">
|
||||
<a target="_blank" href="/photo/{{photo.id}}">
|
||||
<img height="150"
|
||||
{% if photo.thumbnail %}
|
||||
src="/thumbnail/{{photo.id}}.jpg"
|
||||
{% else %}
|
||||
{% set choice =
|
||||
thumbnails.get(photo.extension,
|
||||
thumbnails.get(photo.mimetype,
|
||||
thumbnails.get(photo.simple_mimetype,
|
||||
'other')))
|
||||
{% if photo.thumbnail %}
|
||||
{% set thumbnail_src = "/thumbnail/" + photo.id + ".jpg" %}
|
||||
{% else %}
|
||||
{% set thumbnail_src =
|
||||
thumbnails.get(photo.extension, "") or
|
||||
thumbnails.get(photo.mimetype, "") or
|
||||
thumbnails.get(photo.simple_mimetype, "") or
|
||||
"other"
|
||||
%}
|
||||
src="/static/basic_thumbnails/{{choice}}.png"
|
||||
{% endif %}
|
||||
>
|
||||
{% set thumbnail_src = "/static/basic_thumbnails/" + thumbnail_src + ".png" %}
|
||||
{% endif %}
|
||||
|
||||
{% set tag_names_title = [] %}
|
||||
{% for tag in photo.tags() %}
|
||||
{% do tag_names_title.append(tag.name) %}
|
||||
{% endfor %}
|
||||
{% set tag_names_title = ", ".join(tag_names_title) %}
|
||||
{% if tag_names_title %}
|
||||
{% set tag_names_inner = "T" %}
|
||||
{% else %}
|
||||
{% set tag_names_inner = "" %}
|
||||
{% endif %}
|
||||
|
||||
{% set metadata_inner = "" %}
|
||||
{% if photo.width %}
|
||||
{% set metadata_inner = "{m}{w}×{h}, ".format(m=metadata_inner, w=photo.width, h=photo.height) %}
|
||||
{% endif %}
|
||||
{% if photo.duration %}
|
||||
{% set metadata_inner = "{m}{d}, ".format(m=metadata_inner, d=photo.duration_string) %}
|
||||
{% endif %}
|
||||
|
||||
<div class="photo_card_grid">
|
||||
<a class="photo_card_thumbnail" target="_blank" href="/photo/{{photo.id}}">
|
||||
<img height="150" src="{{thumbnail_src}}">
|
||||
</a>
|
||||
</div>
|
||||
<div class="photo_card_grid_info">
|
||||
<div class="photo_card_grid_filename">
|
||||
<div class="photo_card_grid_filename_hoverhelper">
|
||||
|
||||
<div class="photo_card_filename">
|
||||
<a target="_blank" href="/photo/{{photo.id}}">{{photo.basename}}</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="photo_card_grid_file_metadata">
|
||||
{% set tag_names = [] %}
|
||||
{% for tag in photo.tags() %}
|
||||
{% do tag_names.append(tag.name) %}
|
||||
{% endfor %}
|
||||
{% if tag_names %}
|
||||
<div class="photo_card_grid_tags">
|
||||
{% set tag_names = ", ".join(tag_names) %}
|
||||
<span title="{{tag_names}}">T</span>
|
||||
</div>
|
||||
{% else %}
|
||||
<div></div>
|
||||
{% endif %}
|
||||
<span>
|
||||
{% if photo.width %}
|
||||
{{photo.width}}×{{photo.height}},
|
||||
{% endif %}
|
||||
{% if photo.duration %}
|
||||
{{photo.duration_string}},
|
||||
{% endif %}
|
||||
|
||||
<span class="photo_card_tags" title="{{tag_names_title}}">{{tag_names_inner}}</span>
|
||||
|
||||
<span class="photo_card_metadata">
|
||||
{{- metadata_inner|safe -}}
|
||||
<a target="_blank" href="/file/{{photo.id}}.{{photo.extension}}">{{photo.bytestring()}}</a>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{% endif %}
|
||||
{% endmacro %}
|
||||
|
|
|
|||
Loading…
Reference in a new issue