fix hight issue on details page
This commit is contained in:
Kurt Hutten
@@ -128,146 +128,148 @@ const ProjectProfile = ({
|
|||||||
projectId={project?.id}
|
projectId={project?.id}
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
<div className="relative flex-grow">
|
<div className="relative flex-grow h-full">
|
||||||
<div className="grid grid-cols-1 md:auto-cols-preview-layout grid-flow-row-dense absolute inset-0">
|
<div className="grid grid-cols-1 md:auto-cols-preview-layout grid-flow-row-dense absolute inset-0 h-full">
|
||||||
{/* Viewer */}
|
{/* Viewer */}
|
||||||
<div className="md:col-start-2 w-full min-h-md">
|
<div className="md:col-start-2 w-full min-h-md">
|
||||||
<ProfileViewer />
|
<ProfileViewer />
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
{/* Side panel */}
|
{/* Side panel */}
|
||||||
<div className="bg-ch-gray-760 font-fira-sans px-20 pt-12 grid grid-flow-row-dense gap-6 overflow-y-auto">
|
<div className="bg-ch-gray-760 font-fira-sans px-20 pt-12 overflow-y-auto">
|
||||||
<h3 className="text-5xl capitalize text-ch-gray-300">
|
<div className="grid grid-flow-row-dense gap-6">
|
||||||
{project?.title.replace(/-/g, ' ')}
|
<h3 className="text-5xl capitalize text-ch-gray-300">
|
||||||
</h3>
|
{project?.title.replace(/-/g, ' ')}
|
||||||
<div className="flex items-center text-gray-100">
|
</h3>
|
||||||
<span className="pr-4">Built with</span>
|
<div className="flex items-center text-gray-100">
|
||||||
<CadPackage
|
<span className="pr-4">Built with</span>
|
||||||
cadPackage={project?.cadPackage}
|
<CadPackage
|
||||||
className="px-3 py-2 rounded"
|
cadPackage={project?.cadPackage}
|
||||||
/>
|
className="px-3 py-2 rounded"
|
||||||
</div>
|
|
||||||
<KeyValue
|
|
||||||
keyName="Description"
|
|
||||||
hide={!project?.description && !canEdit}
|
|
||||||
canEdit={canEdit}
|
|
||||||
onEdit={() => {
|
|
||||||
if (!isEditable) {
|
|
||||||
setIsEditable(true)
|
|
||||||
} else {
|
|
||||||
onEditSaveClick()
|
|
||||||
setIsEditable(false)
|
|
||||||
}
|
|
||||||
}}
|
|
||||||
isEditable={isEditable}
|
|
||||||
>
|
|
||||||
<div
|
|
||||||
id="description-wrap"
|
|
||||||
name="description"
|
|
||||||
className={
|
|
||||||
'markdown-overrides rounded shadow-md bg-white pl-6 pb-2 mt-2' +
|
|
||||||
(isEditable ? ' min-h-md' : '')
|
|
||||||
}
|
|
||||||
onClick={(e) =>
|
|
||||||
e?.target?.id === 'description-wrap' &&
|
|
||||||
editorRef?.current?.focusAtEnd()
|
|
||||||
}
|
|
||||||
>
|
|
||||||
<Editor
|
|
||||||
ref={editorRef}
|
|
||||||
defaultValue={project?.description || ''}
|
|
||||||
readOnly={!isEditable}
|
|
||||||
onChange={onDescriptionChange}
|
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
</KeyValue>
|
<KeyValue
|
||||||
<div className="grid grid-flow-col-dense gap-6">
|
keyName="Description"
|
||||||
<KeyValue keyName="Created on">
|
hide={!project?.description && !canEdit}
|
||||||
{new Date(project?.createdAt).toDateString()}
|
canEdit={canEdit}
|
||||||
|
onEdit={() => {
|
||||||
|
if (!isEditable) {
|
||||||
|
setIsEditable(true)
|
||||||
|
} else {
|
||||||
|
onEditSaveClick()
|
||||||
|
setIsEditable(false)
|
||||||
|
}
|
||||||
|
}}
|
||||||
|
isEditable={isEditable}
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
id="description-wrap"
|
||||||
|
name="description"
|
||||||
|
className={
|
||||||
|
'markdown-overrides rounded shadow-md bg-white pl-6 pb-2 mt-2' +
|
||||||
|
(isEditable ? ' min-h-md' : '')
|
||||||
|
}
|
||||||
|
onClick={(e) =>
|
||||||
|
e?.target?.id === 'description-wrap' &&
|
||||||
|
editorRef?.current?.focusAtEnd()
|
||||||
|
}
|
||||||
|
>
|
||||||
|
<Editor
|
||||||
|
ref={editorRef}
|
||||||
|
defaultValue={project?.description || ''}
|
||||||
|
readOnly={!isEditable}
|
||||||
|
onChange={onDescriptionChange}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
</KeyValue>
|
</KeyValue>
|
||||||
<KeyValue keyName="Updated on">
|
<div className="grid grid-flow-col-dense gap-6">
|
||||||
{new Date(project?.updatedAt).toDateString()}
|
<KeyValue keyName="Created on">
|
||||||
|
{new Date(project?.createdAt).toDateString()}
|
||||||
|
</KeyValue>
|
||||||
|
<KeyValue keyName="Updated on">
|
||||||
|
{new Date(project?.updatedAt).toDateString()}
|
||||||
|
</KeyValue>
|
||||||
|
</div>
|
||||||
|
<KeyValue keyName="Reactions">
|
||||||
|
<EmojiReaction
|
||||||
|
emotes={emotes}
|
||||||
|
userEmotes={userEmotes}
|
||||||
|
onEmote={onReaction}
|
||||||
|
onShowProjectReactions={() => setIsReactionsModalOpen(true)}
|
||||||
|
/>
|
||||||
</KeyValue>
|
</KeyValue>
|
||||||
</div>
|
<KeyValue keyName="Comments" hide={!currentUser}>
|
||||||
<KeyValue keyName="Reactions">
|
{!isEditable && (
|
||||||
<EmojiReaction
|
<>
|
||||||
emotes={emotes}
|
{currentUser && (
|
||||||
userEmotes={userEmotes}
|
<>
|
||||||
onEmote={onReaction}
|
<div className="pt-1">
|
||||||
onShowProjectReactions={() => setIsReactionsModalOpen(true)}
|
<textarea
|
||||||
/>
|
className="w-full h-32 rounded shadow-inner outline-none resize-none p-3 bg-ch-gray-600 placeholder-ch-gray-500 font-fira-sans"
|
||||||
</KeyValue>
|
placeholder="Have a question about this model, or a helpful tip about how to improve it? Remember, be nice!"
|
||||||
<KeyValue keyName="Comments" hide={!currentUser}>
|
value={comment}
|
||||||
{!isEditable && (
|
onChange={({ target }) => setComment(target.value)}
|
||||||
<>
|
/>
|
||||||
{currentUser && (
|
</div>
|
||||||
<>
|
<Button
|
||||||
<div className="pt-1">
|
className={getActiveClasses(
|
||||||
<textarea
|
'ml-auto hover:bg-opacity-100 bg-ch-pink-800 bg-opacity-30 mt-4 mb-6 text-ch-gray-300',
|
||||||
className="w-full h-32 rounded shadow-inner outline-none resize-none p-3 bg-ch-gray-600 placeholder-ch-gray-500 font-fira-sans"
|
{ 'bg-indigo-200': currentUser }
|
||||||
placeholder="Have a question about this model, or a helpful tip about how to improve it? Remember, be nice!"
|
)}
|
||||||
value={comment}
|
shouldAnimateHover
|
||||||
onChange={({ target }) => setComment(target.value)}
|
disabled={!currentUser}
|
||||||
/>
|
iconName={''}
|
||||||
</div>
|
onClick={onCommentClear}
|
||||||
<Button
|
>
|
||||||
className={getActiveClasses(
|
Comment
|
||||||
'ml-auto hover:bg-opacity-100 bg-ch-pink-800 bg-opacity-30 mt-4 mb-6 text-ch-gray-300',
|
</Button>
|
||||||
{ 'bg-indigo-200': currentUser }
|
</>
|
||||||
)}
|
)}
|
||||||
shouldAnimateHover
|
<ul>
|
||||||
disabled={!currentUser}
|
{project?.Comment.map(({ text, user, id, createdAt }) => (
|
||||||
iconName={''}
|
<li key={id} className="mb-5">
|
||||||
onClick={onCommentClear}
|
<div className="flex justify-between">
|
||||||
>
|
<Link
|
||||||
Comment
|
className="flex items-center"
|
||||||
</Button>
|
to={routes.user({ userName: user?.userName })}
|
||||||
</>
|
>
|
||||||
)}
|
<Gravatar
|
||||||
<ul>
|
image={user?.image}
|
||||||
{project?.Comment.map(({ text, user, id, createdAt }) => (
|
className="w-10 h-10 mr-4"
|
||||||
<li key={id} className="mb-5">
|
/>
|
||||||
<div className="flex justify-between">
|
{user?.userName}
|
||||||
<Link
|
</Link>
|
||||||
className="flex items-center"
|
<div className="font-fira-code text-ch-blue-600 flex items-center">
|
||||||
to={routes.user({ userName: user?.userName })}
|
{new Date(createdAt).toDateString()}
|
||||||
>
|
</div>
|
||||||
<Gravatar
|
|
||||||
image={user?.image}
|
|
||||||
className="w-10 h-10 mr-4"
|
|
||||||
/>
|
|
||||||
{user?.userName}
|
|
||||||
</Link>
|
|
||||||
<div className="font-fira-code text-ch-blue-600 flex items-center">
|
|
||||||
{new Date(createdAt).toDateString()}
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
<div className="ml-5 border-l-2 pl-5 my-3 border-ch-gray-300 text-ch-gray-300">
|
||||||
<div className="ml-5 border-l-2 pl-5 my-3 border-ch-gray-300 text-ch-gray-300">
|
{text}
|
||||||
{text}
|
</div>
|
||||||
</div>
|
</li>
|
||||||
</li>
|
))}
|
||||||
))}
|
</ul>
|
||||||
</ul>
|
</>
|
||||||
|
)}
|
||||||
|
</KeyValue>
|
||||||
|
{canEdit && (
|
||||||
|
<>
|
||||||
|
<h4 className="mt-10 text-red-600">Danger Zone</h4>
|
||||||
|
<Button
|
||||||
|
className={getActiveClasses(
|
||||||
|
'mr-auto bg-red-500 mb-6 text-ch-gray-300',
|
||||||
|
{ 'bg-indigo-200': currentUser }
|
||||||
|
)}
|
||||||
|
shouldAnimateHover
|
||||||
|
disabled={!currentUser}
|
||||||
|
iconName={'trash'}
|
||||||
|
onClick={() => setIsConfirmDialogOpen(true)}
|
||||||
|
>
|
||||||
|
Delete Project
|
||||||
|
</Button>
|
||||||
</>
|
</>
|
||||||
)}
|
)}
|
||||||
</KeyValue>
|
</div>
|
||||||
{canEdit && (
|
|
||||||
<>
|
|
||||||
<h4 className="mt-10 text-red-600">Danger Zone</h4>
|
|
||||||
<Button
|
|
||||||
className={getActiveClasses(
|
|
||||||
'mr-auto bg-red-500 mb-6 text-ch-gray-300',
|
|
||||||
{ 'bg-indigo-200': currentUser }
|
|
||||||
)}
|
|
||||||
shouldAnimateHover
|
|
||||||
disabled={!currentUser}
|
|
||||||
iconName={'trash'}
|
|
||||||
onClick={() => setIsConfirmDialogOpen(true)}
|
|
||||||
>
|
|
||||||
Delete Project
|
|
||||||
</Button>
|
|
||||||
</>
|
|
||||||
)}
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
Reference in New Issue
Block a user