diff --git a/jsx/src/components/ServerDashboard/ServerDashboard.jsx b/jsx/src/components/ServerDashboard/ServerDashboard.jsx index 19e7f0e9..7ca387e3 100644 --- a/jsx/src/components/ServerDashboard/ServerDashboard.jsx +++ b/jsx/src/components/ServerDashboard/ServerDashboard.jsx @@ -110,14 +110,18 @@ const ServerDashboard = (props) => { }); }; - const setStateFilter = (state_filter) => { + const setStateFilter = (new_state_filter) => { // persist ?state filter // store in url param, clear when value is default ('') setSearchParams((params) => { - if (!state_filter) { + // clear offset when filter changes + if (new_state_filter !== state_filter) { + params.delete("offset"); + } + if (!new_state_filter) { params.delete("state"); } else { - params.set("state", state_filter); + params.set("state", new_state_filter); } return params; }); @@ -196,7 +200,7 @@ const ServerDashboard = (props) => { }); }; const DeleteServerButton = ({ server, user }) => { - if (server.name === "") { + if (!server.name) { // It's not possible to delete unnamed servers return null; } @@ -251,25 +255,22 @@ const ServerDashboard = (props) => { ); }; - const EditUserCell = ({ user }) => { + const EditUserButton = ({ user }) => { return ( - - - + ); }; @@ -363,8 +364,8 @@ const ServerDashboard = (props) => { + - , { onChange={handleSearch} /> + + {/* div.checkbox required for BS3 CSS */} +
+ +
+ {"> Manage Groups"} @@ -460,23 +479,6 @@ const ServerDashboard = (props) => { testid="last-activity-sort" /> - - - Actions @@ -489,14 +491,13 @@ const ServerDashboard = (props) => { - - - + {/* Start all servers */} - - + {/* spacing between start/stop and Shutdown */} + {/* Shutdown Jupyterhub */} - {servers.flatMap(([user, server]) => serverRow(user, server))} diff --git a/jsx/src/components/ServerDashboard/server-dashboard.css b/jsx/src/components/ServerDashboard/server-dashboard.css index 6f55de11..f66f629c 100644 --- a/jsx/src/components/ServerDashboard/server-dashboard.css +++ b/jsx/src/components/ServerDashboard/server-dashboard.css @@ -7,6 +7,13 @@ margin-left: auto; } +.btn-light { + /* backport bs5 btn-light colors */ + background-color: #f9fafb; + border-color: #f9fafb; + color: #000; +} + .server-dashboard-container .btn-light { border: 1px solid #ddd; } @@ -47,11 +54,9 @@ tr.noborder > td { margin-right: 5px; } -.form-check-inline { - /* inline form check doesn't get inline css - I _think_ this is because our bootstrap css is outdated - */ - display: inline-block; +.admin-header-buttons { + /* float header action buttons to the right */ + text-align: right; } /* column widths for dashboard @@ -66,31 +71,21 @@ goals: */ -.admin-table-head label { - /* clear margin-bottom to keep label on baseline */ - margin-bottom: 0px; -} - .admin-table-head #user-header { } .admin-table-head #admin-header { width: 64px; } -.admin-table-head #server-header { -} .admin-table-head #last-activity-header { - width: 180px; -} -.admin-table-head #running-status-header { - width: 300px; + min-width: 180px; } .admin-table-head #actions-header { - width: 80px; + width: 350px; } /* vertical stack server buttons on small windows */ @media (max-width: 991px) { - .admin-table-head #running-status-header { + .admin-table-head #actions-header { width: 140px; } }