From d551943fd1d4ab2febff8338a8d12a6b0d6f617c Mon Sep 17 00:00:00 2001
From: Stefan Aurori <aurori@gmail.com>
Date: Thu, 23 May 2024 01:55:51 -0400
Subject: [PATCH] Update search table UI for better mobile view. Config UI fix
 tooltip position and general layout + better mobile UI (#949)

---
 .../ui-src/html/directives/search-result.html | 120 ++++++-----
 core/ui-src/html/states/config.html           |  32 +--
 core/ui-src/html/states/search-results.html   |   6 +-
 core/ui-src/less/nzbhydra.less                | 197 +++++++++++++-----
 docker/uiDev/docker-compose.yaml              |   4 +-
 5 files changed, 238 insertions(+), 121 deletions(-)

diff --git a/core/ui-src/html/directives/search-result.html b/core/ui-src/html/directives/search-result.html
index db6750525..a950265e5 100644
--- a/core/ui-src/html/directives/search-result.html
+++ b/core/ui-src/html/directives/search-result.html
@@ -1,42 +1,50 @@
 <tr ng-class="{'duplicate' : result.duplicateGroupIndex > 0, 'title-group-expanded': result.titleGroupIndex > 0} "
     style="margin:0; border-width: 0; padding: 0" ng-if="resultDisplayed" class="search-result-row">
-  <td class="col-md-13 search-results-cell result-title" style="margin:0;">
-    <input type="checkbox"
-           ng-model="foo.selected"
-           ng-click="clickCheckbox($event, result)" data-checkbox-index="0" class="result-checkbox"/><a href="" ng-click="toggleTitleExpansion()"
-       ng-class="{'visibility-hidden': (result.titlesLength === 1 || result.titleGroupIndex > 0 || result.duplicateGroupIndex > 0)}"
-       class="title-expand-toggle"
-       uib-tooltip="Click to see or hide all results with the same title"
-       tooltip-placement="top"
-       tooltip-trigger="mouseenter"
-                                                                                                        style="text-decoration: none"><span class="glyphicon"
-                                                                                                                                            ng-class="{'glyphicon-minus': titlesExpanded, 'glyphicon-plus': !titlesExpanded}"></span></a><a
-    ng-if="foo.duplicatesDisplayed" href="" ng-click="toggleDuplicateExpansion()"
-       ng-class="{'visibility-hidden': (result.duplicatesLength == 1 || result.duplicateGroupIndex > 0)}"
-       class="duplicate-expand-toggle"
-       uib-tooltip="Click to see or hide all duplicates of this result"
-       tooltip-placement="right"
-       tooltip-trigger="mouseenter" style="text-decoration: none"
-  >
-    <!-- Formatting must be so weird because otherwise we'll have leading whitespaces in the titles   -->
-    <span class="glyphicon" ng-class="{'glyphicon-minus': duplicatesExpanded, 'glyphicon-plus': !duplicatesExpanded}"></span></a><span class="title">{{result.alwaysShowTitles}}<span
-    ng-if="(result.titleGroupIndex === 0 && result.duplicateGroupIndex === 0) || searchResultsControllerShared.isGroupEpisodes || foo.alwaysShowTitles"><img
-    ng-if="result.cover && foo.showCovers" ng-src="{{::result.cover}}" width="{{::coverSize}}px" style="margin-right: 5px" ng-click="showCover(result.cover)"/><span
-    ng-if="result.downloadedAt && searchResultsControllerShared.showDownloadedIndicator" class="fa fa-check" uib-tooltip="Already downloaded at {{::result.downloadedAt}}"
-    tooltip-placement="top" tooltip-trigger="mouseenter"></span>{{ ::result.title }}</span></span>
-    <span class="badge" ng-if="result.torrentDownloadFactor">{{::result.torrentDownloadFactor}}</span>
+  <td class="col-md-13 text-break search-results-cell result-title" style="margin:0;" data-label="Title">
+    <div class="d-flex">
+      <div class="d-flex align-items-center justify-content-space-around title-actions me-2">
+        <input type="checkbox"
+              ng-model="foo.selected"
+              ng-click="clickCheckbox($event, result)" data-checkbox-index="0" class="result-checkbox mt-0"/>
+        <a href="" ng-click="toggleTitleExpansion()"
+          ng-class="{'visibility-hidden': (result.titlesLength === 1 || result.titleGroupIndex > 0 || result.duplicateGroupIndex > 0)}"
+          class="title-expand-toggle mx-2"
+          uib-tooltip="Click to see or hide all results with the same title"
+          tooltip-placement="top"
+          tooltip-trigger="mouseenter"
+          style="text-decoration: none">
+            <span class="glyphicon" ng-class="{'glyphicon-minus': titlesExpanded, 'glyphicon-plus': !titlesExpanded}"></span>
+        </a>
+      </div>
+      <a ng-if="foo.duplicatesDisplayed" href="" ng-click="toggleDuplicateExpansion()"
+        ng-class="{'visibility-hidden': (result.duplicatesLength == 1 || result.duplicateGroupIndex > 0)}"
+        class="duplicate-expand-toggle"
+        uib-tooltip="Click to see or hide all duplicates of this result"
+        tooltip-placement="right"
+        tooltip-trigger="mouseenter" style="text-decoration: none">
+        <!-- Formatting must be so weird because otherwise we'll have leading whitespaces in the titles   -->
+        <span class="glyphicon" ng-class="{'glyphicon-minus': duplicatesExpanded, 'glyphicon-plus': !duplicatesExpanded}"></span>
+      </a>
+      <span class="title">{{result.alwaysShowTitles}}<span
+        ng-if="(result.titleGroupIndex === 0 && result.duplicateGroupIndex === 0) || searchResultsControllerShared.isGroupEpisodes || foo.alwaysShowTitles"><img
+        ng-if="result.cover && foo.showCovers" ng-src="{{::result.cover}}" width="{{::coverSize}}px" style="margin-right: 5px" ng-click="showCover(result.cover)"/><span
+        ng-if="result.downloadedAt && searchResultsControllerShared.showDownloadedIndicator" class="fa fa-check" uib-tooltip="Already downloaded at {{::result.downloadedAt}}"
+        tooltip-placement="top" tooltip-trigger="mouseenter"></span>{{ ::result.title }}</span>
+      </span>
+      <span class="badge" ng-if="result.torrentDownloadFactor">{{::result.torrentDownloadFactor}}</span>
+    </div>
   </td>
-  
-  <td class="col-md-1 search-results-cell result-indexer" style="text-align: right">
+
+  <td class="col-md-1 search-results-cell result-indexer text-right" data-label="Indexer">
     {{ ::result.indexer }}
   </td>
-  <td class="col-md-1 search-results-cell result-category" style="text-align: right">
+  <td class="col-md-1 search-results-cell result-category text-right" data-label="Category">
     {{ ::result.category }}
   </td>
-  <td class="col-md-1 search-results-cell result-size" style="text-align: right">
+  <td class="col-md-1 search-results-cell result-size text-right" data-label="Size">
     {{ ::result.size | byteFmt: 2 }}
   </td>
-  <td class="col-md-1 search-results-cell result-details" style="text-align: right">
+  <td class="col-md-1 search-results-cell result-details text-right" data-label="Details">
     <span ng-if="::(result.grabs !== null)">
         {{ ::result.grabs | kify }}
     </span>
@@ -47,12 +55,13 @@
         {{ ::result.seeders | kify }} / {{ ::result.peers | kify }}
     </span>
   </td>
-  <td class="col-md-1 search-results-cell result-age" style="text-align: right">
+  <td class="col-md-1 search-results-cell result-age text-right" data-label="Age">
     <span uib-tooltip="{{ ::result.date }}"
           tooltip-placement="top"
           tooltip-trigger="mouseenter">{{ ::result.age }}</span>
   </td>
-  <td class="col-md-2 search-results-cell result-links">
+  <td class="col-md-2 search-results-cell result-links" data-label="Links">
+    <div>
     <a href ng-click="showNfo(result)" ng-class="::{'no-nfo': result.hasNfo === 'NO'}"
        class="no-underline result-show-nfo-link"
        uib-tooltip="{{ ::getNfoTooltip() }}"
@@ -69,7 +78,7 @@
            tooltip-trigger="mouseenter">
             <i class="fa fa-search" aria-hidden="true" style="margin-left:3px; margin-right:3px; vertical-align: middle"></i>
         </a>
-        
+
             <a ng-class="::{'no-nfo': !result.comments}" href="{{::result.details_link | dereferer}}" target="_blank"
                class="no-underline result-comments-link"
                uib-tooltip="Comments"
@@ -77,7 +86,7 @@
                tooltip-trigger="mouseenter">
             <i class="fa fa-comment" aria-hidden="true" style="margin-left:0; margin-right:3px;"></i>
         </a>
-        
+
         <a target="_blank" href="{{ ::result.details_link | dereferer}}" ng-class="::{'no-nfo': !result.details_link}"
            style="vertical-align: middle" class="no-underline result-details-link"
            uib-tooltip="Details"
@@ -86,30 +95,31 @@
             <i class="fa fa-info" aria-hidden="true"
                style="margin-left:3px; margin-right:3px; vertical-align: middle"></i>
         </a>
-      
+
       </a>
     </span>
     <span ng-switch on="::result.downloadType">
-            <span ng-switch-when="TORRENT">
-                <a target="_blank" href="gettorrent/user/{{ ::result.searchResultId }}"
-                   style="vertical-align: middle; margin-left: 3px; margin-right: 3px"
-                   class="no-underline result-torrent-download-link"
-                   uib-tooltip="Download torrent"
-                   tooltip-placement="top"
-                   tooltip-trigger="mouseenter"><span class="glyphicon glyphicon-save"></span>
-                </a>
-            </span>
-          <save-or-send-file search-result-id="result.searchResultId" type="result.downloadType"></save-or-send-file>
-            <span ng-switch-default>
-                <a target="_blank" href="getnzb/user/{{ ::result.searchResultId }}"
-                   style="vertical-align: middle; margin-left: 3px; margin-right: 3px"
-                   class="no-underline result-nzb-download-link"
-                   uib-tooltip="Download NZB"
-                   tooltip-placement="top"
-                   tooltip-trigger="mouseenter"><span class="glyphicon glyphicon-save"></span>
-                </a>
-                <addable-nzbs searchresult="::result"></addable-nzbs>
-            </span>
+      <span ng-switch-when="TORRENT">
+          <a target="_blank" href="gettorrent/user/{{ ::result.searchResultId }}"
+              style="vertical-align: middle; margin-left: 3px; margin-right: 3px"
+              class="no-underline result-torrent-download-link"
+              uib-tooltip="Download torrent"
+              tooltip-placement="top"
+              tooltip-trigger="mouseenter"><span class="glyphicon glyphicon-save"></span>
+          </a>
+      </span>
+      <save-or-send-file search-result-id="result.searchResultId" type="result.downloadType"></save-or-send-file>
+        <span ng-switch-default>
+            <a target="_blank" href="getnzb/user/{{ ::result.searchResultId }}"
+                style="vertical-align: middle; margin-left: 3px; margin-right: 3px"
+                class="no-underline result-nzb-download-link"
+                uib-tooltip="Download NZB"
+                tooltip-placement="top"
+                tooltip-trigger="mouseenter"><span class="glyphicon glyphicon-save"></span>
+            </a>
+            <addable-nzbs searchresult="::result"></addable-nzbs>
         </span>
+      </span>
+    </div>
   </td>
 </tr>
diff --git a/core/ui-src/html/states/config.html b/core/ui-src/html/states/config.html
index 205ea6c6f..2d178189c 100644
--- a/core/ui-src/html/states/config.html
+++ b/core/ui-src/html/states/config.html
@@ -133,11 +133,14 @@
 </script>
 
 <script type="text/ng-template" id="setting-wrapper.html">
-  <div class="form-group form-horizontal setting-wrapper" ng-class="{'row': !options.templateOptions.noRow}" ng-show="model.showAdvanced || !to.advanced">
+  <div class="setting-wrapper" ng-show="model.showAdvanced || !to.advanced">
+  <div class="form-group form-horizontal" ng-class="{'row': !options.templateOptions.noRow}">
     <!--Test-->
-    <label class="col-xs-8 col-sm-4 control-label config-label align-middle text-right">
-      {{ to.label }} {{ to.required ? "*" : ""}}
-    </label>
+    <div class="col-xs-8 col-sm-4 text-right config-label pe-xs-0">
+      <label class="control-label align-middle justify-content-flex-end pt-0">
+        {{ to.label }} {{ to.required ? "*" : ""}}
+      </label>
+    </div>
     <div class="col-xs-9 col-sm-6 config-content">
       <!--Before transclude-->
       <formly-transclude></formly-transclude>
@@ -158,17 +161,22 @@
     </div>
     <div class="col-xs-1 col-sm-1">
       <div class="config-tooltip">
-        <div ng-if="::to.tooltip" uib-popover-html="to.tooltip" popover-trigger="'outsideClick'" popover-placement="auto top">
+        <div class="d-flex justify-content-center" ng-if="::to.tooltip" uib-popover-html="to.tooltip" popover-trigger="'outsideClick'" popover-placement="auto top">
             <span class="glyphicon glyphicon-question-sign align-middle" style="cursor: pointer"></span>
         </div>
       </div>
     </div>
-    <div class="col-xs-20 col-sm-9 config-help help-block">
-      <span ng-bind-html="to.help | derefererExtracting | unsafe" class="align-middle">
-          Help
-      </span>
+    <div class="col-xs-20 col-sm-9 config-help mt-xs-2">
+      <div class="help-block mx-xs-4">
+        <div class="align-middle">
+          <span ng-bind-html="to.help | derefererExtracting | unsafe" >
+              Help
+          </span>
+        </div>
+      </div>
     </div>
   </div>
+  </div>
 </script>
 
 <script type="text/ng-template" id="fieldset-wrapper.html">
@@ -176,13 +184,13 @@
     <legend class="text-left">
       <div class="col-sm-4"></div>
       <div class="col-sm-16">
-        <span class="config-fieldset-legend">{{options.templateOptions.label}}
+        <div class="config-fieldset-legend py-3">{{options.templateOptions.label}}
           <span class="glyphicon glyphicon-question-sign" ng-if="::options.templateOptions.tooltip"
               uib-popover-html="options.templateOptions.tooltip"
               tooltip-placement="auto top"
               popover-trigger="'outsideClick'"
               style="font-size: 15px; cursor: pointer"></span>
-        </span>
+        </div>
       </div>
     </legend>
     <formly-transclude></formly-transclude>
@@ -192,7 +200,7 @@
 <script type="text/ng-template" id="notificationRepeatSection.html">
   <!--loop through each element in model array-->
   <div class="{{ hideRepeat }} repeatWrapperClass">
-    <legend><span class="config-fieldset-legend">{{to.headline}}</span></legend>
+    <legend><div class="config-fieldset-legend py-3">{{to.headline}}</div></legend>
     <div class="repeatsection modal-content" ng-repeat="element in model[options.key]"
          ng-init="fields = copyFields(to.fields)">
       <fieldset>
diff --git a/core/ui-src/html/states/search-results.html b/core/ui-src/html/states/search-results.html
index cb5820de4..af882cf41 100644
--- a/core/ui-src/html/states/search-results.html
+++ b/core/ui-src/html/states/search-results.html
@@ -148,7 +148,7 @@ <h2 ng-if="!anyResultsRejected && anyIndexersSearchedSuccessfully">No results we
             </div>
         </div>
 
-        <div class="col-md-4">
+        <div class="col-md-4 search-results-pagination">
             <dir-pagination-controls auto-hide="false" max-size="5"></dir-pagination-controls>
         </div>
         <div class="col-md-8 text-right">
@@ -256,8 +256,7 @@ <h2 ng-if="!anyResultsRejected && anyIndexersSearchedSuccessfully">No results we
         </div>
     </div>
 
-    <div class="table-responsive">
-    <table class="search-results-table table">
+    <table class="table table-hover search-results-table">
         <thead class="search-results-header">
         <tr class="search-results-header-row">
             <th class="col-md-13 cursor-default search-results-cell result-title">
@@ -338,7 +337,6 @@ <h2 ng-if="numberOfAcceptedResults === 0">All found results have been rejected</
         <tbody>{{result.title}}</tbody>
 
     </table>
-    </div>
 
     <dir-pagination-controls auto-hide="false" on-page-change="onPageChange(newPageNumber, oldPageNumber)"></dir-pagination-controls>
 </div>
diff --git a/core/ui-src/less/nzbhydra.less b/core/ui-src/less/nzbhydra.less
index 8a095f36c..8c0db92a3 100644
--- a/core/ui-src/less/nzbhydra.less
+++ b/core/ui-src/less/nzbhydra.less
@@ -66,26 +66,45 @@ body {
 .justify-content-center {
   justify-content: center !important;
 }
+.justify-content-flex-end {
+  justify-content: flex-end !important;
+}
+.justify-content-space-around {
+  justify-content: space-around !important;
+}
 
 // Typography (like Bootstrap 5)
 .text-break {
   word-wrap: break-word !important;
   word-break: break-word !important;
 }
+.text-center { text-align: center !important; }
+.text-left { text-align: left !important; }
+.text-right { text-align: right !important; }
 
 // Utilities (like Bootstrap 5)
-.mb-0 { margin-bottom: 0; }
-.mb-2 { margin-bottom: 0.5rem; }
-.mx-2 { margin-left: 0.5rem; margin-right: 0.5rem; }
-.my-3 { margin-top: 1rem; margin-bottom: 1rem; }
-.my-4 { margin-top: 1.5rem; margin-bottom: 1.5rem; }
-.my-5 { margin-top: 3rem; margin-bottom: 3rem; }
-.ms-4 { margin-left: 1.5rem; }
-.pe-0 { padding-right: 0; }
-.pe-2 { padding-right: 0.5rem; }
-.ps-0 { padding-left: 0; }
-.py-3 { padding-top: 1rem; padding-bottom: 1rem; }
-.py-4 { padding-top: 1.5rem; padding-bottom: 1.5rem; }
+.me-2 { margin-right: 0.5rem !important; }
+.mb-0 { margin-bottom: 0 !important; }
+.mb-2 { margin-bottom: 0.5rem !important; }
+.mb-3 { margin-bottom: 1rem !important; }
+.mb-4 { margin-bottom: 1.5rem !important; }
+.mx-2 { margin-left: 0.5rem !important; margin-right: 0.5rem !important; }
+.my-3 { margin-top: 1rem !important; margin-bottom: 1rem !important; }
+.my-4 { margin-top: 1.5rem !important; margin-bottom: 1.5rem !important; }
+.my-5 { margin-top: 3rem !important; margin-bottom: 3rem !important; }
+.ms-4 { margin-left: 1.5rem !important; }
+.mt-0 { margin-top: 0 !important; }
+.pe-0 { padding-right: 0 !important; }
+.pe-2 { padding-right: 0.5rem !important; }
+.ps-0 { padding-left: 0 !important; }
+.pt-0 { padding-top: 0 !important; }
+.py-3 { padding-top: 1rem !important; padding-bottom: 1rem !important; }
+.py-4 { padding-top: 1.5rem !important; padding-bottom: 1.5rem !important; }
+@media (max-width: @screen-xs-max) {
+  .mt-xs-2 { margin-top: 0.5rem !important; }
+  .mx-xs-4 { margin-left: 1.5rem !important; margin-right: 1.5rem !important; }
+  .pe-xs-0 { padding-right: 0 !important; }
+}
 
 #push,
 #footer {
@@ -356,6 +375,106 @@ a.disabled:hover {
 
 }
 
+@media (max-width: @screen-xs-max) {
+  .search-results-pagination {
+    margin-top: 1.5rem;
+    margin-bottom: 1.5rem;
+  }
+
+  .search-results-table {
+    border: 0;
+    border-collapse: collapse;
+    border-spacing: 0;
+  }
+
+  .search-results-table>tbody+tbody {
+    display: block !important;
+  }
+
+  .search-results-table thead {
+    display: none;
+  }
+
+  .search-results-table tr {
+    display: block;
+  }
+
+  .search-results-table .search-result-row {
+    border-top: 20px solid @table-border-color !important;
+  }
+
+  .search-results-table td {
+    float: none;
+    display: flex !important;
+    align-items: center;
+    justify-content: space-between;
+    text-align: right !important;
+    width: auto;
+    position: relative;
+  }
+
+  .search-results-table td:last-child {
+    border-bottom: 0;
+  }
+
+  .search-results-table td:before {
+    content: attr(data-label);
+    text-align: left;
+    text-transform: uppercase;
+    font-weight: bold;
+    min-width: 80px;
+  }
+
+  .search-results-table td.result-title:before {
+    display: none;
+  }
+
+  .search-results-header {
+    display: block !important;
+  }
+
+  .search-results-header {
+    th {
+      float: none;
+      display: block !important;
+      width: auto;
+      position: relative;
+    }
+    .search-results-header-row {
+      display: flex;
+      flex-wrap: wrap;
+      justify-content: space-between;
+      .result-title {
+        width: 100%;
+      }
+    }
+    .search-results-cell {
+      border: 0;
+      align-items: center;
+      display: flex !important;
+    }
+    .result-links {
+      display: none !important;
+    }
+  }
+
+  .search-results-table .title-actions {
+    flex-direction: column;
+  }
+
+  .search-results-table .result-links > div {
+    display: flex;
+    justify-content: flex-end;
+    a {
+      padding-left: 10px;
+    }
+  }
+
+  .search-results-cell.result-links {
+    padding-right: 8px !important;
+  }
+}
+
 .other-duplicate-toggle {
   margin-left: 18px;
 }
@@ -491,6 +610,7 @@ a.disabled:hover {
 }
 
 .no-nfo {
+  pointer-events: none;
   opacity: 0.25;
 }
 
@@ -581,37 +701,37 @@ a.disabled:hover {
 
 .result-title {
   font-size: @font-size-result-title;
-  width: 60%;
+  width: 54%;
 }
 
 .result-indexer {
   font-size: @font-size-result-non-title;
-  width: 8%;
+  width: 9%;
 }
 
 .result-category {
   font-size: @font-size-result-non-title;
-  width: 6%;
+  width: 8%;
 }
 
 .result-size {
   font-size: @font-size-result-non-title;
-  width: 6%;
+  width: 7%;
 }
 
 .result-details {
   font-size: @font-size-result-non-title;
-  width: 6%;
+  width: 6.5%;
 }
 
 .result-age {
   font-size: @font-size-result-non-title;
-  width: 4.5%;
+  width: 5.5%;
 }
 
 .result-links {
   font-size: @font-size-result-non-title;
-  width: 8%;
+  width: 10%;
   padding-right: 4px !important;
 }
 
@@ -1154,23 +1274,7 @@ select.form-control {
   padding-right: 0;
 }
 
-.config-fieldset-legend {
-  padding-left: 20px;
-}
-
-.config-label {
-  padding-top: 7px;
-}
-
-.config-help {
-  padding-left: 40px;
-  padding-right: 40px;
-}
-
 @media (min-width: @screen-sm-min) {
-  .config-fieldset-legend {
-    padding-left: 0;
-  }
   .config-help {
     padding-left: 0;
     padding-right: 20px;
@@ -1178,18 +1282,19 @@ select.form-control {
 }
 
 .setting-wrapper {
+  border-bottom: 1px solid @modal-content-border-color;
+
   .config-content {
     padding-right: 0;
   }
 
   .align-middle {
-    vertical-align: middle;
-    height: 36px;
-    display: table-cell;
+    align-items: center;
+    min-height: 36px;
+    display: flex;
   }
 }
 
-
 .config-box {
 
   .config-tooltip {
@@ -1205,7 +1310,6 @@ select.form-control {
 
 }
 
-
 .config-field-tooltip {
   max-width: 400px;
 }
@@ -1225,8 +1329,10 @@ select.form-control {
   background-clip: padding-box;
   // Remove focus outline from opened modal
   outline: 0;
+}
 
-
+:is(.formly > .formly-field-group):has(> fieldset.ng-hide) {
+  display: none;
 }
 
 .formly-field-repeatSection {
@@ -1292,15 +1398,10 @@ select.form-control {
 }
 
 
-.formly-field-group:not(:first-child) {
-  margin-top: 25px;
-}
-
-.formly-field-group:first-child {
-  margin-top: -25px;
+.formly-field-group {
+  margin-bottom: 25px;
 }
 
-
 a.glyph-link, a.glyph-link:hover {
   text-decoration: none;
 }
diff --git a/docker/uiDev/docker-compose.yaml b/docker/uiDev/docker-compose.yaml
index 5261ed44e..03bce264c 100644
--- a/docker/uiDev/docker-compose.yaml
+++ b/docker/uiDev/docker-compose.yaml
@@ -12,10 +12,10 @@ services:
     container_name: nzbhydra-ui-dev
     volumes:
       - ./data:/app/data
-      - ./ui-src:/app/ui-src
+      - ../../core/ui-src:/app/ui-src
     ports:
       # NZBHydra port
       - "5076:5076"
       # Livereload port, I use https://chromewebstore.google.com/detail/livereload++/ciehpookapcdlakedibajeccomagbfab?pli=1
       - "1234:1234"
-    restart: unless-stopped
\ No newline at end of file
+    restart: unless-stopped