feat: add classroomio badge (#239)
* working on the classroomio badge * still working on the classroomio badge * updated the classroomio badge * making some changes * implemented the animation and some other updates * chore: improve styling * increase font weigth --------- Co-authored-by: Rotimi Best <[email protected]>
This commit is contained in:
Em_Dev
@@ -0,0 +1,25 @@
|
||||
<script>
|
||||
import { currentOrg, isFreePlan } from '$lib/utils/store/org';
|
||||
import { ArrowUpRight } from 'carbon-icons-svelte';
|
||||
</script>
|
||||
|
||||
{#if $isFreePlan}
|
||||
<a
|
||||
href={`https://classroomio.com?utm_source=${$currentOrg.siteName}.classroomio.com`}
|
||||
target="_blank"
|
||||
class="group fixed bottom-6 right-9 z-[1000px] hover:no-underline"
|
||||
>
|
||||
<span
|
||||
class="overflow-hidden transition shadow-md duration-500 group-hover:bg-blue-600 group-hover:text-white flex items-center gap-2 dark:text-black bg-white border border-gray-50 group-hover:border-blue-600 rounded-md p-3 text-sm font-normal"
|
||||
>
|
||||
<ArrowUpRight
|
||||
class="
|
||||
absolute group-hover:opacity-100 group-hover:translate-y-0 group-hover:translate-x-0
|
||||
opacity-0 translate-y-full -translate-x-full transition duration-500 text-white"
|
||||
size={24}
|
||||
/>
|
||||
<img src="/logo-192.png" alt="logo" class="group-hover:opacity-0 opacity-100 h-[16px]" />
|
||||
Powered by ClassroomIO
|
||||
</span>
|
||||
</a>
|
||||
{/if}
|
||||
@@ -1,6 +1,7 @@
|
||||
<script lang="ts">
|
||||
import get from 'lodash/get';
|
||||
import { onMount, onDestroy } from 'svelte';
|
||||
import PoweredBy from '$lib/components/Upgrade/PoweredBy.svelte';
|
||||
import pluralize from 'pluralize';
|
||||
import { page } from '$app/stores';
|
||||
import Notebook from 'carbon-icons-svelte/lib/Notebook.svelte'; //note
|
||||
@@ -102,6 +103,10 @@
|
||||
}
|
||||
</script>
|
||||
|
||||
{#if !editMode}
|
||||
<PoweredBy />
|
||||
{/if}
|
||||
|
||||
<div class="flex w-full flex-col items-center bg-white dark:bg-black">
|
||||
<!-- Header Section -->
|
||||
<header id="header" class="banner p- flex w-full items-center justify-center">
|
||||
|
||||
@@ -23,11 +23,11 @@
|
||||
import { getSupabase } from '$lib/utils/functions/supabase';
|
||||
import { courses, courseMetaDeta } from '$lib/components/Courses/store';
|
||||
import { getCourseBySiteName } from '$lib/utils/services/org';
|
||||
import { currentOrg } from '$lib/utils/store/org';
|
||||
import { validateEmail } from '$lib/utils/functions/validateEmail';
|
||||
import TextArea from '$lib/components/Form/TextArea.svelte';
|
||||
import { goto } from '$app/navigation';
|
||||
import { landingPageSettings } from '$lib/components/Org/Settings/store';
|
||||
import PoweredBy from '$lib/components/Upgrade/PoweredBy.svelte';
|
||||
|
||||
export let orgSiteName = '';
|
||||
export let org = {};
|
||||
@@ -152,6 +152,8 @@
|
||||
</title>
|
||||
</svelte:head>
|
||||
|
||||
<PoweredBy />
|
||||
|
||||
{#if !org.landingpage}
|
||||
<PageLoader />
|
||||
{:else}
|
||||
@@ -494,7 +496,7 @@
|
||||
{#if $landingPageSettings.footer.show}
|
||||
<footer
|
||||
id="footer"
|
||||
class="flex justify-center flex-col mt-10 w-full px-5 py-10 md:py-3 border-b-0 border-r-0 border-t border-l-0 border-gray-300"
|
||||
class="flex justify-center items-center flex-col my-10 w-full px-5 py-10 md:py-3 border-b-0 border-r-0 border-t border-l-0 border-gray-300"
|
||||
>
|
||||
<ul class="flex w-11/12 items-center flex-col sm:flex-row">
|
||||
<div class="logo">
|
||||
@@ -517,9 +519,9 @@
|
||||
|
||||
<span class="flex-grow" />
|
||||
|
||||
<div class="flex mt-5 sm:mt-0">
|
||||
<div class="flex mt-5 sm:mt-0 gap-2">
|
||||
{#if $landingPageSettings.footer.facebook}
|
||||
<li class="mx-2">
|
||||
<li>
|
||||
<a
|
||||
href={$landingPageSettings.footer.facebook}
|
||||
target="_blank"
|
||||
@@ -532,7 +534,7 @@
|
||||
</li>
|
||||
{/if}
|
||||
{#if $landingPageSettings.footer.twitter}
|
||||
<li class="mx-2">
|
||||
<li>
|
||||
<a
|
||||
href={$landingPageSettings.footer.twitter}
|
||||
target="_blank"
|
||||
@@ -546,7 +548,7 @@
|
||||
{/if}
|
||||
|
||||
{#if $landingPageSettings.footer.linkedin}
|
||||
<li class="mx-2">
|
||||
<li>
|
||||
<a
|
||||
href={$landingPageSettings.footer.linkedin}
|
||||
target="_blank"
|
||||
@@ -560,12 +562,6 @@
|
||||
{/if}
|
||||
</div>
|
||||
</ul>
|
||||
<p class="text-center mt-5">
|
||||
Powered by
|
||||
<a class="text-primary-600 underline" href="https://classroomio.com" target="_blank"
|
||||
>ClassroomIO</a
|
||||
>
|
||||
</p>
|
||||
</footer>
|
||||
{/if}
|
||||
</main>
|
||||
|
||||
@@ -0,0 +1,25 @@
|
||||
<script>
|
||||
import { currentOrg, isFreePlan } from '$lib/utils/store/org';
|
||||
import { ArrowUpRight } from 'carbon-icons-svelte';
|
||||
</script>
|
||||
|
||||
{#if $isFreePlan}
|
||||
<a
|
||||
href={`https://classroomio.com?utm_source=${$currentOrg.siteName}.classroomio.com`}
|
||||
target="_blank"
|
||||
class="group fixed bottom-6 right-9 z-50 hover:no-underline"
|
||||
>
|
||||
<span
|
||||
class="overflow-hidden transition shadow-md duration-500 group-hover:bg-blue-600 group-hover:text-white flex items-center gap-2 dark:text-black bg-white border border-gray-50 group-hover:border-blue-600 rounded-md p-3 text-sm font-medium"
|
||||
>
|
||||
<ArrowUpRight
|
||||
class="
|
||||
absolute group-hover:opacity-100 group-hover:translate-y-0 group-hover:translate-x-0
|
||||
opacity-0 translate-y-full -translate-x-full transition duration-500 text-white"
|
||||
size={16}
|
||||
/>
|
||||
<img src="/logo-192.png" alt="logo" class="group-hover:opacity-0 opacity-100 h-[16px]" />
|
||||
Powered by ClassroomIO
|
||||
</span>
|
||||
</a>
|
||||
{/if}
|
||||
@@ -2,6 +2,7 @@
|
||||
import { goto } from '$app/navigation';
|
||||
import Community from '$lib/components/Org/Community/index.svelte';
|
||||
import PrimaryButton from '$lib/components/PrimaryButton/index.svelte';
|
||||
import { VARIANTS } from '$lib/components/PrimaryButton/constants';
|
||||
import { currentOrgPath } from '$lib/utils/store/org';
|
||||
import { isMobile } from '$lib/utils/store/useMobile';
|
||||
import Add from 'carbon-icons-svelte/lib/Add.svelte';
|
||||
@@ -24,7 +25,11 @@
|
||||
<Add size={24} />
|
||||
</PrimaryButton>
|
||||
{:else}
|
||||
<PrimaryButton label="Ask Community" onClick={askCommunity} />
|
||||
<PrimaryButton
|
||||
label="Ask Community"
|
||||
variant={VARIANTS.CONTAINED_DARK}
|
||||
onClick={askCommunity}
|
||||
/>
|
||||
{/if}
|
||||
</div>
|
||||
<Community />
|
||||
|
||||
@@ -4,6 +4,7 @@
|
||||
import ArrowLeftIcon from 'carbon-icons-svelte/lib/ArrowLeft.svelte';
|
||||
import { currentOrgPath, currentOrg } from '$lib/utils/store/org';
|
||||
import PrimaryButton from '$lib/components/PrimaryButton/index.svelte';
|
||||
import { VARIANTS } from '$lib/components/PrimaryButton/constants';
|
||||
import { askCommunityValidation } from '$lib/utils/functions/validator';
|
||||
import { supabase } from '$lib/utils/functions/supabase';
|
||||
import { snackbar } from '$lib/components/Snackbar/store';
|
||||
@@ -86,7 +87,7 @@
|
||||
</a>
|
||||
<div class="flex items-center gap-12 justify-between">
|
||||
<h1 class="dark:text-white text-2xl md:text-3xl font-bold">Ask the community</h1>
|
||||
<PrimaryButton label="Publish" onClick={handleSave} />
|
||||
<PrimaryButton label="Publish" variant={VARIANTS.CONTAINED_DARK} onClick={handleSave} />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
Reference in New Issue
Block a user