.chat { | .chat { | ||||
z-index: 999; | |||||
background-color: rgba(255, 255, 255, 0.95); | background-color: rgba(255, 255, 255, 0.95); | ||||
position: fixed; | position: fixed; | ||||
height: 140px; | height: 140px; | ||||
right: 0; | right: 0; | ||||
top: 0; | top: 0; | ||||
} | } | ||||
.not-chat { | |||||
z-index: 999; | |||||
background-color: rgba(0, 0, 0, 0.8); | |||||
position: fixed; | |||||
height: 100vh; | |||||
width: 100vw; | |||||
right: 0; | |||||
top: 0; | |||||
} | |||||
.chat .actions { | .chat .actions { | ||||
display: grid; | display: grid; | ||||
grid-template-columns: 1fr auto; | grid-template-columns: 1fr auto; |
}) | }) | ||||
}, | }, | ||||
view() { | view() { | ||||
return ChatConfig.isOn ? m('.chat', | |||||
m('.posts', this.posts.map(post => m(Post, {post}))), | |||||
m(TextBox), | |||||
) : null | |||||
return ChatConfig.isOn ? [ | |||||
m('.not-chat', {onclick: () => ChatConfig.isOn = false}), | |||||
m('.chat', | |||||
m('.posts', this.posts.map(post => m(Post, {post}))), | |||||
m(TextBox), | |||||
) | |||||
] : null | |||||
}, | }, | ||||
} | } |