Minecraft Server widget issues on mobile

[benny01000010]

Widget link

https://github.com/glanceapp/community-widgets/blob/main/widgets/minecraft-server/README.md

Description

The ability to hover over the player count to display the usernames of everyone online does not work by tapping on mobile (when visiting the website in Safari or Firefox on iOS).

[Freedbot]

I don't really know what I'm doing, so the formatting on this is surely jank and broken, but here's an augmented version of the community widget. I messed with it for my own purposes, but it should help you too.

I removed the hover list for the player count and put it as a new line instead. I included a render of each player head in front of the names. Of course this line doesn't render or take up space if no one is online or the server is off.
I also added a new line under the server address for the MOTD. Also removed if the server is off.
I messed with the margins and server icon size a bit to adjust for increased widget size.

I did implement a left-right bounce marquee effect on the MOTD and an infinite scroll marquee of the player list. I figured it'd be better than doing just overflow cutoff or word wrapping tons of new lines. Unfortunately, I couldn't figure out how to make it only do the marquee effect when the text would overflow. Instead, I set the animations to only trigger on mouse hover of those lines. It works fine for my browser on android, but if the other method breaks for you on iOS then this animation probably will too. If your MOTDs and player lists are especially long, then just delete the <style> section from the top of the template.

              - type: custom-api
                title: Minecraft
                url: https://api.mcstatus.io/v2/status/java/***YOURSERVERHERE***
                cache: 1m
                template: |
                  <style>
                    @keyframes leftright {
                      0%, 20% { transform: translateX(0%); left: 0%; }
                      80%, 100% { transform: translateX(-100%);left: 100%;}
                    }
                    .bounce-box:hover .animate-bounce {
                      display: inline-block; position: relative; animation: leftright 4s infinite alternate ease-in-out;
                    }
                    @keyframes marquee {
                      0% { transform: translateX(0); }
                      100% { transform: translateX(-50%); }
                    }
                    .marquee-extra { display: none; }
                    .marquee-box:hover .marquee-extra { display: inline-flex; }
                    .marquee-box:hover .animate-marquee {
                      display: inline-flex; animation: marquee 4s linear infinite;
                    }
                  </style>
                  <div style="display:flex; align-items:center; gap:12px;">
                    <div style="width:80px; height:80px; flex-shrink:0; border-radius:4px; display:flex; justify-content:center; align-items:center; overflow:hidden;">
                      {{ if .JSON.Bool "online" }}
                        <img src="{{ .JSON.String "icon" | safeURL }}" width="80" height="80" style="object-fit:contain;">
                      {{ else }}
                        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" style="width:48px; height:48px; opacity:0.5;">
                          <path fill-rule="evenodd" d="M1 5.25A2.25 2.25 0 0 1 3.25 3h13.5A2.25 2.25 0 0 1 19 5.25v9.5A2.25 2.25 0 0 1 16.75 17H3.25A2.25 2.25 0 0 1 1 14.75v-9.5Zm1.5 5.81v3.69c0 .414.336.75.75.75h13.5a.75.75 0 0 0 .75-.75v-2.69l-2.22-2.219a.75.75 0 0 0-1.06 0l-1.91 1.909.47.47a.75.75 0 1 1-1.06 1.06L6.53 8.091a.75.75 0 0 0-1.06 0l-2.97 2.97ZM12 7a1 1 0 1 1-2 0 1 1 0 0 1 2 0Z" clip-rule="evenodd" />
                        </svg>
                      {{ end }}
                    </div>
               
                    <div style="flex-grow:1; min-width:0; margin-top: -4px">
                      <a class="size-h2 block text-truncate color-highlight">
                        {{ .JSON.String "host" }}
                        <span style="width: 8px; height: 8px; border-radius: 50%; background-color: {{ if .JSON.Bool "online" }}var(--color-positive){{ else }}var(--color-negative){{ end }}; display: inline-block; vertical-align: middle;"></span>
                      </a>
                      
                      {{ if .JSON.Bool "online" }}
                      <div class="bounce-box" style="overflow: hidden; white-space: nowrap; width: 100%">
                        <span class="animate-bounce">
                          {{ .JSON.String "motd.html" | safeHTML }}
                        </span>
                      </div>
                      {{ end }}
               
                      <ul class="list-horizontal-text">
                        <li>
                          <span>{{ if .JSON.Bool "online" }}{{ .JSON.String "version.name_clean" }}{{ else }}Offline{{ end }}</span>
                        </li>
                        <li>
                          <p style="display:inline-flex;align-items:center;">
                            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" style="height:1em;vertical-align:middle;margin-right:0.5em;{{ if not (.JSON.Bool "online") }}opacity:0.5;{{ end }}">
                              <path fill-rule="evenodd" d="M7.5 6a4.5 4.5 0 1 1 9 0 4.5 4.5 0 0 1-9 0ZM3.751 20.105a8.25 8.25 0 0 1 16.498 0 .75.75 0 0 1-.437.695A18.683 18.683 0 0 1 12 22.5c-2.786 0-5.433-.608-7.812-1.7a.75.75 0 0 1-.437-.695Z" clip-rule="evenodd" />
                            </svg>
                            {{ if .JSON.Bool "online" }}{{ .JSON.Int "players.online" | formatNumber }}/{{ .JSON.Int "players.max" | formatNumber }}{{ else }}0{{ end }} players
                          </p>
                        </li>
                      </ul>

                      {{ if and (.JSON.Bool "online") (gt (len (.JSON.Array "players.list")) 0) }}
                      <div class="marquee-box" style="overflow: hidden; white-space: nowrap; width: 100%; margin-top: 2px; margin-bottom: -8px">
                        <span class="animate-marquee" style="font-size: 0.85em; opacity: 0.9; display: inline-block;">
                          {{ $players := .JSON.Array "players.list" }}
                          
                          <span style="display: inline-flex;">
                            {{ range $player := $players }}
                              <span style="display:inline-flex; align-items:center; margin-right: 12px;">
                                {{ if $player.Exists "uuid" }}<img src="https://mc-heads.net/head/{{ $player.String "uuid" }}/24" style="width:16px; height:16px; border-radius:2px; margin-right: 4px;">{{ end }}
                                {{ $player.String "name_clean" }}
                              </span>
                            {{ end }}
                          </span>

                          <span class="marquee-extra">
                            {{ range $player := $players }}
                              <span style="display:inline-flex; align-items:center; margin-right: 12px;">
                                {{ if $player.Exists "uuid" }}<img src="https://mc-heads.net/head/{{ $player.String "uuid" }}/24" style="width:16px; height:16px; border-radius:2px; margin-right: 4px;">{{ end }}
                                {{ $player.String "name_clean" }}
                              </span>
                            {{ end }}
                          </span>
                        </span>
                      </div>
                      {{ end }}
                    </div>
                  </div>