fix(podcast): Messenger på iPhone og vandret scroll
Messenger på iPhone blokerer også x-safari-https://, så "Åbn i Safari" gjorde ingenting. I stedet vises to veje, der virker: menuen ⋯ → "Åbn i ekstern browser", eller "Kopiér adressen" og tilføj feedet i Apple Podcasts (Bibliotek → ⋯ → Følg en serie via URL). Kopieringen falder tilbage til execCommand/prompt, hvis clipboard-API'et er spærret. Android beholder intent://-knappen. Siden kunne skubbes til siden på iPhone. Afspiller og felter må nu aldrig blive bredere end kortet, felter har 16 px skrift (ellers zoomer iOS ind), lange ord brydes, og html/body skjuler vandret overløb. Claude-Session: https://claude.ai/code/session_012LCTmU2ewo8tnM1dByYAoG
This commit is contained in:
+35
-5
@@ -8,6 +8,17 @@
|
||||
<meta property="og:url" content="{{ og.url }}">
|
||||
{% if og.billede %}<meta property="og:image" content="{{ og.billede }}">{% endif %}{% endif %}{% endif %}{% endblock %}
|
||||
{% block body %}
|
||||
<style>
|
||||
/* Ingen vandret scroll på iPhone: afspiller og felter må aldrig blive bredere end
|
||||
kortet, og felter skal have mindst 16 px skrift, ellers zoomer iOS ind. */
|
||||
html, body { overflow-x: hidden; }
|
||||
.pod-side { max-width: 100%; overflow-wrap: anywhere; }
|
||||
.pod-side img, .pod-side audio, .pod-side input, .pod-side .wt-card { max-width: 100%; box-sizing: border-box; }
|
||||
.pod-side audio { display: block; width: 100%; min-width: 0; }
|
||||
.pod-side input { font-size: 16px !important; min-width: 0; }
|
||||
.pod-side .wt-btn { white-space: normal; }
|
||||
</style>
|
||||
<div class="pod-side">
|
||||
{% if saved %}<div class="wt-flash">{{ saved }}</div>{% endif %}
|
||||
{% if not udsendelser %}
|
||||
<h1>Podcast</h1>
|
||||
@@ -30,11 +41,15 @@
|
||||
<h2 style="font-size:1.05rem;margin:0 0 .5rem">Abonnér i din podcast-app</h2>
|
||||
{% if indbygget %}
|
||||
<div class="wt-flash" style="margin:.4rem 0 .9rem">
|
||||
Du har åbnet siden inde i Messenger, og den kan ikke åbne podcast-apps.
|
||||
{% if indbygget.href %}Tryk her for at åbne siden i din almindelige browser, og abonnér derfra:
|
||||
<div style="margin-top:.6rem"><a class="wt-btn wt-btn--primary" href="{{ indbygget.href }}">{{ indbygget.knap }}</a></div>
|
||||
{% else %}Åbn siden i din almindelige browser (menuen ⋯ øverst), og abonnér derfra.{% endif %}
|
||||
<div class="wt-muted" style="font-size:.85rem;margin-top:.5rem">Virker knappen ikke: tryk på ⋯ øverst og vælg "Åbn i ekstern browser". Du kan også bare lytte herunder.</div>
|
||||
<p style="margin:0 0 .5rem">Du har åbnet siden inde i Messenger, og den kan ikke åbne podcast-apps. Du kan stadig lytte herunder. Vil du abonnere:</p>
|
||||
{% if indbygget.platform == "android" %}
|
||||
<p style="margin:.4rem 0"><a class="wt-btn wt-btn--primary" href="{{ indbygget.href }}">Åbn i Chrome</a></p>
|
||||
<p style="margin:.4rem 0">Virker det ikke: tryk på ⋮ øverst til højre og vælg "Åbn i ekstern browser".</p>
|
||||
{% else %}
|
||||
<p style="margin:.4rem 0"><strong>1.</strong> Tryk på ⋯ øverst til højre og vælg "Åbn i ekstern browser" (eller "Åbn i Safari"). Så virker knapperne herunder.</p>
|
||||
<p style="margin:.6rem 0 .3rem"><strong>2.</strong> Eller kopiér adressen og tilføj den selv i Apple Podcasts: <em>Bibliotek → ⋯ øverst → Følg en serie via URL</em>.</p>
|
||||
<button class="wt-btn wt-btn--primary" type="button" data-kopier-tekst="{{ udsendelser[0].feed if udsendelser else '' }}">Kopiér adressen</button>
|
||||
{% endif %}
|
||||
</div>
|
||||
{% endif %}
|
||||
<p class="wt-muted" style="margin:.2rem 0 .8rem">{% if delt %}Tryk på din app, så kommer nye episoder af sig selv. Linket er familiens fælles, så del det kun inden for familien.{% else %}Tryk på din app. Nye episoder kommer så af sig selv. Adressen er din egen, så del den ikke; familien får hver sin.{% endif %}</p>
|
||||
@@ -82,6 +97,20 @@
|
||||
</form>
|
||||
{% endif %}
|
||||
<script>
|
||||
function kopierTekst(t, knap) {
|
||||
var ok = function () { knap.textContent = 'Kopieret'; };
|
||||
var fallback = function () {
|
||||
var ta = document.createElement('textarea'); ta.value = t; ta.setAttribute('readonly', '');
|
||||
ta.style.position = 'fixed'; ta.style.top = '0'; ta.style.opacity = '0'; ta.style.fontSize = '16px';
|
||||
document.body.appendChild(ta); ta.focus(); ta.setSelectionRange(0, t.length);
|
||||
try { document.execCommand('copy'); ok(); } catch (e) { prompt('Kopiér adressen:', t); }
|
||||
document.body.removeChild(ta);
|
||||
};
|
||||
if (navigator.clipboard && navigator.clipboard.writeText) navigator.clipboard.writeText(t).then(ok, fallback); else fallback();
|
||||
}
|
||||
document.querySelectorAll('[data-kopier-tekst]').forEach(function (b) {
|
||||
b.addEventListener('click', function () { kopierTekst(b.dataset.kopierTekst, b); });
|
||||
});
|
||||
document.querySelectorAll('[data-kopier]').forEach(function (b) {
|
||||
b.addEventListener('click', function () {
|
||||
var i = document.getElementById(b.dataset.kopier);
|
||||
@@ -92,4 +121,5 @@ document.querySelectorAll('[data-kopier]').forEach(function (b) {
|
||||
});
|
||||
});
|
||||
</script>
|
||||
</div>
|
||||
{% endblock %}
|
||||
|
||||
Reference in New Issue
Block a user