186526
/
unpkg
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Split out CSS into separate files

This commit is contained in:
Michael Jackson 2018-04-03 22:16:09 -07:00
parent 6e37129ec5
commit f53e99a066
10 changed files with 148 additions and 105 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

13
client/About.css Normal file
View File

@ -0,0 +1,13 @@
.about-logos {
margin: 2em 0;
display: flex;
justify-content: center;
}
.about-logo {
text-align: center;
flex: 1;
max-width: 80%;
}
.about-logo img {
max-width: 60%;
}

14
client/About.js
View File

@ -1,8 +1,16 @@
import "./About.css";
import React from "react";
import contentHTML from "./About.md";
const About = () => (
<div className="wrapper" dangerouslySetInnerHTML={{ __html: contentHTML }} />
);
function About() {
return (
<div
className="wrapper"
dangerouslySetInnerHTML={{ __html: contentHTML }}
/>
);
}
export default About;

6
client/Home.css Normal file
View File

@ -0,0 +1,6 @@
.home-example {
text-align: center;
background-color: #eee;
margin: 2em 0;
padding: 5px 0;
}

14
client/Home.js
View File

@ -1,8 +1,16 @@
import "./Home.css";
import React from "react";
import contentHTML from "./Home.md";
const Home = () => (
<div className="wrapper" dangerouslySetInnerHTML={{ __html: contentHTML }} />
);
function Home() {
return (
<div
className="wrapper"
dangerouslySetInnerHTML={{ __html: contentHTML }}
/>
);
}
export default Home;

38
client/Layout.css Normal file
View File

@ -0,0 +1,38 @@
.layout-title {
margin: 0;
text-transform: uppercase;
text-align: center;
font-size: 5em;
}
.layout-nav {
margin: 0 0 3em;
}
.layout-navList {
margin: 0;
padding: 0;
display: flex;
justify-content: center;
}
.layout-navList li {
flex-basis: auto;
list-style-type: none;
display: inline-block;
font-size: 1.1em;
margin: 0 10px;
}
.layout-navList li a:link {
text-decoration: none;
}
.layout-navList li a:link,
.layout-navList li a:visited {
color: black;
}
.layout-navUnderline {
height: 4px;
background-color: black;
position: absolute;
left: 0;
}

9
client/Layout.js
View File

@ -1,7 +1,10 @@
import "./Layout.css";
import React from "react";
import PropTypes from "prop-types";
import { Motion, spring } from "react-motion";
import { Switch, Route, Link, withRouter } from "react-router-dom";
import WindowSize from "./WindowSize";
import About from "./About";
import Stats from "./Stats";
@ -78,14 +81,14 @@ class Layout extends React.Component {
};
return (
<div>
<div className="layout">
<WindowSize onChange={this.adjustUnderline} />
<div className="wrapper">
<header>
<h1 className="layout-title">unpkg</h1>
<nav className="layout-nav">
<ol
className="layout-nav-list"
className="layout-navList"
ref={node => (this.listNode = node)}
>
<li>
@ -103,7 +106,7 @@ class Layout extends React.Component {
style={style}
children={style => (
<div
className="layout-nav-underline"
className="layout-navUnderline"
style={{
WebkitTransform: `translate3d(${style.left}px,0,0)`,
transform: `translate3d(${style.left}px,0,0)`,

8
client/Stats.css Normal file
View File

@ -0,0 +1,8 @@
.table-filter {
font-size: 0.8em;
text-align: right;
}
.regions-table .country-row td.country-name {
padding-left: 20px;
}

73
client/Stats.js
View File

@ -1,23 +1,28 @@
import "./Stats.css";
import React from "react";
import PropTypes from "prop-types";
import formatBytes from "pretty-bytes";
import formatDate from "date-fns/format";
import parseDate from "date-fns/parse";
import { continents, countries } from "countries-list";
import formatNumber from "./utils/formatNumber";
import formatPercent from "./utils/formatPercent";
import { continents, countries } from "countries-list";
const getCountriesByContinent = continent =>
Object.keys(countries).filter(
function getCountriesByContinent(continent) {
return Object.keys(countries).filter(
country => countries[country].continent === continent
);
}
const sumKeyValues = (hash, keys) =>
keys.reduce((n, key) => n + (hash[key] || 0), 0);
function sumKeyValues(hash, keys) {
return keys.reduce((n, key) => n + (hash[key] || 0), 0);
}
const sumValues = hash =>
Object.keys(hash).reduce((memo, key) => memo + hash[key], 0);
function sumValues(hash) {
return Object.keys(hash).reduce((memo, key) => memo + hash[key], 0);
}
class Stats extends React.Component {
static propTypes = {
@ -110,16 +115,22 @@ class Stats extends React.Component {
) {
regionRows.push(
<tr key={continent} className="continent-row">
<td>{continentName}</td>
<td>
{formatNumber(continentData.requests)} ({formatPercent(
continentData.requests / totals.requests.all
)}%)
<strong>{continentName}</strong>
</td>
<td>
{formatBytes(continentData.bandwidth)} ({formatPercent(
continentData.bandwidth / totals.bandwidth.all
)}%)
<strong>
{formatNumber(continentData.requests)} ({formatPercent(
continentData.requests / totals.requests.all
)}%)
</strong>
</td>
<td>
<strong>
{formatBytes(continentData.bandwidth)} ({formatPercent(
continentData.bandwidth / totals.bandwidth.all
)}%)
</strong>
</td>
</tr>
);
@ -220,9 +231,15 @@ class Stats extends React.Component {
<table cellSpacing="0" cellPadding="0" style={{ width: "100%" }}>
<thead>
<tr>
<th>Package</th>
<th>Requests (% of total)</th>
<th>Bandwidth (% of total)</th>
<th>
<strong>Package</strong>
</th>
<th>
<strong>Requests (% of total)</strong>
</th>
<th>
<strong>Bandwidth (% of total)</strong>
</th>
</tr>
</thead>
<tbody>{packageRows}</tbody>
@ -263,9 +280,15 @@ class Stats extends React.Component {
>
<thead>
<tr>
<th>Region</th>
<th>Requests (% of total)</th>
<th>Bandwidth (% of total)</th>
<th>
<strong>Region</strong>
</th>
<th>
<strong>Requests (% of total)</strong>
</th>
<th>
<strong>Bandwidth (% of total)</strong>
</th>
</tr>
</thead>
<tbody>{regionRows}</tbody>
@ -282,8 +305,12 @@ class Stats extends React.Component {
<table cellSpacing="0" cellPadding="0" style={{ width: "100%" }}>
<thead>
<tr>
<th>Protocol</th>
<th>Requests (% of total)</th>
<th>
<strong>Protocol</strong>
</th>
<th>
<strong>Requests (% of total)</strong>
</th>
</tr>
</thead>
<tbody>{protocolRows}</tbody>

75
client/main.css
View File

@ -1,9 +1,10 @@
body {
font-size: 16px;
font-size: 14px;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica,
Arial, sans-serif;
line-height: 1.5;
line-height: 1.7;
padding: 5px 20px;
color: #000000;
}
@media (min-width: 800px) {
@ -60,73 +61,3 @@ td {
max-width: 700px;
margin: 0 auto;
}
.layout-title {
margin: 0;
text-transform: uppercase;
text-align: center;
font-size: 5em;
}
.layout-nav {
margin: 0 0 3em;
}
.layout-nav-list {
margin: 0;
padding: 0;
display: flex;
justify-content: center;
}
.layout-nav-list li {
flex-basis: auto;
list-style-type: none;
display: inline-block;
font-size: 1.1em;
margin: 0 10px;
}
.layout-nav-list li a:link {
text-decoration: none;
}
.layout-nav-list li a:link,
.layout-nav-list li a:visited {
color: black;
}
.layout-nav-underline {
height: 4px;
background-color: black;
position: absolute;
left: 0;
}
.home-example {
text-align: center;
background-color: #eee;
margin: 2em 0;
padding: 5px 0;
}
.table-filter {
font-size: 0.8em;
text-align: right;
}
.regions-table .continent-row {
font-weight: bold;
}
.regions-table .country-row td.country-name {
padding-left: 20px;
}
.about-logos {
margin: 2em 0;
display: flex;
justify-content: center;
}
.about-logo {
text-align: center;
flex: 1;
max-width: 80%;
}
.about-logo img {
max-width: 60%;
}

3
client/main.js
View File

@ -1,6 +1,7 @@
import "./main.css";
import React from "react";
import ReactDOM from "react-dom";
import App from "./App";
import "./main.css";
ReactDOM.render(<App />, document.getElementById("root"));