Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Browse page fixes #247

Merged
merged 12 commits into from
Feb 7, 2023
Merged

Browse page fixes #247

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
12 commits
Select commit Hold shift + click to select a range
2ad9a9b
fix form and responsive
prokawsar Feb 5, 2023
d6bf860
fix loading sections
prokawsar Feb 5, 2023
8467b7e
fix carousela nd table loading
prokawsar Feb 5, 2023
0dccc1b
swiper installed
prokawsar Feb 6, 2023
38a78cd
Merge branch 'dev' into browse-page-fixes
prokawsar Feb 6, 2023
3d0451e
carousel using swiper
prokawsar Feb 6, 2023
20a5deb
break points
prokawsar Feb 6, 2023
acab438
set width
prokawsar Feb 6, 2023
1673220
make responsive
prokawsar Feb 6, 2023
d1aae69
fix loading state
prokawsar Feb 6, 2023
aeb58ba
temporary data passing
prokawsar Feb 6, 2023
dd6720c
removed unused
prokawsar Feb 6, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -41,6 +41,7 @@
"svelte-preprocess": "^5.0.1",
"svelte-tags-input": "^4.0.0",
"svgo": "^3.0.2",
"swiper": "^9.0.2",
"tailwind-clip-path": "^1.0.0",
"tailwind-scrollbar": "^2.1.0",
"tailwindcss": "^3.2.4",
Expand Down
14 changes: 7 additions & 7 deletions src/lib/components/Browse/CreateChannelDrawer.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -78,11 +78,11 @@
bind:categoryIcons
bind:categories={newChannel.category} />
{:else}
<div class="bg-base-200 w-80 md:w-[30rem] flex flex-col">
<p class="p-3 text-xl mb-5 pb-2 border-purple-500 font-semibold border-b-2">
Create a new channel
</p>
<form on:submit={() => addChannel()}>
<form on:submit={() => addChannel()}>
<div class="bg-base-200 w-80 md:w-[30rem] h-full flex flex-col">
<p class="p-3 text-xl mb-5 pb-2 border-purple-500 font-semibold border-b-2">
Create a new channel
</p>
<div class="flex flex-col p-3">
<p class="text-xs">
When you create a channel, you may allow viewer's to observe your desktop as you host
Expand Down Expand Up @@ -176,8 +176,8 @@
>Cancel</button>
<button type="submit" class="btn btn-primary grow">Add</button>
</div>
</form>
</div>
</div>
</form>
{/if}
</div>
</div>
Expand Down
147 changes: 87 additions & 60 deletions src/lib/components/Browse/Sections/CarouselSection.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,100 +3,127 @@
import IconDrawerChevron from '$lib/assets/icons/drawer/IconDrawerChevron.svelte'
import { goto } from '$app/navigation'
import LoadingCarouselItem from '$lib/components/Browse/Sections/LoadingCarouselItem.svelte'
import { onMount } from 'svelte'
import Swiper, { Navigation } from 'swiper'

export let channels: any = []
import 'swiper/css'

let ref: any,
showback = false
export let channels: any = undefined

$: channels = channels
let swiper: Swiper

const prev = () => {
if (ref) {
showback = ref.scrollLeft > 500
ref.scrollTo({
left: ref.scrollLeft - 500,
behavior: 'smooth'
})
}
}
$: channels = channels.splice(0, 6)

const next = () => {
if (ref) {
showback = true
ref.scrollTo({
left: ref.scrollLeft + 500,
behavior: 'smooth'
})
}
}
onMount(() => {
swiper = new Swiper('.carousel', {
slidesPerView: 3,
spaceBetween: 15,
loop: true,
modules: [Navigation],
navigation: {
nextEl: '.btn-next',
prevEl: '.btn-prev'
},
breakpoints: {
320: {
slidesPerView: 1
},
480: {
slidesPerView: 2
},
800: {
slidesPerView: 3
}
}
})
})
</script>

{#if !channels.error}
<div class="relative">
<!-- {#if showback} -->
<div class="relative" class:hidden={channels != undefined && channels.length == 0}>
<!-- svelte-ignore a11y-click-events-have-key-events -->
<div
class="bg-base-200 rounded-full p-3 absolute top-2/4 left-1 z-10 cursor-pointer"
on:click={prev}>
<div class="bg-base-200 rounded-full p-3 btn-prev absolute top-2/4 left-1 z-10 cursor-pointer">
<IconDrawerLeft />
</div>
<!-- {/if} -->
<div
<!-- <div
bind:this={ref}
class="carousel-content relative w-full flex gap-6 snap-x snap-mandatory overflow-x-auto pt-14 flex-grow">
class="carousel-content relative w-full flex gap-6 snap-x snap-mandatory overflow-x-auto pt-14 flex-grow swiper mySwiper">
{#if channels && channels.length}
<div class="shrink-0 blank-width" />
{#each channels as channel}
<div class="snap-center shrink-0 first:pl-8 last:pr-8 w-[400px] md:w-[600px] rounded-md">
<div class="swiper-wrapper flex w-full gap-6 snap-x snap-mandatory pt-14 ">
{#each channels as channel}
<div class="swiper-slide snap-center shrink-0 w-[400px] md:w-[600px] rounded-md">
<div
class="video-thumbnail"
on:click|preventDefault={() => goto(`/channel/${channel._id}`)}>
<div class="flex flex-row">
<div class="avatar my-3 ml-2">
<div class="w-14 rounded-full">
<img src={channel.avatar} alt="" />
</div>
</div>
<div class="mt-2 ml-2 w-80">
<p class="text-2xl font-semibold">{channel.title}</p>
<p class="truncate">{channel.description}</p>
</div>
</div>
</div>
</div>
{/each}
</div>
{:else}
<div role="status" class="flex flex-row gap-1 animate-pulse">
{#each Array(6) as _, index (index)}
<LoadingCarouselItem />
{/each}
<span class="sr-only">Loading...</span>
</div>
{/if}
</div> -->

{#if channels && channels.length}
<div class="swiper carousel mt-10">
<div class="swiper-wrapper">
{#each channels as channel}
<!-- svelte-ignore a11y-click-events-have-key-events -->
<div
class="video-thumbnail"
class="swiper-slide flex cursor-pointer rounded-md"
on:click|preventDefault={() => goto(`/channel/${channel._id}`)}>
<div class="flex flex-row">
<div class="flex flex-row items-end w-3/4">
<div class="avatar my-3 ml-2">
<div class="w-14 rounded-full">
<img src={channel.avatar} alt="" />
</div>
</div>
<div class="mt-2 ml-2 w-80">
<p class="text-2xl font-semibold">{channel.title}</p>
<div class="mb-2 ml-2 w-full">
<p class="text-2xl truncate font-semibold">{channel.title}</p>
<p class="truncate">{channel.description}</p>
</div>
</div>
</div>
</div>
{/each}
<div class="shrink-0 blank-width" />
{:else}
<div role="status" class="flex flex-row gap-1 animate-pulse">
{#each Array(6) as _, index (index)}
<LoadingCarouselItem />
{/each}
<span class="sr-only">Loading...</span>
</div>
{/if}
</div>

</div>
{:else}
<div role="status" class="flex flex-row gap-1 animate-pulse">
{#each Array(5) as _, index (index)}
<LoadingCarouselItem />
{/each}
<span class="sr-only">Loading...</span>
</div>
{/if}
<!-- svelte-ignore a11y-click-events-have-key-events -->
<div
class="bg-base-200 rounded-full p-3 absolute top-2/4 right-1 cursor-pointer"
on:click={next}>
<div class="bg-base-200 z-10 rounded-full p-3 btn-next absolute top-2/4 right-1 cursor-pointer">
<IconDrawerChevron />
</div>
</div>
{/if}

<style>
.video-thumbnail {
@apply bg-slate-400 w-full h-80 flex items-end text-white rounded-md cursor-pointer;
.swiper-slide {
background: #fff;
display: flex;
}

.blank-width {
width: calc((100% - 600px) / 2);
}

.carousel-content::-webkit-scrollbar {
display: none;
:global(.swiper-slide) {
height: 20rem !important;
}
</style>
6 changes: 4 additions & 2 deletions src/lib/components/Browse/Sections/ChannelSection.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -30,8 +30,10 @@
}
</script>

{#if !channels.error}
<div class="flex flex-col my-4 relative">
{#if channels && !channels.error}
<div
class="flex flex-col my-4 relative"
class:hidden={channels != undefined && channels.length == 0}>
{#if channels && channels.length}
<div class="font-semibold m-3">
<a class="link link-secondary text-lg">{title}</a>
Expand Down
54 changes: 27 additions & 27 deletions src/lib/components/Browse/Sections/LoadingTableItem.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,27 +1,27 @@
<tr>
<td>
<div role="status" class="flex w-full h-12 bg-gray-300 rounded-lg dark:bg-gray-700">
<span class="sr-only">Loading...</span>
</div>
</td>
<td>
<div role="status" class="flex w-full h-12 bg-gray-300 rounded-lg dark:bg-gray-700">
<span class="sr-only">Loading...</span>
</div>
</td>
<td>
<div role="status" class="flex w-full h-12 bg-gray-300 rounded-lg dark:bg-gray-700">
<span class="sr-only">Loading...</span>
</div>
</td>
<td>
<div role="status" class="flex w-full h-12 bg-gray-300 rounded-lg dark:bg-gray-700">
<span class="sr-only">Loading...</span>
</div>
</td>
<td>
<div role="status" class="flex w-full h-12 bg-gray-300 rounded-lg dark:bg-gray-700">
<span class="sr-only">Loading...</span>
</div>
</td>
</tr>
<!-- <tr> -->
<td>
<div role="status" class="flex w-full h-12 bg-gray-300 rounded-lg dark:bg-gray-700">
<span class="sr-only">Loading...</span>
</div>
</td>
<td>
<div role="status" class="flex w-full h-12 bg-gray-300 rounded-lg dark:bg-gray-700">
<span class="sr-only">Loading...</span>
</div>
</td>
<td>
<div role="status" class="flex w-full h-12 bg-gray-300 rounded-lg dark:bg-gray-700">
<span class="sr-only">Loading...</span>
</div>
</td>
<td>
<div role="status" class="flex w-full h-12 bg-gray-300 rounded-lg dark:bg-gray-700">
<span class="sr-only">Loading...</span>
</div>
</td>
<td>
<div role="status" class="flex w-full h-12 bg-gray-300 rounded-lg dark:bg-gray-700">
<span class="sr-only">Loading...</span>
</div>
</td>
<!-- </tr> -->
12 changes: 7 additions & 5 deletions src/lib/components/Browse/Sections/TableSection.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -76,12 +76,14 @@
</tr>
{/each}
{:else}
<div role="status" class="flex flex-row gap-1 animate-pulse">
{#each Array(6) as _, index (index)}
<!-- <div role="status" class="flex flex-row gap-1 animate-pulse"> -->
{#each Array(5) as _, index (index)}
<tr>
<LoadingTableItem />
{/each}
<span class="sr-only">Loading...</span>
</div>
</tr>
{/each}
<span class="sr-only">Loading...</span>
<!-- </div> -->
{/if}
</tbody>
<tfoot>
Expand Down
4 changes: 2 additions & 2 deletions src/lib/components/Browse/Sections/UserSection.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -30,8 +30,8 @@
}
</script>

{#if !users.error}
<div class="flex flex-col my-4 relative">
{#if users && !users.error}
<div class="flex flex-col my-4 relative" class:hidden={users != undefined && users.length == 0}>
{#if users && users.length}
<div class="font-semibold m-3">
<a class="link link-secondary text-lg">{title}</a>
Expand Down
5 changes: 3 additions & 2 deletions src/routes/browse/+page.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,8 @@
let weeklyTitle = 'Weekly topics'
let weeklyChannels: any = []
if (!data.post.weeklyChannels.error) {
weeklyTitle = `Wk${data.post.weeklyChannels.weekly.weekNumber} ${data.post.weeklyChannels.weekly.topic}`
// weeklyTitle = `Wk${data.post.weeklyChannels.weekly.weekNumber} ${data.post.weeklyChannels.weekly.topic}`
weeklyTitle = 'Weekly topics'
weeklyChannels = data.post.weeklyChannels.channels
} else {
weeklyChannels = data.post.weeklyChannels.error
Expand All @@ -27,7 +28,7 @@
})
</script>

<CarouselSection bind:channels={data.post.mostActiveChannels} />
<CarouselSection channels={data.post.tableChannels} />
<SearchChannel />

<ChannelSection title={weeklyTitle} bind:channels={weeklyChannels} />
Expand Down