add a 5th layout mode 🔥

src/index.html

@@ -233,6 +233,11 @@
 							<use xlink:href="#mode-icon" />
 						</svg>
 					</a>
+					<a id="layoutBtn5" class="mode-btn">
+						<svg viewBox="0 0 100 100">
+							<use xlink:href="#vertical-mode-icon" />
+						</svg>
+					</a>
 					<a id="layoutBtn4" class="mode-btn hint--top-left hint--rounded" aria-label="Full Screen">
 						<svg viewBox="0 0 100 100">
 							<rect x="0" y="0" width="100" height="100" />
@@ -524,17 +529,6 @@
 
 		<div class="modal-overlay"></div>
 
-		<svg  width="30" height="30" viewBox="0 0 100 100" fill="rgba(255, 255, 255, 0.09)">
-			<defs>
-				<g id="mode-icon">
-				  <rect x="0" y="0" width="28" height="47" />
-				  <rect x="36" y="0" width="28" height="47"/>
-				  <rect x="72" y="0" width="28" height="47"/>
-				  <rect x="0" y="53" width="100" height="47"/>
-				</g>
-			</defs>
-		</svg>
-
 		<div class="alerts-container" id="js-alerts-container"></div>
 		<form style="display:none;" action="https://codepen.io/pen/define" method="POST" target="_blank" id="js-codepen-form">
 		  <input type="hidden" name="data" value='{"title": "New Pen!", "html": "<div>Hello, World!</div>"}'>
@@ -599,6 +593,22 @@
 			<symbol id="keyboard-icon" viewBox="0 0 24 24">
 				<path d="M19,10H17V8H19M19,13H17V11H19M16,10H14V8H16M16,13H14V11H16M16,17H8V15H16M7,10H5V8H7M7,13H5V11H7M8,11H10V13H8M8,8H10V10H8M11,11H13V13H11M11,8H13V10H11M20,5H4C2.89,5 2,5.89 2,7V17A2,2 0 0,0 4,19H20A2,2 0 0,0 22,17V7C22,5.89 21.1,5 20,5Z" />
 			</symbol>
+			<symbol id="mode-icon" width="30" height="30" viewBox="0 0 100 100">
+				<g>
+					<rect x="0" y="0" width="28" height="47" />
+					<rect x="36" y="0" width="28" height="47"/>
+					<rect x="72" y="0" width="28" height="47"/>
+					<rect x="0" y="53" width="100" height="47"/>
+				</g>
+			</symbol>
+			<symbol id="vertical-mode-icon" width="30" height="30" viewBox="0 0 100 100">
+				<g>
+					<rect x="0" y="0" width="20" height="100" />
+					<rect x="23" y="0" width="20" height="100"/>
+					<rect x="46" y="0" width="20" height="100"/>
+					<rect x="69" y="0" width="32" height="100"/>
+				</g>
+			</symbol>
 			<symbol id="loader-icon" viewBox="0 0 44 44">
 				<!-- By Sam Herbert (@sherb), for everyone. More @ http://goo.gl/7AJzbL -->
 				<g fill="none" fill-rule="evenodd" stroke-width="10">

src/script.js

@@ -1,7 +1,7 @@
 /* global trackEvent */
 /* global layoutBtn1, layoutBtn2, layoutBtn3, helpModal, notificationsModal, addLibraryModal,
-onboardModal, layoutBtn1, layoutBtn2, layoutBtn3, layoutBtn4, onboardModal, onboardModal,
+onboardModal, layoutBtn1, layoutBtn2, layoutBtn3, layoutBtn4, layoutBtn5, onboardModal,
-addLibraryModal, addLibraryModal, notificationsBtn, notificationsModal, notificationsModal,
+onboardModal, addLibraryModal, addLibraryModal, notificationsBtn, notificationsModal,
 notificationsModal, notificationsBtn, codepenBtn, saveHtmlBtn, saveBtn,
 onboardModal, settingsModal, notificationsBtn, onboardShowInTabOptionBtn, editorThemeLinkTag,
 onboardDontShowInTabOptionBtn, TextareaAutoComplete, savedItemCountEl, indentationSizeValueEl,
@@ -176,7 +176,8 @@ loginModal, profileModal, profileAvatarImg, profileUserName, openItemsBtn
 		// This is debounced!
 		clearTimeout(updateCodeWrapCollapseStates.timeout);
 		updateCodeWrapCollapseStates.timeout = setTimeout(function() {
-			const prop = currentLayoutMode === 2 ? 'width' : 'height';
+			const prop =
+				currentLayoutMode === 2 || currentLayoutMode === 5 ? 'width' : 'height';
 			[htmlCode, cssCode, jsCode].forEach(function(el) {
 				const bounds = el.getBoundingClientRect();
 				const size = bounds[prop];
@@ -226,7 +227,7 @@ loginModal, profileModal, profileAvatarImg, profileUserName, openItemsBtn
 					? [currentItem.mainSizes[1], currentItem.mainSizes[0]]
 					: currentItem.mainSizes;
 		} else {
-			mainSplitSizes = [50, 50];
+			mainSplitSizes = currentLayoutMode === 5 ? [75, 25] : [50, 50];
 		}
 		return mainSplitSizes;
 	}
@@ -240,7 +241,10 @@ loginModal, profileModal, profileAvatarImg, profileUserName, openItemsBtn
 		}
 
 		var options = {
-			direction: currentLayoutMode === 2 ? 'horizontal' : 'vertical',
+			direction:
+				currentLayoutMode === 2 || currentLayoutMode === 5
+					? 'horizontal'
+					: 'vertical',
 			minSize: minCodeWrapSize,
 			gutterSize: 6,
 			onDragStart: function() {
@@ -285,15 +289,12 @@ loginModal, profileModal, profileAvatarImg, profileUserName, openItemsBtn
 			return;
 		}
 		currentLayoutMode = mode;
-		layoutBtn1.classList.remove('selected');
+		// Remove all layout classes
-		layoutBtn2.classList.remove('selected');
+		[1, 2, 3, 4, 5].forEach(layoutNumber => {
-		layoutBtn3.classList.remove('selected');
+			window[`layoutBtn${layoutNumber}`].classList.remove('selected');
-		layoutBtn4.classList.remove('selected');
+			document.body.classList.remove(`layout-${layoutNumber}`);
+		});
 		$('#layoutBtn' + mode).classList.add('selected');
-		document.body.classList.remove('layout-1');
-		document.body.classList.remove('layout-2');
-		document.body.classList.remove('layout-3');
-		document.body.classList.remove('layout-4');
 		document.body.classList.add('layout-' + mode);
 
 		resetSplitting();
@@ -366,7 +367,8 @@ loginModal, profileModal, profileAvatarImg, profileUserName, openItemsBtn
 	// Calculates the sizes of html, css & js code panes.
 	function getCodePaneSizes() {
 		var sizes;
-		var dimensionProperty = currentLayoutMode === 2 ? 'width' : 'height';
+		var dimensionProperty =
+			currentLayoutMode === 2 || currentLayoutMode === 5 ? 'width' : 'height';
 		try {
 			sizes = [
 				htmlCode.style[dimensionProperty],
@@ -2119,6 +2121,7 @@ loginModal, profileModal, profileAvatarImg, profileUserName, openItemsBtn
 		layoutBtn2.addEventListener('click', getToggleLayoutButtonListener(2));
 		layoutBtn3.addEventListener('click', getToggleLayoutButtonListener(3));
 		layoutBtn4.addEventListener('click', getToggleLayoutButtonListener(4));
+		layoutBtn5.addEventListener('click', getToggleLayoutButtonListener(5));
 
 		notificationsBtn.addEventListener('click', function() {
 			scope.toggleModal(notificationsModal);

src/style.css

@@ -226,6 +226,15 @@ body:not(.light-version).overlay-visible .main-container {
 .layout-2 .demo-side {
 	width: auto;
 }
+/* All vertical layout */
+.layout-5 .code-side {
+	flex-direction: row;
+	width: auto;
+}
+.layout-5 .code-wrap {
+	height: auto;
+}
+/* Fullscreen layout */
 .layout-4 .code-side {
 	display: none;
 }
@@ -256,7 +265,8 @@ body:not(.light-version).overlay-visible .main-container {
 	transition: height 0.3s ease, width 0.3s ease;
 	will-change: height;
 }
-.layout-2 .code-wrap.is-minimized {
+.layout-2 .code-wrap.is-minimized,
+.layout-5 .code-wrap.is-minimized {
 	flex-direction: row;
 }
 .is-dragging .code-wrap {
@@ -266,13 +276,6 @@ body:not(.light-version).overlay-visible .main-container {
 	height: auto;
 	width: 33%;
 }
-.code-wrap:nth-of-type(3) {
-	animation-delay: 0.3s;
-}
-.code-wrap:nth-of-type(5) {
-	animation-delay: 0.4s;
-}
-
 .code-wrap__header {
 	display: flex;
 	flex-shrink: 0;
@@ -292,7 +295,8 @@ body:not(.light-version).overlay-visible .main-container {
 	opacity: 0.5;
 	/*transform-origin: left center;*/
 }
-.layout-2 .code-side .is-minimized .code-wrap__header {
+.layout-2 .code-side .is-minimized .code-wrap__header,
+.layout-5 .code-side .is-minimized .code-wrap__header {
 	writing-mode: vertical-lr;
 	padding: 10px 5px;
 }
@@ -337,7 +341,9 @@ body:not(.light-version).overlay-visible .main-container {
 	height: calc(100% - 25px); /* 25px for header */
 	font-size: var(--code-font-size);
 }
-.layout-2 .is-minimized .Codemirror {
+/* TODO: Check why? */
+.layout-2 .is-minimized .Codemirror,
+.layout-5 .is-minimized .Codemirror {
 	height: calc(100%);
 }
 .Codemirror pre {