loot/libloot
0
0
Fork 0
mirror of https://github.com/loot/libloot.git synced 2026-07-27 14:16:01 -07:00
Code Issues Packages Projects Releases Wiki Activity

A bit of styling and content generation.

Browse Source 
The layout of the main view is now roughly correct.
This commit is contained in:
WrinklyNinja
2014-07-12 15:14:10 +01:00
parent 330ce36ed0
commit 96d89579ea
3 changed files with 109 additions and 41 deletions
Download Patch File Download Diff File Expand all files Collapse all files
resources/report/report.html
+16 -5
View File
@@ -8,6 +8,9 @@
<script src="require.js"></script>
</head>
<body>
<template id="pluginNav">
<li><a href=""></a>
</template>
<template id="pluginSection">
<section>
<h1></h1>
@@ -33,34 +36,42 @@
<!-- Need to add template for message dialog overlays. -->
<noscript>The LOOT Report requires Javascript to be enabled in order to function.</noscript>
<header>
<img src="../icon.ico">
<ol>
<li>File
<ol>
<ol class="hidden">
<li>Sort Plugins
<li>Redate Plugins
<li>Quit
</ol>
<li>Game
<ol id="gameList">
<ol id="gameList" class="hidden">
<!-- Generated game <li> elements go here. -->
</ol>
<li>Settings
<li>Help
<ol>
<ol class="hidden">
<li>Help
<li>Open Debug Log Location
<li>About
</ol>
</ol>
<ol>
<li>Update Masterlist
<li>Sort
<li class="hidden">Apply
<li class="hidden">Cancel
<li>Filters
</ol>
</header>
<nav>
<ol>
<li><a href="#summary">Summary</a>
<li><a href="#generalMessages">General Messages</a>
<li>
<ol id="pluginsNav">
<!-- Generated <li> elements go here, containing # links to each plugin's section in the list. -->
</ol>
<li id="filtersToggle">Filters
</ol>
</nav>
<div id="main">
@@ -126,7 +137,7 @@
</blockquote>
</div>
<div id="settings">
<div id="settings" class="hidden">
<h1>Settings</h1>
<form>
<label for="defaultGameSelect">Default Game</label>
resources/report/script.js
+34 -30
View File
@@ -227,11 +227,10 @@ function processURLParams() {
var activePluginNo = 0;
var dirtyPluginNo = 0;
/* Fill report with data. */
document.getElementById('lootVersion').textContent = data.lootVersion;
document.getElementById('LOOTVersion').textContent = data.lootVersion;
document.getElementById('masterlistRevision').textContent = data.masterlist.revision;
document.getElementById('masterlistDate').textContent = data.masterlist.date;
document.getElementById('masterlistUpdating').textContent = data.masterlist.updaterEnabled;
var generalMessagesList = document.getElementById('generalMessagesList');
var generalMessagesList = document.getElementById('generalMessages').getElementsByTagName('ul')[0];
for (var i = 0; i < data.globalMessages.length; ++i) {
var li = document.createElement('li');
li.className = data.globalMessages[i].type;
@@ -246,11 +245,23 @@ function processURLParams() {
}
}
totalMessageNo = data.globalMessages.length;
var pluginsList = document.getElementById('pluginsList');
var pluginsList = document.getElementById('main');
var pluginsNav = document.getElementById('pluginsNav');
for (var i = 0; i < data.plugins.length; ++i) {
var li = document.createElement('li');
var content, clone;
/* First add link to navbar. */
content = document.getElementById('pluginNav').content;
content.children[0].children[0].textContent = data.plugins[i].name;
content.children[0].children[0].href = '#' + data.plugins[i].name.replace(/\s+/g, '');
li.setAttribute('data-active', data.plugins[i].isActive);
clone = document.importNode(content, true);
pluginsNav.appendChild(clone);
var content = document.getElementById('pluginSection').content;
var section = content.children[0];
section.setAttribute('data-active', data.plugins[i].isActive);
section.id = data.plugins[i].name.replace(/\s+/g, '');
if (data.plugins[i].isActive) {
++activePluginNo;
@@ -260,45 +271,36 @@ function processURLParams() {
++dirtyPluginNo;
}
var mod = document.createElement('div');
mod.className = 'mod';
mod.textContent = data.plugins[i].name;
li.appendChild(mod);
section.children[0].textContent = data.plugins[i].name;
var crc = document.createElement('div');
crc.className = 'crc';
crc.textContent = 'CRC: ' + data.plugins[i].crc;
li.appendChild(crc);
section.children[1].textContent = 'CRC: ' + data.plugins[i].crc;
if (data.plugins[i].version) {
var version = document.createElement('div');
version.className = 'version';
version.textContent = data.plugins[i].version;
li.appendChild(version);
section.children[2].textContent = data.plugins[i].version;
} else {
section.children[2].className += ' hidden';
}
if (data.plugins[i].tagsAdd && data.plugins[i].tagsAdd.length != 0) {
var tagAdd = document.createElement('div');
tagAdd.className = 'tag add';
tagAdd.textContent = data.plugins[i].tagsAdd.join(', ');
li.appendChild(tagAdd);
section.children[3].textContent = data.plugins[i].tagsAdd.join(', ');
} else {
section.children[3].className += ' hidden';
}
if (data.plugins[i].tagRemove && data.plugins[i].tagRemove.length != 0) {
var tagRemove = document.createElement('div');
tagRemove.className = 'tag remove';
tagRemove.textContent = data.plugins[i].tagsRemove.join(', ');
li.appendChild(tagRemove);
section.children[4].textContent = data.plugins[i].tagsRemove.join(', ');
} else {
section.children[4].className += ' hidden';
}
if (data.plugins[i].messages && data.plugins[i].messages.length != 0) {
var ul = document.createElement('ul');
for (var j = 0; j < data.plugins[i].messages.length; ++j) {
var messageLi = document.createElement('li');
messageLi.className = data.plugins[i].messages[j].type;
/* innerHTML is open to abuse, but for hyperlinking it's too useful. */
messageLi.innerHTML = data.plugins[i].messages[j].content;
ul.appendChild(messageLi);
section.children[5].appendChild(messageLi);
if (messageLi.className == 'warn') {
warnMessageNo++;
@@ -307,9 +309,11 @@ function processURLParams() {
}
totalMessageNo++;
}
li.appendChild(ul);
} else {
section.children[5].className += ' hidden';
}
pluginsList.appendChild(li);
clone = document.importNode(content, true);
pluginsList.appendChild(clone);
}
document.getElementById('filterTotalMessageNo').textContent = totalMessageNo;
document.getElementById('totalMessageNo').textContent = totalMessageNo;
resources/report/style.css
+59 -6
View File
@@ -32,7 +32,7 @@ noscript {
padding:10px 5px;
color:white;
}
#nav {
header {
background:#e3e3e3;
position:fixed;
top:0;
@@ -40,7 +40,65 @@ noscript {
z-index:2;
box-shadow: 0 0 3px 1px rgba(0,0,0,0.5);
width:100%;
height: 3em;
}
header ol {
display: inline-block;
margin:0;
padding:0;
}
header li{
display: inline-block;
padding: 0.75em 1em;
margin: 0;
}
header ol:last-child {
position: fixed;
right: 0;
}
header li:hover {
background: #ccc;
}
header img {
height: 2.5em;
width: 2.5em;
vertical-align: middle;
padding: 0 0.5em;
}
nav {
position: fixed;
top: 3em;
width: 20em;
height: calc(100% - 3em);
}
nav ol {
list-style-type: none;
height: calc(100% - 3em);
}
nav ol li:last-child, nav ol li:last-child ol {
height: calc(100% - 3em);
overflow: auto;
}
nav ol li {
padding: 1em;
}
#main {
position: absolute;
top: 3em;
left: 20em;
}
section {
background:white;
overflow:hidden;
margin:1em;
box-shadow:0 0 3px 0px rgba(0,0,0,0.5);
padding:1em;
}
.button {
display:inline-table;
cursor:pointer;
@@ -56,11 +114,6 @@ noscript {
right:0;
top:0;
}
#main {
position:absolute;
top:32px;
width:100%;
}
#summary, #plugins {
padding:1em;
}