mirrors/bloat
1
0
Fork 0
mirror of https://git.freesoftwareextremist.com/bloat synced 2024-12-22 09:10:42 +00:00
Code Issues Projects Releases Wiki Activity

Update CSS

Browse source 
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 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)
}

80
static/style.css
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;
}

2
templates/emoji.tmpl
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}}

2
templates/nav.tmpl
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">

10
templates/notification.tmpl
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>

10
templates/status.tmpl
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}}">

2
templates/user.tmpl
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">

2
templates/userlist.tmpl
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>