From 4810d6b5ba9724c695295dbf1c9f9d2616cdb219 Mon Sep 17 00:00:00 2001
From: ansuz <ansuz@transitiontech.ca>
Date: Fri, 13 Aug 2021 12:20:26 +0530
Subject: [PATCH] use custom styles for the form timeline, move away from
 charts.css

---
 customize.dist/src/less2/include/charts.less | 54 ++++++++++++++++++++
 www/form/app-form.less                       | 11 ++--
 www/form/inner.js                            | 42 +++++++--------
 3 files changed, 84 insertions(+), 23 deletions(-)

diff --git a/customize.dist/src/less2/include/charts.less b/customize.dist/src/less2/include/charts.less
index 44c7dd3dd..022a327cf 100644
--- a/customize.dist/src/less2/include/charts.less
+++ b/customize.dist/src/less2/include/charts.less
@@ -1,4 +1,58 @@
 .charts_main() {
+
+    // basic functional things
+    table.cp-charts.column {
+        box-sizing: border-box;
+        display: flex;
+        height: 100%;
+        overflow-x: auto;
+        tbody {
+            height: 100%;
+            display: flex;
+            align-items: stretch;
+            min-width: 100%;
+
+            tr {
+                position: relative;
+                display: flex;
+                justify-content: flex-start;
+
+                flex-direction: row;
+                flex-shrink: 1;
+                flex-grow: 1;
+                justify-content: flex-start;
+
+                align-items: flex-end;
+
+                td {
+                    display: flex;
+                    height: calc(100% * var(--size));
+                    align-items: flex-start;
+                    flex-grow: 1;
+                }
+            }
+        }
+    }
+
+    // styles
+    table.cp-charts.column {
+        //border: 1px solid white;
+        tbody {
+            tr {
+                max-width: 30px;
+
+                td {
+                    min-width: 3px;
+                    border: 1px solid @cryptpad_color_brand;
+                    background: @cryptpad_color_brand;
+                    margin: 1px;
+                }
+            }
+        }
+    }
+
+
+
     &.bar {
         th {
             //width: 200px !important;
diff --git a/www/form/app-form.less b/www/form/app-form.less
index 8d1177509..a38867d34 100644
--- a/www/form/app-form.less
+++ b/www/form/app-form.less
@@ -69,6 +69,12 @@
         justify-content: center;
         min-width: 300px;
 
+        div.timeline-container {
+            width: 100%;
+            height: 200px;
+        }
+
+/*
         table.cp-chart-table {
 
             --color: @colortheme_apps[pad];
@@ -107,6 +113,7 @@
                 color: transparent;
             }
         }
+*/
 
         .cp-form-input-block {
             display: flex;
@@ -838,8 +845,6 @@
         }
     }
 
-    .charts-css {
-        .charts_main();
-    }
+    .charts_main();
 }
 
diff --git a/www/form/inner.js b/www/form/inner.js
index e138cc9e9..4cb0a8f88 100644
--- a/www/form/inner.js
+++ b/www/form/inner.js
@@ -38,7 +38,7 @@ define([
     'css!/bower_components/codemirror/addon/dialog/dialog.css',
     'css!/bower_components/codemirror/addon/fold/foldgutter.css',
     'css!/lib/datepicker/flatpickr.min.css',
-    'css!/lib/chart/charts.min.css',
+    //'css!/lib/chart/charts.min.css',
     'css!/bower_components/components-font-awesome/css/font-awesome.min.css',
     'less!/form/app-form.less',
 ], function (
@@ -1910,27 +1910,29 @@ define([
         var max_day = arrayMax(times);
         var days = getDayArray(new Date(min_day), new Date(max_day));
 
-        return Charts.table(h('tbody', days.map(function (time) {
-            var count = tally[time] || 0;
-            var percent = count / max_count;
-            var date = new Date(time).toLocaleDateString();
+        if (days.length < 2) { return; }
 
-            var bar = h('td.cp-bar', {
-                style: '--size: ' + Number(percent).toFixed(2),
-                "data-tippy-placement": "top",
-                title: Messages._getKey('form_timelineLabel', [date, count])
-            });
-            var dateEl = h('th', { scope: "row" }, date);
+        return h('div.timeline-container', {
+            //style: 'width: 100%; height: 200px;',
 
-            return h('tr', bar, dateEl );
-        })), [
-            "charts-css",
-            "cp-chart-table",
-            "column",
-            //"data-spacing-2",
-            //"show-labels",
-            //"labels-align-center"
-        ]);
+
+        }, h('table.cp-charts.column.cp-chart-timeline.cp-chart-table',
+                h('tbody', days.map(function (time) {
+                    var count = tally[time] || 0;
+                    var percent = count / max_count;
+                    var date = new Date(time).toLocaleDateString();
+
+                    var bar = h('td', {
+                        style: '--size: ' + Number(percent).toFixed(2),
+                        //"data-tippy-placement": "top",
+                        title: Messages._getKey('form_timelineLabel', [date, count])
+                    });
+                    //var dateEl = h('th', { scope: "row" }, date);
+
+                    return h('tr', bar/* dateEl*/ );
+                }))
+            )
+        );
     };
 
     var renderResults = APP.renderResults = function (content, answers, showUser) {