From bd9434e60aab04068bc23c40783d2bfd64176881 Mon Sep 17 00:00:00 2001 From: Danny van Kooten Date: Tue, 24 Oct 2023 14:50:16 +0200 Subject: [PATCH] move css to single stylesheet and load it via html instead of via js. prevents flash of unstyled content.| --- assets/src/css/admin.css | 271 ++++++++++++++++++++++++++++++ assets/src/css/chart.css | 52 ------ assets/src/css/dashboard.css | 215 ------------------------ assets/src/js/admin.js | 1 - assets/src/js/components/chart.js | 1 - src/class-admin.php | 6 +- views/dashboard-page.php | 6 +- webpack.config.js | 85 ++++------ 8 files changed, 312 insertions(+), 325 deletions(-) delete mode 100644 assets/src/css/chart.css delete mode 100644 assets/src/css/dashboard.css diff --git a/assets/src/css/admin.css b/assets/src/css/admin.css index 826a05b0..cb7c39c2 100644 --- a/assets/src/css/admin.css +++ b/assets/src/css/admin.css @@ -55,5 +55,276 @@ h1.ka-logo, } .ka-admin-container .description { font-size: 14px; +} + + +/** Chart */ +.ka-chart { + position: relative; + overflow: visible; +} +.ka-chart--tooltip { + position: absolute; + z-index: 9991; /* above wp admin menu */ +} +.ka-chart--tooltip-box { + background: rgba(46, 54, 63, 0.96); + box-shadow: 2px 2px 12px 0 rgba(0,0,0,0.5); + border-radius: 4px; + color: #EEE; +} +.ka-chart--tooltip-heading { + font-weight: 600; + padding: 12px; + line-height: 1; +} +.ka-chart--tooltip-content { + padding: 6px 12px; + width: 50%; + display: block; + flex: 1; +} +.ka-chart--tooltip-content.ka--pageviews, +.ka-chart--tooltip-content.ka--visitors { + border-top: 3px solid transparent; +} +.ka-chart--tooltip-amount { + color: #FFF; + font-weight: bold; +} +.ka-chart--tooltip-arrow { + width: 0; + height: 0; + margin-left: auto; + margin-right: auto; + /* css trick to create a downward pointing triangle */ + border-left: 6px solid transparent; + border-right: 6px solid transparent; + border-top: 6px solid rgba(46, 54, 63, 0.96); +} + +.ka--pageviews { + border-top-color: #e14d43 !important; + fill: #e14d43; +} +.ka--visitors { + border-top-color: #b43d35 !important; + fill: #b43d35; +} + +/** Dashboard */ +.dashboard_page_koko-analytics { + overflow-x: hidden +} +.ka-dashboard-components { + display: grid; + grid-gap: 12px; + grid-template-columns: repeat(6, 1fr); +} +/** TopX components */ +.ka-topx { + grid-column: span 6; +} +@media (min-width: 840px) { + .ka-topx { + grid-column: span 3; + } +} +.ka-topx--row { + display: grid; + grid-gap: 12px; + grid-template-columns: min-content 8fr 2fr 2fr; + border-top: 1px dashed #eee; + padding: 6px 12px; + text-align: left +} +.ka-topx--placeholder { + padding: 6px 12px; +} +.ka-topx--row.c4 { + grid-template-columns: min-content 9fr 1fr 1fr 1fr; +} +.ka-topx--head { + font-weight: bold; + font-size: 1.1em; + padding: 6px 12px; + border: 0 +} +.ka-topx--rank { + color: #757575; + font-size: .9em +} +.ka-topx--amount { + text-align: right +} +.ka-topx--col, +.ka-topx--url { + text-overflow: ellipsis; + overflow: hidden; + white-space: nowrap +} + +/* Pagination component */ +.ka-pagination { + color: #757575; + cursor: pointer; + font-weight: normal; + border-top: 1px dashed #eee; +} +.ka-pagination--prev, +.ka-pagination--next { + display: inline-block; + padding: 6px 12px; +} +.ka-pagination--next { + float: right; +} +.ka-pagination--prev:hover .dashicons, +.ka-pagination--prev:focus .dashicons, +.ka-pagination--next:hover .dashicons, +.ka-pagination--next:focus .dashicons { + transform: scale(1.4); + transition: transform .2s +} +.ka-pagination--prev.disabled, +.ka-pagination--next.disabled { + opacity: .4 +} +.ka-pagination--prev.disabled:hover, +.ka-pagination--prev.disabled:focus, +.ka-pagination--next.disabled:hover, +.ka-pagination--next.disabled:focus { + cursor: initial } +.ka-pagination--prev.disabled:hover .dashicons, +.ka-pagination--prev.disabled:focus .dashicons, +.ka-pagination--next.disabled:hover .dashicons, +.ka-pagination--next.disabled:focus .dashicons { + transform: none; +} + + +/** Totals Component */ +.ka-totals { + background: #2e363f; + color: white; + padding: 24px; + margin: 12px 0; + display: flex; + flex-flow: row wrap; + gap: 48px; + border-radius: 6px; + width: 100%; + box-sizing: border-box; +} +.ka-totals--label { + color: #EEE; + margin-bottom: 6px; + font-size: 14px; +} +.ka-totals--amount { + display: block; + line-height: 48px; + font-size: 48px; + font-weight: 500; + letter-spacing: -1px; + margin-bottom: 6px; +} +.ka-totals--change { + font-size: 16px; + margin-left: 6px; + font-weight: normal; + vertical-align: top; + letter-spacing: normal; + color: #aaa; +} +.ka-totals--change.up { + color: limegreen; +} +.ka-totals--change.down { + color: #fb7272; +} +.ka-totals--subtext { + color: #DDD; +} + +/** Datepicker component */ +.ka-datepicker--label { + cursor: pointer; + padding: 6px; + border: 1px solid #DDD; + border-radius: 6px; + display: inline-block; + background: white; + line-height: 20px; +} +.ka-datepicker--label .dashicons { + margin-right: 2px; +} +.ka-datepicker--dropdown { + background: white; + width: auto; + z-index: 20; + border-radius: 6px; + position: absolute; + margin-top: 6px; + box-shadow: 2px 2px 12px 0 rgba(0, 0, 0, 0.5); +} +.ka-datepicker--quicknav { + background: #2e363f; + border-top-left-radius: 6px; + border-top-right-radius: 6px; + color: white; + text-align: center; + padding: 12px; + font-weight: bold; + font-size: 1.1em; +} +.ka-datepicker--quicknav-prev, +.ka-datepicker--quicknav-next { + margin: 0 6px; + color: white; +} +.ka-datepicker--quicknav-prev:hover, +.ka-datepicker--quicknav-prev:focus, +.ka-datepicker--quicknav-next:hover, +.ka-datepicker--quicknav-next:focus { + cursor: pointer; + transform: scale(1.4); + transition: transform 0.2s; +} +.ka-datepicker--dropdown-content { + padding: 12px; +} +.ka-datepicker--dropdown-content label { + font-weight: bold; + font-size: 1em; + display: block; +} + + +/* General styles / Utility classes */ +#koko-analytics-dashboard-widget-mount { + text-align: center; +} + +.ka-box { + background: #fff; + border-radius: 6px; + border: 1px solid #ddd; +} + +.ka-fade { + animation: koko-fadein .4s +} + +@keyframes koko-fadein { + from { + opacity: 0 + } + to { + opacity: 1 + } +} + diff --git a/assets/src/css/chart.css b/assets/src/css/chart.css deleted file mode 100644 index 5068fc59..00000000 --- a/assets/src/css/chart.css +++ /dev/null @@ -1,52 +0,0 @@ -.ka-chart { - position: relative; - overflow: visible; -} -.ka-chart--tooltip { - position: absolute; - z-index: 9991; /* above wp admin menu */ -} -.ka-chart--tooltip-box { - background: rgba(46, 54, 63, 0.96); - box-shadow: 2px 2px 12px 0 rgba(0,0,0,0.5); - border-radius: 4px; - color: #EEE; -} -.ka-chart--tooltip-heading { - font-weight: 600; - padding: 12px; - line-height: 1; -} -.ka-chart--tooltip-content { - padding: 6px 12px; - width: 50%; - display: block; - flex: 1; -} -.ka-chart--tooltip-content.ka--pageviews, -.ka-chart--tooltip-content.ka--visitors { - border-top: 3px solid transparent; -} -.ka-chart--tooltip-amount { - color: #FFF; - font-weight: bold; -} -.ka-chart--tooltip-arrow { - width: 0; - height: 0; - margin-left: auto; - margin-right: auto; - /* css trick to create a downward pointing triangle */ - border-left: 6px solid transparent; - border-right: 6px solid transparent; - border-top: 6px solid rgba(46, 54, 63, 0.96); -} - -.ka--pageviews { - border-top-color: #e14d43 !important; - fill: #e14d43; -} -.ka--visitors { - border-top-color: #b43d35 !important; - fill: #b43d35; -} diff --git a/assets/src/css/dashboard.css b/assets/src/css/dashboard.css deleted file mode 100644 index fa300328..00000000 --- a/assets/src/css/dashboard.css +++ /dev/null @@ -1,215 +0,0 @@ -.dashboard_page_koko-analytics { - overflow-x: hidden -} -.ka-dashboard-components { - display: grid; - grid-gap: 12px; - grid-template-columns: repeat(6, 1fr); -} - -/** TopX components */ -.ka-topx { - grid-column: span 6; -} -@media (min-width: 840px) { - .ka-topx { - grid-column: span 3; - } -} -.ka-topx--row { - display: grid; - grid-gap: 12px; - grid-template-columns: min-content 8fr 2fr 2fr; - border-top: 1px dashed #eee; - padding: 6px 12px; - text-align: left -} -.ka-topx--placeholder { - padding: 6px 12px; -} -.ka-topx--row.c4 { - grid-template-columns: min-content 9fr 1fr 1fr 1fr; -} -.ka-topx--head { - font-weight: bold; - font-size: 1.1em; - padding: 6px 12px; - border: 0 -} -.ka-topx--rank { - color: #757575; - font-size: .9em -} -.ka-topx--amount { - text-align: right -} -.ka-topx--col, -.ka-topx--url { - text-overflow: ellipsis; - overflow: hidden; - white-space: nowrap -} - -/* Pagination component */ -.ka-pagination { - color: #757575; - cursor: pointer; - font-weight: normal; - border-top: 1px dashed #eee; -} -.ka-pagination--prev, -.ka-pagination--next { - display: inline-block; - padding: 6px 12px; -} -.ka-pagination--next { - float: right; -} -.ka-pagination--prev:hover .dashicons, -.ka-pagination--prev:focus .dashicons, -.ka-pagination--next:hover .dashicons, -.ka-pagination--next:focus .dashicons { - transform: scale(1.4); - transition: transform .2s -} -.ka-pagination--prev.disabled, -.ka-pagination--next.disabled { - opacity: .4 -} -.ka-pagination--prev.disabled:hover, -.ka-pagination--prev.disabled:focus, -.ka-pagination--next.disabled:hover, -.ka-pagination--next.disabled:focus { - cursor: initial -} -.ka-pagination--prev.disabled:hover .dashicons, -.ka-pagination--prev.disabled:focus .dashicons, -.ka-pagination--next.disabled:hover .dashicons, -.ka-pagination--next.disabled:focus .dashicons { - transform: none; -} - - -/** Totals Component */ -.ka-totals { - background: #2e363f; - color: white; - padding: 24px; - margin: 12px 0; - display: flex; - flex-flow: row wrap; - gap: 48px; - border-radius: 6px; - width: 100%; - box-sizing: border-box; -} -.ka-totals--label { - color: #EEE; - margin-bottom: 6px; - font-size: 14px; -} -.ka-totals--amount { - display: block; - line-height: 48px; - font-size: 48px; - font-weight: 500; - letter-spacing: -1px; - margin-bottom: 6px; -} -.ka-totals--change { - font-size: 16px; - margin-left: 6px; - font-weight: normal; - vertical-align: top; - letter-spacing: normal; - color: #aaa; -} -.ka-totals--change.up { - color: limegreen; -} -.ka-totals--change.down { - color: #fb7272; -} -.ka-totals--subtext { - color: #DDD; -} - -/** Datepicker component */ -.ka-datepicker--label { - cursor: pointer; - padding: 6px; - border: 1px solid #DDD; - border-radius: 6px; - display: inline-block; - background: white; - line-height: 20px; -} -.ka-datepicker--label .dashicons { - margin-right: 2px; -} -.ka-datepicker--dropdown { - background: white; - width: auto; - z-index: 20; - border-radius: 6px; - position: absolute; - margin-top: 6px; - box-shadow: 2px 2px 12px 0 rgba(0, 0, 0, 0.5); -} -.ka-datepicker--quicknav { - background: #2e363f; - border-top-left-radius: 6px; - border-top-right-radius: 6px; - color: white; - text-align: center; - padding: 12px; - font-weight: bold; - font-size: 1.1em; -} -.ka-datepicker--quicknav-prev, -.ka-datepicker--quicknav-next { - margin: 0 6px; - color: white; -} -.ka-datepicker--quicknav-prev:hover, -.ka-datepicker--quicknav-prev:focus, -.ka-datepicker--quicknav-next:hover, -.ka-datepicker--quicknav-next:focus { - cursor: pointer; - transform: scale(1.4); - transition: transform 0.2s; -} -.ka-datepicker--dropdown-content { - padding: 12px; -} -.ka-datepicker--dropdown-content label { - font-weight: bold; - font-size: 1em; - display: block; -} - - -/* General styles / Utility classes */ -#koko-analytics-dashboard-widget-mount { - text-align: center; -} - -.ka-box { - background: #fff; - border-radius: 6px; - border: 1px solid #ddd; -} - -.ka-fade { - animation: koko-fadein .4s -} - -@keyframes koko-fadein { - from { - opacity: 0 - } - to { - opacity: 1 - } -} - diff --git a/assets/src/js/admin.js b/assets/src/js/admin.js index b8d8bc5f..a54fca95 100644 --- a/assets/src/js/admin.js +++ b/assets/src/js/admin.js @@ -1,5 +1,4 @@ import './globals.js' -import "../css/dashboard.css" import Chart from './components/chart.js' import Datepicker from './components/datepicker.js' import Totals from './components/totals' diff --git a/assets/src/js/components/chart.js b/assets/src/js/components/chart.js index 100e5617..b5f996f0 100644 --- a/assets/src/js/components/chart.js +++ b/assets/src/js/components/chart.js @@ -2,7 +2,6 @@ import { request } from '../util/api.js' import { magnitude, formatLargeNumber } from '../util/numbers' import { isLastDayOfMonth, toISO8601, format } from '../util/dates.js' import { __ } from '@wordpress/i18n' -import "../../css/chart.css" import { classModule, eventListenersModule, attributesModule, init, h } from "snabbdom"; const patch = init([classModule, eventListenersModule, attributesModule]); diff --git a/src/class-admin.php b/src/class-admin.php index 4d4a3bfc..84dfd826 100644 --- a/src/class-admin.php +++ b/src/class-admin.php @@ -103,6 +103,8 @@ public function enqueue_scripts($page): void return; } + wp_register_style('koko-analytics-admin', plugins_url('assets/dist/css/admin.css', KOKO_ANALYTICS_PLUGIN_FILE)); + switch ($page) { case 'index.php': $script_data = array( @@ -110,14 +112,14 @@ public function enqueue_scripts($page): void 'nonce' => wp_create_nonce('wp_rest'), ); // load scripts for dashboard widget + wp_enqueue_style('koko-analytics-admin'); wp_enqueue_script('koko-analytics-dashboard-widget', plugins_url('/assets/dist/js/dashboard-widget.js', KOKO_ANALYTICS_PLUGIN_FILE), array( 'wp-i18n' ), KOKO_ANALYTICS_VERSION, true); wp_set_script_translations('koko-analytics-dashboard-widget', 'koko-analytics'); wp_add_inline_script('koko-analytics-dashboard-widget', 'var koko_analytics = ' . json_encode($script_data), 'before'); break; case 'dashboard_page_koko-analytics': - wp_enqueue_style('koko-analytics-admin', plugins_url('assets/dist/css/admin.css', KOKO_ANALYTICS_PLUGIN_FILE)); - + wp_enqueue_style('koko-analytics-admin'); if (!isset($_GET['tab'])) { $this->register_scripts(); wp_enqueue_script('koko-analytics-admin'); diff --git a/views/dashboard-page.php b/views/dashboard-page.php index 6430b993..046f9899 100644 --- a/views/dashboard-page.php +++ b/views/dashboard-page.php @@ -94,7 +94,7 @@ -
+
 
@@ -102,10 +102,10 @@
-
+
 
-
+
diff --git a/webpack.config.js b/webpack.config.js index 37743d41..a6b6955b 100644 --- a/webpack.config.js +++ b/webpack.config.js @@ -1,60 +1,43 @@ /* eslint-env node */ const path = require('path') -const CopyPlugin = require('copy-webpack-plugin') -const lightningcss = require('lightningcss') +const CopyPlugin = require("copy-webpack-plugin"); module.exports = { - entry: { - admin: './assets/src/js/admin.js', - 'dashboard-widget': './assets/src/js/dashboard-widget.js', - script: './assets/src/js/script.js', - 'koko-analytics-script-test': './assets/src/js/koko-analytics-script-test.js' - }, - output: { - filename: '[name].js', - path: path.resolve(__dirname, 'assets/dist/js') - }, - module: { - rules: [ - { - test: /\.js$/i, - exclude: [/\/node_modules\//], - use: { - loader: 'babel-loader', - options: { - presets: [ - '@babel/preset-env' - ] - } - } - }, - { - test: /\.css$/i, - use: [ - 'style-loader', - 'css-loader', - ] - } - ] - }, - externals: { - '@wordpress/i18n': 'wp.i18n', - }, + entry: { + admin: './assets/src/js/admin.js', + 'dashboard-widget': './assets/src/js/dashboard-widget.js', + script: './assets/src/js/script.js', + 'koko-analytics-script-test': './assets/src/js/koko-analytics-script-test.js' + }, + output: { + filename: '[name].js', + path: path.resolve(__dirname, 'assets/dist/js') + }, + module: { + rules: [ + { + test: /\.js$/i, + exclude: [/\/node_modules\//], + use: { + loader: 'babel-loader', + options: { + presets: [ + '@babel/preset-env' + ] + } + } + } + ] + }, + externals: { + '@wordpress/i18n': 'wp.i18n', + }, plugins: [ new CopyPlugin({ patterns: [ - { from: './assets/src/img', to: path.resolve(__dirname, './assets/dist/img') }, - { from: './assets/src/css', to: path.resolve(__dirname, './assets/dist/css'), transform: (content, path) => { - const { code } = lightningcss.transform({ - filename: path.split('/').pop(), - code: Buffer.from(content), - minify: true, - sourceMap: false - }) - return code - } } - ] - }) + { from: "./assets/src/img", to: "./assets/dist/img" }, + { from: "./assets/src/css", to: "./assets/dist/css" }, + ], + }), ], - }