Fix for details button misbehaving on mobile

.tool-versions

@@ -1,3 +1,4 @@
 elixir 1.11.3-otp-23
 erlang 23.2.1
 nodejs 15.3.0
+python 3.9.4

CONTRIBUTING.md

@@ -9,12 +9,13 @@ Make sure Docker, Elixir, Erlang and Node.js are all installed on your developme
 ### Start the environment:
 
 1. Run both `make postgres` and `make clickhouse`.
-2. Run `mix deps.get`. This will download the required Elixir dependencies.
-2. Run `mix ecto.create`. This will create the required databases in both Postgres and Clickhouse.
-3. Run `mix ecto.migrate` to build the database schema.
-4. Run `npm ci --prefix assets` to install the required node dependencies.
-5. Run `mix phx.server` to start the Phoenix server.
-6. The system is now available on `localhost:8000`.
+2. You can then get set up with the following bits in one go with `make install`.
+  1. Run `mix deps.get`. This will download the required Elixir dependencies.
+  2. Run `mix ecto.create`. This will create the required databases in both Postgres and Clickhouse.
+  3. Run `mix ecto.migrate` to build the database schema.
+  4. Run `npm ci --prefix assets` to install the required node dependencies.
+3. Run `make server` or `mix phx.server` to start the Phoenix server.
+4. The system is now available on `localhost:8000`.
 
 ### Creating an account
 
@@ -29,4 +30,10 @@ Make sure Docker, Elixir, Erlang and Node.js are all installed on your developme
 1. Stop and remove the Postgres container with `make postgres-stop`.
 2. Stop and remove the Clickhouse container with `make clickhouse-stop`.
 
-Volumes are preserved. You'll find that the Postgres and Clickhouse state are retained when you bring them up again the next time: no need to re-register and so on.
+Volumes are preserved. You'll find that the Postgres and Clickhouse state are retained when you bring them up again the next time: no need to re-register and so on.
+
+Note: Since we are deleting the containers, be careful when deleting volumes with `docker volume prune`. You might accidentally delete the database and would have to go through re-registration process.
+
+### Pre-commit hooks
+
+`pre-commit` requires Python to be available locally and covers JavaScript and CSS. Set up with `pip install --user pre-commit` followed by `pre-commit install`. Conversely, if the prompts are far too bothersome, remove with `pre-commit uninstall`.

Makefile

@@ -1,3 +1,12 @@
+install:
+	mix deps.get
+	mix ecto.create
+	mix ecto.migrate
+	npm ci --prefix assets
+
+server:
+	mix phx.server
+
 clickhouse:
 	docker run --detach -p 8123:8123 --ulimit nofile=262144:262144 --volume=$$PWD/.clickhouse_db_vol:/var/lib/clickhouse --name plausible_clickhouse yandex/clickhouse-server:21.3.2.5
 

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;
 }

assets/js/dashboard/fade-in.js

@@ -1,8 +1,12 @@
 import React from 'react';
 
-export default function FadeIn({show, children}) {
-  const className = show ? "fade-enter-active" : "fade-enter"
-
-  return <div className={className}>{children}</div>
+export default function FadeIn({className, show, children}) {
+  return (
+    <div
+      className={`${className || ''} ${show ? "fade-enter-active" : "fade-enter"}`}
+    >
+      {children}
+    </div>
+)
 }
 

assets/js/dashboard/lazy-loader.js

@@ -1,10 +1,6 @@
 import React from 'react';
 
 export default class extends React.Component {
-  constructor(props) {
-    super(props)
-  }
-
   componentDidMount() {
     this.observer = new IntersectionObserver((entries) => {
       if (entries[0].isIntersecting) {
@@ -24,7 +20,13 @@ export default class extends React.Component {
 
   render() {
     return (
-      <div ref={(el) => this.element = el} className={this.props.className} style={this.props.style}>{this.props.children}</div>
+      <div
+        ref={(el) => { this.element = el }}
+        className={this.props.className}
+        style={this.props.style}
+      >
+        {this.props.children}
+      </div>
     );
   }
 }

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

assets/js/dashboard/stats/devices/browsers.js

@@ -14,17 +14,17 @@ export default class Browsers extends React.Component {
     this.onVisible = this.onVisible.bind(this)
   }
 
-  onVisible() {
-    this.fetchBrowsers()
-    if (this.props.timer) this.props.timer.onTick(this.fetchBrowsers.bind(this))
-  }
-
   componentDidUpdate(prevProps) {
     if (this.props.query !== prevProps.query) {
       this.setState({loading: true, browsers: null})
       this.fetchBrowsers()
     }
   }
+
+  onVisible() {
+    this.fetchBrowsers()
+    if (this.props.timer) this.props.timer.onTick(this.fetchBrowsers.bind(this))
+  }
 
   fetchBrowsers() {
     if (this.props.query.filters.browser) {
@@ -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>