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

View file

@ -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)
}

View file

@ -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 {
vertical-align: middle;
}
.user-info {
display: flex;
}
.user-info-img {
max-height: 64px;
max-width: 64px;
object-fit: contain;
height: 64px;
width: 64px;
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;
}

View file

@ -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}}

View file

@ -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">

View file

@ -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>

View file

@ -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}}">

View file

@ -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">

View file

@ -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>