Show more link unconditionally

This commit is contained in:
Uku Taht 2020-01-08 10:48:27 +02:00
parent cfe3695ba8
commit b71e9bf5a5
7 changed files with 24 additions and 29 deletions

View File

@ -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>
)
}

View File

@ -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>
)
}

View File

@ -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>
)
}

View File

@ -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) {
export default function MoreLink({site, endpoint}) {
return (
<div className="text-center">
<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>
)
} else {
return null
}
}

View File

@ -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>
)
}

View File

@ -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>
)
}

View File

@ -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>
)
}