From 3697181e552358261c3df1f2ba67cb0a34ac8514 Mon Sep 17 00:00:00 2001
From: Michael Tremer <michael.tremer@ipfire.org>
Date: Tue, 30 Oct 2018 11:32:55 +0000
Subject: [PATCH] fireinfo: Update design of vendor pages

Signed-off-by: Michael Tremer <michael.tremer@ipfire.org>
---
 src/backend/fireinfo.py                       |  8 +--
 src/templates/fireinfo/driver.html            | 28 ++++++++---
 .../modules/table-devices-and-groups.html     |  6 ++-
 .../fireinfo/modules/table-devices.html       |  4 +-
 src/templates/fireinfo/profile.html           |  2 +-
 src/templates/fireinfo/vendor-detail.html     | 19 ++++---
 src/templates/fireinfo/vendors.html           | 50 +++++++++++--------
 src/web/fireinfo.py                           |  4 +-
 8 files changed, 76 insertions(+), 45 deletions(-)

diff --git a/src/backend/fireinfo.py b/src/backend/fireinfo.py
index f5c1ad57..194155e0 100644
--- a/src/backend/fireinfo.py
+++ b/src/backend/fireinfo.py
@@ -2007,17 +2007,17 @@ class Fireinfo(Object):
 		try:
 			cls = self.subsystem2class[subsystem]
 		except KeyError:
-			return
+			return ""
 
-		return cls.get_vendor(vendor_id)
+		return cls.get_vendor(vendor_id) or ""
 
 	def get_model_string(self, subsystem, vendor_id, model_id):
 		try:
 			cls = self.subsystem2class[subsystem]
 		except KeyError:
-			return
+			return ""
 
-		return cls.get_device(vendor_id, model_id)
+		return cls.get_device(vendor_id, model_id) or ""
 
 	def get_vendor_list(self, when=None):
 		res = self.db.query("WITH profiles AS (SELECT fireinfo_profiles_with_data_at(%s) AS id) \
diff --git a/src/templates/fireinfo/driver.html b/src/templates/fireinfo/driver.html
index 05511fcc..5e067d9b 100644
--- a/src/templates/fireinfo/driver.html
+++ b/src/templates/fireinfo/driver.html
@@ -1,11 +1,27 @@
 {% extends "../base.html" %}
 
-{% block title %}{{ _("Driver: %s") % driver }}{% end block %}
+{% block title %}{{ driver }}{% end block %}
 
-{% block body %}
-	<div class="page-header">
-		<h2>{{ _("Driver: %s") % driver }}</h2>
-	</div>
+{% block container %}
+	<section>
+		<div class="container">
+			<div class="row">
+				<div class="col-12">
+					<h1>{{ driver }}</h1>
+
+					<p>
+						{{ _("All known devices run by %s") % driver }}
+					</p>
+				</div>
+			</div>
+		</div>
+	</section>
 
-	{% module FireinfoDeviceTable(driver_map) %}
+	<div class="container">
+		<div class="row">
+			<div class="col-12">
+				{% module FireinfoDeviceTable(driver_map) %}
+			</div>
+		</div>
+	</div>
 {% end block %}
diff --git a/src/templates/fireinfo/modules/table-devices-and-groups.html b/src/templates/fireinfo/modules/table-devices-and-groups.html
index 0ff023c5..d5b2b755 100644
--- a/src/templates/fireinfo/modules/table-devices-and-groups.html
+++ b/src/templates/fireinfo/modules/table-devices-and-groups.html
@@ -1,5 +1,7 @@
 {% for group, devices in groups %}
-	<h4>{{ group }}</h4>
+	<div class="mb-5">
+		<h4>{{ group }}</h4>
 
-	{% module FireinfoDeviceTable(devices) %}
+		{% module FireinfoDeviceTable(devices, show_group=False) %}
+	</div>
 {% end %}
diff --git a/src/templates/fireinfo/modules/table-devices.html b/src/templates/fireinfo/modules/table-devices.html
index 34ec8112..9d514e9a 100644
--- a/src/templates/fireinfo/modules/table-devices.html
+++ b/src/templates/fireinfo/modules/table-devices.html
@@ -1,8 +1,8 @@
-<ul class="list-group list-group-flush">
+<ul class="list-group {% if embedded %}list-group-flush{% end %}">
 	{% for d in sorted(devices) %}
 		<div class="list-group-item flex-column align-items-start">
 			<p class="small text-muted mb-0">
-				{{ d.cls }}
+				{% if show_group %}{{ d.cls }}{% end %}
 
 				{% if d.subsystem == "usb" %}
 					<span class="fab fa-usb"></span>
diff --git a/src/templates/fireinfo/profile.html b/src/templates/fireinfo/profile.html
index cb86c987..498622c8 100644
--- a/src/templates/fireinfo/profile.html
+++ b/src/templates/fireinfo/profile.html
@@ -153,7 +153,7 @@
 					</div>
 
 					{% if profile.devices %}
-						{% module FireinfoDeviceTable([d for d in profile.devices if d.is_showable()]) %}
+						{% module FireinfoDeviceTable([d for d in profile.devices if d.is_showable()], embedded=True) %}
 					{% end %}
 				</div>
 
diff --git a/src/templates/fireinfo/vendor-detail.html b/src/templates/fireinfo/vendor-detail.html
index 8e3dc644..f8014c0a 100644
--- a/src/templates/fireinfo/vendor-detail.html
+++ b/src/templates/fireinfo/vendor-detail.html
@@ -3,14 +3,19 @@
 {% block title %}{{ vendor_name }}{% end block %}
 
 {% block body %}
-	<div class="page-header">
-		<h2>{{ vendor_name }}</h2>
-	</div>
+	<section>
+		<div class="container">
+			<div class="row">
+				<div class="col-12">
+					<h1>{{ vendor_name }}</h1>
 
-	<p>
-		This is a list of all devices this database knows about from
-		<strong>{{ vendor_name }}</strong>.
-	</p>
+					<p>
+						{{ _("All known devices by %s") % vendor_name }}
+					</p>
+				</div>
+			</div>
+		</div>
+	</section>
 
 	{% module FireinfoDeviceAndGroupsTable(devices) %}
 {% end block %}
diff --git a/src/templates/fireinfo/vendors.html b/src/templates/fireinfo/vendors.html
index c618caa4..117d7a62 100644
--- a/src/templates/fireinfo/vendors.html
+++ b/src/templates/fireinfo/vendors.html
@@ -2,27 +2,35 @@
 
 {% block title %}{{ _("Vendors") }}{% end block %}
 
-{% block body %}
-	<div class="page-header">
-		<h3>{{ _("Vendors") }}</h3>
-	</div>
+{% block container %}
+	<section>
+		<div class="container">
+			<div class="row">
+				<div class="col-12">
+					<h1>{{ _("Vendors") }}</h1>
+				</div>
+			</div>
+		</div>
+	</section>
 
-	<dl>
-		{% for vendor, subsystems in vendors %}
-			<dt>{{ vendor }}</dt>
-			<dd>
-				<ul class="list-inline">
-					{% for subsystem, vendor_id in sorted(subsystems) %}
-						<li>
-							<img src="{{ static_url("images/icons/bus-%s.png" % subsystem) }}"
-								alt="{{ subsystem.upper() }}" />
-							<a href="/device/{{ subsystem }}/{{ vendor_id }}">
-								{{ subsystem.upper() }}
-							</a>
-						</li>
+	<div class="container">
+		<div class="row justify-content-center">
+			<div class="col-12 col-md-6">
+				<dl class="row">
+					{% for vendor, subsystems in vendors %}
+						{% if vendor %}
+							<dt class="col-sm-9">{{ vendor }}</dt>
+							<dd class="col-sm-3">
+								{% for subsystem, vendor_id in sorted(subsystems) %}
+									<a href="/device/{{ subsystem }}/{{ vendor_id }}">
+										{{ subsystem.upper() }}
+									</a>
+								{% end %}
+							</dd>
+						{% end %}
 					{% end %}
-				</ul>
-			</dd>
-		{% end %}
-	</dl>
+				</dl>
+			</div>
+		</div>
+	</div>
 {% end block %}
diff --git a/src/web/fireinfo.py b/src/web/fireinfo.py
index cbecde8f..8e4de2b4 100644
--- a/src/web/fireinfo.py
+++ b/src/web/fireinfo.py
@@ -329,9 +329,9 @@ class AdminFireinfoHandler(BaseHandler):
 
 
 class DeviceTableModule(ui_modules.UIModule):
-	def render(self, devices):
+	def render(self, devices, show_group=True, embedded=False):
 		return self.render_string("fireinfo/modules/table-devices.html",
-				devices=devices)
+				devices=devices, show_group=show_group, embedded=embedded)
 
 
 class DeviceAndGroupsTableModule(ui_modules.UIModule):
-- 
2.47.3