ulivargas/classroomio
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

CLASSROOMIO-T-211: Add a content-switcher in the landing page settings for banner

Browse Source 
CLASSROOMIO-T-211: Remove business logic of uploading image

CLASSROOMIO-T-211:Updated the UI of the landingpage settings

Merge branch 'main' into CLASSROOMIO-T-211

CLASSROOMIO-T-211:Added a Content-switch in the landingpage settings


Co-authored-by: Ifeanyi Nwosu <ifeanyi@digdippa.com>
Co-authored-by: Rotimi Best <rotimiibitoyeemma@gmail.com>


Merge-request: CLASSROOMIO-MR-97
Merged-by: Best Admin <best@digdippa.com>
This commit is contained in:
emmanuel
2023-10-11 11:40:08 +00:00
committed by Space Cloud
co-authored by Rotimi Best
parent 27b0284538
commit b676993c2d
11 changed files with 177 additions and 173 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/lib/components/Org/LandingPage/index.svelte
+23 -11
View File
@@ -132,11 +132,17 @@
// Use default data in store if user hasn't added their own content to landing page
function setDefault(landingpage) {
if (landingpage && Object.keys(landingpage).length) {
$landingPageSettings = landingpage;
if (!landingpage?.header?.banner) {
landingpage.header.banner = $landingPageSettings.header.banner;
}
$landingPageSettings = {
...landingpage
};
}
}
$: initPlyr(player, $landingPageSettings.header.video.link);
$: initPlyr(player, $landingPageSettings.header?.banner?.video);
$: setDefault(org.landingpage);
</script>
@@ -155,7 +161,7 @@
<header id="header" class="banner w-full h-[100vh] md:h-[90vh] mb-10 relative">
<Navigation logo={org.avatar_url} orgName={org.name} disableSignup={true} />
<div class="absolute h-[100vh] md:h-[90vh] top-0 w-full opacity-80 z-10 bg-white" />
{#if $landingPageSettings.header.video.show}
{#if $landingPageSettings.header.banner.show}
<div class="flex items-center justify-center md:h-full py-2">
<div
class="md:w-11/12 lg:w-5/6 w-full flex items-center justify-center md:justify-between flex-col-reverse md:flex-row z-20 relative"
@@ -185,24 +191,30 @@
}}
/>
</div>
<div class="w-5/6 md:w-1/2 md:max-w-[650px] flex">
{#if isYouTubeLink($landingPageSettings.header.video.link)}
{#if isYouTubeLink($landingPageSettings.header?.banner?.video) && $landingPageSettings.header.banner.type === 'video'}
<div bind:this={player} id="player" style="width:100%; border-radius:12px">
<iframe
title="Header video"
src={$landingPageSettings.header.video.link}
src={$landingPageSettings.header?.banner?.video}
allowfullscreen
allowtransparency
allow="autoplay"
/>
</div>
{:else}
<video class="w-full rounded-xl" controls loop autoplay>
<source src={$landingPageSettings.header.video.link} type="video/mp4" />
<!-- <source src="/path/to/video.webm" type="video/webm" /> -->
<!-- Captions are optional -->
<track kind="captions" />
</video>
<!-- <video class="w-full rounded-xl" controls loop autoplay>
<source src={$landingPageSettings.header?.banner?.video} type="video/mp4" />
<source src="/path/to/video.webm" type="video/webm" />
Captions are optional
<track kind="captions" />
</video> -->
<img
class="rounded-md"
src={$landingPageSettings.header?.banner?.image}
alt="landing page banner"
/>
{/if}
</div>
</div>