aboutsummaryrefslogtreecommitdiff
diff options
context:
space:
mode:
-rw-r--r--renderer/renderer.go42
-rw-r--r--static/fluoride.js29
-rw-r--r--static/style.css98
-rw-r--r--templates/notification.tmpl3
-rw-r--r--templates/postform.tmpl4
-rw-r--r--templates/status.tmpl41
-rw-r--r--templates/user.tmpl2
7 files changed, 70 insertions, 149 deletions
diff --git a/renderer/renderer.go b/renderer/renderer.go
index 2d227c4..2ad5ddf 100644
--- a/renderer/renderer.go
+++ b/renderer/renderer.go
@@ -11,39 +11,6 @@ import (
"mastodon"
)
-var (
- icons = map[string]string{
- "envelope": "/static/icons/envelope.png",
- "dark-envelope": "/static/icons/dark-envelope.png",
- "globe": "/static/icons/globe.png",
- "dark-globe": "/static/icons/dark-globe.png",
- "liked": "/static/icons/liked.png",
- "dark-liked": "/static/icons/liked.png",
- "link": "/static/icons/link.png",
- "dark-link": "/static/icons/dark-link.png",
- "lock": "/static/icons/lock.png",
- "dark-lock": "/static/icons/dark-lock.png",
- "mail-forward": "/static/icons/mail-forward.png",
- "dark-mail-forward": "/static/icons/dark-mail-forward.png",
- "reply": "/static/icons/reply.png",
- "dark-reply": "/static/icons/dark-reply.png",
- "retweet": "/static/icons/retweet.png",
- "dark-retweet": "/static/icons/dark-retweet.png",
- "retweeted": "/static/icons/retweeted.png",
- "dark-retweeted": "/static/icons/retweeted.png",
- "smile-o": "/static/icons/smile-o.png",
- "dark-smile-o": "/static/icons/dark-smile-o.png",
- "star-o": "/static/icons/star-o.png",
- "dark-star-o": "/static/icons/dark-star-o.png",
- "star": "/static/icons/star.png",
- "dark-star": "/static/icons/dark-star.png",
- "unlock-alt": "/static/icons/unlock-alt.png",
- "dark-unlock-alt": "/static/icons/dark-unlock-alt.png",
- "user-plus": "/static/icons/user-plus.png",
- "dark-user-plus": "/static/icons/dark-user-plus.png",
- }
-)
-
type TemplateData struct {
Data interface{}
Ctx *Context
@@ -79,7 +46,6 @@ func NewRenderer(templateGlobPattern string) (r *renderer, err error) {
"TimeSince": TimeSince,
"FormatTimeRFC3339": FormatTimeRFC3339,
"FormatTimeRFC822": FormatTimeRFC822,
- "GetIcon": GetIcon,
"WithContext": WithContext,
}).ParseGlob(templateGlobPattern)
if err != nil {
@@ -232,14 +198,6 @@ func FormatTimeRFC822(t time.Time) string {
return t.Format(time.RFC822)
}
-func GetIcon(name string, darkMode bool) (icon string) {
- if darkMode {
- name = "dark-" + name
- }
- icon, _ = icons[name]
- return
-}
-
func WithContext(data interface{}, ctx *Context) TemplateData {
return TemplateData{data, ctx}
}
diff --git a/static/fluoride.js b/static/fluoride.js
index 44af7c9..b3e90b8 100644
--- a/static/fluoride.js
+++ b/static/fluoride.js
@@ -1,16 +1,5 @@
// @license magnet:?xt=urn:btih:90dc5c0be029de84e523b9b3922520e79e0e6f08&dn=cc0.txt CC0
-var actionIcons = {
- "like": "/static/icons/star-o.png",
- "dark-like": "/static/icons/dark-star-o.png",
- "unlike": "/static/icons/liked.png",
- "dark-unlike": "/static/icons/liked.png",
- "retweet": "/static/icons/retweet.png",
- "dark-retweet": "/static/icons/dark-retweet.png",
- "unretweet": "/static/icons/retweeted.png",
- "dark-unretweet": "/static/icons/retweeted.png"
-};
-
var reverseActions = {
"like": "unlike",
"unlike": "like",
@@ -45,11 +34,7 @@ function http(method, url, body, type, success, error) {
}
function updateActionForm(id, f, action) {
- if (Array.from(document.body.classList).indexOf("dark") > -1) {
- f.querySelector(".icon").src = actionIcons["dark-" + action];
- } else {
- f.querySelector(".icon").src = actionIcons[action];
- }
+ f.querySelector('[type="submit"]').value = action;
f.action = "/" + action + "/" + id;
f.dataset.action = action;
}
@@ -74,7 +59,11 @@ function handleLikeForm(id, f) {
}
var counts = document.querySelectorAll(".status-"+id+" .status-like-count");
counts.forEach(function(c) {
- c.innerHTML = count;
+ if (count > 0) {
+ c.innerHTML = "(" + count + ")";
+ } else {
+ c.innerHTML = "";
+ }
});
}, function(err) {
forms.forEach(function(f) {
@@ -104,7 +93,11 @@ function handleRetweetForm(id, f) {
}
var counts = document.querySelectorAll(".status-"+id+" .status-retweet-count");
counts.forEach(function(c) {
- c.innerHTML = count;
+ if (count > 0) {
+ c.innerHTML = "(" + count + ")";
+ } else {
+ c.innerHTML = "";
+ }
});
}, function(err) {
forms.forEach(function(f) {
diff --git a/static/style.css b/static/style.css
index fdbad23..888fb5d 100644
--- a/static/style.css
+++ b/static/style.css
@@ -54,10 +54,6 @@
.status {
}
-.status a {
- text-decoration: none;
-}
-
.status-dname {
font-weight: 800;
}
@@ -85,38 +81,29 @@
.status-action {
display: inline-block;
- min-width: 64px;
+ margin-right: 16px;
}
-.status-action form {
- display: inline-block;
+.status-action:last-child {
+ margin-right: 4px;
}
-.status-action:last-child {
- min-width: unset;
+.status-action form {
+ display: inline-block;
}
.status-action a {
display: inline-block;
- text-decoration: none;
- color: #333333;
}
-.status-action a:hover,
-.status-action input:hover {
- opacity: 0.6;
+.status-action * {
+ verical-align: center;
}
.status-action a.status-time {
width: auto;
}
-.status-reply-count,
-.status-retweet-count,
-.status-like-count {
- vertical-align: middle;
-}
-
.page-title {
font-size: 23pt;
}
@@ -265,38 +252,36 @@
}
.btn-link {
- border: none;
- outline: none;
- background: none;
- cursor: pointer;
- color: #0000EE;
- padding: 0;
- text-decoration: underline;
- font-family: inherit;
- font-size: inherit;
+ border: none;
+ outline: none;
+ background: none;
+ cursor: pointer;
+ padding: 0;
+ font-family: inherit;
+ font-size: inherit;
}
-.status-visibility {
- margin-left: 4px;
- display: inline-block;
- color: #444444;
+a, .btn-link {
+ color: #464acc;
+ text-decoration: none;
}
-.status-visibility span {
- font-size: 9pt;
- vertical-align: bottom;
+a:hover,
+.btn-link:hover {
+ opacity: 0.6;
}
-.remote-link {
+.status-visibility {
margin-left: 4px;
display: inline-block;
- color: #444444;
- text-decoration: none;
+ color: #222222;
+ font-size: 8pt;
}
-.remote-link span {
- font-size: 9pt;
- vertical-align: bottom;
+.remote-link {
+ margin-left: 4px;
+ display: inline-block;
+ font-size: 8pt;
}
.img-link {
@@ -305,6 +290,10 @@
margin: 2.5px 0;
}
+.img-link:hover {
+ opacity: initial;
+}
+
.status-profile-img-container .img-link {
width: 48px;
overflow: hidden;
@@ -390,16 +379,13 @@
.nav-link {
margin-right: 2px;
+ text-decoration: underline;
}
.user-list-container {
margin: 8px 0;
}
-.user-list-item a {
- text-decoration: none;
-}
-
.user-list-item>div {
display: inline-block;
vertical-align: top;
@@ -422,15 +408,6 @@
margin-top: 8px;
}
-.icon {
- height: 16px;
- vertical-align: middle;
-}
-
-.icon.post-emoji {
- height: 20px;
-}
-
#reply-popup {
position: absolute;
background: #ffffff;
@@ -459,10 +436,6 @@
color: #81a2be;
}
-.dark .status-action a {
- color: #999999;
-}
-
.dark #post-content {
background-color: #333333;
border: 1px solid #444444;
@@ -479,3 +452,10 @@
background-color: #333333;
}
+.dark .btn-link {
+ color: #81a2be;
+}
+
+.dark .status-visibility {
+ color: #eaeaea;
+}
diff --git a/templates/notification.tmpl b/templates/notification.tmpl
index cc7a4a1..51cc6e3 100644
--- a/templates/notification.tmpl
+++ b/templates/notification.tmpl
@@ -15,7 +15,6 @@
<div>
<div class="notification-info-text">
<span class="status-dname"> {{EmojiFilter .Account.DisplayName .Account.Emojis}} </span>
- <img class="icon" src="{{GetIcon "user-plus" $.Ctx.DarkMode}}" alt="followed" />
<span> followed you </span>
<span>
- <time datetime="{{FormatTimeRFC3339 .CreatedAt}}" title="{{FormatTimeRFC822 .CreatedAt}}">{{TimeSince .CreatedAt}}</time>
@@ -36,7 +35,6 @@
<img class="status-profile-img" src="{{.Account.AvatarStatic}}" alt="avatar" />
</a>
<span class="status-dname"> {{EmojiFilter .Account.DisplayName .Account.Emojis}} </span>
- <img class="icon" src="{{GetIcon "retweeted" $.Ctx.DarkMode}}" alt="retweeted" />
<span> retweeted your post </span>
<span>
- <time datetime="{{FormatTimeRFC3339 .CreatedAt}}" title="{{FormatTimeRFC822 .CreatedAt}}">{{TimeSince .CreatedAt}}</time>
@@ -50,7 +48,6 @@
<img class="status-profile-img" src="{{.Account.AvatarStatic}}" alt="avatar" />
</a>
<span class="status-dname"> {{EmojiFilter .Account.DisplayName .Account.Emojis}} </span>
- <img class="icon" src="{{GetIcon "liked" $.Ctx.DarkMode}}" alt="liked" />
<span> liked your post </span>
<span>
- <time datetime="{{FormatTimeRFC3339 .CreatedAt}}" title="{{FormatTimeRFC822 .CreatedAt}}">{{TimeSince .CreatedAt}}</time>
diff --git a/templates/postform.tmpl b/templates/postform.tmpl
index ff2dfd9..51ac5e6 100644
--- a/templates/postform.tmpl
+++ b/templates/postform.tmpl
@@ -7,8 +7,8 @@
{{else}}
<label for="post-content" class="post-form-title"> New post </label>
{{end}}
- <a class="post-form-emoji-link" href="/emojis" target="_blank" title="emoji reference">
- <img class="icon post-emoji" src="{{GetIcon "smile-o" $.Ctx.DarkMode}}" alt="emojis" />
+ <a class="post-form-emoji-link" href="/emojis" target="_blank" title="emoji list">
+ emoji list
</a>
<div class="post-form-content-container">
<textarea id="post-content" name="content" class="post-content" cols="50" rows="5">{{if .ReplyContext}}{{.ReplyContext.ReplyContent}}{{end}}</textarea>
diff --git a/templates/status.tmpl b/templates/status.tmpl
index a6b28fa..3945cc8 100644
--- a/templates/status.tmpl
+++ b/templates/status.tmpl
@@ -6,7 +6,6 @@
<img class="status-profile-img" src="{{.Account.AvatarStatic}}" alt="avatar" />
</a>
<span class="status-dname"> {{EmojiFilter .Account.DisplayName .Account.Emojis}} </span>
- <img class="icon" src="{{GetIcon "retweeted" $.Ctx.DarkMode}}" alt="retweeted" />
retweeted
</div>
{{template "status" (WithContext .Reblog $.Ctx)}}
@@ -25,26 +24,18 @@
<a href="/user/{{.Account.ID}}" >
<span class="status-uname"> {{.Account.Acct}} </span>
</a>
- <a class="status-visibility">
- {{if eq .Visibility "public"}}
- <img class="icon" src="{{GetIcon "globe" $.Ctx.DarkMode}}" alt="Public" title="Public" />
- {{else if eq .Visibility "unlisted"}}
- <img class="icon" src="{{GetIcon "unlock-alt" $.Ctx.DarkMode}}" alt="Unlisted" title="Unlisted" />
- {{else if eq .Visibility "private"}}
- <img class="icon" src="{{GetIcon "lock" $.Ctx.DarkMode}}" alt="Private" title="Private" />
- {{else if eq .Visibility "direct"}}
- <img class="icon" src="{{GetIcon "envelope" $.Ctx.DarkMode}}" alt="Direct" title="Direct" />
- {{end}}
- </a>
+ <span class="status-visibility">
+ {{.Visibility}}
+ </span>
<a class="remote-link" href="{{.URL}}" target="_blank" title="source">
- <img class="icon" src="{{GetIcon "link" $.Ctx.DarkMode}}" alt="source" />
+ source
</a>
</div>
<div class="status-reply-container">
{{if .InReplyToID}}
<div class="status-reply-to">
<a class="status-reply-to-link" href="{{if not .ShowReplies}}/thread/{{.InReplyToID}}{{end}}#status-{{.InReplyToID}}">
- <img class="icon" src="{{GetIcon "mail-forward" $.Ctx.DarkMode}}" alt="reply to" /> reply to {{.Pleroma.InReplyToAccountAcct}}
+ reply to {{.Pleroma.InReplyToAccountAcct}}
</a>
</div>
{{if index .ReplyMap .ID}} <span class="status-reply-info-divider"> - </span> {{end}}
@@ -58,7 +49,9 @@
{{end}}
{{end}}
</div>
+ {{if .Content}}
<div class="status-content"> {{StatusContentFilter .SpoilerText .Content .Emojis .Mentions}} </div>
+ {{end}}
<div class="status-media-container">
{{range .MediaAttachments}}
{{if eq .Type "image"}}
@@ -90,35 +83,35 @@
</div>
<div class="status-action-container">
<div class="status-action">
- <a class="status-you" href="/thread/{{.ID}}?reply=true#status-{{.ID}}" title="reply">
- <img class="icon" src="{{GetIcon "reply" $.Ctx.DarkMode}}" alt="reply" />
+ <a href="/thread/{{.ID}}?reply=true#status-{{.ID}}" title="reply">
+ reply
</a>
<a class="status-reply-count" href="/thread/{{.ID}}#status-{{.ID}}" {{if $.Ctx.ThreadInNewTab}}target="_blank"{{end}}>
- {{DisplayInteractionCount .RepliesCount}}
+ {{if .RepliesCount}} ({{DisplayInteractionCount .RepliesCount}}) {{end}}
</a>
</div>
<div class="status-action">
{{if or (eq .Visibility "private") (eq .Visibility "direct")}}
<a class="status-retweet" title="this status cannot be retweeted">
- <img class="icon" src="{{GetIcon "retweet" $.Ctx.DarkMode}}" alt="retweet" />
+ retweet
</a>
{{else}}
{{if .Reblogged}}
<form class="status-retweet" data-action="unretweet" action="/unretweet/{{.ID}}" method="post">
<input type="hidden" name="csrf_token" value="{{$.Ctx.CSRFToken}}">
<input type="hidden" name="retweeted_by_id" value="{{.RetweetedByID}}">
- <input type="image" src="{{GetIcon "retweeted" $.Ctx.DarkMode}}" alt="undo retweet" class="icon" title="undo retweet">
+ <input type="submit" value="unretweet" class="btn-link" title="unretweet">
</form>
{{else}}
<form class="status-retweet" data-action="retweet" action="/retweet/{{.ID}}" method="post">
<input type="hidden" name="csrf_token" value="{{$.Ctx.CSRFToken}}">
<input type="hidden" name="retweeted_by_id" value="{{.RetweetedByID}}">
- <input type="image" src="{{GetIcon "retweet" $.Ctx.DarkMode}}" alt="retweet" class="icon" title="retweet">
+ <input type="submit" value="retweet" class="btn-link" title="retweet">
</form>
{{end}}
{{end}}
<a class="status-retweet-count" href="/retweetedby/{{.ID}}" title="click to see the the list">
- {{DisplayInteractionCount .ReblogsCount}}
+ {{if .ReblogsCount}} ({{DisplayInteractionCount .ReblogsCount}}) {{end}}
</a>
</div>
<div class="status-action">
@@ -126,17 +119,17 @@
<form class="status-like" data-action="unlike" action="/unlike/{{.ID}}" method="post">
<input type="hidden" name="csrf_token" value="{{$.Ctx.CSRFToken}}">
<input type="hidden" name="retweeted_by_id" value="{{.RetweetedByID}}">
- <input type="image" src="{{GetIcon "liked" $.Ctx.DarkMode}}" alt="unlike" class="icon" title="unlike">
+ <input type="submit" value="unlike" class="btn-link" title="unlike">
</form>
{{else}}
<form class="status-like" data-action="like" action="/like/{{.ID}}" method="post">
<input type="hidden" name="csrf_token" value="{{$.Ctx.CSRFToken}}">
<input type="hidden" name="retweeted_by_id" value="{{.RetweetedByID}}">
- <input type="image" src="{{GetIcon "star-o" $.Ctx.DarkMode}}" alt="like" class="icon" title="like">
+ <input type="submit" value="like" class="btn-link" title="like">
</form>
{{end}}
<a class="status-like-count" href="/likedby/{{.ID}}" title="click to see the the list">
- {{DisplayInteractionCount .FavouritesCount}}
+ {{if .FavouritesCount}} ({{DisplayInteractionCount .FavouritesCount}}) {{end}}
</a>
</div>
<div class="status-action">
diff --git a/templates/user.tmpl b/templates/user.tmpl
index bab24b2..ca8a1ad 100644
--- a/templates/user.tmpl
+++ b/templates/user.tmpl
@@ -15,7 +15,7 @@
<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">
- <img class="icon" src="{{GetIcon "link" $.Ctx.DarkMode}}" alt="link" />
+ source
</a>
</div>
<div>