Skip to content

Commit

Permalink
Refactor stylesheet
Browse files Browse the repository at this point in the history
  • Loading branch information
@HebaruSan
HebaruSan committed Nov 5, 2019
1 parent 85d5260 commit 68aeea5
Show file tree
Hide file tree
Showing 3 changed files with 100 additions and 88 deletions.
66 changes: 66 additions & 0 deletions src/javascript/app.css
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,66 @@
html, body {
margin: 0;
padding: 0;
}
input::-webkit-input-placeholder {
font-style: italic;
}
.public_fixedDataTable_main,
.public_fixedDataTableRow_main {
border-color: rgba(255, 255, 255, 0.1);
}
.public_fixedDataTableRow_fixedColumnsDivider,
.public_fixedDataTableCell_main {
border-color: rgba(255, 255, 255, 0.06);
}
.public_fixedDataTable_header,
.public_fixedDataTable_header .public_fixedDataTableCell_main {
color: rgba(255, 255, 255, 0.88);
background-color: rgba(40, 40, 40, 0.98);
background-image: linear-gradient(rgba(40, 40, 40, 0.98), rgba(32, 32, 32, 0.98));
}
.public_fixedDataTableRow_highlighted .public_fixedDataTableCell_main,
.public_fixedDataTableCell_main {
background: inherit;
}
.public_fixedDataTableRow_even {
background-color: rgb(19, 19, 19);
}
.public_fixedDataTableRow_odd.public_fixedDataTableRow_highlighted {
background-color: rgb(27, 27, 27);
}
.public_fixedDataTableCell_cellContent {
padding: 2px 8px;
}
.error {
color: rgb(255, 100, 100);
}
a:link,
a:visited {
color: rgb(62, 166, 255);
text-decoration: none;
}
a:hover,
a:active {
text-decoration: underline;
}
.moduleMenu {
visibility: hidden;
opacity: 0;
margin-top: -1em;
transition: visibility 0s linear 300ms, opacity 300ms, margin-top 300ms ease-in;
}
.public_fixedDataTableRow_main:hover .moduleMenu {
visibility: visible;
opacity: 1;
margin-top: 0;
transition: visibility 0s linear 0s, opacity 300ms, margin-top 300ms ease-out;
}
.moduleMenu {
font-size: 8pt;
color: rgba(144, 144, 144, 0.7);
}
.moduleMenu a:link,
.moduleMenu a:visited {
color: rgba(144, 144, 144, 0.9);
}
59 changes: 2 additions & 57 deletions src/javascript/app.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,66 +3,11 @@ import ReactDom from 'react-dom';
import NetKANs from './components/NetKANs.jsx';
import datatableStyles from
'../../node_modules/fixed-data-table/dist/fixed-data-table.min.css';

var sheet = document.createElement('style');
sheet.type = 'text/css';
sheet.innerHTML = `
html, body {
color: rgb(255, 255, 255);
background-color: rgb(19, 19, 19);
font-family: sans-serif;
}
#content .public_fixedDataTable_main,
#content .public_fixedDataTableRow_main,
#content .public_fixedDataTableRow_fixedColumnsDivider,
#content .public_fixedDataTableRow_even {
color: rgb(255, 255, 255);
background-color: rgb(19, 19, 19);
font-family: sans-serif;
border-color: rgba(255, 255, 255, 0.1);
}
#content .public_fixedDataTable_header, #content .public_fixedDataTable_header .public_fixedDataTableCell_main {
background-color: rgba(40, 40, 40, 0.98);
background-image: linear-gradient(rgba(40, 40, 40, 0.98), rgba(32, 32, 32, 0.98));
}
#content .public_fixedDataTableCell_main {
background-color: inherit;
background-image: inherit;
border-color: rgba(255, 255, 255, 0.1);
}
#content .public_fixedDataTableRow_odd {
color: rgb(255, 255, 255);
background-color: rgb(27, 27, 27);
font-family: sans-serif;
border-color: rgba(255, 255, 255, 0.1);
}
input::-webkit-input-placeholder {
font-style: italic;
}
a:link, a:visited {
text-decoration: none;
color: rgb(62, 166, 255);
}
a:hover, a:active {
text-decoration: underline;
}
.moduleMenu {
visibility: hidden;
}
.moduleCell:hover .moduleMenu {
visibility: visible;
}
.moduleMenu, .moduleMenu a:link, .moduleMenu a:visited {
color: rgb(144, 144, 144);
}
`;
document.body.appendChild(sheet);

document.body.innerHTML += '<div id="content"></div>';
import customStyles from './app.css';

ReactDom.render(
<NetKANs
url="http://status.ksp-ckan.space/status/netkan.json"
pollInterval={300000} />,
document.getElementById('content')
document.body
);
63 changes: 32 additions & 31 deletions src/javascript/components/NetKANs.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -66,10 +66,10 @@ export default class NetKANs extends React.Component {
this._updateTimer = setTimeout(this._updateTableSize, 16);
}
_updateTableSize() {
const widthOffset = window.innerWidth < 680 ? 0 : 20;
const widthOffset = window.innerWidth < 680 ? 0 : 10;
this.setState({
tableWidth: window.innerWidth - widthOffset,
tableHeight: window.innerHeight - 50,
tableHeight: window.innerHeight - 45,
});
}
_onFilterChange(e) {
Expand All @@ -86,14 +86,16 @@ export default class NetKANs extends React.Component {
_header(key, name) {
return <Cell onClick={this._updateSort.bind(null, key)}>{name} {this._sortDirArrow(key)}</Cell>;
}
_resourcesList({resources}) {
var val = [];
_resourcesList({id, resources}) {
var val = [
<a href={"https://github.com/KSP-CKAN/NetKAN/commits/master/NetKAN/" + id + ".netkan"}>history</a>,
" | ",
<a href={"https://github.com/KSP-CKAN/CKAN-meta/tree/master/" + id}>metadata</a>
];
if (resources) {
for (const key of Object.keys(resources)) {
if (!key.startsWith('x_')) {
val.push(' | ');
val.push(<a href={resources[key]}>{key}</a>);
}
for (const key of Object.keys(resources).filter(name => !name.startsWith('x_')).sort()) {
val.push(' | ');
val.push(<a href={resources[key]}>{key}</a>);
}
}
return val;
Expand All @@ -111,29 +113,32 @@ export default class NetKANs extends React.Component {

rows.sort((a, b) => {
let sortVal = 0;
a = a[sortBy] ?
a[sortBy].toLowerCase() : '';
b = b[sortBy] ?
b[sortBy].toLowerCase() : '';

if (a > b) {
var aVal = a[sortBy] ? a[sortBy].toLowerCase() : '';
var bVal = b[sortBy] ? b[sortBy].toLowerCase() : '';
if (aVal > bVal) {
sortVal = 1;
}
if (a < b) {
} else if (aVal < bVal) {
sortVal = -1;
} else if (sortBy !== 'id') {
sortVal = a.id < b.id ? 1
: a.id > b.id ? -1
: 0;
}
return sortDir === 'DESC' ?
sortVal * -1 : sortVal;
return sortDir === 'DESC' ? sortVal * -1 : sortVal;
});


const divstyle = {
fontSize: '9pt'
fontSize: '9pt',
fontFamily: 'sans-serif',
backgroundColor: 'rgb(19, 19, 19)',
color: 'rgb(255, 255, 255)',
padding: '5px'
};
const h1style = {
color: 'rgb(240, 240, 240)',
fontSize: '16pt',
margin: '5px 0',
margin: '0',
padding: '5px 0',
paddingLeft: '72px',
backgroundImage: 'url(favicon.ico)',
backgroundPosition: 'left center',
Expand Down Expand Up @@ -165,14 +170,10 @@ export default class NetKANs extends React.Component {
<Column
header={this._header('id', 'NetKAN')}
cell={({rowIndex, ...props}) => (
<Cell className="moduleCell" {...props}>
<a href={"https://github.com/KSP-CKAN/NetKAN/tree/master/NetKAN/" + rows[rowIndex].id + ".netkan"}>{rows[rowIndex].id}</a>
<div className="moduleMenu">
<a href={"https://github.com/KSP-CKAN/NetKAN/commits/master/NetKAN/" + rows[rowIndex].id + ".netkan"}>history</a>
{ [" | ", <a href={"https://github.com/KSP-CKAN/CKAN-meta/tree/master/" + rows[rowIndex].id}>metadata</a>] }
{ this._resourcesList(rows[rowIndex]) }
</div>
</Cell>
<Cell {...props}>
<a href={"https://github.com/KSP-CKAN/NetKAN/tree/master/NetKAN/" + rows[rowIndex].id + ".netkan"}>{rows[rowIndex].id}</a>
<div className="moduleMenu">{this._resourcesList(rows[rowIndex])}</div>
</Cell>
)}
fixed={true}
width={250}
Expand Down Expand Up @@ -201,7 +202,7 @@ export default class NetKANs extends React.Component {
/>
<Column
header={this._header('last_error', 'Error')}
cell={({rowIndex, ...props}) => (<Cell {...props}>{rows[rowIndex].last_error}</Cell>)}
cell={({rowIndex, ...props}) => (<Cell className="error" {...props}>{rows[rowIndex].last_error}</Cell>)}
fixed={false}
width={200}
flexGrow={4}
Expand Down

0 comments on commit 68aeea5

Please sign in to comment.