From dab8dd59a7e038adb2b3e378d1a2c614ac75bb52 Mon Sep 17 00:00:00 2001 From: Tyler Kennedy Date: Mon, 26 Dec 2022 12:14:23 -0500 Subject: [PATCH] Fallback avatars in about 500 bytes. (#269) Also create a new re-usable identity banner template. Fix super long handles (closes #270) --- static/css/style.css | 69 +++++++++++++++++------- static/js/minidenticons.min.js | 8 +++ templates/activities/_identity.html | 4 +- templates/activities/_post.html | 49 ++++++++--------- templates/activities/follows.html | 44 +++++++-------- templates/admin/hashtags.html | 32 ++++++----- templates/admin/identities.html | 12 ++--- templates/base.html | 1 + templates/identity/_identity_banner.html | 33 ++++++++++++ 9 files changed, 159 insertions(+), 93 deletions(-) create mode 100644 static/js/minidenticons.min.js create mode 100644 templates/identity/_identity_banner.html diff --git a/static/css/style.css b/static/css/style.css index 23379b3..0e67443 100644 --- a/static/css/style.css +++ b/static/css/style.css @@ -438,7 +438,7 @@ p.authorization-code { .icon-menu .option { display: block; - margin: 0px 0 20px 0; + margin: 0 0 20px 0; background: var(--color-bg-box); box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.1); color: inherit; @@ -457,6 +457,10 @@ p.authorization-code { color: var(--color-text-dull); } +.icon-menu .option-actions { + text-align: right; +} + .icon-menu .option.empty:hover, .icon-menu .option.static:hover { border: 2px solid rgba(255, 255, 255, 0); @@ -482,8 +486,20 @@ p.authorization-code { font-size: 200%; } -.icon-menu .option .handle { - margin-right: 20px; +.icon-menu .option.hashtags { + display: flex; + align-items: center; +} + +.icon-menu .option.hashtags .tag { + min-width: 0; + text-overflow: ellipsis; + overflow: hidden; + flex-grow: 1; +} + +.icon-menu .option.hashtags .count { + text-align: right; } .icon-menu .option .pill { @@ -500,16 +516,10 @@ p.authorization-code { } .icon-menu .option time { - float: right; color: var(--color-text-duller); margin: 14px 0 0 0; } -.icon-menu .option .right { - display: inline-block; - float: right; -} - .icon-menu .option button { margin-top: 8px; margin-right: 20px; @@ -1015,6 +1025,34 @@ table.metadata td .emoji { min-width: 16px; } +/* Identity banner */ + +.identity-banner { + display: flex; + align-items: center; + flex-grow: 1; + min-width: 0; +} + +.identity-banner .handle { + display: block; + padding: 0 10px; + vertical-align: middle; + min-width: 0; +} + +.identity-banner .handle .link, +.identity-banner .handle .small { + text-overflow: ellipsis; + overflow: hidden; + white-space: nowrap; + display: block; +} + +.identity-banner .avatar-link { + line-height: 0; /* Fixes a bit of extra padding on the bottom of the link. */ +} + /* Posts */ .post { @@ -1043,31 +1081,24 @@ form .post { .post .icon { height: 48px; width: auto; - float: left; } .post.mini .icon { height: 28px; width: auto; - float: left; } .post .emoji { height: 18px; } -.post .handle { - display: block; - padding: 7px 0 0 64px; -} - -.post.mini .handle { - padding: 7px 0 0 36px; +.post .post-banner { + display: flex; + align-items: center; } .post time { display: block; - float: right; color: var(--color-text-duller); width: 65px; text-align: center; diff --git a/static/js/minidenticons.min.js b/static/js/minidenticons.min.js new file mode 100644 index 0000000..fd8e4ca --- /dev/null +++ b/static/js/minidenticons.min.js @@ -0,0 +1,8 @@ +function identicon(t,e=50,i=50){const n=t.split("").reduce(((t,e)=>16777619*((t^e.charCodeAt(0))>>>0)),2166136261);const s=n/16777619%18*20;return[...Array(t?25:0)].reduce(((t,e,i)=>n%(16-i%15)<4?t+``:t),``)+""} +function generate_avatar(handle) { + element.src = URL.createObjectURL( + new Blob([identicon(handle)], { + type: 'image/svg+xml;charset=utf8' + } + )); +} diff --git a/templates/activities/_identity.html b/templates/activities/_identity.html index 378140d..027c562 100644 --- a/templates/activities/_identity.html +++ b/templates/activities/_identity.html @@ -1,9 +1,7 @@ {% load activity_tags %}
- - Avatar for {{ identity.name_or_handle }} - + {% include "identity/_identity_banner.html" with identity=identity %} {% if created %}