Mercurial > wikked
view wikked/templates/nav.html @ 487:1ec071454790
web: UX improvements for the sidebar menu.
- Open/close the menu on click instead of mouse hover, so it's more friendly
to mobile/touch devices.
- Rework how the menu lock works.
author | Ludovic Chabant <ludovic@chabant.com> |
---|---|
date | Thu, 01 Nov 2018 21:25:23 -0700 |
parents | 8ee6e7649aba |
children |
line wrap: on
line source
<a id="wiki-menu-shortcut" class="wiki-logo"> <span>W</span> </a> <nav id="wiki-menu" role="navigation" class="pure-menu pure-menu-open"> <div id="wiki-menu-header" title="Pin/unpin the wiki menu."> <i id="wiki-menu-lock" class="fas fa-{{nav.lock_icon}}"></i> </div> <ul class="pure-menu-list"> {%if nav.url_home%}<li class="pure-menu-item"><a href="{{nav.url_home}}"><i class="fas fa-home"></i> Home</a></li>{%endif%} {%if nav.url_new%}<li class="pure-menu-item"><a href="{{nav.url_new}}"><i class="fas fa-file"></i> New Page</a></li>{%endif%} {%if nav.url_read%}<li class="pure-menu-item"><a href="{{nav.url_read}}"><i class="fas fa-book"></i> Read</a></li>{%endif%} {%if nav.url_edit%}<li class="pure-menu-item"><a href="{{nav.url_edit}}"><i class="fas fa-edit"></i> Edit</a></li>{%endif%} {%if nav.url_hist%}<li class="pure-menu-item"><a href="{{nav.url_hist}}"><i class="fas fa-road"></i> History</a></li>{%endif%} </ul> <form role="search" id="search" class="pure-form pure-menu-form pure-menu-divider" action="/search"> <fieldset> <input type="text" name="q" id="search-query" class="pure-input-1" placeholder="Search..." autocomplete="off"></input> <ul id="search-preview"></ul> </fieldset> </form> {%if nav.extras%} <ul class="pure-menu-list"> {%for e in nav.extras%} <li class="pure-menu-item"><a href="{{e.url}}">{%if e.icon%}<i class="fas fa-{{e.icon}}"></i> {%endif%}{{e.title}}</a></li> {%endfor%} </ul> {%endif%} <ul class="pure-menu-list"> {%if auth.is_logged_in%} <li class="pure-menu-item"><a href="{{auth.url_profile}}"><i class="fas fa-cog"></i> {{auth.username}}</a></li> <li class="pure-menu-item"><a href="{{auth.url_logout}}"><i class="fas fa-sign-out-alt"></i> Logout</a></li> {%else%} <li class="pure-menu-item"><a href="{{auth.url_login}}"><i class="fas fa-sign-in-alt"></i> Login</a></li> {%endif%} </ul> </nav>