convert css grid design to flex based one

This commit is contained in:
zadam
2019-12-23 08:52:57 +01:00
parent 4f5b23fbf8
commit 613d5f93e8
6 changed files with 105 additions and 54 deletions

View File

@@ -125,52 +125,56 @@
</div>
</div>
<div id="left-pane" class="hide-in-zen-mode">
<div id="global-buttons">
<a id="create-top-level-note-button" title="Create new top level note" class="icon-action bx bx-folder-plus"></a>
<div style="display: flex; height: 100%;">
<div id="left-pane" class="hide-in-zen-mode">
<div id="global-buttons">
<a id="create-top-level-note-button" title="Create new top level note" class="icon-action bx bx-folder-plus"></a>
<a id="collapse-tree-button" title="Collapse note tree" data-kb-action="CollapseTree" class="icon-action bx bx-layer-minus"></a>
<a id="collapse-tree-button" title="Collapse note tree" data-kb-action="CollapseTree" class="icon-action bx bx-layer-minus"></a>
<a id="scroll-to-active-note-button" title="Scroll to active note" data-kb-action="ScrollToActiveNote" class="icon-action bx bx-crosshair"></a>
<a id="scroll-to-active-note-button" title="Scroll to active note" data-kb-action="ScrollToActiveNote" class="icon-action bx bx-crosshair"></a>
<a id="toggle-search-button" title="Search in notes" data-kb-action="SearchNotes" class="icon-action bx bx-search"></a>
</div>
<a id="toggle-search-button" title="Search in notes" data-kb-action="SearchNotes" class="icon-action bx bx-search"></a>
</div>
<div id="search-box">
<div class="form-group">
<div class="input-group">
<input name="search-text" id="search-text" class="form-control"
placeholder="Search text, labels" autocomplete="off">
<div id="search-box">
<div class="form-group">
<div class="input-group">
<input name="search-text" id="search-text" class="form-control"
placeholder="Search text, labels" autocomplete="off">
<div class="input-group-append">
<button id="do-search-button" class="btn btn-sm icon-button bx bx-search" title="Search (enter)"></button>
<div class="input-group-append">
<button id="do-search-button" class="btn btn-sm icon-button bx bx-search" title="Search (enter)"></button>
</div>
</div>
</div>
<div style="display: flex; align-items: center; justify-content: space-evenly; flex-wrap: wrap;">
<button id="save-search-button" class="btn btn-sm"
title="This will create new saved search note under active note.">
<span class="bx bx-save"></span> Save search</button>
<button id="close-search-button" class="btn btn-sm"><span class="bx bx-x"></span> Close search</button>
</div>
</div>
<div id="search-results">
<strong>Search results:</strong>
<div style="display: flex; align-items: center; justify-content: space-evenly; flex-wrap: wrap;">
<button id="save-search-button" class="btn btn-sm"
title="This will create new saved search note under active note.">
<span class="bx bx-save"></span> Save search</button>
<button id="close-search-button" class="btn btn-sm"><span class="bx bx-x"></span> Close search</button>
<ul id="search-results-inner"></ul>
</div>
<div id="tree"></div>
<div class="dropdown-menu dropdown-menu-sm" id="context-menu-container"></div>
</div>
<div id="search-results">
<strong>Search results:</strong>
<ul id="search-results-inner"></ul>
<div id="center-pane">
<% include tabs.ejs %>
</div>
<div id="tree"></div>
<div class="dropdown-menu dropdown-menu-sm" id="context-menu-container"></div>
</div>
<% include tabs.ejs %>
<% include dialogs/about.ejs %>
<% include dialogs/add_link.ejs %>
<% include dialogs/attributes.ejs %>

View File

@@ -1,4 +1,4 @@
<div class="note-tab-row hide-in-hide-in-zen-mode">
<div class="note-tab-row hide-in-zen-mode">
<div class="note-tab-row-content"></div>
</div>

View File

@@ -70,4 +70,6 @@
</div>
</div>
</div>
<div class="note-title-attributes" tabindex="9999"></div>
</div>