Stylize the Messages view

This commit is contained in:
Noah Petherbridge 2023-12-25 22:13:03 -08:00
parent cadb759ff4
commit d808741752
2 changed files with 51 additions and 29 deletions

View File

@ -8,6 +8,10 @@ abbr {
cursor: not-allowed; cursor: not-allowed;
} }
.cursor-pointer {
cursor: pointer;
}
img { img {
/* https://stackoverflow.com/questions/12906789/preventing-an-image-from-being-draggable-or-selectable-without-using-js */ /* https://stackoverflow.com/questions/12906789/preventing-an-image-from-being-draggable-or-selectable-without-using-js */
user-drag: none; user-drag: none;

View File

@ -10,7 +10,7 @@
</h1> </h1>
<h2 class="subtitle"> <h2 class="subtitle">
{{if eq .Box "threads"}} {{if eq .Box "threads"}}
Threads Conversation Threads
{{else if eq .Box "sent"}} {{else if eq .Box "sent"}}
Sent Sent
{{else}} {{else}}
@ -234,34 +234,52 @@
</div> </div>
{{end}} {{end}}
<ul class="menu-list block"> <table class="table is-striped is-fullwidth is-hoverable">
{{range .Messages}} <tbody>
<li> {{range .Messages}}
<a href="/messages/read/{{.ID}}"> <tr>
<div> <td class="cursor-pointer" onclick="window.location='/messages/read/{{.ID}}'">
{{if eq $Root.Box "sent"}} <div class="columns is-mobile is-gapless mb-0">
{{$User := $UserMap.Get .TargetUserID}} {{if eq $Root.Box "sent"}}
<strong>Sent to {{$User.Username}}</strong> {{$User := $UserMap.Get .TargetUserID}}
{{else}} <div class="column is-narrow">
{{$User := $UserMap.Get .SourceUserID}} <strong class="has-text-success-dark">Sent To</strong>
<strong>From {{$User.Username}}</strong> </div>
{{end}} <div class="column is-narrow mx-2">
{{if not .Read}} {{template "avatar-24x24" $User}}
<span class="tag is-success">{{if eq $Root.Box "sent"}}UNREAD{{else}}NEW{{end}}</span> </div>
{{end}} <div class="column has-text-success-dark">{{$User.Username}}</div>
</div> {{else}}
<div class="my-1"> {{$User := $UserMap.Get .SourceUserID}}
<em> <div class="column is-narrow">
{{Substring .Message 48}}… <strong class="has-text-info-dark">From</strong>
</em> </div>
</div> <div class="column is-narrow mx-2">
<div> {{template "avatar-24x24" $User}}
Sent {{.CreatedAt.Format "2006-01-02 15:04:05"}} </div>
</div> <div class="column has-text-info-dark">{{$User.Username}}</div>
</a> {{end}}
</li> </div>
{{end}} <div class="my-1">
</ul> <a href="/messages/read/{{.ID}}" class="has-text-dark">
<em>
{{Substring .Message 48}}{{if gt (len .Message) 48}}…{{end}}
</em>
</a>
</div>
<div>
<a href="/messages/read/{{.ID}}" class="has-text-dark">
Sent {{.CreatedAt.Format "2006-01-02 15:04:05"}}
{{if not .Read}}
<span class="tag is-success">{{if eq $Root.Box "sent"}}UNREAD{{else}}NEW{{end}}</span>
{{end}}
</a>
</div>
</td>
</tr>
{{end}}
</tbody>
</table>
<!-- Pager footer --> <!-- Pager footer -->
<div class="block"> <div class="block">