feat: Mobile friendly (#86)

* Add prereqs to build vue app, resolve npm audit

* Many changes to make this a responsive page

* Revert "Add prereqs to build vue app, resolve npm audit"

This reverts commit bdfbc86.

* Cleanup to closer-match original

* Many changes - now in line w/discussion on PR #86

Shrank container min-width to allow more flexibility with content shrinking.  Now set to 160px, but including padding the minimum page width before the browser just starts shrinking content is about 220px.

Allowed cards to grow to fit space, so now if one of the 4 little data points drops to the next line it'll show as centered and look nice.  Also increased card min width and matched units to the font unit - so, essentially, the data points can show up to 8 or 9 large characters across before content will overflow.

Imported the Menu icon from vue-material-design so it can be used for the page view/event selector.

Added names to page and event in the router so the names can be displayed.

Modified the demo banner to work better at small screen widths.  Components will not encroach on the close button.  The close button and right side of the box are scooted away from the right wall a little.  The github links can now flex to a top line and push the text down below when there's not enough room for both of them on one line.

The bar charts in view and events have overflow and width set on them as constraints.  I'm honestly not sure why that makes them perform more consistently at smaller sizes in Firefox.  The 300 px width is not a magic number - the important part is that it's smaller than expected chart width at screen widths larger than 700 px.  This random fix only makes a difference at screen widths larger than 700 px...  Tested in Firefox and Chromium.

Site selector and date selector are now in a flexbox just by themselves, so when the screen gets too small for both then they can split across two lines and take up the full line.  Looks nice I think.

There's a new flexbox for the settings buttons and refresh button.  Views/Event content setting is in there (when visible), refresh button, and theme settings (cog) button is in there.  It's separate from the site/date selector so the site/date selectors flow nicer, and to allow this one to flow up in narrow mode.

700 pixels wide is the point at which the display switches mode.

The normal left side views/events bar becomes invisible when the screen is narrower than 700 px now.

The views/event "Content" selector hamburger button becomes visible when the screen is narrower than 700 px.  This has an el-drawer implementing the popout window.  The worst part about this is that this code is similar across two files now, instead of just being implemented in one place: views/stats/index.vue and vies/app.vue

The settings button flexbox (content, refresh, cog button) moves up a line, above the site/date selector, and takes up the whole width, when screen is narrower than 700px.

The map now pushes down below the location stats listing so they can both take the full width.  I think the map is a really cool feature, and easy enough to scroll past if you don't want to see it.

* Fix prettier output

* Improve vis of page views chart at smaller size

* Revert scroll overflow to hidden.

* Change top/bottom/side padding back to 15px

I rejiggered how this padding layout worked...  I believe the goal with the original large screen layout was to have 15px on top, bottom, and sides, and good space between elements sideways.  With the flexbox layout, and the possibility of multiple rows of stats, just putting 15px on the cards makes 30px between cards vertically.  I think that looks slightly less balanced than intended.  So - now the gap (flexbox thing) manages space between elements at only 15px, and the padding is applied to the outer element (totals) to handle the top/bottom/sides padding.

* Put gap between settings rows at any screen size

* Alignment fixes on settings bar - also moves gear

Vertically centers the page/event button, refresh, and gear buttons, and slightly changes how separator is calculated to reflect local size instead of root (rem to em) so it'll hopefully stay centered better in future changes.

Also moves the gear right to the edge...  Not sure if you'll like this @rehanvdm, when I was aligning the hamburger button I realized there's no reason it shouldn't go all the way left to the edge, there's padding to keep it away from the screen edge...  Then I realized the gear should work the same on the other side.

* Time on page column slightly wider

* Shift to element plus hiding/page break scheme

Also - make the page break on the map simpler by just changing to one flex column, instead of switching layout mode to flex.

* Fix text vert align in Firefox

* Fix JS error about num/vs/string & fix 'else' typo

* Site/date sel back to orig sizes when widescreen

To do this without negatively affecting responsiveness, I added an additional media break at 900px.  When the screen is less wide than 900px (max-width 899px) then the site and date selector are allowed to take up the full width and flex their sizes more, so they can take a good view size regardless of width.

* Fix backlight on gear & page/event setting buttons

Author: kc0bfv

application/src/frontend/src/assets/main.css

@@ -79,6 +79,16 @@ p {
   width: 100%;
   padding: 0 15px;
   min-height: 470px;
+  min-width: 200px;
+  flex: 1 1;
+}
+
+.main-row {
+  display: flex; width: 100%; margin-top: 10px; column-gap: 10px; flex-flow: row wrap;
+}
+
+.filter-tag {
+  margin: 5px 5px 0 0;
 }
 
 .demo > .el-alert__content > .el-alert__description {

application/src/frontend/src/components/ChartLocation.vue

@@ -87,11 +87,11 @@ onMounted(() => {
 
 <template>
   <div style="height: 470px;">
-      <div v-show="!loading" class="chart" ref="chartRef" style="height: 100%; width: 870px;"></div>
+      <div v-show="!loading" class="chart" ref="chartRef" style="height: 100%; width: 100%;"></div>
       <el-skeleton v-show="loading" :loading="true" animated style="height: 100%">
         <template #template>
           <div style="display: flex; height: 100%; width: 100%; margin-top: 10px; column-gap: 10px;">
-            <div class="chart" style="height: 100%; width: 900px; ">
+            <div class="chart" style="height: 100%; width: 100%; ">
               <el-skeleton-item variant="image" style="height: 85%; margin: 20px;" />
             </div>
           </div>

application/src/frontend/src/components/TableData.vue

@@ -105,7 +105,7 @@ const hover = reactive<Record<any, boolean>>({});
         <div class="row" :style="rowGridColumnCss" v-for="(row, rowIndex) in pageData">
           <template v-for="col of columns">
             <template v-if="col.type === 'string'">
-              <el-tooltip :show-after="1000" :content="row[col.index] != undefined ? row[col.index] : '-'">
+              <el-tooltip :show-after="1000" :content="row[col.index] != undefined ? String(row[col.index]) : '-'">
                 <div v-if="col.canFilter" class="column column--overflow">
 
                   <div style="display: flex;"
@@ -123,13 +123,13 @@ const hover = reactive<Record<any, boolean>>({});
                   </div>
 
                 </div>
-                <div v-lese class="column column--overflow">
+                <div v-else class="column column--overflow">
                   {{ row[col.index] != undefined ? row[col.index] : "-"  }}
                 </div>
               </el-tooltip>
             </template>
             <template v-if="col.type === 'number'">
-              <el-tooltip :show-after="1000" :content="row[col.index] != undefined ? row[col.index] : '-'">
+              <el-tooltip :show-after="1000" :content="row[col.index] != undefined ? String(row[col.index]) : '-'">
                 <div class="column">{{ humanizeNumber(row[col.index]) }}</div>
               </el-tooltip>
             </template>

application/src/frontend/src/components/TotalsData.vue

@@ -79,20 +79,22 @@ function tooltipContent(value: number, from: string, to: string, prevValue: numb
 
 .totals {
   display: flex;
+  flex-flow: row wrap;
   justify-content: space-between;
   box-shadow: var(--el-box-shadow-lighter);
   border-radius: 10px;
   min-height: inherit;
+  padding: 15px;
+  gap: 15px;
 }
 
 .card {
+  flex: 1 1;
   display: flex;
   flex-direction: column;
   justify-content: center;
   align-items: center;
-  padding: 15px;
-  width: 25%;
-  min-width: 100px;
+  min-width: 9rem;
 }
 .card__skeleton {
   margin-top: 5px;

application/src/frontend/src/components/vue-material-design-icons.ts

@@ -1,13 +1,15 @@
 import { App } from 'vue';
 import 'vue-material-design-icons/styles.css';
 import Cog from 'vue-material-design-icons/Cog.vue';
+import Menu from 'vue-material-design-icons/Menu.vue';
 import InboxMultiple from 'vue-material-design-icons/InboxMultiple.vue';
 import ChevronDown from 'vue-material-design-icons/ChevronDown.vue';
 import Refresh from 'vue-material-design-icons/Refresh.vue';
 import OpenInNew from 'vue-material-design-icons/OpenInNew.vue';
 
 export function registerIconComponents(app: App<Element>) {
   app.component('mdi-cog', Cog);
+  app.component('mdi-menu', Menu);
   app.component('mdi-inbox-multiple', InboxMultiple);
   app.component('mdi-chevron-down', ChevronDown);
   app.component('mdi-refresh', Refresh);

application/src/frontend/src/main.ts

@@ -1,6 +1,7 @@
 import ElementPlus from 'element-plus';
 import 'element-plus/dist/index.css';
 import 'element-plus/theme-chalk/dark/css-vars.css';
+import 'element-plus/theme-chalk/display.css';
 import '@fontsource/nunito/latin.css';
 
 import { createApp, ref, watch } from 'vue';

application/src/frontend/src/router/index.ts

@@ -13,10 +13,12 @@ const router = createRouter({
     {
       path: '/stats/page',
       component: stats,
+      name: 'Page Views',
     },
     {
       path: '/stats/event',
       component: stats,
+      name: 'Events',
     },
     // {
     //   path: '/',

application/src/frontend/src/views/app.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
 
-import {computed} from "vue";
+import {computed, ref} from "vue";
 import {getSystemStore} from "@frontend/src/stores/system";
 import {trackLinkClick, trackRouterClick} from "@frontend/src/lib/track";
 
@@ -13,10 +13,10 @@ const showDemoBanner = computed(() => {
 
 <template>
 
-  <el-container class="h100" style="display: flex; justify-content: center">
-    <div style="width: 1280px;">
-      <div style="display: flex;">
-        <div style="width: 140px">
+  <el-container class="h100" style="">
+    <div style="max-width: 1280px; width: 100%; margin: auto;">
+      <div style="display: flex; flex-flow: row nowrap;">
+        <div class="hidden-xs-only" style="width: 140px; flex: 0 0;">
           <el-menu :default-active="$route.path" style="margin-top: 10px; border-right: none;">
             <el-menu-item index="/stats/page" @click="trackRouterClick('menu_page', '/stats/page')">
               <template #title>Page Views</template>
@@ -27,14 +27,14 @@ const showDemoBanner = computed(() => {
           </el-menu>
         </div>
 
-        <div style="width: 100%">
-          <el-alert v-if="showDemoBanner" class="demo" type="warning" style="margin-top: 10px; margin-left: 10px; width: 100%" >
-            <div style="display: flex; justify-content: space-between; width: 100%">
-              <div>
+        <div style="width: 100%; flex: 1 1;">
+          <el-alert v-if="showDemoBanner" class="demo" type="warning" style="margin-top: 10px; margin-left: 10px; width: 97%;" >
+            <div style="display: flex; flex-flow: row wrap-reverse; justify-content: space-between; width: 100%;">
+              <div style="flex: 1 1; min-width: 200px;">
                 This is the open source CDK <a style="font-weight: bold; color: inherit" href="https://github.com/rehanvdm/serverless-website-analytics" target="_blank">serverless-website-analytics</a>
                 demo page, it tracks this page and some <a style="font-weight: bold; color: inherit" href="https://github.com/rehanvdm/serverless-website-analytics/blob/main/docs/DEMO-TRAFFIC.md" target="_blank">simulated traffic.</a>.
               </div>
-              <div>
+              <div style="flex: 0 1; padding-right: 25px; margin-left: auto;">
                 <a style="margin-left: 20px" class="link-explicit"
                    @click="trackLinkClick('github', 'https://github.com/rehanvdm/serverless-website-analytics')">
                   <img alt="GitHub Repo stars" src="https://img.shields.io/github/stars/rehanvdm/serverless-website-analytics?label=Github&style=social">
@@ -57,9 +57,6 @@ const showDemoBanner = computed(() => {
 </template>
 
 <style scoped>
-.el-menu {
-  height: 50px;
-}
 .el-menu-item {
   border-radius: 5px;
   font-size: large;

application/src/frontend/src/views/stats/event/components/chart_locations.vue

@@ -136,16 +136,39 @@ function rowClick(cell: Record<string, any>) {
 </script>
 
 <template>
-  <div class="container" style="height: 470px;">
-
-    <div style="display: grid; grid-template-columns: 6fr 2fr; height: 100%;">
-      <ChartLocation v-bind:graphs="chartProps.graphs!" v-bind:loading="loading"></ChartLocation>
-      <TableData :columns="columns" :rows="chartLocations || []" :loading="loading" :page-size="16"
+  <div class="container chart-data-outer">
+    <div class="chart-data" style="height: 100%;">
+      <ChartLocation v-bind:graphs="chartProps.graphs!" v-bind:loading="loading" style="overflow: hidden; width: 100%;"></ChartLocation>
+      <TableData class="table-data" :columns="columns" :rows="chartLocations || []" :loading="loading" :page-size="16"
                  @click="rowClick"></TableData>
     </div>
-
   </div>
 </template>
 
 <style scoped>
+.chart-data {
+  display: grid;
+  grid-template-columns: 6fr 2fr;
+  padding: 10px;
+}
+.table-data {
+  min-width: 140px;
+  margin-left: 10px;
+}
+.chart-data-outer {
+  min-height: 490px;
+}
+@media all and (max-width: 767px) {
+  .chart-data {
+    grid-template-columns: 1fr;
+  }
+  .table-data {
+    order: -1;
+    width: 100%;
+    margin-bottom: 10px;
+  }
+  .chart-data-outer {
+    height: fit-content;
+  }
+}
 </style>

application/src/frontend/src/views/stats/event/index.vue

@@ -204,6 +204,7 @@ watch([filter], () => {
           <ChartEvents ref="componentChartEvents" :sites="sites" :from-date="fromDate" :to-date="toDate"
                       @loading="(val) => loadingChartEvents = val"
                       :filter="filter"
+                      style="overflow: hidden; width: 300px;"
           ></ChartEvents>
         </div>
 
@@ -242,12 +243,5 @@ watch([filter], () => {
 
 <style scoped>
 
-.main-row {
-  display: flex; width: 100%; margin-top: 10px; column-gap: 10px;
-}
-.filter-tag {
-  margin: 5px 5px 0 0;
-}
-
 </style>