mirrors/mycorrhiza
1
0
Fork 0
mirror of https://github.com/osmarks/mycorrhiza.git synced 2025-07-08 12:22:49 +00:00
Code Issues Releases Wiki Activity

Redesign view and edit

Browse Source
This commit is contained in:
Timur Ismagilov 2020-06-28 23:04:26 +05:00
parent 9c2846232c
commit a2c2f8fbab
6 changed files with 90 additions and 280 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
fs/genealogy.go
View File

@ -70,8 +70,10 @@ func (t *Tree) AsHtml() (html string) {
for _, siblingName := range t.Siblings { for _, siblingName := range t.Siblings {
html += navitreeEntry(siblingName, "navitree__sibling") 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 { for _, subtree := range t.Descendants {
html += subtree.AsHtml() html += subtree.AsHtml()
@ -84,8 +86,8 @@ func (t *Tree) AsHtml() (html string) {
// navitreeEntry is a small utility function that makes generating html easier. // navitreeEntry is a small utility function that makes generating html easier.
// Someone please redo it in templates. // Someone please redo it in templates.
func navitreeEntry(name, class string) string { func navitreeEntry(name, class string) string {
return fmt.Sprintf(`<li class="navitree__entry"> return fmt.Sprintf(`<li class="navitree__entry %s">
<a class="navitree__link %s" href="/%s">%s</a> <a class="navitree__link" href="/%s">%s</a>
</li> </li>
`, class, name, filepath.Base(name)) `, class, name, filepath.Base(name))
} }

29
w/m/Templates/default-light/base.html/1.html
View File

@ -4,27 +4,22 @@
<link rel="stylesheet" href="/Templates/default-light/main.css?action=raw"> <link rel="stylesheet" href="/Templates/default-light/main.css?action=raw">
</head> </head>
<body> <body>
<div class="shroom">
<button class="shroom__button" id="shroomBtn"><span>🍄</span> Open</button>
</div>
<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"> <header class="header">
<h1 class="header__site-title">{{ .SiteTitle }}</h1> <!-- 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> </header>
<aside class="sidebar">{{ .Sidebar }}</aside> <aside class="sidebar hidden_mobile" id="sidebar">
<footer class="footer"> {{ .Sidebar }}
</aside>
<main class="main">{{ .Main }}</main>
<footer>
<p>This website runs <a href='https://github.com/bouncepaw/mycorrhiza'>MycorrhizaWiki</a></p> <p>This website runs <a href='https://github.com/bouncepaw/mycorrhiza'>MycorrhizaWiki</a></p>
</footer> </footer>
</div>
</div>
</div>
<script src="/Templates/default-light/main.js?action=raw"></script> <script src="/Templates/default-light/main.js?action=raw"></script>
</body> </body>
</html> </html>

29
w/m/Templates/default-light/edit/index.html/1.html
View File

@ -3,34 +3,9 @@
method="POST" method="POST"
enctype="multipart/form-data" enctype="multipart/form-data"
action="?action=update"> action="?action=update">
<div class="naviwrapper__buttons">
<input type="submit" value="update"/>
</div>
<div class="edit-box__left">
<h4>Edit box</h4> <h4>Edit box</h4>
<!-- It is important that there is no indent ↓ --> <!-- It is important that there is no indent ↓ -->
<textarea class="edit-box__text" name="text" cols="80" rows="25"> <textarea class="edit-box__text" name="text">
{{ .Text }} {{ .Text }}</textarea>
</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>
</form> </form>
</div> </div>

6
w/m/Templates/default-light/edit/sidebar.html/1.html
View File

@ -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> <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"/> <input type="file" name="binary" form="edit-form"/>
<p>
<p><input type="submit" value="update" form="edit-form"/></p> <input type="submit" value="update" form="edit-form"/>
<a href="?">Cancel</a>
</p>
</div> </div>

270
w/m/Templates/default-light/main.css/1.css
View File

@ -1,221 +1,53 @@
*, *::before, *::after { *, *::before, *::after { box-sizing: border-box; }
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%; }
} }
@media (min-width: 950px) {
html { .sidebar-controller { display: none; }
height: 100%; 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;
}

18
w/m/Templates/default-light/main.js/1.mjs
View File

@ -1,7 +1,11 @@
var menu = document.getElementById('shroomburgerMenu'); var isOpen = false
document.getElementById('shroomBtn').addEventListener('click', function() { var sidebar = document.getElementById('sidebar')
menu.classList.add('active'); var btn = document.getElementById('shroomburger')
}); btn.addEventListener('click', function() {
document.getElementById('mushroomBtn').addEventListener('click', function() { if (isOpen) {
menu.classList.remove('active'); sidebar.classList.add('hidden_mobile')
}); } else {
sidebar.classList.remove('hidden_mobile')
}
isOpen = !isOpen
})