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

fix: thumbnails

Browse source
This commit is contained in:
swve 2023-12-13 17:06:51 +01:00
parent c39d9d5340
commit 3413e6ca73
33 changed files with 161 additions and 740 deletions
Download patch file Download diff file Expand all files Collapse all files

3
apps/web/components/Objects/Editor/Editor.tsx
View file

@ -45,6 +45,7 @@ interface Editor {
activity: any;
orgslug: string
course: any;
org: any;
setContent: (content: string) => void;
}
@ -146,7 +147,7 @@ function Editor(props: Editor) {
<EditorInfoLearnHouseLogo width={25} height={25} src={learnhouseIcon} alt="" />
</Link>
<Link target="_blank" href={`/course/${course_uuid}/edit`}>
<EditorInfoThumbnail src={`${getCourseThumbnailMediaDirectory(props.course.course.org_id, props.course.course.course_uuid, props.course.course.thumbnail)}`} alt=""></EditorInfoThumbnail>
<EditorInfoThumbnail src={`${getCourseThumbnailMediaDirectory(props.org?.org_uuid, props.course.course.course_uuid, props.course.course.thumbnail_image)}`} alt=""></EditorInfoThumbnail>
</Link>
<EditorInfoDocName>
{" "}

3
apps/web/components/Objects/Editor/EditorWrapper.tsx
View file

@ -11,6 +11,7 @@ interface EditorWrapperProps {
activity: any;
course: any
orgslug: string;
org: any;
}
function EditorWrapper(props: EditorWrapperProps): JSX.Element {
@ -49,7 +50,7 @@ function EditorWrapper(props: EditorWrapperProps): JSX.Element {
} else {
return <>
<Toast></Toast>
<Editor orgslug={props.orgslug} course={props.course} activity={props.activity} content={props.content} setContent={setContent} provider={providerState} ydoc={ydocState}></Editor>;
<Editor org={props.org} orgslug={props.orgslug} course={props.course} activity={props.activity} content={props.content} setContent={setContent} provider={providerState} ydoc={ydocState}></Editor>;
</>
}

4
apps/web/components/Objects/Other/CollectionThumbnail.tsx
View file

@ -1,4 +1,5 @@
"use client";
import { useOrg } from '@components/Contexts/OrgContext';
import AuthenticatedClientElement from '@components/Security/AuthenticatedClientElement'
import ConfirmationModal from '@components/StyledElements/ConfirmationModal/ConfirmationModal'
import { getUriWithOrg } from '@services/config/config'
@ -21,6 +22,7 @@ const removeCollectionPrefix = (collectionid: string) => {
}
function CollectionThumbnail(props: PropsType) {
const org = useOrg() as any;
return (
<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" >
@ -28,7 +30,7 @@ function CollectionThumbnail(props: PropsType) {
{props.collection.courses.slice(0, 2).map((course: any) => (
<>
<Link href={getUriWithOrg(props.orgslug, "/collection/" + removeCollectionPrefix(props.collection.collection_uuid))}>
<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_uuid, course.thumbnail)})` }}>
<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(org?.org_uuid, course.course_uuid, course.thumbnail_image)})` }}>
</div>
</Link>
</>

20
apps/web/components/Objects/Other/CourseThumbnail.tsx
View file

@ -1,4 +1,5 @@
"use client";
import { useOrg } from '@components/Contexts/OrgContext';
import AuthenticatedClientElement from '@components/Security/AuthenticatedClientElement';
import ConfirmationModal from '@components/StyledElements/ConfirmationModal/ConfirmationModal';
import { getUriWithOrg } from '@services/config/config';
@ -8,7 +9,7 @@ import { revalidateTags } from '@services/utils/ts/requests';
import { FileEdit, X } from 'lucide-react';
import Link from 'next/link';
import { useRouter } from 'next/navigation';
import React from 'react'
import React, { use, useEffect } from 'react'
type PropsType = {
course: any,
@ -22,6 +23,7 @@ function removeCoursePrefix(course_uuid: string) {
function CourseThumbnail(props: PropsType) {
const router = useRouter();
const org = useOrg() as any;
async function deleteCourses(course_uuid: any) {
await deleteCourseFromBackend(course_uuid);
@ -30,12 +32,16 @@ function CourseThumbnail(props: PropsType) {
router.refresh();
}
useEffect(() => {
}, [org]);
return (
<div className='relative'>
<AdminEditsArea course={props.course} orgSlug={props.orgslug} courseId={props.course.course_uuid} deleteCourses={deleteCourses} />
<Link href={getUriWithOrg(props.orgslug, "/course/" + removeCoursePrefix(props.course.course_uuid))}>
<div className="inset-0 ring-1 ring-inset ring-black/10 rounded-xl shadow-xl w-[249px] h-[131px] bg-cover" style={{ backgroundImage: `url(${getCourseThumbnailMediaDirectory(props.course.org_id, props.course.course_uuid, props.course.thumbnail)})` }}>
<div className="inset-0 ring-1 ring-inset ring-black/10 rounded-xl shadow-xl w-[249px] h-[131px] bg-cover" style={{ backgroundImage: `url(${getCourseThumbnailMediaDirectory(org?.org_uuid, props.course.course_uuid, props.course.thumbnail_image)})` }}>
</div>
</Link>
<h2 className="font-bold text-lg w-[250px] py-2">{props.course.name}</h2>
@ -45,10 +51,10 @@ function CourseThumbnail(props: PropsType) {
const AdminEditsArea = (props: { orgSlug: string, courseId: string, course: any, deleteCourses: any }) => {
return (
<AuthenticatedClientElement
action="update"
ressourceType="course"
checkMethod='roles' orgId={props.course.org_id}>
<AuthenticatedClientElement
action="update"
ressourceType="course"
checkMethod='roles' orgId={props.course.org_id}>
<div className="flex space-x-1 absolute justify-center mx-auto z-20 bottom-14 left-1/2 transform -translate-x-1/2">
<Link href={getUriWithOrg(props.orgSlug, "/dash/courses/course/" + removeCoursePrefix(props.courseId) + "/general")}>
<div