From 1e67bf5989023f377d5e0cf3f22a569850f731a6 Mon Sep 17 00:00:00 2001 From: Andrew Smith Date: Sun, 21 Jan 2024 20:18:28 +1100 Subject: [PATCH] Show file details in a popup for small screen users Signed-off-by: Andrew Smith --- changelog.md | 3 ++ info.json | 4 +-- static/css/style.css | 39 ++++++++++++++++++-- static/index.html | 45 +++++++++++++++-------- static/js/filesizechart.js | 73 ++++++++++++++------------------------ static/js/table.js | 6 ++++ 6 files changed, 105 insertions(+), 65 deletions(-) diff --git a/changelog.md b/changelog.md index 0db16e6..7775d4a 100644 --- a/changelog.md +++ b/changelog.md @@ -1,3 +1,6 @@ +**0.1.1** +- When viewing on mobile, show individual file metrics in a dialog popup + **0.1.0** - New layout to try and make better use of space diff --git a/info.json b/info.json index 7a055d7..3b1a957 100644 --- a/info.json +++ b/info.json @@ -11,5 +11,5 @@ "on_postprocessor_task_results": 0 }, "tags": "data panel", - "version": "0.1.0" -} \ No newline at end of file + "version": "0.1.1" +} diff --git a/static/css/style.css b/static/css/style.css index d7904f6..dddcf0b 100644 --- a/static/css/style.css +++ b/static/css/style.css @@ -85,9 +85,8 @@ html { background-color: var(--q-card-head-hover); } -.content { +.card-content { background-color: var(--q-card); - display: none; overflow: hidden; padding: 0 18px; } @@ -126,7 +125,10 @@ html { } #individual_file_size_chart { + display: block; order: 2; + overflow: hidden; + padding: 0 3px; } #individual_file_size_chart .card { @@ -195,6 +197,7 @@ html { #individual_file_size_chart { order: 1; + display: none; } #individual_file_size_chart .card { @@ -210,3 +213,35 @@ html { padding-top: 20px; } } + +dialog { + color: var(--q-text); + border: none; + background-color: var(--q-card); + width: 100%; + padding: 0; +} + +dialog::backdrop { + background-color: var(--q-card-head); + opacity: 0.85; +} + +dialog .card-content { + padding: 0 10px; +} + +dialog .card-footer { + padding: 0 0 10px 0; +} + +dialog .q-btn { + background: var(--q-primary); + border: 0; + color: #fff; + font-size: 14px; + font-weight: 500; + outline: 0; + padding: 8px 20px; + text-transform: uppercase; +} diff --git a/static/index.html b/static/index.html index 4ad8736..7347036 100644 --- a/static/index.html +++ b/static/index.html @@ -51,6 +51,12 @@ +
@@ -91,27 +97,36 @@
Individual File Size Change
-
- - -
-
- There was an issue showing this chart -
+
+
+ There was an issue showing this chart
+
+ +
+
+
+
-
- (Select a task from the table) + +
+
Individual File Size Change
+
+
+
+ There was an issue showing this chart
+ +
+
+
+
+ +
-
+
diff --git a/static/js/filesizechart.js b/static/js/filesizechart.js index 00188c9..4a7acc0 100644 --- a/static/js/filesizechart.js +++ b/static/js/filesizechart.js @@ -40,7 +40,7 @@ const CompletedTasksFileSizeDiffChart = (function () { let source_total_size = 0; let destination_total_size = 0; - const individualChart = Highcharts.chart("file_size_chart", { + Highcharts.setOptions({ chart: { backgroundColor: chart_background, height: chartHeight, @@ -58,6 +58,9 @@ const CompletedTasksFileSizeDiffChart = (function () { }, }, colors: [default_bar_colour, positive_bar_colour], + legend: { + enabled: false, + }, xAxis: { type: "category", labels: { @@ -74,62 +77,33 @@ const CompletedTasksFileSizeDiffChart = (function () { }, }, title: { - text: "Sizes", + text: "Size", style: { color: subtext_colour, }, }, }, - legend: { - enabled: false, - }, series: [], }); - const totalChart = Highcharts.chart("total_size_chart", { + const individualChart = new Highcharts.Chart({ chart: { - backgroundColor: chart_background, - height: chartHeight, + renderTo: "file_size_chart", }, - title: { - text: "", - style: { - color: text_colour, - }, + }); + const individualChart2 = new Highcharts.Chart({ + chart: { + renderTo: "file_size_chart_dialog", + }, + }); + + const totalChart = new Highcharts.Chart({ + chart: { + renderTo: "total_size_chart", }, subtitle: { text: "Displaying the total file size changed on disk by Unmanic processing files", - style: { - color: subtext_colour, - }, - }, - colors: [default_bar_colour, positive_bar_colour], - xAxis: { - type: "category", - labels: { - style: { - color: text_colour, - }, - }, - lineColor: text_colour, - }, - yAxis: { - labels: { - style: { - color: text_colour, - }, - }, - title: { - text: "Sizes", - style: { - color: subtext_colour, - }, - }, }, - legend: { - enabled: false, - }, - series: [], }); const updateIndividualChart = function () { @@ -149,7 +123,7 @@ const CompletedTasksFileSizeDiffChart = (function () { source_file_size = Number(source_file_size); destination_file_size = Number(destination_file_size); - individualChart.update({ + const options = { chart: { backgroundColor: chart_background, type: "bar", @@ -173,7 +147,10 @@ const CompletedTasksFileSizeDiffChart = (function () { File Size: ${formatBytes(Math.abs(this.point.y))}`; }, }, - }); + }; + + individualChart.update(options); + individualChart2.update(options); const newSeriesData = { borderWidth: 0, @@ -193,10 +170,14 @@ const CompletedTasksFileSizeDiffChart = (function () { for (let i = individualChart.series.length - 1; i >= 0; i--) { individualChart.series[i].remove(false); + individualChart2.series[i].remove(false); } individualChart.addSeries(newSeriesData, false); + individualChart2.addSeries(newSeriesData, false); + individualChart.redraw(); + individualChart2.redraw(); }; const updateTotalChart = function () { @@ -303,7 +284,7 @@ const CompletedTasksFileSizeDiffChart = (function () {

`; } - $("#selected_task_name").html(html); + $(".selected_task_name").html(html); }); }; diff --git a/static/js/table.js b/static/js/table.js index ead7356..baf5d51 100644 --- a/static/js/table.js +++ b/static/js/table.js @@ -3,6 +3,8 @@ const viewConversionDetails = (jobId) => { }; const CompletedTasksDatatable = (function () { + const modal = document.querySelector("[data-modal]"); + const recordName = (basename, type, { task_success } = row) => { if (task_success) { return ` ${basename}`; @@ -69,6 +71,10 @@ const CompletedTasksDatatable = (function () { viewConversionDetails(data.id); } + + if ($("#individual_file_size_chart").is(":visible") === false) { + modal.showModal(); + } }); };