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

14
static/style.css
View File

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