coolaj86
/
walnut_launchpad.html
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

added file tree. needs logic tho.

This commit is contained in:
Jon Lambson 2017-09-11 11:18:52 -06:00
parent e49337e936
commit 2fdb097a0a
2 changed files with 76 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

22
css/styles.css
View File

@ -34,7 +34,9 @@
-webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.05);
box-shadow: inset 0 1px 1px rgba(0,0,0,.05);
}
.ls-none {
list-style: none;
}
/* Side Menu */
.side-menu {
padding-top: 10px;
@ -293,3 +295,21 @@
list-style: none;
-webkit-padding-start: 0px;
}
.file-tree-container .file_tree { -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; }
.file-tree-container .file_tree input[type=radio], .file-tree-container .file_tree input[type=checkbox] { width: 0; height: 0; opacity: 0; position: absolute; margin: 0; }
.file-tree-container .file_tree label { display: block; width: 100%; font-size: 14px; color: black; height: 30px; line-height: 30px; padding: 0 8px; cursor: pointer; white-space: nowrap; }
.file-tree-container .file_tree label:hover { color: #a4d3ff; } .file_tree .dir_wrapper { display: none; padding-left: 28px; }
.file-tree-container .file_tree .dir_wrapper label { padding-left: 0; }
.file-tree-container .file_tree input[type=checkbox] + label { color: black; padding-left: 30px; }
.file-tree-container .file_tree input[type=checkbox] + label:hover { color: #a4d3ff; }
.file-tree-container .file_tree input[type=radio]:checked + label { color: #337ab7; }
.file-tree-container .file_tree input[type=checkbox]:checked + label + .dir_wrapper { display: block; }
.file-tree-container .file_tree input[type=checkbox] + label { background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACQAAABQCAYAAABxs9dPAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyNpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNS1jMDE0IDc5LjE1MTQ4MSwgMjAxMy8wMy8xMy0xMjowOToxNSAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIChNYWNpbnRvc2gpIiB4bXBNTTpJbnN0YW5jZUlEPSJ4bXAuaWlkOjc0Q0FDNEY5NDFGQjExRTQ4MEQ4ODY5MEFBODE4RDk2IiB4bXBNTTpEb2N1bWVudElEPSJ4bXAuZGlkOjc0Q0FDNEZBNDFGQjExRTQ4MEQ4ODY5MEFBODE4RDk2Ij4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6NzRDQUM0Rjc0MUZCMTFFNDgwRDg4NjkwQUE4MThEOTYiIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6NzRDQUM0Rjg0MUZCMTFFNDgwRDg4NjkwQUE4MThEOTYiLz4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz7T+9ssAAABJ0lEQVR42uzZMQrCMBgF4FbE0UFPILg5qdAbCA7q5qK7p3Bw8BK6u4giboKCJxDB1cFdsOjapb5ACyoiNG3pj30P3hj4SBOaEPP6cFwjWG5oAz0aMSSjMaaIbtGqFJCP2qE1KSCVgjdTkaKyIccr1B49SwGp5NF6HCAbvRjJpOTN9htog/YTAs3QXthFbUja9gQRRBBBBBFEEEEEpQVkalyl0zVD6tYxlfbJZK0h13W5ywgiiCCCCCKIIIII+nGmnp/u4g75k4Bj1IviCHXiAg00xlXQbhwo3TXUQRdoTtKibqPLqFFhH/Ba6BpdSQGpNL3+793ej3pRHCbkGPuz/PnmekgIZPNfRhBBBBFEEEEEEURQ8DO1pXGtjirWN1DZKz/Za54CDABbrytKn66XKwAAAABJRU5ErkJggg==); background-size: 18px 40px; background-position: top 7px left 6px; background-repeat: no-repeat; vertical-align: middle; }
.file-tree-container .file_tree input[type=checkbox] + label:hover { background-position: top -18px left 6px; }

55
templates/website.html
View File

@ -197,6 +197,61 @@
</div>
<div class="white-well">
<div class="file-tree-container">
<div class="file_tree">
<input type="checkbox" id="f_myfilms">
<label for="f_myfilms">My Films</label>
<div class="dir_wrapper">
<input type="checkbox" id="f_wehave">
<label for="f_wehave">We Have</label>
<div class="dir_wrapper">
<input type="checkbox" id="f_togo">
<label for="f_togo">To Go</label>
<div class="dir_wrapper">
<input type="radio" name="hosted_files" id="f_deeper_js" value="Deeper.js">
<label for="f_deeper_js">Deeper.js</label>
<input type="radio" name="hosted_files" id="f_fileception_js" value="Fileception.js">
<label for="f_fileception_js">Fileception.js</label>
</div>
</div>
</div>
<input type="checkbox" id="f_justafolder">
<label for="f_justafolder">Just a folder</label>
<div class="dir_wrapper">
<input type="radio" name="hosted_files" id="f_withafile_js" value="with_a_file.js">
<label for="f_withafile_js">with_a_file.js</label>
</div>
<input type="radio" name="hosted_files" id="f_main_js" value="main.js">
<label for="f_main_js">main.js</label>
<input type="radio" name="hosted_files" id="f_globals_js" value="globals.js">
<label for="f_globals_js">globals.js</label>
<input type="radio" name="hosted_files" id="f_filler_js" value="filler.js">
<label for="f_filler_js">filler.js</label>
<input type="radio" name="hosted_files" id="f_horror_vacui_js" value="horror_vacui.js">
<label for="f_horror_vacui_js">horror_vacui.js</label>
</div>
</div>
</div>