From a2c2f8fbab033b7eb2338c0135cf8f55629d1141 Mon Sep 17 00:00:00 2001 From: Timur Ismagilov Date: Sun, 28 Jun 2020 23:04:26 +0500 Subject: [PATCH] Redesign view and edit --- fs/genealogy.go | 8 +- w/m/Templates/default-light/base.html/1.html | 35 +-- .../default-light/edit/index.html/1.html | 33 +-- .../default-light/edit/sidebar.html/1.html | 6 +- w/m/Templates/default-light/main.css/1.css | 270 ++++-------------- w/m/Templates/default-light/main.js/1.mjs | 18 +- 6 files changed, 90 insertions(+), 280 deletions(-) diff --git a/fs/genealogy.go b/fs/genealogy.go index 3addd3d..1bc3adb 100644 --- a/fs/genealogy.go +++ b/fs/genealogy.go @@ -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(`
  • - %s + return fmt.Sprintf(`
  • + %s
    • `, class, name, filepath.Base(name)) } diff --git a/w/m/Templates/default-light/base.html/1.html b/w/m/Templates/default-light/base.html/1.html index 04fdc5c..aa9175c 100644 --- a/w/m/Templates/default-light/base.html/1.html +++ b/w/m/Templates/default-light/base.html/1.html @@ -4,27 +4,22 @@ -
    - -
    +
    + +

    + {{ .SiteTitle }} +

    + +
    +
    {{ .Main }}
    -
    -
    -
    - -
    -
    - -
    -

    {{ .SiteTitle }}

    -
    - - -
    -
    -
    + diff --git a/w/m/Templates/default-light/edit/index.html/1.html b/w/m/Templates/default-light/edit/index.html/1.html index b98e6e9..63b8b47 100644 --- a/w/m/Templates/default-light/edit/index.html/1.html +++ b/w/m/Templates/default-light/edit/index.html/1.html @@ -3,34 +3,9 @@ method="POST" enctype="multipart/form-data" action="?action=update"> -
    - -
    - -
    -

    Edit box

    - - - -

    Upload file

    -

    If this hypha has a file like that, the text above is meant to be a description of it

    - -
    - -
    -

    Text MIME-type

    -

    Good types are text/markdown and text/plain

    - - -

    Revision comment

    -

    Please make your comment helpful

    - - -

    Edit tags

    -

    Tags are separated by commas, whitespace is ignored

    - -
    +

    Edit box

    + + diff --git a/w/m/Templates/default-light/edit/sidebar.html/1.html b/w/m/Templates/default-light/edit/sidebar.html/1.html index 2eacf20..846af1c 100644 --- a/w/m/Templates/default-light/edit/sidebar.html/1.html +++ b/w/m/Templates/default-light/edit/sidebar.html/1.html @@ -14,6 +14,8 @@

    If this hypha has a file like that, the text above is meant to be a description of it

    - -

    +

    + + Cancel +

    diff --git a/w/m/Templates/default-light/main.css/1.css b/w/m/Templates/default-light/main.css/1.css index 08686ba..e209dc8 100644 --- a/w/m/Templates/default-light/main.css/1.css +++ b/w/m/Templates/default-light/main.css/1.css @@ -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; -} - - - - - - - - - - \ No newline at end of file diff --git a/w/m/Templates/default-light/main.js/1.mjs b/w/m/Templates/default-light/main.js/1.mjs index 7a221e6..5f130ca 100644 --- a/w/m/Templates/default-light/main.js/1.mjs +++ b/w/m/Templates/default-light/main.js/1.mjs @@ -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 +})