From 43012a720c693384b34fabbdc041f8ace45ac439 Mon Sep 17 00:00:00 2001
From: Khanh Ngo <k@ndk.name>
Date: Wed, 22 Apr 2020 21:39:35 +0700
Subject: [PATCH] Adjustment in the CSS to show/hide pause button

---
 handler/routes.go      | 2 +-
 templates/clients.html | 8 +++++---
 2 files changed, 6 insertions(+), 4 deletions(-)

diff --git a/handler/routes.go b/handler/routes.go
index dd8cde4..d4e0ffb 100644
--- a/handler/routes.go
+++ b/handler/routes.go
@@ -166,7 +166,7 @@ func SetClientStatus() echo.HandlerFunc {
 
 		client.Enabled = status
 		db.Write("clients", clientID, &client)
-		log.Infof("Change client %s to status %b", client.ID, status)
+		log.Infof("Changed client %s enabled status to %v", client.ID, status)
 
 		return c.JSON(http.StatusOK, jsonHTTPResponse{true, "ok"})
 	}
diff --git a/templates/clients.html b/templates/clients.html
index 2d8d25d..e9cf9be 100644
--- a/templates/clients.html
+++ b/templates/clients.html
@@ -7,6 +7,7 @@ Wireguard Clients
     .paused-client {
         transition: transform .2s;
         cursor: pointer;
+        vertical-align: middle;
     }
     i[class^="paused-client"]:hover { transform: scale(1.5); }
 </style>
@@ -28,7 +29,8 @@ Wireguard Clients
             {{range .clientDataList}}
             <div class="col-sm-6">
                 <div class="info-box">
-                    <div class="overlay" id="paused_{{.Client.ID}}" {{if eq .Client.Enabled true}}style="display: none;"{{end}}>
+                    <div class="overlay" id="paused_{{.Client.ID}}"
+                        {{if eq .Client.Enabled true}}style="visibility: hidden;" {{end}}>
                         <i class="paused-client fas fa-3x fa-play" onclick="resumeClient('{{.Client.ID}}')"></i>
                     </div>
                     <img
@@ -140,13 +142,13 @@ Wireguard Clients
         function resumeClient(clientID) {
             setClientStatus(clientID, true);
             var divElement = document.getElementById("paused_" + clientID);
-            divElement.style.display = "none";
+            divElement.style.visibility = "hidden";
         }
 
         function pauseClient(clientID) {
             setClientStatus(clientID, false);
             var divElement = document.getElementById("paused_" + clientID);
-            divElement.style.display = "block";
+            divElement.style.visibility = "visible";
         }
     </script>
     <script>