aboutsummaryrefslogtreecommitdiff
diff options
context:
space:
mode:
Diffstat
-rw-r--r--renderer/renderer.go4
-rw-r--r--static/style.css78
-rw-r--r--templates/emoji.tmpl2
-rw-r--r--templates/nav.tmpl2
-rw-r--r--templates/notification.tmpl10
-rw-r--r--templates/status.tmpl10
-rw-r--r--templates/user.tmpl2
-rw-r--r--templates/userlist.tmpl2
8 files changed, 46 insertions, 64 deletions
diff --git a/renderer/renderer.go b/renderer/renderer.go
index a15bebf..560e9b7 100644
--- a/renderer/renderer.go
+++ b/renderer/renderer.go
@@ -41,7 +41,7 @@ func emojiFilter(content string, emojis []mastodon.Emoji) string {
var replacements []string
var r string
for _, e := range emojis {
- r = fmt.Sprintf("<img class=\"emoji\" src=\"%s\" alt=\":%s:\" title=\":%s:\" />",
+ r = fmt.Sprintf("<img class=\"emoji\" src=\"%s\" alt=\":%s:\" title=\":%s:\" height=\"24\" />",
e.URL, e.ShortCode, e.ShortCode)
replacements = append(replacements, ":"+e.ShortCode+":", r)
}
@@ -57,7 +57,7 @@ func statusContentFilter(spoiler string, content string,
content = spoiler + "<br />" + content
}
for _, e := range emojis {
- r = fmt.Sprintf("<img class=\"emoji\" src=\"%s\" alt=\":%s:\" title=\":%s:\" />",
+ r = fmt.Sprintf("<img class=\"emoji\" src=\"%s\" alt=\":%s:\" title=\":%s:\" height=\"32\" />",
e.URL, e.ShortCode, e.ShortCode)
replacements = append(replacements, ":"+e.ShortCode+":", r)
}
diff --git a/static/style.css b/static/style.css
index d43449f..d27b9e6 100644
--- a/static/style.css
+++ b/static/style.css
@@ -12,13 +12,8 @@
background-color: #cccccc;
}
-.status-container {
- display: flex;
-}
-
.status-content {
margin: 4px 0;
- word-wrap: anywhere;
max-height: 600px;
overflow: auto;
}
@@ -30,6 +25,8 @@
.status-content img,
.status-image,
.status-video {
+ height: auto;
+ width: auto;
max-height: 240px;
max-width: 280px;
width: auto;
@@ -42,18 +39,17 @@
.status-profile-img-container {
margin-right: 8px;
+ float: left;
}
.status-profile-img {
height: 48px;
width: 48px;
- object-fit: contain;
vertical-align: top;
}
.status {
- flex: 1;
- overflow-x: auto;
+ overflow: auto;
}
.status-dname {
@@ -61,16 +57,10 @@
}
.status-uname {
- user-select: all;
font-style: italic;
font-size: 10pt;
}
-.name-emoji {
- height: 20px;
- width: auto;
-}
-
.status-action-container {
margin-top: 4px;
}
@@ -80,7 +70,7 @@
margin-right: 16px;
}
-.status-action:last-child {
+.status-action-last {
margin-right: 4px;
}
@@ -105,7 +95,7 @@
}
.post-form {
- margin: 8px 0;
+ margin: 4px 0;
}
.post-form>div {
@@ -159,14 +149,14 @@
border-color: #777777;
}
-.notification-follow-container {
- display: flex;
-}
-
.notification-info-text span {
vertical-align: middle;
}
+.notification-follow {
+ overflow: auto;
+}
+
.notification-follow-uname {
margin-top: 8px;
}
@@ -232,9 +222,8 @@
}
.user-profile-img {
- max-height: 100px;
- max-width: 100px;
- object-fit: contain;
+ height: 96px;
+ width: 96px;
vertical-align: top;
}
@@ -263,7 +252,7 @@ a, .btn-link {
a:hover,
.btn-link:hover {
- opacity: 0.6;
+ color: #9899c4;
}
.status-visibility {
@@ -284,10 +273,6 @@ a:hover,
margin: 2.5px 0;
}
-.img-link:hover {
- opacity: initial;
-}
-
.status-profile-img-container .img-link {
width: 48px;
overflow: hidden;
@@ -327,8 +312,10 @@ a:hover,
}
img.emoji {
- height: 32px;
- object-fit: contain;
+ height: auto;
+ width: auto;
+ max-height: 32px;
+ max-width: 32px;
vertical-align: middle;
}
@@ -337,7 +324,6 @@ img.emoji {
}
.emoji-shortcode {
- user-select: all;
vertical-align: middle;
display: inline-block;
}
@@ -346,27 +332,19 @@ img.emoji {
margin-left: 4px;
}
-.post-form-emoji-link i {
- font-size: 14pt !important;
-}
-
-.post-form-title {
+.user-info-img {
+ height: 64px;
+ width: 64px;
vertical-align: middle;
}
-.user-info {
- display: flex;
-}
-
-.user-info-img {
- max-height: 64px;
- max-width: 64px;
- object-fit: contain;
- vertical-align: middle;
+.user-info-img-container {
+ float: left;
+ margin-right: 8px;
}
.user-info-details-container {
- margin-left: 8px;
+ overflow: auto;
}
.user-info-details-container>div {
@@ -375,7 +353,6 @@ img.emoji {
.nav-link {
margin-right: 2px;
- text-decoration: underline;
}
.user-list-container {
@@ -442,7 +419,7 @@ img.emoji {
}
.more-container:hover .more-content {
- display: initial;
+ display: block;
}
.more-link {
@@ -514,6 +491,11 @@ img.emoji {
color: #81a2be;
}
+.dark a:hover,
+.dark .btn-link:hover {
+ color: #497091;
+}
+
.dark .status-visibility {
color: #eaeaea;
}
diff --git a/templates/emoji.tmpl b/templates/emoji.tmpl
index cbffc7b..7359d81 100644
--- a/templates/emoji.tmpl
+++ b/templates/emoji.tmpl
@@ -5,7 +5,7 @@
<div class="emoji-list-container">
{{range .Emojis}}
<div class="emoji-item">
- <img class="emoji" src="{{.URL}}" alt="{{.ShortCode}}" />
+ <img class="emoji" src="{{.URL}}" alt="{{.ShortCode}}" height="32" />
<div class="emoji-shortcode">:{{.ShortCode}}:</div>
</div>
{{end}}
diff --git a/templates/nav.tmpl b/templates/nav.tmpl
index 3386a7b..cfac439 100644
--- a/templates/nav.tmpl
+++ b/templates/nav.tmpl
@@ -3,7 +3,7 @@
<div class="user-info">
<div class="user-info-img-container">
<a class="img-link" href="/timeline/home" title="home">
- <img class="user-info-img" src="{{.User.AvatarStatic}}" alt="profile-avatar" />
+ <img class="user-info-img" src="{{.User.AvatarStatic}}" alt="profile-avatar" height="64" />
</a>
</div>
<div class="user-info-details-container">
diff --git a/templates/notification.tmpl b/templates/notification.tmpl
index 227bc57..2943847 100644
--- a/templates/notification.tmpl
+++ b/templates/notification.tmpl
@@ -19,13 +19,13 @@
{{range .Notifications}}
<div class="notification-container {{if .Pleroma}}{{if not .Pleroma.IsSeen}}unread{{end}}{{end}}">
{{if eq .Type "follow"}}
- <div class="notification-follow-container">
+ <div>
<div class="status-profile-img-container">
<a class="img-link" href="/user/{{.Account.ID}}">
- <img class="status-profile-img" src="{{.Account.AvatarStatic}}" title="{{.Account.Acct}}" alt="profile-avatar" />
+ <img class="status-profile-img" src="{{.Account.AvatarStatic}}" title="{{.Account.Acct}}" alt="profile-avatar" height="48" />
</a>
</div>
- <div>
+ <div class="notification-follow">
<div class="notification-info-text">
<span class="status-dname"> {{EmojiFilter .Account.DisplayName .Account.Emojis}} </span>
<span> followed you </span>
@@ -45,7 +45,7 @@
{{else if eq .Type "reblog"}}
<div class="retweet-info">
<a class="img-link" href="/user/{{.Account.ID}}">
- <img class="status-profile-img" src="{{.Account.AvatarStatic}}" title="{{.Account.Acct}}" alt="avatar" />
+ <img class="status-profile-img" src="{{.Account.AvatarStatic}}" title="{{.Account.Acct}}" alt="avatar" height="48" />
</a>
<span class="status-dname"> {{EmojiFilter .Account.DisplayName .Account.Emojis}} </span>
<span> retweeted your post </span>
@@ -58,7 +58,7 @@
{{else if eq .Type "favourite"}}
<div class="retweet-info">
<a class="img-link" href="/user/{{.Account.ID}}">
- <img class="status-profile-img" src="{{.Account.AvatarStatic}}" title="{{.Account.Acct}}" alt="avatar" />
+ <img class="status-profile-img" src="{{.Account.AvatarStatic}}" title="{{.Account.Acct}}" alt="avatar" height="48" />
</a>
<span class="status-dname"> {{EmojiFilter .Account.DisplayName .Account.Emojis}} </span>
<span> liked your post </span>
diff --git a/templates/status.tmpl b/templates/status.tmpl
index de0909b..7d510e2 100644
--- a/templates/status.tmpl
+++ b/templates/status.tmpl
@@ -3,7 +3,7 @@
{{if .Reblog}}
<div class="retweet-info">
<a class="img-link" href="/user/{{.Account.ID}}">
- <img class="status-profile-img" src="{{.Account.AvatarStatic}}" title="{{.Account.Acct}}" alt="avatar" />
+ <img class="status-profile-img" src="{{.Account.AvatarStatic}}" title="{{.Account.Acct}}" alt="avatar" height="24" />
</a>
<span class="status-dname"> {{EmojiFilter .Account.DisplayName .Account.Emojis}} </span>
retweeted
@@ -15,7 +15,7 @@
<div class="status-container status-{{.ID}}" data-id="{{.ID}}">
<div class="status-profile-img-container">
<a class="img-link" href="/user/{{.Account.ID}}">
- <img class="status-profile-img" src="{{.Account.AvatarStatic}}" title="{{.Account.Acct}}" alt="avatar" />
+ <img class="status-profile-img" src="{{.Account.AvatarStatic}}" title="{{.Account.Acct}}" alt="avatar" height="48" />
</a>
</div>
<div class="status">
@@ -81,7 +81,7 @@
<a href="{{.URL}}" target="_blank" title="{{.Description}}"> [image] </a>
{{else}}
<a class="img-link" href="{{.URL}}" target="_blank" title="{{.Description}}">
- <img class="status-image" src="{{.URL}}" alt="status-image" />
+ <img class="status-image" src="{{.URL}}" alt="status-image" height="240" />
{{if (and $.Ctx.MaskNSFW $s.Sensitive)}}
<div class="status-nsfw-overlay"></div>
{{end}}
@@ -103,7 +103,7 @@
<a href="{{.URL}}" target="_blank" title="{{.Description}}"> [video] </a>
{{else}}
<div class="status-video-container" title="{{.Description}}">
- <video class="status-video" controls>
+ <video class="status-video" controls height="240">
<source src="{{.URL}}">
<a href="{{.URL}}" target="_blank"> [video] </a>
</video>
@@ -211,7 +211,7 @@
{{end}}
</a>
</div>
- <div class="status-action">
+ <div class="status-action status-action-last">
<a class="status-time" href="{{if not .ShowReplies}}/thread/{{.ID}}{{end}}#status-{{.ID}}"
{{if $.Ctx.ThreadInNewTab}}target="_blank"{{end}}>
<time datetime="{{FormatTimeRFC3339 .CreatedAt}}" title="{{FormatTimeRFC822 .CreatedAt}}">
diff --git a/templates/user.tmpl b/templates/user.tmpl
index f6750c6..4fe7fd1 100644
--- a/templates/user.tmpl
+++ b/templates/user.tmpl
@@ -6,7 +6,7 @@
<div>
<div class="user-profile-img-container">
<a class="img-link" href="{{.User.AvatarStatic}}" target="_blank">
- <img class="user-profile-img" src="{{.User.AvatarStatic}}" alt="profile-avatar" />
+ <img class="user-profile-img" src="{{.User.AvatarStatic}}" alt="profile-avatar" height="96" />
</a>
</div>
<div class="user-profile-details-container">
diff --git a/templates/userlist.tmpl b/templates/userlist.tmpl
index b4e8cd0..0a44202 100644
--- a/templates/userlist.tmpl
+++ b/templates/userlist.tmpl
@@ -4,7 +4,7 @@
<div class="user-list-item">
<div>
<a class="img-link" href="/user/{{.ID}}">
- <img class="status-profile-img" src="{{.AvatarStatic}}" title="{{.Acct}}" alt="avatar" />
+ <img class="status-profile-img" src="{{.AvatarStatic}}" title="{{.Acct}}" alt="avatar" height="48" />
</a>
</div>
<div>
generated by cgit v1.2.3 (git 2.25.1) at 2024-11-21 21:19:55 +0000