rzmk/learnhouse
1
0
Fork 0
mirror of https://github.com/rzmk/learnhouse.git synced 2025-12-19 04:19:25 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

feat: refactor + home improvements

Browse source
This commit is contained in:
swve 2023-09-21 17:55:28 +02:00
parent 832394777e
commit ebb8c64fd7
8 changed files with 187 additions and 115 deletions
Download patch file Download diff file Expand all files Collapse all files

38
front/components/Objects/Other/CollectionThumbnail.tsx
View file

@ -22,23 +22,23 @@ const removeCollectionPrefix = (collectionid: string) => {
function CollectionThumbnail(props: PropsType) {
return (
<div className='relative'>
<CollectionAdminEditsArea orgslug={props.orgslug} org_id={props.org_id} collection_id={props.collection.collection_id} collection={props.collection} />
<Link href={getUriWithOrg(props.orgslug, "/collection/" + removeCollectionPrefix(props.collection.collection_id))}>
<div className="space-y-2 inset-0 ring-1 ring-inset my-auto ring-black/10 rounded-xl shadow-xl relative w-[249px] h-[180px] bg-cover flex flex-col items-center justify-center bg-indigo-600 font-bold text-zinc-50" >
<div className="flex -space-x-5">
{props.collection.courses.slice(0, 3).map((course: any) => (
<Link key={course.course_id} href={getUriWithOrg(props.orgslug, "/course/" + course.course_id.substring(7))}>
<div className="inset-0 rounded-xl shadow-xl bg-cover w-24 h-12 justify-center ring-indigo-800 ring-4" style={{ backgroundImage: `url(${getCourseThumbnailMediaDirectory(props.collection.org_id, course.course_id, course.thumbnail)})` }}>
<div className=''>
<div className="flex flex-row space-x-4 inset-0 ring-1 ring-inset my-auto ring-black/10 rounded-xl shadow-xl relative w-[300px] h-[80px] bg-cover items-center justify-center bg-indigo-600 font-bold text-zinc-50" >
<div className="flex -space-x-5">
{props.collection.courses.slice(0, 2).map((course: any) => (
<>
<Link href={getUriWithOrg(props.orgslug, "/collection/" + removeCollectionPrefix(props.collection.collection_id))}>
<div className="inset-0 rounded-full shadow-2xl bg-cover w-12 h-8 justify-center ring-indigo-800 ring-4" style={{ backgroundImage: `url(${getCourseThumbnailMediaDirectory(props.collection.org_id, course.course_id, course.thumbnail)})` }}>
</div>
</Link>
))}
</div>
<h1 className="font-bold text-lg justify-center">{props.collection.name}</h1>
</>
))}
</div>
</Link>
<Link href={getUriWithOrg(props.orgslug, "/collection/" + removeCollectionPrefix(props.collection.collection_id))}>
<h1 className="font-bold text-md justify-center">{props.collection.name}</h1>
</Link>
<CollectionAdminEditsArea orgslug={props.orgslug} org_id={props.org_id} collection_id={props.collection.collection_id} collection={props.collection} />
</div>
</div>
)
}
@ -51,24 +51,20 @@ const CollectionAdminEditsArea = (props: any) => {
await revalidateTags(["collections"], props.orgslug);
// reload the page
router.refresh();
router.push(getUriWithOrg(props.orgslug, "/collections"));
// refresh page (FIX for Next.js BUG)
//window.location.reload();
}
return (
<AuthenticatedClientElement orgId={props.org_id} checkMethod='roles'>
<div className="flex space-x-1 absolute justify-center mx-auto z-20 bottom-4 left-1/2 transform -translate-x-1/2">
<div className="flex space-x-1 justify-center mx-auto z-20 ">
<ConfirmationModal
confirmationMessage="Are you sure you want to delete this collection?"
confirmationButtonText="Delete Collection"
dialogTitle={"Delete " + props.collection.name + " ?"}
dialogTrigger={
<div
className="hover:cursor-pointer p-1 px-4 bg-red-600 rounded-xl items-center justify-center flex shadow-lg"
className="hover:cursor-pointer p-1 px-2 bg-red-600 rounded-xl items-center justify-center flex shadow-xl"
rel="noopener noreferrer">
<X size={15} className="text-rose-200 font-bold" />
<X size={10} className="text-rose-200 font-bold" />
</div>}
functionToExecute={() => deleteCollectionUI(props.collection_id)}
status='warning'