mirror of
https://github.com/iptv-org/iptv-org.github.io.git
synced 2025-05-11 17:40:05 -04:00
Fixes the markup to comply with A11y
This commit is contained in:
parent
309fa25d35
commit
677365c6da
6 changed files with 18 additions and 12 deletions
|
@ -14,7 +14,7 @@
|
|||
class="w-full inline-flex justify-between px-3 py-2 border-gray-200 dark:border-gray-600"
|
||||
class:border-b="{expanded}"
|
||||
>
|
||||
<div class="flex space-x-3 items-center max-w-[90%]">
|
||||
<div class="flex space-x-3 items-center max-w-[90%] w-full">
|
||||
<button
|
||||
class="w-4 h-4 flex justify-center align-middle text-gray-500 hover:text-blue-600 dark:text-gray-100 dark:hover:text-blue-600 shrink-0"
|
||||
on:click="{() => {expanded = !expanded}}"
|
||||
|
@ -36,12 +36,13 @@
|
|||
</svg>
|
||||
</button>
|
||||
<a
|
||||
class="whitespace-nowrap text-sm text-gray-600 dark:text-gray-100 hover:text-blue-500 hover:underline inline-flex align-middle"
|
||||
class="whitespace-nowrap text-sm text-gray-600 dark:text-gray-100 hover:text-blue-500 hover:underline inline-flex align-middle max-w-[85%] w-full"
|
||||
href="{guide.url}"
|
||||
title="{guide.url}"
|
||||
target="_blank"
|
||||
rel="noreferrer"
|
||||
>
|
||||
<span class="truncate max-w-[30rem]">{guide.url}</span
|
||||
<span class="truncate">{guide.url}</span
|
||||
><span
|
||||
class="inline-flex items-center pl-1 text-sm font-semibold text-gray-500 rounded-full"
|
||||
>
|
||||
|
|
|
@ -1,5 +1,5 @@
|
|||
<script>
|
||||
import GuideItem from './GuideItem.svelte'
|
||||
import GuideItem from '~/components/GuideItem.svelte'
|
||||
import { getContext } from 'svelte'
|
||||
const { close } = getContext('simple-modal')
|
||||
|
||||
|
@ -7,7 +7,7 @@
|
|||
export let title = 'Guides'
|
||||
</script>
|
||||
|
||||
<div class="relative px-2 py-[9rem] flex justify-center" on:click|self="{close}">
|
||||
<div class="relative px-2 py-[9rem] flex justify-center" on:keypress on:click|self="{close}">
|
||||
<div class="relative bg-white rounded-md shadow dark:bg-gray-800 w-full max-w-2xl">
|
||||
<div
|
||||
class="flex justify-between items-center py-4 pl-5 pr-4 rounded-t border-b dark:border-gray-700"
|
||||
|
|
|
@ -37,7 +37,7 @@
|
|||
</script>
|
||||
|
||||
<nav
|
||||
class="bg-white border-b border-gray-200 px-2 sm:px-4 py-2.5 dark:border-gray-600 dark:bg-gray-800"
|
||||
class="bg-white border-b border-gray-200 px-2 sm:px-4 py-2.5 dark:border-gray-700 dark:bg-gray-800"
|
||||
>
|
||||
<div class="container flex justify-between items-center max-w-6xl mx-auto px-4 sm:px-2">
|
||||
<div class="flex flex-start items-center basis-[24rem] shrink">
|
||||
|
@ -60,6 +60,7 @@
|
|||
href="https://github.com/iptv-org/iptv"
|
||||
class="block py-2 pr-4 pl-3 text-sm text-gray-700 border-gray-100 hover:bg-gray-50 md:hover:bg-transparent md:border-0 md:hover:text-blue-700 md:p-0 dark:text-gray-400 md:dark:hover:text-white dark:hover:bg-gray-700 dark:hover:text-white md:dark:hover:bg-transparent dark:border-gray-700"
|
||||
target="_blank"
|
||||
rel="noreferrer"
|
||||
>Playlists<span
|
||||
class="inline-flex items-center p-1 mr-2 text-sm font-semibold text-gray-400 rounded-full"
|
||||
>
|
||||
|
@ -80,6 +81,7 @@
|
|||
href="https://github.com/iptv-org/epg"
|
||||
class="block py-2 pr-4 pl-3 text-sm text-gray-700 border-gray-100 hover:bg-gray-50 md:hover:bg-transparent md:border-0 md:hover:text-blue-700 md:p-0 dark:text-gray-400 md:dark:hover:text-white dark:hover:bg-gray-700 dark:hover:text-white md:dark:hover:bg-transparent dark:border-gray-700"
|
||||
target="_blank"
|
||||
rel="noreferrer"
|
||||
>EPG<span
|
||||
class="inline-flex items-center p-1 mr-2 text-sm font-semibold text-gray-400 rounded-full"
|
||||
>
|
||||
|
@ -100,6 +102,7 @@
|
|||
href="https://github.com/iptv-org/database"
|
||||
class="block py-2 pr-4 pl-3 text-sm text-gray-700 border-gray-100 hover:bg-gray-50 md:hover:bg-transparent md:border-0 md:hover:text-blue-700 md:p-0 dark:text-gray-400 md:dark:hover:text-white dark:hover:bg-gray-700 dark:hover:text-white md:dark:hover:bg-transparent dark:border-gray-700"
|
||||
target="_blank"
|
||||
rel="noreferrer"
|
||||
>Database<span
|
||||
class="inline-flex items-center p-1 mr-2 text-sm font-semibold text-gray-400 rounded-full"
|
||||
>
|
||||
|
@ -120,6 +123,7 @@
|
|||
href="https://github.com/iptv-org/api"
|
||||
class="block py-2 pr-4 pl-3 text-sm text-gray-700 border-gray-100 hover:bg-gray-50 md:hover:bg-transparent md:border-0 md:hover:text-blue-700 md:p-0 dark:text-gray-400 md:dark:hover:text-white dark:hover:bg-gray-700 dark:hover:text-white md:dark:hover:bg-transparent dark:border-gray-700"
|
||||
target="_blank"
|
||||
rel="noreferrer"
|
||||
>API<span
|
||||
class="inline-flex items-center p-1 mr-2 text-sm font-semibold text-gray-400 rounded-full"
|
||||
>
|
||||
|
@ -173,6 +177,7 @@
|
|||
href="https://github.com/iptv-org/"
|
||||
class="inline-flex text-gray-500 dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-700 rounded-full text-sm p-2.5 ml-1"
|
||||
target="_blank"
|
||||
rel="noreferrer"
|
||||
aria-label="GitHub"
|
||||
>
|
||||
<svg
|
||||
|
|
|
@ -41,7 +41,7 @@
|
|||
]
|
||||
</script>
|
||||
|
||||
<div class="relative px-2 py-[7rem] flex justify-center" on:click|self="{close}">
|
||||
<div class="relative px-2 py-[7rem] flex justify-center" on:keypress on:click|self="{close}">
|
||||
<div class="relative bg-white rounded-md shadow dark:bg-gray-800 w-full max-w-2xl">
|
||||
<div
|
||||
class="flex justify-between items-center py-4 pl-5 pr-4 rounded-t border-b dark:border-gray-700"
|
||||
|
|
|
@ -14,7 +14,7 @@
|
|||
class="w-full inline-flex justify-between px-3 py-2 border-gray-200 dark:border-gray-600"
|
||||
class:border-b="{expanded}"
|
||||
>
|
||||
<div class="flex space-x-3 items-center max-w-[90%]">
|
||||
<div class="flex space-x-3 items-center max-w-[90%] w-full">
|
||||
<button
|
||||
class="w-4 h-4 flex justify-center align-middle text-gray-500 hover:text-blue-600 dark:text-gray-100 dark:hover:text-blue-600 shrink-0"
|
||||
on:click="{() => {expanded = !expanded}}"
|
||||
|
@ -46,13 +46,13 @@
|
|||
<circle cx="50" cy="50" r="50" />
|
||||
</svg>
|
||||
<a
|
||||
class="whitespace-nowrap text-sm text-gray-600 dark:text-gray-100 hover:text-blue-500 hover:underline inline-flex align-middle"
|
||||
class="whitespace-nowrap text-sm text-gray-600 dark:text-gray-100 hover:text-blue-500 hover:underline inline-flex align-middle max-w-[85%] w-full"
|
||||
href="{stream.url}"
|
||||
title="{stream.url}"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
>
|
||||
<span class="truncate max-w-[30rem]">{stream.url}</span
|
||||
<span class="truncate">{stream.url}</span
|
||||
><span
|
||||
class="inline-flex items-center pl-1 text-sm font-semibold text-gray-500 rounded-full"
|
||||
>
|
||||
|
|
|
@ -1,5 +1,5 @@
|
|||
<script>
|
||||
import StreamItem from './StreamItem.svelte'
|
||||
import StreamItem from '~/components/StreamItem.svelte'
|
||||
import { getContext } from 'svelte'
|
||||
const { close } = getContext('simple-modal')
|
||||
|
||||
|
@ -7,7 +7,7 @@
|
|||
export let title = 'Streams'
|
||||
</script>
|
||||
|
||||
<div class="relative px-2 py-[10rem] flex justify-center" on:click|self="{close}">
|
||||
<div class="relative px-2 py-[10rem] flex justify-center" on:keypress on:click|self="{close}">
|
||||
<div class="relative bg-white rounded-md shadow dark:bg-gray-800 w-full max-w-2xl">
|
||||
<div
|
||||
class="flex justify-between items-center py-4 pl-5 pr-4 rounded-t border-b dark:border-gray-700"
|
||||
|
|
Loading…
Add table
Add a link
Reference in a new issue