commit 768832a72497e7d63e83eaa213781d6d73f5ada5
parent 3ef48b7275568b44dba086791116eec3329eff62
Author: n0tr1v <n0tr1v@protonmail.com>
Date: Thu, 12 Jan 2023 16:46:04 -0800
css
Diffstat:
1 file changed, 64 insertions(+), 34 deletions(-)
diff --git a/pkg/web/public/views/pages/chat-messages.gohtml b/pkg/web/public/views/pages/chat-messages.gohtml
@@ -148,6 +148,23 @@
.spacer36 { display: inline-block; width: 36px; }
.spacer56 { display: inline-block; width: 56px; }
.d-inline { display: inline; }
+ .o-wrap { overflow-wrap: break-word; }
+ .f-def-clr { color: #888; }
+ .f-orange-clr { color: orange; }
+ .f-white-clr, .f-white-clr:hover { color: white; }
+ .line-through { text-decoration: line-through; }
+ .hb-row { background-color: rgba(0, 0, 0, 0.7); }
+ .own-highlight { background-color: rgba(255,241,176,0.05); }
+ .read-marker { border-top: {{ $.AuthUser.ChatReadMarkerSize }}px solid {{ $.AuthUser.ChatReadMarkerColor }}; }
+ #msgs { {{ if not .AuthUser.HideRightColumn }}width: calc(100% - 170px); float: left; {{ end }}line-height: 1.2; }
+ #no-msg { padding-left: 10px; color: #ddd; }
+ #rgt-pane { width: 150px; height: 100%; float: left; margin-left: 20px; position: fixed; right: 0; overflow-y: auto; line-height: 1.15; }
+ .rgt-title { font-weight: bolder; color: #ced4da; }
+ .mb-20px { margin-bottom: 20px; }
+ .mb-30px { margin-bottom: 30px; }
+ .mt-5px { margin-top: 5px; }
+ .mt-10px { margin-top: 10px; }
+ .notif, .notif:hover { color: #e74c3c; }
</style>
</head>
<body>
@@ -168,18 +185,15 @@
</div>
{{ end }}
- <div style="{{ if not .AuthUser.HideRightColumn }}width: calc(100% - 170px); float: left; {{ end }}line-height: 1.2;">
+ <div id="msgs">
{{ $readMarkerRendered := false }}
{{ range $idx, $e := .Data.Messages }}
{{- if (.UserCanSee $.AuthUser) -}}
- <div class="msg" style="
- {{- if and (or .User.IsHellbanned .IsHellbanned) $.AuthUser.DisplayHellbanned -}} background-color: rgba(0, 0, 0, 0.7);
- {{- else if and (eq $.AuthUser.ID .User.ID) $.AuthUser.HighlightOwnMessages -}} background-color: rgba(255,241,176,0.05);{{- end -}}
-
+ <div class="msg
+ {{- if and (or .User.IsHellbanned .IsHellbanned) $.AuthUser.DisplayHellbanned }} hb-row
+ {{- else if and (eq $.AuthUser.ID .User.ID) $.AuthUser.HighlightOwnMessages }} own-highlight{{- end -}}
{{- if and $.AuthUser.ChatReadMarkerEnabled (.CreatedAt.Before $.Data.ReadMarker.ReadAt) (not $readMarkerRendered) -}}
- {{- if gt $idx 0 -}}
- border-top: {{ $.AuthUser.ChatReadMarkerSize }}px solid {{ $.AuthUser.ChatReadMarkerColor }};
- {{- end -}}
+ {{- if gt $idx 0 }} read-marker{{- end -}}
{{ $readMarkerRendered = true }}
{{- end -}}
">
@@ -195,7 +209,7 @@
{{- if $.AuthUser.DisplayDeleteButton -}}
<form method="post" action="/api/v1/chat/messages/delete/{{ .UUID }}" class="d-inline">
<input type="hidden" name="csrf" value="{{ $.CSRF }}" />
- <button class="mod-btn delete_msg_btn" style="color: orange;" title="delete"></button>
+ <button class="mod-btn delete_msg_btn f-orange-clr" title="delete"></button>
</form>
{{- end -}}
{{- else if $.AuthUser.IsModerator }}
@@ -215,14 +229,14 @@
{{- else -}}
<form method="post" action="/api/v1/users/{{ .UserID }}/toggle-hellban" class="d-inline">
<input type="hidden" name="csrf" value="{{ $.CSRF }}" />
- <button class="mod-btn hb_btn" style="color: orange; {{ if .User.IsHellbanned }}text-decoration: line-through;{{ end }}" title="hellban"></button>
+ <button class="mod-btn hb_btn f-orange-clr{{ if .User.IsHellbanned }} line-through{{ end }}" title="hellban"></button>
</form>
{{- end -}}
{{- end -}}
{{- if $.AuthUser.DisplayKickButton -}}
<form method="post" action="/api/v1/users/{{ .UserID }}/kick" class="d-inline">
<input type="hidden" name="csrf" value="{{ $.CSRF }}" />
- <button class="mod-btn k_btn" style="color: orange;" title="kick"></button>
+ <button class="mod-btn k_btn f-orange-clr" title="kick"></button>
</form>
{{- end -}}
{{- else -}}
@@ -252,9 +266,9 @@
<a href="/api/v1/chat/top-bar/{{ $.Data.RoomName }}?quote={{ .UUID }}{{ $.Data.TopBarQueryParams | safeURL }}" target="iframe1" class="date date-link" title="{{ .CreatedAt.Format "01-02 15:04:05" }}">{{ .CreatedAt.Format $.Data.DateFormat }}</a>
{{- end -}}
{{- if and .ToUserID (ne .ToUser.ID $.AuthUser.ID) -}}
- <a href="/u/{{ .ToUser.Username }}" target="_blank" style="color: #888;">-</a>
+ <a href="/u/{{ .ToUser.Username }}" target="_blank" class="f-def-clr">-</a>
{{- else -}}
- <a href="/u/{{ .User.Username }}" target="_blank" style="color: #888;">-</a>
+ <a href="/u/{{ .User.Username }}" target="_blank" class="f-def-clr">-</a>
{{- end -}}
{{- if .ToUserID -}}
@@ -278,8 +292,8 @@
{{- else if .System -}}
{{- else if .IsMe -}}
{{- else -}}
- {{- if .Moderators -}}<span class="sysmsg">[<a href="/api/v1/chat/top-bar/{{ $.Data.RoomName }}?m=1{{ $.Data.TopBarQueryParams | safeURL }}" target="iframe1" class="sysmsg" style="color: white;">M</a>]</span> {{- end -}}
- {{- if .GroupID -}}<span class="sysmsg">[<a href="/api/v1/chat/top-bar/{{ $.Data.RoomName }}?g={{ .Group.Name }}{{ $.Data.TopBarQueryParams | safeURL }}" target="iframe1" class="sysmsg" style="color: white;">{{ .Group.Name }}</a>]</span> {{- end -}}
+ {{- if .Moderators -}}<span class="sysmsg">[<a href="/api/v1/chat/top-bar/{{ $.Data.RoomName }}?m=1{{ $.Data.TopBarQueryParams | safeURL }}" target="iframe1" class="sysmsg f-white-clr">M</a>]</span> {{- end -}}
+ {{- if .GroupID -}}<span class="sysmsg">[<a href="/api/v1/chat/top-bar/{{ $.Data.RoomName }}?g={{ .Group.Name }}{{ $.Data.TopBarQueryParams | safeURL }}" target="iframe1" class="sysmsg f-white-clr">{{ .Group.Name }}</a>]</span> {{- end -}}
{{- if eq .User.ID $.AuthUser.ID -}}
{{- if .CanBeEdited -}}
<a {{ .User.GenerateChatStyle | attr }} href="/api/v1/chat/top-bar/{{ $.Data.RoomName }}?e={{ .CreatedAt.Format "15:04:05" }}{{ $.Data.TopBarQueryParams | safeURL }}" target="iframe1">{{ .User.Username }}</a>
@@ -297,7 +311,7 @@
{{- end -}}
{{- if and $.AuthUser.CanSeeHB (or .IsHellbanned .User.IsHellbanned) (not .ToUserID) -}}
- <a href="/api/v1/chat/top-bar/{{ $.Data.RoomName }}?hbm=1{{ $.Data.TopBarQueryParams | safeURL }}" target="iframe1" style="color: #888;">-</a>
+ <a href="/api/v1/chat/top-bar/{{ $.Data.RoomName }}?hbm=1{{ $.Data.TopBarQueryParams | safeURL }}" target="iframe1" class="f-def-clr">-</a>
{{- else -}}
-
{{- end -}}
@@ -307,9 +321,9 @@
<span class="sysmsg">{{ .Message | safe }}</span>
{{- else -}}
{{- if .IsMe -}}
- {{- if .Moderators -}}<span class="sysmsg">[<a href="/api/v1/chat/top-bar/{{ $.Data.RoomName }}?m=1{{ $.Data.TopBarQueryParams | safeURL }}" target="iframe1" class="sysmsg" style="color: white;">M</a>]</span> {{- end -}}
- {{- if .GroupID -}}<span class="sysmsg">[<a href="/api/v1/chat/top-bar/{{ $.Data.RoomName }}?g={{ .Group.Name }}{{ $.Data.TopBarQueryParams | safeURL }}" target="iframe1" class="sysmsg" style="color: white;">{{ .Group.Name }}</a>]</span> {{- end -}}
- <span style="overflow-wrap: break-word;"><span {{ .User.GenerateChatStyle | attr }}>
+ {{- if .Moderators -}}<span class="sysmsg">[<a href="/api/v1/chat/top-bar/{{ $.Data.RoomName }}?m=1{{ $.Data.TopBarQueryParams | safeURL }}" target="iframe1" class="sysmsg f-white-clr">M</a>]</span> {{- end -}}
+ {{- if .GroupID -}}<span class="sysmsg">[<a href="/api/v1/chat/top-bar/{{ $.Data.RoomName }}?g={{ .Group.Name }}{{ $.Data.TopBarQueryParams | safeURL }}" target="iframe1" class="sysmsg f-white-clr">{{ .Group.Name }}</a>]</span> {{- end -}}
+ <span class="o-wrap"><span {{ .User.GenerateChatStyle | attr }}>
{{- if eq .User.ID $.AuthUser.ID -}}
{{- if .CanBeEdited -}}
<a {{ .User.GenerateChatStyle | attr }} href="/api/v1/chat/top-bar/{{ $.Data.RoomName }}?e={{ .CreatedAt.Format "15:04:05" }}" target="iframe1">{{ .User.Username }}</a>
@@ -328,22 +342,22 @@
{{ .TrimMe | safe }}
</span></span>
{{- else -}}
- <span {{ .User.GenerateChatStyle | attr }}><span style="overflow-wrap: break-word;">{{ .Message | safe }}</span></span>
+ <span {{ .User.GenerateChatStyle | attr }}><span class="o-wrap">{{ .Message | safe }}</span></span>
{{- end -}}
{{- end -}}
</div>
{{- end -}}
{{- else -}}
- <div style="color: #ddd;"><em>No message yet</em></div>
+ <div id="no-msg"><em>No message yet</em></div>
{{- end -}}
</div>
{{- if not .AuthUser.HideRightColumn -}}
- <div style="width: 150px; height: 100%; float: left; margin-left: 20px; position: fixed; right: 0; overflow-y: auto; line-height: 1.15; ">
- <div style="margin-bottom: 20px;">
- <div style="font-weight: bolder; color: #ced4da;">Inbox (<a href="/settings/inbox" target="_top"{{ if gt .Data.InboxCount 0 }}style="color: #e74c3c;"{{ end }}>{{ .Data.InboxCount }}</a>)</div>
+ <div id="rgt-pane">
+ <div class="mb-20px">
+ <div class="rgt-title">Inbox (<a href="/settings/inbox" target="_top"{{ if gt .Data.InboxCount 0 }}class="notif"{{ end }}>{{ .Data.InboxCount }}</a>)</div>
</div>
- <div style="margin-bottom: 20px;">
- <div style="font-weight: bolder; color: #ced4da;">Rooms:</div>
+ <div class="mb-20px">
+ <div class="rgt-title">Rooms:</div>
{{- range .Data.OfficialRooms -}}
{{- if eq .Name "club" -}}
{{- if $.AuthUser.IsClubMember -}}
@@ -359,16 +373,16 @@
{{- end -}}
{{- if .Data.SubscribedRooms -}}
- <div style="margin-top: 10px;"></div>
+ <div class="mt-10px"></div>
{{ range .Data.SubscribedRooms }}
<div><a href="/chat/{{ .Name }}" target="_top"{{ if .IsUnread }} class="unread_room"{{ end }}>#{{ .Name }}</a></div>
{{ end }}
{{- end -}}
- <div style="margin-top: 5px;"><a href="/rooms" target="_top">[...]</a></div>
+ <div class="mt-5px"><a href="/rooms" target="_top">[...]</a></div>
</div>
- <div style="margin-bottom: 20px">
- <div style="font-weight: bolder; color: #ced4da;">In this room:</div>
+ <div class="mb-20px">
+ <div class="rgt-title">In this room:</div>
{{- range .Data.Members -}}
{{- if eq .Username $.AuthUser.Username -}}
<div>
@@ -380,7 +394,15 @@
{{- else -}}
{{- if or (not .IsHellbanned) (eq $.AuthUser.ID .UserID) (and .IsHellbanned $.AuthUser.IsHellbanned) $.AuthUser.DisplayHellbanned -}}
<div>
- <a href="/api/v1/chat/top-bar/{{ $.Data.RoomName }}?tag={{ .Username }}{{ $.Data.TopBarQueryParams | safeURL }}" target="iframe1" style="color: {{ .Color }};{{ if and (.IsHellbanned) $.AuthUser.DisplayHellbanned }} background-color: rgba(0, 0, 0, 0.7);{{ end }}">{{ .Username | first }}</a><a href="/api/v1/chat/top-bar/{{ $.Data.RoomName }}?pm={{ .Username }}{{ $.Data.TopBarQueryParams | safeURL }}" target="iframe1" style="color: {{ .Color }};{{ if and (.IsHellbanned) $.AuthUser.DisplayHellbanned }} background-color: rgba(0, 0, 0, 0.7);{{ end }}">{{ .Username | rest }}</a>
+ <a href="/api/v1/chat/top-bar/{{ $.Data.RoomName }}?tag={{ .Username }}{{ $.Data.TopBarQueryParams | safeURL }}"
+ target="iframe1"
+ {{ if and (.IsHellbanned) $.AuthUser.DisplayHellbanned }} class="hb-row"{{ end }}
+ style="color: {{ .Color }};">{{ .Username | first }}</a>
+ {{- /* hack to remove spaces between links */ -}}
+ <a href="/api/v1/chat/top-bar/{{ $.Data.RoomName }}?pm={{ .Username }}{{ $.Data.TopBarQueryParams | safeURL }}"
+ target="iframe1"
+ {{ if and (.IsHellbanned) $.AuthUser.DisplayHellbanned }} class="hb-row"{{ end }}
+ style="color: {{ .Color }};">{{ .Username | rest }}</a>
{{- if .AfkIndicatorEnabled -}}
<small class="afk-indicator">afk</small>
{{- end -}}
@@ -390,9 +412,9 @@
{{- end -}}
</div>
{{- if or .Data.VisibleMemberInChat $.AuthUser.DisplayHellbanned -}}
- <div style="margin-bottom: 30px;">
+ <div class="mb-30px">
{{- if .Data.MembersInChat -}}
- <div style="font-weight: bolder; color: #ced4da;">In other rooms:</div>
+ <div class="rgt-title">In other rooms:</div>
{{- range .Data.MembersInChat -}}
{{- if eq .Username $.AuthUser.Username -}}
<div>
@@ -404,7 +426,15 @@
{{- else -}}
{{- if or (not .IsHellbanned) (eq $.AuthUser.ID .UserID) (and .IsHellbanned $.AuthUser.IsHellbanned) $.AuthUser.DisplayHellbanned -}}
<div>
- <a href="/api/v1/chat/top-bar/{{ $.Data.RoomName }}?tag={{ .Username }}{{ $.Data.TopBarQueryParams | safeURL }}" target="iframe1" style="color: {{ .Color }};{{ if and (.IsHellbanned) $.AuthUser.DisplayHellbanned }} background-color: rgba(0, 0, 0, 0.7);{{ end }}">{{ .Username | first }}</a><a href="/api/v1/chat/top-bar/{{ $.Data.RoomName }}?pm={{ .Username }}{{ $.Data.TopBarQueryParams | safeURL }}" target="iframe1" style="color: {{ .Color }};{{ if and (.IsHellbanned) $.AuthUser.DisplayHellbanned }} background-color: rgba(0, 0, 0, 0.7);{{ end }}">{{ .Username | rest }}</a>
+ <a href="/api/v1/chat/top-bar/{{ $.Data.RoomName }}?tag={{ .Username }}{{ $.Data.TopBarQueryParams | safeURL }}"
+ target="iframe1"
+ {{ if and (.IsHellbanned) $.AuthUser.DisplayHellbanned }}class="hb-row"{{ end }}
+ style="color: {{ .Color }};">{{ .Username | first }}</a>
+ {{- /* hack to remove spaces between links */ -}}
+ <a href="/api/v1/chat/top-bar/{{ $.Data.RoomName }}?pm={{ .Username }}{{ $.Data.TopBarQueryParams | safeURL }}"
+ target="iframe1"
+ {{ if and (.IsHellbanned) $.AuthUser.DisplayHellbanned }}class="hb-row"{{ end }}
+ style="color: {{ .Color }};">{{ .Username | rest }}</a>
{{- if .AfkIndicatorEnabled -}}
<small class="afk-indicator">afk</small>
{{- end -}}
