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

Add album cards and improve album pages.

Browse source 
- 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.
This commit is contained in:
voussoir 2018-11-12 22:15:59 -08:00
parent d0208154e4
commit 707fdcc637
8 changed files with 371 additions and 191 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

5
etiquette/objects.py
View file

@ -523,6 +523,11 @@ class Album(ObjectBase, GroupableMixin):
return total
def sum_photos(self, recurse=True):
'''
If all you need is the number of photos in the album, this method is
preferable to len(album.get_photos()) because it performs the counting
in the database instead of creating the Photo objects.
'''
query = '''
SELECT COUNT(photoid)
FROM album_photo_rel

8
frontends/etiquette_flask/backend/endpoints/album_endpoints.py
View file

@ -166,7 +166,13 @@ def get_albums_core():
def get_albums_html():
albums = get_albums_core()
session = session_manager.get(request)
return flask.render_template('album.html', albums=albums, session=session)
response = flask.render_template(
'album.html',
albums=albums,
session=session,
view=request.args.get('view', 'grid'),
)
return response
@site.route('/albums.json')
@session_manager.give_token

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

@ -13,6 +13,8 @@
--color_site_dropshadow: rgba(0, 0, 0, 0.25);
--color_3d_shadow: rgba(0, 0, 0, 0.5);
--color_3d_highlight: rgba(255, 255, 255, 0.5);
--size_sticky_side: 300px;
}
html
@ -34,8 +36,7 @@ input, select, textarea
margin-top: 2px;
margin-bottom: 2px;
padding: 1px;
padding-left: 2px;
padding: 2px;
border: none;
border-radius: 2px;
@ -103,18 +104,50 @@ pre
white-space: pre-line;
}
#left
{
grid-area: left;
}
#right
{
grid-area: right;
}
.sticky_side_left
{
grid-template:
"left right"
/var(--size_sticky_side) 1fr;
}
.sticky_side_right
{
position: fixed;
right: 8px;
bottom: 8px;
top: 34px;
width: 300px;
overflow-y: auto;
grid-template:
"left right"
/1fr var(--size_sticky_side);
}
.sticky_side_left #left,
.sticky_side_right #right
{
grid-area: right;
display: grid;
grid-auto-rows: min-content;
position: fixed;
bottom: 8px;
top: 34px;
width: var(--size_sticky_side);
overflow-y: auto;
background-color: var(--color_site_transparency);
}
.sticky_side_left #left
{
left: 8px;
}
.sticky_side_right #right
{
right: 8px;
}
.editor_input
{

79
frontends/etiquette_flask/static/css/photo_card.css
View file

@ -1,3 +1,65 @@
.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);
@ -5,16 +67,15 @@
.photo_card_list
{
display: grid;
grid-template-columns: auto 1fr auto;
grid-template-rows: auto;
grid-template-areas:
"checkbox filename metadata";
grid-template:
"checkbox filename metadata" auto
/auto 1fr auto;
max-width: 800px;
margin: 8px;
padding: 4px;
}
.photo_card_list:hover
.photo_card:hover
{
box-shadow: 2px 2px 5px 0px var(--color_site_dropshadow);
}
@ -31,7 +92,7 @@
"thumbnail thumbnail" auto
"filename filename" 1fr
"tags metadata" auto
/auto auto;
/10px auto;
min-width: 150px;
max-width: 300px;
height: 210px;
@ -39,7 +100,6 @@
margin: 8px;
border-radius: 8px;
box-shadow: 2px 2px 5px 0px var(--color_site_dropshadow);
}
.photo_card_grid .photo_card_selector_checkbox
{
@ -81,12 +141,11 @@
max-height: 30px;
background-color: inherit;
word-break: break-word;
font-size: 12.8px;
}
.photo_card_grid .photo_card_filename
{
align-self: start;
font-size: 12.8px;
}
.photo_card_list .photo_card_filename
{
@ -106,6 +165,8 @@
font-family: monospace;
font-size: 11px;
cursor: help;
}
.photo_card_metadata
{

262
frontends/etiquette_flask/templates/album.html
View file

@ -1,42 +1,104 @@
<!DOCTYPE html5>
<html>
{% macro shared_css() %}
<style>
h2, h3
{
margin-top: 0;
}
#description_text
{
font-family: initial;
padding: 8px;
}
.remove_child_button
{
display: none;
}
.remove_child_button:hover,
.album_card:hover .remove_child_button
{
display: initial;
}
#left
{
margin-left: auto;
margin-right: auto;
width: 95%;
}
#left > *
{
background-color: var(--color_site_transparency);
margin-top: 30px;
margin-bottom: 30px;
padding: 8px;
/*border: 1px solid black;*/
border-radius: 5px;
}
@media screen and (max-width: 800px)
{
#content_body
{
grid-template:
"left" 1fr
"right" 150px
/1fr;
}
#right
{
top: unset !important;
width: unset !important;
left: 8px;
right: 8px;
bottom: 8px;
height: 150px;
}
}
</style>
{% endmacro %}
{% if album is not defined %} {## Album listing ###################################################}
<head>
{% import "header.html" as header %}
{% import "album_card.html" as album_card %}
<title>Albums</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<link rel="stylesheet" href="/static/css/common.css">
<link rel="stylesheet" href="/static/css/photo_card.css">
<script src="/static/js/common.js"></script>
<script src="/static/js/api.js"></script>
<style>
#album_list
{
flex-direction: column;
}
</style>
{{shared_css()}}
</head>
<body>
{{header.make_header(session=session)}}
<div id="content_body">
<div id="content_body" class="sticky_side_right">
<div id="left">
<div id="album_list">
<h2>Albums</h2>
<ul>
{% for album in albums %}
<li><a href="/album/{{album.id}}">{{album.display_name}}</a></li>
{{album_card.create_album_card(album, view=view)}}
{% endfor %}
<li>
</div>
</div>
<div id="right">
{% if view != "list" %}
<a href="?view=list">List view</a>
{% else %}
<a href="?view=grid">Grid view</a>
{% endif %}
<div>
<button id="create_child_prompt_button" class="green_button" onclick="open_create_child(event);">Create album</button>
<input type="text" id="create_child_title_entry" class="hidden" placeholder="Album title">
<button id="create_child_submit_button" class="green_button hidden" onclick="create_child_form(event);">Create</button>
<button id="create_child_cancel_button" class="gray_button hidden" onclick="cancel_create_child(event);">Cancel</button>
</li>
</ul>
</div>
</div>
</div>
</body>
@ -49,8 +111,9 @@ ALBUM_ID = undefined;
{% else %} {## Individual album ###################################################################}
<head>
{% import "photo_card.html" as photo_card %}
{% import "header.html" as header %}
{% import "album_card.html" as album_card %}
{% import "photo_card.html" as photo_card %}
{% import "clipboard_tray.html" as clipboard_tray %}
<title>{{album.display_name}} | Albums</title>
<meta charset="UTF-8">
@ -64,50 +127,15 @@ ALBUM_ID = undefined;
<script src="/static/js/hotkeys.js"></script>
<script src="/static/js/photo_clipboard.js"></script>
<style>
p
{
word-break: break-word;
}
#album_metadata
{
max-width: 800px;
}
#description_text
{
font-family: initial;
padding: 8px;
background-color: var(--color_site_transparency);
}
ul
{
line-height: 1.5;
}
.remove_child_button
{
display: none;
}
.remove_child_button:hover,
li:hover .remove_child_button
{
display: initial;
}
#photo_list
{
padding-left: 40px;
padding-top: 10px;
padding-bottom: 10px;
}
</style>
{{shared_css()}}
</head>
<body>
{{header.make_header(session=session)}}
<div id="content_body">
<div id="content_body" class="sticky_side_right">
<div id="left">
<div id="hierarchy_self">
<div id="album_metadata">
<h2><span
id="title_text"
@ -126,6 +154,64 @@ li:hover .remove_child_button
>
{{-album.description-}}
</pre>
</div>
</div>
<div id="hierarchy_parents">
<h3>Parents</h3>
{% set parents = album.get_parents() %}
{% if parents %}
{% for parent in parents %}
{{album_card.create_album_card(parent, view=view)}}
{% endfor %}
{% else %}
{{album_card.create_root_album_card(view=view)}}
{% endif %}
</div>
{% set sub_albums = album.get_children() %}
{% if sub_albums %}
<div id="hierarchy_children">
<h3>Children</h3>
{% for sub_album in sub_albums|sort(attribute='title') %}
{{album_card.create_album_card(sub_album, view=view, unlink_parent=album)}}
{% endfor %}
</div>
{% endif %}
{% set photos = album.get_photos() %}
{% if photos %}
<div id="hierarchy_photos">
<h3>{{photos|length}} Photos</h3>
<div id="photo_list">
{% for photo in photos %}
{{photo_card.create_photo_card(photo, view=view)}}
{% endfor %}
</div>
</div>
{% endif %}
{% set has_local_photos = photos|length > 0 %}
{% set has_child_photos = album.has_any_subalbum_photo() %}
{% if has_local_photos or has_child_photos %}
<div id="download_links">
<h3>Download</h3>
{% if has_local_photos %}
<p><a id="download_link_single" href="/album/{{album.id}}.zip?recursive=no">These files &ndash; {{album.sum_bytes(recurse=False)|bytestring}}</a></p>
{% endif %}
{% if has_child_photos %}
<p><a id="download_link_recursive" href="/album/{{album.id}}.zip?recursive=yes">Include children &ndash; {{album.sum_bytes(recurse=True)|bytestring}}</a></p>
{% endif %}
</div>
{% endif %}
</div>
<div id="right">
{% if view != "list" %}
<a href="?view=list">List view</a>
{% else %}
<a href="?view=grid">Grid view</a>
{% endif %}
<button
class="red_button button_with_confirm"
@ -136,84 +222,20 @@ li:hover .remove_child_button
>
Delete
</button>
</div>
<ul id="hierarchy_parents">
{% set viewparam = "?view=list" if view == "list" else "" %}
{% set parents = album.get_parents() %}
{% if parents %}
{% for parent in parents %}
<li><a href="/album/{{parent.id}}{{viewparam}}">{{parent.display_name}}</a></li>
{% endfor %}
{% else %}
<li><a href="/albums">Albums</a></li>
{% endif %}
<ul id="hierarchy_self">
<li>{{album.display_name}}</li>
<ul id="heirarchy_children">
{% set sub_albums = album.get_children() %}
{% for sub_album in sub_albums|sort(attribute='title') %}
<li>
<a href="/album/{{sub_album.id}}{{viewparam}}">{{sub_album.display_name}}</a>
<button
class="remove_child_button button_with_confirm red_button"
data-onclick="api.albums.remove_child(ALBUM_ID, '{{sub_album.id}}', common.refresh)"
data-prompt="Remove child?"
data-holder-class="remove_child_button"
data-confirm-class="red_button"
data-cancel-class="gray_button"
>
Unlink
</button>
</li>
{% endfor %}
<li>
<div>
<button id="create_child_prompt_button" class="green_button" onclick="open_create_child(event);">Create child</button>
<input type="text" id="create_child_title_entry" class="hidden" placeholder="Album title">
<button id="create_child_submit_button" class="green_button hidden" onclick="create_child_form(event);">Create</button>
<button id="create_child_cancel_button" class="gray_button hidden" onclick="cancel_create_child(event);">Cancel</button>
</li>
<li>
</div>
<div>
<button id="add_child_prompt_button" class="green_button" onclick="open_add_child(event);">Add child</button>
<input type="text" id="add_child_id_entry" class="hidden" placeholder="Album ID">
<button id="add_child_submit_button" class="green_button hidden" onclick="add_child_form(event);">Add</button>
<button id="add_child_cancel_button" class="gray_button hidden" onclick="cancel_add_child(event);">Cancel</button>
</li>
</ul>
</ul>
</ul>
{% set photos = album.get_photos() %}
{% if photos %}
<h3>{{photos|length}} Photos</h3>
{% if view != "list" %}
<a href="?view=list">List view</a>
{% else %}
<a href="?view=grid">Grid view</a>
{% endif %}
<div id="photo_list">
{% for photo in photos %}
{{photo_card.create_photo_card(photo, view=view)}}
{% endfor %}
</div>
{% endif %}
{% set has_local_photos = photos|length > 0 %}
{% set has_child_photos = album.has_any_subalbum_photo() %}
{% if has_local_photos or has_child_photos %}
<p id="download_links">
<span>Download:</span>
{% if has_local_photos %}
<a id="download_link_single" href="/album/{{album.id}}.zip?recursive=no">These files ({{album.sum_bytes(recurse=False)|bytestring }})</a>
{% if has_child_photos %}<span>&mdash;</span>{% endif %}
{% endif %}
{% if has_child_photos %}
<a id="download_link_recursive" href="/album/{{album.id}}.zip?recursive=yes">Include children ({{album.sum_bytes(recurse=True)|bytestring }})</a>
{% endif %}
</p>
{% endif %}
</div>
{{clipboard_tray.clipboard_tray()}}
<div class="my_clipboard_tray_toolbox">

65
frontends/etiquette_flask/templates/album_card.html Normal file
View file

@ -0,0 +1,65 @@
{% macro create_root_album_card(view="grid") %}
{% set viewparam = "?view=list" if view == "list" else "" %}
{% if view == "list" %}
<div class="album_card album_card_list">
<div class="album_card_title">
<a href="/albums{{viewparam}}">Albums</a>
</div>
</div>
{% else %}
<div class="album_card album_card_grid">
<a class="album_card_thumbnail" href="/albums">
</a>
<div class="album_card_title">
<a href="/albums">Albums</a>
</div>
</div>
{% endif %}
{% endmacro %}
{% macro create_album_card(album, view="grid", unlink_parent=none) %}
{% set viewparam = "?view=list" if view == "list" else "" %}
{% if view == "list" %}
<div class="album_card album_card_list">
<div class="album_card_title">
<a href="/album/{{album.id}}{{viewparam}}">{{album.display_name}}</a>
</div>
<span class="album_card_metadata">
<span class="album_card_child_count">{{album.get_children()|length}}</span> children
{{-' '-}}|{{-' '-}}
<span class="album_card_photo_count">{{album.sum_photos(recurse=False)}}</span> photos
</span>
</div>
{% else %}
<div class="album_card album_card_grid" data-id="{{album.id}}">
<a class="album_card_thumbnail" href="/album/{{album.id}}{{viewparam}}">
</a>
<div class="album_card_title">
<a href="/album/{{album.id}}{{viewparam}}">{{album.display_name}}</a>
</div>
<span class="album_card_metadata">
<span class="album_card_child_count">{{album.get_children()|length}}</span> children
{{-' '-}}|{{-' '-}}
<span class="album_card_photo_count">{{album.sum_photos(recurse=False)}}</span> photos
</span>
<div class="album_card_tools">
{% if unlink_parent is not none %}
<button
class="remove_child_button button_with_confirm red_button"
data-onclick="api.albums.remove_child('{{unlink_parent.id}}', '{{album.id}}', common.refresh)"
data-prompt="Remove child?"
data-holder-class="remove_child_button"
data-confirm-class="red_button"
data-cancel-class="gray_button"
>Unlink
</button>
{% endif %}
</div>
</div>
{% endif %}
{% endmacro %}

15
frontends/etiquette_flask/templates/clipboard.html
View file

@ -16,13 +16,6 @@
<script src="/static/js/tag_autocomplete.js"></script>
<style>
#content_body
{
display: grid;
grid-template:
"left right" 1fr
/1fr 300px;
}
#header
{
grid-area: header;
@ -83,8 +76,8 @@
}
#right
{
top: unset;
width: unset;
top: unset !important;
width: unset !important;
left: 8px;
right: 8px;
bottom: 8px;
@ -106,14 +99,14 @@
<body>
{{header.make_header(session=session)}}
<div id="content_body">
<div id="content_body" class="sticky_side_right">
<div id="left">
<span>The clipboard contains <span class="clipboard_count">0</span> items.</span>
<button id="clear_clipboard_button" class="red_button" onclick="photo_clipboard.clear_clipboard()">Clear it.</button>
<div id="photo_card_holder">
</div>
</div>
<div id="right" class="sticky_side_right">
<div id="right">
<div id="add_tag_area">
<input type="text" id="add_tag_textbox" list="tag_autocomplete_datalist">
<button class="add_tag_button green_button" id="add_tag_button" onclick="add_tag_form();">Add tag</button>

17
frontends/etiquette_flask/templates/tags.html
View file

@ -20,12 +20,6 @@
{
grid-area: header;
}
#content_body
{
grid-template:
"left right"
/1fr 300px;
}
#left
{
word-break: break-word;
@ -64,12 +58,13 @@
{
grid-template:
"left" 1fr
"right" 150px;
"right" 150px
/1fr;
}
#right
{
top: unset;
width: unset;
top: unset !important;
width: unset !important;
left: 8px;
right: 8px;
bottom: 8px;
@ -86,7 +81,7 @@
<body>
{{header.make_header(session=session)}}
<div id="content_body">
<div id="content_body" class="sticky_side_right">
<div id="left">
{% if specific_tag %}
<div id="tag_metadata">
@ -178,7 +173,7 @@
{% endfor %}
</ul>
</div>
<div id="right" class="sticky_side_right">
<div id="right">
<div id="editor_area">
<input type="text" id="add_tag_textbox" autofocus>
<button class="add_tag_button green_button" id="add_tag_button" onclick="easybake_form();">bake</button>