begin classisfy ui

master
Bel LaPointe 2022-02-10 11:47:53 -07:00
parent ac5f86687c
commit 0c3789af54
1 changed files with 12 additions and 17 deletions

View File

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