Adjustment in the CSS to show/hide pause button

This commit is contained in:
Khanh Ngo 2020-04-22 21:39:35 +07:00
parent dbb85cb759
commit 43012a720c
No known key found for this signature in database
GPG key ID: D5FAA6A16150E49E
2 changed files with 6 additions and 4 deletions

View file

@ -166,7 +166,7 @@ func SetClientStatus() echo.HandlerFunc {
client.Enabled = status client.Enabled = status
db.Write("clients", clientID, &client) 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"}) return c.JSON(http.StatusOK, jsonHTTPResponse{true, "ok"})
} }

View file

@ -7,6 +7,7 @@ Wireguard Clients
.paused-client { .paused-client {
transition: transform .2s; transition: transform .2s;
cursor: pointer; cursor: pointer;
vertical-align: middle;
} }
i[class^="paused-client"]:hover { transform: scale(1.5); } i[class^="paused-client"]:hover { transform: scale(1.5); }
</style> </style>
@ -28,7 +29,8 @@ Wireguard Clients
{{range .clientDataList}} {{range .clientDataList}}
<div class="col-sm-6"> <div class="col-sm-6">
<div class="info-box"> <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> <i class="paused-client fas fa-3x fa-play" onclick="resumeClient('{{.Client.ID}}')"></i>
</div> </div>
<img <img
@ -140,13 +142,13 @@ Wireguard Clients
function resumeClient(clientID) { function resumeClient(clientID) {
setClientStatus(clientID, true); setClientStatus(clientID, true);
var divElement = document.getElementById("paused_" + clientID); var divElement = document.getElementById("paused_" + clientID);
divElement.style.display = "none"; divElement.style.visibility = "hidden";
} }
function pauseClient(clientID) { function pauseClient(clientID) {
setClientStatus(clientID, false); setClientStatus(clientID, false);
var divElement = document.getElementById("paused_" + clientID); var divElement = document.getElementById("paused_" + clientID);
divElement.style.display = "block"; divElement.style.visibility = "visible";
} }
</script> </script>
<script> <script>