fix: details button to drop to the bottom naturally on smaller screens

This _mostly_ fixes one of the issues being tracked on plausible#972, titled "Details button issue on Firefox specifically"
MaybeThisIsRu · Jun 8, 2021 · 4cec202 · 4cec202
1 parent 4aecdee
commit 4cec202
Show file tree

Hide file tree

Showing 13 changed files with 93 additions and 44 deletions.
diff --git a/assets/css/app.css b/assets/css/app.css
@@ -248,7 +248,25 @@ blockquote {
 
 .stats-item {
   @apply mt-6;
+  @apply flex flex-col;
   width: 100%;
+  min-height: 436px;
+}
+
+.stats-item__header {
+  @apply flex flex-col;
+  @apply flex-grow;
+}
+
+/* Main container -- includes heading labels and contents. */
+.stats-item__main {
+  @apply flex flex-col;
+  @apply flex-grow;
+}
+
+/* Contents inside main container. */
+.stats-item__contents {
+  @apply flex-grow;
 }
 
 @screen md {
@@ -257,6 +275,12 @@ blockquote {
     margin-right: 6px;
     width: calc(50% - 6px);
     position: relative;
+    min-height: initial;
+    height: 436px;
+  }
+
+  .stats-item__header {
+    height: inherit;
   }
 }
 
@@ -268,6 +292,19 @@ blockquote {
   margin-right: 0;
 }
 
+/**
+ * The "more" links needs to be absolutely position on bigger screens, but flow naturally and stick to the bottom of its container on smaller screens.
+ 
+ For the smaller screens, we don't need to meddle with the .more-link class. That happens as an effect of using flex-grow on the previous sibling HTML element!
+ */
+
+@screen md {
+  .more-link {
+    /* Sticky it to the bottom of the container */
+    @apply absolute bottom-0 left-0;
+  }
+}
+
 .fade-enter {
   opacity: 0;
 }

diff --git a/assets/js/dashboard/stats/countries.js b/assets/js/dashboard/stats/countries.js
@@ -148,7 +148,7 @@ class Countries extends React.Component {
 
   render() {
     return (
-      <div className="relative p-4 bg-white rounded shadow-xl stats-item dark:bg-gray-825" style={{height: '436px'}}>
+      <div className="relative p-4 bg-white rounded shadow-xl stats-item dark:bg-gray-825">
         <LazyLoader onVisible={this.onVisible}>
           { this.state.loading && <div className="mx-auto my-32 loading"><div></div></div> }
           <FadeIn show={!this.state.loading}>

diff --git a/assets/js/dashboard/stats/devices/browsers.js b/assets/js/dashboard/stats/devices/browsers.js
@@ -84,9 +84,9 @@ export default class Browsers extends React.Component {
 
   render() {
     return (
-      <LazyLoader onVisible={this.onVisible}>
+      <LazyLoader onVisible={this.onVisible} className="stats-item__main">
         { this.state.loading && <div className="mx-auto loading mt-44"><div></div></div> }
-        <FadeIn show={!this.state.loading}>
+        <FadeIn show={!this.state.loading} className="stats-item__contents">
           { this.renderList() }
         </FadeIn>
       </LazyLoader>

diff --git a/assets/js/dashboard/stats/devices/index.js b/assets/js/dashboard/stats/devices/index.js
@@ -106,7 +106,9 @@ class ScreenSizes extends React.Component {
     if (this.state.sizes && this.state.sizes.length > 0) {
       return (
         <React.Fragment>
-          <div className="flex items-center justify-between mt-3 mb-2 text-xs font-bold tracking-wide text-gray-500">
+          <div
+            className="flex items-center justify-between mt-3 mb-2 text-xs font-bold tracking-wide text-gray-500"
+          >
             <span>Screen size</span>
             <span>{ this.label() }</span>
           </div>
@@ -125,9 +127,9 @@ class ScreenSizes extends React.Component {
 
   render() {
     return (
-      <LazyLoader onVisible={this.onVisible}>
+      <LazyLoader onVisible={this.onVisible} className="stats-item__main">
         { this.state.loading && <div className="mx-auto loading mt-44"><div></div></div> }
-        <FadeIn show={!this.state.loading}>
+        <FadeIn show={!this.state.loading} class="stats-item__contents">
           { this.renderList() }
         </FadeIn>
       </LazyLoader>
@@ -202,9 +204,10 @@ export default class Devices extends React.Component {
 
   render() {
     return (
-      <div className="stats-item">
-        <div className="relative p-4 bg-white rounded shadow-xl dark:bg-gray-825" style={{height: '436px'}}>
-
+      <div className="stats-item stats-item--has-header">
+        <div
+          className="stats-item__header relative p-4 bg-white rounded shadow-xl dark:bg-gray-825"
+        >
           <div className="flex justify-between w-full">
             <h3 className="font-bold dark:text-gray-100">Devices</h3>
             <ul className="flex text-xs font-medium text-gray-500 dark:text-gray-400 space-x-2">

diff --git a/assets/js/dashboard/stats/devices/operating-systems.js b/assets/js/dashboard/stats/devices/operating-systems.js
@@ -83,9 +83,9 @@ export default class OperatingSystems extends React.Component {
 
   render() {
     return (
-      <LazyLoader onVisible={this.onVisible}>
+      <LazyLoader onVisible={this.onVisible} className="stats-item__main">
         { this.state.loading && <div className="mx-auto loading mt-44"><div></div></div> }
-        <FadeIn show={!this.state.loading}>
+        <FadeIn show={!this.state.loading} className="stats-item__contents">
           { this.renderList() }
         </FadeIn>
       </LazyLoader>

diff --git a/assets/js/dashboard/stats/more-link.js b/assets/js/dashboard/stats/more-link.js
@@ -4,7 +4,7 @@ import { Link } from 'react-router-dom'
 export default function MoreLink({site, list, endpoint}) {
   if (list.length > 0) {
     return (
-      <div className="text-center w-full absolute bottom-0 left-0 pb-3">
+      <div className="text-center w-full more-link py-3 md:pb-3 md:pt-0">
         <Link
           to={`/${encodeURIComponent(site.domain)}/${endpoint}${window.location.search}`}
           // eslint-disable-next-line max-len

diff --git a/assets/js/dashboard/stats/pages/entry-pages.js b/assets/js/dashboard/stats/pages/entry-pages.js
@@ -81,9 +81,9 @@ export default class EntryPages extends React.Component {
   render() {
     const { loading } = this.state;
     return (
-      <LazyLoader onVisible={this.onVisible}>
+      <LazyLoader onVisible={this.onVisible} className="stats-item__main">
         { loading && <div className="mx-auto loading mt-44"><div></div></div> }
-        <FadeIn show={!loading}>
+        <FadeIn show={!loading} className="stats-item__contents">
           { this.renderList() }
         </FadeIn>
         {!loading && <MoreLink site={this.props.site} list={this.state.pages} endpoint="entry-pages" />}

diff --git a/assets/js/dashboard/stats/pages/exit-pages.js b/assets/js/dashboard/stats/pages/exit-pages.js
@@ -76,9 +76,9 @@ export default class ExitPages extends React.Component {
   render() {
     const { loading } = this.state;
     return (
-      <LazyLoader onVisible={this.onVisible}>
+      <LazyLoader onVisible={this.onVisible} className="stats-item__main">
         { loading && <div className="mx-auto loading mt-44"><div></div></div> }
-        <FadeIn show={!loading}>
+        <FadeIn show={!loading} className="stats-item__contents">
           { this.renderList() }
         </FadeIn>
         {!loading && <MoreLink site={this.props.site} list={this.state.pages} endpoint="exit-pages" />}

diff --git a/assets/js/dashboard/stats/pages/index.js b/assets/js/dashboard/stats/pages/index.js
@@ -66,21 +66,23 @@ export default class Pages extends React.Component {
 
   render() {
     return (
-      <div className="stats-item">
-        <div className="bg-white dark:bg-gray-825 shadow-xl rounded p-4 relative" style={{height: '436px'}}>
-
+      <div className="stats-item stats-item--has-header">
+        <div
+          className="stats-item__header bg-white dark:bg-gray-825 shadow-xl rounded p-4 relative"
+        >
+          {/* Header Container */}
           <div className="w-full flex justify-between">
-            <h3 className="font-bold dark:text-gray-100">{labelFor[this.state.mode] || 'Page Visits'}</h3>
-
+            <h3 className="font-bold dark:text-gray-100">
+              {labelFor[this.state.mode] || 'Page Visits'}
+            </h3>
             <ul className="flex font-medium text-xs text-gray-500 dark:text-gray-400 space-x-2">
               { this.renderPill('Top Pages', 'pages') }
               { this.renderPill('Entry Pages', 'entry-pages') }
               { this.renderPill('Exit Pages', 'exit-pages') }
             </ul>
           </div>
-
+          {/* Main Contents */}
           { this.renderContent() }
-
         </div>
       </div>
     )

diff --git a/assets/js/dashboard/stats/pages/pages.js b/assets/js/dashboard/stats/pages/pages.js
@@ -87,9 +87,9 @@ export default class Visits extends React.Component {
   render() {
     const { loading } = this.state;
     return (
-      <LazyLoader onVisible={this.onVisible}>
+      <LazyLoader onVisible={this.onVisible} className="stats-item__main">
         { loading && <div className="mx-auto loading mt-44"><div></div></div> }
-        <FadeIn show={!loading}>
+        <FadeIn show={!loading} className="stats-item__contents">
           { this.renderList() }
         </FadeIn>
         {!loading && <MoreLink site={this.props.site} list={this.state.pages} endpoint="pages" />}

diff --git a/assets/js/dashboard/stats/sources/referrer-list.js b/assets/js/dashboard/stats/sources/referrer-list.js
@@ -94,20 +94,27 @@ export default class Referrers extends React.Component {
   renderList() {
     if (this.state.referrers.length > 0) {
       return (
-        <React.Fragment>
-          <div className="flex items-center justify-between mt-3 mb-2 text-xs font-bold tracking-wide text-gray-500 dark:text-gray-400">
+        <div className="stats-item__main">
+          <div
+            className="flex items-center justify-between mt-3 mb-2 text-xs font-bold tracking-wide text-gray-500 dark:text-gray-400"
+          >
             <span>Referrer</span>
             <span>{ this.label() }</span>
           </div>
 
-          <FlipMove>
+          <FlipMove className="stats-item__contents">
             {this.state.referrers.map(this.renderReferrer.bind(this))}
           </FlipMove>
-        </React.Fragment>
+        </div>
       )
-    } else {
-      return <div className="font-medium text-center text-gray-500 mt-44 dark:text-gray-400">No data yet</div>
     }
+    return (
+      <div
+        className="font-medium text-center text-gray-500 mt-44 dark:text-gray-400"
+      >
+        No data yet
+      </div>
+    )
   }
 
   renderContent() {
@@ -123,13 +130,13 @@ export default class Referrers extends React.Component {
 
   render() {
     return (
-      <div className="relative p-4 bg-white rounded shadow-xl stats-item dark:bg-gray-825" style={{height: '436px'}}>
-        <LazyLoader onVisible={this.onVisible}>
+      <div className="relative p-4 bg-white rounded shadow-xl stats-item dark:bg-gray-825">
+        <LazyLoader onVisible={this.onVisible} className="stats-item__main">
           <h3 className="font-bold dark:text-gray-100">Top Referrers</h3>
           { this.state.loading && <div className="mx-auto loading mt-44"><div></div></div> }
-            <FadeIn show={!this.state.loading}>
-              { this.renderContent() }
-            </FadeIn>
+          <FadeIn show={!this.state.loading}>
+            { this.renderContent() }
+          </FadeIn>
         </LazyLoader>
       </div>
     )

diff --git a/assets/js/dashboard/stats/sources/search-terms.js b/assets/js/dashboard/stats/sources/search-terms.js
@@ -107,9 +107,9 @@ export default class SearchTerms extends React.Component {
 
   render() {
     return (
-      <div className="stats-item relative bg-white dark:bg-gray-825 shadow-xl rounded p-4" style={{height: '436px'}}>
+      <div className="stats-item relative bg-white dark:bg-gray-825 shadow-xl rounded p-4">
         { this.state.loading && <div className="loading mt-44 mx-auto"><div></div></div> }
-        <FadeIn show={!this.state.loading}>
+        <FadeIn show={!this.state.loading} className="stats-item__contents">
           { this.renderContent() }
         </FadeIn>
       </div>

diff --git a/assets/js/dashboard/stats/sources/source-list.js b/assets/js/dashboard/stats/sources/source-list.js
@@ -99,7 +99,7 @@ class AllSources extends React.Component {
 
   render() {
     return (
-      <div className="relative p-4 bg-white rounded shadow-xl stats-item dark:bg-gray-825" style={{height: '436px'}}>
+      <div className="relative p-4 bg-white rounded shadow-xl stats-item dark:bg-gray-825">
           { this.renderContent() }
       </div>
     )
@@ -166,17 +166,17 @@ class UTMSources extends React.Component {
   renderList() {
     if (this.state.referrers && this.state.referrers.length > 0) {
       return (
-        <React.Fragment>
+        <div class="flex flex-col flex-grow">
           <div className="flex items-center justify-between mt-3 mb-2 text-xs font-bold tracking-wide text-gray-500 dark:text-gray-400">
             <span>{UTM_TAGS[this.props.tab].label}</span>
             <span>{this.label()}</span>
           </div>
 
-          <FlipMove>
+          <FlipMove className="flex-grow">
             {this.state.referrers.map(this.renderReferrer.bind(this))}
           </FlipMove>
           <MoreLink site={this.props.site} list={this.state.referrers} endpoint={UTM_TAGS[this.props.tab].endpoint} />
-        </React.Fragment>
+        </div>
       )
     } else {
       return <div className="font-medium text-center text-gray-500 mt-44 dark:text-gray-400">No data yet</div>
@@ -191,7 +191,7 @@ class UTMSources extends React.Component {
           { this.props.renderTabs() }
         </div>
         { this.state.loading && <div className="mx-auto loading mt-44"><div></div></div> }
-        <FadeIn show={!this.state.loading}>
+        <FadeIn show={!this.state.loading} className="flex flex-col flex-grow">
           { this.renderList() }
         </FadeIn>
       </React.Fragment>
@@ -200,7 +200,7 @@ class UTMSources extends React.Component {
 
   render() {
     return (
-      <div className="relative p-4 bg-white rounded shadow-xl stats-item dark:bg-gray-825" style={{height: '436px'}}>
+      <div className="relative p-4 bg-white rounded shadow-xl stats-item dark:bg-gray-825">
         { this.renderContent() }
       </div>
     )