Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

fix: Sidebar in start custom activity #9647

Merged
merged 9 commits into from
Apr 29, 2024
Merged

fix: Sidebar in start custom activity #9647

Show file tree
Hide file tree
Changes from 3 commits
Commits
Show all changes
9 commits
Select commit Hold shift + click to select a range
2c7f04d
fix: Sidebar in start custom activity
Dschoordsch Apr 16, 2024
13a4d60
Make activity details screen reactive
Dschoordsch Apr 16, 2024
f60aa72
Fix editing view
Dschoordsch Apr 16, 2024
354fce4
Remove z-index
Dschoordsch Apr 18, 2024
e317b04
Make all content visible on mobile
Dschoordsch Apr 18, 2024
f1eab03
Mobile adaptions
Dschoordsch Apr 18, 2024
dfe77ed
More CSS
Dschoordsch Apr 18, 2024
d3cd078
Hide template details image on small screens
Dschoordsch Apr 23, 2024
e746b8b
Avoid shrinking and expanding of the sidebar when switching teams
Dschoordsch Apr 25, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
29 changes: 13 additions & 16 deletions packages/client/components/ActivityLibrary/ActivityDetails/ActivityDetails.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -93,7 +93,7 @@ const ActivityDetails = (props: Props) => {
const MOBILE_SETTINGS_HEIGHT = 208

return (
<div className='flex h-full flex-col bg-white'>
<div className='flex h-full w-full flex-col bg-white'>
<div className={clsx(`flex grow pb-[${MOBILE_SETTINGS_HEIGHT}px]`)}>
<div className='mt-4 grow'>
<div className='mb-14 ml-4 flex h-min w-max items-center'>
Expand All @@ -104,21 +104,18 @@ const ActivityDetails = (props: Props) => {
</div>
<div className='w-max text-xl font-semibold'>Start Activity</div>
</div>
<div className='mx-auto w-min'>
<div
className={clsx(
'flex w-full flex-col justify-start pl-4 pr-14 xl:flex-row xl:justify-center xl:pl-14',
isEditing && 'lg:flex-row lg:justify-center lg:pl-14'
)}
>
<ActivityCard
className='ml-14 mb-8 max-h-[200px] w-80 xl:ml-0 xl:mb-0'
theme={CATEGORY_THEMES[category as CategoryID]}
badge={null}
type={type}
>
<ActivityCardImage src={illustrationUrl} category={category as CategoryID} />
</ActivityCard>
<div className='mx-auto'>
<div className='flex flex-col justify-start pl-4 pr-14 xl:flex-row xl:justify-center xl:pl-14'>
<div>
<ActivityCard
className='ml-14 mb-8 max-h-[200px] w-80 xl:ml-0 xl:mb-0'
theme={CATEGORY_THEMES[category as CategoryID]}
badge={null}
type={type}
>
<ActivityCardImage src={illustrationUrl} category={category as CategoryID} />
</ActivityCard>
</div>
<div className='pb-20'>
<div className='mb-10 space-y-2 pl-14'>
<div className='flex min-h-[40px] items-center'>
Expand Down
2 changes: 1 addition & 1 deletion packages/client/components/ActivityLibrary/ActivityDetails/TemplateDetails.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -212,7 +212,7 @@ export const TemplateDetails = (props: Props) => {
return (
<div className='space-y-6'>
<ActivityDetailsBadges isEditing={isEditing} templateRef={activity} />
<div className='w-[480px]'>
<div className='max-w-[480px]'>
<div className='mb-6'>
{__typename === 'FixedActivity' && (
<div className='text-base font-semibold text-slate-600'>Created by Parabol</div>
Expand Down
2 changes: 1 addition & 1 deletion packages/client/components/ActivityLibrary/ActivityDetails/components/IntegrationsTip.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,7 +15,7 @@ export const IntegrationsTip = (props: Props) => {
const {className, children} = props

return (
<div className={clsx('flex min-w-max items-center', className)}>
<div className={clsx('flex items-center', className)}>
<div className='flex items-center gap-3'>
<JiraSVG />
<GitHubSVG />
Expand Down
3 changes: 1 addition & 2 deletions packages/client/components/ActivityLibrary/ActivityDetailsSidebar.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -253,10 +253,9 @@ const ActivityDetailsSidebar = (props: Props) => {

return (
<>
{isOpen && <div className='w-96' />}
<div
className={clsx(
'fixed bottom-0 flex w-full flex-col overflow-hidden border-t border-solid border-slate-300 bg-white px-4 pt-2 lg:right-0 lg:top-0 lg:w-96 lg:border-l lg:pt-14',
'bottom-0 flex h-full w-full flex-col overflow-hidden border-t border-solid border-slate-300 bg-white px-4 pt-2 lg:right-0 lg:top-0 lg:w-96 lg:border-l lg:pt-14',
isOpen ? 'translate-y-0' : 'translate-y-full lg:translate-x-0 lg:translate-y-0',
isOpen ? 'opacity-100' : 'opacity-0 lg:opacity-100'
)}
Expand Down
Loading