UX / Responsiveness for different screensizes

* Adds title attribute to hover in case of long lists
  without caption.
* Reuses the title attributes on small screens as table
  layout not fits well.
* Corrects line break of filter an menu on screens < 700px.

Obs: included vim modelines for correct indentation for
future contributors - if they use the best editor :)

Author: arkt8

libraries/libraries.css

@@ -139,13 +139,12 @@ a:hover
    /* margin: 0 auto; */
    display: table;
    padding: 0 0 8em 0;
+   margin-top:1em;
 }
 
 .data td, .data th
 {
-   padding-bottom: 2%;
-   padding-top: 2%;
-   padding-left:2%;  
+   padding:0.5em;
 }
 
 .data tr:nth-child(odd)
@@ -301,6 +300,61 @@ a:hover
     background-color: #e2e2e2
 }
 
+
+/*
+ * Responsiveness for smaller screens
+ */
+@media only screen and (max-width: 700px) {
+   .maincontainer {
+      margin:0;
+      padding:0;
+      width:100%;
+   }
+
+   .filter { padding: 0 1em; }
+   .filter > input,
+   .filter .dropdown {
+      max-width:40vw;
+   }
+
+   .data {
+      clear:both;
+      display:block;
+   }
+
+   .dataheader {display:none;}
+
+   #databody {display:list;}
+
+   #databody > tr {display:list-item;}
+
+   #databody td {display:inline-block;}
+
+   #databody td:nth-child(1),
+
+   #databody td:nth-child(2) {
+      width:100%;
+   }
+
+   #databody td[luaver]:after {
+      content:attr(luaver);
+      display:inline-block;
+      padding-left:0.1em;
+   }
+
+   #databody td[title="status"] {
+      padding-right:1.5em;
+   }
+
+   #databody td[title="status"]:before {
+      content:attr(title);
+      display:inline-block;
+      padding:0 0.5em 0 0;
+      text-transform:capitalize;
+   }
+}
+
+
 /* >>> */
 
 /* modal box - CURRENTLY NOT USED <<< */
@@ -319,6 +373,7 @@ a:hover
 /*    background-color: rgba(0,0,0,0.4); /* Black w/ opacity */ */
 /* } */
 /*  */
+
 /* .modal-content */
 /* { */
 /*    position: relative; */
@@ -418,5 +473,5 @@ a:hover
 /* >>> */
 /* >>> */
 
-/* vim: fmr=<<<,>>> fdm=marker
+/* vim: fmr=<<<,>>> fdm=marker sts=3 ts=3 sw=3
  */

libraries/libraries.js

@@ -6,13 +6,13 @@ var Data          = []
 // var Categories = []
 var DDMSelection  = "ddmall" // DropDownMenu initialization
 
-var Unknown       = '<td><span class="grey"><span class="glyphicon glyphicon-minus"></span></span></td>'
-var Supported     = '<td><span class="green"><span class="glyphicon glyphicon-ok"></span></span></td>' 
-var NotSupported  = '<td><span class="red"><span class="glyphicon glyphicon-remove"></span></span></td>'
-var Active        = '<span class="glyphicon glyphicon-heart"></span>'
-var Dead          = '<span class="glyphicon glyphicon-flag"></span>'
-var HelpNeeded    = '<span class="glyphicon glyphicon-plus"></span>'
-var NewMaintainer = '<span class="glyphicon glyphicon-user"></span>'
+var Unknown       = '<span title="Unknown" class="grey"><span class="glyphicon glyphicon-minus"></span></span>'
+var Supported     = '<span title="Supported" class="green"><span class="glyphicon glyphicon-ok"></span></span>'
+var NotSupported  = '<span title="Not supported "class="red"><span class="glyphicon glyphicon-remove"></span></span>'
+var Active        = '<span title="Active" class="glyphicon glyphicon-heart"></span>'
+var Dead          = '<span title="Unmaintained" class="glyphicon glyphicon-flag"></span>'
+var HelpNeeded    = '<span title="Help needed" class="glyphicon glyphicon-plus"></span>'
+var NewMaintainer = '<span title="New maintainer" class="glyphicon glyphicon-user"></span>'
 
 // >>>
 
@@ -42,41 +42,24 @@ function fillTable() // <<<
 
       else if(DDMSelection == "ddmnew")    { if(Data[i].status.maintainer == false){continue} }
 
-      var tr = tbody.insertRow(-1)
-
-      tr.innerHTML += '<td><a href="'+Data[i].link+'" target="_blank">'+Data[i].name+'</a></td>'
-
-      tr.innerHTML += '<td>'+Data[i].description+'</td>'
-
-      var tdstatus = tr.insertCell(-1);
-
-      if(Data[i].status.active){ tdstatus.innerHTML += Active }
-      else { tdstatus.innerHTML += Dead }
-
-      if(Data[i].status.help){ tdstatus.innerHTML += HelpNeeded }
 
-      if(Data[i].status.maintainer){ tdstatus.innerHTML += NewMaintainer }
+      // Add maintainance status
+      var modstatus = (Data[i].status.active     ? Active : Dead )
+                    + (Data[i].status.help       ? HelpNeeded : '' )
+                    + (Data[i].status.maintainer ? NewMaintainer : '')
 
+      // Adds support to Lua versions
+      var modluaver = '';
+      for (let ver=51; ver<=54; ver++) {
+         let info = Data[i].lua[ver.toString(10)]
+         let support = info ? Supported : ( info == false ? NotSupported : Unknown )
+         modluaver += `<td luaver="${ver.toString(10).replace(/^(.)/,"$1.")}">${support}</td>`
+      }
 
-      if(Data[i].lua["51"]){ tr.innerHTML += Supported }
-      else{
-         if(Data[i].lua["51"] == false){ tr.innerHTML += NotSupported }
-         else{ tr.innerHTML += Unknown }}
-
-      if(Data[i].lua["52"]){ tr.innerHTML += Supported }
-      else{
-         if(Data[i].lua["52"] == false){ tr.innerHTML += NotSupported }
-         else{ tr.innerHTML += Unknown }}
-
-      if(Data[i].lua["53"]){ tr.innerHTML += Supported }
-      else{
-         if(Data[i].lua["53"] == false){ tr.innerHTML += NotSupported }
-         else{ tr.innerHTML += Unknown }}
-
-      if(Data[i].lua["54"]){ tr.innerHTML += Supported }
-      else{
-         if(Data[i].lua["54"] == false){ tr.innerHTML += NotSupported }
-         else{ tr.innerHTML += Unknown }}
+      var tr = tbody.insertRow(-1)
+      tr.innerHTML += `<td><a href="${Data[i].link}" target="_blank">${Data[i].name}</a></td>`
+      tr.innerHTML += `<td>${Data[i].description}</td>`
+      tr.innerHTML += `<td title="status">${modstatus}</td>${modluaver}`
    }
 } // >>>
 
@@ -206,4 +189,4 @@ $(document).ready(function() // <<<
 //       }
 //    }); // >>>
 
-// vim: fmr=<<<,>>> fdm=marker
+// vim: fmr=<<<,>>> fdm=marker sts=3 ts=3 sw=3