Message queue UI

by PhilQ

HTML

<button onclick="document.getElementById('m1a').classList.toggle('open');">Toggle 1a</button>
<button onclick="document.getElementById('m2a').classList.toggle('open');">Toggle 2a</button>
<button onclick="addItem();">Add item</button>

<div id="messages1">
	<div class="message" id="m1a"><div>Hoi hoi hoi</div></div>
	<div class="message" id="m1b"><div>Hoi hoi hoi</div></div>
</div>

<div id="messages2">
	<div class="message" id="m2a"><div>Hoi hoi hoi</div></div>
	<div class="message" id="m2b"><div>Hoi hoi hoi</div></div>
</div>

<div id="messages3">
</div>

SCSS

*, :before, :after { margin: 0; padding: 0; box-sizing: border-box; }

#messages1 {
	position: fixed;
	top: 0;
	right: 0;
	width: 100px;
	background: grey;

	.message {
		width: 100%;
		border: 1px solid red;
		overflow: hidden;
		max-height: 0;
		background: blue;
		transition: all 1s ease;
		
		div {}

		&.open {
			background: yellow;
			max-height: 100px;

			div {}
		}
	}
}

#messages2 {
	position: fixed;
	top: 0;
	right: 100px;
	width: 100px;
	background: grey;

	.message {
		width: 100%;
		border: 1px solid red;
		display: grid;
		
		div {
			overflow: hidden;
			height: 0;
			background: blue;
			transition: all 1s ease;
		}

		&.open {

			div {
				background: yellow;
				height: 100%;
			}
		}
	}
}

#messages3 {
	position: fixed;
	top: 0;
	right: 200px;
	width: 250px;
	text-align: right;
	//background: grey;

	.message {
		float: right;
		clear: right;
		width: auto;
		max-width: 100%;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
		border-radius: 4px;
		display: block;
		text-align: left;
		background: #ffff;
		padding: 1em;
		box-shadow: 0 1px 5px 0 rgba(0,0,0, 0.3);
		transition: all 1s ease;
		height: 3em;
		margin-top: 1em;
		
		&:first-child {
			margin-top: -3em;
		}
		
		div {}

		&.open {
			margin-top: 1em;

			div {}
		}

		&.close {
			opacity: 0;
			margin-top: 3em;

			div {}
		}
	}
}

JavaScript

let container = document.getElementById('messages3');

function addItem(){
	let div = document.createElement('div');
	div.classList.add('message');
	div.innerHTML = 'Message: ' + Array(3 + Math.floor(Math.random() * 10)).fill('bla').join(' ');
	container.prepend(div);
	setTimeout(() => {
		div.classList.add('open');
		setTimeout(() => {
			div.classList.replace('open', 'close');
			div.addEventListener('transitionend', () => {
				div.remove();
			}, { once: true });
		}, 3000);
	}, 1);
}