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

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

View File

@ -5,6 +5,7 @@
<title>Notecase web app</title>
</head>
<body>
<div id="container">
<div class="hide-toggle" style="grid-area: search">
<p>
<label>Search:</label>
@ -31,7 +32,7 @@
<div id="tree" style="overflow: auto; grid-area: tree">
</div>
<div style="grid-area: title">
<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"
@ -68,8 +69,8 @@
</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>

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;
}