Lists page - Improve hints and help text (#3798)

Author: PromoFaux

groups-lists.lp

@@ -47,7 +47,6 @@ mg.include('scripts/lua/header_authenticated.lp','r')
                 <ol>
                     <li>Please run <code>pihole -g</code> or update your gravity list <a href="<?=webhome?>gravity">online</a> after modifying your lists.</li>
                     <li>Multiple lists can be added by separating each <em>unique</em> URL with a space or comma</li>
-                    <li>Click on the icon in the first column to get additional information about your lists. The icons correspond to the health of the list.</li>
                 </ol>
                 <div class="btn-toolbar pull-right" role="toolbar" aria-label="Toolbar with buttons">
                     <div class="btn-group" role="group">
@@ -68,8 +67,8 @@ mg.include('scripts/lua/header_authenticated.lp','r')
                 <h3 class="box-title">
                     Subscribed lists
                 </h3>
-            </div>
-            <!-- /.box-header -->
+            </div><!-- /.box-header -->
+
             <div class="box-body">
                 <table id="listsTable" class="table table-striped table-bordered" width="100%">
                     <thead>
@@ -87,10 +86,39 @@ mg.include('scripts/lua/header_authenticated.lp','r')
                     </thead>
                 </table>
                 <button type="button" id="resetButton" class="btn btn-default btn-sm text-red hidden">Reset sorting</button>
-            </div>
-            <!-- /.box-body -->
-        </div>
-        <!-- /.box -->
+            </div><!-- /.box-body -->
+
+            <div class="box-footer clearfix">
+                <div class="row">
+                    <div class="col-xs-12">
+                        <p><strong>Hint:</strong> Click on the icons (first and second columns) to get additional information about your lists. The icons correspond to the health of the list.</p>
+                    </div>
+                </div>
+                <div class="row">
+                    <div class="col-sm-12 list-icon-legend-block">
+                        <div class="list-icon-legend">
+                            <p><strong>List Status:</strong></p>
+                            <div>
+                                <span class="fa fa-fw fa-check-circle list-status-1"></span> - List download was successful<br>
+                                <span class="fa fa-fw fa-history list-status-2"></span> - List unchanged upstream, Pi-hole used a local copy<br>
+                                <span class="fa fa-fw fa-exclamation-circle list-status-3"></span> - List unavailable, Pi-hole used a local copy<br>
+                                <span class="fa fa-fw fa-times-circle list-status-4"></span> - List unavailable and no local copy of this list is available<br>
+                                <span class="fa fa-fw fa-question-circle list-status-0"></span> - Unknown<br>
+                                <em>(The status icon turns gray when the list is disabled.)</em>
+                            </div>
+                        </div>
+                        <div class="list-icon-legend">
+                            <p><strong>List Type:</strong></p>
+                            <div>
+                                <span class="fa fa-fw fa-check text-green"></span> - Allow list<br>
+                                <span class="fa fa-fw fa-ban text-red"></span> - Block list
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div><!-- /.box-footer -->
+
+        </div><!-- /.box -->
     </div>
 </div>
 

scripts/js/groups-lists.js

@@ -109,7 +109,7 @@ function setStatusIcon(data) {
       break;
   }
 
-  return "<i class='fa fa-fw " + statusIcon + "' title='" + statusTitle + "'></i>";
+  return "<span class='fa fa-fw " + statusIcon + "' title='" + statusTitle + "'></span>";
 }
 
 // Define human-friendly status string
@@ -167,7 +167,7 @@ function setTypeIcon(type) {
     title = "This is an allowlist";
   }
 
-  return `<i class='fa fa-fw ${iconClass}' title='${title}\nClick for details about this list'></i> `;
+  return `<span class='fa fa-fw ${iconClass}' title='${title}\nClick for details about this list'></span> `;
 }
 
 function initTable() {

style/pi-hole.css

@@ -544,6 +544,12 @@ tfoot.add-new-item > tr > th {
   color: #cc0000;
 }
 
+.list-icon-legend-block {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 15px 60px;
+}
+
 td.details-control {
   cursor: pointer;
   text-align: center;