forked from rDrama/rDrama
Fix sidebar
parent
6fceaf0e6f
commit
636d42dff1
|
@ -1,8 +1,14 @@
|
||||||
|
html,
|
||||||
|
body {
|
||||||
|
overscroll-behavior-y: none;
|
||||||
|
}
|
||||||
|
|
||||||
.App {
|
.App {
|
||||||
position: fixed;
|
position: fixed;
|
||||||
width: 100vw;
|
width: 100vw;
|
||||||
height: calc(100vh - 84px);
|
height: 100%;
|
||||||
display: flex;
|
display: flex;
|
||||||
|
overflow: hidden;
|
||||||
}
|
}
|
||||||
|
|
||||||
@media screen and (min-width: 1000px) {
|
@media screen and (min-width: 1000px) {
|
||||||
|
@ -32,36 +38,64 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
.App-side {
|
.App-side {
|
||||||
position: absolute;
|
height: 100%;
|
||||||
top: 0;
|
flex: 1;
|
||||||
right: 0;
|
|
||||||
background: var(--gray-500);
|
background: var(--gray-500);
|
||||||
}
|
position: relative;
|
||||||
|
|
||||||
@media screen and (max-width: 1100px) {
|
|
||||||
.App-side {
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.App-content {
|
.App-content {
|
||||||
position: relative;
|
position: relative;
|
||||||
flex: 1;
|
flex: 3;
|
||||||
|
height: 720px;
|
||||||
|
overflow: auto;
|
||||||
|
-ms-overflow-style: none;
|
||||||
|
scrollbar-width: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.App-content::-webkit-scrollbar {
|
||||||
|
display: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
.App-drawer {
|
.App-drawer {
|
||||||
position: absolute;
|
|
||||||
top: 0;
|
|
||||||
left: 0;
|
|
||||||
width: 100%;
|
|
||||||
height: 100%;
|
|
||||||
overflow: auto;
|
|
||||||
z-index: 2;
|
z-index: 2;
|
||||||
display: flex;
|
display: flex;
|
||||||
background: var(--background);
|
background: var(--background);
|
||||||
|
height: 100%;
|
||||||
}
|
}
|
||||||
|
|
||||||
.App-input {
|
.App-input {
|
||||||
flex-basis: 7rem;
|
flex-basis: 7rem;
|
||||||
padding: 0 1rem;
|
padding: 0 1rem;
|
||||||
|
margin-top: 2rem;
|
||||||
|
flex: 3;
|
||||||
|
}
|
||||||
|
|
||||||
|
.App-center {
|
||||||
|
display: flex;
|
||||||
|
align-items: flex-start;
|
||||||
|
}
|
||||||
|
|
||||||
|
.App-bottom {
|
||||||
|
display: flex;
|
||||||
|
align-items: flex-start;
|
||||||
|
}
|
||||||
|
|
||||||
|
.App-bottom-dummy {
|
||||||
|
flex: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* On mobile, hide the sidebar and make the input full-width. */
|
||||||
|
@media screen and (max-width: 1100px) {
|
||||||
|
.App-side {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.App-bottom-dummy {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
lite-youtube {
|
||||||
|
min-width: min(80vw, 500px);
|
||||||
}
|
}
|
||||||
|
|
|
@ -36,21 +36,26 @@ function AppInner() {
|
||||||
<small>v{process.env.VERSION}</small>
|
<small>v{process.env.VERSION}</small>
|
||||||
<ChatHeading />
|
<ChatHeading />
|
||||||
</div>
|
</div>
|
||||||
<div id="chatWrapper" className="App-content">
|
<div className="App-center">
|
||||||
<div style={{ flex: 1 }}>
|
<div className="App-content">
|
||||||
{open && config.content ? (
|
<div id="chatWrapper" style={{ flex: 1, height: "100%" }}>
|
||||||
<div className="App-drawer">{config.content}</div>
|
{open ? (
|
||||||
) : (
|
<div className="App-drawer">{config.content}</div>
|
||||||
<ChatMessageList />
|
) : (
|
||||||
)}
|
<ChatMessageList />
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div className="App-side">
|
<div className="App-side">
|
||||||
<UserList />
|
<UserList />
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div className="App-input">
|
<div className="App-bottom">
|
||||||
<UserInput />
|
<div className="App-input">
|
||||||
<UsersTyping />
|
<UserInput />
|
||||||
|
<UsersTyping />
|
||||||
|
</div>
|
||||||
|
<div className="App-bottom-dummy" />
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
|
@ -14,10 +14,6 @@
|
||||||
animation: fading-in 0.3s ease-in-out forwards;
|
animation: fading-in 0.3s ease-in-out forwards;
|
||||||
}
|
}
|
||||||
|
|
||||||
.ChatMessage:nth-of-type(even) {
|
|
||||||
background: rgba(255, 255, 255, 0.02);
|
|
||||||
}
|
|
||||||
|
|
||||||
.ChatMessage-top {
|
.ChatMessage-top {
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
|
@ -49,22 +45,3 @@
|
||||||
top: 4px;
|
top: 4px;
|
||||||
right: 4px;
|
right: 4px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.ChatMessageList {
|
|
||||||
position: absolute;
|
|
||||||
top: 0;
|
|
||||||
left: 0;
|
|
||||||
width: 100%;
|
|
||||||
height: 100%;
|
|
||||||
overflow: auto;
|
|
||||||
-ms-overflow-style: none;
|
|
||||||
scrollbar-width: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
.ChatMessageList::-webkit-scrollbar {
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
lite-youtube {
|
|
||||||
min-width: min(80vw, 500px);
|
|
||||||
}
|
|
||||||
|
|
|
@ -1,5 +1,13 @@
|
||||||
.UserList {
|
.UserList {
|
||||||
margin-left: 2rem;
|
padding: 1rem;
|
||||||
|
border-left: 1px dotted var(--primary);
|
||||||
|
flex: 1;
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
overflow: auto;
|
||||||
}
|
}
|
||||||
|
|
||||||
.UserList-heading {
|
.UserList-heading {
|
||||||
|
@ -8,15 +16,10 @@
|
||||||
justify-content: space-between;
|
justify-content: space-between;
|
||||||
}
|
}
|
||||||
|
|
||||||
.UserList-heading h4 {
|
.UserList-heading h5 {
|
||||||
margin-right: 2rem;
|
margin-right: 2rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
.UserList ul:not(.fluid) {
|
|
||||||
max-height: 275px;
|
|
||||||
overflow: auto;
|
|
||||||
}
|
|
||||||
|
|
||||||
.UserList ul::-webkit-scrollbar {
|
.UserList ul::-webkit-scrollbar {
|
||||||
display: none;
|
display: none;
|
||||||
}
|
}
|
||||||
|
|
|
@ -13,7 +13,7 @@ export function UserList({ fluid = false }: Props) {
|
||||||
return (
|
return (
|
||||||
<div className="UserList">
|
<div className="UserList">
|
||||||
<div className="UserList-heading">
|
<div className="UserList-heading">
|
||||||
<h4>Users in chat right now</h4>
|
<h5>Users Online</h5>
|
||||||
<div className="Chat-online">
|
<div className="Chat-online">
|
||||||
<i className="far fa-user fa-sm" /> {online.length}
|
<i className="far fa-user fa-sm" /> {online.length}
|
||||||
</div>
|
</div>
|
||||||
|
|
Loading…
Reference in New Issue