voussoir/etiquette
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity
etiquette/frontends/etiquette_flask/templates/user.html

188 lines
5.6 KiB
HTML
Raw Normal View History

Fix DOCTYPE should just be "html".
2021-06-22 20:38:08 +00:00
<!DOCTYPE html>
Move themes into one file, set by class on html element.
2023-07-23 00:28:21 +00:00
<html class="theme_{{theme}}">
checkpoint Add Bookmark class; Add user.html; Add more commit loggers; Fix warning_bag attributeerror when it was None
2017-02-05 02:30:02 +00:00
<head>
{% import "header.html" as header %}
Combine all card templates into cards.html.
2021-01-20 00:33:34 +00:00
{% import "cards.html" as cards %}
Use update_dynamic_elements for user name, clipboard count.
2021-01-08 04:18:07 +00:00
<title class="dynamic_user_display_name">{{user.display_name}}</title>
checkpoint Add Bookmark class; Add user.html; Add more commit loggers; Fix warning_bag attributeerror when it was None
2017-02-05 02:30:02 +00:00
<meta charset="UTF-8">
Add meta viewport to all pages.
2017-07-21 06:10:48 +00:00
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
Add favicon link to all HTML templates.
2022-05-28 23:21:23 +00:00
<link rel="icon" href="/favicon.png" type="image/png"/>
Move the remaining common css / js to their folders.
2018-02-24 20:51:36 +00:00
<link rel="stylesheet" href="/static/css/common.css">
Synchronize Etiquette common.css and YCDL common.css.
2020-09-03 18:50:16 +00:00
<link rel="stylesheet" href="/static/css/etiquette.css">
Add panels for user's created photos, albums, tags, bookmarks.
2021-01-09 19:27:29 +00:00
<link rel="stylesheet" href="/static/css/cards.css">
Make /logout operate on POST only.
2018-08-18 05:23:40 +00:00
<script src="/static/js/common.js"></script>
Import api.js into the rest of the pages. Now we can do anything from anywhere!
2018-09-23 23:53:49 +00:00
<script src="/static/js/api.js"></script>
Let PhotoTags have timestamps; use more js cards. Tags on photos can now have timestamps, so that if you are tagging a video or audio you can reference a specific moment with your tag. In the interface, this means the tag is clickable and seeks to that point in the media. For the user interface, I am finding I need to move away from jinja for the object cards because it is too much hassle to keep the code for jinja-based cards for static rendering and the js-based cards for dynamic rendering in sync. Rather than write the same cards in two languages I can dump the JSON into the script and render the cards on load. Which makes the static HTML worse but that's what the JSON API is for anyway.
2023-09-17 21:07:22 +00:00
<script src="/static/js/cards.js"></script>
Add UI for editing user's display name.
2021-01-02 03:46:31 +00:00
<script src="/static/js/editor.js"></script>
Move http functions to new javascript file http.js.
2022-09-30 00:34:35 +00:00
<script src="/static/js/http.js"></script>
Rename spinner.js -> spinners.js. It has been frustrating when I want to name a variable spinner.
2022-03-15 20:49:20 +00:00
<script src="/static/js/spinners.js"></script>
checkpoint Add Bookmark class; Add user.html; Add more commit loggers; Fix warning_bag attributeerror when it was None
2017-02-05 02:30:02 +00:00
<style>
#content_body
{
Add search_embed for bringing search iframes to other pages.
2021-01-02 21:49:43 +00:00
grid-row-gap: 8px;
grid-auto-rows: max-content;
checkpoint Add Bookmark class; Add user.html; Add more commit loggers; Fix warning_bag attributeerror when it was None
2017-02-05 02:30:02 +00:00
}
Let PhotoTags have timestamps; use more js cards. Tags on photos can now have timestamps, so that if you are tagging a video or audio you can reference a specific moment with your tag. In the interface, this means the tag is clickable and seeks to that point in the media. For the user interface, I am finding I need to move away from jinja for the object cards because it is too much hassle to keep the code for jinja-based cards for static rendering and the js-based cards for dynamic rendering in sync. Rather than write the same cards in two languages I can dump the JSON into the script and render the cards on load. Which makes the static HTML worse but that's what the JSON API is for anyway.
2023-09-17 21:07:22 +00:00
#hierarchy_photos:not(:has(.photo_card)),
#hierarchy_albums:not(:has(.album_card)),
#hierarchy_tags:not(:has(.tag_card)),
#hierarchy_bookmarks:not(:has(.bookmark_card))
{
display: none;
}
#tags_list .tag_card
{
margin: 4px;
}
checkpoint Add Bookmark class; Add user.html; Add more commit loggers; Fix warning_bag attributeerror when it was None
2017-02-05 02:30:02 +00:00
</style>
</head>
<body>
Move the session into requests.session for universal access.
2023-02-02 06:04:44 +00:00
{{header.make_header(session=request.session)}}
checkpoint Add Bookmark class; Add user.html; Add more commit loggers; Fix warning_bag attributeerror when it was None
2017-02-05 02:30:02 +00:00
<div id="content_body">
Add panels for user's created photos, albums, tags, bookmarks.
2021-01-09 19:27:29 +00:00
<div id="hierarchy_self" class="panel">
Replace some h2 with h1, set h:first-child, last-child margin=0.
2021-10-31 23:14:18 +00:00
<h1 id="display_name">{{user.display_name}}</h1>
Use user ids for author search instead of usernames.
2022-11-10 03:41:16 +00:00
{% if user.display_name != user.username %}
<p>Username: {{user.username}}</p>
{% endif %}
Use code tag for userid.
2022-10-28 03:54:03 +00:00
<p>ID: <a href="/userid/{{user.id}}"><code>{{user.id}}</code></a></p>
Use datetime objects instead of timestamps in object model. Trying to make better use of objects in this object oriented language.
2022-07-20 03:03:43 +00:00
<p>User since <span title="{{user.created|timestamp_to_8601}}">{{user.created|timestamp_to_naturaldate}}.</span></p>
Add search_embed for bringing search iframes to other pages.
2021-01-02 21:49:43 +00:00
</div>
Add panels for user's created photos, albums, tags, bookmarks.
2021-01-09 19:27:29 +00:00
<div id="hierarchy_photos" class="panel">
Use user ids for author search instead of usernames.
2022-11-10 03:41:16 +00:00
<h2><a href="/search?author={{user.id}}">Photos by <span class="dynamic_user_display_name">{{user.display_name}}</span></a></h2>
Let PhotoTags have timestamps; use more js cards. Tags on photos can now have timestamps, so that if you are tagging a video or audio you can reference a specific moment with your tag. In the interface, this means the tag is clickable and seeks to that point in the media. For the user interface, I am finding I need to move away from jinja for the object cards because it is too much hassle to keep the code for jinja-based cards for static rendering and the js-based cards for dynamic rendering in sync. Rather than write the same cards in two languages I can dump the JSON into the script and render the cards on load. Which makes the static HTML worse but that's what the JSON API is for anyway.
2023-09-17 21:07:22 +00:00
<div id="photos_list">
</div>
Add panels for user's created photos, albums, tags, bookmarks.
2021-01-09 19:27:29 +00:00
</div>
<div id="hierarchy_tags" class="panel">
Replace some h3 with h2.
2021-10-31 23:28:34 +00:00
<h2>Tags by <span class="dynamic_user_display_name">{{user.display_name}}</span></h2>
Let PhotoTags have timestamps; use more js cards. Tags on photos can now have timestamps, so that if you are tagging a video or audio you can reference a specific moment with your tag. In the interface, this means the tag is clickable and seeks to that point in the media. For the user interface, I am finding I need to move away from jinja for the object cards because it is too much hassle to keep the code for jinja-based cards for static rendering and the js-based cards for dynamic rendering in sync. Rather than write the same cards in two languages I can dump the JSON into the script and render the cards on load. Which makes the static HTML worse but that's what the JSON API is for anyway.
2023-09-17 21:07:22 +00:00
<div id="tags_list">
</div>
Add panels for user's created photos, albums, tags, bookmarks.
2021-01-09 19:27:29 +00:00
</div>
<div id="hierarchy_albums" class="panel">
Replace some h3 with h2.
2021-10-31 23:28:34 +00:00
<h2>Albums by <span class="dynamic_user_display_name">{{user.display_name}}</span></h2>
Let PhotoTags have timestamps; use more js cards. Tags on photos can now have timestamps, so that if you are tagging a video or audio you can reference a specific moment with your tag. In the interface, this means the tag is clickable and seeks to that point in the media. For the user interface, I am finding I need to move away from jinja for the object cards because it is too much hassle to keep the code for jinja-based cards for static rendering and the js-based cards for dynamic rendering in sync. Rather than write the same cards in two languages I can dump the JSON into the script and render the cards on load. Which makes the static HTML worse but that's what the JSON API is for anyway.
2023-09-17 21:07:22 +00:00
<div id="albums_list">
</div>
Add panels for user's created photos, albums, tags, bookmarks.
2021-01-09 19:27:29 +00:00
</div>
<div id="hierarchy_bookmarks" class="panel">
Replace some h3 with h2.
2021-10-31 23:28:34 +00:00
<h2>Bookmarks by <span class="dynamic_user_display_name">{{user.display_name}}</span></h2>
Let PhotoTags have timestamps; use more js cards. Tags on photos can now have timestamps, so that if you are tagging a video or audio you can reference a specific moment with your tag. In the interface, this means the tag is clickable and seeks to that point in the media. For the user interface, I am finding I need to move away from jinja for the object cards because it is too much hassle to keep the code for jinja-based cards for static rendering and the js-based cards for dynamic rendering in sync. Rather than write the same cards in two languages I can dump the JSON into the script and render the cards on load. Which makes the static HTML worse but that's what the JSON API is for anyway.
2023-09-17 21:07:22 +00:00
<div id="bookmarks_list">
</div>
Add UI for editing user's display name.
2021-01-02 03:46:31 +00:00
</div>
Add panels for user's created photos, albums, tags, bookmarks.
2021-01-09 19:27:29 +00:00
checkpoint Add Bookmark class; Add user.html; Add more commit loggers; Fix warning_bag attributeerror when it was None
2017-02-05 02:30:02 +00:00
</div>
</body>
<script type="text/javascript">
Let PhotoTags have timestamps; use more js cards. Tags on photos can now have timestamps, so that if you are tagging a video or audio you can reference a specific moment with your tag. In the interface, this means the tag is clickable and seeks to that point in the media. For the user interface, I am finding I need to move away from jinja for the object cards because it is too much hassle to keep the code for jinja-based cards for static rendering and the js-based cards for dynamic rendering in sync. Rather than write the same cards in two languages I can dump the JSON into the script and render the cards on load. Which makes the static HTML worse but that's what the JSON API is for anyway.
2023-09-17 21:07:22 +00:00
const PHOTOS = [
{% for photo in user.get_photos(direction='desc')|islice(0, 15) %}
{{photo.jsonify(include_albums=False)|tojson|safe}},
{% endfor %}
];
const ALBUMS = [
{% for album in user.get_albums()|islice(0, 20) %}
{{album.jsonify(include_photos=False, include_children=False, include_parents=False, count_children=True, count_photos=True)|tojson|safe}},
{% endfor %}
];
const TAGS = [
{% for tag in user.get_tags(direction='desc')|islice(0, 100) %}
{{tag.jsonify()|tojson|safe}},
{% endfor %}
];
const BOOKMARKS = [
{% for bookmark in user.get_bookmarks()|islice(0, 50) %}
{{bookmark.jsonify()|tojson|safe}},
{% endfor %}
];
function on_pageload()
{
for (const photo of PHOTOS)
{
const photo_card = cards.photos.create({photo: photo});
document.getElementById("photos_list").append(photo_card);
}
for (const album of ALBUMS)
{
const album_card = cards.albums.create({album: album});
document.getElementById("albums_list").append(album_card);
}
for (const tag of TAGS)
{
const tag_card = cards.tags.create({tag: tag});
document.getElementById("tags_list").append(tag_card);
}
for (const bookmark of BOOKMARKS)
{
const bookmark_card = cards.bookmarks.create({
bookmark: bookmark,
add_author: false,
add_delete_button: false,
add_url_element: false,
});
document.getElementById("bookmarks_list").append(bookmark_card);
}
}
document.addEventListener("DOMContentLoaded", on_pageload);
Move the session into requests.session for universal access.
2023-02-02 06:04:44 +00:00
{% if user.id == request.session.user.id %}
Add UI for editing user's display name.
2021-01-02 03:46:31 +00:00
const USERNAME = "{{user.username}}";
profile_ed_on_open = undefined;
function profile_ed_on_save(ed)
{
function callback(response)
{
ed.hide_spinner();
if (! response.meta.json_ok)
{
alert(JSON.stringify(response));
return;
}
if ("error_type" in response.data)
{
Add Unauthorized exception. This should start to see more use as I continue to build up the user profile features.
2021-01-09 23:42:51 +00:00
ed.show_error(`${response.data.error_type} ${response.data.error_message}`);
Add UI for editing user's display name.
2021-01-02 03:46:31 +00:00
return;
}
// The data that comes back from the server will have been normalized.
const new_display_name = response.data.display_name;
Use update_dynamic_elements for user name, clipboard count.
2021-01-08 04:18:07 +00:00
common.update_dynamic_elements("dynamic_user_display_name", new_display_name);
Add UI for editing user's display name.
2021-01-02 03:46:31 +00:00
ed.elements["display_name"].edit.value = new_display_name;
ed.save();
}
ed.show_spinner();
api.users.edit(USERNAME, ed.elements["display_name"].edit.value, callback);
}
Let PhotoTags have timestamps; use more js cards. Tags on photos can now have timestamps, so that if you are tagging a video or audio you can reference a specific moment with your tag. In the interface, this means the tag is clickable and seeks to that point in the media. For the user interface, I am finding I need to move away from jinja for the object cards because it is too much hassle to keep the code for jinja-based cards for static rendering and the js-based cards for dynamic rendering in sync. Rather than write the same cards in two languages I can dump the JSON into the script and render the cards on load. Which makes the static HTML worse but that's what the JSON API is for anyway.
2023-09-17 21:07:22 +00:00
const profile_ed_on_cancel = undefined;
Add UI for editing user's display name.
2021-01-02 03:46:31 +00:00
const profile_ed_elements = [
{
"id": "display_name",
"element": document.getElementById("display_name"),
"placeholder": "Display name",
"empty_text": USERNAME,
"autofocus": true,
},
];
const profile_ed = new editor.Editor(
profile_ed_elements,
profile_ed_on_open,
profile_ed_on_save,
profile_ed_on_cancel,
);
{% endif %}
checkpoint Add Bookmark class; Add user.html; Add more commit loggers; Fix warning_bag attributeerror when it was None
2017-02-05 02:30:02 +00:00
</script>
</html>
Reference in a new issue Copy permalink