Minor bugfixes: Update address bar theme color when changing color theme, hide mobile track editor selection outline in light theme, use correct hover box width in desktop track editor, various html tweaks.

johnnesky · johnnesky · commit 77c599a1d0d6 · 2020-02-16T11:14:50.000-08:00
diff --git a/editor/ColorConfig.ts b/editor/ColorConfig.ts
@@ -225,6 +225,11 @@ namespace beepbox {
 		
 		public static setTheme(name: string): void {
 			this._styleElement.textContent = this.themes[name];
+			
+			const themeColor = <HTMLMetaElement> document.querySelector("meta[name='theme-color']");
+			if (themeColor != null) {
+				themeColor.setAttribute("content", getComputedStyle(document.documentElement).getPropertyValue('--ui-widget-background'));
+			}
 		}
 	}
 }
diff --git a/editor/TrackEditor.ts b/editor/TrackEditor.ts
@@ -96,7 +96,7 @@ namespace beepbox {
 			this._downHighlight,
 			this._playhead,
 		);
-		private readonly _select: HTMLSelectElement = HTML.select({className: "trackSelectBox", style: "background: none; border: none; appearance: none; color: transparent; position: absolute; touch-action: none;"});
+		private readonly _select: HTMLSelectElement = HTML.select({className: "trackSelectBox", style: "background: none; border: none; appearance: none; border-radius: initial; box-shadow: none; color: transparent; position: absolute; touch-action: none;"});
 		public readonly container: HTMLElement = HTML.div({class: "noSelection", style: "height: 128px; position: relative; overflow:hidden;"}, this._svg, this._select);
 		
 		
@@ -802,6 +802,7 @@ namespace beepbox {
 				this._boxHighlight.setAttribute("x", "" + (1 + this._barWidth * bar));
 				this._boxHighlight.setAttribute("y", "" + (1 + (this._channelHeight * channel)));
 				this._boxHighlight.setAttribute("height", "" + (this._channelHeight - 2));
+				this._boxHighlight.setAttribute("width", "" + (this._barWidth - 2));
 				this._boxHighlight.style.visibility = "visible";
 			} else {
 				this._boxHighlight.style.visibility = "hidden";
diff --git a/website/2_3/index.html b/website/2_3/index.html
@@ -23,9 +23,6 @@
 			font-size: 30px;
 			text-align: center;
 		}
-		.centerDiv {
-			margin: 0px auto;
-		}
 		a {
 			color: #98f;
 		}
diff --git a/website/beepbox_offline_template.html b/website/beepbox_offline_template.html
@@ -59,9 +59,6 @@
 			margin-bottom: 0.5em;
 			-webkit-text-stroke-width: 0;
 		}
-		.centerDiv {
-			margin: 0px auto;
-		}
 		a {
 			color: var(--link-accent, #98f);
 		}
diff --git a/website/competition/index.html b/website/competition/index.html
@@ -6,7 +6,7 @@
 	<title>BeepBox Competition</title>
 	<meta name="mobile-web-app-capable" content="yes" />
 	<meta name="apple-mobile-web-app-capable" content="yes" />
-	<meta name="apple-mobile-web-app-status-bar-style" content="black" />
+	<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />
 	<meta name="theme-color" content="#444" />
 	<meta name="format-detection" content="telephone=no" />
 	<link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet" rel="stylesheet" media="none" onload="if (this.media != 'all') this.media='all';" /> <!-- this is a trick to load CSS asynchronously. -->
diff --git a/website/index.html b/website/index.html
@@ -7,10 +7,10 @@
 	<meta name="application-name" content="BeepBox" />
 	<meta name="apple-mobile-web-app-title" content="BeepBox">
 	<meta name="description" content="BeepBox is an online tool for sketching and sharing instrumental melodies." />
-	<meta name="keywords" content="chiptune, instrumental, music, melody, composition, tool, square wave, NES, NSF, BeepBox" />
+	<meta name="keywords" content="chiptune, instrumental, music, song, melody, composition, tool, free, BeepBox" />
 	<meta name="mobile-web-app-capable" content="yes" />
 	<meta name="apple-mobile-web-app-capable" content="yes" />
-	<meta name="apple-mobile-web-app-status-bar-style" content="black" />
+	<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />
 	<meta name="theme-color" content="#444" />
 	<meta name="msapplication-TileColor" content="#603cba" />
 	<meta name="msapplication-config" content="/browserconfig.xml" />
@@ -67,9 +67,6 @@
 			margin-bottom: 0.5em;
 			-webkit-text-stroke-width: 0;
 		}
-		.centerDiv {
-			margin: 0px auto;
-		}
 		a {
 			color: var(--link-accent, #98f);
 		}
diff --git a/website/index_debug.html b/website/index_debug.html
@@ -6,7 +6,7 @@
 	<title>BeepBox DEBUG</title>
 	<meta name="mobile-web-app-capable" content="yes" />
 	<meta name="apple-mobile-web-app-capable" content="yes" />
-	<meta name="apple-mobile-web-app-status-bar-style" content="black" />
+	<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />
 	<meta name="theme-color" content="#444" />
 	<meta name="format-detection" content="telephone=no" />
 	<link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet" rel="stylesheet" media="none" onload="if (this.media != 'all') this.media='all';" /> <!-- this is a trick to load CSS asynchronously. -->

Original file line number	Diff line number	Diff line change
`@@ -225,6 +225,11 @@ namespace beepbox {`
`225`	`225`
`226`	`226`	`public static setTheme(name: string): void {`
`227`	`227`	`this._styleElement.textContent = this.themes[name];`
	`228`	`+`
	`229`	`+ const themeColor = <HTMLMetaElement> document.querySelector("meta[name='theme-color']");`
	`230`	`+ if (themeColor != null) {`
	`231`	`+ themeColor.setAttribute("content", getComputedStyle(document.documentElement).getPropertyValue('--ui-widget-background'));`
	`232`	`+ }`
`228`	`233`	`}`
`229`	`234`	`}`
`230`	`235`	`}`
Original file line number	Diff line number	Diff line change
`@@ -23,9 +23,6 @@`
`23`	`23`	`font-size: 30px;`
`24`	`24`	`text-align: center;`
`25`	`25`	`}`
`26`		`- .centerDiv {`
`27`		`- margin: 0px auto;`
`28`		`- }`
`29`	`26`	`a {`
`30`	`27`	`color: #98f;`
`31`	`28`	`}`
Original file line number	Diff line number	Diff line change
`@@ -59,9 +59,6 @@`
`59`	`59`	`margin-bottom: 0.5em;`
`60`	`60`	`-webkit-text-stroke-width: 0;`
`61`	`61`	`}`
`62`		`- .centerDiv {`
`63`		`- margin: 0px auto;`
`64`		`- }`
`65`	`62`	`a {`
`66`	`63`	`color: var(--link-accent, #98f);`
`67`	`64`	`}`