Update stats page (#366)

* Remove notes. Make stats like old version * Make font size responsive
stashapp · Feb 13, 2020 · df3d3d2 · df3d3d2
1 parent aa8bfaf
commit df3d3d2
Show file tree

Hide file tree

Showing 2 changed files with 18 additions and 13 deletions.
diff --git 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
@@ -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;
+  }
+}