+1

CHANGELOG.md

Reviewed

··· 2 2 3 3 ## Next 4 4 - Make search case insensitive 5 5 + - Show Channels page as grid 5 6 - Load 100 videos at a time instead of 50 6 7 - Allow selecting bottom row diagonally with the down arrow key 7 8

+7 -13

src/routes/channels/+page.svelte

Reviewed

··· 85 85 {visibleIndexes.length} of {channels.length} 86 86 </div> 87 87 </header> 88 88 - <div bind:this={channels_scroll_el} class="channels"> 88 88 + <div bind:this={channels_scroll_el} class="channels grid"> 89 89 {#each channels as channel, i} 90 90 {@const lowerName = channel.name.toLowerCase()} 91 91 <div 92 92 class="channel selectable" 93 93 - class:show={filter === '' || lowerName.includes(filter.toLowerCase())} 93 93 + hidden={filter !== '' && !lowerName.includes(filter.toLowerCase())} 94 94 > 95 95 <img src={channel.icon} alt="" /> 96 96 <div class="details"> ··· 101 101 class="title">{channel.name}</a 102 102 > 103 103 <div class="content"> 104 104 - <!-- <span>{channel.id}</span> --> 105 104 <span 106 105 >Check for videos after {new Date(Number(channel.from_time)).toLocaleString()}</span 107 106 > ··· 161 160 .selectable 162 161 user-select: text 163 162 .channels 164 164 - flex-wrap: wrap 165 165 - padding: 0px var(--page-padding) 166 166 - height: 0px 167 167 - flex-grow: 1 168 168 - overflow-y: auto 163 163 + padding: var(--page-padding) 164 164 + gap: var(--page-padding) 165 165 + display: grid 166 166 + grid-template-columns: repeat(auto-fill, minmax(550px, 1fr)) 169 167 .channel 170 170 - flex-grow: 1 168 168 + display: flex 171 169 align-items: center 172 170 border-radius: 7px 173 171 transition: border 120ms $ease-md 174 172 padding: 15px 5px 175 173 border: 1px solid transparent 176 176 - display: none 177 177 - &.show 178 178 - display: flex 179 174 @media screen and (min-width: 600px) 180 175 padding: 15px 181 181 - margin: 15px 0px 182 176 background-color: hsla(223, 33%, 64%, 0.05) 183 177 box-shadow: 0px 4px 8px 0px hsla(0, 0%, 0%, 0.1) 184 178 border: 1px solid hsla(0, 0%, 50%, 0.04)