h3n3/cadhub
1
0
Fork 0
Code Issues 35 Pull Requests Packages Projects Releases Wiki Activity

Merge pull request #449 from Irev-Dev/kurt/safari-flex-gap-435

Browse Source 
Fix safari flexbox/gap issue with grid
This commit was merged in pull request #449.
This commit is contained in:
Kurt Hutten
2021-08-12 05:38:12 +10:00
committed by GitHub
parent 0376d48bb9 000bf4c027
commit 5677855a43
8 changed files with 141 additions and 139 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
app/web/src/components/CadPackage/CadPackage.tsx
View File

@@ -12,7 +12,7 @@ const CadPackage = ({ cadPackage, className = '' }: CadPackageProps) => {
return ( return (
<div <div
className={ className={
`flex items-center gap-2 cursor-default text-gray-100 ${ `grid grid-flow-col-dense items-center gap-2 cursor-default text-gray-100 ${
isOpenScad && 'bg-yellow-800' isOpenScad && 'bg-yellow-800'
} ${isCadQuery && 'bg-ch-blue-300'} bg-opacity-30 ` + className } ${isCadQuery && 'bg-ch-blue-300'} bg-opacity-30 ` + className
} }

2
app/web/src/components/Customizer/Customizer.tsx
View File

@@ -43,7 +43,7 @@ const Customizer = () => {
}`} }`}
> >
<div className="flex justify-between px-6 py-2 items-center"> <div className="flex justify-between px-6 py-2 items-center">
<div className="flex gap-6 items-center"> <div className="grid grid-flow-col-dense gap-6 items-center">
<button className="px-2" onClick={() => setOpen(!open)}> <button className="px-2" onClick={() => setOpen(!open)}>
<Svg <Svg
name="chevron-down" name="chevron-down"

2
app/web/src/components/EditableProjecTitle/EditableProjecTitle.tsx
View File

@@ -84,7 +84,7 @@ const EditableProjectTitle = ({
</span> </span>
<div className="flex items-center h-full"> <div className="flex items-center h-full">
<button <button
className="ml-4 flex p-px px-2 gap-2 bg-ch-purple-400 bg-opacity-30 hover:bg-opacity-80 rounded-sm border border-ch-purple-400" className="ml-4 grid grid-flow-col-dense p-px px-2 gap-2 bg-ch-purple-400 bg-opacity-30 hover:bg-opacity-80 rounded-sm border border-ch-purple-400"
id="rename-button" id="rename-button"
onClick={() => onClick={() =>
updateProject({ variables: { id, input: { title: newTitle } } }) updateProject({ variables: { id, input: { title: newTitle } } })

2
app/web/src/components/EditorMenu/EditorMenu.tsx
View File

@@ -29,7 +29,7 @@ const EditorMenu = () => {
<div className=" text-ch-gray-760 bg-ch-gray-300 cursor-grab px-2 h-full flex items-center"> <div className=" text-ch-gray-760 bg-ch-gray-300 cursor-grab px-2 h-full flex items-center">
<Svg name="drag-grid" className="w-4 p-px" /> <Svg name="drag-grid" className="w-4 p-px" />
</div> </div>
<div className="flex gap-6 px-5"> <div className="grid grid-flow-col-dense gap-6 px-5">
<FileDropdown <FileDropdown
handleRender={onRender} handleRender={onRender}
handleStlDownload={handleStlDownload} handleStlDownload={handleStlDownload}

4
app/web/src/components/EmojiReaction/EmojiReaction.tsx
View File

@@ -59,9 +59,9 @@ const EmojiReaction = ({
<div <div
className={getActiveClasses('relative overflow-hidden pt-1', className)} className={getActiveClasses('relative overflow-hidden pt-1', className)}
> >
<div className="z-10 flex items-center gap-4 h-10"> <div className="z-10 flex items-center h-10">
<div <div
className="h-full w-10" className="h-full w-10 mr-4"
aria-describedby={popoverId} aria-describedby={popoverId}
onClick={togglePopover} onClick={togglePopover}
> >

4
app/web/src/components/IdeHeader/IdeHeader.tsx
View File

@@ -67,7 +67,7 @@ const IdeHeader = ({
<div className="h-16 w-full bg-ch-gray-900 flex justify-between items-center text-lg"> <div className="h-16 w-full bg-ch-gray-900 flex justify-between items-center text-lg">
{_projectId ? ( {_projectId ? (
<div className="h-full text-gray-300 flex items-center"> <div className="h-full text-gray-300 flex items-center">
<span className="bg-ch-gray-700 h-full flex items-center gap-2 px-4"> <span className="bg-ch-gray-700 h-full grid grid-flow-col-dense items-center gap-2 px-4">
<Gravatar <Gravatar
image={project?.user?.image || projectOwnerImage} image={project?.user?.image || projectOwnerImage}
className="w-10" className="w-10"
@@ -91,7 +91,7 @@ const IdeHeader = ({
) : ( ) : (
<div /> <div />
)} )}
<div className="text-gray-200 flex gap-4 mr-4 items-center"> <div className="text-gray-200 grid grid-flow-col-dense gap-4 mr-4 items-center">
{canEdit && !projectTitle && ( {canEdit && !projectTitle && (
<CaptureButton <CaptureButton
canEdit={canEdit} canEdit={canEdit}

260
app/web/src/components/ProjectProfile/ProjectProfile.tsx
View File

@@ -35,12 +35,12 @@ const KeyValue = ({
if (!children || hide) return null if (!children || hide) return null
return ( return (
<div> <div>
<div className="text-ch-blue-600 font-fira-code flex text-sm"> <div className="text-ch-blue-600 font-fira-code flex text-sm whitespace-nowrap">
{keyName} {keyName}
{canEdit && {canEdit &&
(isEditable ? ( (isEditable ? (
<button <button
className="ml-4 flex p-px px-2 gap-2 bg-ch-purple-400 bg-opacity-30 hover:bg-opacity-80 rounded-sm border border-ch-purple-400" className="ml-4 grid grid-flow-col-dense p-px px-2 gap-2 bg-ch-purple-400 bg-opacity-30 hover:bg-opacity-80 rounded-sm border border-ch-purple-400"
id="rename-button" id="rename-button"
onClick={onEdit} onClick={onEdit}
> >
@@ -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 flex flex-col 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="flex 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>

4
app/web/src/components/SocialCardCell/SocialCardCell.tsx
View File

@@ -100,7 +100,7 @@ export const Success = ({
className="h-24 grid bg-ch-gray-900 relative" className="h-24 grid bg-ch-gray-900 relative"
style={{ gridTemplateColumns: '7fr 5fr' }} style={{ gridTemplateColumns: '7fr 5fr' }}
> >
<div className="flex items-center justify-center gap-16"> <div className="grid grid-flow-col-dense items-center justify-center gap-16">
{[ {[
{ {
svg: 'reactions', svg: 'reactions',
@@ -113,7 +113,7 @@ export const Success = ({
count: 0, count: 0,
}, },
].map(({ svg, title, count }, index) => ( ].map(({ svg, title, count }, index) => (
<div className="flex gap-4" key={index}> <div className="grid grid-flow-col-dense gap-4" key={index}>
<Svg className="w-10" name={svg} /> <Svg className="w-10" name={svg} />
<div className="flex flex-col"> <div className="flex flex-col">
<div className="text-3xl">{count}</div> <div className="text-3xl">{count}</div>