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

fix: Melt UI bug & autoscroll bug on the landing page (#220)

Browse Source 
* fix: scroll function

* remove console logs

* code refactoring

* remove melt ui

* PR Fix

* PR Fix

* code refactoring
This commit is contained in:
Adeyemi Adetunji
2024-03-28 10:23:49 +01:00
committed by GitHub
parent 347a85abfa
commit d8af3a304c
4 changed files with 8879 additions and 3165 deletions
Download Patch File Download Diff File Expand all files Collapse all files
apps/classroomio-com/package.json
+33 -35
View File
@@ -1,37 +1,35 @@
{ {
"name": "classroomio-com", "name": "classroomio-com",
"version": "0.0.1", "version": "0.0.1",
"private": true, "private": true,
"scripts": { "scripts": {
"dev": "vite dev", "dev": "vite dev",
"build": "vite build", "build": "vite build",
"preview": "vite preview", "preview": "vite preview",
"check": "svelte-kit sync && svelte-check --tsconfig ./jsconfig.json", "check": "svelte-kit sync && svelte-check --tsconfig ./jsconfig.json",
"check:watch": "svelte-kit sync && svelte-check --tsconfig ./jsconfig.json --watch", "check:watch": "svelte-kit sync && svelte-check --tsconfig ./jsconfig.json --watch",
"prepare": "svelte-kit sync" "prepare": "svelte-kit sync"
}, },
"devDependencies": { "devDependencies": {
"@melt-ui/pp": "^0.1.2", "@sveltejs/adapter-auto": "^2.0.0",
"@melt-ui/svelte": "^0.43.0", "@sveltejs/kit": "^1.20.4",
"@sveltejs/adapter-auto": "^2.0.0", "autoprefixer": "^10.4.15",
"@sveltejs/kit": "^1.20.4", "carbon-icons-svelte": "^12.3.0",
"autoprefixer": "^10.4.15", "mdsvex": "^0.11.0",
"carbon-icons-svelte": "^12.3.0", "postcss": "^8.4.29",
"mdsvex": "^0.11.0", "svelte": "^4.0.5",
"postcss": "^8.4.29", "svelte-check": "^3.4.3",
"svelte": "^4.0.5", "svelte-sequential-preprocessor": "^2.0.1",
"svelte-check": "^3.4.3", "tailwindcss": "^3.3.3",
"svelte-sequential-preprocessor": "^2.0.1", "typescript": "^5.0.0",
"tailwindcss": "^3.3.3", "vite": "^4.4.2"
"typescript": "^5.0.0", },
"vite": "^4.4.2" "type": "module",
}, "dependencies": {
"type": "module", "posthog-node": "^3.1.3",
"dependencies": { "rehype-slug": "^6.0.0",
"posthog-node": "^3.1.3", "remark-toc": "^9.0.0",
"rehype-slug": "^6.0.0", "remark-unwrap-images": "^4.0.0",
"remark-toc": "^9.0.0", "shiki": "^0.14.7"
"remark-unwrap-images": "^4.0.0", }
"shiki": "^0.14.7"
}
} }
apps/classroomio-com/src/lib/Navigation/Navigation.svelte
+33 -59
View File
@@ -1,5 +1,4 @@
<script> <script>
import { createDropdownMenu, melt } from '@melt-ui/svelte';
import ChevronDown from 'carbon-icons-svelte/lib/ChevronDown.svelte'; import ChevronDown from 'carbon-icons-svelte/lib/ChevronDown.svelte';
import TextAlignJustify from 'carbon-icons-svelte/lib/TextAlignJustify.svelte'; import TextAlignJustify from 'carbon-icons-svelte/lib/TextAlignJustify.svelte';
import CloseLarge from 'carbon-icons-svelte/lib/CloseLarge.svelte'; import CloseLarge from 'carbon-icons-svelte/lib/CloseLarge.svelte';
@@ -8,20 +7,10 @@
import ForumIcon from 'carbon-icons-svelte/lib/Forum.svelte'; import ForumIcon from 'carbon-icons-svelte/lib/Forum.svelte';
import CourseIcon from '$lib/Icons/CourseIcon.svelte'; import CourseIcon from '$lib/Icons/CourseIcon.svelte';
import MapCenter from 'carbon-icons-svelte/lib/MapCenter.svelte'; import MapCenter from 'carbon-icons-svelte/lib/MapCenter.svelte';
import { goto } from '$app/navigation';
let showsubNav = false; let showsubNav = false;
let showNav = false; let showNav = false;
const {
elements: { menu, item, trigger, arrow }
} = createDropdownMenu({
positioning: {
placement: 'bottom-start',
fitViewport: true
}
});
function handleShow() { function handleShow() {
showsubNav = !showsubNav; showsubNav = !showsubNav;
} }
@@ -30,17 +19,6 @@
showNav = !showNav; showNav = !showNav;
} }
function scroll(key = '') {
const el = document.getElementById(key);
setTimeout(() => {
el?.scrollIntoView({
behavior: 'smooth',
block: 'start',
inline: 'nearest'
});
}, 50);
}
const superpowers = [ const superpowers = [
{ {
key: 'coursemanagement', key: 'coursemanagement',
@@ -85,45 +63,41 @@
<nav class="w-[40%] hidden md:hidden lg:block"> <nav class="w-[40%] hidden md:hidden lg:block">
<ul class="flex items-center justify-between w-full gap-2"> <ul class="flex items-center justify-between w-full gap-2">
<!-- --> <!-- -->
<li class="text-gray-800 font-semibold text-sm cursor-pointer"> <li class="text-gray-800 font-semibold text-sm cursor-pointer relative">
<button use:melt={$trigger} class="flex items-center" <button class="flex items-center" on:click={() => (showNav = !showNav)}
>Our Superpowers <ChevronDown class="ml-2" /></button >Our Superpowers <ChevronDown class="ml-2" /></button
> >
<div {#if showNav}
use:melt={$menu} <div
class="w-[28%] border px-5 py-5 rounded-[30px] shadow-slate-700 mt-2 z-[3001] ml-[-30px] bg-white" class="absolute w-[24rem] top-10 -left-10 border px-5 py-5 rounded-[30px] shadow-slate-700 z-[3001] bg-white"
> >
{#each superpowers as superpower} {#each superpowers as superpower}
<button <a
use:melt={$item} class="flex justify-between items-center w-full rounded-lg hover:bg-slate-100 p-5 mb-4"
class="flex justify-between items-center w-full rounded-lg hover:bg-slate-100 p-5 mb-4" href="/#{superpower.key}"
on:m-click={() => { on:click={() => (showNav = !showNav)}
goto('/'); >
setTimeout(() => scroll(superpower.key), 200); {#if superpower.key === 'coursemanagement'}
}} <CourseIcon />
> {:else if superpower.key === 'customization'}
{#if superpower.key === 'coursemanagement'} <MapCenter size={24} />
<CourseIcon /> {:else if superpower.key === 'collaboration'}
{:else if superpower.key === 'customization'} <ForumIcon size={24} />
<MapCenter size={24} /> {:else if superpower.key === 'ai'}
{:else if superpower.key === 'collaboration'} <MachineLearningModel size={24} />
<ForumIcon size={24} /> {/if}
{:else if superpower.key === 'ai'} <div class="w-[86%] text-start">
<MachineLearningModel size={24} /> <h3 class="font-semibold text-sm text-gray-700">
{/if} {superpower.title}
<div class="w-[86%] text-start"> </h3>
<h3 class="font-semibold text-sm text-gray-700"> <p class="font-normal text-sm text-gray-600">
{superpower.title} {superpower.subtitle}
</h3> </p>
<p class="font-normal text-sm text-gray-600"> </div>
{superpower.subtitle} </a>
</p> {/each}
</div> </div>
</button> {/if}
{/each}
<div use:melt={$arrow} />
</div>
</li> </li>
<!-- More Features --> <!-- More Features -->
<!-- <a href="/#morefeatures"> <!-- <a href="/#morefeatures">
apps/classroomio-com/svelte.config.js
+1 -2
View File
@@ -1,4 +1,3 @@
import { preprocessMeltUI } from '@melt-ui/pp';
import sequence from 'svelte-sequential-preprocessor'; import sequence from 'svelte-sequential-preprocessor';
import adapter from '@sveltejs/adapter-auto'; import adapter from '@sveltejs/adapter-auto';
import { vitePreprocess } from '@sveltejs/kit/vite'; import { vitePreprocess } from '@sveltejs/kit/vite';
@@ -37,6 +36,6 @@ const config = {
adapter: adapter() adapter: adapter()
}, },
extensions: ['.svelte', '.md'], extensions: ['.svelte', '.md'],
preprocess: sequence([vitePreprocess(), preprocessMeltUI(), mdsvex(mdsvexOptions)]) preprocess: sequence([vitePreprocess(), mdsvex(mdsvexOptions)])
}; };
export default config; export default config;
pnpm-lock.yaml
Generated
+8812 -3069
View File
File diff suppressed because it is too large Load Diff