From df3d3d24f575aa957da63e42a6ad90c37b17b675 Mon Sep 17 00:00:00 2001
From: WithoutPants <53250216+WithoutPants@users.noreply.github.com>
Date: Fri, 14 Feb 2020 08:15:05 +1100
Subject: [PATCH] Update stats page (#366)

* Remove notes. Make stats like old version
* Make font size responsive
---
 ui/v2/src/components/Stats.tsx | 19 ++++++-------------
 ui/v2/src/index.scss           | 12 ++++++++++++
 2 files changed, 18 insertions(+), 13 deletions(-)

diff --git a/ui/v2/src/components/Stats.tsx b/ui/v2/src/components/Stats.tsx
index 1ee0aa4bb..e6483c5ac 100644
--- a/ui/v2/src/components/Stats.tsx
+++ b/ui/v2/src/components/Stats.tsx
@@ -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>
   );
 };
diff --git a/ui/v2/src/index.scss b/ui/v2/src/index.scss
index ee704c206..ced2fe5b8 100755
--- a/ui/v2/src/index.scss
+++ b/ui/v2/src/index.scss
@@ -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;
+  }
+}