Fix css and template issues

diff --git a/renderer/renderer.go b/renderer/renderer.go
index cabf92dbcc3dafa5dd3c359e70163cb1286053a9..8009d991d334a3ce9dcff7d3aea80130008a4b4d 100644 (file)
--- a/renderer/renderer.go
+++ b/renderer/renderer.go
@@ -79,7 +79,7 @@ func (r *renderer) RenderAboutPage(ctx context.Context, writer io.Writer, data *
 func EmojiFilter(content string, emojis []mastodon.Emoji) string {
        var replacements []string
        for _, e := range emojis {
-               replacements = append(replacements, ":"+e.ShortCode+":", "<img class=\"status-emoji\" src=\""+e.URL+"\" alt=\""+e.ShortCode+"\" />")
+               replacements = append(replacements, ":"+e.ShortCode+":", "<img class=\"status-emoji\" src=\""+e.URL+"\" alt=\""+e.ShortCode+"\" title=\""+e.ShortCode+"\" />")
        }
        return strings.NewReplacer(replacements...).Replace(content)
 }
@@ -90,7 +90,7 @@ func StatusContentFilter(spoiler string, content string, emojis []mastodon.Emoji
        }
        var replacements []string
        for _, e := range emojis {
-               replacements = append(replacements, ":"+e.ShortCode+":", "<img class=\"status-emoji\" src=\""+e.URL+"\" alt=\""+e.ShortCode+"\" />")
+               replacements = append(replacements, ":"+e.ShortCode+":", "<img class=\"status-emoji\" src=\""+e.URL+"\" alt=\""+e.ShortCode+"\" title=\""+e.ShortCode+"\" />")
        }
        for _, m := range mentions {
                replacements = append(replacements, "\""+m.URL+"\"", "\"/user/"+m.ID+"\"")

diff --git a/static/main.css b/static/main.css
index e37cef44da034d5ba36d40b7d6bd53e6a61ae842..89bb9cda9a3b283e0a54ac151d7166b8275b80fc 100644 (file)
--- a/static/main.css
+++ b/static/main.css
@@ -21,11 +21,15 @@
        margin: 0px;
 }
 
+.status-profile-img-container {
+       margin-right: 8px;
+}
+
 .status-profile-img {
        height: 48px;
        width: 48px;
-       margin-right: 8px;
        object-fit: contain;
+       vertical-align: top;
 }
 
 .status {
@@ -111,6 +115,10 @@
        margin: 8px 0;
 }
 
+.post-form>div {
+       margin-bottom: 4px;
+}
+
 .signin-form {
        margin: 8px 0;
 }
@@ -127,7 +135,7 @@
        height: 24px;
        width: 24px;
        margin-bottom: -8px;
-       margin-right: 0px;
+       vertical-align: baseline;
 }
 
 .retweet-info .status-dname{
@@ -248,7 +256,7 @@
 }
 
 .status-visibility {
-       margin: 0 4px;
+       margin-left: 4px;
        display: inline-block;
        color: #444444;
 }
@@ -257,3 +265,19 @@
        font-size: 9pt;
        vertical-align: bottom;
 }
+
+.remote-link {
+       margin-left: 4px;
+       display: inline-block;
+       color: #444444;
+       text-decoration: none;
+}
+
+.remote-link span {
+       font-size: 9pt;
+       vertical-align: bottom;
+}
+
+.img-link {
+       display: inline-block;
+}

diff --git a/templates/notification.tmpl b/templates/notification.tmpl
index 271597b3c122af194d1bc9aad247b1ea428b1bc8..e46ce8abd1279dd73986cc374cf57cd9e1507410 100644 (file)
--- a/templates/notification.tmpl
+++ b/templates/notification.tmpl
@@ -6,9 +6,11 @@
 <div class="notification-container {{if .Pleroma}}{{if not .Pleroma.IsSeen}}unread{{end}}{{end}}">
        {{if eq .Type "follow"}}
        <div class="notification-follow-container">
-               <a href="/user/{{.Account.ID}}" >
-                       <img class="status-profile-img" src="{{.Account.AvatarStatic}}" alt="profile-avatar" />
-               </a>
+               <div class="status-profile-img-container">
+                       <a class="img-link" href="/user/{{.Account.ID}}" >
+                               <img class="status-profile-img" src="{{.Account.AvatarStatic}}" alt="profile-avatar" />
+                       </a>
+               </div>
                <div>
                        <div>
                                <span class="status-dname"> {{EmojiFilter .Account.DisplayName .Account.Emojis}} </span>  
@@ -26,9 +28,11 @@
 
        {{else if eq .Type "reblog"}}
        <div class="notification-retweet-container">
-               <a href="/user/{{.Account.ID}}" >
-                       <img class="status-profile-img" src="{{.Account.AvatarStatic}}" alt="profile-avatar" />
-               </a>
+               <div class="status-profile-img-container">
+                       <a class="img-link" href="/user/{{.Account.ID}}" >
+                               <img class="status-profile-img" src="{{.Account.AvatarStatic}}" alt="profile-avatar" />
+                       </a>
+               </div>
                <div>
                        <div>
                                <span class="status-dname"> {{EmojiFilter .Account.DisplayName .Account.Emojis}} </span>  
@@ -41,9 +45,11 @@
 
        {{else if eq .Type "favourite"}}
        <div class="notification-like-container">
-               <a href="/user/{{.Account.ID}}" >
-                       <img class="status-profile-img" src="{{.Account.AvatarStatic}}" alt="profile-avatar" />
-               </a>
+               <div class="status-profile-img-container">
+                       <a class="img-link" href="/user/{{.Account.ID}}" >
+                               <img class="status-profile-img" src="{{.Account.AvatarStatic}}" alt="profile-avatar" />
+                       </a>
+               </div>
                <div>
                        <div>
                                <span class="status-dname"> {{EmojiFilter .Account.DisplayName .Account.Emojis}} </span>  

diff --git a/templates/postform.tmpl b/templates/postform.tmpl
index 137232f3d5d9b41317a7f66a4c2207a298789f59..309e139984a11275ffca6180689a6d13768e45fc 100644 (file)
--- a/templates/postform.tmpl
+++ b/templates/postform.tmpl
@@ -10,7 +10,7 @@
        </div>
        <div>
                <label for ="post-visilibity"> Visibility </label>
-               <select id="post-visilibity" type="file" name="visibility">
+               <select id="post-visilibity" name="visibility">
                        <option value="public" {{if eq .DefaultVisibility "public"}}selected{{end}}>Public</option>
                        <option value="unlisted" {{if eq .DefaultVisibility "unlisted"}}selected{{end}}>Unlisted</option>
                        <option value="private" {{if eq .DefaultVisibility "private"}}selected{{end}}>Private</option>

diff --git a/templates/status.tmpl b/templates/status.tmpl
index a89fc78eeb0d33e90008ae236811a8f93d882543..7ec7d291a17b0b2d358685e70e863d0162470b24 100644 (file)
--- a/templates/status.tmpl
+++ b/templates/status.tmpl
@@ -1,7 +1,7 @@
 <div id="status-{{if .Reblog}}{{.Reblog.ID}}{{else}}{{.ID}}{{end}}" class="status-container-container">
        {{if .Reblog}}
        <div class="retweet-info">
-               <a href="/user/{{.Account.ID}}" >
+               <a class="img-link" href="/user/{{.Account.ID}}">
                        <img class="status-profile-img" src="{{.Account.AvatarStatic}}" alt="profile-avatar" />
                </a>
                <span class="status-dname"> {{EmojiFilter .Account.DisplayName .Account.Emojis}} </span>  
@@ -12,13 +12,13 @@
        {{else}}
        {{block "status" .}}
        <div class="status-container">
-               <div>
-                       {{if not .HideAccountInfo}}
-                       <a href="/user/{{.Account.ID}}" >
+               {{if not .HideAccountInfo}}
+               <div class="status-profile-img-container">
+                       <a class="img-link" href="/user/{{.Account.ID}}">
                                <img class="status-profile-img" src="{{.Account.AvatarStatic}}" alt="profile-avatar" />
                        </a>
-                       {{end}}
                </div>
+               {{end}}
                <div class="status"> 
                        {{if not .HideAccountInfo}}
                        <div class="status-name">
@@ -26,7 +26,7 @@
                                <a href="/user/{{.Account.ID}}" >
                                        <span class="status-uname"> {{.Account.Acct}} </span>
                                </a>
-                               <a class="status-visibility" href="{{.URL}}" target="_blank">
+                               <a class="status-visibility">
                                        {{if eq .Visibility "public"}}
                                        <span class="icon dripicons-web" title="Public"></span> 
                                        {{else if eq .Visibility "unlisted"}}
@@ -37,6 +37,9 @@
                                        <span class="icon dripicons-mail" title="Direct"></span> 
                                        {{end}}
                                </a>
+                               <a class="remote-link" href="{{.URL}}" target="_blank" title="source">
+                                       <span class="icon dripicons-link"></span> 
+                               </a>
                        </div>
                        {{end}}
                        <div class="status-reply-container">
@@ -56,7 +59,7 @@
                        <div class="status-media-container">
                        {{range .MediaAttachments}}
                        {{if eq .Type "image"}}
-                       <a href="{{.URL}}" target="_blank">
+                       <a class="img-link" href="{{.URL}}" target="_blank">
                                <img class="status-image" src="{{.URL}}" alt="status-image" />
                        </a>
                        {{else if eq .Type "audio"}}

diff --git a/templates/user.tmpl b/templates/user.tmpl
index e1a782adf368e710b00229b9901a8fa1f59c37f5..ccb0e4a7f93c40adae9dab354453f11e2e6f2cb6 100644 (file)
--- a/templates/user.tmpl
+++ b/templates/user.tmpl
@@ -5,12 +5,17 @@
 <div class="user-info-container">
 <div>
        <div class="user-profile-img-container">
-               <img class="user-profile-img" src="{{.User.AvatarStatic}}" alt="profile-avatar" />
+               <a class="img-link" href="{{.User.AvatarStatic}}" target="_blank">
+                       <img class="user-profile-img" src="{{.User.AvatarStatic}}" alt="profile-avatar" />
+               </a>
        </div>
        <div class="user-profile-details-container">
                <div>
                        <span class="status-dname"> {{EmojiFilter .User.DisplayName .User.Emojis}} </span>  
                        <span class="status-uname"> {{.User.Acct}} </span>
+                       <a class="remote-link" href="{{.User.URL}}" target="_blank" title="remote profile">
+                               <span class="icon dripicons-link"></span> 
+                       </a>
                </div>
                <div>
                        <span> {{if .User.Pleroma.Relationship.FollowedBy}} follows you - {{end}} </span>