try to make the users table look better on mobile devices

not really working well at the moment, but I'm on it

diff --git a/users/index.php b/users/index.php
index 0f140e9ddbc39adfafdfe5da001e83711241d5d8..71cf596473da1d379ea9500a2bf748b0cd68fe87 100644 (file)
--- a/users/index.php
+++ b/users/index.php
@@ -133,12 +133,12 @@ Click on a username to view more information.
                <th scope="col"><input type="checkbox" label='selectall' onClick="toggle_user(this)" /></th>
                <th scope="col">Nick</th>
                <th scope="col">Country</th>
-               <th scope="col">Host / IP</th>
+               <th class="hostname" scope="col">Host / IP</th>
                <th scope="col"><span data-toggle="tooltip" data-placement="bottom" title="The services account name, if the user identified to services." style="border-bottom: 1px dotted #000000">Account</span></th>
                <th scope="col">Usermodes <a href="https://www.unrealircd.org/docs/User_modes" target="_blank">ℹ️</a></th>
-               <th scope="col">Oper</th>
-               <th scope="col"><span data-toggle="tooltip" data-placement="bottom" title="This shows [Secure] if the user is using SSL/TLS or is on localhost." style="border-bottom: 1px dotted #000000">Secure</span></th>
-               <th scope="col" class="d-none d-xl-block">Connected to</th>
+               <th class="opercol" scope="col">Oper</th>
+               <th class="securecol" scope="col"><span data-toggle="tooltip" data-placement="bottom" title="This shows [Secure] if the user is using SSL/TLS or is on localhost." style="border-bottom: 1px dotted #000000">Secure</span></th>
+               <th class="uplinkcol" scope="col">Connected to</th>
                <th scope="col"><span data-toggle="tooltip" data-placement="bottom" title="The reputation score gets higher when someone with this IP address has been connected in the past weeks. A low reputation score (like <10) is an indication of a new IP." style="border-bottom: 1px dotted #000000">Reputation</span> <a href="https://www.unrealircd.org/docs/Reputation_score" target="_blank">ℹ️</a></th>
        </thead>
        
@@ -201,7 +201,7 @@ Click on a username to view more information.
                        $isBot = (strpos($user->user->modes, "B") !== false) ? ' <span class="badge rounded-pill badge-dark">Bot</span>' : "";
                        echo "<td><a href=\"details.php?nick=".$user->id."\">$user->name$isBot</a></td>";
                        echo "<td>".(isset($user->geoip->country_code) ? '<img src="https://flagcdn.com/48x36/'.htmlspecialchars(strtolower($user->geoip->country_code)).'.png" width="20" height="15"> '.$user->geoip->country_code : "")."</td>";
-                       echo "<td>".htmlspecialchars($user->hostname)." (".($user->hostname == $user->ip ? 'the same' : htmlspecialchars($user->ip ?? "None")).")</td>";
+                       echo "<td class=\"hostname\">".htmlspecialchars($user->hostname)." (".($user->hostname == $user->ip ? 'the same' : htmlspecialchars($user->ip ?? "None")).")</td>";
                        $account = (isset($user->user->account)) ? "<a href=\"".BASE_URL."users/?account=".$user->user->account."\">".htmlspecialchars($user->user->account)."</a>" : '<span class="badge rounded-pill badge-primary">None</span>';
                        echo "<td>".$account."</td>";
                        $modes = (isset($user->user->modes)) ? "+" . $user->user->modes : "<none>";
@@ -209,13 +209,13 @@ Click on a username to view more information.
                        $oper = (isset($user->user->operlogin)) ? $user->user->operlogin." <span class=\"badge rounded-pill badge-secondary\">".$user->user->operclass."</span>" : "";
                        if (!strlen($oper))
                                $oper = (strpos($user->user->modes, "S") !== false) ? '<span class="badge rounded-pill badge-warning">Services Bot</span>' : "";
-                       echo "<td class=\"\">".$oper."</td>";
+                       echo "<td class=\"opercol\">".$oper."</td>";
 
                        $secure = (isset($user->tls) || $user->hostname !== "localhost") ? "<span class=\"badge rounded-pill badge-success\">Secure</span>" : "<span class=\"badge rounded-pill badge-danger\">Insecure</span>";
                        if (strpos($user->user->modes, "S") !== false)
                                $secure = "";
-                       echo "<td class=\"\">".$secure."</td>";
-                       echo "<td class=\"d-none d-xl-block\"><a href=\"".BASE_URL."servers/details.php?server=".substr($user->id, 0, 3)."\">".$user->user->servername."</a></td>";
+                       echo "<td class=\"securecol\">".$secure."</td>";
+                       echo "<td class=\"uplinkcol\"><a href=\"".BASE_URL."servers/details.php?server=".substr($user->id, 0, 3)."\">".$user->user->servername."</a></td>";
                        echo "<td>".$user->user->reputation."</td>";
                        echo "</tr>";
                        $currentNumberUsers++;
@@ -342,6 +342,23 @@ Click on a username to view more information.
     $("#myModal").on('shown.bs.modal', function(){
         $("#CloseButton").focus();
     });
+
+       function resize_check()
+       {
+               var width = window.innerWidth;
+               var elements = document.querySelectorAll('.hostname, .opercol, .uplinkcol, .securecol');
+               var show = '';
+               if (width < 900 || alert(typeof screen.orientation) !== 'undefined')
+                       show = 'none';
+
+               for (let i = 0; i < elements.length; i++)
+                       elements[i].style.display = show;
+
+       }
+       resize_check();
+       window.addEventListener('resize', function() {
+               resize_check();
+       });
 </script>
 
 <?php require_once UPATH.'/footer.php'; ?>