Make the files pane collapsible. This is the limit of my CSS ability.

git-svn-id: https://www.unprompted.com/svn/projects/tildefriends/trunk@3848 ed5197a5-7fde-0310-b194-c3ffbd925b24

core/client.js

@@ -113,6 +113,14 @@ function edit() {
 	});
 }
 
+function hideFiles() {
+	document.getElementById('filesPane').classList.add('collapsed');
+}
+
+function showFiles() {
+	document.getElementById('filesPane').classList.remove('collapsed');
+}
+
 function trace() {
 	fetch('/trace')
 		.then(function(response) {

core/index.html

@@ -35,12 +35,19 @@
 					<input type="button" id="revert" name="revert" value="Revert to Saved" onclick="revert()">
 				</div>
 				<div class="hbox" style="height: 100%">
-					<div id="filesPane" style="flex: 1 1 10%">
+					<div id="filesPane">
+						<div class="hbox">
+							<span id="files_header">Files</span>
+							<span id="files_hide" onclick="hideFiles()">«</span>
+							<span id="files_show" onclick="showFiles()">»</span>
+						</div>
+						<div id="files_content">
 							<ul id="files"></ul>
 							<br>
 							<div><button onclick="newFile()">New File</button></div>
 							<div><button onclick="removeFile()">Remove File</button></div>
 						</div>
+					</div>
 					<div id="docPane" style="display: flex; flex: 1 1 50%; flex-flow: column">
 						<div style="flex: 1 1 50%; position: relative">
 							<textarea id="editor" class="main"></textarea>

core/style.css

@@ -162,6 +162,51 @@ a:active {
 .cyan { color: #2aa198; }
 .green { color: #859900; }
 
+#files_header {
+	font-weight: bold;
+	text-align: center;
+	flex: 1;
+}
+
+#files_hide {
+	font-weight: bold;
+	width: 100%;
+	right: 0;
+	flex: 0;
+	padding: 0.25em;
+	cursor: pointer;
+}
+
+#files_show {
+	display: none;
+	padding: 0.25em;
+	cursor: pointer;
+}
+
+#filesPane {
+	flex: 1 1 10%;
+}
+
+#filesPane.collapsed {
+	flex: 0;
+}
+
+.collapsed #files_header {
+	display: none;
+}
+
+.collapsed #files_content {
+	display: none;
+}
+
+.collapsed #files_hide {
+	display: none;
+}
+
+.collapsed #files_show {
+	display: block;
+}
+
 #files {
 	list-style-type: none;
 	margin: 0;