begin classisfy ui

spike/review/reinvent/ezmded/ui/index.html

@@ -13,31 +13,26 @@
 				max-width: 100%;
 				max-height: 100%;
 			}
-			#tree {
+			.filetree {
 				max-width: 15em;
 				width: 15em;
 				min-width: 15em;
 				overflow-x: scroll;
 			}
-			#tree > details summary {
+			.filesummary {
 				min-width: 10em;
 			}
-			#tree details {
+			.filedetails {
 				padding-inline-start: 1em;
-			}
-			details {
 				margin-top: .35em;
 				margin-bottom: .35em;
 			}
-			#tree summary > div {
+			.fileleaf {
 				display: inline-flex;
 				flex-direction: row;
 				width: calc(100% - 1em);
 			}
-			#tree summary > div > a {
-				flex-grow: 1;
-			}
-			#tree summary > div > input:first-child {
+			.filetreelink {
 				width: 100%;
 				text-align: left;
 			}
@@ -218,7 +213,7 @@
 				function htmlifyBranch(id, branch) {
 					const maxTreeTitleLength = 35
 					var parent = `
-						<input type="button" value="${branch.Leaf.Title.substr(0, maxTreeTitleLength)}" onclick="drawFile('${id}');"/>
+						<input class="filetreelink" type="button" value="${branch.Leaf.Title.substr(0, maxTreeTitleLength)}" onclick="drawFile('${id}');"/>
 						<input type="button" value="+" onclick="drawNewFile('${id}');"/>
 					`
 					if (id == "") {
@@ -234,9 +229,9 @@
 					children.sort();
 					children = children.join("\n")
 					return `
-						<details open>
-							<summary>
-								<div>${parent}</div>
+						<details class="filedetails" open>
+							<summary class="filesummary">
+								<div class="fileleaf">${parent}</div>
 							</summary>
 							${children}
 						</details>
@@ -276,7 +271,7 @@
 				<input type="submit" value="search" onclick="searchFiles(); return false;"/>
 			</form>
 			<div style="width: 100%; display: flex; flex-direction: row; flex-grow: 1;">
-				<div id="tree"></div>
+				<div id="tree" class="filetree"></div>
 				<div style="flex-grow: 1; margin-left: 1em; max-width: 1024px;">
 					<article id="searchResults" style="display: none">
 					</article>