small refactoring of template and CSS

This commit is contained in:
azivner 2018-09-06 09:33:38 +02:00
parent 6668b55d6e
commit bdc2fa1019
3 changed files with 388 additions and 360 deletions

View File

@ -13,7 +13,7 @@ rm -r $PKG_DIR
mkdir $PKG_DIR mkdir $PKG_DIR
cd $PKG_DIR cd $PKG_DIR
wget https://nodejs.org/dist/latest-v8.x/node-v${NODE_VERSION}-linux-x64.tar.xz wget https://nodejs.org/dist/latest-v10.x/node-v${NODE_VERSION}-linux-x64.tar.xz
tar xvfJ node-v${NODE_VERSION}-linux-x64.tar.xz tar xvfJ node-v${NODE_VERSION}-linux-x64.tar.xz
rm node-v${NODE_VERSION}-linux-x64.tar.xz rm node-v${NODE_VERSION}-linux-x64.tar.xz

View File

@ -23,6 +23,34 @@
padding: 4px; padding: 4px;
} }
#left-pane {
grid-area: left-pane;
display: flex;
flex-direction: column;
}
#global-buttons {
display: flex;
justify-content: space-around;
padding: 10px 0 10px 0;
margin: 0 10px 0 16px;
border: 1px solid #ccc;
}
#search-box {
display: none;
padding: 10px;
margin-top: 10px;
}
#title-container {
grid-area: title;
}
.tdialog {
display: none; /* hidden by default */
}
#note-detail-wrapper { #note-detail-wrapper {
position: relative; position: relative;
overflow: hidden; overflow: hidden;

View File

@ -49,8 +49,8 @@
</div> </div>
</div> </div>
<div style="grid-area: left-pane; display: flex; flex-direction: column;" class="hide-toggle"> <div id="left-pane" class="hide-toggle">
<div style="display: flex; justify-content: space-around; padding: 10px 0 10px 0; margin: 0 10px 0 16px; border: 1px solid #ccc;"> <div id="global-buttons">
<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-24.png')"></a> style="background: url('/images/icons/file-plus-24.png')"></a>
@ -66,7 +66,7 @@
<input type="file" id="import-upload" style="display: none" /> <input type="file" id="import-upload" style="display: none" />
<div id="search-box" style="display: none; padding: 10px; margin-top: 10px;"> <div id="search-box">
<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-sm icon-button" title="Search (enter)" <button id="do-search-button" class="btn btn-sm icon-button" title="Search (enter)"
@ -97,7 +97,7 @@
<div id="tree"></div> <div id="tree"></div>
</div> </div>
<div style="grid-area: title;"> <div id="title-container">
<div style="display: flex; align-items: center;"> <div style="display: flex; align-items: center;">
<div class="dropdown hide-toggle"> <div class="dropdown hide-toggle">
<button id="note-path-list-button" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" class="btn btn-sm dropdown-toggle"> <button id="note-path-list-button" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" class="btn btn-sm dropdown-toggle">
@ -269,9 +269,8 @@
<span id="attribute-list-inner"></span> <span id="attribute-list-inner"></span>
</div> </div>
</div> </div>
</div>
<div id="add-link-dialog" title="Add note link" style="display: none;"> <div id="add-link-dialog" class="tdialog" title="Add note link">
<form id="add-link-form"> <form id="add-link-form">
<div id="add-link-type-div" class="radio"> <div id="add-link-type-div" class="radio">
<label title="Add HTML link to the selected note at cursor in current note"> <label title="Add HTML link to the selected note at cursor in current note">
@ -317,7 +316,7 @@
</form> </form>
</div> </div>
<div id="jump-to-note-dialog" title="Jump to note" style="display: none;"> <div id="jump-to-note-dialog" class="tdialog" title="Jump to note">
<div class="form-group"> <div class="form-group">
<label for="jump-to-note-autocomplete">Note</label> <label for="jump-to-note-autocomplete">Note</label>
<div class="input-group"> <div class="input-group">
@ -330,7 +329,7 @@
<button id="show-in-full-text-button" class="btn btn-sm">Search in full text <kbd>ctrl+enter</kbd></button> <button id="show-in-full-text-button" class="btn btn-sm">Search in full text <kbd>ctrl+enter</kbd></button>
</div> </div>
<div id="protected-session-password-dialog" title="Protected session" style="display: none;"> <div id="protected-session-password-dialog" class="tdialog" title="Protected session">
<form id="protected-session-password-form"> <form id="protected-session-password-form">
<div class="form-group"> <div class="form-group">
<label for="protected-session-password">To proceed with requested action you need to start protected session by entering password:</label> <label for="protected-session-password">To proceed with requested action you need to start protected session by entering password:</label>
@ -347,7 +346,7 @@
</form> </form>
</div> </div>
<div id="options-dialog" title="Options" style="display: none;"> <div id="options-dialog" class="tdialog" title="Options">
<div id="options-tabs"> <div id="options-tabs">
<ul> <ul>
<li><a href="#appearance">Appearance</a></li> <li><a href="#appearance">Appearance</a></li>
@ -535,7 +534,7 @@
</div> </div>
</div> </div>
<div id="note-revisions-dialog" title="Note revisions" style="display: none;"> <div id="note-revisions-dialog" class="tdialog" title="Note revisions">
<div style="display: flex;"> <div style="display: flex;">
<select id="note-revision-list" size="25" style="width: 150px; height: 630px;"> <select id="note-revision-list" size="25" style="width: 150px; height: 630px;">
</select> </select>
@ -556,14 +555,14 @@
</div> </div>
</div> </div>
<div id="recent-changes-dialog" title="Recent changes" style="display: none; padding: 20px;"> <div id="recent-changes-dialog" class="tdialog" title="Recent changes">
</div> </div>
<div id="event-log-dialog" title="Event log" style="display: none; padding: 20px;"> <div id="event-log-dialog" class="tdialog" title="Event log">
<ul id="event-log-list"></ul> <ul id="event-log-list"></ul>
</div> </div>
<div id="edit-tree-prefix-dialog" title="Edit tree prefix" style="display: none; padding: 20px;"> <div id="edit-tree-prefix-dialog" class="tdialog" title="Edit tree prefix">
<form id="edit-tree-prefix-form"> <form id="edit-tree-prefix-form">
<div class="form-group"> <div class="form-group">
<label for="tree-prefix-input">Prefix: </label> &nbsp; <label for="tree-prefix-input">Prefix: </label> &nbsp;
@ -580,7 +579,7 @@
</form> </form>
</div> </div>
<div id="sql-console-dialog" title="SQL console" style="display: none; padding: 20px;"> <div id="sql-console-dialog" class="tdialog" title="SQL console">
<div id="sql-console-query"></div> <div id="sql-console-query"></div>
<div style="text-align: center"> <div style="text-align: center">
@ -593,11 +592,11 @@
</table> </table>
</div> </div>
<div id="note-source-dialog" title="Note source" style="display: none; padding: 20px;"> <div id="note-source-dialog" class="tdialog" title="Note source">
<textarea id="note-source" readonly="readonly"></textarea> <textarea id="note-source" readonly="readonly"></textarea>
</div> </div>
<div id="attributes-dialog" title="Note attributes" style="display: none; padding: 20px;"> <div id="attributes-dialog" class="tdialog" title="Note attributes">
<form data-bind="submit: save"> <form data-bind="submit: save">
<div style="display: flex; justify-content: space-between;"> <div style="display: flex; justify-content: space-between;">
<button class="btn btn-large" style="width: 200px;" id="save-attributes-button" type="submit">Save changes <kbd>enter</kbd></button> <button class="btn btn-large" style="width: 200px;" id="save-attributes-button" type="submit">Save changes <kbd>enter</kbd></button>
@ -712,7 +711,7 @@
</form> </form>
</div> </div>
<div id="markdown-import-dialog" title="Markdown import" style="display: none; padding: 20px;"> <div id="markdown-import-dialog" class="tdialog" title="Markdown import" style="padding: 20px;">
<p>Because of browser sandbox it's not possible to directly read clipboard from JavaScript. Please paste the Markdown to import to textarea below and click on Import button</p> <p>Because of browser sandbox it's not possible to directly read clipboard from JavaScript. Please paste the Markdown to import to textarea below and click on Import button</p>
<textarea id="markdown-import-textarea" style="height: 340px; width: 100%"></textarea> <textarea id="markdown-import-textarea" style="height: 340px; width: 100%"></textarea>
@ -721,6 +720,7 @@
</div> </div>
<div id="tooltip" style="display: none;"></div> <div id="tooltip" style="display: none;"></div>
</div>
<script type="text/javascript"> <script type="text/javascript">
window.baseApiUrl = 'api/'; window.baseApiUrl = 'api/';