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

Fix safari flexbox/gap issue with grid #449

Merged
Irev-Dev merged 2 commits from kurt/safari-flex-gap-435 into main 2021-08-11 21:38:12 +02:00
Conversation 5 Commits 2 Files Changed 8 +141 -139
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 (
<div
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'
} ${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 gap-6 items-center">
<div className="grid grid-flow-col-dense gap-6 items-center">
<button className="px-2" onClick={() => setOpen(!open)}>
<Svg
name="chevron-down"

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

@@ -86,7 +86,7 @@ const EditableProjectTitle = ({
</span>
<div className="flex items-center h-full">
<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"
onClick={() =>
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">
<Svg name="drag-grid" className="w-4 p-px" />
</div>
<div className="flex gap-6 px-5">
<div className="grid grid-flow-col-dense gap-6 px-5">
<FileDropdown
handleRender={onRender}
handleStlDownload={handleStlDownload}

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

@@ -59,9 +59,9 @@ const EmojiReaction = ({
<div
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
className="h-full w-10"
className="h-full w-10 mr-4"
aria-describedby={popoverId}
onClick={togglePopover}
Irev-Dev commented 2021-08-11 11:31:18 +02:00 (Migrated from github.com)
Review
Copy Link

The one place grid grid-flow-col-dense didn't work, I'm sure if i dug into it It probably would have been a simple fix to get it to work, but just used margin instead.

The one place `grid grid-flow-col-dense` didn't work, I'm sure if i dug into it It probably would have been a simple fix to get it to work, but just used margin instead.
>

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">
{_projectId ? (
<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
image={project?.user?.image || projectOwnerImage}
className="w-10"
@@ -91,7 +91,7 @@ const IdeHeader = ({
) : (
<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 && (
<CaptureButton
canEdit={canEdit}

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

@@ -35,12 +35,12 @@ const KeyValue = ({
if (!children || hide) return null
return (
<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}
Irev-Dev commented 2021-08-11 11:32:40 +02:00 (Migrated from github.com)
Review
Copy Link

"created on" was wraping to a new line even though it had lots of space, not sure if related or another safari quirk.

"created on" was wraping to a new line even though it had lots of space, not sure if related or another safari quirk.
Irev-Dev commented 2021-08-11 12:19:13 +02:00 (Migrated from github.com)
Review
Copy Link

turn off whitespace to see this diff correctly

turn off whitespace to see this diff correctly
franknoirot commented 2021-08-11 18:02:41 +02:00 (Migrated from github.com)
Review
Copy Link

Yeah I saw that happening in your initial screenshot, I bet it had to do with the width of these elements compressing as flex children or something. We can keep an eye on it when getting the mobile view to look good, nowrap can cause layout weirdness on narrow devices.

Yeah I saw that happening in your initial screenshot, I bet it had to do with the width of these elements compressing as flex children or something. We can keep an eye on it when getting the mobile view to look good, `nowrap` can cause layout weirdness on narrow devices.
{canEdit &&
(isEditable ? (
<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"
onClick={onEdit}
>
@@ -128,146 +128,148 @@ const ProjectProfile = ({
projectId={project?.id}
/>
</div>
<div className="relative flex-grow">
<div className="grid grid-cols-1 md:auto-cols-preview-layout grid-flow-row-dense absolute inset-0">
<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 h-full">
{/* Viewer */}
<div className="md:col-start-2 w-full min-h-md">
<ProfileViewer />
Irev-Dev commented 2021-08-11 11:33:46 +02:00 (Migrated from github.com)
Review
Copy Link

slighty different to the rest in that it's flow-row not flow-col, this fixed the gap at the bottom of the page too.

slighty different to the rest in that it's `flow-row` not `flow-col`, this fixed the gap at the bottom of the page too.
</div>
{/* Side panel */}
<div className="bg-ch-gray-760 font-fira-sans px-20 pt-12 flex flex-col gap-6 overflow-y-auto">
<h3 className="text-5xl capitalize text-ch-gray-300">
{project?.title.replace(/-/g, ' ')}
</h3>
<div className="flex items-center text-gray-100">
<span className="pr-4">Built with</span>
<CadPackage
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 className="bg-ch-gray-760 font-fira-sans px-20 pt-12 overflow-y-auto">
<div className="grid grid-flow-row-dense gap-6">
<h3 className="text-5xl capitalize text-ch-gray-300">
{project?.title.replace(/-/g, ' ')}
</h3>
<div className="flex items-center text-gray-100">
<span className="pr-4">Built with</span>
<CadPackage
cadPackage={project?.cadPackage}
className="px-3 py-2 rounded"
/>
</div>
</KeyValue>
<div className="flex gap-6">
<KeyValue keyName="Created on">
{new Date(project?.createdAt).toDateString()}
<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>
</KeyValue>
<KeyValue keyName="Updated on">
{new Date(project?.updatedAt).toDateString()}
<div className="grid grid-flow-col-dense gap-6">
<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>
</div>
<KeyValue keyName="Reactions">
<EmojiReaction
emotes={emotes}
userEmotes={userEmotes}
onEmote={onReaction}
onShowProjectReactions={() => setIsReactionsModalOpen(true)}
/>
</KeyValue>
<KeyValue keyName="Comments" hide={!currentUser}>
{!isEditable && (
<>
{currentUser && (
<>
<div className="pt-1">
<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"
placeholder="Have a question about this model, or a helpful tip about how to improve it? Remember, be nice!"
value={comment}
onChange={({ target }) => setComment(target.value)}
/>
</div>
<Button
className={getActiveClasses(
'ml-auto hover:bg-opacity-100 bg-ch-pink-800 bg-opacity-30 mt-4 mb-6 text-ch-gray-300',
{ 'bg-indigo-200': currentUser }
)}
shouldAnimateHover
disabled={!currentUser}
iconName={''}
onClick={onCommentClear}
>
Comment
</Button>
</>
)}
<ul>
{project?.Comment.map(({ text, user, id, createdAt }) => (
<li key={id} className="mb-5">
<div className="flex justify-between">
<Link
className="flex items-center"
to={routes.user({ userName: user?.userName })}
>
<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()}
<KeyValue keyName="Comments" hide={!currentUser}>
{!isEditable && (
<>
{currentUser && (
<>
<div className="pt-1">
<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"
placeholder="Have a question about this model, or a helpful tip about how to improve it? Remember, be nice!"
value={comment}
onChange={({ target }) => setComment(target.value)}
/>
</div>
<Button
className={getActiveClasses(
'ml-auto hover:bg-opacity-100 bg-ch-pink-800 bg-opacity-30 mt-4 mb-6 text-ch-gray-300',
{ 'bg-indigo-200': currentUser }
)}
shouldAnimateHover
disabled={!currentUser}
iconName={''}
onClick={onCommentClear}
>
Comment
</Button>
</>
)}
<ul>
{project?.Comment.map(({ text, user, id, createdAt }) => (
<li key={id} className="mb-5">
<div className="flex justify-between">
<Link
className="flex items-center"
to={routes.user({ userName: user?.userName })}
>
<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">
{text}
</div>
</li>
))}
</ul>
<div className="ml-5 border-l-2 pl-5 my-3 border-ch-gray-300 text-ch-gray-300">
{text}
</div>
</li>
))}
</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>
{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>

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"
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',
@@ -113,7 +113,7 @@ export const Success = ({
count: 0,
},
].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} />
<div className="flex flex-col">
<div className="text-3xl">{count}</div>