aboutsummaryrefslogtreecommitdiff
diff options
context:
space:
mode:
authorr <r@freesoftwareextremist.com>2020-10-25 11:36:00 +0000
committerr <r@freesoftwareextremist.com>2020-10-30 16:06:35 +0000
commitf4e85c571ae92cef7c8cd47f0ee7467bf35d67a2 (patch)
tree476e47aead60665c865d11fce3a2c3c0d783de5d
parentc733ab970a7375d2c1a17488950ef7f69b041696 (diff)
downloadbloat-f4e85c571ae92cef7c8cd47f0ee7467bf35d67a2.tar.gz
bloat-f4e85c571ae92cef7c8cd47f0ee7467bf35d67a2.zip
Fix CSS issues
-rw-r--r--static/style.css67
-rw-r--r--templates/notification.tmpl23
-rw-r--r--templates/status.tmpl3
-rw-r--r--templates/userlist.tmpl2
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">