mirror of
https://github.com/rzmk/learnhouse.git
synced 2025-12-19 04:19:25 +00:00
Merge pull request #85 from learnhouse/swve/eng-51-fix-input-styling-issues
Fix input styling issues
This commit is contained in:
Badr B
GitHub
commit
d9a9b445dd
10 changed files with 231 additions and 116 deletions
|
|
@ -50,38 +50,64 @@ function NewCollection(params : any) {
|
|||
|
||||
return (
|
||||
<>
|
||||
<Title>Add new</Title>
|
||||
<br />
|
||||
<input type="text" placeholder="Name" value={name} onChange={handleNameChange} />
|
||||
<div className="w-64 m-auto py-20">
|
||||
<Title className="mb-4">Add new</Title>
|
||||
|
||||
<input
|
||||
type="text"
|
||||
placeholder="Name"
|
||||
value={name}
|
||||
onChange={handleNameChange}
|
||||
className="w-full px-4 py-2 mb-4 border rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500"
|
||||
/>
|
||||
|
||||
{!courses ? (
|
||||
<p>Loading...</p>
|
||||
<p className="text-gray-500">Loading...</p>
|
||||
) : (
|
||||
<div>
|
||||
{courses.map((course: any) => (
|
||||
<div key={course.course_id}>
|
||||
<div key={course.course_id} className="flex items-center mb-2">
|
||||
<input
|
||||
type="checkbox"
|
||||
id={course.course_id}
|
||||
name={course.course_id}
|
||||
value={course.course_id}
|
||||
checked={selectedCourses.includes(course.course_id)}
|
||||
onChange={(e) => {
|
||||
const courseId = e.target.value;
|
||||
setSelectedCourses((prevSelectedCourses: string[]) => {
|
||||
if (e.target.checked) {
|
||||
setSelectedCourses([...selectedCourses, e.target.value]);
|
||||
return [...prevSelectedCourses, courseId];
|
||||
} else {
|
||||
setSelectedCourses(selectedCourses.filter((item: any) => item !== e.target.value));
|
||||
return prevSelectedCourses.filter((selectedCourse) => selectedCourse !== courseId);
|
||||
}
|
||||
});
|
||||
}}
|
||||
className="mr-2 focus:outline-none focus:ring-2 focus:ring-blue-500"
|
||||
/>
|
||||
<label htmlFor={course.course_id}>{course.name}</label>
|
||||
<label htmlFor={course.course_id} className="text-sm">{course.name}</label>
|
||||
</div>
|
||||
))}
|
||||
|
||||
</div>
|
||||
)}
|
||||
|
||||
<br />
|
||||
<input type="text" placeholder="Description" value={description} onChange={handleDescriptionChange} />
|
||||
<br />
|
||||
<button onClick={handleSubmit}>Submit</button>
|
||||
<input
|
||||
type="text"
|
||||
placeholder="Description"
|
||||
value={description}
|
||||
onChange={handleDescriptionChange}
|
||||
className="w-full px-4 py-2 mb-4 border rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500"
|
||||
/>
|
||||
|
||||
<button
|
||||
onClick={handleSubmit}
|
||||
className="px-6 py-3 text-white bg-black rounded-lg shadow-md hover:bg-black focus:outline-none focus:ring-2 focus:ring-blue-500"
|
||||
>
|
||||
Submit
|
||||
</button>
|
||||
</div>
|
||||
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -266,7 +266,7 @@ function CourseEdit(params: any) {
|
|||
>
|
||||
Save
|
||||
</button>
|
||||
</Title>-
|
||||
</Title>
|
||||
|
||||
<Modal
|
||||
isDialogOpen={newActivityModal}
|
||||
|
|
|
|||
|
|
@ -45,8 +45,8 @@ const CourseIdPage = (params: any) => {
|
|||
) : (
|
||||
<CoursePageLayout>
|
||||
<br></br>
|
||||
<p>Course</p>
|
||||
<h1>
|
||||
<p className="text-lg font-bold">Course</p>
|
||||
<h1 className="text-3xl font-bold flex items-center space-x-5">
|
||||
{course.course.name}{" "}
|
||||
<Link href={getUriWithOrg(orgslug, "") + `/course/${courseid}/edit`} rel="noopener noreferrer">
|
||||
<Pencil2Icon />
|
||||
|
|
@ -81,38 +81,42 @@ const CourseIdPage = (params: any) => {
|
|||
|
||||
<CourseMetaWrapper>
|
||||
<CourseMetaLeft>
|
||||
<h2>Description</h2>
|
||||
<h2 className="py-3 font-bold">Description</h2>
|
||||
|
||||
<BoxWrapper>
|
||||
<p>{course.course.description}</p>
|
||||
<p className="py-3">{course.course.description}</p>
|
||||
</BoxWrapper>
|
||||
|
||||
<h2>What you will learn</h2>
|
||||
<h2 className="py-3 font-bold">What you will learn</h2>
|
||||
<BoxWrapper>
|
||||
<p>{course.course.learnings == ![] ? "no data" : course.course.learnings}</p>
|
||||
<p className="py-3">{course.course.learnings == ![] ? "no data" : course.course.learnings}</p>
|
||||
</BoxWrapper>
|
||||
|
||||
<h2>Course Lessons</h2>
|
||||
<h2 className="py-3 font-bold">Course Lessons</h2>
|
||||
|
||||
<BoxWrapper>
|
||||
{course.chapters.map((chapter: any) => {
|
||||
return (
|
||||
<>
|
||||
<h3>{chapter.name}</h3>
|
||||
{chapter.activities.map((activity: any) => {
|
||||
<div
|
||||
key={chapter}
|
||||
className="py-3"
|
||||
>
|
||||
<h3 className="text-lg">{chapter.name}</h3>
|
||||
<div
|
||||
className="py-3"
|
||||
>{chapter.activities.map((activity: any) => {
|
||||
return (
|
||||
<>
|
||||
<p>
|
||||
<p className="flex text-md">
|
||||
{activity.name}
|
||||
<Link href={getUriWithOrg(orgslug, "") + `/course/${courseid}/activity/${activity.id.replace("activity_", "")}`} rel="noopener noreferrer">
|
||||
<Link className="pl-3" href={getUriWithOrg(orgslug, "") + `/course/${courseid}/activity/${activity.id.replace("activity_", "")}`} rel="noopener noreferrer">
|
||||
<EyeOpenIcon />
|
||||
</Link>{" "}
|
||||
</p>
|
||||
</>
|
||||
);
|
||||
})}
|
||||
|
||||
</>
|
||||
})}</div>
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
</BoxWrapper>
|
||||
|
|
|
|||
|
|
@ -21,7 +21,7 @@ function SettingsProfilePasswordsPage() {
|
|||
|
||||
{auth.isAuthenticated && (
|
||||
<div>
|
||||
<h1>Account Password</h1>
|
||||
<h1 className='text-3xl font-bold'>Account Password</h1>
|
||||
<br /><br />
|
||||
|
||||
<Formik
|
||||
|
|
@ -35,13 +35,34 @@ function SettingsProfilePasswordsPage() {
|
|||
}}
|
||||
>
|
||||
{({ isSubmitting }) => (
|
||||
<Form>
|
||||
Old Password <Field type="password" name="old_password" /><br />
|
||||
New password <Field type="password" name="new_password" /><br />
|
||||
<button type="submit" disabled={isSubmitting}>
|
||||
<Form className="max-w-md">
|
||||
<label className="block mb-2 font-bold" htmlFor="old_password">
|
||||
Old Password
|
||||
</label>
|
||||
<Field
|
||||
className="w-full px-4 py-2 mb-4 border rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500"
|
||||
type="password"
|
||||
name="old_password"
|
||||
/>
|
||||
|
||||
<label className="block mb-2 font-bold" htmlFor="new_password">
|
||||
New Password
|
||||
</label>
|
||||
<Field
|
||||
className="w-full px-4 py-2 mb-4 border rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500"
|
||||
type="password"
|
||||
name="new_password"
|
||||
/>
|
||||
|
||||
<button
|
||||
type="submit"
|
||||
disabled={isSubmitting}
|
||||
className="px-6 py-3 text-white bg-black rounded-lg shadow-md hover:bg-black focus:outline-none focus:ring-2 focus:ring-blue-500"
|
||||
>
|
||||
Submit
|
||||
</button>
|
||||
</Form>
|
||||
|
||||
)}
|
||||
</Formik>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -12,7 +12,7 @@ function SettingsProfilePage() {
|
|||
|
||||
{auth.isAuthenticated && (
|
||||
<div>
|
||||
<h1>Profile Settings</h1>
|
||||
<h1 className='text-3xl font-bold'>Profile Settings</h1>
|
||||
<br /><br />
|
||||
|
||||
<Formik
|
||||
|
|
@ -27,14 +27,44 @@ function SettingsProfilePage() {
|
|||
}}
|
||||
>
|
||||
{({ isSubmitting }) => (
|
||||
<Form>
|
||||
Full name <Field type="textarea" name="full_name" /><br />
|
||||
Email <Field type="email" name="email" /><br />
|
||||
Bio <Field as="textarea" type="textarea" name="bio" /><br />
|
||||
<button type="submit" disabled={isSubmitting}>
|
||||
<Form className="max-w-md">
|
||||
<label className="block mb-2 font-bold" htmlFor="full_name">
|
||||
Full Name
|
||||
</label>
|
||||
<Field
|
||||
className="w-full px-4 py-2 mb-4 border rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500"
|
||||
type="textarea"
|
||||
name="full_name"
|
||||
/>
|
||||
|
||||
<label className="block mb-2 font-bold" htmlFor="email">
|
||||
Email
|
||||
</label>
|
||||
<Field
|
||||
className="w-full px-4 py-2 mb-4 border rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500"
|
||||
type="email"
|
||||
name="email"
|
||||
/>
|
||||
|
||||
<label className="block mb-2 font-bold" htmlFor="bio">
|
||||
Bio
|
||||
</label>
|
||||
<Field
|
||||
as="textarea"
|
||||
className="w-full px-4 py-2 mb-4 border rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500"
|
||||
type="textarea"
|
||||
name="bio"
|
||||
/>
|
||||
|
||||
<button
|
||||
type="submit"
|
||||
disabled={isSubmitting}
|
||||
className="px-6 py-3 text-white bg-black rounded-lg shadow-md hover:bg-black focus:outline-none focus:ring-2 focus:ring-blue-500"
|
||||
>
|
||||
Submit
|
||||
</button>
|
||||
</Form>
|
||||
|
||||
)}
|
||||
</Formik>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -37,7 +37,7 @@ function SettingsOrganizationGeneral(params: any) {
|
|||
|
||||
return (
|
||||
<div>
|
||||
<h1>Oganization Settings</h1>
|
||||
<h1 className='text-3xl font-bold'>Oganization Settings</h1>
|
||||
<br /><br />
|
||||
{error && <p>Failed to load</p>}
|
||||
{!org ? (
|
||||
|
|
@ -56,14 +56,52 @@ function SettingsOrganizationGeneral(params: any) {
|
|||
>
|
||||
{({ isSubmitting }) => (
|
||||
<Form>
|
||||
Name <Field type="text" name="name" /><br />
|
||||
Description <Field type="text" name="description" /><br />
|
||||
Slug <Field disabled type="text" name="slug" /> <br />
|
||||
Email <Field type="email" name="email" /><br />
|
||||
<button type="submit" disabled={isSubmitting}>
|
||||
<label className="block mb-2 font-bold" htmlFor="name">
|
||||
Name
|
||||
</label>
|
||||
<Field
|
||||
className="w-full px-4 py-2 mb-4 border rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500"
|
||||
type="text"
|
||||
name="name"
|
||||
/>
|
||||
|
||||
<label className="block mb-2 font-bold" htmlFor="description">
|
||||
Description
|
||||
</label>
|
||||
<Field
|
||||
className="w-full px-4 py-2 mb-4 border rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500"
|
||||
type="text"
|
||||
name="description"
|
||||
/>
|
||||
|
||||
<label className="block mb-2 font-bold" htmlFor="slug">
|
||||
Slug
|
||||
</label>
|
||||
<Field
|
||||
className="w-full px-4 py-2 mb-4 border rounded-lg bg-gray-200 cursor-not-allowed"
|
||||
disabled
|
||||
type="text"
|
||||
name="slug"
|
||||
/>
|
||||
|
||||
<label className="block mb-2 font-bold" htmlFor="email">
|
||||
Email
|
||||
</label>
|
||||
<Field
|
||||
className="w-full px-4 py-2 mb-4 border rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500"
|
||||
type="email"
|
||||
name="email"
|
||||
/>
|
||||
|
||||
<button
|
||||
type="submit"
|
||||
disabled={isSubmitting}
|
||||
className="px-6 py-3 text-white bg-black rounded-lg shadow-md hover:bg-gray-800 focus:outline-none focus:ring-2 focus:ring-black"
|
||||
>
|
||||
Submit
|
||||
</button>
|
||||
</Form>
|
||||
|
||||
)}
|
||||
</Formik>
|
||||
)}
|
||||
|
|
|
|||
|
|
@ -21,26 +21,35 @@ const Organizations = () => {
|
|||
<AuthProvider />
|
||||
<Title>
|
||||
Your Organizations{" "}
|
||||
<Link href={"/organizations/new"}>
|
||||
<button>+</button>
|
||||
<Link href="/organizations/new">
|
||||
<button className="bg-blue-500 text-white px-2 py-1 rounded-md hover:bg-blue-600 focus:outline-none">
|
||||
+
|
||||
</button>
|
||||
</Link>
|
||||
</Title>
|
||||
<hr />
|
||||
{error && <p>Failed to load</p>}
|
||||
|
||||
{error && <p className="text-red-500">Failed to load</p>}
|
||||
{!organizations ? (
|
||||
<p>Loading...</p>
|
||||
<p className="text-gray-500">Loading...</p>
|
||||
) : (
|
||||
<div>
|
||||
{organizations.map((org: any) => (
|
||||
<div key={org.org_id}>
|
||||
<div key={org.org_id} className="flex items-center justify-between mb-4">
|
||||
<Link href={getUriWithOrg(org.slug, "/")}>
|
||||
<h3>{org.name}</h3>
|
||||
<h3 className="text-blue-500 cursor-pointer hover:underline">{org.name}</h3>
|
||||
</Link>
|
||||
<button onClick={() => deleteOrganization(org.org_id)}>Delete</button>
|
||||
<button
|
||||
onClick={() => deleteOrganization(org.org_id)}
|
||||
className="px-3 py-1 text-white bg-red-500 rounded-md hover:bg-red-600 focus:outline-none"
|
||||
>
|
||||
Delete
|
||||
</button>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
|
|
|||
|
|
@ -10,38 +10,24 @@ function Activity(props: any) {
|
|||
return (
|
||||
<Draggable key={props.activity.id} draggableId={props.activity.id} index={props.index}>
|
||||
{(provided) => (
|
||||
<ActivityWrapper key={props.activity.id} {...provided.draggableProps} {...provided.dragHandleProps} ref={provided.innerRef}>
|
||||
<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" key={props.activity.id} {...provided.draggableProps} {...provided.dragHandleProps} ref={provided.innerRef}>
|
||||
<p>{props.activity.name} </p>
|
||||
<Link
|
||||
href={getUriWithOrg(props.orgslug, "") + `/course/${props.courseid}/activity/${props.activity.id.replace("activity_", "")}`}
|
||||
|
||||
rel="noopener noreferrer">
|
||||
<EyeOpenIcon/>
|
||||
rel="noopener noreferrer"> <EyeOpenIcon />
|
||||
</Link>
|
||||
<Link
|
||||
href={getUriWithOrg(props.orgslug, "") + `/course/${props.courseid}/activity/${props.activity.id.replace("activity_", "")}/edit`}
|
||||
rel="noopener noreferrer">
|
||||
<Pencil2Icon/>
|
||||
<Pencil2Icon />
|
||||
</Link>
|
||||
</ActivityWrapper>
|
||||
</div>
|
||||
)}
|
||||
</Draggable>
|
||||
);
|
||||
}
|
||||
|
||||
export const ActivityWrapper = styled.div`
|
||||
padding: 2px;
|
||||
padding-left: 17px;
|
||||
list-style: none;
|
||||
/* padding-left: 2px; */
|
||||
background-color: #f4f4f4c5;
|
||||
border-radius: 7px;
|
||||
margin: 15px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
&:hover {
|
||||
background-color: #8c949c7b;
|
||||
}
|
||||
|
||||
`;
|
||||
export default Activity;
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
import React from "react";
|
||||
import styled from "styled-components";
|
||||
import { DragDropContext, Droppable, Draggable } from "react-beautiful-dnd";
|
||||
import Activity, { ActivityWrapper } from "./Activity";
|
||||
import Activity from "./Activity";
|
||||
|
||||
function Chapter(props: any) {
|
||||
return (
|
||||
|
|
@ -14,8 +14,8 @@ function Chapter(props: any) {
|
|||
// isDragging={snapshot.isDragging}
|
||||
key={props.info.list.chapter.id}
|
||||
>
|
||||
<h3>
|
||||
{props.info.list.chapter.name}{" "}
|
||||
<h3 className="pt-3 font-bold text-md">
|
||||
{props.info.list.chapter.name}
|
||||
<button
|
||||
onClick={() => {
|
||||
props.openNewActivityModal(props.info.list.chapter.id);
|
||||
|
|
|
|||
|
|
@ -9,8 +9,9 @@ const nextConfig = {
|
|||
reactStrictMode: false,
|
||||
experimental: {
|
||||
appDir : true,
|
||||
swcFileReading: false,
|
||||
},
|
||||
swcMinify: true,
|
||||
swcMinify: false,
|
||||
compiler: {
|
||||
styledComponents: true,
|
||||
},
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue