Skip to content

Commit

Permalink
Merge pull request #247 from CodeCrowCorp/browse-page-fixes
Browse files Browse the repository at this point in the history 
Browse page fixes
  • Loading branch information
@gagansuie
gagansuie authored Feb 7, 2023
2 parents 8f5cd34 + dd6720c commit ea5a02e
Show file tree
Hide file tree
Showing 8 changed files with 138 additions and 105 deletions.
1 change: 1 addition & 0 deletions package.json
View file
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
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
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
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
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
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
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
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

0 comments on commit ea5a02e

Please sign in to comment.