Fix CSS issues
authorr <r@freesoftwareextremist.com>
Sun, 25 Oct 2020 11:36:00 +0000 (11:36 +0000)
committerr <r@freesoftwareextremist.com>
Fri, 30 Oct 2020 16:06:35 +0000 (16:06 +0000)
static/style.css
templates/notification.tmpl
templates/status.tmpl
templates/userlist.tmpl

index 9c05effd52cfd2d9ec008cf30dc7976e91f7cac2..9d4c94cb2593f853d45e6511ed1d446db219aae1 100644 (file)
@@ -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;
 }
 
        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 {
 
 .page-title {
        font-size: 18pt;
+       margin: 8px 0;
 }
 
 .post-form {
 
 .retweet-info {
        margin: 0 0 4px 24px;
+       overflow-wrap: break-word;
 }
 
 .retweet-info .status-profile-img {
        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;
 }
        font-size: 10pt
 }
 
+.status-reply-container {
+       word-break: break-all;
+}
+
 .status-reply-container .fa {
        font-size: 10pt;
        vertical-align: sub;
 }
 
 .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;
 }
index 059268a989ebfeb75f1d76b5a8568ce1f5bf0d3f..10eaafcb4d0110ec7c2d5042b507aa5c53218a85 100644 (file)
@@ -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)}}
index 438f023e6fcee58daec87dcca3ecf53b05a6df22..432c9a6934da7e09eaf53191a1df7400123789fe 100644 (file)
@@ -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}}
 
                                {{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}}">
index ec8884d5389be44b910596fb73f20dce5705e865..0a83bf4960d6eaa90c15d4df421cb1128dfb2238 100644 (file)
@@ -1,5 +1,5 @@
 {{with .Data}}
-<div class="user-list-container">
+<div>
        {{range .}}
        <div class="user-list-item">
                <div class="user-list-profile-img">