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 .photo_card_list
{ {
display: flex; display: grid;
flex-direction: row; grid-template-columns: 1fr auto;
justify-content: space-between; grid-template-rows: auto;
grid-template-areas:
"filename metadata";
max-width: 800px;
margin: 8px; margin: 8px;
padding: 4px; padding: 4px;
background-color: #ffffd4; background-color: #ffffd4;
} }
.photo_card_list:hover
{
box-shadow: 2px 2px 5px 0px rgba(0,0,0,0.25);
}
.photo_card_grid .photo_card_grid
{ {
display: inline-flex; display: inline-grid;
flex-direction: column; grid-template-columns: auto auto;
vertical-align: middle; grid-template-rows: auto 1fr auto;
grid-template-areas:
"thumbnail thumbnail"
"filename filename"
"tags metadata";
min-width: 150px; min-width: 150px;
max-width: 300px; max-width: 300px;
height: 200px; height: 200px;
@ -159,91 +169,64 @@ is hovered over.
background-color: #ffffd4; background-color: #ffffd4;
} }
.photo_card_grid_thumb .photo_card_thumbnail
{ {
display:flex; grid-area: thumbnail;
flex-direction: column; align-self: start;
justify-content: center; justify-self: center;
align-items: center;
width: 100%;
height: 150px;
} }
.photo_card_grid_thumb a .photo_card_thumbnail img
{
display:flex;
flex-direction: column;
justify-content: center;
align-items: center;
width: 100%;
height: 100%;
}
.photo_card_grid_thumb img
{ {
max-width: 100%; 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 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 thumbnail image. Previously, I had problems where the card would be wider
than necessary because the file had a long name. 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. 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%; min-width: 100%;
width: 0; width: 0;
overflow: hidden;
z-index: 1;
max-height: 30px; max-height: 30px;
background-color: inherit; 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; overflow: visible;
max-height: none;
} }
.photo_card_grid_filename_hoverhelper:hover .photo_card_tags
{ {
background-color: inherit; grid-area: tags;
} align-self: end;
.photo_card_grid_file_metadata justify-self: start;
{
display: flex;
z-index: 0;
justify-content: space-between;
font-family: monospace; font-family: monospace;
font-size: 11px; font-size: 11px;
} }
.photo_card_grid_tags .photo_card_metadata
{ {
align-self: flex-start; grid-area: metadata;
/* align-self: end;
When the metadata is long it tends to squish against the T, so give it justify-self: end;
some breathing room.
*/ font-family: monospace;
margin-right: 8px; font-size: 11px;
} }
.tag_object .tag_object
{ {
border-radius: 2px; border-radius: 2px;

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

@ -18,59 +18,57 @@
{% if view == "list" %} {% if view == "list" %}
<div class="photo_card_list"> <div class="photo_card_list">
<a target="_blank" href="/photo/{{photo.id}}">{{photo.basename}}</a> <span class="photo_card_filename"><a target="_blank" href="/photo/{{photo.id}}">{{photo.basename}}</a></span>
<a target="_blank" href="/file/{{photo.id}}.{{photo.extension}}">{{photo.bytestring()}}</a> <a class="photo_card_metadata" target="_blank" href="/file/{{photo.id}}.{{photo.extension}}">{{photo.bytestring()}}</a>
</div> </div>
{% else %} {% 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 %} {% if photo.thumbnail %}
src="/thumbnail/{{photo.id}}.jpg" {% set thumbnail_src = "/thumbnail/" + photo.id + ".jpg" %}
{% else %} {% else %}
{% set choice = {% set thumbnail_src =
thumbnails.get(photo.extension, thumbnails.get(photo.extension, "") or
thumbnails.get(photo.mimetype, thumbnails.get(photo.mimetype, "") or
thumbnails.get(photo.simple_mimetype, thumbnails.get(photo.simple_mimetype, "") or
'other'))) "other"
%} %}
src="/static/basic_thumbnails/{{choice}}.png" {% set thumbnail_src = "/static/basic_thumbnails/" + thumbnail_src + ".png" %}
{% endif %} {% endif %}
>
</a> {% set tag_names_title = [] %}
</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 = [] %}
{% for tag in photo.tags() %} {% for tag in photo.tags() %}
{% do tag_names.append(tag.name) %} {% do tag_names_title.append(tag.name) %}
{% endfor %} {% endfor %}
{% if tag_names %} {% set tag_names_title = ", ".join(tag_names_title) %}
<div class="photo_card_grid_tags"> {% if tag_names_title %}
{% set tag_names = ", ".join(tag_names) %} {% set tag_names_inner = "T" %}
<span title="{{tag_names}}">T</span>
</div>
{% else %} {% else %}
<div></div> {% set tag_names_inner = "" %}
{% endif %} {% endif %}
<span>
{% set metadata_inner = "" %}
{% if photo.width %} {% 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 %} {% endif %}
{% if photo.duration %} {% if photo.duration %}
{{photo.duration_string}}, {% set metadata_inner = "{m}{d}, ".format(m=metadata_inner, d=photo.duration_string) %}
{% endif %} {% 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> <a target="_blank" href="/file/{{photo.id}}.{{photo.extension}}">{{photo.bytestring()}}</a>
</span> </span>
</div> </div>
</div>
</div>
{% endif %} {% endif %}
{% endmacro %} {% endmacro %}