Update CSS
authorr <r@freesoftwareextremist.com>
Tue, 22 Sep 2020 04:21:39 +0000 (04:21 +0000)
committerr <r@freesoftwareextremist.com>
Tue, 22 Sep 2020 04:21:39 +0000 (04:21 +0000)
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.

renderer/renderer.go
static/style.css
templates/emoji.tmpl
templates/nav.tmpl
templates/notification.tmpl
templates/status.tmpl
templates/user.tmpl
templates/userlist.tmpl

index a15bebff465d7dcbed9eb6ec0f68712e89e7b4ff..560e9b72cf04d495c98cd0e789aa24f0dbacef0e 100644 (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)
        }
index d43449fbf943f3f95b8297e1b15ba7ddf8e679b5..d27b9e67de12e883ff9179aba1293175281aa3d1 100644 (file)
        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;
 
 .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 {
 }
 
 .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;
 }
 
 }
 
 .post-form {
-       margin: 8px 0;
+       margin: 4px 0;
 }
 
 .post-form>div {
        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;
 }
 }
 
 .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;
 }
index cbffc7b2593ddedeb4c3bfc860bd780ffbf51a9a..7359d81989cd22fcb183a5b06bc1259e03c21f0b 100644 (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}}
index 3386a7be1bc22618344f16745aa23532a9667c89..cfac439accd633db7cd60bb6f1208d20370e74ef 100644 (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">
index 227bc5721b08789625f52b4d1e08d62b915cd0ce..2943847a14367fb1b881376fa7b73172aea2cf7f 100644 (file)
 {{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>
index de0909b8b0b8ca45d976914c0ab4af83d902b550..7d510e2b50bbf97bb9f7598fcce91ce0dcf794b8 100644 (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}}
                                <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>
                                                {{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}}"> 
index f6750c6cf7904c63461bc258991bd226cb88e669..4fe7fd1f33356d67e5c70113677a7f879f9c3446 100644 (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">
index b4e8cd05955c883ecbe7173745cf6ea147cbf970..0a442022cbf61d645febf7009c1d220d4f86d895 100644 (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>