#18: A lot better, but not there yet

Looks fine on desktops. On phones the wiki page looks reasonable, but for some reason I can't yet fathom has a huge right margin; tablets I haven't tackled yet.

resources/public/content/stylesheet.css

@@ -82,10 +82,6 @@ header h1 {
   margin-top: 0;
 }
 
-header img {
-  float: right;
-}
-
 input {
   background-color: white;
 }
@@ -115,14 +111,6 @@ label {
   display: inline-block;
 }
 
-menu li {
-  display: inline;
-}
-
-menu li::before {
-  content: "|| ";
-}
-
 table {
   border: 2px solid black;
   border-collapse: collapse;
@@ -147,58 +135,6 @@ th {
  ## ids generally in document order
  */
 
-/* top-of-page navigation, not editable, provided by Smeagol */
-#nav{
-  margin: 0;
-  padding: 0;
-  top: 0;
-  width: 100%;
-  _position: absolute;
-  _top: expression(document.documentElement.scrollTop);
-  z-index: 149;
-  background:rgba(40,40,40,0.8);
-}
-
-#user {
-	font-height: 66%;
-	float: right;
-	padding: 0.1em 0.75em;
-  margin: 0;
-  color: white;
-}
-
-#user a {
-  color: silver;
-}
-
-/* only needed for fly-out menu effect on tablet and phone stylesheets */
-#nav-icon {
-  display: none;
-}
-
-#nav-menu {
-	margin: 0;
-  padding: 0;
-}
-
-#nav ul li {
-  padding: 0;
-  margin: 0;
-  display: inline;
-}
-
-#nav ul li a {
-  color: white;
-  text-decoration: none;
-  font-weight: bold;
-  padding: 0.1em 0.75em;
-  margin: 0;
-}
-
-#nav ul li.active a { background: silver;}
-li.nav-item a:hover { background: rgb( 240, 240, 240) }
-li.nav-item a:active { background: gray; color: white; }
-
 /* Overall container div, holds all content of page. Yes, I know it shouldn't have fixed width */
 #main-container{
 }
@@ -211,14 +147,6 @@ li.nav-item a:active { background: gray; color: white; }
   float: left;
 }
 
-/* content of the current in the Wiki - editable, provided by users. Within main-container */
-#content {
-  border: thin solid silver;
-  width: 80%;
-  float: right;
-  padding-bottom: 5em;
-}
-
 /* cookies information box, fixed, in right margin, just above footer */
 #cookies {
 	width: 30%;
@@ -312,3 +240,197 @@ li.nav-item a:active { background: gray; color: white; }
   margin: 0;
 }
 
+/* desktops and laptops, primarily. Adapted to mouse; targets may be small */
+@media all and (min-device-width: 1025px) {
+  /* content of the current page in the Wiki - editable, provided by users. Within main-container */
+  #content {
+    border: thin solid silver;
+    width: 80%;
+    float: right;
+    padding-bottom: 5em;
+  }
+
+  #phone-side-bar, #phone-credits {
+    display: none;
+  }
+
+  /* top-of-page navigation, not editable, provided by Smeagol */
+  #nav{
+    margin: 0;
+    padding: 0;
+    top: 0;
+    width: 100%;
+    _position: absolute;
+    _top: expression(document.documentElement.scrollTop);
+    z-index: 149;
+    background:rgba(40,40,40,0.8);
+  }
+
+  /* only needed for fly-out menu effect on tablet and phone stylesheets */
+  #nav-icon {
+    display: none;
+  }
+
+  #nav-menu {
+    margin: 0;
+    padding: 0;
+  }
+
+  #nav menu li {
+    padding: 0;
+    margin: 0;
+    display: inline;
+  }
+
+  #nav menu li a {
+    color: white;
+    text-decoration: none;
+    font-weight: bold;
+    padding: 0.1em 0.75em;
+    margin: 0;
+  }
+
+  #nav menu li.active a { background: gray;}
+  li.nav-item a:hover { background: rgb( 240, 240, 240) }
+  li.nav-item a:active { background: gray; color: white; }
+
+  #nav menu li#user {
+    padding: 0 1em;
+    float: right;
+  }
+}
+
+/* tablets, primarily. Adapted to touch; targets are larger */
+@media all and (min-device-width: 769px) and (max-device-width: 1024px) {
+/* content of the current in the Wiki - editable, provided by users. Within main-container */
+  #content {
+    border: thin solid silver;
+    width: 80%;
+    float: right;
+    padding-bottom: 5em;
+  }
+
+  #nav{
+    margin: 0;
+    padding: 0;
+    position: fixed;
+    z-index: 149;
+    background:rgba(40,40,40,0.8);
+    font-size: larger;
+  }
+
+  #nav:hover #nav-menu {
+    display: inline;
+  }
+
+  #nav-icon {
+    padding: 0.25em;
+    float: left;
+  }
+
+  #nav-menu {
+    display: none;
+  }
+
+  #nav ul li {
+    padding: 0;
+    margin: 0;
+    display: inline;
+  }
+
+  #nav ul li a {
+    color: white;
+    text-decoration: none;
+    font-weight: bold;
+    padding: 0.1em 0.75em;
+    margin: 0;
+  }
+  #nav ul li.active a { background: silver;}
+  li.nav-item a:hover { background: rgb( 240, 240, 240) }
+  li.nav-item a:active { background: gray; color: white; }
+}
+
+/* phones, and, indeed, smaller phones. Adapted to touch; display radically
+ * decluttered */
+@media all and (max-device-width: 768px) {
+  footer {
+    display: none;
+  }
+
+  h1 {
+    /* I wouldn't normally use a px value, but the menu icon is 49px wide */
+    padding: 0.25em 5%;
+    text-align: right;
+  }
+
+  /* content of the current in the Wiki - editable, provided by users. Within main-container */
+  #content {
+    border: thin solid silver;
+    width: 100%;
+    padding-bottom: 2em;
+  }
+
+  #main-container {
+    width: 100%;
+    margin: 0;
+    padding: 0;
+  }
+
+
+  #cookies {
+    display: none;
+  }
+
+  #nav{
+    margin: 0;
+    padding: 0;
+    position: fixed;
+    z-index: 149;
+    color: silver;
+    background:rgba(40,40,40,0.9);
+    font-size: 200%;
+  }
+
+  #nav a {
+    color: white;
+    text-decoration: none;
+    font-weight: bold;
+  }
+
+  #nav:hover #nav-menu, #nav:hover #phone-side-bar {
+    display: block;
+    list-style-type: none;
+    width: 100%;
+  }
+
+  #nav-icon {
+    padding: 0;
+  }
+
+  #nav-menu, #phone-side-bar {
+    display: none;
+  }
+
+  #nav menu li {
+    padding: 0.5em;
+    margin: 0.5 em;
+    font-size: 150%;
+  }
+
+  #nav menu li a {
+  }
+
+  #nav ul li.active a { background: silver;}
+  li.nav-item a:hover { background: rgb( 240, 240, 240) }
+  li.nav-item a:active { background: gray; color: white; }
+
+  #nav menu #user {
+    text-decoration: none;
+    font-weight: bold;
+    margin: 0;
+  }
+
+  #side-bar {
+    display: none;
+  }
+}

resources/public/css/tablet.css

@@ -42,13 +42,13 @@ body {
   display: none;
 }
 
-#nav ul li {
+#nav menu li {
   padding: 0;
   margin: 0;
   display: inline;
 }
 
-#nav ul li a {
+#nav menu li a {
   color: white;
   text-decoration: none;
   font-weight: bold;

resources/public/img/three-lines.svg

@@ -0,0 +1,88 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+
+<svg
+   xmlns:dc="http://purl.org/dc/elements/1.1/"
+   xmlns:cc="http://creativecommons.org/ns#"
+   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+   xmlns:svg="http://www.w3.org/2000/svg"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   width="210mm"
+   height="297mm"
+   viewBox="0 0 744.09448819 1052.3622047"
+   id="svg2"
+   version="1.1"
+   inkscape:version="0.91 r13725"
+   sodipodi:docname="three-lines.svg">
+  <defs
+     id="defs4" />
+  <sodipodi:namedview
+     id="base"
+     pagecolor="#ffffff"
+     bordercolor="#666666"
+     borderopacity="1.0"
+     inkscape:pageopacity="0.0"
+     inkscape:pageshadow="2"
+     inkscape:zoom="0.7"
+     inkscape:cx="16.791691"
+     inkscape:cy="509.7116"
+     inkscape:document-units="px"
+     inkscape:current-layer="layer1"
+     showgrid="true"
+     inkscape:window-width="1920"
+     inkscape:window-height="996"
+     inkscape:window-x="0"
+     inkscape:window-y="28"
+     inkscape:window-maximized="1">
+    <inkscape:grid
+       type="xygrid"
+       id="grid4136" />
+  </sodipodi:namedview>
+  <metadata
+     id="metadata7">
+    <rdf:RDF>
+      <cc:Work
+         rdf:about="">
+        <dc:format>image/svg+xml</dc:format>
+        <dc:type
+           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
+        <dc:title></dc:title>
+      </cc:Work>
+    </rdf:RDF>
+  </metadata>
+  <g
+     inkscape:label="Layer 1"
+     inkscape:groupmode="layer"
+     id="layer1">
+    <rect
+       style="opacity:1;fill:#ffffff;fill-opacity:1;stroke:#060000;stroke-width:1.324;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:0.51906158"
+       id="rect4172"
+       width="580"
+       height="440"
+       x="40"
+       y="72.362206" />
+    <rect
+       style="opacity:1;fill:#000000;fill-opacity:1;stroke:#060000;stroke-width:1.324;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:0.51906158"
+       id="rect4138"
+       width="540"
+       height="80"
+       x="60"
+       y="92.362206" />
+    <rect
+       y="252.36221"
+       x="60"
+       height="80"
+       width="540"
+       id="rect4149"
+       style="opacity:1;fill:#000000;fill-opacity:1;stroke:#060000;stroke-width:1.324;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:0.51906158" />
+    <rect
+       style="opacity:1;fill:#000000;fill-opacity:1;stroke:#060000;stroke-width:1.324;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:0.51906158"
+       id="rect4151"
+       width="540"
+       height="80"
+       x="60"
+       y="412.36221" />
+  </g>
+</svg>

resources/templates/base.html

@@ -3,7 +3,7 @@
   <head>
     <title>{{config.site-title}}: {{title}}</title>
     <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
-    <link href="{{servlet-context}}/content/stylesheet.css" media="screen and (min-device-width: 1025px)" rel="stylesheet" type="text/css" />
+    <link href="{{servlet-context}}/content/stylesheet.css" media="screen" rel="stylesheet" type="text/css" />
     <link href="{{servlet-context}}/css/print.css" media="print" rel="stylesheet" type="text/css" />
     {% block extra-headers %}
     {% endblock %}
@@ -12,22 +12,36 @@
     <header class="wiki">
       <!-- navbar -->
       <div id="nav">
-        {% if user %}
+        <img id="nav-icon" src="{{servlet-context}}/img/three-lines.png" alt="Menu"/>
-        <p class="user" id="user">{{config.logged-in-as}} {{user}} | <a href="passwd">{{config.change-pass-link}}</a></p>
+        <menu id="nav-menu" class="nav">
-        {% endif %}
-        <img id="nav-icon" src="{{servlet-context}}/img/threelines.png" alt="Menu"/>
-        <ul id="nav-menu" class="nav">
           <li class="{{wiki-selected}}"><a href="{{servlet-context}}/">{{config.home-link}}</a></li>
           {% if admin %}
-          <li class="{{admin-selected}}"><a href="{{servlet-context}}/edit-users">{{config.edit-users-link}}</a></li>
+          <li class="{{edit-users-selected}}"><a href="{{servlet-context}}/edit-users">{{config.edit-users-link}}</a></li>
           {% endif %}
+          {% if user %}
           <li class="{{auth-selected}}"><a href="{{servlet-context}}/auth">
-            {% if user %}
+            {{config.logout-link}}</a></li>
-            {{config.logout-link}}
+          <li class="{{passwd-selected}}"><a href="passwd">{{config.change-pass-link}}</a></li>
-            {% else %}
+          <li class="user" id="user">{{config.logged-in-as}} {{user}}</li>
-            {{config.login-link}}
+          {% else %}
-            {% endif %}</a></li>
+          <li class="{{auth-selected}}"><a href="{{servlet-context}}/auth">
-        </ul>
+            {{config.login-link}}</a></li>
+          {% endif %}
+        </menu>
+        <div id="phone-side-bar"  class="wiki">
+            {{side-bar|safe}}
+        <div id="phone-credits">
+          <p>
+           <img height="16" width="16" alt="one wiki to rule them all"
+                src="img/smeagol.png"/>One Wiki to rule them all ||
+           Smeagol wiki engine {{version}} ||
+           <img height="16" width="16"
+                alt="The Web Engineering Factory &amp; Toolworks"
+                src="http://www.weft.scot/images/weft.logo.64.png">
+            Developed by <a href="http://www.weft.scot/">WEFT</a>
+          </p>
+         </div>
+        </div>
       </div>
       <h1>{{config.site-title}}: {{title}}</h1>
       {{header|safe}}

resources/templates/history.html

@@ -1,7 +1,7 @@
 {% extends "templates/base.html" %}
 {% block content %}
    <div id="content" class="history">
-     <table>
+     <table class="music-ruled">
        <tr>
          <th>{{config.when-col-hdr}}</th>
          <th>{{config.what-col-hdr}}</th>

src/smeagol/routes/wiki.clj

@@ -225,6 +225,7 @@
                            :header (util/local-links (util/md->html "/content/_header.md"))
                            :message (if changed? (:chpass-success layout/config))
                            :error (cond
+                                    (nil? oldpass) nil
                                     changed? nil
                                     (< (count pass1) 8) (:chpass-too-short layout/config)
                                     (not (= pass1 pass2)) (:chpass-bad-match layout/config)