diff options
| -rw-r--r-- | static/style.css | 67 | ||||
| -rw-r--r-- | templates/notification.tmpl | 23 | ||||
| -rw-r--r-- | templates/status.tmpl | 3 | ||||
| -rw-r--r-- | templates/userlist.tmpl | 2 |
4 files changed, 55 insertions, 40 deletions
diff --git a/static/style.css b/static/style.css index 9c05eff..9d4c94c 100644 --- a/static/style.css +++ b/static/style.css @@ -1,10 +1,11 @@ .status-container-container { - margin: 12px 0 12px -4px; + margin: 0 -4px 12px -4px; padding: 4px; border-left: 4px solid transparent; } -.status-container-container:target { +.status-container-container:target, +.status-container-container.unread { border-color: #777777; } @@ -20,7 +21,11 @@ margin: 4px 0; max-height: 600px; overflow: auto; - word-wrap: anywhere; + overflow-wrap: break-word; +} + +.status-name { + overflow-wrap: break-word; } .status-content p { @@ -40,7 +45,8 @@ } .status-media-container { - margin: 4px 0; + margin: 5px 0 -5px 0; + overflow: auto; } .status-profile-img-container { @@ -64,6 +70,8 @@ .status { display: inline-block; vertical-align: top; + flex: 1; + min-width: 0; } .status-dname { @@ -106,6 +114,7 @@ .page-title { font-size: 18pt; + margin: 8px 0; } .post-form { @@ -126,6 +135,7 @@ .retweet-info { margin: 0 0 4px 24px; + overflow-wrap: break-word; } .retweet-info .status-profile-img { @@ -159,16 +169,6 @@ font-size: 13pt; } -.notification-container { - margin: 16px 0 16px -4px; - padding: 0 4px; - border-left: 4px solid transparent; -} - -.notification-container.unread { - border-color: #777777; -} - .notification-info-text span { vertical-align: middle; } @@ -195,6 +195,10 @@ font-size: 10pt } +.status-reply-container { + word-break: break-all; +} + .status-reply-container .fa { font-size: 10pt; vertical-align: sub; @@ -252,7 +256,11 @@ } .user-profile-decription { - margin: 4px 0; + margin: 8px 0; +} + +.user-profile-decription p { + margin: 0; } .d-inline { @@ -301,12 +309,13 @@ a:hover, } .status-nsfw-overlay { - height: 100%; - width: 100%; background: black; position: absolute; top: 0; + bottom: 0; left: 0; + right: 0; + margin-bottom: 5px; } .img-link:hover .status-nsfw-overlay { @@ -347,6 +356,7 @@ img.emoji { min-width: 32px; vertical-align: middle; object-fit: contain; + margin: 0; } .status-dname img.emoji { @@ -390,7 +400,6 @@ img.emoji { } .user-list-container { - margin: 8px 0; } .user-list-item { @@ -444,7 +453,7 @@ img.emoji { } .search-form { - margin: 16px 0 16px 0; + margin: 12px 0; } .more-container { @@ -459,7 +468,6 @@ img.emoji { background-color: #ffffff; padding: 2px 4px; border: 1px solid #aaaaaa; - right: 0; } .more-container:hover .more-content { @@ -472,6 +480,12 @@ img.emoji { margin: 2px; } +.poll-form { + margin-top: 5px; + overflow: auto; + overflow-wrap: break-word; +} + .poll-form button[type=submit] { margin-top: 6px; } @@ -480,19 +494,22 @@ img.emoji { margin-top: 6px; } -.notification-title-container>* { - display: inline; +.notification-title-container { + margin: 8px 0; } -.notification-title { - font-size: 18pt; - margin-right: 8px; +.notification-text { + vertical-align: middle; } .notification-refresh { margin-right: 8px; } +.notification-read { + display: inline-block; +} + .no-data-found { margin: 12px 0; } diff --git a/templates/notification.tmpl b/templates/notification.tmpl index 059268a..10eaafc 100644 --- a/templates/notification.tmpl +++ b/templates/notification.tmpl @@ -1,15 +1,15 @@ {{with .Data}} {{template "header.tmpl" (WithContext .CommonData $.Ctx)}} <div class="notification-title-container"> - <div class="notification-title"> + <span class="page-title"> Notifications {{if and (not $.Ctx.AntiDopamineMode) (gt .UnreadCount 0)}} ({{.UnreadCount }}) {{end}} - </div> + </span> <a class="notification-refresh" href="/notifications" target="_self" accesskey="R" title="Refresh (R)">refresh</a> {{if .ReadID}} - <form action="/notifications/read?max_id={{.ReadID}}" method="post" target="_self"> + <form class="notification-read" action="/notifications/read?max_id={{.ReadID}}" method="post" target="_self"> <input type="hidden" name="csrf_token" value="{{$.Ctx.CSRFToken}}"> <input type="submit" value="read" class="btn-link" accesskey="C" title="Clear unread notifications (C)"> </form> @@ -17,7 +17,7 @@ </div> {{range .Notifications}} -<div class="notification-container {{if .Pleroma}}{{if not .Pleroma.IsSeen}}unread{{end}}{{end}}"> +<div class="status-container-container {{if .Pleroma}}{{if not .Pleroma.IsSeen}}unread{{end}}{{end}}"> {{if eq .Type "follow"}} <div class="notification-follow-container"> <div class="status-profile-img-container"> @@ -28,9 +28,8 @@ <div class="notification-follow"> <div class="notification-info-text"> <span class="status-dname"> {{EmojiFilter .Account.DisplayName .Account.Emojis}} </span> - <span> followed you </span> - <span> - - <time datetime="{{FormatTimeRFC3339 .CreatedAt}}" title="{{FormatTimeRFC822 .CreatedAt}}">{{TimeSince .CreatedAt}}</time> + <span class="notification-text"> followed you - + <time datetime="{{FormatTimeRFC3339 .CreatedAt}}" title="{{FormatTimeRFC822 .CreatedAt}}">{{TimeSince .CreatedAt}}</time> </span> </div> <div> @@ -50,9 +49,8 @@ <a href="/user/{{.Account.ID}}"> <span class="status-uname"> @{{.Account.Acct}} </span> </a> - <span> retweeted your post </span> - <span> - - <time datetime="{{FormatTimeRFC3339 .CreatedAt}}" title="{{FormatTimeRFC822 .CreatedAt}}">{{TimeSince .CreatedAt}}</time> + <span class="notification-text"> retweeted your post - + <time datetime="{{FormatTimeRFC3339 .CreatedAt}}" title="{{FormatTimeRFC822 .CreatedAt}}">{{TimeSince .CreatedAt}}</time> </span> </div> {{template "status" (WithContext .Status $.Ctx)}} @@ -65,9 +63,8 @@ <a href="/user/{{.Account.ID}}"> <span class="status-uname"> @{{.Account.Acct}} </span> </a> - <span> liked your post </span> - <span> - - <time datetime="{{FormatTimeRFC3339 .CreatedAt}}" title="{{FormatTimeRFC822 .CreatedAt}}">{{TimeSince .CreatedAt}}</time> + <span class="notification-text"> liked your post - + <time datetime="{{FormatTimeRFC3339 .CreatedAt}}" title="{{FormatTimeRFC822 .CreatedAt}}">{{TimeSince .CreatedAt}}</time> </span> </div> {{template "status" (WithContext .Status $.Ctx)}} diff --git a/templates/status.tmpl b/templates/status.tmpl index 438f023..432c9a6 100644 --- a/templates/status.tmpl +++ b/templates/status.tmpl @@ -89,6 +89,7 @@ {{if .Content}} <div class="status-content"> {{StatusContentFilter .SpoilerText .Content .Emojis .Mentions}} </div> {{end}} + {{if .MediaAttachments}} <div class="status-media-container"> {{range .MediaAttachments}} @@ -132,9 +133,9 @@ {{else}} <a href="{{.URL}}" target="_blank" title="{{.Description}}"> [attachment] </a> {{end}} - {{end}} </div> + {{end}} {{if .Poll}} <form class="poll-form" action="/vote/{{.Poll.ID}}" method="POST" target="_self"> <input type="hidden" name="csrf_token" value="{{$.Ctx.CSRFToken}}"> diff --git a/templates/userlist.tmpl b/templates/userlist.tmpl index ec8884d..0a83bf4 100644 --- a/templates/userlist.tmpl +++ b/templates/userlist.tmpl @@ -1,5 +1,5 @@ {{with .Data}} -<div class="user-list-container"> +<div> {{range .}} <div class="user-list-item"> <div class="user-list-profile-img"> |