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