voussoir/etiquette
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

Switch to CSS Grid for the photo cards.

Browse source
This commit is contained in:
voussoir 2017-08-01 18:25:28 -07:00
parent 89d9c1d893
commit f9524a1858
2 changed files with 93 additions and 112 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

111
frontends/etiquette_flask/static/common.css
View file

@ -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;
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;

70
frontends/etiquette_flask/templates/photo_card.html
View file

@ -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"
{% set thumbnail_src = "/thumbnail/" + photo.id + ".jpg" %}
{% else %}
{% set choice =
thumbnails.get(photo.extension,
thumbnails.get(photo.mimetype,
thumbnails.get(photo.simple_mimetype,
'other')))
{% 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"
{% set thumbnail_src = "/static/basic_thumbnails/" + thumbnail_src + ".png" %}
{% endif %}
>
</a>
</div>
<div class="photo_card_grid_info">
<div class="photo_card_grid_filename">
<div class="photo_card_grid_filename_hoverhelper">
<a target="_blank" href="/photo/{{photo.id}}">{{photo.basename}}</a>
</div>
</div>
<div class="photo_card_grid_file_metadata">
{% set tag_names = [] %}
{% set tag_names_title = [] %}
{% for tag in photo.tags() %}
{% do tag_names.append(tag.name) %}
{% do tag_names_title.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>
{% set tag_names_title = ", ".join(tag_names_title) %}
{% if tag_names_title %}
{% set tag_names_inner = "T" %}
{% else %}
<div></div>
{% set tag_names_inner = "" %}
{% endif %}
<span>
{% set metadata_inner = "" %}
{% if photo.width %}
{{photo.width}}&times;{{photo.height}},
{% set metadata_inner = "{m}{w}&times;{h}, ".format(m=metadata_inner, w=photo.width, h=photo.height) %}
{% endif %}
{% if photo.duration %}
{{photo.duration_string}},
{% 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 class="photo_card_filename">
<a target="_blank" href="/photo/{{photo.id}}">{{photo.basename}}</a>
</div>
<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 %}