Update stats page (#366)

* Remove notes. Make stats like old version
* Make font size responsive
This commit is contained in:
WithoutPants 2020-02-14 08:15:05 +11:00 committed by GitHub
parent aa8bfaf407
commit df3d3d24f5
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
2 changed files with 18 additions and 13 deletions

View file

@ -8,35 +8,35 @@ export const Stats: FunctionComponent = () => {
function renderStats() {
if (!data || !data.stats) { return; }
return (
<nav id="details-container" className="level">
<nav id="details-container" className="level stats">
<div className="level-item has-text-centered">
<div>
<p className="heading">Scenes</p>
<p className="title">{data.stats.scene_count}</p>
<p className="heading">Scenes</p>
</div>
</div>
<div className="level-item has-text-centered">
<div>
<p className="heading">Galleries</p>
<p className="title">{data.stats.gallery_count}</p>
<p className="heading">Galleries</p>
</div>
</div>
<div className="level-item has-text-centered">
<div>
<p className="heading">Performers</p>
<p className="title">{data.stats.performer_count}</p>
<p className="heading">Performers</p>
</div>
</div>
<div className="level-item has-text-centered">
<div>
<p className="heading">Studios</p>
<p className="title">{data.stats.studio_count}</p>
<p className="heading">Studios</p>
</div>
</div>
<div className="level-item has-text-centered">
<div>
<p className="heading">Tags</p>
<p className="title">{data.stats.tag_count}</p>
<p className="heading">Tags</p>
</div>
</div>
</nav>
@ -48,13 +48,6 @@ export const Stats: FunctionComponent = () => {
{!data || loading ? <Spinner size={Spinner.SIZE_LARGE} /> : undefined}
{!!error ? <span>error.message</span> : undefined}
{renderStats()}
<h3>Notes</h3>
<pre>
{`
This is still an early version, some things are still a work in progress.
`}
</pre>
</div>
);
};

View file

@ -598,3 +598,15 @@ span.block {
transition: margin-left 0.5s;
}
}
.stats {
& p.title {
font-size: 3vw;
text-align: center;
}
& p.heading {
text-align: center;
text-transform: uppercase;
}
}