Show more link unconditionally

assets/js/dashboard/stats/browsers.js

@@ -41,13 +41,13 @@ export default class Browsers extends React.Component {
   render() {
     if (this.state.loading) {
       return (
-        <div className="w-full md:w-31percent bg-white shadow-md rounded mt-4 p-4" style={{height: '405px'}}>
+        <div className="w-full md:w-31percent bg-white shadow-md rounded mt-4 p-4 relative" style={{height: '405px'}}>
           <div className="loading my-32 mx-auto"><div></div></div>
         </div>
       )
     } else if (this.state.browsers) {
       return (
-        <div className="w-full md:w-31percent bg-white shadow-md rounded mt-4 p-4" style={{height: '405px'}}>
+        <div className="w-full md:w-31percent bg-white shadow-md rounded mt-4 p-4 relative" style={{height: '405px'}}>
           <div className="text-center">
             <h2>Browsers</h2>
             <div className="text-grey-darker mt-1">by visitors</div>
@@ -56,7 +56,7 @@ export default class Browsers extends React.Component {
           <div className="mt-8">
             { this.state.browsers.map(this.renderBrowser.bind(this)) }
           </div>
-          <MoreLink site={this.props.site} list={this.state.browsers} endpoint="browsers" />
+          <MoreLink site={this.props.site} endpoint="browsers" />
         </div>
       )
     }

assets/js/dashboard/stats/conversions.js

@@ -61,7 +61,6 @@ export default class Conversions extends React.Component {
           <div className="mt-8">
             { this.state.goals.map(this.renderGoal.bind(this)) }
           </div>
-          <MoreLink site={this.props.site} list={this.state.goals} endpoint="conversions" />
         </div>
       )
     }

assets/js/dashboard/stats/countries.js

@@ -43,13 +43,13 @@ export default class Countries extends React.Component {
   render() {
     if (this.state.loading) {
       return (
-        <div className="w-full md:w-31percent bg-white shadow-md rounded mt-4 p-4" style={{height: '405px'}}>
+        <div className="w-full md:w-31percent bg-white shadow-md rounded mt-4 p-4 relative" style={{height: '405px'}}>
           <div className="loading my-32 mx-auto"><div></div></div>
         </div>
       )
     } else if (this.state.countries) {
       return (
-        <div className="w-full md:w-31percent bg-white shadow-md rounded mt-4 p-4" style={{height: '405px'}}>
+        <div className="w-full md:w-31percent bg-white shadow-md rounded mt-4 p-4 relative" style={{height: '405px'}}>
           <div className="text-center">
             <h2>Top Countries</h2>
             <div className="text-grey-darker mt-1">by visitors</div>
@@ -58,7 +58,7 @@ export default class Countries extends React.Component {
           <div className="mt-8">
             { this.state.countries.map(this.renderCountry.bind(this)) }
           </div>
-          <MoreLink site={this.props.site} list={this.state.countries} endpoint="countries" />
+          <MoreLink site={this.props.site} endpoint="countries" />
         </div>
       )
     }

assets/js/dashboard/stats/more-link.js

@@ -1,17 +1,13 @@
 import React from 'react';
 import { Link } from 'react-router-dom'
 
-export default function MoreLink({site, list, endpoint}) {
-  if (list.length >= 5) {
-    return (
-      <div className="text-center">
-        <Link to={`/${site.domain}/${endpoint}${window.location.search}`}className="font-bold text-sm text-grey-dark hover:text-red transition tracking-wide">
-          <svg className="feather mr-1"><use xlinkHref="#feather-maximize" /></svg>
-          MORE
-        </Link>
-      </div>
-    )
-  } else {
-    return null
-  }
+export default function MoreLink({site, endpoint}) {
+  return (
+    <div className="text-center w-full absolute pin-b pin-l p-4">
+      <Link to={`/${site.domain}/${endpoint}${window.location.search}`}className="font-bold text-sm text-grey-dark hover:text-red transition tracking-wide">
+        <svg className="feather mr-1"><use xlinkHref="#feather-maximize" /></svg>
+        MORE
+      </Link>
+    </div>
+  )
 }

assets/js/dashboard/stats/operating-systems.js

@@ -41,13 +41,13 @@ export default class OperatingSystems extends React.Component {
   render() {
     if (this.state.loading) {
       return (
-        <div className="w-full md:w-31percent bg-white shadow-md rounded mt-4 p-4" style={{height: '405px'}}>
+        <div className="w-full md:w-31percent bg-white shadow-md rounded mt-4 p-4 relative" style={{height: '405px'}}>
           <div className="loading my-32 mx-auto"><div></div></div>
         </div>
       )
     } else if (this.state.systems) {
       return (
-        <div className="w-full md:w-31percent bg-white shadow-md rounded mt-4 p-4" style={{height: '405px'}}>
+        <div className="w-full md:w-31percent bg-white shadow-md rounded mt-4 p-4 relative" style={{height: '405px'}}>
           <div className="text-center">
             <h2>Operating Systems</h2>
             <div className="text-grey-darker mt-1">by visitors</div>
@@ -56,7 +56,7 @@ export default class OperatingSystems extends React.Component {
           <div className="mt-8">
             { this.state.systems.map(this.renderSystem.bind(this)) }
           </div>
-          <MoreLink site={this.props.site} list={this.state.systems} endpoint="operating-systems" />
+          <MoreLink site={this.props.site} endpoint="operating-systems" />
         </div>
       )
     }

assets/js/dashboard/stats/pages.js

@@ -45,13 +45,13 @@ export default class Pages extends React.Component {
   render() {
     if (this.state.loading) {
       return (
-        <div className="w-full md:w-31percent bg-white shadow-md rounded mt-4 p-4" style={{height: '405px'}}>
+        <div className="w-full md:w-31percent bg-white shadow-md rounded mt-4 p-4 relative" style={{height: '405px'}}>
           <div className="loading my-32 mx-auto"><div></div></div>
         </div>
       )
     } else if (this.state.pages) {
       return (
-        <div className="w-full md:w-31percent bg-white shadow-md rounded mt-4 p-4" style={{height: '405px'}}>
+        <div className="w-full md:w-31percent bg-white shadow-md rounded mt-4 p-4 relative" style={{height: '405px'}}>
           <div className="text-center">
             <h2>Top Pages</h2>
             <div className="text-grey-darker mt-1">by {eventName(this.props.query)}</div>
@@ -60,7 +60,7 @@ export default class Pages extends React.Component {
           <div className="mt-8">
             { this.state.pages.map(this.renderPage.bind(this)) }
           </div>
-          <MoreLink site={this.props.site} list={this.state.pages} endpoint="pages" />
+          <MoreLink site={this.props.site} endpoint="pages" />
         </div>
       )
     }

assets/js/dashboard/stats/referrers.js

@@ -43,13 +43,13 @@ export default class Referrers extends React.Component {
   render() {
     if (this.state.loading) {
       return (
-        <div className="w-full md:w-31percent bg-white shadow-md rounded mt-4 p-4" style={{height: '405px'}}>
+        <div className="w-full md:w-31percent bg-white shadow-md rounded mt-4 p-4 relative" style={{height: '405px'}}>
           <div className="loading my-32 mx-auto"><div></div></div>
         </div>
       )
     } else if (this.state.referrers) {
       return (
-        <div className="w-full md:w-31percent bg-white shadow-md rounded mt-4 p-4" style={{height: '405px'}}>
+        <div className="w-full md:w-31percent bg-white shadow-md rounded mt-4 p-4 relative" style={{height: '405px'}}>
           <div className="text-center">
             <h2>Top Referrers</h2>
             <div className="text-grey-darker mt-1">by visitors</div>
@@ -58,7 +58,7 @@ export default class Referrers extends React.Component {
           <div className="mt-8">
             { this.state.referrers.map(this.renderReferrer.bind(this)) }
           </div>
-          <MoreLink site={this.props.site} list={this.state.referrers} endpoint="referrers" />
+          <MoreLink site={this.props.site} endpoint="referrers" />
         </div>
       )
     }