Add a search input control

0486845a · Magnus Norddahl · 50c00991 · 0486845a · 0486845a · 0486845a
Commit 0486845a authored 4 years ago by Magnus Norddahl
--- a/Help/index.css
+++ b/Help/index.css
@@ -23,10 +23,26 @@ a:hover { color: #0b434a; }

 body { width: 100vw; height: 100vh; }

-.listview {
+.sidepanel {
 	width: 300px;
 	background: rgb(240, 240, 240);
 	border-right: 1px solid rgb(200,200,200);
+}
+
+.searchbox {
+	margin: 10px 10px 5px 10px;
+	padding: 2px 10px;
+	border: 1px solid #dddddd;
+	background: white;
+	line-height: 25px;
+}
+
+.searchbox:focus {
+	outline: none;
+	border-color: rgb(150,150,255);
+}
+
+.listview {
 	overflow-y: scroll;
 	padding: 5px 0;
 }

--- a/Help/index.html
+++ b/Help/index.html
@@ -6,7 +6,10 @@
 	<link href="index.css" rel="stylesheet" type="text/css" />
 </head>
 <body class="hbox">
-	<div id="listview" class="listview"></div>
+	<div id="sidepanel" class="sidepanel view vbox">
+		<input id="searchbox" class="searchbox view" type="text" placeholder="Search for..." />
+		<div id="listview" class="listview view expanding"></div>
+	</div>
 	<iframe id="content" class="content expanding"></iframe>
 	<script src="index.js"></script>
 </body>

--- a/Help/index.js
+++ b/Help/index.js