sample chat built

nickheyer · Mar 25, 2024 · 8439af7 · 8439af7
1 parent 834d800
commit 8439af7
Show file tree

Hide file tree

Showing 10 changed files with 190 additions and 35 deletions.
diff --git a/public/css/base.css b/public/css/base.css
@@ -11,14 +11,6 @@ html, body, #root {
   border: 0;
   outline: 0;
   font-family: var(--font-family);
-  scrollbar-width: none;
-  -ms-overflow-style: none;
-
-  &::-webkit-scrollbar {
-    width: 0;
-    height: 0;
-  }
-
 }
 
 body {
@@ -38,7 +30,10 @@ body {
     flex-direction: row;
     justify-content: flex-start;
     box-sizing: border-box;
-    scroll-behavior: smooth;
+    overflow: hidden;
     width: 100%;
     height: 100vh;
+    --anim-length: 2500ms;
+    -webkit-text-size-adjust: 100%;
+
 }
diff --git a/public/css/chat.css b/public/css/chat.css
@@ -4,7 +4,6 @@
   order: 3;
   flex-grow: 1;
   height: 100%;
-  resize: horizontal;
   display: grid;
   grid-template-rows: 1fr 70px;
 }
@@ -14,8 +13,117 @@
   display: flex;
   flex-direction: column;
   justify-content: flex-end;
+  padding: 15px;
+}
+
+.chatBarContainer {
+  position: relative;
+}
+
+.floatingChatBar {
+  box-sizing: border-box;
+  position: absolute;
+  top: 0;
+  left: 50%;
+  transform: translate(-50%, 0);
+  background-color: var(--chat-bar);
+  width: calc(100% - 30px);
+
+  border-radius: 8px;
+  padding: 16px 20px;
+  display: flex;
+  align-items: center;
+  font-size: 16px;
+}
+
+.message-preview {
+  display: flex;
+  padding: 16px 0;
+
+  * {
+    box-sizing: border-box;
+  }
+
+  .hidden {
+    display: none !important;
+  }
+
+  .userAvatar {
+    flex-shrink: 0;
+    overflow: hidden;
+    margin-right: 16px;
+  }
+
+  .bot-message {
+    flex-grow: 1;
+    font-size: 16px;
+
+    .bot-name {
+      display: flex;
+      align-items: center;
+
+      .bot-tag {
+        border-radius: 4px;
+        background: var(--dark-blurple);
+        padding: 2px 4px;
+        margin: 0 8px;
+        font-size: 10px;
+      }
+
+      .bot-date {
+        color: var(--white);
+        opacity: 0.25;
+        font-size: 12px;
+      }
+    }
+
+    .message-content {
+      margin-top: 8px;
+      color: #ddd;
+      font-size: 14px;
+      word-break: break-word;
+
+      &.empty {
+        color: #666;
+        display: flex;
+        align-items: center;
+      }
+    }
+
+  }
+}
+
+.ellipsis {
+  display: flex;
+  align-items: center;
+  margin-right: 8px;
+  color: #666;
+  font-size: 14px;
+  word-break: break-word;
+
+  > div {
+    margin-left: 1px;
+    width: 8px;
+    height: 8px;
+    border-radius: 50%;
+    background: #ddd;
+    animation: fade 1s ease-in-out infinite;
+
+    &:first-child {
+      animation-delay: -100ms;
+    }
+  }
+}
+
+@keyframes fade {
+  0% {
+    opacity: 1;
+  }
+  50% {
+      opacity: .25;
+  }
+  100% {
+      opacity: 1;
+  }
 }
 
-.messages {
-  color:oklab(from color l a b)
-}
diff --git a/public/css/members.css b/public/css/members.css
@@ -4,9 +4,9 @@
 .memberContainer {
   order: 4;
   height: 100%;
-  align-self: flex-end;
   width: 270px;
-  background-color: var(--dark-server-list);
+  min-width: 70px;
+  background-color: var(--dark-member-list);
   overflow-y: auto;
   scrollbar-width: 0px;
   display: flex;

diff --git a/public/css/mobile.css b/public/css/mobile.css
@@ -0,0 +1,37 @@
+
+
+/* While using average sized mobile device */
+
+@media(max-width:768px){
+  #serverSideBar.expanded {
+    flex: auto;
+  }
+
+  #serverSideBar.expanded ~ .chatContainer {
+    width: 0;
+    visibility: collapse;
+    overflow: hidden;
+  }
+
+  .chatContainer * {
+    font-size: .9rem;
+  }
+
+
+  .servers {
+    order: 1;
+    height: 50vh;
+  }
+
+  .memberContainer {
+    order: 1;
+    height: 50vh;
+    position: absolute;
+    bottom: 0;
+    left: 0;
+    background-color: var(--dark-server-list);
+    border-top: 3px var(--server-divider) solid;
+    max-width: 70px;
+
+  }
+}
diff --git a/public/css/sidebar.css b/public/css/sidebar.css
@@ -2,11 +2,10 @@
 
 .servers {
   order: 1;
-  width: 70px;
+  min-width: 70px;
   height: 100%;
   background-color: var(--dark-server-list);
-  overflow-y: auto;
-  scrollbar-width: 0px;
+  overflow-y: auto !important;
   display: flex;
   align-items: center;
   flex-direction: column;
@@ -19,6 +18,7 @@
 
 .homeButton {
   position: relative;
+  flex-shrink: 0;
   background-color: var(--dark-bg);
   color: #FFFFFF;
   border-radius: 50%;
@@ -111,16 +111,16 @@
 #serverSideBar {
   order: 2;
   position: relative;
-  width: auto;
-  overflow: hidden;
+  min-width: 60px;
   height: 100vh;
   background-color: var(--dark-primary);
   transition: width 0.6s ease;
+  overflow: hidden;
 }
 
 #serverSideBar.expanded {
   width: 270px;
-  overflow: auto;
+
 
   .guildSelectorName,
   .userInfo,
@@ -139,12 +139,16 @@
     transform: translateY(-50%) rotate(0deg);
     transform-origin: center;
   }
+
+  .channelViewContainer {
+    overflow: auto !important;
+    height: calc(100% - 136px) !important
+  }
 }
 
 
 #serverSideBar:not(.expanded) {
   width: 60px;
-  overflow: auto;
 
   .guildSelectorDropdown {
     width: 100%;
@@ -356,4 +360,3 @@
   color: var(--symbol);
   cursor: pointer;
 }
-
diff --git a/public/css/style.css b/public/css/style.css
@@ -6,3 +6,4 @@
 @import 'chat.css';
 @import 'members.css';
 @import 'userbox.css';
+@import 'mobile.css';
diff --git a/public/css/variables.css b/public/css/variables.css
@@ -1,22 +1,24 @@
 /* Storing variables at the root scope */
 
 :root {
-  --dark-bg: #36393f;
-  --dark-server-list: #202225;
+  --dark-bg: #313338;
+  --chat-bar: #383a40;
+  --dark-server-list: #1e1f22;
   --server-divider: #2d2f32;
   --blurple: #7289da;
   --dark-blurple: #4d5e94;
   --green: #43b581;
-  --dark-primary: #2f3136;
+  --dark-primary: #2b2d31;
   --text-gray: #dcddde;
-  --user-box: #292B2F;
+  --user-box: #232428;
+  --dark-member-list: #2b2d31;
   --iconColor: #b9bbbe;
   --red: #f84a4b;
   --yellow: #ffd000;
 
 
   --primary: #36393f;
-  --secondary: #2f3136;
+  --secondary: #2b2d31;
   --tertiary: rgb(32,34,37);
   --quaternary: #292b2f;
   --quinary: #393d42;

diff --git a/src/server/views/components/chat/chatBar.pug b/src/server/views/components/chat/chatBar.pug
@@ -1,2 +1,3 @@
 .chatBarContainer
-  | Input goes here eventually....
+  .floatingChatBar
+    | Chat input goes here.
diff --git a/src/server/views/components/chat/discordMessage.pug b/src/server/views/components/chat/discordMessage.pug
@@ -1,14 +1,22 @@
 .message-preview
   img.userAvatar(
-    src="https://cdn.discordapp.com/embed/avatars/0.png"
-    alt="avatar"
+      src=(discordBot.bot_avatar_url || "https://cdn.discordapp.com/embed/avatars/0.png")
+      alt="avatar"
   )
   .bot-message(data-message-preview)
     .bot-name
-      b Embed Builder
+      h4.username
+        if (discordBot.bot_username)
+          if (discordBot.bot_username.length > 16)
+            | !{discordBot.bot_username.substr(0, 16) + '...'}
+          else
+            | !{discordBot.bot_username}
+        else 
+          | Unavailable
       .bot-tag BOT
       .bot-date Today at 17:4PM
     .message-content(data-message-content)
+      | This is some message content!
     .message-attachment.hidden(data-message-attachment="null")
       img(src, alt)
     .message-attachment.hidden(data-message-image-link)
@@ -38,4 +46,4 @@
         div
         div
         div
-      | Message Builder is thinking...
+      | #{discordBot.bot_username} is thinking...
diff --git a/src/server/views/components/sidebar/sidebarLayout.pug b/src/server/views/components/sidebar/sidebarLayout.pug
@@ -1,8 +1,8 @@
+include servers/servers
+
 div#serverSideBar(
   class=(state.sidebar_exp_state ? 'expanded' : 'collapsed')
 )
   include servers/serverBannerContainer
   include channels/channelsLayout
   include userControls/userControlsLayout
-
-include servers/servers