add ability to toggle layout

Author: silverweed

index.html

@@ -15,37 +15,47 @@
     <section class='main-content'>
         <div class='tierlist'>
         </div>
-        <div class='bottom-container'>
-            <div class='buttons-container'>
-                <div class='button'>
-                    <label for='load-img-input'>
-                        <img src='plus.png' title='Add images'/>
-                    </label>
-                    <input id='load-img-input' type='file' accept='image/*' multiple/>
-                </div>
-                <div class='button'>
-                    <label for='reset-list-input'>
-                        <img src='reset.png' title='Reset list'>
-                    </label>
-                    <input id='reset-list-input' type='button' />
-                </div>
-                <div class='button'>
-                    <label for='export-input'>
-                        <img src='export.png' title='Export'>
-                    </label>
-                    <input id='export-input' type='button' />
-                </div>
-                <div class='button'>
-                    <label for='import-input'>
-                        <img src='import.png' title='Import'/>
-                    </label>
-                    <input id='import-input' type='file' accept='.json' multiple/>
+        <div class='toggleable-container'>
+            <div class='bottom-container'>
+                <div class='buttons-container'>
+                    <div class='button'>
+                        <label for='load-img-input'>
+                            <img src='plus.png' title='Add images'/>
+                        </label>
+                        <input id='load-img-input' type='file' accept='image/*' multiple/>
+                    </div>
+                    <div class='button'>
+                        <label for='reset-list-input'>
+                            <img src='reset.png' title='Reset list'>
+                        </label>
+                        <input id='reset-list-input' type='button' />
+                    </div>
+                    <div class='button'>
+                        <label for='export-input'>
+                            <img src='export.png' title='Export'>
+                        </label>
+                        <input id='export-input' type='button' />
+                    </div>
+                    <div class='button'>
+                        <label for='import-input'>
+                            <img src='import.png' title='Import'/>
+                        </label>
+                        <input id='import-input' type='file' accept='.json' multiple/>
+                    </div>
                 </div>
+                <section class='images'></section>
             </div>
-            <section class='images'></section>
+            <p class='hint'>Hint: you can paste an image into this page to have it show up in the image list.</p>
         </div>
-        <p class='hint'>Hint: you can paste an image into this page to have it show up in the image list.</p>
     </section>
-    <img id='trash' src='trash_bin.png' title='Delete image (drag it over here)'></img>
+    <div class="top-container">
+        <img id='trash' src='trash_bin.png' title='Delete image (drag it over here)'></img>
+        <div class='button'>
+            <label for='toggle-layout'>
+                <img src='toggle_layout.png' title='Toggle Layout'/>
+            </label>
+            <input id='toggle-layout' type='button'/>
+        </div>
+    </div>
   </body>
 </html>

tiers.css

@@ -34,6 +34,20 @@ body {
 	flex-flow: column;
 }
 
+.main-content.vertical {
+	flex-flow: row !important;
+}
+
+.vertical .tierlist {
+	width: 80%;
+}
+
+.toggleable-container {
+	display: flex;
+	flex-flow: column;
+	flex-grow: 1;
+}
+
 .tierlist span {
 	min-width: 100px;
 	min-height: 100px;
@@ -134,6 +148,13 @@ img.draggable.dragged, .button:active {
 	flex-flow: row;
 	align-items: center;
 	margin-top: 15px;
+	flex-grow: 1;
+}
+
+.vertical .bottom-container {
+	flex-flow: column !important;
+	margin-left: 15px;
+	margin-top: 0px !important;
 }
 
 .bottom-container input {
@@ -171,18 +192,42 @@ img.draggable.dragged, .button:active {
 	width: 270px;
 }
 
+.vertical .buttons-container {
+	justify-content: center;
+}
+
 .gh-link {
 	position: absolute;
 	top: 5px;
 	color: #ccc;
 	text-decoration: none;
 }
 
-#trash {
+.top-container {
 	position: absolute;
 	top: 5px;
 	right: 5px;
 	height: 60px;
+	display: flex;
+	flex-flow: row;
+}
+
+.top-container * {
+	height: 100%;
+	overflow: hidden;
+	margin: 0;
+	padding-left: 5px;
+	padding-right: 5px;
+	border: 0;
+}
+
+.top-container input {
+	border: 0;
+	padding: 0;
+	display: none;
+}
+
+#trash {
 	opacity: 0.4;
 }
 
@@ -194,4 +239,5 @@ img.draggable.dragged, .button:active {
 	font-style: italic;
 	font-size: small;
 	color: #ccc;
+	padding: 0px 10px;
 }

tiers.js

@@ -31,6 +31,10 @@ let unique_id = 0;
 
 let unsaved_changes = false;
 
+const LAYOUT_HORIZONTAL = 0;
+const LAYOUT_VERTICAL = 1;
+let cur_layout = LAYOUT_HORIZONTAL;
+
 // Contains [[header, input, label]]
 let all_headers = [];
 let headers_orig_min_width;
@@ -145,6 +149,7 @@ window.addEventListener('load', () => {
 	});
 
 	bind_trash_events();
+	bind_toggle_layout_events();
 
 	window.addEventListener('beforeunload', (evt) => {
 		if (!unsaved_changes) return null;
@@ -458,3 +463,20 @@ function bind_trash_events() {
 		}
 	});
 }
+
+function bind_toggle_layout_events() {
+	let toggle = document.getElementById('toggle-layout');
+	toggle.addEventListener('click', () => {
+		set_layout((cur_layout + 1) % 2);
+	});
+}
+
+function set_layout(layout) {
+	let main = document.getElementsByClassName("main-content")[0];
+	if (layout === LAYOUT_VERTICAL) {
+		main.classList.add("vertical");
+	} else {
+		main.classList.remove("vertical");
+	}
+	cur_layout = layout;
+}