diff options
| author | Arjun Satarkar <me@arjunsatarkar.net> | 2024-07-27 19:18:41 +0000 |
|---|---|---|
| committer | Arjun Satarkar <me@arjunsatarkar.net> | 2024-07-27 19:18:41 +0000 |
| commit | cff1319621c80c4c836f5500946d073766f2a343 (patch) | |
| tree | daa9bf3e718577fbf056547f137b34b54055d21e | |
| parent | 9cee307e3a2a358734c1d0fb867efc338a52cda8 (diff) | |
| download | mediasync-cff1319621c80c4c836f5500946d073766f2a343.tar mediasync-cff1319621c80c4c836f5500946d073766f2a343.tar.gz mediasync-cff1319621c80c4c836f5500946d073766f2a343.zip | |
Discord activity: use mobile safe area insets for layout
| -rw-r--r-- | priv/discord_activity.html.eex | 49 |
1 files changed, 37 insertions, 12 deletions
diff --git a/priv/discord_activity.html.eex b/priv/discord_activity.html.eex index 5278400..9dd0649 100644 --- a/priv/discord_activity.html.eex +++ b/priv/discord_activity.html.eex @@ -1,6 +1,7 @@ -<% home_url = "/.proxy/?#{Mediasync.Constants.query_param_discord_activity_inner()}" %> +<% home_url="/.proxy/?#{Mediasync.Constants.query_param_discord_activity_inner()}" %> <!DOCTYPE html> <html lang="en"> + <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> @@ -8,23 +9,43 @@ <title>discord activity | mediasync</title> <style> :root { - --instance-room-info-height: 20svh; - --instance-room-info-remainder: calc(100svh - var(--instance-room-info-height)); + /* Based on https://discord.com/developers/docs/activities/development-guides#mobile-safe-areas */ + --sait: var(--discord-safe-area-inset-top, env(safe-area-inset-top, 0px)); + --sair: var(--discord-safe-area-inset-right, env(safe-area-inset-right, 0px)); + --saib: var(--discord-safe-area-inset-bottom, env(safe-area-inset-bottom, 0px)); + --sail: var(--discord-safe-area-inset-left, env(safe-area-inset-left, 0px)); + + --saiv: calc(var(--sait) + var(--saib)); + --saih: calc(var(--sair) + var(--sail)); + + --instance-room-info-height: 20%; + --instance-room-info-remainder: calc(100% - var(--instance-room-info-height)); + + box-sizing: border-box; + height: calc(100% - var(--saiv)); + width: calc(100% - var(--saih)); + } + + *, + *::before, + *::after { + box-sizing: inherit; } body { - overflow: hidden; background-color: black; color: white; font-family: monospace; + height: 100%; + margin: var(--sait) var(--sair) var(--saib) var(--sail); + overflow: hidden; + width: 100%; } + iframe { border: none; - } - html, body, iframe { - margin: 0; - width: 100svw; - height: 100svh; + height: 100%; + width: 100%; } iframe.at-home { @@ -32,17 +53,20 @@ } div#instance-room-info { + border-bottom: 1px solid white; display: none; + height: var(--instance-room-info-height); overflow: auto; + padding: 8px 8px 0px 8px; + width: 100%; } body:has(> iframe.at-home) > div#instance-room-info { display: block; - height: var(--instance-room-info-height); - border-bottom: 1px solid white; } </style> </head> + <body data-csrf-token="<%= Plug.CSRFProtection.get_csrf_token() %>"> <div id="instance-room-info"> <span style="font-weight: bold;">currently hosting:</span> @@ -55,10 +79,11 @@ const ACCESS_TOKEN_URL = "/.proxy/discord_activity/access_token?<%= Mediasync.Constants.query_param_discord_activity_inner() %>"; const HOME_URL = "<%= home_url %>"; const roomUrl = (roomId) => { - return `/.proxy/room/${roomId}?<%= Mediasync.Constants.query_param_discord_activity_inner() %>`; + return `/.proxy/room/${roomId}?<%= Mediasync.Constants.query_param_discord_activity_inner() %>`; }; </script> <script src="/static/discord-embedded-app-sdk/Discord.js" type="module"></script> <script src="/static/discordActivity.js" type="module"></script> </body> + </html> |