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