Styling, loading bar, rm tooltip "tippy" lib due to perf/bugs

nickheyer · Jun 30, 2024 · 623f2c6 · 623f2c6
1 parent a0be5d9
commit 623f2c6
Show file tree

Hide file tree

Showing 18 changed files with 66 additions and 30 deletions.
diff --git a/public/css/chat.css b/public/css/chat.css
@@ -15,11 +15,11 @@
 }
 
 .divider:not(:empty)::before {
- margin: 0 0.4em
+ margin: 0 0.4em 0 1em
 }
 
 .divider:not(:empty)::after {
- margin: 0 0.4em
+ margin: 0 1em 0 0.4em
 }
 
 .dividerText {
@@ -50,6 +50,17 @@
  color: #72767d;
  font-size: 14px;
  }
+
+ &:has(.chatMessageRow) {
+ .noMessagesDiv {
+ display: none;
+ }
+ }
+
+ .noMessageText {
+ color: #72767d;
+ font-size: 14px;
+ }
 }
 
 .messageChannelHeader {
@@ -152,7 +163,7 @@
 
  .chatContentContainer {
  display: inline-flex;
- margin: 0 2%;
+ margin: 0 4%;
  }
 
  * {
@@ -195,6 +206,7 @@
  color: var(--white);
  opacity: 0.25;
  font-size: 16px;
+ min-width: 4em;
  }
  }
 

diff --git a/public/css/misc.css b/public/css/misc.css
@@ -0,0 +1,28 @@
+.loading-bar {
+ z-index: 9999;
+ opacity: 0;
+ position: fixed;
+ top: 0;
+ left: 0;
+ width: 100%;
+ height: 4px;
+ background: linear-gradient(90deg, transparent,
+ #000, transparent,
+ #000, transparent
+ );
+}
+
+.htmx-request.loading-bar {
+ opacity: 1;
+ animation: fadeIn 2s linear forwards, slide 0.8s ease-in-out infinite;
+}
+@keyframes slide {
+ 0% { transform: translateX(-100%); }
+ 100% { transform: translateX( 100%); }
+}
+
+@keyframes fadeIn {
+ 0% { opacity: 0; }
+ 50% { opacity: 0; }
+ 100% { opacity: 1; }
+}
diff --git a/public/css/style.css b/public/css/style.css
@@ -7,3 +7,5 @@
 @import 'members.css';
 @import 'userbox.css';
 @import 'mobile.css';
+@import 'misc.css';
+
diff --git a/public/js/source.js b/public/js/source.js
@@ -61,14 +61,6 @@ htmx.on("htmx:load", function () {
  const inviteModals = document.querySelectorAll('[data-invite]');
  Array.from(inviteModals).forEach(bindInvites);
 
- tippy('[data-tippy-content]', {
- interactiveDebounce: 75,
- offset: [0, 10],
- onTrigger(instance) {
- instance.hideWithInteractivity('mouseleave')
- }
- });
-
  const serverBubbleContainer = document.getElementById('serverBubbleContainer');
  const serverBubbleSortable = new Sortable(serverBubbleContainer, {
  animation: 150,

diff --git a/src/server/api/sidebar.js b/src/server/api/sidebar.js
@@ -40,6 +40,7 @@ async function changeActiveChannel(ctx) {
  const active_channel_id = `${ctx.params.id}`;
  const messages = await ctx.core.updateMessages(active_channel_id, state);
  await ctx.core.refreshUI(messages);
+ await ctx.deferToWS();
 }
 
 module.exports = {

diff --git a/src/server/views/components/chat/discordMessage.pug b/src/server/views/components/chat/discordMessage.pug
@@ -1,5 +1,5 @@
 - var rowColor = accentColor || 'ffffff'
-- var rowColorStyle = `background-color: #${rowColor}07; border-left: #${rowColor}30 5px solid`
+- var rowColorStyle = `background-color: #${rowColor}07; box-shadow: inset 5px 0 0 #${rowColor}30;`
 .messageWrapper(hx-swap-oob="beforeend:#chatLog")
  .chatMessageRow(
  class=isClient ? "botMsg" : "userMsg"

diff --git a/src/server/views/components/chat/discordMessageShard.pug b/src/server/views/components/chat/discordMessageShard.pug
@@ -1,12 +1,14 @@
 - var avatarUrl = user.avatar_url
-- var accentColor = `#${user.accent_color}`
+- var accentColor = `#${user.accent_color || 'ffffff'}`
 - var isBot = user.is_bot
 - var isClient = user.is_client
 - var username = user.username
 - var timeStamp = created_at 
 - var messageText = content
+- var rowColorStyle = `background-color: ${accentColor}03;`
 .chatMessageRow(
  class=isClient ? "botMsg" : "userMsg"
+ style=rowColorStyle
 )
 
  .chatContentContainer

diff --git a/src/server/views/components/chat/messageContainer.pug b/src/server/views/components/chat/messageContainer.pug
@@ -10,3 +10,7 @@
  .endOfMessagesDiv.divider
  p.endOfMessagesTime
  | !{eomStamp || "Previously..."}
+ else
+ .noMessagesDiv.divider
+ p.noMessageText
+ | No messages in here!
diff --git a/src/server/views/components/componentLayout.pug b/src/server/views/components/componentLayout.pug
@@ -1,3 +1,4 @@
+.loading-bar
 include sidebar/sidebarLayout
 include chat/chatLayout
 include members/membersLayout
diff --git a/src/server/views/components/sidebar/channels/chatChannelCreateInviteButton.pug b/src/server/views/components/sidebar/channels/chatChannelCreateInviteButton.pug
@@ -4,7 +4,7 @@ svg(
  fill="currentColor"
  xmlns="http://www.w3.org/2000/svg"
  role="img"
- data-tippy-content='Create Invite'
+ aria-label='Create Invite'
 )
  path(fill="none" d="M0 0h24v24H0z")
  path(d="M15 12c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm-9-2V7H4v3H1v2h3v3h2v-3h3v-2H6zm9 4c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4z")
diff --git a/src/server/views/components/sidebar/channels/chatChannelSettingsButton.pug b/src/server/views/components/sidebar/channels/chatChannelSettingsButton.pug
@@ -4,7 +4,7 @@ svg(
  fill="currentColor"
  xmlns="http://www.w3.org/2000/svg"
  role="img"
- data-tippy-content='Channel Settings'
+ aria-label='Channel Settings'
 )
  path(fill="none" d="M0 0h24v24H0V0z")
  path(d="M19.14 12.94c.04-.3.06-.61.06-.94 0-.32-.02-.64-.07-.94l2.03-1.58a.49.49 0 00.12-.61l-1.92-3.32a.488.488 0 00-.59-.22l-2.39.96c-.5-.38-1.03-.7-1.62-.94l-.36-2.54a.484.484 0 00-.48-.41h-3.84c-.24 0-.43.17-.47.41l-.36 2.54c-.59.24-1.13.57-1.62.94l-2.39-.96c-.22-.08-.47 0-.59.22L2.74 8.87c-.12.21-.08.47.12.61l2.03 1.58c-.05.3-.09.63-.09.94s.02.64.07.94l-2.03 1.58a.49.49 0 00-.12.61l1.92 3.32c.12.22.37.29.59.22l2.39-.96c.5.38 1.03.7 1.62.94l.36 2.54c.05.24.24.41.48.41h3.84c.24 0 .44-.17.47-.41l.36-2.54c.59-.24 1.13-.56 1.62-.94l2.39.96c.22.08.47 0 .59-.22l1.92-3.32c.12-.22.07-.47-.12-.61l-2.01-1.58zM12 15.6c-1.98 0-3.6-1.62-3.6-3.6s1.62-3.6 3.6-3.6 3.6 1.62 3.6 3.6-1.62 3.6-3.6 3.6z")
diff --git a/src/server/views/components/sidebar/channels/chatChannelsHeader.pug b/src/server/views/components/sidebar/channels/chatChannelsHeader.pug
@@ -7,7 +7,7 @@
  role="img"
  fill="currentColor"
  xmlns="http://www.w3.org/2000/svg"
- data-tippy-content='Add Channel'
+ aria-label='Add Channel'
  )
  path(fill="none" d="M0 0h24v24H0z")
  path(d="M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z")
diff --git a/src/server/views/components/sidebar/channels/settingsChannelsHeader.pug b/src/server/views/components/sidebar/channels/settingsChannelsHeader.pug
@@ -7,7 +7,7 @@
  role="img"
  fill="currentColor"
  xmlns="http://www.w3.org/2000/svg"
- data-tippy-content='Add Setting To Quick Access'
+ aria-label='Add Setting To Quick Access'
  )
  path(fill="none" d="M0 0h24v24H0z")
  path(d="M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z")
diff --git a/src/server/views/components/sidebar/servers/serverBubble.pug b/src/server/views/components/sidebar/servers/serverBubble.pug
@@ -1,9 +1,8 @@
 div(
- class=serverActive ? 'server active' : 'server'
+ class=`${serverActive ? 'server active' : 'server'}`
  hx-get=!serverActive && `/change-active-server/${id}`
  hx-select-oob=!serverActive && "#serverSelector,#guildNameBanner"
- data-tippy-content=serverName
- data-tippy-placement='right'
+ aria-label=serverName
 )
  input(type='hidden' name='item' value=id)
 

diff --git a/src/server/views/components/sidebar/userControls/botPowerButton.pug b/src/server/views/components/sidebar/userControls/botPowerButton.pug
@@ -4,8 +4,7 @@ div.botPowerIcon#botPowerToggle(
  hx-swap="none"
  hx-swap-oob="outerHTML"
  data-confirm=`Turn Discord bot ${state.discord_state ? 'off' : 'on'}?`
- data-tippy-content=`Turn Discord bot ${state.discord_state ? 'off' : 'on'}`
- data-tippy-placement='top'
+ aria-label=`Turn Discord bot ${state.discord_state ? 'off' : 'on'}`
 )
  svg(aria-hidden="false" viewBox="0 0 16 16")
  path(d="m5.6836 1.9609-0.26953 0.04687c-0.074 0.013-1.8361 0.32913-3.2461 1.4531-0.817 0.746-2.168 4.8121-2.168 8.0391v0.13477l0.06641 0.11523c1.026 1.783 3.809 2.229 4.498 2.25l0.28321 0.00977 1.0586-1.6504-0.06445-0.04102c0.596 0.103 1.3052 0.18164 2.1582 0.18164 0.827 0 1.5185-0.07287 2.1035-0.17187l1.043 1.6797 0.28907-0.00781c0.689-0.021 3.472-0.467 4.498-2.25l0.06641-0.11523v-0.13477c0-3.227-1.3504-7.2936-2.1914-8.0606-1.385-1.101-3.1467-1.4186-3.2207-1.4316l-0.26953-0.04687-0.18555 0.19922c-0.051 0.054-0.44492 0.49993-0.66992 0.96093-0.666-0.105-1.2079-0.12109-1.4629-0.12109-0.254 0-0.79498 0.01905-1.459 0.12305-0.226-0.461-0.62283-0.90889-0.67383-0.96289l-0.1836-0.19922zm-0.36914 1.0938c0.078 0.098 0.15757 0.2074 0.22657 0.3164 0.179 0.331 0.32064 0.59977 0.43164 0.88477 0.963-0.237 1.7983-0.25586 2.0273-0.25586 0.232 0 1.0932 0.01958 2.0762 0.26758l0.41211-0.92774c-3e-3 -1e-3 -0.00481-9.5e-4 -0.00781-0.00195 0.064-0.097 0.13412-0.1952 0.20312-0.2832 0.504 0.125 1.6067 0.45653 2.4727 1.1445 0.439 0.401 1.8028 3.9112 1.8418 7.1602-0.696 1.041-2.4565 1.5102-3.3145 1.6172l-0.54101-0.87109c0.707-0.2 1.0745-0.40292 1.1035-0.41992l-0.49023-0.87305c-0.013 7e-3 -1.2719 0.6875-3.7559 0.6875s-3.7429-0.6805-3.7559-0.6875l-0.49023 0.87305c0.029 0.017 0.406 0.22183 1.125 0.42383l-0.5586 0.86718c-0.855-0.106-2.6214-0.57419-3.3184-1.6172 0.039-3.248 1.4005-6.7577 1.8145-7.1367 0.886-0.705 1.993-1.043 2.498-1.168zm-0.06445 2.9453c-0.965 0-1.75 0.897-1.75 2s0.785 2 1.75 2 1.75-0.897 1.75-2-0.785-2-1.75-2zm5.5 0c-0.965 0-1.75 0.897-1.75 2s0.785 2 1.75 2 1.75-0.897 1.75-2-0.785-2-1.75-2zm-5.5 1c0.406 0 0.75 0.458 0.75 1s-0.344 1-0.75 1-0.75-0.458-0.75-1 0.344-1 0.75-1zm5.5 0c0.406 0 0.75 0.458 0.75 1s-0.344 1-0.75 1-0.75-0.458-0.75-1 0.344-1 0.75-1z")

diff --git a/src/server/views/components/sidebar/userControls/serverPowerButton.pug b/src/server/views/components/sidebar/userControls/serverPowerButton.pug
@@ -2,8 +2,7 @@
 div.serverPowerIcon#serverPowerToggle(
  hx-get="/toggle-power"
  data-confirm=`Turn web server off?`
- data-tippy-content=`Turn web server off`
- data-tippy-placement='top'
+ aria-label=`Turn web server off`
 )
  svg(aria-hidden="false" viewBox="0 0 16 16")
  path(d="M7.5 1v7h1V1h-1z")

diff --git a/src/server/views/components/sidebar/userControls/settingsButton.pug b/src/server/views/components/sidebar/userControls/settingsButton.pug
@@ -1,7 +1,6 @@
 // SETTINGS BUTTON - STATELESS
 div.settingsIcon#settingsToggle(
- data-tippy-content='Bot settings'
- data-tippy-placement='top'
+ aria-label='Bot settings'
 )
  svg(aria-hidden="false" viewBox="0 0 24 24")
  path(

diff --git a/src/server/views/index.pug b/src/server/views/index.pug
@@ -4,13 +4,11 @@ html(lang="en")
  meta(charset="UTF-8")
  meta(name="viewport" content="width=device-width, initial-scale=1.0")
  title= title
- 
+
  link(href="https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,300;0,400;0,500;0,700;0,900;1,300;1,400;1,500&amp;display=swap" rel="stylesheet")
  link(rel="stylesheet" href="/css/style.css")
  link(rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@sweetalert2/theme-dark@5/dark.css")
 
- script(src="https://unpkg.com/@popperjs/core@2" crossorigin="anonymous")
- script(src="https://unpkg.com/tippy.js@6" crossorigin="anonymous")
  script(src="https://unpkg.com/htmx.org@1.9.10" crossorigin="anonymous")
  script(src="https://unpkg.com/htmx.org/dist/ext/ws.js" crossorigin="anonymous")
  script(src="https://cdn.jsdelivr.net/npm/sortablejs@1.15.2/Sortable.min.js" crossorigin="anonymous")
@@ -19,5 +17,5 @@ html(lang="en")
 
  body
  noscript Please enable JavaScript to access this website.
- div.rootDiv(hx-ext="ws" ws-connect="/")
+ div.rootDiv(hx-ext="ws" ws-connect="/" hx-indicator=".loading-bar")
  include components/componentLayout