Handle longer user lists

This commit is contained in:
Henri Bergius 2017-12-04 19:02:26 +01:00
parent 1fc06cc7c6
commit fb84cbf545

View file

@ -53,6 +53,9 @@ class UserList extends Component {
-webkit-animation-timing-function:ease-in-out; -webkit-animation-timing-function:ease-in-out;
-webkit-animation-direction: alternate; -webkit-animation-direction: alternate;
} }
.long .deco {
display: none;
}
span.output { span.output {
color: #fff; color: #fff;
} }
@ -67,11 +70,14 @@ class UserList extends Component {
const el = document.createElement('div'); const el = document.createElement('div');
el.className = 'terminal'; el.className = 'terminal';
el.innerHTML = ` el.innerHTML = `
<div><span class="prompt">user@c-beam&gt;</span> #who</div> <div class="deco"><span class="prompt">user@c-beam&gt;</span> #who</div>
<div><span class="output">${data.join(', ')}</span></div> <div><span class="output">${data.join(', ')}</span></div>
<div>total: <span class="output">${data.length}</span></div> <div>total: <span class="output">${data.length}</span></div>
<div><span class="prompt">user@c-beam&gt;</span> <blink>_</blink></div> <div class="deco"><span class="prompt">user@c-beam&gt;</span> <blink>_</blink></div>
`; `;
if (data.join(', ').length > 100) {
el.classList.add('long');
}
return el; return el;
} }
} }