From 90f71a442e084bd37076ec02efb311d05ea75fb4 Mon Sep 17 00:00:00 2001
From: RD WebDesign <github@rdwebdesign.com.br>
Date: Fri, 7 Mar 2025 19:01:01 -0300
Subject: [PATCH] Use an arrow to indicate child interfaces

- Add and format the arrow
- Remove the icon used to indent child interfaces (the arrow is enough)

Signed-off-by: RD WebDesign <github@rdwebdesign.com.br>
---
 scripts/js/interfaces.js | 5 +++--
 style/pi-hole.css        | 4 ++++
 2 files changed, 7 insertions(+), 2 deletions(-)

diff --git a/scripts/js/interfaces.js b/scripts/js/interfaces.js
index 18e0ae32..1398c8f3 100644
--- a/scripts/js/interfaces.js
+++ b/scripts/js/interfaces.js
@@ -54,12 +54,13 @@ $(function () {
       }
 
       // Show an icon for indenting slave interfaces
-      const indentIcon = master === null ? "" : "<i class='fa fa-diagram-project fa-fw'></i> ";
+      const indentIcon =
+        master === null ? "" : "<span class='child-interface-icon'>&nbsp;&rdca;</span> ";
 
       var obj = {
         text: indentIcon + interface.name + " - " + status,
         class: gateways.has(interface.name) ? "text-bold" : null,
-        icon: "fa fa-network-wired fa-fw",
+        icon: master === null ? "fa fa-network-wired fa-fw" : "",
         nodes: [],
       };
 
diff --git a/style/pi-hole.css b/style/pi-hole.css
index 70fbc282..f0d1a6aa 100644
--- a/style/pi-hole.css
+++ b/style/pi-hole.css
@@ -1584,3 +1584,7 @@ textarea.field-sizing-content {
 .bstreeview .list-group-item:hover {
   background-color: rgba(127, 127, 127, 0.18);
 }
+.child-interface-icon {
+  line-height: 0.5em;
+  font-size: 1.7em;
+}