moon
/
bloat
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Update CSS 

Now it's mostly CSS 2.1 compliant. All the images now use the height
attribute to limit the size on browsers that don't support CSS.
This commit is contained in:
r 2020-09-22 04:21:39 +00:00
parent 7a59d010f6
commit 79d4ff4b08
8 changed files with 47 additions and 65 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
renderer/renderer.go
View File

@ -41,7 +41,7 @@ func emojiFilter(content string, emojis []mastodon.Emoji) string {
var replacements []string var replacements []string
var r string var r string
for _, e := range emojis { 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) e.URL, e.ShortCode, e.ShortCode)
replacements = append(replacements, ":"+e.ShortCode+":", r) replacements = append(replacements, ":"+e.ShortCode+":", r)
} }
@ -57,7 +57,7 @@ func statusContentFilter(spoiler string, content string,
content = spoiler + "<br />" + content content = spoiler + "<br />" + content
} }
for _, e := range emojis { 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) e.URL, e.ShortCode, e.ShortCode)
replacements = append(replacements, ":"+e.ShortCode+":", r) replacements = append(replacements, ":"+e.ShortCode+":", r)
} }

80
static/style.css
View File

@ -12,13 +12,8 @@
background-color: #cccccc; background-color: #cccccc;
} }
.status-container {
display: flex;
}
.status-content { .status-content {
margin: 4px 0; margin: 4px 0;
word-wrap: anywhere;
max-height: 600px; max-height: 600px;
overflow: auto; overflow: auto;
} }
@ -30,6 +25,8 @@
.status-content img, .status-content img,
.status-image, .status-image,
.status-video { .status-video {
height: auto;
width: auto;
max-height: 240px; max-height: 240px;
max-width: 280px; max-width: 280px;
width: auto; width: auto;
@ -42,18 +39,17 @@
.status-profile-img-container { .status-profile-img-container {
margin-right: 8px; margin-right: 8px;
float: left;
} }
.status-profile-img { .status-profile-img {
height: 48px; height: 48px;
width: 48px; width: 48px;
object-fit: contain;
vertical-align: top; vertical-align: top;
} }
.status { .status {
flex: 1; overflow: auto;
overflow-x: auto;
} }
.status-dname { .status-dname {
@ -61,16 +57,10 @@
} }
.status-uname { .status-uname {
user-select: all;
font-style: italic; font-style: italic;
font-size: 10pt; font-size: 10pt;
} }
.name-emoji {
height: 20px;
width: auto;
}
.status-action-container { .status-action-container {
margin-top: 4px; margin-top: 4px;
} }
@ -80,7 +70,7 @@
margin-right: 16px; margin-right: 16px;
} }
.status-action:last-child { .status-action-last {
margin-right: 4px; margin-right: 4px;
} }
@ -105,7 +95,7 @@
} }
.post-form { .post-form {
margin: 8px 0; margin: 4px 0;
} }
.post-form>div { .post-form>div {
@ -159,14 +149,14 @@
border-color: #777777; border-color: #777777;
} }
.notification-follow-container {
display: flex;
}
.notification-info-text span { .notification-info-text span {
vertical-align: middle; vertical-align: middle;
} }
.notification-follow {
overflow: auto;
}
.notification-follow-uname { .notification-follow-uname {
margin-top: 8px; margin-top: 8px;
} }
@ -232,9 +222,8 @@
} }
.user-profile-img { .user-profile-img {
max-height: 100px; height: 96px;
max-width: 100px; width: 96px;
object-fit: contain;
vertical-align: top; vertical-align: top;
} }
@ -263,7 +252,7 @@ a, .btn-link {
a:hover, a:hover,
.btn-link:hover { .btn-link:hover {
opacity: 0.6; color: #9899c4;
} }
.status-visibility { .status-visibility {
@ -284,10 +273,6 @@ a:hover,
margin: 2.5px 0; margin: 2.5px 0;
} }
.img-link:hover {
opacity: initial;
}
.status-profile-img-container .img-link { .status-profile-img-container .img-link {
width: 48px; width: 48px;
overflow: hidden; overflow: hidden;
@ -327,8 +312,10 @@ a:hover,
} }
img.emoji { img.emoji {
height: 32px; height: auto;
object-fit: contain; width: auto;
max-height: 32px;
max-width: 32px;
vertical-align: middle; vertical-align: middle;
} }
@ -337,7 +324,6 @@ img.emoji {
} }
.emoji-shortcode { .emoji-shortcode {
user-select: all;
vertical-align: middle; vertical-align: middle;
display: inline-block; display: inline-block;
} }
@ -346,27 +332,19 @@ img.emoji {
margin-left: 4px; margin-left: 4px;
} }
.post-form-emoji-link i {
font-size: 14pt !important;
}
.post-form-title {
vertical-align: middle;
}
.user-info {
display: flex;
}
.user-info-img { .user-info-img {
max-height: 64px; height: 64px;
max-width: 64px; width: 64px;
object-fit: contain;
vertical-align: middle; vertical-align: middle;
} }
.user-info-img-container {
float: left;
margin-right: 8px;
}
.user-info-details-container { .user-info-details-container {
margin-left: 8px; overflow: auto;
} }
.user-info-details-container>div { .user-info-details-container>div {
@ -375,7 +353,6 @@ img.emoji {
.nav-link { .nav-link {
margin-right: 2px; margin-right: 2px;
text-decoration: underline;
} }
.user-list-container { .user-list-container {
@ -442,7 +419,7 @@ img.emoji {
} }
.more-container:hover .more-content { .more-container:hover .more-content {
display: initial; display: block;
} }
.more-link { .more-link {
@ -514,6 +491,11 @@ img.emoji {
color: #81a2be; color: #81a2be;
} }
.dark a:hover,
.dark .btn-link:hover {
color: #497091;
}
.dark .status-visibility { .dark .status-visibility {
color: #eaeaea; color: #eaeaea;
} }

2
templates/emoji.tmpl
View File

@ -5,7 +5,7 @@
<div class="emoji-list-container"> <div class="emoji-list-container">
{{range .Emojis}} {{range .Emojis}}
<div class="emoji-item"> <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 class="emoji-shortcode">:{{.ShortCode}}:</div>
</div> </div>
{{end}} {{end}}

2
templates/nav.tmpl
View File

@ -3,7 +3,7 @@
<div class="user-info"> <div class="user-info">
<div class="user-info-img-container"> <div class="user-info-img-container">
<a class="img-link" href="/timeline/home" title="home"> <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> </a>
</div> </div>
<div class="user-info-details-container"> <div class="user-info-details-container">

10
templates/notification.tmpl
View File

@ -19,13 +19,13 @@
{{range .Notifications}} {{range .Notifications}}
<div class="notification-container {{if .Pleroma}}{{if not .Pleroma.IsSeen}}unread{{end}}{{end}}"> <div class="notification-container {{if .Pleroma}}{{if not .Pleroma.IsSeen}}unread{{end}}{{end}}">
{{if eq .Type "follow"}} {{if eq .Type "follow"}}
<div class="notification-follow-container"> <div>
<div class="status-profile-img-container"> <div class="status-profile-img-container">
<a class="img-link" href="/user/{{.Account.ID}}"> <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> </a>
</div> </div>
<div> <div class="notification-follow">
<div class="notification-info-text"> <div class="notification-info-text">
<span class="status-dname"> {{EmojiFilter .Account.DisplayName .Account.Emojis}} </span> <span class="status-dname"> {{EmojiFilter .Account.DisplayName .Account.Emojis}} </span>
<span> followed you </span> <span> followed you </span>
@ -45,7 +45,7 @@
{{else if eq .Type "reblog"}} {{else if eq .Type "reblog"}}
<div class="retweet-info"> <div class="retweet-info">
<a class="img-link" href="/user/{{.Account.ID}}"> <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> </a>
<span class="status-dname"> {{EmojiFilter .Account.DisplayName .Account.Emojis}} </span> <span class="status-dname"> {{EmojiFilter .Account.DisplayName .Account.Emojis}} </span>
<span> retweeted your post </span> <span> retweeted your post </span>
@ -58,7 +58,7 @@
{{else if eq .Type "favourite"}} {{else if eq .Type "favourite"}}
<div class="retweet-info"> <div class="retweet-info">
<a class="img-link" href="/user/{{.Account.ID}}"> <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> </a>
<span class="status-dname"> {{EmojiFilter .Account.DisplayName .Account.Emojis}} </span> <span class="status-dname"> {{EmojiFilter .Account.DisplayName .Account.Emojis}} </span>
<span> liked your post </span> <span> liked your post </span>

10
templates/status.tmpl
View File

@ -3,7 +3,7 @@
{{if .Reblog}} {{if .Reblog}}
<div class="retweet-info"> <div class="retweet-info">
<a class="img-link" href="/user/{{.Account.ID}}"> <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> </a>
<span class="status-dname"> {{EmojiFilter .Account.DisplayName .Account.Emojis}} </span> <span class="status-dname"> {{EmojiFilter .Account.DisplayName .Account.Emojis}} </span>
retweeted retweeted
@ -15,7 +15,7 @@
<div class="status-container status-{{.ID}}" data-id="{{.ID}}"> <div class="status-container status-{{.ID}}" data-id="{{.ID}}">
<div class="status-profile-img-container"> <div class="status-profile-img-container">
<a class="img-link" href="/user/{{.Account.ID}}"> <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> </a>
</div> </div>
<div class="status"> <div class="status">
@ -81,7 +81,7 @@
<a href="{{.URL}}" target="_blank" title="{{.Description}}"> [image] </a> <a href="{{.URL}}" target="_blank" title="{{.Description}}"> [image] </a>
{{else}} {{else}}
<a class="img-link" href="{{.URL}}" target="_blank" title="{{.Description}}"> <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)}} {{if (and $.Ctx.MaskNSFW $s.Sensitive)}}
<div class="status-nsfw-overlay"></div> <div class="status-nsfw-overlay"></div>
{{end}} {{end}}
@ -103,7 +103,7 @@
<a href="{{.URL}}" target="_blank" title="{{.Description}}"> [video] </a> <a href="{{.URL}}" target="_blank" title="{{.Description}}"> [video] </a>
{{else}} {{else}}
<div class="status-video-container" title="{{.Description}}"> <div class="status-video-container" title="{{.Description}}">
<video class="status-video" controls> <video class="status-video" controls height="240">
<source src="{{.URL}}"> <source src="{{.URL}}">
<a href="{{.URL}}" target="_blank"> [video] </a> <a href="{{.URL}}" target="_blank"> [video] </a>
</video> </video>
@ -211,7 +211,7 @@
{{end}} {{end}}
</a> </a>
</div> </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}}" <a class="status-time" href="{{if not .ShowReplies}}/thread/{{.ID}}{{end}}#status-{{.ID}}"
{{if $.Ctx.ThreadInNewTab}}target="_blank"{{end}}> {{if $.Ctx.ThreadInNewTab}}target="_blank"{{end}}>
<time datetime="{{FormatTimeRFC3339 .CreatedAt}}" title="{{FormatTimeRFC822 .CreatedAt}}"> <time datetime="{{FormatTimeRFC3339 .CreatedAt}}" title="{{FormatTimeRFC822 .CreatedAt}}">

2
templates/user.tmpl
View File

@ -6,7 +6,7 @@
<div> <div>
<div class="user-profile-img-container"> <div class="user-profile-img-container">
<a class="img-link" href="{{.User.AvatarStatic}}" target="_blank"> <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> </a>
</div> </div>
<div class="user-profile-details-container"> <div class="user-profile-details-container">

2
templates/userlist.tmpl
View File

@ -4,7 +4,7 @@
<div class="user-list-item"> <div class="user-list-item">
<div> <div>
<a class="img-link" href="/user/{{.ID}}"> <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> </a>
</div> </div>
<div> <div>