diff options
-rw-r--r-- | renderer/renderer.go | 4 | ||||
-rw-r--r-- | static/main.css | 30 | ||||
-rw-r--r-- | templates/notification.tmpl | 24 | ||||
-rw-r--r-- | templates/postform.tmpl | 2 | ||||
-rw-r--r-- | templates/status.tmpl | 17 | ||||
-rw-r--r-- | templates/user.tmpl | 7 |
6 files changed, 61 insertions, 23 deletions
diff --git a/renderer/renderer.go b/renderer/renderer.go index cabf92d..8009d99 100644 --- a/renderer/renderer.go +++ b/renderer/renderer.go @@ -79,7 +79,7 @@ func (r *renderer) RenderAboutPage(ctx context.Context, writer io.Writer, data * func EmojiFilter(content string, emojis []mastodon.Emoji) string { var replacements []string for _, e := range emojis { - replacements = append(replacements, ":"+e.ShortCode+":", "<img class=\"status-emoji\" src=\""+e.URL+"\" alt=\""+e.ShortCode+"\" />") + replacements = append(replacements, ":"+e.ShortCode+":", "<img class=\"status-emoji\" src=\""+e.URL+"\" alt=\""+e.ShortCode+"\" title=\""+e.ShortCode+"\" />") } return strings.NewReplacer(replacements...).Replace(content) } @@ -90,7 +90,7 @@ func StatusContentFilter(spoiler string, content string, emojis []mastodon.Emoji } var replacements []string for _, e := range emojis { - replacements = append(replacements, ":"+e.ShortCode+":", "<img class=\"status-emoji\" src=\""+e.URL+"\" alt=\""+e.ShortCode+"\" />") + replacements = append(replacements, ":"+e.ShortCode+":", "<img class=\"status-emoji\" src=\""+e.URL+"\" alt=\""+e.ShortCode+"\" title=\""+e.ShortCode+"\" />") } for _, m := range mentions { replacements = append(replacements, "\""+m.URL+"\"", "\"/user/"+m.ID+"\"") diff --git a/static/main.css b/static/main.css index e37cef4..89bb9cd 100644 --- a/static/main.css +++ b/static/main.css @@ -21,11 +21,15 @@ margin: 0px; } +.status-profile-img-container { + margin-right: 8px; +} + .status-profile-img { height: 48px; width: 48px; - margin-right: 8px; object-fit: contain; + vertical-align: top; } .status { @@ -111,6 +115,10 @@ margin: 8px 0; } +.post-form>div { + margin-bottom: 4px; +} + .signin-form { margin: 8px 0; } @@ -127,7 +135,7 @@ height: 24px; width: 24px; margin-bottom: -8px; - margin-right: 0px; + vertical-align: baseline; } .retweet-info .status-dname{ @@ -248,7 +256,7 @@ } .status-visibility { - margin: 0 4px; + margin-left: 4px; display: inline-block; color: #444444; } @@ -257,3 +265,19 @@ font-size: 9pt; vertical-align: bottom; } + +.remote-link { + margin-left: 4px; + display: inline-block; + color: #444444; + text-decoration: none; +} + +.remote-link span { + font-size: 9pt; + vertical-align: bottom; +} + +.img-link { + display: inline-block; +} diff --git a/templates/notification.tmpl b/templates/notification.tmpl index 271597b..e46ce8a 100644 --- a/templates/notification.tmpl +++ b/templates/notification.tmpl @@ -6,9 +6,11 @@ <div class="notification-container {{if .Pleroma}}{{if not .Pleroma.IsSeen}}unread{{end}}{{end}}"> {{if eq .Type "follow"}} <div class="notification-follow-container"> - <a href="/user/{{.Account.ID}}" > - <img class="status-profile-img" src="{{.Account.AvatarStatic}}" alt="profile-avatar" /> - </a> + <div class="status-profile-img-container"> + <a class="img-link" href="/user/{{.Account.ID}}" > + <img class="status-profile-img" src="{{.Account.AvatarStatic}}" alt="profile-avatar" /> + </a> + </div> <div> <div> <span class="status-dname"> {{EmojiFilter .Account.DisplayName .Account.Emojis}} </span> @@ -26,9 +28,11 @@ {{else if eq .Type "reblog"}} <div class="notification-retweet-container"> - <a href="/user/{{.Account.ID}}" > - <img class="status-profile-img" src="{{.Account.AvatarStatic}}" alt="profile-avatar" /> - </a> + <div class="status-profile-img-container"> + <a class="img-link" href="/user/{{.Account.ID}}" > + <img class="status-profile-img" src="{{.Account.AvatarStatic}}" alt="profile-avatar" /> + </a> + </div> <div> <div> <span class="status-dname"> {{EmojiFilter .Account.DisplayName .Account.Emojis}} </span> @@ -41,9 +45,11 @@ {{else if eq .Type "favourite"}} <div class="notification-like-container"> - <a href="/user/{{.Account.ID}}" > - <img class="status-profile-img" src="{{.Account.AvatarStatic}}" alt="profile-avatar" /> - </a> + <div class="status-profile-img-container"> + <a class="img-link" href="/user/{{.Account.ID}}" > + <img class="status-profile-img" src="{{.Account.AvatarStatic}}" alt="profile-avatar" /> + </a> + </div> <div> <div> <span class="status-dname"> {{EmojiFilter .Account.DisplayName .Account.Emojis}} </span> diff --git a/templates/postform.tmpl b/templates/postform.tmpl index 137232f..309e139 100644 --- a/templates/postform.tmpl +++ b/templates/postform.tmpl @@ -10,7 +10,7 @@ </div> <div> <label for ="post-visilibity"> Visibility </label> - <select id="post-visilibity" type="file" name="visibility"> + <select id="post-visilibity" name="visibility"> <option value="public" {{if eq .DefaultVisibility "public"}}selected{{end}}>Public</option> <option value="unlisted" {{if eq .DefaultVisibility "unlisted"}}selected{{end}}>Unlisted</option> <option value="private" {{if eq .DefaultVisibility "private"}}selected{{end}}>Private</option> diff --git a/templates/status.tmpl b/templates/status.tmpl index a89fc78..7ec7d29 100644 --- a/templates/status.tmpl +++ b/templates/status.tmpl @@ -1,7 +1,7 @@ <div id="status-{{if .Reblog}}{{.Reblog.ID}}{{else}}{{.ID}}{{end}}" class="status-container-container"> {{if .Reblog}} <div class="retweet-info"> - <a href="/user/{{.Account.ID}}" > + <a class="img-link" href="/user/{{.Account.ID}}"> <img class="status-profile-img" src="{{.Account.AvatarStatic}}" alt="profile-avatar" /> </a> <span class="status-dname"> {{EmojiFilter .Account.DisplayName .Account.Emojis}} </span> @@ -12,13 +12,13 @@ {{else}} {{block "status" .}} <div class="status-container"> - <div> - {{if not .HideAccountInfo}} - <a href="/user/{{.Account.ID}}" > + {{if not .HideAccountInfo}} + <div class="status-profile-img-container"> + <a class="img-link" href="/user/{{.Account.ID}}"> <img class="status-profile-img" src="{{.Account.AvatarStatic}}" alt="profile-avatar" /> </a> - {{end}} </div> + {{end}} <div class="status"> {{if not .HideAccountInfo}} <div class="status-name"> @@ -26,7 +26,7 @@ <a href="/user/{{.Account.ID}}" > <span class="status-uname"> {{.Account.Acct}} </span> </a> - <a class="status-visibility" href="{{.URL}}" target="_blank"> + <a class="status-visibility"> {{if eq .Visibility "public"}} <span class="icon dripicons-web" title="Public"></span> {{else if eq .Visibility "unlisted"}} @@ -37,6 +37,9 @@ <span class="icon dripicons-mail" title="Direct"></span> {{end}} </a> + <a class="remote-link" href="{{.URL}}" target="_blank" title="source"> + <span class="icon dripicons-link"></span> + </a> </div> {{end}} <div class="status-reply-container"> @@ -56,7 +59,7 @@ <div class="status-media-container"> {{range .MediaAttachments}} {{if eq .Type "image"}} - <a href="{{.URL}}" target="_blank"> + <a class="img-link" href="{{.URL}}" target="_blank"> <img class="status-image" src="{{.URL}}" alt="status-image" /> </a> {{else if eq .Type "audio"}} diff --git a/templates/user.tmpl b/templates/user.tmpl index e1a782a..ccb0e4a 100644 --- a/templates/user.tmpl +++ b/templates/user.tmpl @@ -5,12 +5,17 @@ <div class="user-info-container"> <div> <div class="user-profile-img-container"> - <img class="user-profile-img" src="{{.User.AvatarStatic}}" alt="profile-avatar" /> + <a class="img-link" href="{{.User.AvatarStatic}}" target="_blank"> + <img class="user-profile-img" src="{{.User.AvatarStatic}}" alt="profile-avatar" /> + </a> </div> <div class="user-profile-details-container"> <div> <span class="status-dname"> {{EmojiFilter .User.DisplayName .User.Emojis}} </span> <span class="status-uname"> {{.User.Acct}} </span> + <a class="remote-link" href="{{.User.URL}}" target="_blank" title="remote profile"> + <span class="icon dripicons-link"></span> + </a> </div> <div> <span> {{if .User.Pleroma.Relationship.FollowedBy}} follows you - {{end}} </span> |