iptv-org-mirror/iptv-org.github.io
1
0
Fork 0
mirror of https://github.com/iptv-org/iptv-org.github.io.git synced 2025-05-11 01:20:06 -04:00
Code Issues Projects Releases Packages Wiki Activity Actions

Minor design update

Browse source
This commit is contained in:
freearhey 2023-10-05 07:36:07 +03:00
parent 62d1763cfa
commit e6af359db4
14 changed files with 208 additions and 165 deletions
Download patch file Download diff file Expand all files Collapse all files

18
src/components/ActionButton.svelte Normal file
View file

@ -0,0 +1,18 @@
<script>
export let disabled = false
</script>
<button
{...$$restProps}
class="rounded-md transition-colors duration-200 border border-transparent text-white text-sm font-semibold text-center px-4 h-10 flex items-center justify-center w-full"
class:bg-gray-200={disabled}
class:bg-primary-600={!disabled}
class:dark:bg-gray-700={disabled}
class:dark:hover:bg-primary-500={!disabled}
class:hover:bg-gray-200={disabled}
class:hover:bg-primary-700={!disabled}
class:pointer-events-none={disabled}
on:click
>
<slot />
</button>

26
src/components/BottomBar.svelte
View file

@ -2,20 +2,42 @@
import { slide } from 'svelte/transition'
import DownloadButton from '~/components/DownloadButton.svelte'
import SelectAllButton from '~/components/SelectAllButton.svelte'
import Divider from '~/components/Divider.svelte'
import SquareButton from '~/components/SquareButton.svelte'
import { selected } from '~/store'
import { downloadMode } from '~/store'
</script>
<div
transition:slide="{{duration:200}}"
transition:slide={{ duration: 200 }}
class="h-16 bg-white dark:bg-gray-800 fixed bottom-0 left-0 right-0 py-2.5 border-t border-t-gray-100 dark:border-t-gray-800"
>
<div class="flex justify-between items-center max-w-5xl mx-auto px-3">
<div class="text-sm text-gray-600 dark:text-gray-400 font-mono">
Selected {$selected.length.toLocaleString()} channel(s)
</div>
<div class="flex space-x-2">
<div class="flex space-x-2 items-center">
<SelectAllButton />
<DownloadButton />
<Divider />
<SquareButton
on:click={() => {
downloadMode.set(false)
}}
>
<svg
class="w-5 h-5"
fill="currentColor"
viewBox="0 0 20 20"
xmlns="http://www.w3.org/2000/svg"
>
<path
fill-rule="evenodd"
d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z"
clip-rule="evenodd"
></path>
</svg>
</SquareButton>
</div>
</div>
</div>

15
src/components/ChannelPopup.svelte
View file

@ -1,6 +1,8 @@
<script>
import HTMLPreview from '~/components/HTMLPreview.svelte'
import EditButton from '~/components/EditButton.svelte'
import Divider from '~/components/Divider.svelte'
import SquareButton from '~/components/SquareButton.svelte'
import { getContext } from 'svelte'
const { close } = getContext('simple-modal')
@ -14,19 +16,16 @@
<div class="relative px-2 py-24 flex justify-center" on:keypress on:click|self={closePopup}>
<div class="relative bg-white rounded-md shadow dark:bg-gray-800 w-full max-w-[820px]">
<div
class="flex justify-between items-center py-4 pl-5 pr-4 rounded-t border-b dark:border-gray-700"
class="flex justify-between items-center py-3 pl-5 pr-4 rounded-t border-b dark:border-gray-700"
>
<div class="w-2/3 overflow-hidden">
<h3 class="text-l font-medium text-gray-900 dark:text-white">{channel.name}</h3>
</div>
<div class="inline-flex w-1/3 justify-end space-x-3">
<div class="inline-flex w-1/3 justify-end space-x-3 items-center">
<EditButton {channel} />
<button
on:click={closePopup}
type="button"
class="text-gray-400 bg-transparent hover:bg-gray-200 hover:text-gray-900 rounded-full text-sm w-[32px] h-[32px] justify-center ml-auto inline-flex items-center dark:hover:bg-gray-600 dark:hover:text-white"
>
<Divider />
<SquareButton on:click={closePopup}>
<svg
class="w-5 h-5"
fill="currentColor"
@ -39,7 +38,7 @@
clip-rule="evenodd"
></path>
</svg>
</button>
</SquareButton>
</div>
</div>
<div class="overflow-y-auto overflow-x-hidden w-full">

4
src/components/Checkbox.svelte
View file

@ -13,7 +13,7 @@
{#if selected}
<button
class="w-12 h-12 rounded-full text-primary-light hover:text-primary-default dark:hover:text-primary-light transition-colors duration-200 flex items-center justify-center"
class="w-12 h-12 rounded-full text-primary-500 hover:text-primary-600 dark:hover:text-primary-400 transition-colors duration-200 flex items-center justify-center"
area-label="Unselect"
on:click={() => toggle(false)}
>
@ -27,7 +27,7 @@
</button>
{:else if indeterminate}
<button
class="w-12 h-12 rounded-full text-primary-default hover:text-primary-dark dark:hover:text-primary-light transition-colors duration-200 flex items-center justify-center"
class="w-12 h-12 rounded-full text-primary-500 hover:text-primary-600 dark:hover:text-primary-400 transition-colors duration-200 flex items-center justify-center"
area-label="Unselect"
on:click={() => toggle(false)}
>

109
src/components/CreatePlaylistButton.svelte
View file

@ -1,66 +1,63 @@
<script>
import { downloadMode } from '~/store'
import DefaultButton from '~/components/DefaultButton.svelte'
import ActionButton from '~/components/ActionButton.svelte'
import { createEventDispatcher } from 'svelte'
const dispatch = createEventDispatcher()
</script>
<div class="w-14 sm:w-36">
{#if $downloadMode}
<DefaultButton
on:click={() => {
downloadMode.set(false)
dispatch('click')
}}
area-label="Done"
>
<span class="sm:hidden inline">
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24"
fill="currentColor"
class="w-5 h-5"
>
<path
fill-rule="evenodd"
d="M9 1.5H5.625c-1.036 0-1.875.84-1.875 1.875v17.25c0 1.035.84 1.875 1.875 1.875h12.75c1.035 0 1.875-.84 1.875-1.875V12.75A3.75 3.75 0 0016.5 9h-1.875a1.875 1.875 0 01-1.875-1.875V5.25A3.75 3.75 0 009 1.5zm6.61 10.936a.75.75 0 10-1.22-.872l-3.236 4.53L9.53 14.47a.75.75 0 00-1.06 1.06l2.25 2.25a.75.75 0 001.14-.094l3.75-5.25z"
clip-rule="evenodd"
/>
<path
d="M12.971 1.816A5.23 5.23 0 0114.25 5.25v1.875c0 .207.168.375.375.375H16.5a5.23 5.23 0 013.434 1.279 9.768 9.768 0 00-6.963-6.963z"
/>
</svg>
</span>
<span class="hidden sm:inline">Done</span>
</DefaultButton>
{:else}
<button
class="rounded-md bg-primary-default hover:bg-primary-dark hover:dark:bg-primary-light transition-colors duration-200 text-sm text-white font-semibold text-center px-4 h-10 flex items-center w-full justify-center"
on:click={() => {
downloadMode.set(true)
dispatch('click')
}}
area-label="Create Playlist"
>
<span class="sm:hidden inline">
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24"
fill="currentColor"
class="w-5 h-5"
>
<path
fill-rule="evenodd"
d="M5.625 1.5H9a3.75 3.75 0 013.75 3.75v1.875c0 1.036.84 1.875 1.875 1.875H16.5a3.75 3.75 0 013.75 3.75v7.875c0 1.035-.84 1.875-1.875 1.875H5.625a1.875 1.875 0 01-1.875-1.875V3.375c0-1.036.84-1.875 1.875-1.875zM12.75 12a.75.75 0 00-1.5 0v2.25H9a.75.75 0 000 1.5h2.25V18a.75.75 0 001.5 0v-2.25H15a.75.75 0 000-1.5h-2.25V12z"
clip-rule="evenodd"
/>
<path
d="M14.25 5.25a5.23 5.23 0 00-1.279-3.434 9.768 9.768 0 016.963 6.963A5.23 5.23 0 0016.5 7.5h-1.875a.375.375 0 01-.375-.375V5.25z"
/></svg
></span
><span class="hidden sm:inline">Create Playlist</span>
</button>
{/if}
<ActionButton
disabled={$downloadMode}
on:click={() => {
downloadMode.set(true)
dispatch('click')
}}
area-label="Create Playlist"
>
<span class="sm:hidden inline">
<svg
xmlns="http://www.w3.org/2000/svg"
class="w-5 h-5"
fill="currentColor"
viewBox="0 0 512 512"
><path
fill="none"
stroke="currentColor"
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="48"
d="M160 144h288M160 256h288M160 368h288"
/><circle
cx="80"
cy="144"
r="16"
fill="none"
stroke="currentColor"
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="32"
/><circle
cx="80"
cy="256"
r="16"
fill="none"
stroke="currentColor"
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="32"
/><circle
cx="80"
cy="368"
r="16"
fill="none"
stroke="currentColor"
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="32"
/></svg
>
</span><span class="hidden sm:inline">Create Playlist</span>
</ActionButton>
</div>

3
src/components/DefaultButton.svelte
View file

@ -1,5 +1,6 @@
<button
class="rounded-md bg-white hover:bg-gray-200 transition-colors duration-200 border border-gray-200 dark:border-gray-700 dark:bg-gray-700 text-gray-700 dark:text-white dark:hover:bg-gray-600 dark:hover:border-gray-600 text-sm font-semibold text-center px-4 h-10 flex items-center justify-center w-full"
{...$$restProps}
class="rounded-md bg-transparent transition-colors duration-200 border border-gray-200 hover:border-gray-400 dark:border-gray-700 dark:bg-gray-700 text-gray-700 dark:text-white dark:hover:bg-gray-600 dark:hover:border-gray-600 text-sm font-normal text-center px-4 h-10 flex items-center justify-center w-full"
on:click
>
<slot />

1
src/components/Divider.svelte Normal file
View file

@ -0,0 +1 @@
<span class="w-[1px] h-[22px] bg-gray-200 dark:bg-gray-700"></span>

10
src/components/DownloadButton.svelte
View file

@ -1,4 +1,5 @@
<script>
import ActionButton from './ActionButton.svelte'
import { selected, createPlaylist } from '~/store'
function onClick() {
@ -23,12 +24,7 @@
</script>
<div class="w-14 sm:w-44">
<button
class="rounded-md bg-primary-default hover:bg-primary-dark hover:dark:bg-primary-light transition-colors duration-200 text-sm text-white font-semibold px-5 h-10 flex items-center disabled:bg-gray-200 dark:disabled:text-gray-500 dark:disabled:bg-gray-700 w-full justify-center"
on:click={onClick}
disabled={!$selected.length}
area-label="Download Playlist"
>
<ActionButton on:click={onClick} disabled={!$selected.length} area-label="Download Playlist">
<span class="sm:hidden inline">
<svg
fill="currentColor"
@ -50,5 +46,5 @@
</span>
<span class="hidden sm:inline">Download Playlist</span>
</button>
</ActionButton>
</div>

3
src/components/EditButton.svelte
View file

@ -18,11 +18,12 @@
<button
on:click={goToEdit}
type="button"
class="text-gray-400 bg-transparent hover:bg-gray-200 hover:text-gray-900 rounded-full text-sm ml-auto inline-flex items-center dark:hover:bg-gray-600 dark:hover:text-white min-w-[32px] h-[32px] justify-center"
class="text-gray-400 bg-transparent hover:bg-gray-200 hover:text-gray-900 rounded-lg text-sm ml-auto inline-flex items-center dark:hover:bg-gray-600 dark:hover:text-white h-10 justify-center space-x-3 px-3"
>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" class="w-4 h-4">
<path
d="M21.731 2.269a2.625 2.625 0 00-3.712 0l-1.157 1.157 3.712 3.712 1.157-1.157a2.625 2.625 0 000-3.712zM19.513 8.199l-3.712-3.712-12.15 12.15a5.25 5.25 0 00-1.32 2.214l-.8 2.685a.75.75 0 00.933.933l2.685-.8a5.25 5.25 0 002.214-1.32L19.513 8.2z"
/>
</svg>
<span>Edit</span>
</button>

95
src/components/NavBar.svelte
View file

@ -2,7 +2,9 @@
import { query, hasQuery, search } from '~/store'
import { onMount } from 'svelte'
import SearchFieldMini from './SearchFieldMini.svelte'
import Divider from './Divider.svelte'
import CreatePlaylistButton from './CreatePlaylistButton.svelte'
import SquareButton from './SquareButton.svelte'
import { goto } from '$app/navigation'
import { page } from '$app/stores'
@ -44,7 +46,13 @@
>
<div class="flex justify-between items-center mx-auto px-3 w-full max-w-6xl">
<div class="flex flex-start items-center sm:basis-88 shrink">
<a href="/" on:click="{() => {reset()}}" class="flex mr-6">
<a
href="/"
on:click={() => {
reset()
}}
class="flex mr-6"
>
<span
class="text-[1.15rem] text-[#24292f] self-center font-semibold whitespace-nowrap dark:text-white font-mono"
>/iptv-org</span
@ -52,18 +60,54 @@
</a>
<div class="hidden sm:block w-full">
{#if withSearch}
<SearchFieldMini />
<SearchFieldMini />
{/if}
</div>
</div>
<div class="flex flex-end items-center space-x-4">
<div>
<a
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"
<CreatePlaylistButton
on:click={() => {
if ($page.url.pathname !== '/') {
goto('/')
}
}}
/>
</div>
<Divider />
<div class="inline-flex space-x-2">
<SquareButton type="button" on:click={toggleDarkMode} aria-label="Toggle Dark Mode">
<svg
class="w-5 h-5"
class:hidden={dark}
fill="currentColor"
viewBox="0 0 20 20"
xmlns="http://www.w3.org/2000/svg"
aria-hidden="true"
focusable="false"
role="img"
>
<path d="M17.293 13.293A8 8 0 016.707 2.707a8.001 8.001 0 1010.586 10.586z"></path>
</svg>
<svg
class="w-5 h-5"
class:hidden={!dark}
fill="currentColor"
viewBox="0 0 20 20"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M10 2a1 1 0 011 1v1a1 1 0 11-2 0V3a1 1 0 011-1zm4 8a4 4 0 11-8 0 4 4 0 018 0zm-.464 4.95l.707.707a1 1 0 001.414-1.414l-.707-.707a1 1 0 00-1.414 1.414zm2.12-10.607a1 1 0 010 1.414l-.706.707a1 1 0 11-1.414-1.414l.707-.707a1 1 0 011.414 0zM17 11a1 1 0 100-2h-1a1 1 0 100 2h1zm-7 4a1 1 0 011 1v1a1 1 0 11-2 0v-1a1 1 0 011-1zM5.05 6.464A1 1 0 106.465 5.05l-.708-.707a1 1 0 00-1.414 1.414l.707.707zm1.414 8.486l-.707.707a1 1 0 01-1.414-1.414l.707-.707a1 1 0 011.414 1.414zM4 11a1 1 0 100-2H3a1 1 0 000 2h1z"
fill-rule="evenodd"
clip-rule="evenodd"
></path>
</svg>
</SquareButton>
<SquareButton
on:click={() => {
window.open('https://github.com/iptv-org/', '_blank', 'noreferrer')
}}
aria-label="GitHub"
>
<svg
@ -79,42 +123,7 @@
d="M165.9 397.4c0 2-2.3 3.6-5.2 3.6-3.3.3-5.6-1.3-5.6-3.6 0-2 2.3-3.6 5.2-3.6 3-.3 5.6 1.3 5.6 3.6zm-31.1-4.5c-.7 2 1.3 4.3 4.3 4.9 2.6 1 5.6 0 6.2-2s-1.3-4.3-4.3-5.2c-2.6-.7-5.5.3-6.2 2.3zm44.2-1.7c-2.9.7-4.9 2.6-4.6 4.9.3 2 2.9 3.3 5.9 2.6 2.9-.7 4.9-2.6 4.6-4.6-.3-1.9-3-3.2-5.9-2.9zM244.8 8C106.1 8 0 113.3 0 252c0 110.9 69.8 205.8 169.5 239.2 12.8 2.3 17.3-5.6 17.3-12.1 0-6.2-.3-40.4-.3-61.4 0 0-70 15-84.7-29.8 0 0-11.4-29.1-27.8-36.6 0 0-22.9-15.7 1.6-15.4 0 0 24.9 2 38.6 25.8 21.9 38.6 58.6 27.5 72.9 20.9 2.3-16 8.8-27.1 16-33.7-55.9-6.2-112.3-14.3-112.3-110.5 0-27.5 7.6-41.3 23.6-58.9-2.6-6.5-11.1-33.3 2.6-67.9 20.9-6.5 69 27 69 27 20-5.6 41.5-8.5 62.8-8.5s42.8 2.9 62.8 8.5c0 0 48.1-33.6 69-27 13.7 34.7 5.2 61.4 2.6 67.9 16 17.7 25.8 31.5 25.8 58.9 0 96.5-58.9 104.2-114.8 110.5 9.2 7.9 17 22.9 17 46.4 0 33.7-.3 75.4-.3 83.6 0 6.5 4.6 14.4 17.3 12.1C428.2 457.8 496 362.9 496 252 496 113.3 383.5 8 244.8 8zM97.2 352.9c-1.3 1-1 3.3.7 5.2 1.6 1.6 3.9 2.3 5.2 1 1.3-1 1-3.3-.7-5.2-1.6-1.6-3.9-2.3-5.2-1zm-10.8-8.1c-.7 1.3.3 2.9 2.3 3.9 1.6 1 3.6.7 4.3-.7.7-1.3-.3-2.9-2.3-3.9-2-.6-3.6-.3-4.3.7zm32.4 35.6c-1.6 1.3-1 4.3 1.3 6.2 2.3 2.3 5.2 2.6 6.5 1 1.3-1.3.7-4.3-1.3-6.2-2.2-2.3-5.2-2.6-6.5-1zm-11.4-14.7c-1.6 1-1.6 3.6 0 5.9 1.6 2.3 4.3 3.3 5.6 2.3 1.6-1.3 1.6-3.9 0-6.2-1.4-2.3-4-3.3-5.6-2z"
></path>
</svg>
</a>
<button
type="button"
on:click="{toggleDarkMode}"
class="text-gray-500 dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-700 rounded-full text-sm p-2.5"
aria-label="Toggle Dark Mode"
>
<svg
class="w-5 h-5"
class:hidden="{dark}"
fill="currentColor"
viewBox="0 0 20 20"
xmlns="http://www.w3.org/2000/svg"
aria-hidden="true"
focusable="false"
role="img"
>
<path d="M17.293 13.293A8 8 0 016.707 2.707a8.001 8.001 0 1010.586 10.586z"></path>
</svg>
<svg
class="w-5 h-5"
class:hidden="{!dark}"
fill="currentColor"
viewBox="0 0 20 20"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M10 2a1 1 0 011 1v1a1 1 0 11-2 0V3a1 1 0 011-1zm4 8a4 4 0 11-8 0 4 4 0 018 0zm-.464 4.95l.707.707a1 1 0 001.414-1.414l-.707-.707a1 1 0 00-1.414 1.414zm2.12-10.607a1 1 0 010 1.414l-.706.707a1 1 0 11-1.414-1.414l.707-.707a1 1 0 011.414 0zM17 11a1 1 0 100-2h-1a1 1 0 100 2h1zm-7 4a1 1 0 011 1v1a1 1 0 11-2 0v-1a1 1 0 011-1zM5.05 6.464A1 1 0 106.465 5.05l-.708-.707a1 1 0 00-1.414 1.414l.707.707zm1.414 8.486l-.707.707a1 1 0 01-1.414-1.414l.707-.707a1 1 0 011.414 1.414zM4 11a1 1 0 100-2H3a1 1 0 000 2h1z"
fill-rule="evenodd"
clip-rule="evenodd"
></path>
</svg>
</button>
</div>
<div>
<CreatePlaylistButton on:click="{() => {if($page.url.pathname !== '/') {goto('/')}}}" />
</SquareButton>
</div>
</div>
</div>

70
src/components/SelectAllButton.svelte
View file

@ -15,51 +15,41 @@
<div class="w-14 sm:w-44">
{#if isAllSelected}
<DefaultButton on:click="{deselectAll}" area-label="Deselect All ({$selected.length})">
<span class="sm:hidden inline">
<svg
fill="currentColor"
class="w-5 h-5"
viewBox="0 0 538 412"
xmlns="http://www.w3.org/2000/svg"
>
<g clip-path="url(#clip0_3_43)">
<DefaultButton on:click={deselectAll} area-label="Deselect All ({$selected.length})">
<span class="sm:hidden inline">
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24"
fill="currentColor"
class="w-5 h-5"
>
<path
d="M18.6667 74.6747H416.947C427.254 74.6747 435.613 66.3153 435.613 56.008V18.6747C435.613 8.36213 427.254 0.00799561 416.947 0.00799561H18.6667C8.35933 0.00799561 0 8.36213 0 18.6747V56.008C0.0937507 66.2788 8.39587 74.5813 18.6667 74.6747ZM18.6667 211.448H166.48C174.688 211.495 182.568 208.255 188.371 202.453L233.34 158.161C237.043 154.656 238.22 149.245 236.309 144.521C234.397 139.798 229.783 136.724 224.689 136.782H18.6757C13.6705 136.776 8.86841 138.792 5.35801 142.365C1.84761 145.943 -0.0794594 150.776 0.00907389 155.786V193.12C0.00907389 203.427 8.36841 211.786 18.6757 211.786L18.6667 211.448ZM252 274.573H18.6667C8.35933 274.573 0 282.933 0 293.24V330.573C0 340.881 8.35933 349.24 18.6667 349.24H194.133C202.409 349.214 210.336 345.917 216.196 340.079L260.316 295.787C263.884 292.219 264.899 286.828 262.863 282.208C260.951 277.609 256.472 274.604 251.493 274.572L252 274.573ZM18.6667 74.6667H416.947C427.254 74.6667 435.613 66.3073 435.613 56V18.6667C435.613 8.35413 427.254 0 416.947 0H18.6667C8.35933 0 0 8.35413 0 18.6667V56C0.0937507 66.2708 8.39587 74.5733 18.6667 74.6667ZM532.68 352.8C536.05 356.003 537.961 360.451 537.961 365.102C537.961 369.758 536.05 374.206 532.68 377.409L504.508 406.087C501.305 409.462 496.857 411.368 492.206 411.368C487.555 411.368 483.107 409.462 479.904 406.087L408.633 334.816L337.362 406.087H337.357C334.154 409.462 329.706 411.368 325.055 411.368C320.404 411.368 315.956 409.462 312.753 406.087L284.581 377.915C281.211 374.712 279.3 370.264 279.3 365.613C279.3 360.962 281.211 356.514 284.581 353.311L355.852 281.696L284.581 210.425C281.211 207.222 279.3 202.774 279.3 198.123C279.3 193.472 281.211 189.024 284.581 185.821L312.753 157.144V157.138C315.956 153.769 320.404 151.857 325.055 151.857C329.706 151.857 334.154 153.769 337.357 157.138L408.461 228.409L479.904 157.138C483.107 153.769 487.555 151.857 492.206 151.857C496.857 151.857 501.305 153.769 504.508 157.138L532.68 185.31C536.05 188.513 537.961 192.961 537.961 197.613C537.961 202.264 536.05 206.711 532.68 209.915L461.41 281.696L532.68 352.8Z"
fill-rule="evenodd"
d="M12 2.25c-5.385 0-9.75 4.365-9.75 9.75s4.365 9.75 9.75 9.75 9.75-4.365 9.75-9.75S17.385 2.25 12 2.25zm3 10.5a.75.75 0 000-1.5H9a.75.75 0 000 1.5h6z"
clip-rule="evenodd"
/>
</g>
<defs>
<clipPath id="clip0_3_43">
<rect width="537.961" height="411.368" />
</clipPath>
</defs>
</svg>
</span>
<span class="hidden sm:inline">Deselect All ({$selected.length})</span>
</DefaultButton>
</svg>
</span>
<span class="hidden sm:inline">Deselect All ({$selected.length})</span>
</DefaultButton>
{:else}
<DefaultButton on:click="{selectAll}" area-label="Select All ({$filteredChannels.length})">
<span class="sm:hidden inline">
<svg
fill="currentColor"
class="w-5 h-5"
viewBox="0 0 543 411"
xmlns="http://www.w3.org/2000/svg"
>
<g clip-path="url(#clip0_1_4)">
<DefaultButton on:click={selectAll} area-label="Select All ({$filteredChannels.length})">
<span class="sm:hidden inline">
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24"
fill="currentColor"
class="w-5 h-5"
>
<path
d="M160.199 329.208C151.017 316.344 146.141 300.896 146.281 285.088C146.349 281.833 145.058 278.697 142.719 276.432C140.469 274.052 137.339 272.697 134.063 272.703H18.6667C13.6927 272.744 8.93227 274.76 5.43227 278.302C1.96867 281.838 0.0208 286.588 0 291.536V328.869C0 339.182 8.35933 347.536 18.6667 347.536H149.672C162.063 347.536 166.813 337.692 160.199 329.208ZM18.6788 74.6615L416.959 74.6667C427.266 74.6667 435.626 66.3073 435.626 56V18.6667C435.626 8.35413 427.266 0 416.959 0H18.6788C8.37148 0 0.012146 8.35413 0.012146 18.6667V56C0.553813 65.9375 8.73095 73.74 18.6788 73.8173V74.6615ZM18.6788 211.435H177.852L177.847 211.44C183.988 212.075 190.118 210.174 194.816 206.18C207.04 193.341 223.254 185.029 240.806 182.592C264.046 179.55 287.39 187.373 304.103 203.8C308.176 208.044 309.535 211.268 322.598 211.268H334.988C343.228 211.326 351.139 208.018 356.879 202.107L401.682 156.967C405.223 153.394 406.291 148.05 404.395 143.388C402.416 138.669 397.801 135.597 392.687 135.581H19.3536C14.3744 135.628 9.61399 137.638 6.11399 141.185C2.60879 144.763 0.66093 149.581 0.68693 154.592V191.925C0.681722 201.972 8.62961 210.222 18.6709 210.592L18.6788 211.435ZM537.439 209.404L370.119 376.55L342.291 405.228C339.093 408.545 334.681 410.42 330.072 410.42C325.463 410.42 321.051 408.545 317.853 405.228L210.437 297.812C207.119 294.614 205.245 290.202 205.245 285.593C205.245 280.983 207.119 276.572 210.437 273.374L238.776 245.035C241.969 241.77 246.344 239.926 250.911 239.926C255.474 239.926 259.849 241.77 263.042 245.035L329.391 311.895L485.004 156.282C488.202 152.964 492.614 151.089 497.223 151.089C501.833 151.089 506.244 152.964 509.442 156.282L537.442 184.626C540.812 187.923 542.656 192.47 542.536 197.183C542.562 201.777 540.723 206.183 537.442 209.402L537.439 209.404Z"
fill-rule="evenodd"
d="M2.25 12c0-5.385 4.365-9.75 9.75-9.75s9.75 4.365 9.75 9.75-4.365 9.75-9.75 9.75S2.25 17.385 2.25 12zm13.36-1.814a.75.75 0 10-1.22-.872l-3.236 4.53L9.53 12.22a.75.75 0 00-1.06 1.06l2.25 2.25a.75.75 0 001.14-.094l3.75-5.25z"
clip-rule="evenodd"
/>
</g>
<defs>
<clipPath id="clip0_1_4">
<rect width="542.541" height="410.42" />
</clipPath>
</defs>
</svg>
</span>
</svg>
</span>
<span class="hidden sm:inline">Select All ({$filteredChannels.length})</span>
</DefaultButton>
<span class="hidden sm:inline">Select All ({$filteredChannels.length})</span>
</DefaultButton>
{/if}
</div>

8
src/components/SquareButton.svelte Normal file
View file

@ -0,0 +1,8 @@
<button
{...$$restProps}
type="button"
on:click
class="text-gray-500 dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-700 rounded-lg text-sm h-10 w-10 flex items-center justify-center"
>
<slot />
</button>

4
src/pages/channel/+page.svelte
View file

@ -47,7 +47,7 @@
{#if channel}
<div class="border rounded-md border-gray-200 dark:border-gray-700 dark:bg-gray-800 bg-white">
<div
class="flex justify-between items-center py-4 pl-5 pr-4 rounded-t border-b dark:border-gray-700"
class="flex justify-between items-center py-3 pl-5 pr-4 rounded-t border-b dark:border-gray-700"
>
<div class="w-1/3 overflow-hidden">
<h1 class="text-l font-medium text-gray-900 dark:text-white">{channel.name}</h1>
@ -64,7 +64,7 @@
{#if streams.length}
<div class="border rounded-md border-gray-200 dark:border-gray-700 dark:bg-gray-800 bg-white">
<div
class="flex justify-between items-center py-4 pl-5 pr-4 rounded-t border-b dark:border-gray-700"
class="flex justify-between items-center py-3 pl-5 pr-4 rounded-t border-b dark:border-gray-700"
>
<div class="w-1/3 overflow-hidden">
<h3 class="text-l font-medium text-gray-900 dark:text-white">Streams</h3>

7
tailwind.config.cjs
View file

@ -11,9 +11,10 @@ module.exports = {
},
colors: {
primary: {
light: '#2f4368',
default: '#293b5b',
dark: '#253552'
400: '#61a5fa',
500: '#3b82f6',
600: '#2664ec',
700: '#1d4ed8'
}
}
}