Add messages, chat, and room list animation
This commit is contained in:
parent
da1f63fc8d
commit
4699011f5d
GPG Key ID:
BC1C2C61CF521B17
|
|
@ -2,8 +2,9 @@
|
|||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<link rel="stylesheet" type="text/css" href="static/main.css?static=13628a6e3d">
|
||||
<link rel="stylesheet" type="text/css" href="static/main.css?static=fd8dad924f">
|
||||
<script type="module" src="static/groups.js?static=18b23cbd17"></script>
|
||||
<script type="module" src="static/chat-input.js?static=a90499fdac"></script>
|
||||
<title>Carbon</title>
|
||||
</head>
|
||||
<body>
|
||||
|
|
@ -72,7 +73,45 @@
|
|||
<div class="c-room__name">mettaton simp zone</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="c-chat"></div>
|
||||
<div class="c-chat">
|
||||
<div class="c-chat__messages">
|
||||
<div class="c-chat__inner">
|
||||
<div class="c-message-group">
|
||||
<div class="c-message-group__avatar">
|
||||
<div class="c-message-group__icon"></div>
|
||||
</div>
|
||||
<div class="c-message-group__messages">
|
||||
<div class="c-message-group__name">Cadence</div>
|
||||
<div class="c-message">the second button is for rooms (gonna call them "channels to make discord users happy) that are not in a group (which will be most rooms - few people set up groups because they're so annoying, and many communities of people only need a single chatroom)</div>
|
||||
<div class="c-message">for now, please assume that current groups ("groups v1") will not be recognised by this client at all</div>
|
||||
<div class="c-message">so yeah, press the second button, you see all the ungrouped channels</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="c-message-group">
|
||||
<div class="c-message-group__avatar">
|
||||
<div class="c-message-group__icon"></div>
|
||||
</div>
|
||||
<div class="c-message-group__messages">
|
||||
<div class="c-message-group__name">Cadence</div>
|
||||
<div class="c-message">hi riley feel free to catch up in your own time</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="c-message-group">
|
||||
<div class="c-message-group__avatar">
|
||||
<div class="c-message-group__icon"></div>
|
||||
</div>
|
||||
<div class="c-message-group__messages">
|
||||
<div class="c-message-group__name">riley</div>
|
||||
<div class="c-message">henlo</div>
|
||||
<div class="c-message">wasuwasuwasuwasuuuuuup</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="c-chat-input">
|
||||
<textarea class="c-chat-input__textarea" placeholder="Send a message..." autocomplete="off" id="c-chat-textarea"></textarea>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,17 @@
|
|||
import {q} from "./basic.js"
|
||||
|
||||
const chat = q("#c-chat-textarea")
|
||||
|
||||
chat.addEventListener("keydown", event => {
|
||||
if (event.key === "Enter" && !event.shiftKey && !event.ctrlKey) {
|
||||
chat.value = ""
|
||||
event.preventDefault()
|
||||
}
|
||||
})
|
||||
|
||||
chat.addEventListener("input", () => {
|
||||
chat.style.height = "0px"
|
||||
console.log(chat.clientHeight, chat.scrollHeight)
|
||||
chat.style.height = (chat.scrollHeight + 1) + "px"
|
||||
})
|
||||
|
||||
|
|
@ -1,3 +1,8 @@
|
|||
@font-face {
|
||||
font-family: Whitney;
|
||||
font-weight: 400;
|
||||
src: url(/static/whitney-400.woff?static=0f823bc4b5) format("woff2");
|
||||
}
|
||||
@font-face {
|
||||
font-family: Whitney;
|
||||
font-weight: 500;
|
||||
|
|
@ -7,10 +12,12 @@ body {
|
|||
font-family: sans-serif;
|
||||
background-color: #36393e;
|
||||
color: #ddd;
|
||||
font-size: 24px;
|
||||
font-size: 16px;
|
||||
font-family: Whitney;
|
||||
line-height: 1.45;
|
||||
margin: 0;
|
||||
height: 100vh;
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
.main {
|
||||
|
|
@ -23,9 +30,11 @@ body {
|
|||
padding: 8px;
|
||||
width: 240px;
|
||||
font-size: 20px;
|
||||
font-weight: 500;
|
||||
overflow-y: scroll;
|
||||
scrollbar-width: thin;
|
||||
scrollbar-color: #42454a #2f3135;
|
||||
scrollbar-color: #202224 #2f3135;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.c-room {
|
||||
|
|
@ -55,6 +64,9 @@ body {
|
|||
.c-groups {
|
||||
position: relative;
|
||||
width: 80px;
|
||||
flex-shrink: 0;
|
||||
font-size: 24px;
|
||||
font-weight: 500;
|
||||
}
|
||||
.c-groups__display {
|
||||
background-color: #202224;
|
||||
|
|
@ -65,6 +77,7 @@ body {
|
|||
top: 0;
|
||||
bottom: 0;
|
||||
right: 0;
|
||||
transition: width ease-out 0.12s;
|
||||
}
|
||||
.c-groups__display:not(.c-groups__display--closed):hover {
|
||||
width: 300px;
|
||||
|
|
@ -96,4 +109,69 @@ body {
|
|||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
.c-message-group {
|
||||
display: flex;
|
||||
margin-top: 12px;
|
||||
padding-top: 12px;
|
||||
border-top: 1px solid #4b4e54;
|
||||
}
|
||||
.c-message-group__avatar {
|
||||
flex-shrink: 0;
|
||||
margin-right: 16px;
|
||||
}
|
||||
.c-message-group__icon {
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
border-radius: 50%;
|
||||
background-color: #48d;
|
||||
}
|
||||
.c-message-group__name {
|
||||
color: #5bf;
|
||||
margin: -2px 0px -3px;
|
||||
font-size: 19px;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.c-message {
|
||||
margin-top: 4px;
|
||||
}
|
||||
|
||||
.c-chat {
|
||||
display: grid;
|
||||
grid-template-rows: 1fr auto;
|
||||
align-items: end;
|
||||
}
|
||||
.c-chat__messages {
|
||||
height: 100%;
|
||||
overflow-y: scroll;
|
||||
scrollbar-color: #202224 #2f3135;
|
||||
display: grid;
|
||||
align-items: end;
|
||||
}
|
||||
.c-chat__inner {
|
||||
padding: 20px 20px 20px;
|
||||
}
|
||||
|
||||
.c-chat-input {
|
||||
width: 100%;
|
||||
border-top: 2px solid #4b4e54;
|
||||
}
|
||||
.c-chat-input__textarea {
|
||||
width: calc(100% - 40px);
|
||||
height: 39.2px;
|
||||
box-sizing: border-box;
|
||||
margin: 20px;
|
||||
padding: 8px;
|
||||
font-family: inherit;
|
||||
font-size: inherit;
|
||||
background-color: #42454a;
|
||||
color: #fff;
|
||||
appearance: none;
|
||||
-moz-appearance: none;
|
||||
-webkit-appearance: none;
|
||||
border: none;
|
||||
border-radius: 8px;
|
||||
resize: none;
|
||||
}
|
||||
Binary file not shown.
10
spec.js
10
spec.js
|
|
@ -4,6 +4,11 @@ module.exports = [
|
|||
source: "/assets/fonts/whitney-500.woff",
|
||||
target: "/static/whitney-500.woff"
|
||||
},
|
||||
{
|
||||
type: "file",
|
||||
source: "/assets/fonts/whitney-400.woff",
|
||||
target: "/static/whitney-400.woff"
|
||||
},
|
||||
{
|
||||
type: "file",
|
||||
source: "/js/basic.js",
|
||||
|
|
@ -14,6 +19,11 @@ module.exports = [
|
|||
source: "/js/groups.js",
|
||||
target: "/static/groups.js"
|
||||
},
|
||||
{
|
||||
type: "file",
|
||||
source: "/js/chat-input.js",
|
||||
target: "/static/chat-input.js"
|
||||
},
|
||||
{
|
||||
type: "file",
|
||||
source: "/assets/fonts/whitney-500.woff",
|
||||
|
|
|
|||
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
26
src/home.pug
26
src/home.pug
|
|
@ -8,12 +8,22 @@ mixin room(name)
|
|||
.c-room__icon
|
||||
.c-room__name= name
|
||||
|
||||
mixin message(name, messages)
|
||||
.c-message-group
|
||||
.c-message-group__avatar
|
||||
.c-message-group__icon
|
||||
.c-message-group__messages
|
||||
.c-message-group__name= name
|
||||
each message in messages
|
||||
.c-message= message
|
||||
|
||||
doctype html
|
||||
html
|
||||
head
|
||||
meta(charset="utf-8")
|
||||
link(rel="stylesheet" type="text/css" href=getStatic("/sass/main.sass"))
|
||||
script(type="module" src=getStatic("/js/groups.js"))
|
||||
script(type="module" src=getStatic("/js/chat-input.js"))
|
||||
title Carbon
|
||||
body
|
||||
main.main
|
||||
|
|
@ -36,3 +46,19 @@ html
|
|||
+room("DRB clan")
|
||||
+room("mettaton simp zone")
|
||||
.c-chat
|
||||
.c-chat__messages
|
||||
.c-chat__inner
|
||||
+message("Cadence", [
|
||||
`the second button is for rooms (gonna call them "channels to make discord users happy) that are not in a group (which will be most rooms - few people set up groups because they're so annoying, and many communities of people only need a single chatroom)`,
|
||||
`for now, please assume that current groups ("groups v1") will not be recognised by this client at all`,
|
||||
`so yeah, press the second button, you see all the ungrouped channels`
|
||||
])
|
||||
+message("Cadence", [
|
||||
`hi riley feel free to catch up in your own time`
|
||||
])
|
||||
+message("riley", [
|
||||
`henlo`,
|
||||
`wasuwasuwasuwasuuuuuup`
|
||||
])
|
||||
.c-chat-input
|
||||
textarea(placeholder="Send a message..." autocomplete="off").c-chat-input__textarea#c-chat-textarea
|
||||
|
|
@ -0,0 +1,17 @@
|
|||
import {q} from "./basic.js"
|
||||
|
||||
const chat = q("#c-chat-textarea")
|
||||
|
||||
chat.addEventListener("keydown", event => {
|
||||
if (event.key === "Enter" && !event.shiftKey && !event.ctrlKey) {
|
||||
chat.value = ""
|
||||
event.preventDefault()
|
||||
}
|
||||
})
|
||||
|
||||
chat.addEventListener("input", () => {
|
||||
chat.style.height = "0px"
|
||||
console.log(chat.clientHeight, chat.scrollHeight)
|
||||
chat.style.height = (chat.scrollHeight + 1) + "px"
|
||||
})
|
||||
|
||||
|
|
@ -1,16 +1,22 @@
|
|||
@font-face
|
||||
font-family: Whitney
|
||||
font-weight: 500
|
||||
src: url(static("/assets/fonts/whitney-500.woff")) format("woff2")
|
||||
@mixin import-whitney($weight)
|
||||
@font-face
|
||||
font-family: Whitney
|
||||
font-weight: $weight
|
||||
src: url(static("/assets/fonts/whitney-" + $weight + ".woff")) format("woff2")
|
||||
|
||||
+import-whitney(400)
|
||||
+import-whitney(500)
|
||||
|
||||
body
|
||||
font-family: sans-serif
|
||||
background-color: #36393e
|
||||
color: #ddd
|
||||
font-size: 24px
|
||||
font-size: 16px
|
||||
font-family: Whitney
|
||||
line-height: 1.45
|
||||
margin: 0
|
||||
height: 100vh
|
||||
font-weight: 400
|
||||
|
||||
.main
|
||||
height: 100vh
|
||||
|
|
|
|||
|
|
@ -3,3 +3,4 @@ $darker: #2f3135
|
|||
$darkest: #202224
|
||||
$mild: #393c42
|
||||
$milder: #42454a
|
||||
$divider: #4b4e54
|
||||
|
|
|
|||
|
|
@ -0,0 +1,25 @@
|
|||
@use "../colors.sass" as c
|
||||
|
||||
@mixin appearance($value)
|
||||
appearance: $value
|
||||
-moz-appearance: $value
|
||||
-webkit-appearance: $value
|
||||
|
||||
.c-chat-input
|
||||
width: 100%
|
||||
border-top: 2px solid c.$divider
|
||||
|
||||
&__textarea
|
||||
width: calc(100% - 40px)
|
||||
height: 16px + (16px * 1.45)
|
||||
box-sizing: border-box
|
||||
margin: 20px
|
||||
padding: 8px
|
||||
font-family: inherit
|
||||
font-size: inherit
|
||||
background-color: c.$milder
|
||||
color: #fff
|
||||
+appearance(none)
|
||||
border: none
|
||||
border-radius: 8px
|
||||
resize: none
|
||||
|
|
@ -0,0 +1,17 @@
|
|||
@use "../colors" as c
|
||||
|
||||
.c-chat
|
||||
display: grid
|
||||
grid-template-rows: 1fr auto
|
||||
align-items: end
|
||||
// height: 100%
|
||||
|
||||
&__messages
|
||||
height: 100%
|
||||
overflow-y: scroll
|
||||
scrollbar-color: c.$darkest c.$darker
|
||||
display: grid
|
||||
align-items: end
|
||||
|
||||
&__inner
|
||||
padding: 20px 20px 20px
|
||||
|
|
@ -9,6 +9,9 @@ $out-width: $base-width + rooms.$list-width - 20px
|
|||
.c-groups
|
||||
position: relative
|
||||
width: $base-width
|
||||
flex-shrink: 0
|
||||
font-size: 24px
|
||||
font-weight: 500
|
||||
|
||||
&__display
|
||||
background-color: c.$darkest
|
||||
|
|
@ -19,6 +22,7 @@ $out-width: $base-width + rooms.$list-width - 20px
|
|||
top: 0
|
||||
bottom: 0
|
||||
right: 0
|
||||
transition: width ease-out 0.12s
|
||||
|
||||
&:not(&--closed):hover
|
||||
width: $out-width
|
||||
|
|
|
|||
|
|
@ -0,0 +1,27 @@
|
|||
@use "../colors" as c
|
||||
|
||||
.c-message-group
|
||||
display: flex
|
||||
margin-top: 12px
|
||||
padding-top: 12px
|
||||
border-top: 1px solid c.$divider
|
||||
|
||||
&__avatar
|
||||
flex-shrink: 0
|
||||
margin-right: 16px
|
||||
|
||||
&__icon
|
||||
$size: 32px
|
||||
width: $size
|
||||
height: $size
|
||||
border-radius: 50%
|
||||
background-color: #48d
|
||||
|
||||
&__name
|
||||
color: #5bf
|
||||
margin: -2px 0px -3px
|
||||
font-size: 19px
|
||||
font-weight: 500
|
||||
|
||||
.c-message
|
||||
margin-top: 4px
|
||||
|
|
@ -9,9 +9,11 @@ $icon-padding: 8px
|
|||
padding: $icon-padding
|
||||
width: $list-width
|
||||
font-size: 20px
|
||||
font-weight: 500
|
||||
overflow-y: scroll
|
||||
scrollbar-width: thin
|
||||
scrollbar-color: c.$milder c.$darker
|
||||
scrollbar-color: c.$darkest c.$darker
|
||||
flex-shrink: 0
|
||||
|
||||
.c-room
|
||||
display: flex
|
||||
|
|
|
|||
|
|
@ -1,3 +1,6 @@
|
|||
@use "./base"
|
||||
@use "./components/groups"
|
||||
@use "./components/rooms"
|
||||
@use "./components/messages"
|
||||
@use "./components/chat"
|
||||
@use "./components/chat-input"
|
||||
|
|
|
|||
Loading…
Reference in New Issue