| .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 | |||||
| }, | }, | ||||
| } | } |