Channel table: creation time is date now & hide columns on lower resolutions.

(The full date/time is still shown on hover, but i think most
 people wouuld click on the channel for more info anyway)

diff --git a/channels/index.php b/channels/index.php
index 975e19c3eab60253e7ea7a34cd4aa0e012fbc199..63ddc7e2cd9633dde62349ccb5f6366d4e738d31 100644 (file)
--- a/channels/index.php
+++ b/channels/index.php
@@ -19,9 +19,9 @@ $channels = $rpc->channel()->getAll();
        <thead class="table-primary">
        <th>Name</th>
        <th>Users</th>
-       <th>Modes</th>
-       <th>Topic</th>
-       <th>Created</th>
+       <th class="modescol">Modes</th>
+       <th class="topiccol">Topic</th>
+       <th class="createdcol">Created</th>
 </thead>
 <tbody>
        <?php
@@ -35,10 +35,13 @@ $channels = $rpc->channel()->getAll();
                        $s = ($channel->num_users) ? "success" : "danger";
                        echo "<td><span class=\"badge rounded-pill badge-$s\">".$channel->num_users."</span></td>";
                        $modes = (isset($channel->modes)) ? "+" . $channel->modes : "<none>";
-                       echo "<td>".htmlspecialchars($modes)."</td>";
+                       echo "<td class=\"modescol\">".htmlspecialchars($modes)."</td>";
                        $topic = (isset($channel->topic)) ? htmlspecialchars($channel->topic) : "";
-                       echo "<td>".$topic."</td>";
-                       echo "<td>".$channel->creation_time."</td>";
+                       echo "<td class=\"topiccol\" style=\"overflow:hidden;\">".$topic."</td>";
+                       $date = explode("T", $channel->creation_time)[0];
+                       echo "<td class=\"createdcol\">".
+                            "<span data-toggle=\"tooltip\" data-placement=\"bottom\" title=\"".$channel->creation_time."\">".
+                            "$date</td>";
                        echo "</tr>";
                }
 
@@ -46,3 +49,43 @@ $channels = $rpc->channel()->getAll();
        ?>
 </tbody>
 </table>
+<script>
+       function resize_check()
+       {
+               var width = window.innerWidth;
+               var show_elements = '';
+               var hide_elements = '';
+               if (width < 500)
+               {
+                       show_elements = '.createdcol';
+                       hide_elements = '.modescol, .topiccol';
+               } else
+               if (width < 800)
+               {
+                       show_elements = '.createdcol, .topiccol';
+                       hide_elements = '.modescol';
+               } else
+               {
+                       show_elements = '.createdcol, .modes, .topiccol';
+                       hide_elements = '';
+               }
+
+               if (show_elements != '')
+               {
+                       show_elements=document.querySelectorAll(show_elements);
+                       for (let i = 0; i < show_elements.length; i++)
+                               show_elements[i].style.display = '';
+               }
+
+               if (hide_elements != '')
+               {
+                       hide_elements=document.querySelectorAll(hide_elements);
+                       for (let i = 0; i < hide_elements.length; i++)
+                               hide_elements[i].style.display = 'none';
+               }
+       }
+       resize_check();
+       window.addEventListener('resize', function() {
+               resize_check();
+       });
+</script>