zadam/trilium
1
1
Fork 0
mirror of https://github.com/zadam/trilium.git synced 2024-11-11 09:46:25 +08:00
Code Issues Projects Releases Packages 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;
grid-template-areas: "header header"
"tree-actions title"
"search note-detail"
"tree note-detail"
"parent-list note-detail"
"parent-list label-list";
"left-pane title"
"left-pane note-detail";
grid-template-columns: 2fr 5fr;
grid-template-rows: auto
auto
auto
1fr
auto
auto;
1fr;
justify-content: center;
grid-gap: 10px;
@ -291,7 +285,6 @@ div.ui-tooltip {
.cm-matchhighlight {background-color: #eeeeee}
#label-list {
grid-area: label-list;
color: #777777;
border-top: 1px solid #eee;
padding: 5px; display: none;

42
src/views/index.ejs
View file

@ -38,7 +38,7 @@
</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;">
<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>
@ -54,28 +54,28 @@
</div>
<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 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">
<button id="do-search-button" class="btn btn-primary btn-sm" title="Search">Search</button>
<div id="search-box" style="display: none; padding: 10px; margin-top: 10px;">
<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">
<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 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 id="tree" class="hide-toggle" style="overflow: auto; flex-grow: 100; flex-shrink: 100; margin-top: 10px;">
</div>
</div>
<div id="tree" class="hide-toggle" style="grid-area: tree; overflow: auto;">
</div>
<div id="parent-list">
<p><strong>Note locations:</strong></p>
<div id="parent-list" class="hide-toggle">
<p><strong>Note locations:</strong></p>
<ul id="parent-list-inner"></ul>
<ul id="parent-list-inner"></ul>
</div>
</div>
<div class="hide-toggle" style="grid-area: title;">
@ -206,12 +206,12 @@
</div>
<div id="children-overview"></div>
</div>
<div id="label-list">
<button class="btn btn-sm show-labels-button">Labels:</button>
<div id="label-list">
<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>