improve ui of settings page (#2016)

homebridge · Mar 27, 2024 · fc68d7a · fc68d7a
1 parent 6855f25
commit fc68d7a
Showing 1 changed file with 11 additions and 11 deletions.
diff --git a/ui/src/app/modules/settings/settings.component.html b/ui/src/app/modules/settings/settings.component.html
@@ -57,7 +57,7 @@ <h5 class="primary-text mt-3" translate="settings.general.title_general"></h5>
 <div class="mb-4">
   <h5 class="primary-text mt-3" translate="settings.network.title_network"></h5>
   <ul class="list-group mt-2">
-    <li class="list-group-item d-flex justify-content-between align-items-center">
+    <li class="list-group-item d-block d-md-flex justify-content-between align-items-center">
       <span class="pr-2">
         <div>{{ 'settings.network.title_network_interfaces' | translate }}<br>
           <small class="grey-text pr-2">{{ 'settings.network.message_network_interface_one' | translate }}</small>
@@ -82,7 +82,7 @@ <h5 class="primary-text mt-3" translate="settings.network.title_network"></h5>
         {{ 'settings.mdns_advertiser' | translate }}<br>
         <small class="grey-text pr-2">{{ 'settings.mdns_advertiser_help' | translate }}</small>
       </span>
-      <div>
+      <div class="mt-3 mt-md-0 pl-0 pl-md-5 w-100 w-md-50">
         <select class="custom-select" [formControl]="legacyMdnsFormControl"
           [attr.aria-label]="'settings.mdns_advertiser' | translate">
           <option value="bonjour-hap">Bonjour HAP</option>
@@ -124,21 +124,21 @@ <h5 class="primary-text">{{ 'settings.title_startup_options' | translate }}</h5>
   <div class="mb-4" *ngIf="$settings.env.serviceMode">
     <h5 class="primary-text">{{ 'settings.title_environment_variables' | translate }}</h5>
     <ul class="list-group mt-2">
-      <li class="list-group-item d-flex justify-content-between align-items-center">
+      <li class="list-group-item d-block d-md-flex justify-content-between align-items-center">
         <span>
           DEBUG<br>
           <small class="grey-text pr-2">{{ 'settings.service.debug_tooltip' | translate }}</small>
         </span>
-        <div class="pull-right">
+        <div class="my-3 my-md-0 pl-0 pl-md-5 w-100 w-md-50">
           <input class="form-control form-control-sm" formControlName="ENV_DEBUG" type="text" />
         </div>
       </li>
-      <li class="list-group-item d-flex justify-content-between align-items-center">
+      <li class="list-group-item d-block d-md-flex justify-content-between align-items-center">
         <span>
           NODE_OPTIONS<br>
           <small class="grey-text pr-2">{{ 'settings.service.node_tooltip' | translate }}</small>
         </span>
-        <div class="pull-right">
+        <div class="my-3 my-md-0 pl-0 pl-md-5 w-100 w-md-50">
           <input class="form-control form-control-sm" formControlName="ENV_NODE_OPTIONS" type="text" />
         </div>
       </li>
@@ -205,12 +205,12 @@ <h5 class="primary-text mt-3">{{ 'settings.title_manage_cached_accessories' | tr
   <h5 class="primary-text mt-3">{{ 'settings.title_actions' | translate }}</h5>
   <ul class="list-group mt-2">
     <li class="list-group-item d-flex justify-content-between align-items-center">
-      <span class="pr-2">
+      <span class="">
         {{ 'reset.title_force_restart_hb_service' | translate }}<br>
-        <small class="grey-text pr-2">{{ 'reset.message_force_restart_hb_help_text' | translate }}</small>
-      </span>
-      <span class="red-text text-right">
-        Moved to Main Menu &rarr; {{ 'menu.restart.title' | translate }} &rarr; {{ 'menu.hbrestart.confirm_service_button' | translate }}
+        <small class="grey-text pr-2">{{ 'reset.message_force_restart_hb_help_text' | translate }}</small><br>
+        <span class="red-text text-right">
+          Moved to Main Menu &rarr; {{ 'menu.restart.title' | translate }} &rarr; {{ 'menu.hbrestart.confirm_service_button' | translate }}
+        </span>
       </span>
     </li>
   </ul>