tasiaiso/tildefriends
1
0
Fork 0
forked from cory/tildefriends
Code Issues Pull Requests Releases Wiki Activity

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

Browse Source 
git-svn-id: https://www.unprompted.com/svn/projects/tildefriends/trunk@3848 ed5197a5-7fde-0310-b194-c3ffbd925b24
This commit is contained in:
Cory McWilliams 2022-02-26 22:51:35 +00:00
parent 1bfa18b8d7
commit 011038a38a
3 changed files with 65 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
core/client.js
View File

@ -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) {

9
core/index.html
View File

@ -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>

45
core/style.css
View File

@ -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;