Combine all card templates into cards.html.

2021-01-19 16:33:34 -08:00 · 2021-01-19 16:33:34 -08:00 · 5e7b90cbe4
commit 5e7b90cbe4
parent fb5f2f2470
14 changed files with 253 additions and 246 deletions
--- a/frontends/etiquette_flask/backend/jinja_filters.py
+++ b/frontends/etiquette_flask/backend/jinja_filters.py
@ -50,6 +50,12 @@ def file_link(photo, short=False):
 def islice(gen, start, stop):
    return itertools.islice(gen, start, stop)

+@filter_function
+def join_and_trail(l, s):
+    if not l:
+        return ''
+    return s.join(l) + s
+
@filter_function
 def timestamp_to_8601(timestamp):
    return datetime.datetime.utcfromtimestamp(timestamp).isoformat(' ') + ' UTC'
--- a/frontends/etiquette_flask/static/css/cards.css
+++ b/frontends/etiquette_flask/static/css/cards.css
@ -146,9 +146,9 @@
    position: relative;
    display: grid;
    grid-template:
-        "checkbox filename metadata" auto
-        /auto     1fr      auto;
-
+        "checkbox filename metadata tags" auto
+        /auto     1fr      auto     auto;
+    grid-column-gap: 4px;
    margin: 8px;
    padding: 4px;
 }
--- a/frontends/etiquette_flask/templates/album.html
+++ b/frontends/etiquette_flask/templates/album.html
@ -64,7 +64,7 @@ h2, h3

 <head>
    {% import "header.html" as header %}
-    {% import "album_card.html" as album_card %}
+    {% import "cards.html" as cards %}
    <title>Albums</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
@ -85,7 +85,7 @@ h2, h3
        <div id="album_list" class="panel">
            <h2>Albums</h2>
            {% for album in albums %}
-            {{album_card.create_album_card(album, view=view, draggable=true)}}
+            {{cards.create_album_card(album, view=view, draggable=true)}}
            {% endfor %}
        </div>
    </div>
@ -116,8 +116,7 @@ const ALBUM_ID = undefined;

 <head>
    {% import "header.html" as header %}
-    {% import "album_card.html" as album_card %}
-    {% import "photo_card.html" as photo_card %}
+    {% import "cards.html" as cards %}
    {% import "clipboard_tray.html" as clipboard_tray %}
    <title>{{album.display_name}} | Albums</title>
    <meta charset="UTF-8">
@ -221,11 +220,11 @@ const ALBUM_ID = undefined;
            {% if parents %}
                <h3>{{parents|length}} Parents</h3>
                {% for parent in parents %}
-                    {{album_card.create_album_card(parent, view=view)}}
+                    {{cards.create_album_card(parent, view=view)}}
                {% endfor %}
            {% else %}
                <h3>1 Parent</h3>
-                {{album_card.create_album_card("root", view=view)}}
+                {{cards.create_album_card("root", view=view)}}
            {% endif %}
        </div>

@ -234,7 +233,7 @@ const ALBUM_ID = undefined;
        <div id="hierarchy_children" class="panel">
            <h3>{{sub_albums|length}} Children</h3>
            {% for sub_album in sub_albums|sort(attribute='title') %}
-                {{album_card.create_album_card(sub_album, view=view, unlink_parent=album, draggable=true)}}
+                {{cards.create_album_card(sub_album, view=view, unlink_parent=album, draggable=true)}}
            {% endfor %}
        </div>
        {% endif %}
@ -245,7 +244,7 @@ const ALBUM_ID = undefined;
            <h3>{{photos|length}} Photos</h3>
            <div id="photo_list">
            {% for photo in photos|sort(attribute='basename', case_sensitive=False) %}
-                {{photo_card.create_photo_card(photo, view=view)}}
+                {{cards.create_photo_card(photo, view=view)}}
            {% endfor %}
            </div>
        </div>
--- a/frontends/etiquette_flask/templates/album_card.html
+++ b/frontends/etiquette_flask/templates/album_card.html
@ -1,63 +0,0 @@
-{% macro create_album_card(album, view="grid", unlink_parent=none, draggable=false) %}
-{% set id = "album_card_root" if album == "root" else "album_card_" + album.id %}
-{% set view = (view if view in ("list", "grid") else "grid") %}
-{% set viewparam = "?view=list" if view == "list" else "" %}
-<div
-id="{{id}}"
-class="album_card album_card_{{view}}"
-data-id="{{'root' if album == 'root' else album.id}}"
-ondragstart="return on_album_drag_start(event);"
-ondragend="return on_album_drag_end(event);"
-ondragover="return on_album_drag_over(event);"
-ondrop="return on_album_drag_drop(event);"
-{% if album != "root" and draggable %}
-draggable=true
-{% endif %}
->
-    {% if album == "root" %}
-    <a class="album_card_thumbnail" href="/albums{{viewparam}}">
-    {% else %}
-    <a class="album_card_thumbnail" href="/album/{{album.id}}{{viewparam}}">
-    {% endif %}
-    {% if album.thumbnail_photo %}
-    {% set thumbnail_src = "/thumbnail/" + album.thumbnail_photo.id + ".jpg" %}
-    {% else %}
-    {% set thumbnail_src = "/static/basic_thumbnails/album.png" %}
-    {% endif %}
-    <img src="{{thumbnail_src}}"/>
-    </a>
-
-    <div class="album_card_tools">
-        {% if unlink_parent is not none %}
-        <button
-        class="remove_child_button button_with_confirm red_button"
-        data-onclick="return api.albums.remove_child('{{unlink_parent.id}}', '{{album.id}}', common.refresh_or_alert);"
-        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 class="album_card_title">
-        {% if album == "root" %}
-        <a href="/albums{{viewparam}}">Albums</a>
-        {% else %}
-        <a href="/album/{{album.id}}{{viewparam}}">{{album.display_name}}</a>
-        {% endif %}
-    </div>
-
-    <div class="album_card_metadata">
-        {% if album == "root" %}
-        {% else %}
-        {% set child_count = album.sum_children(recurse=False) %}
-        {% set photo_count = album.sum_photos(recurse=False) %}
-        <span class="album_card_child_count" title="{{child_count}} child albums">{{child_count}}</span>
-        {{-' | '-}}
-        <span class="album_card_photo_count" title="{{photo_count}} photos">{{photo_count}}</span>
-        {% endif %}
-    </div>
-</div>
-{% endmacro %}
--- a/frontends/etiquette_flask/templates/bookmark_card.html
+++ b/frontends/etiquette_flask/templates/bookmark_card.html
@ -1,20 +0,0 @@
-{% macro create_bookmark_card(bookmark, add_delete_button=False) %}
-<div class="bookmark_card" data-id="{{bookmark.id}}">
-    <a href="{{bookmark.url}}" class="bookmark_title">{{bookmark.display_name}}</a>
-
-    <a href="{{bookmark.url}}" class="bookmark_url">{{bookmark.url}}</a>
-
-    <div class="bookmark_toolbox">
-        {% if add_delete_button %}
-        <button
-        class="red_button button_with_confirm"
-        data-onclick="return delete_bookmark_form(event);"
-        data-prompt="Delete Bookmark?"
-        data-cancel-class="gray_button"
-        >
-            Delete
-        </button>
-        {% endif %}
-    </div>
-</div>
-{% endmacro %}
--- a/frontends/etiquette_flask/templates/bookmarks.html
+++ b/frontends/etiquette_flask/templates/bookmarks.html
@ -1,8 +1,8 @@
 <!DOCTYPE html5>
 <html>
 <head>
-    {% import "bookmark_card.html" as bookmark_card %}
    {% import "header.html" as header %}
+    {% import "cards.html" as cards %}
    <title>Bookmarks</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
@ -31,7 +31,7 @@
        <div id="bookmark_list">
            <h2>Bookmarks</h2>
            {% for bookmark in bookmarks %}
-            {{bookmark_card.create_bookmark_card(bookmark, add_delete_button=True)}}
+            {{cards.create_bookmark_card(bookmark, add_delete_button=True)}}
            {% endfor %}

            <div class="bookmark_card new_bookmark_card">
--- a/frontends/etiquette_flask/templates/cards.html
+++ b/frontends/etiquette_flask/templates/cards.html
@ -0,0 +1,202 @@
+{# ALBUM ######################################################################}
+
+{% macro create_album_card(album, view="grid", unlink_parent=none, draggable=false) %}
+{% set id = "album_card_root" if album == "root" else "album_card_" + album.id %}
+{% set view = (view if view in ("list", "grid") else "grid") %}
+{% set viewparam = "?view=list" if view == "list" else "" %}
+<div
+id="{{id}}"
+class="album_card album_card_{{view}}"
+data-id="{{'root' if album == 'root' else album.id}}"
+ondragstart="return on_album_drag_start(event);"
+ondragend="return on_album_drag_end(event);"
+ondragover="return on_album_drag_over(event);"
+ondrop="return on_album_drag_drop(event);"
+{% if album != "root" and draggable %}
+draggable=true
+{% endif %}
+>
+    {% if album == "root" %}
+    <a class="album_card_thumbnail" href="/albums{{viewparam}}">
+    {% else %}
+    <a class="album_card_thumbnail" href="/album/{{album.id}}{{viewparam}}">
+    {% endif %}
+    {% if album.thumbnail_photo %}
+    {% set thumbnail_src = "/thumbnail/" + album.thumbnail_photo.id + ".jpg" %}
+    {% else %}
+    {% set thumbnail_src = "/static/basic_thumbnails/album.png" %}
+    {% endif %}
+    <img src="{{thumbnail_src}}"/>
+    </a>
+
+    <div class="album_card_title">
+        {% if album == "root" %}
+        <a href="/albums{{viewparam}}">Albums</a>
+        {% else %}
+        <a href="/album/{{album.id}}{{viewparam}}">{{album.display_name}}</a>
+        {% endif %}
+    </div>
+
+    <div class="album_card_metadata">
+        {% if album != "root" %}
+        {% set child_count = album.sum_children(recurse=False) %}
+        {% set photo_count = album.sum_photos(recurse=False) %}
+        <span class="album_card_child_count" title="{{child_count}} child albums">{{child_count}}</span>
+        {{-' | '-}}
+        <span class="album_card_photo_count" title="{{photo_count}} photos">{{photo_count}}</span>
+        {% endif %}
+    </div>
+
+    <div class="album_card_tools">
+        {% if unlink_parent is not none %}
+        <button
+        class="remove_child_button button_with_confirm red_button"
+        data-onclick="return api.albums.remove_child('{{unlink_parent.id}}', '{{album.id}}', common.refresh_or_alert);"
+        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>
+{% endmacro %}
+
+{# BOOKMARK ###################################################################}
+
+{% macro create_bookmark_card(bookmark, add_delete_button=False) %}
+<div class="bookmark_card" data-id="{{bookmark.id}}">
+    <a href="{{bookmark.url}}" class="bookmark_title">{{bookmark.display_name}}</a>
+
+    <a href="{{bookmark.url}}" class="bookmark_url">{{bookmark.url}}</a>
+
+    <div class="bookmark_toolbox">
+        {% if add_delete_button %}
+        <button
+        class="red_button button_with_confirm"
+        data-onclick="return delete_bookmark_form(event);"
+        data-prompt="Delete Bookmark?"
+        data-cancel-class="gray_button"
+        >
+            Delete
+        </button>
+        {% endif %}
+    </div>
+</div>
+{% endmacro %}
+
+{# PHOTO ######################################################################}
+
+{# Priority: specific extensions > specific mimetypes > general mimtypes #}
+{% set thumbnails =
+    {
+        "svg": "svg",
+
+        "application/zip": "archive",
+        "application/x-tar": "archive",
+
+        "archive": "archive",
+        "audio": "audio",
+        "image": "image",
+        "video": "video",
+        "text": "txt",
+
+    }
+%}
+{% macro create_photo_card(photo, view="grid") %}
+{% set view = (view if view in ("list", "grid") else "grid") %}
+
+{% set metadatas = [] %}
+{% if photo.width %}
+    {% do metadatas.append("{w}&times;{h}".format(w=photo.width, h=photo.height)) %}
+{% endif %}
+{% if photo.duration %}
+    {% do metadatas.append("{d}".format(d=photo.duration_string)) %}
+{% endif -%}
+
+{% set tag_names_title = [] %}
+{% for tag in photo.get_tags() %}
+    {% do tag_names_title.append(tag.name) %}
+{% endfor -%}
+{% set tag_names_title = tag_names_title|comma_join %}
+{% set tag_names_inner = "T" if tag_names_title else "" %}
+
+<div
+data-id="{{photo.id}}"
+class="photo_card photo_card_{{view}} photo_card_unselected {%if photo.searchhidden%}photo_card_searchhidden{%endif%}"
+>
+    <div class="photo_card_filename"><a target="_blank" href="/photo/{{photo.id}}">{{photo.basename}}</a></div>
+
+    <span class="photo_card_metadata">
+        {{- metadatas|join_and_trail(", ")|safe -}}
+        <a target="_blank" href="{{photo|file_link}}">{{photo.bytestring}}</a>
+    </span>
+
+    {% if view == "grid" %}
+    {% 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"
+        %}
+        {% set thumbnail_src = "/static/basic_thumbnails/" + thumbnail_src + ".png" %}
+    {% endif -%}{# if thumbnail #}
+
+    <a class="photo_card_thumbnail" target="_blank" href="/photo/{{photo.id}}"><img loading="lazy" src="{{thumbnail_src}}"></a>
+    {% endif %}{# if grid #}
+
+    <span class="photo_card_tags" title="{{tag_names_title}}">{{tag_names_inner}}</span>
+</div>
+
+{% endmacro %}
+
+{# TAG ########################################################################}
+
+<!--
+    tag: The Tag object
+    extra_classes:
+        Space-separated string, if you want more than "tag_card".
+    innertext:
+        A string to use as the innertext.
+        Otherwise, will use the name based on the other parameters.
+    link:
+        None = no link, just a <span>
+        'search' = link to /search?tag_musts=tagname
+        'search_musts' = link to /search?tag_musts=tagname
+        'search_mays' = link to /search?tag_mays=tagname
+        'search_forbids' = link to /search?tag_forbids=tagname
+        'info' = link to /tags/tagname
+    with_alt_description:
+        True: Include the description in the alt text
+-->
+{%- macro create_tag_card(
+    tag,
+    extra_classes="",
+    innertext=None,
+    innertext_safe=None,
+    link='info',
+    onclick=None,
+    with_alt_description=False
+) -%}
+
+{%- set href = {
+        "search": "/search?tag_musts=" + (tag.name|urlencode),
+        "search_musts": "/search?tag_musts=" + (tag.name|urlencode),
+        "search_mays": "/search?tag_mays=" + (tag.name|urlencode),
+        "search_forbids": "/search?tag_forbids=" + (tag.name|urlencode),
+        "info": "/tag/" + tag.name,
+        None: None,
+    }.get(link, link)
+-%}
+{%- set class = ("tag_card" + " " + extra_classes).strip() -%}
+{%- set title = (with_alt_description and tag.description) or None -%}
+{%- set innertext = innertext_safe or (innertext or tag.name)|e -%}
+{%- set element = "a" if (link or onclick) else "span" -%}
+
+<{{element}} {{make_attributes(class=class, title=title, href=href, onclick=onclick, **kwargs)|safe}}>{{innertext|safe}}</{{element}}>
+{{-''-}}
+{%- endmacro -%}
--- a/frontends/etiquette_flask/templates/photo.html
+++ b/frontends/etiquette_flask/templates/photo.html
@ -2,7 +2,7 @@
 <html>
 <head>
    {% import "header.html" as header %}
-    {% import "tag_card.html" as tag_card %}
+    {% import "cards.html" as cards %}
    <title>{{photo.basename}} | Photos</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
@ -162,7 +162,7 @@
            {% set tags = photo.get_tags()|sort(attribute='name') %}
            {% for tag in tags %}
            <li>
-                {{tag_card.create_tag_card(tag, link="info", with_alt_description=True)}}<!--
+                {{cards.create_tag_card(tag, link="info", with_alt_description=True)}}<!--
                --><button
                class="remove_tag_button red_button"
                onclick="return remove_photo_tag_form('{{photo.id}}', '{{tag.name}}');">
--- a/frontends/etiquette_flask/templates/photo_card.html
+++ b/frontends/etiquette_flask/templates/photo_card.html
@ -1,67 +0,0 @@
-{# Specific extensions, then specific mimetypes, then general mimtypes #}
-{% set thumbnails =
-    {
-        "svg": "svg",
-
-        "application/zip": "archive",
-        "application/x-tar": "archive",
-
-        "archive": "archive",
-        "audio": "audio",
-        "image": "image",
-        "video": "video",
-        "text": "txt",
-
-    }
-%}
-{% macro create_photo_card(photo, view="grid") %}
-{% set view = (view if view in ("list", "grid") else "grid") %}
-
-{% set metadata_inner = "" %}
-{% if photo.width %}
-    {% set metadata_inner = "{m}{w}&times;{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
-    data-id="{{photo.id}}"
-    class="photo_card photo_card_{{view}} photo_card_unselected {%if photo.searchhidden%}photo_card_searchhidden{%endif%}"
->
-    <div class="photo_card_filename"><a target="_blank" href="/photo/{{photo.id}}">{{photo.basename}}</a></div>
-    <span class="photo_card_metadata">
-        {{- metadata_inner|safe -}}
-        <a target="_blank" href="{{photo|file_link}}">{{photo.bytestring}}</a>
-    </span>
-
-    {% if view == "grid" %}
-    {% 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"
-        %}
-        {% set thumbnail_src = "/static/basic_thumbnails/" + thumbnail_src + ".png" %}
-    {% endif -%}
-
-    {% set tag_names_title = [] %}
-    {% for tag in photo.get_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 -%}
-    <a class="photo_card_thumbnail" target="_blank" href="/photo/{{photo.id}}"><img loading="lazy" src="{{thumbnail_src}}"></a>
-    <span class="photo_card_tags" title="{{tag_names_title}}">{{tag_names_inner}}</span>
-    {% endif %}
-</div>
-
-{% endmacro %}
--- a/frontends/etiquette_flask/templates/search.html
+++ b/frontends/etiquette_flask/templates/search.html
@ -2,9 +2,7 @@
 <html>
 <head>
    {% import "header.html" as header %}
-    {% import "album_card.html" as album_card %}
-    {% import "photo_card.html" as photo_card %}
-    {% import "tag_card.html" as tag_card %}
+    {% import "cards.html" as cards %}
    {% import "clipboard_tray.html" as clipboard_tray %}
    <title>Search</title>
    <meta charset="UTF-8">
@ -200,7 +198,7 @@
                {% if search_kwargs[key] %}
                    {% for tag in search_kwargs[key] %}
                        <li class="search_builder_{{tagtype}}_inputted">
-                            {{tag_card.create_tag_card(tag, link='info', with_alt_description=True)}}<!--
+                            {{cards.create_tag_card(tag, link='info', with_alt_description=True)}}<!--
                            --><button class="remove_tag_button red_button"
                            onclick="return remove_searchtag(ul_{{tagtype}}, '{{tag.name}}', inputted_{{tagtype}});"></button>
                        </li>
@ -327,28 +325,28 @@
        <ul id="tags_on_this_page_list">
            {% for tag in total_tags %}
            <li>
-                {{tag_card.create_tag_card(
+                {{cards.create_tag_card(
                    tag,
                    link=None,
                    onclick="return tags_on_this_page_add_must(event, '" + tag.name + "');",
                    innertext="(+)",
                )}}

-                {{tag_card.create_tag_card(
+                {{cards.create_tag_card(
                    tag,
                    link=None,
                    onclick="return tags_on_this_page_add_may(event, '" + tag.name + "');",
                    innertext="(~)",
                )}}

-                {{tag_card.create_tag_card(
+                {{cards.create_tag_card(
                    tag,
                    link=None,
                    onclick="return tags_on_this_page_add_forbid(event, '" + tag.name + "');",
                    innertext="(x)",
                )}}

-                {{tag_card.create_tag_card(
+                {{cards.create_tag_card(
                    tag,
                    link="info",
                    with_alt_description=True,
@ -375,9 +373,9 @@
        <div id="search_results_holder" class="photos_holder">
            {% for result in results %}
                {% if result.__class__.__name__ == 'Photo' %}
-                {{photo_card.create_photo_card(result, view=search_kwargs["view"])}}
+                {{cards.create_photo_card(result, view=search_kwargs["view"])}}
                {% elif result.__class__.__name__ == 'Album' %}
-                {{album_card.create_album_card(result, view=search_kwargs["view"])}}
+                {{cards.create_album_card(result, view=search_kwargs["view"])}}
                {% endif %}
            {% endfor %}
        </div>
--- a/frontends/etiquette_flask/templates/search_embed.html
+++ b/frontends/etiquette_flask/templates/search_embed.html
@ -16,13 +16,12 @@ body

 <body>
    <div>
-    {% import "photo_card.html" as photo_card %}
-    {% import "album_card.html" as album_card %}
+    {% import "cards.html" as cards %}
    {% for result in results %}
        {% if result.__class__.__name__ == 'Photo' %}
-        {{photo_card.create_photo_card(result, view=search_kwargs["view"])}}
+        {{cards.create_photo_card(result, view=search_kwargs["view"])}}
        {% elif result.__class__.__name__ == 'Album' %}
-        {{album_card.create_album_card(result, view=search_kwargs["view"])}}
+        {{cards.create_album_card(result, view=search_kwargs["view"])}}
        {% endif %}
    {% endfor %}
    </div>
--- a/frontends/etiquette_flask/templates/tag_card.html
+++ b/frontends/etiquette_flask/templates/tag_card.html
@ -1,44 +0,0 @@
-<!--
-    tag: The Tag object
-    extra_classes:
-        Space-separated string, if you want more than "tag_card".
-    innertext:
-        A string to use as the innertext.
-        Otherwise, will use the name based on the other parameters.
-    link:
-        None = no link, just a <span>
-        'search' = link to /search?tag_musts=tagname
-        'search_musts' = link to /search?tag_musts=tagname
-        'search_mays' = link to /search?tag_mays=tagname
-        'search_forbids' = link to /search?tag_forbids=tagname
-        'info' = link to /tags/tagname
-    with_alt_description:
-        True: Include the description in the alt text
-->
-{%- macro create_tag_card(
-    tag,
-    extra_classes="",
-    innertext=None,
-    innertext_safe=None,
-    link='info',
-    onclick=None,
-    with_alt_description=False
-) -%}
-
-{%- set href = {
-        "search": "/search?tag_musts=" + (tag.name|urlencode),
-        "search_musts": "/search?tag_musts=" + (tag.name|urlencode),
-        "search_mays": "/search?tag_mays=" + (tag.name|urlencode),
-        "search_forbids": "/search?tag_forbids=" + (tag.name|urlencode),
-        "info": "/tag/" + tag.name,
-        None: None,
-    }.get(link, link)
-%}
-{%- set class = ("tag_card" + " " + extra_classes).strip() -%}
-{%- set title = (with_alt_description and tag.description) or None -%}
-{%- set innertext = innertext_safe or (innertext or tag.name)|e -%}
-{%- set element = "a" if (link or onclick) else "span" -%}
-
-<{{element}} {{make_attributes(class=class, title=title, href=href, onclick=onclick, **kwargs)|safe}}>{{innertext|safe}}</{{element}}>
-{{-''-}}
-{%- endmacro -%}
--- a/frontends/etiquette_flask/templates/tags.html
+++ b/frontends/etiquette_flask/templates/tags.html
@ -2,7 +2,7 @@
 <html>
 <head>
    {% import "header.html" as header %}
-    {% import "tag_card.html" as tag_card %}
+    {% import "cards.html" as cards %}
    {% if specific_tag is none %}
        <title>Tags</title>
    {% else %}
@ -96,7 +96,7 @@ h2, h3
        {% if specific_tag %}
        <div id="hierarchy_self" class="panel">
            <div id="tag_metadata">
-                <h2>{{tag_card.create_tag_card(
+                <h2>{{cards.create_tag_card(
                    specific_tag,
                    link="search",
                    id="name_text",
@ -130,9 +130,9 @@ h2, h3
            <ul id="parent_list">
            {% for ancestor in specific_tag.get_parents() %}
            <li>
-                {{tag_card.create_tag_card(ancestor, link="search_musts", innertext="(+)")}}
-                {{tag_card.create_tag_card(ancestor, link="search_forbids", innertext="(x)")}}
-                {{tag_card.create_tag_card(ancestor, link="info", innertext=ancestor.name, with_alt_description=True)}}
+                {{cards.create_tag_card(ancestor, link="search_musts", innertext="(+)")}}
+                {{cards.create_tag_card(ancestor, link="search_forbids", innertext="(x)")}}
+                {{cards.create_tag_card(ancestor, link="info", innertext=ancestor.name, with_alt_description=True)}}
            </li>
            {% endfor %}
            </ul>
@ -149,9 +149,9 @@ h2, h3
            <ul id="tag_list">
            {% for (qualified_name, tag) in tags %}
                <li>
-                    {{tag_card.create_tag_card(tag, link="search_musts", innertext="(+)")}}
-                    {{tag_card.create_tag_card(tag, link="search_forbids", innertext="(x)")}}
-                    {{tag_card.create_tag_card(tag, link="info", innertext=qualified_name, with_alt_description=True)-}}
+                    {{cards.create_tag_card(tag, link="search_musts", innertext="(+)")}}
+                    {{cards.create_tag_card(tag, link="search_forbids", innertext="(x)")}}
+                    {{cards.create_tag_card(tag, link="info", innertext=qualified_name, with_alt_description=True)-}}
                    {% if specific_tag or '.' in qualified_name -%}
                    <button
                    class="remove_tag_button red_button button_with_confirm"
@ -182,9 +182,9 @@ h2, h3
                {% if include_synonyms %}
                {% for synonym in tag.get_synonyms()|sort %}
                <li>
-                    {{-tag_card.create_tag_card(tag, link="search_musts", innertext="(+)")}}
-                    {{tag_card.create_tag_card(tag, link="search_forbids", innertext="(x)")}}
-                    {{tag_card.create_tag_card(tag, link='info', innertext=qualified_name + '+' + synonym)-}}
+                    {{-cards.create_tag_card(tag, link="search_musts", innertext="(+)")}}
+                    {{cards.create_tag_card(tag, link="search_forbids", innertext="(x)")}}
+                    {{cards.create_tag_card(tag, link='info', innertext=qualified_name + '+' + synonym)-}}
                    <button
                    class="remove_tag_button red_button button_with_confirm"
                    data-holder-class="confirm_holder_remove_synonym"
@ -217,11 +217,11 @@ h2, h3
            <ul>
            {% for synonym in synonyms %}
            <li>
-                {{tag_card.create_tag_card(specific_tag, link="search_musts", innertext="(+)")}}
+                {{cards.create_tag_card(specific_tag, link="search_musts", innertext="(+)")}}

-                {{tag_card.create_tag_card(specific_tag, link="search_forbids", innertext="(x)")}}
+                {{cards.create_tag_card(specific_tag, link="search_forbids", innertext="(x)")}}

-                {{tag_card.create_tag_card(specific_tag, link=none, innertext=synonym)-}}
+                {{cards.create_tag_card(specific_tag, link=none, innertext=synonym)-}}
                <button
                class="remove_tag_button red_button button_with_confirm"
                data-onclick="return remove_synonym_form(event);"
--- a/frontends/etiquette_flask/templates/user.html
+++ b/frontends/etiquette_flask/templates/user.html
@ -1,11 +1,8 @@
 <!DOCTYPE html5>
 <html>
 <head>
-    {% import "album_card.html" as album_card %}
-    {% import "bookmark_card.html" as bookmark_card %}
-    {% import "photo_card.html" as photo_card %}
-    {% import "tag_card.html" as tag_card %}
    {% import "header.html" as header %}
+    {% import "cards.html" as cards %}
    <title class="dynamic_user_display_name">{{user.display_name}}</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
@ -46,7 +43,7 @@ h2, h3
        <div id="hierarchy_photos" class="panel">
            <h3><a href="/search?author={{user.username}}">Photos by <span class="dynamic_user_display_name">{{user.display_name}}</span></a></h3>
            {% for photo in photos %}
-            {{photo_card.create_photo_card(photo)}}
+            {{cards.create_photo_card(photo)}}
            {% endfor %}
        </div>
        {% endif %}
@ -56,7 +53,7 @@ h2, h3
        <div id="hierarchy_tags" class="panel">
            <h3>Tags by <span class="dynamic_user_display_name">{{user.display_name}}</span></h3>
            {% for tag in tags %}
-            {{tag_card.create_tag_card(tag, with_alt_description=True)}}
+            {{cards.create_tag_card(tag, with_alt_description=True)}}
            {% endfor %}
        </div>
        {% endif %}
@ -66,7 +63,7 @@ h2, h3
        <div id="hierarchy_albums" class="panel">
            <h3>Albums by <span class="dynamic_user_display_name">{{user.display_name}}</span></h3>
            {% for album in albums %}
-            {{album_card.create_album_card(album)}}
+            {{cards.create_album_card(album)}}
            {% endfor %}
        </div>
        {% endif %}
@ -76,7 +73,7 @@ h2, h3
        <div id="hierarchy_bookmarks" class="panel">
            <h3>Bookmarks by <span class="dynamic_user_display_name">{{user.display_name}}</span></h3>
            {% for bookmark in bookmarks %}
-            {{bookmark_card.create_bookmark_card(bookmark)}}
+            {{cards.create_bookmark_card(bookmark)}}
            {% endfor %}
        </div>
        {% endif %}