share improvements

This commit is contained in:
zadam 2021-12-28 13:57:37 +01:00
parent fada3fe623
commit 00f24bdb63
2 changed files with 21 additions and 21 deletions

View File

@ -36,7 +36,7 @@ body {
padding: 10px 20px 20px 20px; padding: 10px 20px 20px 20px;
} }
#parent-link { #parentLink {
float: right; float: right;
margin-top: 20px; margin-top: 20px;
} }
@ -60,7 +60,7 @@ iframe.pdf-view {
height: 800px; height: 800px;
} }
#menuButton { #toggleMenuButton {
display: none; display: none;
position: fixed; position: fixed;
top: 8px; top: 8px;
@ -75,20 +75,20 @@ iframe.pdf-view {
cursor: pointer; cursor: pointer;
} }
#child-links.grid ul { #childLinks.grid ul {
list-style-type: none; list-style-type: none;
display: flex; display: flex;
flex-wrap: wrap; flex-wrap: wrap;
padding: 0; padding: 0;
} }
#child-links.grid ul li { #childLinks.grid ul li {
width: 180px; width: 180px;
height: 140px; height: 140px;
padding: 10px; padding: 10px;
} }
#child-links.grid ul li a { #childLinks.grid ul li a {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
height: 100%; height: 100%;
@ -101,11 +101,11 @@ iframe.pdf-view {
font-size: large; font-size: large;
} }
#child-links.grid ul li a:hover { #childLinks.grid ul li a:hover {
background: #eee; background: #eee;
} }
#child-links.list ul { #childLinks.list ul {
list-style-type: none; list-style-type: none;
display: inline-flex; display: inline-flex;
flex-wrap: wrap; flex-wrap: wrap;
@ -113,27 +113,27 @@ iframe.pdf-view {
margin-top: 5px; margin-top: 5px;
} }
#child-links.list ul li { #childLinks.list ul li {
margin-right: 20px; margin-right: 20px;
} }
#menuButton::after { #toggleMenuButton::after {
position: relative; position: relative;
top: -2px; top: -2px;
left: 1px; left: 1px;
} }
@media (max-width: 48em) { @media (max-width: 48em) {
#layout.navMenu #menu { #layout.showMenu #menu {
display: block; display: block;
margin-top: 40px; margin-top: 40px;
} }
#menuButton { #toggleMenuButton {
display: block; display: block;
} }
#layout.navMenu #main { #layout.showMenu #main {
display: none; display: none;
} }
@ -141,11 +141,11 @@ iframe.pdf-view {
padding-left: 60px; padding-left: 60px;
} }
#layout.navMenu #menuButton::after { #layout.showMenu #toggleMenuButton::after {
content: "«"; content: "«";
} }
#menuButton::after { #toggleMenuButton::after {
content: "»"; content: "»";
} }

View File

@ -20,8 +20,8 @@
<div id="layout"> <div id="layout">
<div id="main"> <div id="main">
<% if (note.parents[0].noteId !== 'share' && note.parents.length !== 0) { %> <% if (note.parents[0].noteId !== 'share' && note.parents.length !== 0) { %>
<nav id="parent-link"> <nav id="parentLink">
parent: <a href="<%= note.parents[0].noteId %>" class="type-<% note.type %>"><%= note.parents[0].title %></a> parent: <a href="<%= note.parents[0].noteId %>" class="type-<%= note.parents[0].type %>"><%= note.parents[0].title %></a>
</nav> </nav>
<% } %> <% } %>
@ -37,7 +37,7 @@
<% } %> <% } %>
<% if (note.hasChildren()) { %> <% if (note.hasChildren()) { %>
<nav id="child-links" class="<% if (isEmpty) { %>grid<% } else { %>list<% } %>"> <nav id="childLinks" class="<% if (isEmpty) { %>grid<% } else { %>list<% } %>">
<% if (!isEmpty) { %> <% if (!isEmpty) { %>
<hr> <hr>
<span>Child notes: </span> <span>Child notes: </span>
@ -47,7 +47,7 @@
<% for (const childNote of note.getChildNotes()) { %> <% for (const childNote of note.getChildNotes()) { %>
<li> <li>
<a href="<%= childNote.shareId %>" <a href="<%= childNote.shareId %>"
class="type-<% childNote.type %>"><%= childNote.title %></a> class="type-<%= childNote.type %>"><%= childNote.title %></a>
</li> </li>
<% } %> <% } %>
</ul> </ul>
@ -56,7 +56,7 @@
</div> </div>
<% if (subRoot.hasChildren()) { %> <% if (subRoot.hasChildren()) { %>
<button id="menuButton"></button> <button id="toggleMenuButton"></button>
<nav id="menu"> <nav id="menu">
<%- include('tree_item', {note: subRoot, activeNote: note}) %> <%- include('tree_item', {note: subRoot, activeNote: note}) %>
@ -66,10 +66,10 @@
<script> <script>
(function () { (function () {
const menuButton = document.getElementById('menuButton'); const toggleMenuButton = document.getElementById('toggleMenuButton');
const layout = document.getElementById('layout'); const layout = document.getElementById('layout');
menuButton.addEventListener('click', () => layout.classList.toggle('navMenu')); toggleMenuButton.addEventListener('click', () => layout.classList.toggle('showMenu'));
}()); }());
</script> </script>
</body> </body>