Mercurial > wikked
changeset 445:b8db406cc5e4
web: Fix UI bugs and do a few improvements.
- Fix problems introduced by upgrading to the latest PureCSS.
- Simplify CSS/JS includes into the page.
- Add a bit of shadow to the body when the search field is focused/expanded.
author | Ludovic Chabant <ludovic@chabant.com> |
---|---|
date | Wed, 03 Jan 2018 00:58:09 -0800 |
parents | 2f68a463cb06 |
children | 47690e0c55e6 |
files | wikked/assets/css/wikked.less wikked/assets/css/wikked/nav.less wikked/assets/css/wikked/page.less wikked/commands/web.py wikked/templates/edit-page.html wikked/templates/nav.html wikked/views/__init__.py wikked/web.py |
diffstat | 8 files changed, 29 insertions(+), 53 deletions(-) [+] |
line wrap: on
line diff
--- a/wikked/assets/css/wikked.less Wed Jan 03 00:51:59 2018 -0800 +++ b/wikked/assets/css/wikked.less Wed Jan 03 00:58:09 2018 -0800 @@ -1,5 +1,5 @@ // Import Pure. -@import (less) "../pure/pure.css"; +@import (less) "../../../node_modules/purecss/build/pure.css"; // Foundation icons @import "../font-awesome/less/font-awesome.less";
--- a/wikked/assets/css/wikked/nav.less Wed Jan 03 00:51:59 2018 -0800 +++ b/wikked/assets/css/wikked/nav.less Wed Jan 03 00:58:09 2018 -0800 @@ -18,6 +18,10 @@ .wiki-menu-a { color: @color-gray-light; + display: block; + text-decoration: none; + line-height: 1.5em; + white-space: nowrap; } .wiki-menu-a-hover { background: @link-hover-color; @@ -64,6 +68,7 @@ background-color: @color-gray-dark; transition: left 200ms ease-in-out 0s, width 200ms ease-in-out 0s, + box-shadow 200ms, !important; a { padding: 0.5em 1em; @@ -89,6 +94,7 @@ } #wiki-menu.wiki-menu-ext { width: @wiki-menu-width-ext !important; + box-shadow: 4px 0px 10px rgba(0, 0, 0, 0.3); } #wiki-menu-shortcut { @@ -177,6 +183,11 @@ list-style: none; } +.wiki-search-underlayer { + background: #CCC; + transition: background 0.5s; +} + // Footer .footer-wrapper { margin: 0 auto;
--- a/wikked/assets/css/wikked/page.less Wed Jan 03 00:51:59 2018 -0800 +++ b/wikked/assets/css/wikked/page.less Wed Jan 03 00:58:09 2018 -0800 @@ -76,7 +76,6 @@ // Page editing form#page-edit { - margin-top: 2em; } .editing-input, .editing-preview {
--- a/wikked/commands/web.py Wed Jan 03 00:51:59 2018 -0800 +++ b/wikked/commands/web.py Wed Jan 03 00:58:09 2018 -0800 @@ -33,19 +33,13 @@ parser.add_argument( '-d', '--dev', help="Use development mode. " - "This makes Wikked use development assets (separate and " - "uncompressed scripts and stylesheets), along with using " - "code reloading and debugging.", - action='store_true') - parser.add_argument( - '--no-js', - help="Disable Javascript.", + "This makes Wikked use code reloading and debugging.", action='store_true') parser.add_argument( '--no-update', help="Don't auto-update the wiki if a page file has been " - "touched (which means you can refresh a locally modified " - "page with F5)", + "touched (which means you won't be able to refresh a " + "locally modified page with F5)", action='store_true') parser.add_argument( '--no-startup-update', @@ -83,10 +77,6 @@ # When running from the command line, we only have one web server # so make it also serve static files. wikked.settings.WIKI_SERVE_FILES = True - if ctx.args.dev: - wikked.settings.WIKI_DEV_ASSETS = True - if ctx.args.no_js: - wikked.settings.WIKI_DEV_NO_JS = True if not ctx.args.no_update: wikked.settings.WIKI_AUTO_RELOAD = True
--- a/wikked/templates/edit-page.html Wed Jan 03 00:51:59 2018 -0800 +++ b/wikked/templates/edit-page.html Wed Jan 03 00:58:09 2018 -0800 @@ -56,16 +56,8 @@ </article> {% endblock %} {% block scripts %} -{% if is_dev %} +{{ super() }} {% if not no_js %} -<script data-main="/dev-assets/js/wikked.js" src="/dev-assets/js/require.js"></script> -<script> -require(['wikked.app', 'wikked.edit'], function(app, edit) {}); -</script> -{% endif %} -{% else %} -<script src="/static/js/require.js"></script> -<script src="/static/js/wikked.app.js"></script> <script src="/static/js/wikked.edit.js"></script> {% endif %} {% endblock %}
--- a/wikked/templates/nav.html Wed Jan 03 00:51:59 2018 -0800 +++ b/wikked/templates/nav.html Wed Jan 03 00:58:09 2018 -0800 @@ -5,12 +5,12 @@ <div id="wiki-menu-pin" title="Pin/unpin the wiki menu."> <span class="fa fa-lock"></span> </div> - <ul class=""> - {%if nav.url_home%}<li><a href="{{nav.url_home}}"><span class="fa fa-home"></span> Home</a></li>{%endif%} - {%if nav.url_new%}<li><a href="{{nav.url_new}}"><span class="fa fa-file"></span> New Page</a></li>{%endif%} - {%if nav.url_read%}<li><a href="{{nav.url_read}}"><span class="fa fa-book"></span> Read</a></li>{%endif%} - {%if nav.url_edit%}<li><a href="{{nav.url_edit}}"><span class="fa fa-edit"></span> Edit</a></li>{%endif%} - {%if nav.url_hist%}<li><a href="{{nav.url_hist}}"><span class="fa fa-road"></span> History</a></li>{%endif%} + <ul class="pure-menu-list"> + {%if nav.url_home%}<li class="pure-menu-item"><a href="{{nav.url_home}}"><span class="fa fa-home"></span> Home</a></li>{%endif%} + {%if nav.url_new%}<li class="pure-menu-item"><a href="{{nav.url_new}}"><span class="fa fa-file"></span> New Page</a></li>{%endif%} + {%if nav.url_read%}<li class="pure-menu-item"><a href="{{nav.url_read}}"><span class="fa fa-book"></span> Read</a></li>{%endif%} + {%if nav.url_edit%}<li class="pure-menu-item"><a href="{{nav.url_edit}}"><span class="fa fa-edit"></span> Edit</a></li>{%endif%} + {%if nav.url_hist%}<li class="pure-menu-item"><a href="{{nav.url_hist}}"><span class="fa fa-road"></span> History</a></li>{%endif%} </ul> <form role="search" id="search" class="pure-form pure-menu-form pure-menu-divider" action="/search"> <fieldset> @@ -19,18 +19,18 @@ </fieldset> </form> {%if nav.extras%} - <ul class="pure-menu-divider"> + <ul class="pure-menu-list"> {%for e in nav.extras%} - <li><a href="{{e.url}}">{%if e.icon%}<span class="fa fa-{{e.icon}}"></span> {%endif%}{{e.title}}</a></li> + <li class="pure-menu-item"><a href="{{e.url}}">{%if e.icon%}<span class="fa fa-{{e.icon}}"></span> {%endif%}{{e.title}}</a></li> {%endfor%} </ul> {%endif%} - <ul class="pure-menu-divider"> + <ul class="pure-menu-list"> {%if auth.is_logged_in%} - <li><a href="{{auth.url_profile}}"><span class="fa fa-cog"></span> {{auth.username}}</a></li> - <li><a href="{{auth.url_logout}}"><span class="fa fa-log-out"></span> Logout</a></li> + <li class="pure-menu-item"><a href="{{auth.url_profile}}"><span class="fa fa-cog"></span> {{auth.username}}</a></li> + <li class="pure-menu-item"><a href="{{auth.url_logout}}"><span class="fa fa-log-out"></span> Logout</a></li> {%else%} - <li><a href="{{auth.url_login}}"><span class="fa fa-log-in"></span> Login</a></li> + <li class="pure-menu-item"><a href="{{auth.url_login}}"><span class="fa fa-log-in"></span> Login</a></li> {%endif%} </ul> </nav>
--- a/wikked/views/__init__.py Wed Jan 03 00:51:59 2018 -0800 +++ b/wikked/views/__init__.py Wed Jan 03 00:58:09 2018 -0800 @@ -141,8 +141,3 @@ nav['footers'] = [{'title': f[0], 'url': f[1], 'icon': f[2]} for f in footers] data['nav'] = nav - - if app.config['WIKI_DEV_ASSETS']: - data['is_dev'] = True - if app.config['WIKI_DEV_NO_JS']: - data['no_js'] = True
--- a/wikked/web.py Wed Jan 03 00:51:59 2018 -0800 +++ b/wikked/web.py Wed Jan 03 00:58:09 2018 -0800 @@ -21,8 +21,6 @@ app.config.setdefault('SQL_DEBUG', False) app.config.setdefault('SQL_COMMIT_ON_TEARDOWN', False) app.config.setdefault('WIKI_ROOT', None) -app.config.setdefault('WIKI_DEV_ASSETS', False) -app.config.setdefault('WIKI_DEV_NO_JS', False) app.config.setdefault('WIKI_UPDATE_ON_START', True) app.config.setdefault('WIKI_AUTO_RELOAD', False) app.config.setdefault('WIKI_ASYNC_UPDATE', False) @@ -59,21 +57,12 @@ # Make the app serve static content and wiki assets in DEBUG mode. app.config['WIKI_ROOT'] = wiki_root app.config['WIKI_FILES_DIR'] = os.path.join(wiki_root, '_files') -if app.config['WIKI_DEV_ASSETS'] or app.config['WIKI_SERVE_FILES']: +if app.config['WIKI_SERVE_FILES']: app.wsgi_app = SharedDataMiddleware( app.wsgi_app, {'/files': app.config['WIKI_FILES_DIR']}) -# In DEBUG mode, also serve raw assets instead of static ones. -if app.config['WIKI_DEV_ASSETS']: - assets_folder = os.path.join(os.path.dirname(__file__), 'assets') - app.wsgi_app = SharedDataMiddleware( - app.wsgi_app, - {'/dev-assets': assets_folder}, - cache=False) # Etag/caching seems broken - - # Add a special route for the `.well-known` directory. app.wsgi_app = SharedDataMiddleware( app.wsgi_app,