From c485b4da193aee8614975b7c6f7252d58b27c0d1 Mon Sep 17 00:00:00 2001
From: Ben <43026681+bwp91@users.noreply.github.com>
Date: Sat, 18 Nov 2023 04:05:41 +0000
Subject: [PATCH] Update plugin-card.component.html

---
 .../plugin-card/plugin-card.component.html    | 117 ++++++++----------
 1 file changed, 55 insertions(+), 62 deletions(-)

diff --git a/ui/src/app/modules/plugins/plugin-card/plugin-card.component.html b/ui/src/app/modules/plugins/plugin-card/plugin-card.component.html
index 2f0fa0276..29dd16fbb 100644
--- a/ui/src/app/modules/plugins/plugin-card/plugin-card.component.html
+++ b/ui/src/app/modules/plugins/plugin-card/plugin-card.component.html
@@ -1,63 +1,54 @@
 <!--Panel-->
 <div class="card card-body mb-3">
-  <div class="d-flex flex-row justify-content-between">
-    <div class="">
-      <p class="mb-0 info-text"
-        *ngIf="plugin.installedVersion && !plugin.updateAvailable && !plugin.betaUpdateAvailable && !plugin.disabled">
-        <i class="far fa-fw fa-circle-check"></i> {{ 'plugins.status_installed' | translate }}
-      </p>
-      <p class="mb-0 grey-text" *ngIf="!plugin.installedVersion">
-        <i class="far fa-fw fa-circle-down"></i> {{ 'plugins.status_not_installed' | translate }}
-      </p>
-      <p class="mb-0 primary-text" *ngIf="plugin.updateAvailable || plugin.betaUpdateAvailable && !plugin.disabled">
-        <i class="far fa-fw fa-arrow-alt-circle-up"></i> {{ 'plugins.status_update_available' | translate }}
-      </p>
-      <p class="mb-0 red-text" *ngIf="plugin.installedVersion && plugin.disabled">
-        <i class="far fa-fw fa-circle-pause"></i> {{ 'plugins.status_disabled' | translate }}
-      </p>
+  <div class="row m-0 align-items-center">
+    <div class="col-1 pl-0 text-center">
+      <i class="far fa-2x fa-fw fa-circle-check info-text" *ngIf="plugin.installedVersion && !plugin.updateAvailable && !plugin.betaUpdateAvailable && !plugin.disabled"></i>
+      <i class="far fa-2x fa-fw fa-circle grey-text" *ngIf="!plugin.installedVersion"></i>
+      <i class="far fa-2x fa-fw fa-arrow-alt-circle-up primary-text" *ngIf="plugin.updateAvailable || plugin.betaUpdateAvailable && !plugin.disabled"></i>
+      <i class="far fa-2x fa-fw fa-circle-pause red-text" *ngIf="plugin.installedVersion && plugin.disabled"></i>
     </div>
-    <div class="">
-      <p class="mb-0 grey-text text-right" *ngIf="plugin.author && !plugin.verifiedPlugin">
-        <a class="card-link grey-text" target="_blank" rel="noopener noreferrer"
-          [href]="'https://www.npmjs.com/~' + plugin.author">@{{ plugin.author }}</a>
+    <div class="col-11 pr-0">
+      <div class="d-flex flex-row justify-content-between">
+        <h4 class="card-title mb-0">
+          {{ plugin.displayName || ((plugin.name.charAt(0) === '@' ? plugin.name.split('/')[1] : plugin.name) |
+          replace:'-':' ' | titlecase) }}
+        </h4>
+        <div class="">
+          <p class="mb-0 grey-text text-right" *ngIf="plugin.author && !plugin.verifiedPlugin">
+            <a class="card-link grey-text" target="_blank" rel="noopener noreferrer"
+               [href]="'https://www.npmjs.com/~' + plugin.author">@{{ plugin.author }}</a>
+          </p>
+          <p class="mb-0 grey-text text-right" *ngIf="plugin.verifiedPlugin">
+            <a href="javascript:void(0)" class="card-link pink-text text-decoration-none ml-3" *ngIf="plugin.funding"
+               ngbTooltip="@{{ plugin.name === 'homebridge-config-ui-x' ? 'oznu' : plugin.author }}" (click)="openFundingModal(plugin)">
+              <i class="fas fa-fw fa-heart"></i>
+            </a>
+            <a href="javascript:void(0)" class="card-link text-decoration-none green-text ml-3" (click)="openVerifiedModal()">
+              <i class="fas fa-fw fa-shield-alt"></i>
+            </a>
+          </p>
+        </div>
+      </div>
+      <p class="card-text">{{ plugin.name }} v{{ plugin.installedVersion || plugin.latestVersion }}
+        <span *ngIf="plugin.lastUpdated">({{ plugin.lastUpdated | date:'yyyy-MM-dd' }})</span>
       </p>
-      <p class="mb-0 grey-text text-right" *ngIf="plugin.verifiedPlugin">
-        <a href="javascript:void(0)" class="card-link pink-text text-decoration-none ml-3" *ngIf="plugin.funding"
-           ngbTooltip="@{{ plugin.name === 'homebridge-config-ui-x' ? 'oznu' : plugin.author }}" (click)="openFundingModal(plugin)">
-          <i class="fas fa-fw fa-heart"></i>
-          <span class="d-none d-md-inline"> {{ 'plugins.donate.button_donate' | translate }}</span>
+      <div class="d-flex">
+        <a href="javascript:void(0)" class="card-link" *ngIf="plugin.installedVersion" (click)="$plugin.settings(plugin)">
+          {{ 'plugins.button_settings' | translate | uppercase }}
         </a>
-        <a href="javascript:void(0)" class="card-link text-decoration-none green-text ml-3" (click)="openVerifiedModal()">
-          <i class="fas fa-fw fa-shield-alt"></i>
-          <span class="d-none d-md-inline"> Verified</span>
+        <a href="javascript:void(0)" class="card-link" *ngIf="!plugin.installedVersion"
+           (click)="$plugin.installPlugin(plugin.name)">
+          {{ 'plugins.button_install' | translate | uppercase }}
         </a>
-      </p>
-    </div>
-  </div>
-  <h4 class="card-title mb-0">
-    {{ plugin.displayName || ((plugin.name.charAt(0) === '@' ? plugin.name.split('/')[1] : plugin.name) |
-    replace:'-':' ' | titlecase) }}
-  </h4>
-  <p class="card-text">{{ plugin.name }} v{{ plugin.installedVersion || plugin.latestVersion }}
-    <span *ngIf="plugin.lastUpdated">({{ plugin.lastUpdated | date:'yyyy-MM-dd' }})</span>
-  </p>
-  <div class="d-flex">
-    <a href="javascript:void(0)" class="card-link" *ngIf="plugin.installedVersion" (click)="$plugin.settings(plugin)">
-      {{ 'plugins.button_settings' | translate | uppercase }}
-    </a>
-    <a href="javascript:void(0)" class="card-link" *ngIf="!plugin.installedVersion"
-      (click)="$plugin.installPlugin(plugin.name)">
-      {{ 'plugins.button_install' | translate | uppercase }}
-    </a>
 
-    <div class="ml-auto">
-      <i *ngIf="!hasChildBridges && plugin.installedVersion" class="fas fa-fw fa-circle ml-3 green-text"></i>
-      <i *ngIf="hasChildBridges" class="fas fa-fw fa-circle ml-3" [ngClass]="{
+        <div class="ml-auto">
+          <i *ngIf="!hasChildBridges && plugin.installedVersion" class="fas fa-fw fa-circle ml-3 green-text"></i>
+          <i *ngIf="hasChildBridges" class="fas fa-fw fa-circle ml-3" [ngClass]="{
         'green-text': childBridgeStatus === 'ok',
         'text-warning': childBridgeStatus === 'pending',
         'red-text': childBridgeStatus === 'down'
       }"></i>
-      <span ngbDropdown placement="bottom-right top-right" class="d-inline-block ml-3">
+          <span ngbDropdown placement="bottom-right top-right" class="d-inline-block ml-3">
         <a class="card-link" href="javascript:void(0)" aria-label="Plugin actions drop down menu" ngbDropdownToggle>
           <i class="fas fa-fw fa-ellipsis-v"></i>
           <span *ngIf="
@@ -68,22 +59,22 @@ <h4 class="card-title mb-0">
         </a>
         <div ngbDropdownMenu aria-labelledby="Plugin actions drop down menu">
           <button ngbDropdownItem (click)="$plugin.updatePlugin(plugin, plugin.betaUpdateAvailable ? 'beta' : 'latest')"
-            *ngIf="plugin.updateAvailable || plugin.betaUpdateAvailable">
+                  *ngIf="plugin.updateAvailable || plugin.betaUpdateAvailable">
             <i class="fas fa-fw fa-arrow-alt-circle-up primary-text"></i>
             {{ 'plugins.button_update' | translate }} (v{{ plugin.latestVersion }})
           </button>
           <button ngbDropdownItem *ngIf="!hasChildBridges && !plugin.disabled && recommendChildBridge"
-            (click)="$plugin.bridgeSettings(plugin)">
+                  (click)="$plugin.bridgeSettings(plugin)">
             <i class="fa-fw icon-button fas fa-fw fa-circle-exclamation primary-text"></i>
             {{ 'child_bridge.label_bridge_setup_child_bridges' | translate }}
           </button>
-          <button *ngIf="hasChildBridges && !childBridgeRestartInProgress && hasUnpairedChildBridges && childBridgeStatus === 'ok' && !plugin.disabled"
-             (click)="$plugin.bridgeSettings(plugin)">
+          <button ngbDropdownItem *ngIf="hasChildBridges && !childBridgeRestartInProgress && hasUnpairedChildBridges && childBridgeStatus === 'ok' && !plugin.disabled"
+                  (click)="$plugin.bridgeSettings(plugin)">
             <i class="fa-fw icon-button fas fa-fw fa-circle-exclamation primary-text"></i>
             {{ 'child_bridge.label_bridge_connect_to_homekit' | translate }}
           </button>
           <div class="dropdown-divider"
-            *ngIf="
+               *ngIf="
               (plugin.updateAvailable || plugin.betaUpdateAvailable)
               || (!hasChildBridges && !plugin.disabled && recommendChildBridge)
               || (hasChildBridges && !childBridgeRestartInProgress && hasUnpairedChildBridges && childBridgeStatus === 'ok' && !plugin.disabled)
@@ -96,19 +87,19 @@ <h4 class="card-title mb-0">
             <i class="fas fa-fw fa-fw fa-wave-square"></i> {{ 'plugins.manage.plugin_logs' | translate }}
           </button>
           <button ngbDropdownItem (click)="$plugin.jsonEditor(plugin)"
-            *ngIf="!isMobile && plugin.installedVersion && plugin.name !== 'homebridge-config-ui-x'">
+                  *ngIf="!isMobile && plugin.installedVersion && plugin.name !== 'homebridge-config-ui-x'">
             <i class="fas fa-fw fa-fw fa-code"></i> {{ 'plugins.manage.json_config' | translate }}
           </button>
           <button ngbDropdownItem (click)="disablePlugin(plugin)"
-            *ngIf="plugin.installedVersion && plugin.name !== 'homebridge-config-ui-x' && !plugin.disabled">
+                  *ngIf="plugin.installedVersion && plugin.name !== 'homebridge-config-ui-x' && !plugin.disabled">
             <i class="far fa-fw fa-circle-pause"></i> {{ 'plugins.manage.disable' | translate }}
           </button>
           <button ngbDropdownItem (click)="enablePlugin(plugin)"
-            *ngIf="plugin.installedVersion && plugin.name !== 'homebridge-config-ui-x' && plugin.disabled">
+                  *ngIf="plugin.installedVersion && plugin.name !== 'homebridge-config-ui-x' && plugin.disabled">
             <i class="far fa-fw fa-circle-play"></i> {{ 'plugins.manage.enable' | translate }}
           </button>
           <button ngbDropdownItem *ngIf="plugin.installedVersion && plugin.name !== 'homebridge-config-ui-x'"
-            (click)="$plugin.uninstallPlugin(plugin)">
+                  (click)="$plugin.uninstallPlugin(plugin)">
             <i class="fas fa-fw fa-fw fa-trash"></i> {{ 'plugins.button_uninstall' | translate }}
           </button>
           <div class="dropdown-divider" *ngIf="plugin.installedVersion && plugin.name !== 'homebridge-config-ui-x'"></div>
@@ -124,23 +115,25 @@ <h4 class="card-title mb-0">
             </button>
           </ng-container>
           <button ngbDropdownItem (click)="$plugin.bridgeSettings(plugin)"
-            *ngIf="plugin.installedVersion && plugin.name !== 'homebridge-config-ui-x'">
+                  *ngIf="plugin.installedVersion && plugin.name !== 'homebridge-config-ui-x'">
             <i class="fas fa-fw fa-fw fa-project-diagram"></i> {{ 'child_bridge.label_bridge_settings' | translate }}
           </button>
           <div class="dropdown-divider" *ngIf="plugin.links.homepage || plugin.links.npm"></div>
           <a ngbDropdownItem target="_blank" rel="noopener noreferrer" class="text-decoration-none"
-               *ngIf="plugin.name === 'homebridge-config-ui-x'" href="/swagger">
+             *ngIf="plugin.name === 'homebridge-config-ui-x'" href="/swagger">
             <i class="fas fa-fw fa-passport"></i> {{ 'plugins.button_api_documentation' | translate }}
           </a>
           <a ngbDropdownItem target="_blank" rel="noopener noreferrer" class="text-decoration-none"
-            *ngIf="plugin.links.homepage || plugin.links.npm" [href]="plugin.links.homepage || plugin.links.npm">
+             *ngIf="plugin.links.homepage || plugin.links.npm" [href]="plugin.links.homepage || plugin.links.npm">
             <i *ngIf="plugin.links.homepage"
-              class="{{ plugin.links.homepage.startsWith('https://github.com/') ? 'fab fa-fw fa-github' : 'fas fa-external-link-alt' }}"></i>
+               class="{{ plugin.links.homepage.startsWith('https://github.com/') ? 'fab fa-fw fa-github' : 'fas fa-external-link-alt' }}"></i>
             <i *ngIf="!plugin.links.homepage && plugin.links.npm" class="fab fa-fw fa-npm"></i>
             {{ 'plugins.button_homepage' | translate }}
           </a>
         </div>
       </span>
+        </div>
+      </div>
     </div>
   </div>
 </div>