Skip to content

Project page routes and interface #42

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

Open
wants to merge 6 commits into
base: main
Choose a base branch
from
Open

Project page routes and interface #42

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
e3847b2
Project interface and status enum
Canfry Feb 10, 2024
c9aaa26
Add project routes + project interface + project pages
Canfry Feb 15, 2024
2cd0408
Change layout of project page + create project card list page
Canfry Feb 16, 2024
401bb7a
Add review page + comment on admin page
Canfry Feb 22, 2024
9b415db
project card layouts + add language in forms and cards
Canfry Feb 25, 2024
df6f40f
Add review page
Canfry Mar 14, 2024
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
Empty file added src/lib/components/ProjectCard.svelte
View file
Open in desktop
Empty file.
2 changes: 2 additions & 0 deletions src/lib/components/ProjectCardList.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,2 @@
<script lang="ts">
</script>
10 changes: 10 additions & 0 deletions src/lib/components/layout/nav.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -20,6 +20,10 @@
{
path: '/code-of-conduct',
name: 'Code of Conduct'
},
{
path: '/projects',
name: 'Projects'
}
];

Expand Down Expand Up @@ -93,6 +97,12 @@
>Code of Conduct</a
>
</li>
<li class="mb-6">
<a
href="/projects"
class=" text-lg font-normal font-body hover:text-white hover:underline">Projects</a
>
</li>
<li class="mb-6">
<a
href="https://github.com/Learn-Build-Teach"
Expand Down
7 changes: 4 additions & 3 deletions src/routes/admin/+page.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -22,7 +22,8 @@
<button
class="bg-white text-primary rounded py-2 px-4 text-lg font-bold w-full"
on:click={handleLoadMore}
>
Load More
</button>
>
Load More
</button>
<!-- Need to add here link to go to the review project page /projects/review -->
</article>
153 changes: 153 additions & 0 deletions src/routes/projects/+page.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,153 @@
<script lang="ts">
// Fetching projects with status "accepted" from the database, after admin review.
</script>

<article class="flex flex-col gap-y-8 align-start justify-start">
<h1 class="text-5xl text-center">
Here are the amazing projects built by the community members!
</h1>

<!-- Creating a button to add your own project -->
<a href="/projects/submit" class="mx-auto">
<button
class="rounded-md border border-white py-2 px-3 hover:font-bold hover:border-secondary transition-all ease-out duration-500"
><span class="text-xl font-bold mr-1">+</span>Add your own project</button
></a
>

<!-- Creating a grid to display the projects that need to be reviewd-->
<section class="grid max-sm:grid-cols-1 max-lg:grid-cols-2 grid-cols-3 gap-x-8 gap-y-8 my-8">
<div
class="flex flex-col mb-auto items-start justify-start hover:scale-105 border border-primary hover:border hover:border-secondary rounded-md transition-all ease-out duration-500"
>
<div class="w-full rounded-t-md block">
<img
src="https://images.unsplash.com/photo-1590283603385-17ffb3a7f29f?w=800&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8Mnx8c3RvY2slMjBtYXJrZXR8ZW58MHx8MHx8fDA%3D"
alt="Project cover"
class="object-cover"
/>
</div>
<div
class="py-4 px-3 flex flex-col items-start justify-start gap-y-2 bg-primary rounded-b-md w-full"
>
<h1 class="font-bold text-xl">Easy CSV</h1>
<p class="font-light text-slate-300">Christophe Anfry</p>
<p>A web application that display your csv data into a table.</p>
<p class="text-slate-400 italic font-bold">Typescript</p>
<div class="flex items-center justify-between w-full">
<a
href="https://easy-csv.netlify.app"
target="_blank"
rel="noreferrer"
class="hover:text-secondary text-slate-300">Project ></a
>
<a
href="https://github.com/Canfry/easy-csv"
target="_blank"
rel="noreferrer"
class="hover:text-secondary text-slate-300">Source code ></a
>
</div>
</div>
</div>
<div
class="flex flex-col mb-auto items-start justify-start hover:scale-105 border border-primary hover:border hover:border-secondary rounded-md transition-all ease-out duration-500"
>
<div class="w-full rounded-t-md block">
<img
src="https://images.unsplash.com/photo-1590283603385-17ffb3a7f29f?w=800&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8Mnx8c3RvY2slMjBtYXJrZXR8ZW58MHx8MHx8fDA%3D"
alt="Project cover"
class="object-cover"
/>
</div>
<div
class="py-4 px-3 flex flex-col items-start justify-start gap-y-2 bg-primary rounded-b-md w-full"
>
<h1 class="font-bold text-xl">Easy CSV</h1>
<p class="font-light text-slate-300">Christophe Anfry</p>
<p>A web application that display your csv data into a table.</p>
<p class="text-slate-400 italic font-bold">Typescript</p>
<div class="flex items-center justify-between w-full">
<a
href="https://easy-csv.netlify.app"
target="_blank"
rel="noreferrer"
class="hover:text-secondary text-slate-300">Project ></a
>
<a
href="https://github.com/Canfry/easy-csv"
target="_blank"
rel="noreferrer"
class="hover:text-secondary text-slate-300">Source code ></a
>
</div>
</div>
</div>
<div
class="flex flex-col mb-auto items-start justify-start hover:scale-105 border border-primary hover:border hover:border-secondary rounded-md transition-all ease-out duration-500"
>
<div class="w-full rounded-t-md block">
<img
src="https://images.unsplash.com/photo-1590283603385-17ffb3a7f29f?w=800&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8Mnx8c3RvY2slMjBtYXJrZXR8ZW58MHx8MHx8fDA%3D"
alt="Project cover"
class="object-cover"
/>
</div>
<div
class="py-4 px-3 flex flex-col items-start justify-start gap-y-2 bg-primary rounded-b-md w-full"
>
<h1 class="font-bold text-xl">Easy CSV</h1>
<p class="font-light text-slate-300">Christophe Anfry</p>
<p>A web application that display your csv data into a table.</p>
<p class="text-slate-400 italic font-bold">Typescript</p>
<div class="flex items-center justify-between w-full">
<a
href="https://easy-csv.netlify.app"
target="_blank"
rel="noreferrer"
class="hover:text-secondary text-slate-300">Project ></a
>
<a
href="https://github.com/Canfry/easy-csv"
target="_blank"
rel="noreferrer"
class="hover:text-secondary text-slate-300">Source code ></a
>
</div>
</div>
</div>
<div
class="flex flex-col mb-auto items-start justify-start hover:scale-105 border border-primary hover:border hover:border-secondary rounded-md transition-all ease-out duration-500"
>
<div class="w-full rounded-t-md block">
<img
src="https://images.unsplash.com/photo-1590283603385-17ffb3a7f29f?w=800&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8Mnx8c3RvY2slMjBtYXJrZXR8ZW58MHx8MHx8fDA%3D"
alt="Project cover"
class="object-cover"
/>
</div>
<div
class="py-4 px-3 flex flex-col items-start justify-start gap-y-2 bg-primary rounded-b-md w-full"
>
<h1 class="font-bold text-xl">Easy CSV</h1>
<p class="font-light text-slate-300">Christophe Anfry</p>
<p>A web application that display your csv data into a table.</p>
<p class="text-slate-400 italic font-bold">Typescript</p>
<div class="flex items-center justify-between w-full">
<a
href="https://easy-csv.netlify.app"
target="_blank"
rel="noreferrer"
class="hover:text-secondary text-slate-300">Project ></a
>
<a
href="https://github.com/Canfry/easy-csv"
target="_blank"
rel="noreferrer"
class="hover:text-secondary text-slate-300">Source code ></a
>
</div>
</div>
</div>
</section>
</article>
162 changes: 162 additions & 0 deletions src/routes/projects/review/+page.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,162 @@
<script lang="ts">
// Will be a protected route for admin only.
// Fetching projects with status "pending" from the database.
// If project rejected, it will be deleted from the database.
</script>

<h1 class="text-3xl">Projects submitted</h1>
<section class="grid max-sm:grid-cols-1 max-lg:grid-cols-2 grid-cols-3 gap-x-8 gap-y-8 my-8">
<div
class="flex flex-col mb-auto items-start justify-start hover:scale-105 border border-primary hover:border hover:border-secondary rounded-md transition-all ease-out duration-500"
>
<div class="w-full rounded-t-md block">
<img
src="https://images.unsplash.com/photo-1590283603385-17ffb3a7f29f?w=800&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8Mnx8c3RvY2slMjBtYXJrZXR8ZW58MHx8MHx8fDA%3D"
alt="Project cover"
class="object-cover"
/>
</div>
<div
class="py-4 px-3 flex flex-col items-start justify-start gap-y-2 bg-primary rounded-b-md w-full"
>
<h1 class="font-bold text-xl">Easy CSV</h1>
<p class="font-light text-slate-300">Christophe Anfry</p>
<p>
A web application that display your csv data into a table.A web application that display
your csv data into a table.A web application that display your csv data into a table.A web
application that display your csv data into a table.A web application that display your csv
data into a table.
</p>
<p class="text-slate-400 italic font-bold">Typescript</p>
<div class="flex items-center justify-between w-full">
<a
href="https://easy-csv.netlify.app"
target="_blank"
rel="noreferrer"
class="hover:text-secondary text-slate-300">Project ></a
>
<a
href="https://github.com/Canfry/easy-csv"
target="_blank"
rel="noreferrer"
class="hover:text-secondary text-slate-300">Source code ></a
>
</div>
<div class="flex items-center justify-between w-full">
<button class="py-1 px-2 bg-slate-300 text-primary rounded-md mt-4">Approve</button>
<button class="py-1 px-2 bg-secondary text-white rounded-md mt-4">Reject</button>
</div>
</div>
</div>
<div
class="flex flex-col mb-auto items-start justify-start hover:scale-105 border border-primary hover:border hover:border-secondary rounded-md transition-all ease-out duration-500"
>
<div class="w-full rounded-t-md block">
<img
src="https://images.unsplash.com/photo-1590283603385-17ffb3a7f29f?w=800&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8Mnx8c3RvY2slMjBtYXJrZXR8ZW58MHx8MHx8fDA%3D"
alt="Project cover"
class="object-cover"
/>
</div>
<div
class="py-4 px-3 flex flex-col items-start justify-start gap-y-2 bg-primary rounded-b-md w-full"
>
<h1 class="font-bold text-xl">Easy CSV</h1>
<p class="font-light text-slate-300">Christophe Anfry</p>
<p>A web application that display your csv data into a table.</p>
<p class="text-slate-400 italic font-bold">Typescript</p>
<div class="flex items-center justify-between w-full">
<a
href="https://easy-csv.netlify.app"
target="_blank"
rel="noreferrer"
class="hover:text-secondary text-slate-300">Project ></a
>
<a
href="https://github.com/Canfry/easy-csv"
target="_blank"
rel="noreferrer"
class="hover:text-secondary text-slate-300">Source code ></a
>
</div>
<div class="flex items-center justify-between w-full">
<button class="py-1 px-2 bg-slate-300 text-primary rounded-md mt-4">Approve</button>
<button class="py-1 px-2 bg-secondary text-white rounded-md mt-4">Reject</button>
</div>
</div>
</div>
<div
class="flex flex-col mb-auto items-start justify-start hover:scale-105 border border-primary hover:border hover:border-secondary rounded-md transition-all ease-out duration-500"
>
<div class="w-full rounded-t-md block">
<img
src="https://images.unsplash.com/photo-1590283603385-17ffb3a7f29f?w=800&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8Mnx8c3RvY2slMjBtYXJrZXR8ZW58MHx8MHx8fDA%3D"
alt="Project cover"
class="object-cover"
/>
</div>
<div
class="py-4 px-3 flex flex-col items-start justify-start gap-y-2 bg-primary rounded-b-md w-full"
>
<h1 class="font-bold text-xl">Easy CSV</h1>
<p class="font-light text-slate-300">Christophe Anfry</p>
<p>A web application that display your csv data into a table.</p>
<p class="text-slate-400 italic font-bold">Typescript</p>
<div class="flex items-center justify-between w-full">
<a
href="https://easy-csv.netlify.app"
target="_blank"
rel="noreferrer"
class="hover:text-secondary text-slate-300">Project ></a
>
<a
href="https://github.com/Canfry/easy-csv"
target="_blank"
rel="noreferrer"
class="hover:text-secondary text-slate-300">Source code ></a
>
</div>
<div class="flex items-center justify-between w-full">
<button class="py-1 px-2 bg-slate-300 text-primary rounded-md mt-4">Approve</button>
<button class="py-1 px-2 bg-secondary text-white rounded-md mt-4">Reject</button>
</div>
</div>
</div>
<div
class="flex flex-col mb-auto items-start justify-start hover:scale-105 border border-primary hover:border hover:border-secondary rounded-md transition-all ease-out duration-500"
>
<div class="w-full rounded-t-md block">
<img
src="https://images.unsplash.com/photo-1590283603385-17ffb3a7f29f?w=800&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8Mnx8c3RvY2slMjBtYXJrZXR8ZW58MHx8MHx8fDA%3D"
alt="Project cover"
class="object-cover"
/>
</div>
<div
class="py-4 px-3 flex flex-col items-start justify-start gap-y-2 bg-primary rounded-b-md w-full"
>
<h1 class="font-bold text-xl">Easy CSV</h1>
<p class="font-light text-slate-300">Christophe Anfry</p>
<p>A web application that display your csv data into a table.</p>
<p class="text-slate-400 italic font-bold">Typescript</p>
<div class="flex items-center justify-between w-full">
<a
href="https://easy-csv.netlify.app"
target="_blank"
rel="noreferrer"
class="hover:text-secondary text-slate-300">Project ></a
>
<a
href="https://github.com/Canfry/easy-csv"
target="_blank"
rel="noreferrer"
class="hover:text-secondary text-slate-300">Source code ></a
>
</div>
<div class="flex items-center justify-between w-full">
<button class="py-1 px-2 bg-slate-300 text-primary rounded-md mt-4">Approve</button>
<button class="py-1 px-2 bg-secondary text-white rounded-md mt-4">Reject</button>
</div>
</div>
</div>
</section>
Loading