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,