TildeClub
/
site
mirror of https://github.com/tildeclub/site.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Simplify active users scroller and prevent loop from finishing early

This commit is contained in:
litemotiv 2024-11-02 12:45:35 +01:00
parent b113fe11a3
commit c93fae31e1
2 changed files with 34 additions and 64 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

29
index.php
View File

@ -18,29 +18,28 @@ if (isset($_GET['notice'])) {
<!-- <p class="advisory">GMAIL USERS: We no longer accept gmail.com addresses for signups since you would not receive your account information email.</p> --> <!-- <p class="advisory">GMAIL USERS: We no longer accept gmail.com addresses for signups since you would not receive your account information email.</p> -->
<!-- Active Users Scrolling List --> <!-- Active Users Scrolling List -->
<div class="active-users-container"> <div id="active-users">
<h2 style="display: inline;">Currently Active Users:</h2> <h2>Currently Active Users:</h2>
<div class="active-users-list">
<ul>
<?php <?php
$activeUsers = json_decode(file_get_contents('online-users.json'), true); $activeUsers = json_decode(file_get_contents('/usr/share/nginx/html/online-users.json'), true);
if (!empty($activeUsers)) { if (!empty($activeUsers))
foreach ($activeUsers as $user) { {
echo '<marquee scrollamount="2">';
foreach ($activeUsers as $user)
{
$username = htmlspecialchars($user); $username = htmlspecialchars($user);
echo "<li><a href='/~$username'>$username</a></li>"; echo "<a href='/~$username'>$username</a> &nbsp;";
} }
// Repeat the list for seamless scrolling
foreach ($activeUsers as $user) { echo '</marquee>';
$username = htmlspecialchars($user);
echo "<li><a href='/~$username'>$username</a></li>";
} }
} else { else
{
echo "<li>No active users at the moment.</li>"; echo "<li>No active users at the moment.</li>";
} }
?> ?>
</ul>
</div>
</div> </div>
<div class="grid"> <div class="grid">
<div class="row"> <div class="row">

43
style.css
View File

@ -298,53 +298,24 @@ pre {
font-weight: bold; font-weight: bold;
color: #fb5 !important; /* Use !important to override other styles */ color: #fb5 !important; /* Use !important to override other styles */
} }
.active-users-container {
#active-users {
margin-top: 20px; margin-top: 20px;
display: flex; display: flex;
align-items: center; align-items: center;
white-space: nowrap; gap:10px;
} }
.active-users-list { #active-users h2 {
overflow: hidden; flex-shrink:0;
box-sizing: border-box;
padding-left: 10px; /* Space between heading and scrolling list */
background-color: #111;
color: #fb5;
width: 100%; /* Make the list take up the rest of the available space */
position: relative;
} }
.active-users-list ul { #active-users a {
display: flex;
padding: 0;
margin: 0;
list-style-type: none;
white-space: nowrap;
animation: scroll-left 30s linear infinite; /* Adjust the duration as needed */
}
.active-users-list li {
display: inline-block;
padding: 0 20px; /* Space between usernames */
font-family: "courier new", monospace;
}
.active-users-list a {
color: #fb5; color: #fb5;
text-decoration: none; text-decoration: none;
} }
.active-users-list a:hover { #active-users a:hover {
color: #f70; color: #f70;
} }
@keyframes scroll-left {
0% {
transform: translateX(0);
}
100% {
transform: translateX(-100%);
}
}