From: Michael Tremer <michael.tremer@ipfire.org>
Date: Wed, 1 Dec 2021 22:24:33 +0000 (+0000)
Subject: Refactor graphs UI modules
X-Git-Url: http://git.ipfire.org/?a=commitdiff_plain;h=06986af134b15327bb074673bff30bd2414b9406;p=people%2Fms%2Fwestferry.git

Refactor graphs UI modules

Signed-off-by: Michael Tremer <michael.tremer@ipfire.org>
---

diff --git a/Makefile.am b/Makefile.am
index d2a522f..0ddef80 100644
--- a/Makefile.am
+++ b/Makefile.am
@@ -173,10 +173,7 @@ dist_templates_modules_forms_inputs_DATA = \
 templates_modules_graphsdir = $(templates_modulesdir)/graphs
 
 dist_templates_modules_graphs_DATA = \
-	src/templates/modules/graphs/box.html \
-	src/templates/modules/graphs/preview.html \
-	src/templates/modules/graphs/thumbnail.html \
-	src/templates/modules/graphs/thumbnail-bar.html
+	src/templates/modules/graphs/box.html
 
 templates_modules_menudir = $(templates_modulesdir)/menu
 
diff --git a/src/styles/westferry.scss b/src/styles/westferry.scss
index 5efbd3a..46d4976 100644
--- a/src/styles/westferry.scss
+++ b/src/styles/westferry.scss
@@ -82,3 +82,7 @@ $foundation-palette: (
 .top-bar {
 	margin-bottom: 1rem;
 }
+
+img.graph {
+	margin-bottom: 1rem;
+}
diff --git a/src/templates/graph.html b/src/templates/graph.html
deleted file mode 100644
index 36ed148..0000000
--- a/src/templates/graph.html
+++ /dev/null
@@ -1,5 +0,0 @@
-{% extends "base.html" %}
-
-{% block main %}
-	{% module GraphBox(graph) %}
-{% end block %}
diff --git a/src/templates/graphs.html b/src/templates/graphs.html
index 6c7fe15..fe2a336 100644
--- a/src/templates/graphs.html
+++ b/src/templates/graphs.html
@@ -2,6 +2,6 @@
 
 {% block main %}
 	{% for g in graphs %}
-		{% module GraphBoxPreview(g) %}
+		{% module GraphBox(g) %}
 	{% end %}
 {% end block %}
diff --git a/src/templates/modules/graphs/box.html b/src/templates/modules/graphs/box.html
index 9f9b974..f5a8228 100644
--- a/src/templates/modules/graphs/box.html
+++ b/src/templates/modules/graphs/box.html
@@ -1,32 +1,30 @@
-<div class="page-header">
-	<h3>{{ graph.title }}</h3>
-</div>
+{% set intervals = {
+	"hour"  : _("Hour"),
+	"day"   : _("Day"),
+	"week"  : _("Week"),
+	"month" : _("Month"),
+	"year"  : _("Year")
+} %}
 
-<img class="img-responsive img-thumbnail" src="{{ graph.make_image_url(width="1130") }}"
-	alt="{{ graph.title }}">
+<h3>{{ graph.title }}</h3>
 
-<ul class="nav nav-pills">
-	{% for interval in ("hour", "day", "week", "month", "year") %}
-		<li {% if graph.interval == interval %}class="active"{% end %}>
-			<a href="{{ graph.make_url(interval=interval) }}">
-				{% if interval == "hour" %}
-					{{ _("Hour") }}
-				{% elif interval == "day" %}
-					{{ _("Day") }}
-				{% elif interval == "week" %}
-					{{ _("Week") }}
-				{% elif interval == "month" %}
-					{{ _("Month") }}
-				{% elif interval == "year" %}
-					{{ _("Year") }}
-				{% else %}
-					{{ interval }}
-				{% end %}
-			</a>
+<ul class="tabs" data-tabs id="graph-tabs">
+	{% for i, interval in enumerate(intervals) %}
+		<li class="tabs-title {% if i == 0 %}is-active{% end %}">
+			<a href="#{{ interval }}" aria-selected="true">{{ intervals[interval] }}</a>
 		</li>
 	{% end %}
 </ul>
 
-<a class="btn btn-default btn-sm" href="{{ graph.make_image_url(format="pdf") }}">
-	{{ _("Download") }}
-</a>
+<div class="tabs-content" data-tabs-content="graph-tabs">
+	{% for i, interval in enumerate(intervals) %}
+		<div class="tabs-panel {% if i == 0 %}is-active{% end %}" id="{{ interval }}">
+			<img class="graph" src="{{ graph.make_image_url(interval=interval) }}"
+				alt="{{ graph.title }}">
+
+			<a class="button small expanded" href="{{ graph.make_image_url(interval=interval, format="pdf") }}">
+				{{ _("Download") }}
+			</a>
+		</div>
+	{% end %}
+</div>
diff --git a/src/templates/modules/graphs/preview.html b/src/templates/modules/graphs/preview.html
deleted file mode 100644
index 8706901..0000000
--- a/src/templates/modules/graphs/preview.html
+++ /dev/null
@@ -1,12 +0,0 @@
-<div class="page-header">
-	<h3>
-		<a href="{{ graph.make_url() }}">{{ graph.title }}</a>
-	</h3>
-</div>
-
-{% module GraphThumbnailBar(graph) %}
-
-<a href="{{ graph.make_url(interval="week") }}">
-	<img class="img-responsive img-thumbnail" src="{{ graph.make_image_url() }}"
-		alt="{{ graph.title }}">
-</a>
diff --git a/src/templates/modules/graphs/thumbnail-bar.html b/src/templates/modules/graphs/thumbnail-bar.html
deleted file mode 100644
index 02eccd2..0000000
--- a/src/templates/modules/graphs/thumbnail-bar.html
+++ /dev/null
@@ -1,7 +0,0 @@
-<div class="row">
-	{% for interval in ("1h", "12h", "1d", "week", "month", "year") %}
-		<div class="col-md-2">
-			{% module GraphThumbnail(graph, interval=interval) %}
-		</div>
-	{% end %}
-</div>
diff --git a/src/templates/modules/graphs/thumbnail.html b/src/templates/modules/graphs/thumbnail.html
deleted file mode 100644
index e84b861..0000000
--- a/src/templates/modules/graphs/thumbnail.html
+++ /dev/null
@@ -1,2 +0,0 @@
-<img class="img-responsive img-thumbnail"
-	src="{{ graph.make_thumbnail_url(**args) }}" alt="{{ graph.title }}">
diff --git a/src/westferry/ui/graphs.py b/src/westferry/ui/graphs.py
index ab9b09e..acc2a16 100644
--- a/src/westferry/ui/graphs.py
+++ b/src/westferry/ui/graphs.py
@@ -142,18 +142,3 @@ class Graph(object):
 class GraphBoxModule(base.BaseUIModule):
 	def render(self, graph):
 		return self.render_string("modules/graphs/box.html", graph=graph)
-
-
-class GraphBoxPreviewModule(base.BaseUIModule):
-	def render(self, graph):
-		return self.render_string("modules/graphs/preview.html", graph=graph)
-
-
-class GraphThumbnailModule(base.BaseUIModule):
-	def render(self, graph, **kwargs):
-		return self.render_string("modules/graphs/thumbnail.html", graph=graph, args=kwargs)
-
-
-class GraphThumbnailBarModule(base.BaseUIModule):
-	def render(self, graph):
-		return self.render_string("modules/graphs/thumbnail-bar.html", graph=graph)