JSFiddle - React, Tailwind, and code Playground

by Sam Wray

HTML

<body>
  <link rel="stylesheet" href="https://unpkg.com/[email protected]/build/pure-min.css" integrity="sha384-UQiGfs9ICog+LwheBSRCt1o5cbyKIHbwjWscjemyBMT9YCUMZffs6UqUTd0hObXD" crossorigin="anonymous">
	<app class=pure-g>
		<top class=pure-u-1-1>
			<div class=pure-g>
				<layers class=pure-u-2-5>

				</layers>
				<gallery-outer class=pure-u-3-5>
					<resize-handle-left></resize-handle-left>
					<gallery-bar class=pure-form>
						<ibvf></ibvf>
						<input type=search />
					</gallery-bar>
					<gallery>
						<gallery-item></gallery-item>
						<gallery-item></gallery-item>
						<gallery-item></gallery-item>
						<gallery-item></gallery-item>
						<gallery-item></gallery-item>
						<gallery-item></gallery-item>
						<gallery-item></gallery-item>
						<gallery-item></gallery-item>
						<gallery-item></gallery-item>
						<gallery-item></gallery-item>
						<gallery-item></gallery-item>
						<gallery-item></gallery-item>
						<gallery-item></gallery-item>
					</gallery>
				</gallery-outer>
			</div>
		</top>
		<bottom class=pure-u-1-1>
			<resize-handle-top />
			<controls>
			
			</controls>
		</bottom>
	</app>
</body>

CSS

html, body, app {
	height: 100%;
}

app {
	background-color:#484848;
}

top {
	height: 75%;
}

top > div {
	height: 100%;
}

bottom {
	height: 25%;
	position: relative;
}

resize-handle-top {
	position: absolute;
	width: 100%;
	
	top: 0;
	left: 0;
	right: 0;
	height: 5px;
	
	border-top: 1px solid #BBBBBB;
	transition: 50ms;
}

resize-handle-top:hover {
	border-top-width: 5px;
	cursor: ns-resize;
	top: -2px;
}

layers {
	height: 100%;
}

gallery-outer {
	height: 100%;
	position: relative;
}

resize-handle-left {
	position: absolute;
	height: 100%;
	
	top: 0;
	left: 0;
	bottom: 0;
	width: 5px;
	
	border-left: 1px solid #BBBBBB;
	transition: 50ms;
}

resize-handle-left:hover {
	border-left-width: 5px;
	cursor: ew-resize;
	left: -2px;
}

gallery-bar {
	display: block;
	
	height: 49px;
	width: 100%;
	
	padding: 5pt;
	box-sizing: border-box;
}

gallery-bar input {
	vertical-align: middle;
}

gallery {
	background-color: #393939;
	box-sizing: border-box;
	
	display: flex;
	flex-wrap: wrap;
	align-items: flex-start;
	
	font-size: 0;
	
	overflow-y: scroll;
	
	padding: 20px;
	
	height: calc(100% - 49px);
	width: 100%;
	
	box-shadow: inset 0px 0px 20px 0px rgba(0,0,0,.5);
}

gallery-item {
	background-color: #BDBDBD;
	display: inline-block;
	width: 168px;
	height: 98px;
	margin: 0 5px 5px 0;
	
	align-self: flex-start;
}

ibvf {
	display: inline-block;
	height: 100%;
	vertical-align: middle;
	width: 0;
}

JavaScript

//jshint esnext:true

let resizeTarget = null;

const windowReady = function() {
	console.log('ready');
	
	attachResizeTop(document.querySelector('resize-handle-top'));
	attachResizeLeft(document.querySelector('resize-handle-left'));
};

function attachResizeTop(handle) {
	let allowDrag = false;
	let topNode = document.querySelector('top');
	let bottomNode = document.querySelector('bottom');
	
	window.addEventListener('mousedown', (e) => {
 		allowDrag = true;
		resizeTarget = e.target;
	});
	
	window.addEventListener('mouseup', () => {
		allowDrag = false;
		resizeTarget = null;
	});
	
	window.addEventListener('mousemove', (e) => {
		if(!allowDrag) return;
		if(resizeTarget !== handle) return;
		
		let percentageHeight = (e.clientY / window.innerHeight) * 100;
		
		bottomNode.style.height = (100-percentageHeight) + '%';
		topNode.style.height = percentageHeight + '%';
	});
}

function attachResizeLeft(handle) {
	let allowDrag = false;
	let layersNode = document.querySelector('layers');
	let galleryOuterNode = document.querySelector('gallery-outer');
	
	window.addEventListener('mousedown', (e) => {
 		allowDrag = true;
		resizeTarget = e.target;
	});
	
	window.addEventListener('mouseup', () => {
		allowDrag = false;
		resizeTarget = null;
	});
	
	window.addEventListener('mousemove', (e) => {
		if(!allowDrag) return;
		if(resizeTarget !== handle) return;
		
		let percentageWidth = (e.clientX / window.innerWidth) * 100;
		
		galleryOuterNode.style.width = (100-percentageWidth) + '%';
		layersNode.style.width = percentageWidth + '%';
	});
}

windowReady();