mirror of
https://github.com/osmarks/mycorrhiza.git
synced 2024-12-13 05:50:27 +00:00
Redesign view and edit
This commit is contained in:
Timur Ismagilov
parent
9c2846232c
commit
a2c2f8fbab
@ -70,8 +70,10 @@ func (t *Tree) AsHtml() (html string) {
|
||||
for _, siblingName := range t.Siblings {
|
||||
html += navitreeEntry(siblingName, "navitree__sibling")
|
||||
}
|
||||
html += navitreeEntry(t.Name, "navitree__pagename")
|
||||
} else {
|
||||
html += navitreeEntry(t.Name, "navitree__name")
|
||||
}
|
||||
html += navitreeEntry(t.Name, "navitree__name")
|
||||
|
||||
for _, subtree := range t.Descendants {
|
||||
html += subtree.AsHtml()
|
||||
@ -84,8 +86,8 @@ func (t *Tree) AsHtml() (html string) {
|
||||
// navitreeEntry is a small utility function that makes generating html easier.
|
||||
// Someone please redo it in templates.
|
||||
func navitreeEntry(name, class string) string {
|
||||
return fmt.Sprintf(`<li class="navitree__entry">
|
||||
<a class="navitree__link %s" href="/%s">%s</a>
|
||||
return fmt.Sprintf(`<li class="navitree__entry %s">
|
||||
<a class="navitree__link" href="/%s">%s</a>
|
||||
</li>
|
||||
`, class, name, filepath.Base(name))
|
||||
}
|
||||
|
||||
@ -4,27 +4,22 @@
|
||||
<link rel="stylesheet" href="/Templates/default-light/main.css?action=raw">
|
||||
</head>
|
||||
<body>
|
||||
<div class="shroom">
|
||||
<button class="shroom__button" id="shroomBtn"><span>🍄</span> Open</button>
|
||||
</div>
|
||||
<header class="header">
|
||||
<!-- Site title is fetched from your config.json. Set your title in "site-title" field. You can add more things to the header here. -->
|
||||
<h1 class="header__site-title">
|
||||
<a href="/">{{ .SiteTitle }}</a>
|
||||
</h1>
|
||||
<button class="sidebar-controller" id="shroomburger">
|
||||
≡
|
||||
</button>
|
||||
</header>
|
||||
<aside class="sidebar hidden_mobile" id="sidebar">
|
||||
{{ .Sidebar }}
|
||||
</aside>
|
||||
<main class="main">{{ .Main }}</main>
|
||||
<div class="left-panel" id="shroomburgerMenu">
|
||||
<div class="left-panel__in">
|
||||
<div class="shroom mushroom">
|
||||
<button class="shroom__button" id="mushroomBtn"><span>🍄</span> Close</button>
|
||||
</div>
|
||||
<div class="left-panel__contents">
|
||||
<!-- Site title is fetched from your config.json. Set your title in "site-title" field. You can add more things to the header here. -->
|
||||
<header class="header">
|
||||
<h1 class="header__site-title">{{ .SiteTitle }}</h1>
|
||||
</header>
|
||||
<aside class="sidebar">{{ .Sidebar }}</aside>
|
||||
<footer class="footer">
|
||||
<p>This website runs <a href='https://github.com/bouncepaw/mycorrhiza'>MycorrhizaWiki</a></p>
|
||||
</footer>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<footer>
|
||||
<p>This website runs <a href='https://github.com/bouncepaw/mycorrhiza'>MycorrhizaWiki</a></p>
|
||||
</footer>
|
||||
<script src="/Templates/default-light/main.js?action=raw"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@ -3,34 +3,9 @@
|
||||
method="POST"
|
||||
enctype="multipart/form-data"
|
||||
action="?action=update">
|
||||
<div class="naviwrapper__buttons">
|
||||
<input type="submit" value="update"/>
|
||||
</div>
|
||||
|
||||
<div class="edit-box__left">
|
||||
<h4>Edit box</h4>
|
||||
<!-- It is important that there is no indent ↓ -->
|
||||
<textarea class="edit-box__text" name="text" cols="80" rows="25">
|
||||
{{ .Text }}
|
||||
</textarea>
|
||||
|
||||
<h4>Upload file</h4>
|
||||
<p>If this hypha has a file like that, the text above is meant to be a description of it</p>
|
||||
<input type="file" name="binary"/>
|
||||
</div>
|
||||
|
||||
<div class="edit-box__right">
|
||||
<h4>Text MIME-type</h4>
|
||||
<p>Good types are <code>text/markdown</code> and <code>text/plain</code></p>
|
||||
<input type="text" name="text_mime" value="{{ .TextMime }}"/>
|
||||
|
||||
<h4>Revision comment</h4>
|
||||
<p>Please make your comment helpful</p>
|
||||
<input type="text" name="comment" value="Update {{ .Name }}"/>
|
||||
|
||||
<h4>Edit tags</h4>
|
||||
<p>Tags are separated by commas, whitespace is ignored</p>
|
||||
<input type="text" name="tags" value="{{ .Tags }}"/>
|
||||
</div>
|
||||
<h4>Edit box</h4>
|
||||
<!-- It is important that there is no indent ↓ -->
|
||||
<textarea class="edit-box__text" name="text">
|
||||
{{ .Text }}</textarea>
|
||||
</form>
|
||||
</div>
|
||||
|
||||
@ -14,6 +14,8 @@
|
||||
<p>If this hypha has a file like that, the text above is meant to be a description of it</p>
|
||||
<input type="file" name="binary" form="edit-form"/>
|
||||
|
||||
|
||||
<p><input type="submit" value="update" form="edit-form"/></p>
|
||||
<p>
|
||||
<input type="submit" value="update" form="edit-form"/>
|
||||
<a href="?">Cancel</a>
|
||||
</p>
|
||||
</div>
|
||||
|
||||
@ -1,221 +1,53 @@
|
||||
*, *::before, *::after {
|
||||
box-sizing: border-box;
|
||||
*, *::before, *::after { box-sizing: border-box; }
|
||||
html { height: 100%; }
|
||||
body { font: 15px/1.5 'PT Sans', system-ui, sans-serif;
|
||||
min-height: 100%; padding: 0; margin:0; }
|
||||
.msg { background-color: #f4f4f4; padding: 1rem; border-radius: 1rem; }
|
||||
a { color: #44e; }
|
||||
a:visited { color: #44a; }
|
||||
header { margin: 0 2rem; }
|
||||
header * { display: inline; }
|
||||
header h1 { margin: 0; font-size: 1rem; }
|
||||
header a, header a:visited { color: black; text-decoration:none; }
|
||||
header a:active, header a:hover { color: #005f87; }
|
||||
|
||||
h1, h2, h3, h4, h5, h6 { margin: 0.5em 0 0.25em; }
|
||||
.page { line-height: 1.666; max-width: 40rem; hyphens: auto; }
|
||||
.page img { max-width:100%; }
|
||||
.page pre { white-space: break-spaces; }
|
||||
.page__title { font-size: 2rem; margin: 0; }
|
||||
|
||||
footer { padding: 1rem 0; font-size: .8rem; bottom: 0; position: absolute; }
|
||||
footer a, footer a:visited { color: black; }
|
||||
/* Sidebar section */
|
||||
.sidebar { padding: 1rem 0; background: #f4f4f4; }
|
||||
.sidebar div { margin-left: 1rem; }
|
||||
.sidebar-controller { font: inherit; padding: .25rem 1rem;
|
||||
font-size: 2rem; float: right; }
|
||||
|
||||
.hypha-actions ul { margin: 0; padding: 0; }
|
||||
.hypha-actions li { list-style: none; }
|
||||
.hypha-actions a { display: block; padding: .25rem 1rem; font: inherit;
|
||||
text-decoration: none; color: black; }
|
||||
.hypha-actions a:hover { background: #eaeaea; }
|
||||
|
||||
.navitree__node { padding-left: 2rem; }
|
||||
.navitree__entry { margin-bottom: .5rem; }
|
||||
.navitree__link, .navitree__link:visited { color:black; text-decoration:none; }
|
||||
.navitree__link:hover, .navitree__link:active { text-decoration:underline; }
|
||||
.navitree__ancestor { list-style: none; margin-left: -1rem; }
|
||||
.navitree__pagename a { font-weight: bold; }
|
||||
|
||||
@media (max-width: 950px) {
|
||||
.hidden_mobile { display: none; }
|
||||
aside { height: 100%; }
|
||||
main, footer, header { margin: 0 1rem; }
|
||||
header, header * { display:inline; }
|
||||
.edit-box__text { width: 100%; height: 70%; }
|
||||
}
|
||||
|
||||
html {
|
||||
height: 100%;
|
||||
@media (min-width: 950px) {
|
||||
.sidebar-controller { display: none; }
|
||||
aside { float:right; width: 300px; padding: 0; }
|
||||
main, footer { margin: 0 0 auto 2rem; }
|
||||
.edit-box__text { min-width: 600px; height: 70%; }
|
||||
}
|
||||
|
||||
body {
|
||||
font: 15px/1.5 system-ui, -apple-system, BlinkMacSystemFont, 'Helvetica Neue', 'Helvetica', 'PT Sans', 'Roboto', 'Arial', sans-serif;
|
||||
max-width: 500px;
|
||||
min-height: 100%;
|
||||
margin: 0 auto;
|
||||
padding: 12px 24px;
|
||||
}
|
||||
|
||||
.msg {
|
||||
background-color: #f4f4f4;
|
||||
padding: 1rem;
|
||||
border-radius: 1rem;
|
||||
}
|
||||
|
||||
.shroom {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.shroom__button {
|
||||
border-radius: 1rem;
|
||||
padding: 8px 16px 8px 0;
|
||||
border: none;
|
||||
background: #f0f2f4;
|
||||
color: #444;
|
||||
font: inherit;
|
||||
font-size: 15px;
|
||||
font-weight: 500;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.shroom span {
|
||||
margin-left: 16px;
|
||||
margin-right: 8px;
|
||||
font-size: 20px;
|
||||
vertical-align: -0.04em;
|
||||
}
|
||||
|
||||
.mushroom .shroom__button {
|
||||
background: #44484a;
|
||||
color: #dddfe4;
|
||||
}
|
||||
|
||||
|
||||
.header {
|
||||
padding: 8px 0;
|
||||
}
|
||||
|
||||
.header h1 {
|
||||
margin: 0;
|
||||
font-size: 18px;
|
||||
font-weight: 600;
|
||||
letter-spacing: 0.02em;
|
||||
color: #222428;
|
||||
}
|
||||
|
||||
|
||||
a {
|
||||
color: #44e;
|
||||
}
|
||||
|
||||
a:visited {
|
||||
color: #44a;
|
||||
}
|
||||
|
||||
h1, h2, h3, h4, h5, h6 {
|
||||
margin: 0.5em 0 0.25em;
|
||||
}
|
||||
|
||||
.page {
|
||||
font-size: 16px;
|
||||
line-height: 1.666;
|
||||
max-width: 40em;
|
||||
hyphens: auto;
|
||||
}
|
||||
|
||||
.page pre {
|
||||
white-space: break-spaces;
|
||||
}
|
||||
|
||||
.page__amnt {
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
.page__title {
|
||||
font-family: 'PT Serif', 'Georgia', serif;
|
||||
font-size: 36px;
|
||||
font-weight: normal;
|
||||
}
|
||||
|
||||
.edit-box {
|
||||
display: grid;
|
||||
grid-template-columns: 7fr 5fr;
|
||||
}
|
||||
.edit-box .naviwrapper__buttons {
|
||||
grid-column: 1;
|
||||
grid-row: 2;
|
||||
}
|
||||
.edit-box__left { grid-column: 1; grid-row: 2 }
|
||||
.edit-box__right { grid-column: 2; grid-row: 1 / span 2; padding-right: 16px }
|
||||
|
||||
footer {
|
||||
padding: 1em 0;
|
||||
font-size: 12px;
|
||||
color: #888;
|
||||
}
|
||||
|
||||
footer a, footer a:visited {
|
||||
color: #666;
|
||||
}
|
||||
|
||||
.left-panel {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.left-panel.active {
|
||||
display: block;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: #fafafa;
|
||||
}
|
||||
|
||||
.left-panel.active .sidebar {
|
||||
background: #fff;
|
||||
}
|
||||
|
||||
.left-panel__in {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
max-width: 500px;
|
||||
margin: 0 auto;
|
||||
padding: 12px 24px;
|
||||
|
||||
}
|
||||
|
||||
.left-panel__contents {
|
||||
width: 100%;
|
||||
display: grid;
|
||||
grid-template-rows: auto 1fr auto;
|
||||
}
|
||||
|
||||
.left-panel .shroom {
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
@media (min-width: 700px) {
|
||||
body {
|
||||
max-width: 1200px;
|
||||
padding: 8px 16px;
|
||||
padding-right: 274px;
|
||||
}
|
||||
|
||||
.shroom {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.page {
|
||||
font-size: 18px;
|
||||
}
|
||||
|
||||
.left-panel {
|
||||
display: block;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
width: 274px;
|
||||
right: 0;
|
||||
}
|
||||
|
||||
.left-panel__contents {
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.sidebar {
|
||||
padding: 16px 0;
|
||||
border-radius: 1rem;
|
||||
background: #f4f4f4;
|
||||
}
|
||||
|
||||
.hypha-actions ul {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.hypha-actions li {
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
.hypha-actions a {
|
||||
display: block;
|
||||
padding: 6px 16px;
|
||||
font: inherit;
|
||||
text-decoration: none;
|
||||
color: #666;
|
||||
transition: 0.1s background;
|
||||
}
|
||||
|
||||
aside .hypha-actions a:hover {
|
||||
background: #eaeaea;
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
@ -1,7 +1,11 @@
|
||||
var menu = document.getElementById('shroomburgerMenu');
|
||||
document.getElementById('shroomBtn').addEventListener('click', function() {
|
||||
menu.classList.add('active');
|
||||
});
|
||||
document.getElementById('mushroomBtn').addEventListener('click', function() {
|
||||
menu.classList.remove('active');
|
||||
});
|
||||
var isOpen = false
|
||||
var sidebar = document.getElementById('sidebar')
|
||||
var btn = document.getElementById('shroomburger')
|
||||
btn.addEventListener('click', function() {
|
||||
if (isOpen) {
|
||||
sidebar.classList.add('hidden_mobile')
|
||||
} else {
|
||||
sidebar.classList.remove('hidden_mobile')
|
||||
}
|
||||
isOpen = !isOpen
|
||||
})
|
||||
|
||||
Loading…
Reference in New Issue
Block a user