moved mode switcher on splash to below quickstart

Model.drawio

@@ -1 +0,0 @@
-<mxfile host="app.diagrams.net" modified="2021-04-25T14:57:23.836Z" agent="5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/90.0.4430.85 Safari/537.36 Edg/90.0.818.46" etag="K3S2uQVQjw_jQCK8DyHB" version="14.6.6" type="device"><diagram id="C5RBs43oDa-KdzZeNtuy" name="Page-1">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</diagram></mxfile>

css/_splash-page.scss

@@ -18,6 +18,9 @@
 			left:0;
 			top:0;
 		}
+		.splash-menu {
+			display: flex;
+		}
 
 		#editor-logo {
 			font-weight:bold;
@@ -63,17 +66,19 @@
 	}
 	
 	#sp-quickstart-container {
-		height:100%;
-		max-height: 500px;
 		width:70%;
 		float:right;
 		padding:40px;
+		display: flex;
+		flex-direction: column;
+		justify-content: space-between;
 
 		-webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
 		-moz-box-sizing: border-box;    /* Firefox, other Gecko */
 		box-sizing: border-box;         /* Opera/IE 8+ */
 
-		overflow-y: scroll;
+		overflow-y: auto;
+
 		&::-webkit-scrollbar {
 			background: #232125;
 			width: 0.5em;
@@ -90,13 +95,33 @@
 		&::-webkit-scrollbar-corner {
 			background: #232125;
 		}
+
+		.mode-switcher {
+			margin-top: 2em;
+			font-size: 1.2em;
+			color: $basetext;
+			a {
+				font-weight: bolder;
+				color: white;
+				margin-left: 0.5em;
+			}
+
+			//show the correct info when the .advanced class is added
+			.advanced {display: none};
+			&.advanced-mode {
+				.basic {display: none}
+				.advanced {display: inline}
+			}
+		}
 	}
 
 	#sp-quickstart {
 		display:flex;
-		flex-direction: row;
 		flex-wrap: wrap;
-		height:100%;
+		align-content: flex-start;
+		overflow-y: auto;
+		min-height: 0;
+		flex: 1 1 0;
 
 		// Fancy scrollbar
 		&::-webkit-scrollbar {
@@ -126,6 +151,9 @@
 	.sp-template {
 		display: flex;
   		align-items: center;
+		height: 5em;
+		min-width: 5em;
+		
 		text-transform: uppercase;
 		width:16%;
 		border-radius:5%;
@@ -156,11 +184,12 @@
 		}
 	}
 
+	/*
 	.sp-template:before {
 		content:'';
 		float:left;
 		padding-top:100%;
-	}
+	}*/
 
 	#sp-newpixel {
 		-webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */

debug.log

@@ -1 +0,0 @@
-[0114/110029.536:ERROR:directory_reader_win.cc(43)] FindFirstFile: The system cannot find the path specified. (0x3)

js/_editorMode.js

@@ -8,29 +8,14 @@ let modes = {
 }
 
 let infoBox = document.getElementById('editor-mode-info');
-let currentSplashButton = document.getElementById("sp-mode-palette").children[0].children[1];
 
-function splashMode(mouseEvent, mode) {
+on('click', 'switch-editor-mode-splash', function (e) {
-    if (currentSplashButton == undefined) {
+	console.log('switching mode')
-        currentSplashButton = mouseEvent.target.parentElement;
+    switchMode();
-    }
+});
-
-    if (mode !== pixelEditorMode) {
-        // Remove selected class to old button
-        currentSplashButton.classList.remove("sp-interface-selected");
-        // Add selected class to new button
-        mouseEvent.target.parentElement.classList.add("sp-interface-selected");
-
-        // Setting the new mode
-        pixelEditorMode = mode;
-    }
-
-    // Setting the new selected button
-    currentSplashButton = mouseEvent.target.parentElement;
-}
 
 function switchMode(mustConfirm = true) {
-
+	console.log('switching mode', 'current:',pixelEditorMode)
 	//switch to advanced mode
     if (pixelEditorMode == 'Basic') {
         // Switch to advanced ez pez lemon squez
@@ -41,6 +26,9 @@ function switchMode(mustConfirm = true) {
 		// Hide the palette menu
         document.getElementById('colors-menu').style.right = '200px'
 
+		//change splash text
+		document.querySelector('#sp-quickstart-container .mode-switcher').classList.add('advanced-mode');
+
         pixelEditorMode = 'Advanced';
     }
     //switch to basic mode
@@ -71,6 +59,10 @@ function switchMode(mustConfirm = true) {
         // Move the palette menu
         document.getElementById('colors-menu').style.right = '0px';
 
+
+		//change splash text
+		document.querySelector('#sp-quickstart-container .mode-switcher').classList.remove('advanced-mode');
+
 		pixelEditorMode = 'Basic';
     }
 }

js/_variables.js

@@ -5,7 +5,7 @@ var dragging = false;
 var lastMouseClickPos = [0,0];
 var dialogueOpen = true;
 var documentCreated = false;
-var pixelEditorMode = "Advanced";
+var pixelEditorMode = "Basic";
 
 //common elements
 var brushPreview = document.getElementById("brush-preview");

views/pixel-editor-splash-page.hbs

@@ -1,42 +0,0 @@
-<h1>{{title}}</h1>
-
-<p>
-The Lospec Pixel editor is a free pixel art program that you can use right here
-in your web browser. Our goal was to create an easy to use, intuitive and
-unobtrusive pixel art application that you can use anywhere. Whether you're
-creating assets for a game or just want to make 8 bit art, this tool is an easy
-way to pixel fast.
-</p>
-
-<img class="pixel-editor-screenshot" src="/pixel-editor/pixel-editor-screenshot.png" alt="Lospec Pixel Editor Screenshot" />
-
-<p>
-This application does not have all the features of more advanced desktop editor,
-but we will add more over time. It currently features a pencil, eraser, fill, pan, eyedropper
-and zoom tool. You can also easily adjust any colors in your palette. You can
-use any palette in our <a href="/palette-list">Palette List</a> by clicking the pencil next to the palette
-title.
-</p>
-
-<p>
-This app currently only works on desktops, and requires a modern browser such as
-the latest versions of <a target="_blank" href="https://www.mozilla.org/en-US/firefox/new/">Firefox or Chrome</a>.
-</p>
-
-<a class="link-button" href="/pixel-editor/app">Enter app now&nbsp;&nbsp;{{svg "angle-right.svg" width="32" height="32"}}</a>
-
-<hr />
-
-<p>This app has been made in collaboration with <a {{outbound}} href="https://github.com/lospec/pixel-editor/graphs/contributors">contributors</a> on GitHub. We welcome anyone to submit bugfixes and new features.</p>
-
-<div><strong>Our Contributors:</strong></div>
-
-<div class="contributors">
-
-</div>
-
-<a class="link-button" {{outbound}} href="https://github.com/lospec/pixel-editor">View on GitHub&nbsp;&nbsp;{{svg "github"}}</a>
-
-
-
-

views/splash-page-popup.hbs

@@ -22,14 +22,6 @@
 		<div class="splash-menu">
 			<div id="sp-newpixel">
 				<h1>New Custom Pixel</h1>
-				<!-- Editor mode-->
-				<h2>Editor mode</h2>
-				<div class="sp-np-entry" id="sp-mode-palette">
-					<div class="button-menu">
-						<div class="bm-left" onclick="splashMode(event,'Basic')"><p>Basic</p></div>
-						<div class="sp-interface-selected bm-right" onclick="splashMode(event,'Advanced')"><p>Advanced</p></div>
-					</div> 
-				</div>
 
 				<h2>Size</h2>
 				<div class="sp-np-entry">
@@ -63,6 +55,16 @@
 					<div class="sp-template" onclick="newFromTemplate('',256,256)"><p><span>New</span> 256x256</p></div>
 					<div class="sp-template" onclick="newFromTemplate('',512,512)"><p><span>New</span> 512x512</p></div>
 				</div>
+
+				<div class="mode-switcher">
+					<span class="basic">You are using Basic Mode.</span> 
+					<span class="advanced">You are using Advanced Mode.</span> 
+					<a id="switch-editor-mode-splash" href="#">
+						<span class="basic">Switch to Advanced Mode.</span> 
+						<span class="advanced">Switch to using Basic Mode.</span> 
+						»
+						</a>
+				</div>
 			</div>
 		</div>
 	</div>