gaschz/trilium
1
0
Fork 0
mirror of https://github.com/zadam/trilium.git synced 2025-03-01 14:22:32 +01:00
Code Issues Actions Packages Projects Releases Wiki Activity

main layout improvements - whole thing is now limited to 1100px wide (again)

Browse Source
This commit is contained in:
azivner 2017-09-24 20:22:07 -04:00
parent 55667d052f
commit 08064b181d
2 changed files with 60 additions and 57 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

103
src/templates/app.html
View File

@ -5,71 +5,72 @@
<title>Notecase web app</title>
</head>
<body>
<div class="hide-toggle" style="grid-area: search">
<p>
<label>Search:</label>
<input name="search" autocomplete="off">
<button id="btnResetSearch">&times;</button>
<span id="matches"></span>
</p>
</div>
<div id="container">
<div class="hide-toggle" style="grid-area: search">
<p>
<label>Search:</label>
<input name="search" autocomplete="off">
<button id="btnResetSearch">&times;</button>
<span id="matches"></span>
</p>
</div>
<div class="hide-toggle" style="grid-area: tree-buttons;">
<a onclick="createNewTopLevelNote()" title="Create new top level note" class="icon-action">
<img src="stat/icons/file-plus.png" alt="Create new top level note"/>
</a>
<a onclick="collapseTree()" title="Collapse tree" class="icon-action">
<img src="stat/icons/list.png" alt="Collapse tree"/>
</a>
<a onclick="scrollToCurrentNote()" title="Scroll to current note" class="icon-action">
<img src="stat/icons/crosshair.png" alt="Collapse tree"/>
</a>
</div>
<div id="tree" style="overflow: auto; grid-area: tree">
</div>
<div style="grid-area: title">
<div style="display: flex; align-items: center;" class="hide-toggle">
<a onclick="encryptNoteAndSendToServer()"
title="Encrypt the note so that password will be required to view the note"
class="icon-action"
id="encryptButton"
style="display: none;">
<img src="stat/icons/lock.png" alt="Encrypt note"/>
<div class="hide-toggle" style="grid-area: tree-buttons;">
<a onclick="createNewTopLevelNote()" title="Create new top level note" class="icon-action">
<img src="stat/icons/file-plus.png" alt="Create new top level note"/>
</a>
<a onclick="decryptNoteAndSendToServer()"
title="Decrypt note permamently so that password will not be required to access this note in the future"
class="icon-action"
id="decryptButton"
style="display: none;">
<img src="stat/icons/unlock.png" alt="Decrypt note"/>
<a onclick="collapseTree()" title="Collapse tree" class="icon-action">
<img src="stat/icons/list.png" alt="Collapse tree"/>
</a>
&nbsp;
<a onclick="scrollToCurrentNote()" title="Scroll to current note" class="icon-action">
<img src="stat/icons/crosshair.png" alt="Collapse tree"/>
</a>
</div>
<input autocomplete="off" value="" id="noteTitle" style="font-size: x-large; border: 0; flex-grow: 100;" tabindex="1">
<div id="tree" style="overflow: auto; grid-area: tree">
</div>
<div class="hide-toggle">
<span id="top-message"></span>
<span id="error-message"></span>
<div style="grid-area: title;">
<div style="display: flex; align-items: center;" class="hide-toggle">
<a onclick="encryptNoteAndSendToServer()"
title="Encrypt the note so that password will be required to view the note"
class="icon-action"
id="encryptButton"
style="display: none;">
<img src="stat/icons/lock.png" alt="Encrypt note"/>
</a>
<button class="btn btn-sm" onclick="displaySettings();">Settings</button>
<a onclick="decryptNoteAndSendToServer()"
title="Decrypt note permamently so that password will not be required to access this note in the future"
class="icon-action"
id="decryptButton"
style="display: none;">
<img src="stat/icons/unlock.png" alt="Decrypt note"/>
</a>
&nbsp;
<form action="logout" method="POST" style="display: inline;">
<input type="submit" class="btn btn-sm" value="Logout">
</form>
<input autocomplete="off" value="" id="noteTitle" style="font-size: x-large; border: 0; flex-grow: 100;" tabindex="1">
<div class="hide-toggle">
<span id="top-message"></span>
<span id="error-message"></span>
<button class="btn btn-sm" onclick="displaySettings();">Settings</button>
&nbsp;
<form action="logout" method="POST" style="display: inline;">
<input type="submit" class="btn btn-sm" value="Logout">
</form>
</div>
</div>
</div>
</div>
<div style="overflow: auto; grid-area: note-content">
<div id="noteDetail">
<div style="overflow: auto; grid-area: note-content; padding-left: 10px;">
<div id="noteDetail"></div>
</div>
</div>

14
static/style.css
View File

@ -1,15 +1,17 @@
body {
display: grid;
#container {
max-width: 1100px;
margin: 0 auto; /* center */
height: 100vh;
grid-template-areas: "messages messages"
"search title"
display: grid;
grid-template-areas: "search title"
"tree-buttons note-content"
"tree note-content";
grid-template-columns: 1fr 3fr;
grid-template-columns: 2fr 5fr;
grid-template-rows: auto
auto
auto
1fr;
justify-content: center;
grid-gap: 10px;
}