Merge remote-tracking branch 'origin/develop' into feature/47

resources/i18n/en-GB.edn

@@ -131,6 +131,8 @@
                         "Smeagol has been unable to find some of the resources on which it depends,
                          possibly because of misconfiguration or missing environment variables."
                                         ;; used in sanity check report
+ :sortable              "You can sort this table by selecting column headers"
+                                        ;; used for sortable tables
  :user-lacks-field      "User record in the passwd file lacks a field"
                                         ;; used in sanity check report
  :username-prompt       "Username"      ;; text of the username widget prompt on edit user page

resources/public/content/stylesheet.css

@@ -24,6 +24,16 @@
  ## html elements generally in alphabetic order
  */
 
+a {
+  color: darkgray;
+  font-weight: bold;
+}
+
+a:hover {
+  color: darkgray;
+  background:rgba(200,200,200,0.8);
+}
+
 body {
   margin: 0;
   padding: 0;
@@ -52,14 +62,15 @@ dd {
 
 /* footer of the page - not-editable, provided by Smeagol */
 footer {
-  border-top: thin solid gray;
+  border-top: thin solid silver;
+  color: gray;
+  background:rgba(200,200,200,0.8);
   clear: both;
   font-size: smaller;
   text-align: center;
-  color: gray;
-  background: rgba(224,224,224,0.95);
   width: 100%;
   margin: 0;
+  min-height: 4px;
   padding: 0.25em 0;
   bottom:0;
   position:fixed;
@@ -71,9 +82,14 @@ footer {
 }
 
 footer div {
+  display: none;
   padding: 0.1em;
 }
 
+footer:hover div {
+  display: block;
+}
+
 form {
   border: thin solid silver;
 }
@@ -83,8 +99,6 @@ header {
   margin-top: 0;
   width:100%;
   max-width: 100%;
-  background-color: gray;
-  color: white;
 }
 
 header h1 {
@@ -93,7 +107,6 @@ header h1 {
 
 header a {
   font-weight: bold;
-  color: white;
 }
 
 header a:hover {
@@ -131,12 +144,12 @@ ins {
 label {
   width: 20%;
   min-width: 20em;
-  border-right: thin solid gray;
+  border-right: thin solid silver;
   display: inline-block;
 }
 
 table {
-  border: 2px solid black;
+  border: thin solid silver;
   border-collapse: collapse;
 }
 
@@ -148,7 +161,7 @@ th, td {
 	text-align: left;
   vertical-align: top;
 	padding: 0.15em 1.5em;
-  border: 1px solid gray;
+  border: 1px solid silver;
 }
 
 th {
@@ -166,17 +179,18 @@ th {
 
 /* left bar for all pages in the Wiki - editable, provided by users. Within main-container */
 #side-bar {
+  display: none;
   width: 17%;
   height: 100%;
   float: left;
 }
 
 /* cookies information box, fixed, in right margin, just above footer */
 #cookies {
-	width: 30%;
+	width: 20%;
 	float: right;
   position: fixed;
-  bottom: 3.5em;
+  bottom: 8px;
   right: 0;
 	z-index: 175;
   background: transparent;
@@ -190,18 +204,18 @@ th {
   text-align: right;
   padding: 0.25em 2em;
   border-radius: 0.25em;
-	color: white;
-  background:rgba(40,40,40,0.8);
+	color: gray;
+  background:rgba(200,200,200,0.8);
 }
 
 /* more-about-cookies box, normally hidden */
 #more-about-cookies {
   display: none;
 	padding: 0.5em 2em;
   border-radius: 0.5em;
-	color: white;
-  background:rgba(40,40,40,0.8);
-	border-bottom: thin solid white;
+	color: gray;
+  background:rgba(200,200,200,0.8);
+	border-bottom: thin solid gray;
 }
 
 /* but magically appears on mouseover */
@@ -242,8 +256,8 @@ th {
   right: 0;
   padding: 0.25em 2em;
   border-radius: 0.25em;
-  color: white;
-  background:rgba(40,40,40,0.8);
+	color: gray;
+  background:rgba(200,200,200,0.8);
   font-size: 66%;
 }
 
@@ -254,7 +268,11 @@ th {
 .minor-controls a {
   float: right;
   padding: 0.25em 2em;
-  color: white;
+  color: gray;
+}
+
+.minor-controls a:hover {
+  color: darkgray;
 }
 
 .pseudo-input {
@@ -303,25 +321,37 @@ th {
   /* content of the current page in the Wiki - editable, provided by users. Within main-container */
   #content {
     border: thin solid silver;
-    width: 80%;
-    float: right;
+    width: 100%;
     padding-bottom: 5em;
   }
 
   #phone-side-bar, #phone-credits {
     display: none;
   }
 
+  #header {
+    font-size: smaller;
+  }
+
   /* top-of-page navigation, not editable, provided by Smeagol */
   #nav{
     margin: 0;
     padding: 0;
     top: 0;
-    width: 100%;
+    min-height: 4px;
     _position: absolute;
     _top: expression(document.documentElement.scrollTop);
     z-index: 149;
-    background:rgba(40,40,40,0.8);
+    color: gray;
+    background:rgba(200,200,200,0.8);
+ }
+
+  #nav #nav-menu {
+    display: none;
+  }
+
+  #nav:hover #nav-menu {
+    display: block;
   }
 
   /* only needed for fly-out menu effect on tablet and phone stylesheets */
@@ -341,14 +371,14 @@ th {
   }
 
   #nav menu li a {
-    color: white;
+    color: gray;
     text-decoration: none;
     font-weight: bold;
     padding: 0.1em 0.75em;
     margin: 0;
   }
 
-  #nav menu li.active a { background: gray;}
+  #nav menu li.active a { background: gray; color: white;}
   li.nav-item a:hover { background: rgb( 240, 240, 240) }
   li.nav-item a:active { background: gray; color: white; }
 
@@ -379,17 +409,15 @@ th {
     padding: 0;
     position: fixed;
     z-index: 149;
-    color: silver;
-    background:rgba(40,40,40,0.9);
+    color: black;
+    background:rgba(200,200,200,0.9);
   }
 
   #nav a {
-    color: white;
-    text-decoration: none;
     font-weight: bold;
   }
 
-  #nav:hover #nav-menu {
+  #nav:hover #nav-menu, #nav:hover #phone-side-bar {
     display: block;
     list-style-type: none;
     width: 100%;
@@ -455,18 +483,21 @@ th {
     display: none;
   }
 
+  #header {
+    display: none;
+  }
+
   #nav{
     margin: 0;
     padding: 0;
     position: fixed;
     z-index: 149;
-    color: silver;
-    background:rgba(40,40,40,0.9);
+    color: black;
+    background:rgba(200,200,200,0.9);
   }
 
   #nav a {
-    color: white;
-    text-decoration: none;
+    color: black;
     font-weight: bold;
   }
 
@@ -491,6 +522,8 @@ th {
   }
 
   #nav menu li a {
+    color: black;
+    font-weight: bold;
   }
 
   #nav ul li.active a { background: silver;}

resources/templates/base.html

@@ -46,7 +46,9 @@
         </div>
       </div>
       <h1>{% i18n site-title %}: {{title}}</h1>
-      {{header|safe}}
+      <div id="header">
+        {{header|safe}}
+      </div>
       {% if message %}
       <div id="message">
         <p class="message">{{message}}</p>

resources/templates/edit-users.html

@@ -1,10 +1,18 @@
 {% extends "templates/base.html" %}
+{% block extra-headers %}
+ {% script "/vendor/node_modules/tablesort/dist/tablesort.min.js" %}
+{% endblock %}
 
 {% block content %}
         <div id="content">
-          <table>
-            <tr>
-              <th/><th>{% i18n edit-col-hdr %}</th><th>{% i18n del-col-hdr %}</th>
+          <p>
+            {% i18n sortable %}
+          </p>
+          <table id="userstable">
+            <tr data-sort-method='none'>
+              <th>{% i18n user-title-prefix %}</th>
+              <th data-sort-method='none'>{% i18n edit-col-hdr %}</th>
+              <th data-sort-method='none'>{% i18n del-col-hdr %}</th>
             </tr>
             {% for user in users %}
             <tr>
@@ -13,11 +21,12 @@
               <td><a href="delete-user?target={{user}}">{% i18n del-col-hdr %} {{user}}</a></td>
             </tr>
             {% endfor %}
-            <tr>
-              <td><a href="edit-user">{% i18n add-user-label %}</a></td>
-              <td></td>
-              <td></td>
+            <tr data-sort-method='none'>
+              <td colspan="3"><a href="edit-user">{% i18n add-user-label %}</a></td>
             </tr>
           </table>
         </div>
+        <script>
+          new Tablesort(document.getElementById('userstable'));
+        </script>
 {% endblock %}

resources/templates/edit.html

@@ -1,11 +1,11 @@
 {% extends "templates/base.html" %}
 {% block extra-headers %}
-  {% ifequal js-from ":cloudflare" %}
+  {% ifequal js-from ":cdnjs" %}
     <script src="https://cdnjs.cloudflare.com/ajax/libs/simplemde/1.11.2/simplemde.min.js"></script>
     <link href="https://cdnjs.cloudflare.com/ajax/libs/simplemde/1.11.2/simplemde.min.css" rel="stylesheet" type="text/css" />
   {% else %}
-    {% style "/vendor/simplemde/dist/simplemde.min.css" %}
-    {% script "/vendor/simplemde/dist/simplemde.min.js" %}
+    {% style "vendor/simplemde/dist/simplemde.min.css" %}
+    {% script "vendor/simplemde/dist/simplemde.min.js" %}
   {% endifequal %}
 {% endblock %}
 

resources/templates/list-uploads.html

@@ -1,4 +1,10 @@
 {% extends "templates/base.html" %}
+{% block extra-headers %}
+ {% script "/vendor/node_modules/tablesort/dist/tablesort.min.js" %}
+ {% script "/vendor/node_modules/tablesort/dist/sorts/tablesort.number.min.js" %}
+ {% script "/vendor/node_modules/tablesort/dist/sorts/tablesort.date.min.js" %}
+ {% script "/vendor/node_modules/tablesort/dist/sorts/tablesort.monthname.min.js" %}
+{% endblock %}
 
 {% block content %}
         <div id="content" class="list-uploads">
@@ -9,12 +15,15 @@
               <input name="search" id="search" type="text" value="{{search}}" required/>
             </p>
           </form>
-          <table>
-            <tr>
+          <p>
+            {% i18n sortable %}
+          </p>
+          <table id="uploads">
+            <tr data-sort-method='none'>
               <th>Name</th>
               <th>Uploaded</th>
               <th>Type this</th>
-              <th>To get this</th>
+              <th data-sort-method='none'>To get this</th>
             </tr>
             {% for entry in files %}
             <tr>
@@ -26,9 +35,11 @@
               <td>
               {% if entry.is-image %} <img src="{{entry.resource}}" alt="{{entry.name|capitalize}}"/> {% else %} <a href="{{entry.resource}}">link</a> {% endif %}
               </td>
-
             </tr>
             {% endfor %}
           </table>
         </div>
+        <script>
+          new Tablesort(document.getElementById('uploads'));
+        </script>
 {% endblock %}

src/smeagol/formatting.clj

@@ -235,3 +235,4 @@
   (reintegrate-inclusions (process-text md-src)))
 
 
+