From 51f375d1e8e5a184cf853e3263fb6c223b8c2486 Mon Sep 17 00:00:00 2001 From: ReturnFI <151555003+ReturnFI@users.noreply.github.com> Date: Sat, 20 Sep 2025 12:58:38 +0000 Subject: [PATCH] feat(ui): enhance user list responsiveness on mobile and tablet Improves usability of the user list for smaller screens with responsive detail views and filter controls. - Added collapsible detail rows to show key user info (Status, Traffic, Expiry, etc.) via toggle button. - Adjusted table column visibility using Bootstrap (`d-none`, `d-md-table-cell`). - Updated JS event handlers and column indices for responsive layout support. - Replaced filter button group with a hamburger dropdown on mobile/tablet. - Used Bootstrap responsive display classes to toggle between dropdown and full button set. - Optimized card header space for smaller devices. --- core/scripts/webpanel/templates/users.html | 210 +++++++++++++++++---- 1 file changed, 171 insertions(+), 39 deletions(-) diff --git a/core/scripts/webpanel/templates/users.html b/core/scripts/webpanel/templates/users.html index 4825065..01baf6a 100644 --- a/core/scripts/webpanel/templates/users.html +++ b/core/scripts/webpanel/templates/users.html @@ -2,6 +2,28 @@ {% block title %}Users{% endblock %} +{% block styles %} + +{% endblock %} + {% block content %}
@@ -20,27 +42,42 @@

User List {% if users %}({{ users|length }}){% endif %}

-
+ +
+ +
+ All + Hold + Online + Enable + Disable +
+
+ + +
-
+
-
+
-
+
-
+
@@ -78,26 +115,28 @@ # - Status Username - Traffic Usage - Expiry Date - Expiry Days - Day Usage - Enable - Unlimited IP - Configs - Actions + Status + Traffic Usage + Expiry Date + Expiry Days + Day Usage + Enable + Unlimited IP + Configs + Actions + Details {% for user in users|sort(attribute='username', case_sensitive=false) %} - + {{ loop.index }} - + {{ user.username }} + {% if user.status == "Online" %} Online {% if user.online_count and user.online_count > 0 %} @@ -113,32 +152,31 @@ {{ user.status }} {% endif %} - {{ user.username }} - {{ user.traffic_used }} - {{ user.expiry_date }} - {{ user.expiry_days }} - {{ user.day_usage }} - + {{ user.traffic_used }} + {{ user.expiry_date }} + {{ user.expiry_days }} + {{ user.day_usage }} + {% if user.enable %} {% else %} {% endif %} - + {% if user.unlimited_ip %} {% else %} {% endif %} - + - + + + + + + + +
+

Status: + + {% if user.status == "Online" %} + Online + {% if user.online_count and user.online_count > 0 %} + ({{ user.online_count }}) + {% endif %} + {% elif user.status == "Offline" %} + Offline + {% elif user.status == "On-hold" %} + On-hold + {% elif user.status == "Conflict" %} + Conflict + {% else %} + {{ user.status }} + {% endif %} + +

+

Traffic Usage: {{ user.traffic_used }}

+

Expiry Date: {{ user.expiry_date }}

+

Expiry Days: {{ user.expiry_days }}

+

Day Usage: {{ user.day_usage }}

+

Enable: + + {% if user.enable %} + Enabled + {% else %} + Disabled + {% endif %} + +

+ +
+ Configs: + + Show + +
+
+ Actions: + + + +
+
+ {% endfor %} @@ -375,24 +482,28 @@ validateUsername(this, `#${this.id}Error`); }); - $(".filter-button").on("click", function () { + $(".filter-button").on("click", function (e) { + e.preventDefault(); const filter = $(this).data("filter"); $("#selectAll").prop("checked", false); - $("#userTable tbody tr").each(function () { + $("#userTable tbody tr.user-main-row").each(function () { let showRow; switch (filter) { - case "on-hold": showRow = $(this).find("td:eq(2) i").hasClass("text-warning"); break; - case "online": showRow = $(this).find("td:eq(2) i").hasClass("text-success"); break; + case "on-hold": showRow = $(this).find("td:eq(3) i").hasClass("text-warning"); break; + case "online": showRow = $(this).find("td:eq(3) i").hasClass("text-success"); break; case "enable": showRow = $(this).find("td:eq(8) i").hasClass("text-success"); break; case "disable": showRow = $(this).find("td:eq(8) i").hasClass("text-danger"); break; default: showRow = true; } $(this).toggle(showRow).find(".user-checkbox").prop("checked", false); + if (!showRow) { + $(this).next('tr.user-details-row').hide(); + } }); }); $("#selectAll").on("change", function () { - $("#userTable tbody tr:visible .user-checkbox").prop("checked", this.checked); + $("#userTable tbody tr.user-main-row:visible .user-checkbox").prop("checked", this.checked); }); $("#deleteSelected").on("click", function () { @@ -457,16 +568,18 @@ $("#editUserModal").on("show.bs.modal", function (event) { const user = $(event.relatedTarget).data("user"); - const row = $(event.relatedTarget).closest("tr"); - const trafficText = row.find("td:eq(4)").text(); - const expiryText = row.find("td:eq(6)").text(); + const clickedRow = $(event.relatedTarget).closest("tr"); + const dataRow = clickedRow.hasClass('user-main-row') ? clickedRow : clickedRow.prev('.user-main-row'); + + const trafficText = dataRow.find("td:eq(4)").text(); + const expiryText = dataRow.find("td:eq(6)").text(); $("#originalUsername").val(user); $("#editUsername").val(user); $("#editTrafficLimit").val(parseFloat(trafficText.split('/')[1]) || 0); $("#editExpirationDays").val(parseInt(expiryText) || 0); - $("#editBlocked").prop("checked", !row.find("td:eq(8) i").hasClass("text-success")); - $("#editUnlimitedIp").prop("checked", row.find(".unlimited-ip-cell i").hasClass("text-primary")); + $("#editBlocked").prop("checked", !dataRow.find("td:eq(8) i").hasClass("text-success")); + $("#editUnlimitedIp").prop("checked", dataRow.find(".unlimited-ip-cell i").hasClass("text-primary")); validateUsername('#editUsername', '#editUsernameError'); }); @@ -625,11 +738,29 @@ function filterUsers() { const searchText = $("#searchInput").val().toLowerCase(); - $("#userTable tbody tr").each(function () { - const username = $(this).find("td:eq(3)").text().toLowerCase(); - $(this).toggle(username.includes(searchText)); + $("#userTable tbody tr.user-main-row").each(function () { + const username = $(this).find("td:eq(2)").text().toLowerCase(); + const isVisible = username.includes(searchText); + $(this).toggle(isVisible); + if (!isVisible) { + $(this).next('tr.user-details-row').hide(); + } }); } + + $('#userTable').on('click', '.toggle-details-btn', function() { + const $this = $(this); + const icon = $this.find('i'); + const detailsRow = $this.closest('tr.user-main-row').next('tr.user-details-row'); + + detailsRow.toggle(); + + if (detailsRow.is(':visible')) { + icon.removeClass('fa-plus').addClass('fa-minus'); + } else { + icon.removeClass('fa-minus').addClass('fa-plus'); + } + }); $('#addUserModal').on('show.bs.modal', function () { $('#addUserForm, #addBulkUsersForm').trigger('reset'); @@ -642,7 +773,8 @@ $('#addUserModal a[data-toggle="tab"]').first().tab('show'); }); - $("#searchButton, #searchInput").on("click keyup", filterUsers); + $("#searchButton").on("click", filterUsers); + $("#searchInput").on("keyup", filterUsers); checkIpLimitServiceStatus(); });