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

Fix safari flexbox/gap issue with grid

Browse Source 
related to #435
This commit is contained in:
Kurt Hutten
2021-08-11 19:27:08 +10:00
parent b255af5f0f
commit 1d1f62e38e
8 changed files with 14 additions and 14 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}
>

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}

8
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}
{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}
>
@@ -136,7 +136,7 @@ const ProjectProfile = ({
</div>
{/* 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 grid grid-flow-row-dense gap-6 overflow-y-auto">
<h3 className="text-5xl capitalize text-ch-gray-300">
{project?.title.replace(/-/g, ' ')}
</h3>
@@ -181,7 +181,7 @@ const ProjectProfile = ({
/>
</div>
</KeyValue>
<div className="flex gap-6">
<div className="grid grid-flow-col-dense gap-6">
<KeyValue keyName="Created on">
{new Date(project?.createdAt).toDateString()}
</KeyValue>

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>