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> <title>Notecase web app</title>
</head> </head>
<body> <body>
<div id="container">
<div class="hide-toggle" style="grid-area: search"> <div class="hide-toggle" style="grid-area: search">
<p> <p>
<label>Search:</label> <label>Search:</label>
@ -31,7 +32,7 @@
<div id="tree" style="overflow: auto; grid-area: tree"> <div id="tree" style="overflow: auto; grid-area: tree">
</div> </div>
<div style="grid-area: title"> <div style="grid-area: title;">
<div style="display: flex; align-items: center;" class="hide-toggle"> <div style="display: flex; align-items: center;" class="hide-toggle">
<a onclick="encryptNoteAndSendToServer()" <a onclick="encryptNoteAndSendToServer()"
title="Encrypt the note so that password will be required to view the note" title="Encrypt the note so that password will be required to view the note"
@ -68,8 +69,8 @@
</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>

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