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: ui changes

Browse source
This commit is contained in:
swve 2023-07-28 02:12:34 +02:00
parent 5f28420040
commit 3cca78d6e1
9 changed files with 50 additions and 73 deletions
Download patch file Download diff file Expand all files Collapse all files

4
front/app/orgs/[orgslug]/(withmenu)/course/[courseid]/course.tsx
View file

@ -104,7 +104,7 @@ const CourseClient = (props: any) => {
</StyledBox> </StyledBox>
</div> </div>
<div className="course_metadata_right w-64 flex items-center ml-10 h-28 p-3 bg-white rounded-md justify-center drop-shadow-[0_33px_13px_rgba(0,0,0,0.042)] transition-all"> <div className="course_metadata_right w-64 flex items-center ml-10 h-28 p-3 bg-white shadow-sm justify-center ring-1 ring-inset ring-gray-400/10 rounded-lg transition-all">
{course.trail.status == "ongoing" ? ( {course.trail.status == "ongoing" ? (
<button className="py-2 px-5 rounded-xl text-white font-bold h-12 w-[200px] drop-shadow-md bg-red-600 hover:bg-red-700 hover:cursor-pointer" onClick={quitCourse}> <button className="py-2 px-5 rounded-xl text-white font-bold h-12 w-[200px] drop-shadow-md bg-red-600 hover:bg-red-700 hover:cursor-pointer" onClick={quitCourse}>
Quit Course Quit Course
@ -122,7 +122,7 @@ const CourseClient = (props: any) => {
const StyledBox = (props: any) => ( const StyledBox = (props: any) => (
<div className="p-3 pl-10 bg-white rounded-md w-[100%] h-auto drop-shadow-[0_33px_13px_rgba(0,0,0,0.042)]"> <div className="p-3 pl-10 bg-white w-[100%] h-auto ring-1 ring-inset ring-gray-400/10 rounded-lg shadow-sm">
{props.children} {props.children}
</div> </div>

3
front/app/orgs/[orgslug]/(withmenu)/course/[courseid]/edit/page.tsx
View file

@ -255,7 +255,6 @@ function CourseEdit(params: any) {
return ( return (
<> <>
<div <div
className="bg-gradient-radial bg-fixed bg-repeat bg-[0 0],[25px 25px] bg-[50px 50px] bg-[#4744446b 1px]"
> >
<GeneralWrapperStyled> <GeneralWrapperStyled>
<div className="font-bold text-lg flex space-x-2 items-center"> <div className="font-bold text-lg flex space-x-2 items-center">
@ -263,7 +262,7 @@ function CourseEdit(params: any) {
<div <div
className="bg-black hover:bg-gray-950 text-white font-bold p-1 px-2 text-sm rounded flex items-center cursor-pointer space-x-2" className="bg-black z-20 hover:bg-gray-950 text-white font-bold p-1 px-2 text-sm rounded flex items-center cursor-pointer space-x-2 hover:cursor-pointer"
onClick={() => { onClick={() => {
updateChapters(); updateChapters();
}} }}

13
front/components/Objects/Menu/Menu.tsx
View file

@ -16,11 +16,17 @@ export const Menu = async (props: any) => {
return ( return (
<> <>
<div className="h-[60px]"></div> <div className="h-[60px] blur-3xl z-10" style={{
<div className="backdrop-blur-lg bg-white/90 fixed flex top-0 left-0 right-0 h-[60px] items-center pl-5 pr-5 space-x-5 shadow-[0px_4px_16px_rgba(0,0,0,0.02)] z-50"> }}>
<div className="h-[150px] blur-3xl z-0" style={{
background: "radial-gradient(1397.20% 56.18% at 75.99% 53.73%, rgba(253, 182, 207, 0.08) 0%, rgba(3, 110, 146, 0.08) 100%)"
}}></div>
</div>
<div className="backdrop-blur-lg bg-white/90 fixed flex top-0 left-0 right-0 h-[60px] ring-1 ring-inset ring-gray-500/10 items-center px-16 space-x-5 shadow-[0px_4px_16px_rgba(0,0,0,0.03)] z-50">
<div className="logo flex "> <div className="logo flex ">
<Link href={getUriWithOrg(orgslug, "/")}> <Link href={getUriWithOrg(orgslug, "/")}>
<div className="flex w-auto h-9 rounded-md items-center m-auto justify-center" > <div className="flex w-auto h-9 rounded-md items-center m-auto py-1 justify-center" >
{org?.logo ? ( {org?.logo ? (
<img <img
src={`${getOrgLogoMediaDirectory(org.org_id, org?.logo)}`} src={`${getOrgLogoMediaDirectory(org.org_id, org?.logo)}`}
@ -46,6 +52,7 @@ export const Menu = async (props: any) => {
</ClientComponentSkeleton> </ClientComponentSkeleton>
</div> </div>
</div> </div>
</> </>
); );
}; };

2
front/components/Objects/Menu/MenuLinks.tsx
View file

@ -21,7 +21,7 @@ const LinkItem = (props: any) => {
const orgslug = props.orgslug; const orgslug = props.orgslug;
return ( return (
<Link href={getUriWithOrg(orgslug, link)}> <Link href={getUriWithOrg(orgslug, link)}>
<li className="flex space-x-2 items-center text-[#909192] font-medium"> <li className="flex space-x-3 items-center text-[#909192] font-medium">
{props.type == 'courses' && {props.type == 'courses' &&
<> <>
<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg"> <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">

27
front/components/Pages/CourseEdit/Draggables/Activity.tsx
View file

@ -12,26 +12,27 @@ function Activity(props: any) {
<Draggable key={props.activity.id} draggableId={props.activity.id} index={props.index}> <Draggable key={props.activity.id} draggableId={props.activity.id} index={props.index}>
{(provided) => ( {(provided) => (
<div <div
className="flex flex-row items-center py-2 my-3 rounded-md justify-center bg-gray-50 hover:bg-gray-100 space-x-2 w-auto" key={props.activity.id} {...provided.draggableProps} {...provided.dragHandleProps} ref={provided.innerRef}> className="flex flex-row py-2 my-2 rounded-md bg-gray-50 text-gray-500 hover:bg-gray-100 hover:scale-105 hover:shadow space-x-2 w-auto items-center ring-1 ring-inset ring-gray-400/10 shadow-sm transition-all delay-100 duration-75 ease-linear" key={props.activity.id} {...provided.draggableProps} {...provided.dragHandleProps} ref={provided.innerRef}>
<div > <div className="px-3 text-gray-300 space-x-1" >
{props.activity.type === "video" && <Video size={16} />} {props.activity.type === "video" && <Video size={16} />}
{props.activity.type === "documentpdf" && <FileText size={16} />} {props.activity.type === "documentpdf" && <FileText size={16} />}
{props.activity.type === "dynamic" && <Sparkles size={16} />} {props.activity.type === "dynamic" && <Sparkles size={16} />}
</div> </div>
<p className="first-letter:uppercase">{props.activity.name} </p> <div className="grow justify-end text-center items-center">
<Link <p className="first-letter:uppercase">{props.activity.name} </p>
</div>
<div className="flex flex-row space-x-1 px-3"><Link
href={getUriWithOrg(props.orgslug, "") + `/course/${props.courseid}/activity/${props.activity.id.replace("activity_", "")}`} href={getUriWithOrg(props.orgslug, "") + `/course/${props.courseid}/activity/${props.activity.id.replace("activity_", "")}`}
className=" hover:cursor-pointer p-1 rounded-md bg-slate-200" className=" hover:cursor-pointer p-1 rounded-md "
rel="noopener noreferrer">
<EyeOpenIcon className="text-slate-700"/>
</Link>
<Link
href={getUriWithOrg(props.orgslug, "") + `/course/${props.courseid}/activity/${props.activity.id.replace("activity_", "")}/edit`}
className=" hover:cursor-pointer p-1 rounded-md bg-slate-200"
rel="noopener noreferrer"> rel="noopener noreferrer">
<Pencil2Icon className="text-slate-700" /> <EyeOpenIcon className="text-gray-500" />
</Link> </Link>
<Link
href={getUriWithOrg(props.orgslug, "") + `/course/${props.courseid}/activity/${props.activity.id.replace("activity_", "")}/edit`}
className=" hover:cursor-pointer p-1 rounded-md "
rel="noopener noreferrer">
<Pencil2Icon className="text-gray-500" />
</Link></div>
</div> </div>
)} )}
</Draggable> </Draggable>

12
front/components/Pages/CourseEdit/Draggables/Chapter.tsx
View file

@ -2,7 +2,7 @@ import React from "react";
import styled from "styled-components"; import styled from "styled-components";
import { DragDropContext, Droppable, Draggable } from "react-beautiful-dnd"; import { DragDropContext, Droppable, Draggable } from "react-beautiful-dnd";
import Activity from "./Activity"; import Activity from "./Activity";
import { PlusSquare, Trash, Trash2 } from "lucide-react"; import { PlusSquare, Sparkle, Sparkles, Trash, Trash2 } from "lucide-react";
import ConfirmationModal from "@components/StyledElements/ConfirmationModal/ConfirmationModal"; import ConfirmationModal from "@components/StyledElements/ConfirmationModal/ConfirmationModal";
function Chapter(props: any) { function Chapter(props: any) {
@ -14,7 +14,7 @@ function Chapter(props: any) {
{...provided.draggableProps} {...provided.draggableProps}
ref={provided.innerRef} ref={provided.innerRef}
// isDragging={snapshot.isDragging} // isDragging={snapshot.isDragging}
className="backdrop-blur-md" className=""
key={props.info.list.chapter.id} key={props.info.list.chapter.id}
> >
<h3 className="flex space-x-2 pt-3 font-bold text-md items-center"> <h3 className="flex space-x-2 pt-3 font-bold text-md items-center">
@ -36,7 +36,7 @@ function Chapter(props: any) {
<Droppable key={props.info.list.chapter.id} droppableId={props.info.list.chapter.id} type="activity"> <Droppable key={props.info.list.chapter.id} droppableId={props.info.list.chapter.id} type="activity">
{(provided) => ( {(provided) => (
<ActivitiesList {...provided.droppableProps} ref={provided.innerRef}> <ActivitiesList {...provided.droppableProps} ref={provided.innerRef}>
<div className="flex flex-col "> <div className="flex flex-col">
{props.info.list.activities.map((activity: any, index: any) => ( {props.info.list.activities.map((activity: any, index: any) => (
<Activity orgslug={props.orgslug} courseid={props.courseid} key={activity.id} activity={activity} index={index}></Activity> <Activity orgslug={props.orgslug} courseid={props.courseid} key={activity.id} activity={activity} index={index}></Activity>
))} ))}
@ -44,9 +44,9 @@ function Chapter(props: any) {
<div onClick={() => { <div onClick={() => {
props.openNewActivityModal(props.info.list.chapter.id); props.openNewActivityModal(props.info.list.chapter.id);
}} className="flex space-x-2 items-center py-2 my-3 rounded-md justify-center text-slate-500 outline-slate-200 bg-slate-50 hover:cursor-pointer"> }} className="flex space-x-2 items-center py-2 my-3 rounded-md justify-center text-white bg-black hover:cursor-pointer">
<PlusSquare className="" size={17} /> <Sparkles className="" size={17} />
<div className="text-sm mx-auto my-auto items-center font-bold">Add Activity</div> <div className="text-sm mx-auto my-auto items-center font-bold">Add Activity + </div>
</div> </div>
</div> </div>
</ActivitiesList> </ActivitiesList>

54
front/components/Security/HeaderProfileBox.tsx
View file

@ -12,14 +12,14 @@ export const HeaderProfileBox = () => {
return ( return (
<ProfileArea> <ProfileArea>
{!auth.isAuthenticated && ( {!auth.isAuthenticated && (
<UnidentifiedArea> <UnidentifiedArea className="flex text-sm text-gray-700 font-bold p-1.5 px-2 rounded-lg">
<ul> <ul className="flex space-x-3 items-center">
<li> <li>
<Link href="/login"> <Link href="/login">
Login Login
</Link> </Link>
</li> </li>
<li> <li className="bg-black rounded-lg shadow-md p-2 px-3 text-white">
<Link href="/signup"> <Link href="/signup">
Sign up Sign up
</Link> </Link>
@ -28,12 +28,14 @@ export const HeaderProfileBox = () => {
</UnidentifiedArea> </UnidentifiedArea>
)} )}
{auth.isAuthenticated && ( {auth.isAuthenticated && (
<AccountArea> <AccountArea className="space-x-3">
<div>{auth.userInfo.user_object.username}</div> <div className="text-sm text-gray-600 p-1.5 px-2 rounded-lg">{auth.userInfo.user_object.full_name}</div>
<div> <div className="flex -space-x-2 items-center">
<Avvvatars value={auth.userInfo.user_object.user_id} style="shape" /> <div className="py-4">
<Avvvatars size={26} value={auth.userInfo.user_object.user_id} style="shape" />
</div>
<Link className="bg-slate-50 p-1.5 rounded-full" href={"/settings"}><GearIcon fontSize={26} /></Link>
</div> </div>
<Link href={"/settings"}><GearIcon/></Link>
</AccountArea> </AccountArea>
)} )}
</ProfileArea> </ProfileArea>
@ -44,27 +46,7 @@ const AccountArea = styled.div`
padding-right: 20px; padding-right: 20px;
display: flex; display: flex;
place-items: center; place-items: center;
a{
// center the gear icon
display: flex;
place-items: center;
place-content: center;
width: 29px;
height: 29px;
border-radius: 19px;
background: #F5F5F5;
// hover effect
&:hover{
background: #E5E5E5;
}
}
div {
margin-right: 10px;
}
img { img {
width: 29px; width: 29px;
border-radius: 19px; border-radius: 19px;
@ -82,17 +64,5 @@ const UnidentifiedArea = styled.div`
place-items: stretch; place-items: stretch;
flex-grow: 1; flex-grow: 1;
ul {
display: flex;
place-items: center;
list-style: none;
padding-left: 20px;
li {
padding-right: 20px;
font-size: 16px;
font-weight: 500;
color: #171717;
}
}
`; `;

6
front/components/StyledElements/Titles/TypeOfContentTitle.tsx
View file

@ -8,8 +8,8 @@ function TypeOfContentTitle(props: { title: string, type: string }) {
function getLogo() { function getLogo() {
if (props.type == "col") { if (props.type == "col") {
return CollectionsLogo; return CollectionsLogo;
} }
else if (props.type == "cou") { else if (props.type == "cou") {
return CoursesLogo; return CoursesLogo;
} }
@ -21,7 +21,7 @@ function TypeOfContentTitle(props: { title: string, type: string }) {
return ( return (
<div className="home_category_title flex my-5 items-center"> <div className="home_category_title flex my-5 items-center">
<div className="rounded-full ring-1 ring-slate-900/5 shadow-sm p-2 my-auto mr-4"> <div className="ml-2 rounded-full ring-1 ring-slate-900/5 shadow-inner p-2 my-auto mr-4">
<Image className="" src={getLogo()} alt="Courses logo" /> <Image className="" src={getLogo()} alt="Courses logo" />
</div> </div>
<h1 className="font-bold text-2xl">{props.title}</h1> <h1 className="font-bold text-2xl">{props.title}</h1>

2
front/components/StyledElements/Wrappers/GeneralWrapper.tsx
View file

@ -2,7 +2,7 @@
function GeneralWrapperStyled({ children }: { children: React.ReactNode }) { function GeneralWrapperStyled({ children }: { children: React.ReactNode }) {
return ( return (
<div <div
className='max-w-screen-2xl mx-auto px-16 py-5 tracking-tight' className='max-w-screen-2xl mx-auto px-16 py-5 tracking-tight z-50'
>{children}</div> >{children}</div>
) )