Skip to content

UX / Responsiveness for different screensizes #1

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
arkt8 wants to merge 1 commit into
base: master
Choose a base branch
from
Open

UX / Responsiveness for different screensizes #1

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
63 changes: 59 additions & 4 deletions libraries/libraries.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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)
Expand Down Expand Up @@ -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 <<< */
Expand All @@ -319,6 +373,7 @@ a:hover
/* background-color: rgba(0,0,0,0.4); /* Black w/ opacity */ */
/* } */
/* */

/* .modal-content */
/* { */
/* position: relative; */
Expand Down Expand Up @@ -418,5 +473,5 @@ a:hover
/* >>> */
/* >>> */

/* vim: fmr=<<<,>>> fdm=marker
/* vim: fmr=<<<,>>> fdm=marker sts=3 ts=3 sw=3
*/
63 changes: 23 additions & 40 deletions libraries/libraries.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>'

// >>>

Expand Down Expand Up @@ -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}`
}
} // >>>

Expand Down Expand Up @@ -206,4 +189,4 @@ $(document).ready(function() // <<<
// }
// }); // >>>

// vim: fmr=<<<,>>> fdm=marker
// vim: fmr=<<<,>>> fdm=marker sts=3 ts=3 sw=3