Tweak design/CSS
Thomas Sileo
parent
8833b5b371
commit
beca3db5d1
|
|
@ -64,7 +64,7 @@ _RESIZED_CACHE: MutableMapping[tuple[str, int], tuple[bytes, str, Any]] = LFUCac
|
|||
# TODO(ts):
|
||||
#
|
||||
# Next:
|
||||
# - [ ] show [reply to @truc] next to visiblity
|
||||
# - FT5 text search
|
||||
# - support update post with history
|
||||
#
|
||||
# - [ ] block support
|
||||
|
|
|
|||
|
|
@ -1,5 +1,6 @@
|
|||
$font-stack: Helvetica, sans-serif;
|
||||
$background: #002B36; // solarized background color
|
||||
$light-background: #003d4d; //#e6e6e6;
|
||||
// font-family: Inconsolata, monospace;
|
||||
$text-color: #ccc;
|
||||
$primary-color: #e14eea;
|
||||
|
|
@ -11,7 +12,12 @@ $muted-color: #586e75; // solarized comment text
|
|||
// #93a1a1; solarized body text
|
||||
|
||||
// Load custom theme
|
||||
@import "vars.scss";
|
||||
// @import "vars.scss";
|
||||
|
||||
|
||||
.light-background {
|
||||
background: $light-background;
|
||||
}
|
||||
|
||||
|
||||
body {
|
||||
|
|
@ -35,6 +41,9 @@ strong {
|
|||
color: $primary-color;
|
||||
}
|
||||
}
|
||||
.box {
|
||||
padding: 0 20px;
|
||||
}
|
||||
|
||||
.codehilite {
|
||||
margin: 50px 0;
|
||||
|
|
@ -71,6 +80,7 @@ code, pre {
|
|||
}
|
||||
}
|
||||
header {
|
||||
padding: 0 20px;
|
||||
.title {
|
||||
font-size: 1.3em;
|
||||
text-decoration: none;
|
||||
|
|
@ -94,7 +104,7 @@ a {
|
|||
}
|
||||
main {
|
||||
width: 100%;
|
||||
max-width: 960px;
|
||||
max-width: 1000px;
|
||||
margin: 30px auto;
|
||||
}
|
||||
footer {
|
||||
|
|
@ -106,7 +116,7 @@ footer {
|
|||
.actor-box {
|
||||
display: flex;
|
||||
column-gap: 20px;
|
||||
margin:20px 0 10px 0;
|
||||
margin:10px 0;
|
||||
.icon-box {
|
||||
flex: 0 0 50px;
|
||||
}
|
||||
|
|
@ -116,7 +126,6 @@ footer {
|
|||
color: $muted-color;
|
||||
}
|
||||
.actor-icon {
|
||||
margin-top: 5px;
|
||||
max-width: 50px;
|
||||
}
|
||||
}
|
||||
|
|
@ -174,17 +183,41 @@ nav.flexbox {
|
|||
}
|
||||
}
|
||||
|
||||
.activity-expanded {
|
||||
.ap-object {
|
||||
margin: 15px 0;
|
||||
padding: 20px;
|
||||
.in-reply-to {
|
||||
color: $muted-color;
|
||||
&:hover {
|
||||
color: $secondary-color;
|
||||
}
|
||||
}
|
||||
nav {
|
||||
color: $muted-color;
|
||||
}
|
||||
nav a {
|
||||
color: $muted-color;
|
||||
&:hover {
|
||||
color: $secondary-color;
|
||||
}
|
||||
}
|
||||
nav a.p {
|
||||
color: $text-color;
|
||||
&:hover {
|
||||
color: $secondary-color;
|
||||
}
|
||||
}
|
||||
.activity-attachment {
|
||||
img, audio, video {
|
||||
img, audio, video {
|
||||
width: 100%;
|
||||
max-width: 740px;
|
||||
margin: 30px 0;
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
.ap-object-expanded {
|
||||
border: 2px dashed $secondary-color;
|
||||
}
|
||||
|
||||
.activity-wrap {
|
||||
margin: 0 auto;
|
||||
|
|
@ -244,7 +277,8 @@ img, audio, video {
|
|||
}
|
||||
.actor-action {
|
||||
margin-top:20px;
|
||||
margin-bottom:-10px;
|
||||
margin-bottom:-20px;
|
||||
padding: 0 20px;
|
||||
span {
|
||||
color: $muted-color;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -3,10 +3,11 @@
|
|||
{% block content %}
|
||||
|
||||
{% if in_reply_to_object %}
|
||||
<p>In reply to:</p>
|
||||
<div class="actor-action">In reply to:</div>
|
||||
{{ utils.display_object(in_reply_to_object) }}
|
||||
{% endif %}
|
||||
|
||||
<div class="box">
|
||||
<form class="form" action="{{ request.url_for("admin_actions_new") }}" enctype="multipart/form-data" method="POST">
|
||||
{{ utils.embed_csrf_token() }}
|
||||
{{ utils.embed_redirect_url() }}
|
||||
|
|
@ -39,6 +40,7 @@
|
|||
<input type="submit" value="Publish">
|
||||
</p>
|
||||
</form>
|
||||
</div>
|
||||
<script>
|
||||
// The new post textarea
|
||||
var ta = document.getElementsByTagName("textarea")[0];
|
||||
|
|
|
|||
|
|
@ -22,7 +22,7 @@
|
|||
{% set url_for = request.app.router.url_path_for(url) %}
|
||||
<a href="{{ url_for }}" {% if request.url.path == url_for %}class="active"{% endif %}>{{ text }}</a>
|
||||
{% endmacro %}
|
||||
<div style="margin-bottom:30px;">
|
||||
<div style="margin-bottom:30px;padding: 0 20px;">
|
||||
<nav class="flexbox">
|
||||
<ul>
|
||||
<li>Admin</li>
|
||||
|
|
|
|||
|
|
@ -2,12 +2,15 @@
|
|||
{% extends "layout.html" %}
|
||||
{% block content %}
|
||||
|
||||
<div class="box">
|
||||
<p>Interact with an ActivityPub object via its URL or look for a user using <i>@user@domain.tld</i></p>
|
||||
|
||||
<form class="form" action="{{ url_for("get_lookup") }}" method="GET">
|
||||
<input type="text" name="query" value="{{ query if query else "" }}" autofocus>
|
||||
<input type="submit" value="Lookup">
|
||||
</form>
|
||||
</div>
|
||||
|
||||
{% if ap_object and ap_object.ap_type == "Person" %}
|
||||
{{ utils.display_actor(ap_object, actors_metadata) }}
|
||||
{% elif ap_object %}
|
||||
|
|
|
|||
|
|
@ -1,48 +1,52 @@
|
|||
{%- import "utils.html" as utils with context -%}
|
||||
{% extends "layout.html" %}
|
||||
{% block content %}
|
||||
<div class="box">
|
||||
<h2>Notifications</h2>
|
||||
</div>
|
||||
<div id="notifications">
|
||||
{%- for notif in notifications %}
|
||||
<div>
|
||||
{%- if notif.notification_type.value == "new_follower" %}
|
||||
<div title="{{ notif.created_at.isoformat() }}">
|
||||
<div class="actor-action" title="{{ notif.created_at.isoformat() }}">
|
||||
<a style="font-weight:bold;" href="{{ notif.actor.url }}">{{ notif.actor.display_name }}</a> followed you
|
||||
</div>
|
||||
{{ utils.display_actor(notif.actor, actors_metadata) }}
|
||||
{% elif notif.notification_type.value == "unfollow" %}
|
||||
<div title="{{ notif.created_at.isoformat() }}">
|
||||
<div class="actor-action" title="{{ notif.created_at.isoformat() }}">
|
||||
<a style="font-weight:bold;" href="{{ notif.actor.url }}">{{ notif.actor.display_name }}</a> unfollowed you
|
||||
</div>
|
||||
{{ utils.display_actor(notif.actor, actors_metadata) }}
|
||||
{% elif notif.notification_type.value == "like" %}
|
||||
<div title="{{ notif.created_at.isoformat() }}">
|
||||
<di vclass="actor-action" title="{{ notif.created_at.isoformat() }}">
|
||||
<a style="font-weight:bold;" href="{{ notif.actor.url }}">{{ notif.actor.display_name }}</a> liked a post
|
||||
</div>
|
||||
{{ utils.display_object(notif.outbox_object) }}
|
||||
{% elif notif.notification_type.value == "undo_like" %}
|
||||
<div title="{{ notif.created_at.isoformat() }}">
|
||||
<div class="actor-action" title="{{ notif.created_at.isoformat() }}">
|
||||
<a style="font-weight:bold;" href="{{ notif.actor.url }}">{{ notif.actor.display_name }}</a> un-liked a post
|
||||
</div>
|
||||
{{ utils.display_object(notif.outbox_object) }}
|
||||
{% elif notif.notification_type.value == "announce" %}
|
||||
<div title="{{ notif.created_at.isoformat() }}">
|
||||
<div class="actor-action" title="{{ notif.created_at.isoformat() }}">
|
||||
<a style="font-weight:bold;" href="{{ notif.actor.url }}">{{ notif.actor.display_name }}</a> boosted a post
|
||||
</div>
|
||||
{{ utils.display_object(notif.outbox_object) }}
|
||||
{% elif notif.notification_type.value == "undo_announce" %}
|
||||
<div title="{{ notif.created_at.isoformat() }}">
|
||||
<div class="actor-action" title="{{ notif.created_at.isoformat() }}">
|
||||
<a style="font-weight:bold;" href="{{ notif.actor.url }}">{{ notif.actor.display_name }}</a> un-boosted a post
|
||||
</div>
|
||||
{{ utils.display_object(notif.outbox_object) }}
|
||||
{% elif notif.notification_type.value == "mention" %}
|
||||
<div title="{{ notif.created_at.isoformat() }}">
|
||||
<div class="actor-action" title="{{ notif.created_at.isoformat() }}">
|
||||
<a style="font-weight:bold;" href="{{ notif.actor.url }}">{{ notif.actor.display_name }}</a> mentioned you
|
||||
</div>
|
||||
{{ utils.display_object(notif.inbox_object) }}
|
||||
|
||||
{% else %}
|
||||
<div class="actor-action">
|
||||
Implement {{ notif.notification_type }}
|
||||
</div>
|
||||
{%- endif %}
|
||||
</div>
|
||||
{%- endfor %}
|
||||
|
|
|
|||
|
|
@ -21,7 +21,7 @@
|
|||
{% macro display_replies_tree(replies_tree_node) %}
|
||||
|
||||
{% if replies_tree_node.is_requested %}
|
||||
{{ utils.display_object_expanded(replies_tree_node.ap_object, likes=likes, shares=shares) }}
|
||||
{{ utils.display_object(replies_tree_node.ap_object, likes=likes, shares=shares, expanded=True) }}
|
||||
{% else %}
|
||||
{{ utils.display_object(replies_tree_node.ap_object) }}
|
||||
{% endif %}
|
||||
|
|
|
|||
|
|
@ -130,7 +130,7 @@
|
|||
{% endmacro %}
|
||||
|
||||
{% macro display_box_filters(route) %}
|
||||
<nav class="flexbox">
|
||||
<nav class="flexbox box">
|
||||
<ul>
|
||||
<li>Filter by</li>
|
||||
{% for ap_type in ["Note", "Like", "Announce", "Follow"] %}
|
||||
|
|
@ -144,11 +144,17 @@
|
|||
<a href="{{ url_for(route) }}">Reset filter</a>
|
||||
</li>
|
||||
{% endif %}
|
||||
</ul>
|
||||
</nav>
|
||||
{% endmacro %}
|
||||
|
||||
{% macro display_actor(actor, actors_metadata) %}
|
||||
{% macro display_actor(actor, actors_metadata={}, embedded=False) %}
|
||||
{% set metadata = actors_metadata.get(actor.ap_id) %}
|
||||
|
||||
{% if not embedded %}
|
||||
<div class="ap-object">
|
||||
{% endif %}
|
||||
|
||||
<div class="actor-box h-card p-author">
|
||||
<div class="icon-box">
|
||||
<img src="{{ actor.resized_icon_url }}" class="actor-icon">
|
||||
|
|
@ -176,13 +182,17 @@
|
|||
{% if not metadata.is_following %}
|
||||
<li>{{ admin_profile_button(actor.ap_id) }}</li>
|
||||
{% endif %}
|
||||
{% endif %}
|
||||
</li>
|
||||
{% endif %}
|
||||
</ul>
|
||||
</nav>
|
||||
</div>
|
||||
{% endif %}
|
||||
|
||||
{% if not embedded %}
|
||||
</div>
|
||||
{% endif %}
|
||||
|
||||
{% endmacro %}
|
||||
|
||||
{% macro display_og_meta(object) %}
|
||||
|
|
@ -191,7 +201,7 @@
|
|||
<div class="activity-og-meta" style="display:flex;column-gap: 20px;margin:20px 0;">
|
||||
{% if og_meta.image %}
|
||||
<div>
|
||||
<img src="{{ og_meta.image | media_proxy_url }}" style="max-width:200px;">
|
||||
<img src="{{ og_meta.image | media_proxy_url }}" style="max-width:200px;max-height:100px;">
|
||||
</div>
|
||||
<div>
|
||||
<a href="{{ og_meta.url }}">{{ og_meta.title }}</a>
|
||||
|
|
@ -277,13 +287,11 @@
|
|||
{% if likes %}
|
||||
<div style="flex: 0 1 50%;max-width: 50%;">Likes
|
||||
<div style="display: flex;column-gap: 20px;row-gap:20px;flex-wrap: wrap;margin-top:20px;">
|
||||
{% for like in likes %}
|
||||
<a href="{% if is_admin %}{{ url_for("admin_profile") }}?actor_id={{ like.actor.ap_id }}{% else %}{{ like.actor.url }}{% endif %}" title="{{ like.actor.handle }}" style="height:50px;" rel="noreferrer">
|
||||
{% for like in likes %}
|
||||
<a href="{% if is_admin %}{{ url_for("admin_profile") }}?actor_id={{ like.actor.ap_id }}{% else %}{{ like.actor.url }}{% endif %}" title="{{ like.actor.handle }}" style="height:50px;" rel="noreferrer">
|
||||
<img src="{{ like.actor.resized_icon_url }}" alt="{{ like.actor.handle}}" style="max-width:50px;">
|
||||
</a>
|
||||
{% endfor %}
|
||||
|
||||
|
||||
{% endfor %}
|
||||
</div>
|
||||
</div>
|
||||
{% endif %}
|
||||
|
|
@ -291,21 +299,183 @@
|
|||
{% if shares %}
|
||||
<div style="flex: 0 1 50%;max-width: 50%;">Shares
|
||||
<div style="display: flex;column-gap: 20px;row-gap:20px;flex-wrap: wrap;margin-top:20px;">
|
||||
{% for share in shares %}
|
||||
<a href="{% if is_admin %}{{ url_for("admin_profile") }}?actor_id={{ share.actor.ap_id }}{% else %}{{ share.actor.url }}{% endif %}" title="{{ share.actor.handle }}" style="height:50px;" rel="noreferrer">
|
||||
{% for share in shares %}
|
||||
<a href="{% if is_admin %}{{ url_for("admin_profile") }}?actor_id={{ share.actor.ap_id }}{% else %}{{ share.actor.url }}{% endif %}" title="{{ share.actor.handle }}" style="height:50px;" rel="noreferrer">
|
||||
<img src="{{ share.actor.resized_icon_url }}" alt="{{ share.actor.handle}}" style="max-width:50px;">
|
||||
</a>
|
||||
{% endfor %}
|
||||
{% endfor %}
|
||||
</div>
|
||||
</div>
|
||||
{% endif %}
|
||||
</div>
|
||||
{% endif %}
|
||||
|
||||
</div>
|
||||
|
||||
{% endmacro %}
|
||||
|
||||
{% macro display_object(object) %}
|
||||
|
||||
{% macro display_object(object, likes=[], shares=[], expanded=False) %}
|
||||
{% if object.ap_type in ["Note", "Article", "Video"] %}
|
||||
<div class="ap-object {% if expanded %}ap-object-expanded {% endif %}h-entry" id="{{ object.permalink_id }}">
|
||||
{{ display_actor(object.actor, {}, embedded=True) }}
|
||||
|
||||
{% if object.in_reply_to %}
|
||||
<a href="{% if is_admin %}{{ url_for("get_lookup") }}?query={% endif %}{{ object.in_reply_to }}" title="{{ object.in_reply_to }}" class="in-reply-to" rel="nofollow">
|
||||
in reply to {{ object.in_reply_to|truncate(64, True) }}
|
||||
</a>
|
||||
{% endif %}
|
||||
|
||||
|
||||
{% if object.summary %}
|
||||
<p class="p-summary">{{ object.summary | clean_html(object) | safe }}</p>
|
||||
{% endif %}
|
||||
|
||||
{% if object.sensitive and object.summary and not request.query_params.show_more == object.permalink_id %}
|
||||
{{ show_more_button(object.permalink_id) }}
|
||||
{% endif %}
|
||||
|
||||
{% if not object.sensitive or (object.sensitive and object.summary and request.query_params.show_more == object.permalink_id) %}
|
||||
<div class="e-content">
|
||||
{{ object.content | clean_html(object) | safe }}
|
||||
</div>
|
||||
{% endif %}
|
||||
|
||||
{{ display_og_meta(object) }}
|
||||
|
||||
<div class="activity-attachment">
|
||||
{{ display_attachments(object) }}
|
||||
</div>
|
||||
|
||||
<nav class="flexbox activity-bar">
|
||||
<ul>
|
||||
<li>
|
||||
<a href="{{ object.url }}" class="u-url u-uid" title="{{ object.ap_published_at.isoformat() }}">
|
||||
<time class="dt-published" datetime="{{ object.ap_published_at }}">{{ object.ap_published_at | timeago }}</time>
|
||||
</a>
|
||||
</li>
|
||||
{% if is_admin %}
|
||||
<li>
|
||||
{{ object.visibility.value }}
|
||||
</li>
|
||||
{% endif %}
|
||||
<li>
|
||||
<div><a href="{{ object.url }}"{% if object.is_from_inbox %} rel="nofollow"{% endif %}>permalink</a></div>
|
||||
</li>
|
||||
|
||||
{% if object.is_from_outbox %}
|
||||
{% if object.likes_count %}
|
||||
<li>
|
||||
<a href="{{ object.url }}"><strong>{{ object.likes_count }}</strong> like{{ object.likes_count | pluralize }}</a>
|
||||
</li>
|
||||
{% endif %}
|
||||
|
||||
{% if object.announces_count %}
|
||||
<li>
|
||||
<a href="{{ object.url }}"><strong>{{ object.announces_count }}</strong> share{{ object.announces_count | pluralize }}</a>
|
||||
</li>
|
||||
{% endif %}
|
||||
{% endif %}
|
||||
|
||||
{% if (object.is_from_outbox or is_admin) and object.replies_count %}
|
||||
<li>
|
||||
<a href="{{ object.url }}"><strong>{{ object.replies_count }}</strong> repl{{ object.replies_count | pluralize("y", "ies") }}</a>
|
||||
</li>
|
||||
{% endif %}
|
||||
|
||||
</ul>
|
||||
</nav>
|
||||
|
||||
{% if is_admin %}
|
||||
<nav class="flexbox activity-bar">
|
||||
<ul>
|
||||
{% if object.is_from_outbox %}
|
||||
<li>
|
||||
{{ admin_delete_button(object.ap_id) }}
|
||||
</li>
|
||||
|
||||
<li>
|
||||
{% if object.is_pinned %}
|
||||
{{ admin_unpin_button(object.ap_id) }}
|
||||
{% else %}
|
||||
{{ admin_pin_button(object.ap_id) }}
|
||||
{% endif %}
|
||||
</li>
|
||||
{% endif %}
|
||||
|
||||
<li>
|
||||
{{ admin_reply_button(object.ap_id) }}
|
||||
</li>
|
||||
|
||||
<li>
|
||||
{% if object.liked_via_outbox_object_ap_id %}
|
||||
{{ admin_undo_button(object.liked_via_outbox_object_ap_id, "unlike") }}
|
||||
{% else %}
|
||||
{{ admin_like_button(object.ap_id) }}
|
||||
{% endif %}
|
||||
</li>
|
||||
|
||||
<li>
|
||||
{% if object.is_bookmarked %}
|
||||
{{ admin_unbookmark_button(object.ap_id) }}
|
||||
{% else %}
|
||||
{{ admin_bookmark_button(object.ap_id) }}
|
||||
{% endif %}
|
||||
</li>
|
||||
|
||||
<li>
|
||||
{% if object.announced_via_outbox_object_ap_id %}
|
||||
{{ admin_undo_button(object.liked_via_outbox_object_ap_id, "unshare") }}
|
||||
{% else %}
|
||||
{{ admin_announce_button(object.ap_id, disabled=object.visibility not in [visibility_enum.PUBLIC, visibility_enum.UNLISTED]) }}
|
||||
{% endif %}
|
||||
</li>
|
||||
|
||||
<li>
|
||||
{{ admin_profile_button(object.actor.ap_id) }}
|
||||
</li>
|
||||
<li>
|
||||
{{ admin_expand_button(object.ap_id) }}
|
||||
</li>
|
||||
</ul>
|
||||
</nav>
|
||||
{% endif %}
|
||||
|
||||
|
||||
{% if likes or shares %}
|
||||
<div style="display: flex;column-gap: 20px;margin:20px 0;">
|
||||
{% if likes %}
|
||||
<div style="flex: 0 1 50%;max-width: 50%;">Likes
|
||||
<div style="display: flex;column-gap: 20px;row-gap:20px;flex-wrap: wrap;margin-top:20px;">
|
||||
{% for like in likes %}
|
||||
<a href="{% if is_admin %}{{ url_for("admin_profile") }}?actor_id={{ like.actor.ap_id }}{% else %}{{ like.actor.url }}{% endif %}" title="{{ like.actor.handle }}" style="height:50px;" rel="noreferrer">
|
||||
<img src="{{ like.actor.resized_icon_url }}" alt="{{ like.actor.handle}}" style="max-width:50px;">
|
||||
</a>
|
||||
{% endfor %}
|
||||
</div>
|
||||
</div>
|
||||
{% endif %}
|
||||
|
||||
{% if shares %}
|
||||
<div style="flex: 0 1 50%;max-width: 50%;">Shares
|
||||
<div style="display: flex;column-gap: 20px;row-gap:20px;flex-wrap: wrap;margin-top:20px;">
|
||||
{% for share in shares %}
|
||||
<a href="{% if is_admin %}{{ url_for("admin_profile") }}?actor_id={{ share.actor.ap_id }}{% else %}{{ share.actor.url }}{% endif %}" title="{{ share.actor.handle }}" style="height:50px;" rel="noreferrer">
|
||||
<img src="{{ share.actor.resized_icon_url }}" alt="{{ share.actor.handle}}" style="max-width:50px;">
|
||||
</a>
|
||||
{% endfor %}
|
||||
</div>
|
||||
</div>
|
||||
{% endif %}
|
||||
</div>
|
||||
{% endif %}
|
||||
|
||||
|
||||
</div>
|
||||
{% endif %}
|
||||
{% endmacro %}
|
||||
|
||||
{% macro display_object_bak(object) %}
|
||||
{% if object.ap_type in ["Note", "Article", "Video"] %}
|
||||
<div class="activity-wrap h-entry" id="{{ object.permalink_id }}">
|
||||
<div class="activity-content">
|
||||
|
|
|
|||
Loading…
Reference in New Issue