Tools/Notes
1
0
Fork 0
mirror of https://github.com/TriliumNext/Notes.git synced 2025-10-31 21:11:30 +08:00
Code Issues Packages Projects Releases Wiki Activity

restructuring CSS grid/flex which fixes jumpy scrolling in tree

Browse Source
This commit is contained in:
azivner 2018-04-13 19:58:33 -04:00
parent afd7df0942
commit 66cee8daa4
2 changed files with 24 additions and 31 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

13
src/public/stylesheets/style.css
View File

@ -4,18 +4,12 @@
display: grid; display: grid;
grid-template-areas: "header header" grid-template-areas: "header header"
"tree-actions title" "left-pane title"
"search note-detail" "left-pane note-detail";
"tree note-detail"
"parent-list note-detail"
"parent-list label-list";
grid-template-columns: 2fr 5fr; grid-template-columns: 2fr 5fr;
grid-template-rows: auto grid-template-rows: auto
auto auto
auto 1fr;
1fr
auto
auto;
justify-content: center; justify-content: center;
grid-gap: 10px; grid-gap: 10px;
@ -291,7 +285,6 @@ div.ui-tooltip {
.cm-matchhighlight {background-color: #eeeeee} .cm-matchhighlight {background-color: #eeeeee}
#label-list { #label-list {
grid-area: label-list;
color: #777777; color: #777777;
border-top: 1px solid #eee; border-top: 1px solid #eee;
padding: 5px; display: none; padding: 5px; display: none;

42
src/views/index.ejs
View File

@ -38,7 +38,7 @@
</div> </div>
</div> </div>
<div class="hide-toggle" style="grid-area: tree-actions;"> <div style="grid-area: left-pane; display: flex; flex-direction: column;" class="hide-toggle">
<div style="display: flex; justify-content: space-around; padding: 10px 0 10px 0; margin: 0 20px 0 20px; border: 1px solid #ccc;"> <div style="display: flex; justify-content: space-around; padding: 10px 0 10px 0; margin: 0 20px 0 20px; border: 1px solid #ccc;">
<a id="create-top-level-note-button" title="Create new top level note" class="icon-action" <a id="create-top-level-note-button" title="Create new top level note" class="icon-action"
style="background: url('/images/icons/file-plus.png')"></a> style="background: url('/images/icons/file-plus.png')"></a>
@ -54,28 +54,28 @@
</div> </div>
<input type="file" id="import-upload" style="display: none" /> <input type="file" id="import-upload" style="display: none" />
</div>
<div id="search-box" class="hide-toggle" style="grid-area: search; display: none; padding: 10px; margin-top: 10px;"> <div id="search-box" style="display: none; padding: 10px; margin-top: 10px;">
<div style="display: flex; align-items: center;"> <div style="display: flex; align-items: center;">
<input name="search-text" placeholder="Search text, labels" style="flex-grow: 100; margin-left: 5px; margin-right: 5px;" autocomplete="off"> <input name="search-text" placeholder="Search text, labels" style="flex-grow: 100; margin-left: 5px; margin-right: 5px;" autocomplete="off">
<button id="do-search-button" class="btn btn-primary btn-sm" title="Search">Search</button> <button id="do-search-button" class="btn btn-primary btn-sm" title="Search">Search</button>
</div>
<div style="display: flex; align-items: center; justify-content: space-evenly; margin-top: 10px;">
<button id="reset-search-button" class="btn btn-sm" title="Reset search">Reset search</button>
<button id="save-search-button" class="btn btn-sm" title="Save search">Save search</button>
</div>
</div> </div>
<div style="display: flex; align-items: center; justify-content: space-evenly; margin-top: 10px;"> <div id="tree" class="hide-toggle" style="overflow: auto; flex-grow: 100; flex-shrink: 100; margin-top: 10px;">
<button id="reset-search-button" class="btn btn-sm" title="Reset search">Reset search</button>
<button id="save-search-button" class="btn btn-sm" title="Save search">Save search</button>
</div> </div>
</div>
<div id="tree" class="hide-toggle" style="grid-area: tree; overflow: auto;"> <div id="parent-list">
</div> <p><strong>Note locations:</strong></p>
<div id="parent-list" class="hide-toggle"> <ul id="parent-list-inner"></ul>
<p><strong>Note locations:</strong></p> </div>
<ul id="parent-list-inner"></ul>
</div> </div>
<div class="hide-toggle" style="grid-area: title;"> <div class="hide-toggle" style="grid-area: title;">
@ -206,12 +206,12 @@
</div> </div>
<div id="children-overview"></div> <div id="children-overview"></div>
</div>
<div id="label-list"> <div id="label-list">
<button class="btn btn-sm show-labels-button">Labels:</button> <button class="btn btn-sm show-labels-button">Labels:</button>
<span id="label-list-inner"></span> <span id="label-list-inner"></span>
</div>
</div> </div>
</div> </div>