From 054c53831aa9cce4585e52a34452075a335a5c1c Mon Sep 17 00:00:00 2001
From: billz <billzimmerman@gmail.com>
Date: Wed, 23 Sep 2020 19:45:21 +0100
Subject: [PATCH] Wifi client layout fix. Resolves #680

---
 templates/configure_client.php |  2 +-
 templates/wifi_stations.php    | 71 +++++++++++++++++++---------------
 2 files changed, 41 insertions(+), 32 deletions(-)

diff --git a/templates/configure_client.php b/templates/configure_client.php
index a566c63d..f9e64feb 100755
--- a/templates/configure_client.php
+++ b/templates/configure_client.php
@@ -21,7 +21,7 @@
         <form method="POST" action="?page=wpa_conf" name="wpa_conf_form" class="row">
             <?php echo CSRFTokenFieldTag() ?>
           <input type="hidden" name="client_settings" ?>
-          <div class="js-wifi-stations loading-spinner"></div>
+          <div class="row js-wifi-stations w-100 loading-spinner"></div>
         </form>
       </div><!-- ./ card-body -->
       <div class="card-footer"><?php echo _("<strong>Note:</strong> WEP access points appear as 'Open'. RaspAP does not currently support connecting to WEP"); ?></div>
diff --git a/templates/wifi_stations.php b/templates/wifi_stations.php
index d6705628..63df3b54 100755
--- a/templates/wifi_stations.php
+++ b/templates/wifi_stations.php
@@ -3,20 +3,28 @@
   <p class="text-center"><?php echo _('Click "Rescan" to search for nearby Wifi stations.') ?></p>
 <?php endif ?>
 <?php $index = 0; ?>
-<div class="row ml-1 mr-1">
-
+<div class="row ml-1 mr-1 w-100">
+<?php $networks = array_slice($networks, 1,1); ?>
+<?php
+if (count($networks) == 1) {
+    $prop_col = "col-sm-12";
+    $prop_w = "w-50";
+} else {
+    $prop_col = "col-sm-6";
+    $prop_w = "w-100";
+}
+?>
   <?php foreach ($networks as $ssid => $network) : ?>
-  <div class="col-sm-6 align-items-stretch mb-3">
-    <div class="card h-100">
+    <div class="<?php echo $prop_col; ?> align-items-stretch mb-3">
+    <div class="card h-100 <?php echo $prop_w; ?>">
       <div class="card-body">
-
         <input type="hidden" name="ssid<?php echo $index ?>" value="<?php echo htmlentities($ssid, ENT_QUOTES) ?>" />
         <?php if (strlen($ssid) == 0) {
             $ssid = "(unknown)";
         } ?>
         <h5 class="card-title"><?php echo htmlspecialchars($ssid, ENT_QUOTES); ?></h5>
 
-    <div class="info-item-wifi"><?php echo _("Status"); ?></div>
+        <div class="info-item-wifi"><?php echo _("Status"); ?></div>
         <div>
         <?php if ($network['configured']) { ?>
         <i class="fas fa-check-circle"></i>
@@ -29,7 +37,7 @@
           } ?>
          </div>
 
-    <div class="info-item-wifi"><?php echo _("Channel"); ?></div>
+        <div class="info-item-wifi"><?php echo _("Channel"); ?></div>
         <div>
         <?php if ($network['visible']) { ?>
             <?php echo htmlspecialchars($network['channel'], ENT_QUOTES) ?>
@@ -38,7 +46,7 @@
         <?php } ?>
         </div>
 
-    <div class="info-item-wifi"><?php echo _("RSSI"); ?></div>
+        <div class="info-item-wifi"><?php echo _("RSSI"); ?></div>
         <div>
         <?php
         if (isset($network['RSSI']) && $network['RSSI'] >= -200) {
@@ -63,35 +71,36 @@
         <?php } ?>
         <input type="hidden" name="protocol<?php echo $index ?>" value="<?php echo htmlspecialchars($network['protocol'], ENT_QUOTES); ?>" />
 
-    <div class="info-item-wifi"><?php echo _("Security"); ?></div>
+        <div class="info-item-wifi"><?php echo _("Security"); ?></div>
         <div><?php echo $network['protocol'] ?></div>
 
-    <div class="form-group">
-      <div class="info-item-wifi"><?php echo _("Passphrase"); ?></div>
-          <div class="input-group">
-        <?php if ($network['protocol'] === 'Open') { ?>
-          <input type="password" disabled class="form-control" aria-describedby="passphrase" name="passphrase<?php echo $index ?>" value="" />
-        <?php } else { ?>
-          <input type="password" class="form-control js-validate-psk" aria-describedby="passphrase" name="passphrase<?php echo $index ?>" value="<?php echo $network['passphrase'] ?>" data-target="#update<?php echo $index ?>" data-colors="#ffd0d0,#d0ffd0">
-          <div class="input-group-append">
-        <button class="btn btn-outline-secondary js-toggle-password" type="button" data-target="[name=passphrase<?php echo $index ?>]" data-toggle-with="<?php echo _("Hide") ?>">Show</button>
+        <div class="form-group">
+          <div class="info-item-wifi"><?php echo _("Passphrase"); ?></div>
+              <div class="input-group">
+            <?php if ($network['protocol'] === 'Open') { ?>
+              <input type="password" disabled class="form-control" aria-describedby="passphrase" name="passphrase<?php echo $index ?>" value="" />
+            <?php } else { ?>
+              <input type="password" class="form-control js-validate-psk" aria-describedby="passphrase" name="passphrase<?php echo $index ?>" value="<?php echo $network['passphrase'] ?>" data-target="#update<?php echo $index ?>" data-colors="#ffd0d0,#d0ffd0">
+              <div class="input-group-append">
+            <button class="btn btn-outline-secondary js-toggle-password" type="button" data-target="[name=passphrase<?php echo $index ?>]" data-toggle-with="<?php echo _("Hide") ?>">Show</button>
+              </div>
+            <?php } ?>
           </div>
-        <?php } ?>
-      </div>
-    </div>
+        </div>
 
-    <div class="btn-group btn-block ">
-        <?php if ($network['configured']) { ?>
-          <input type="submit" class="col-xs-4 col-md-4 btn btn-warning" value="<?php echo _("Update"); ?>" id="update<?php echo $index ?>" name="update<?php echo $index ?>"<?php echo ($network['protocol'] === 'Open' ? ' disabled' : '')?> />
-          <button type="submit" class="col-xs-4 col-md-4 btn btn-info" value="<?php echo $index?>" name="connect"><?php echo _("Connect"); ?></button>
-        <?php } else { ?>
-          <input type="submit" class="col-xs-4 col-md-4 btn btn-info" value="<?php echo _("Add"); ?>" id="update<?php echo $index ?>" name="update<?php echo $index ?>" <?php echo ($network['protocol'] === 'Open' ? '' : ' disabled')?> />
-        <?php } ?>
-          <input type="submit" class="col-xs-4 col-md-4 btn btn-danger" value="<?php echo _("Delete"); ?>" name="delete<?php echo $index ?>"<?php echo ($network['configured'] ? '' : ' disabled')?> />
-    </div><!-- /.btn-group -->
+        <div class="btn-group btn-block ">
+            <?php if ($network['configured']) { ?>
+              <input type="submit" class="col-xs-4 col-md-4 btn btn-warning" value="<?php echo _("Update"); ?>" id="update<?php echo $index ?>" name="update<?php echo $index ?>"<?php echo ($network['protocol'] === 'Open' ? ' disabled' : '')?> />
+              <button type="submit" class="col-xs-4 col-md-4 btn btn-info" value="<?php echo $index?>" name="connect"><?php echo _("Connect"); ?></button>
+            <?php } else { ?>
+              <input type="submit" class="col-xs-4 col-md-4 btn btn-info" value="<?php echo _("Add"); ?>" id="update<?php echo $index ?>" name="update<?php echo $index ?>" <?php echo ($network['protocol'] === 'Open' ? '' : ' disabled')?> />
+            <?php } ?>
+              <input type="submit" class="col-xs-4 col-md-4 btn btn-danger" value="<?php echo _("Delete"); ?>" name="delete<?php echo $index ?>"<?php echo ($network['configured'] ? '' : ' disabled')?> />
+        </div><!-- /.btn-group -->
       </div><!-- /.card-body -->
     </div><!-- /.card -->
   </div><!-- /.col-sm -->
-        <?php $index += 1; ?>
+  <?php $index += 1; ?>
   <?php endforeach ?>
 </div><!-- /.row -->
+