mythic-insight/calcom
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions 5

fixed mobile layouts for team and team availability (#1382)

Browse source
This commit is contained in:
Peer Richelsen 2021-12-27 19:54:11 +01:00 committed by GitHub
parent 3e1fe30186
commit 81e2ae1352
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
4 changed files with 9 additions and 9 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
components/team/MemberList.tsx
View file

@ -12,7 +12,7 @@ export default function MemberList(props: Props) {
return (
<div>
<ul className="px-6 mb-2 -mx-6 bg-white border divide-y divide-gray-200 rounded sm:px-4 sm:mx-0">
<ul className="px-4 mb-2 -mx-4 bg-white border divide-y divide-gray-200 rounded sm:px-4 sm:mx-0">
{props.members?.map((member) => (
<MemberListItem key={member.id} member={member} team={props.team} />
))}

4
components/team/MemberListItem.tsx
View file

@ -74,7 +74,7 @@ export default function MemberListItem(props: Props) {
<span className="block -mt-1 text-xs text-gray-400">{props.member.email}</span>
</div>
</div>
<div className="flex justify-center mr-2">
<div className="flex mt-2 mr-2 sm:mt-0 sm:justify-center">
{!props.member.accepted && <TeamRole invitePending />}
<TeamRole role={props.member.role} />
</div>
@ -91,7 +91,7 @@ export default function MemberListItem(props: Props) {
disabled={!props.member.accepted}
onClick={() => (props.member.accepted ? setShowTeamAvailabilityModal(true) : null)}
color="minimal"
className="w-10 h-10 p-0 border border-transparent group text-neutral-400 hover:border-gray-200 hover:bg-white">
className="hidden w-10 h-10 p-0 border border-transparent group text-neutral-400 hover:border-gray-200 hover:bg-white sm:block">
<ClockIcon className="w-5 h-5 group-hover:text-gray-800" />
</Button>
</Tooltip>

2
components/team/TeamSettingsRightSidebar.tsx
View file

@ -111,7 +111,7 @@ export default function TeamSettingsRightSidebar(props: { team: TeamWithMembers;
</div>
{props.team?.id && props.role !== MembershipRole.MEMBER && (
<Link href={`/settings/teams/${props.team.id}/availability`}>
<div className="mt-5 space-y-1">
<div className="hidden mt-5 space-y-1 sm:block">
<LinkIconButton Icon={ClockIcon}>{"View Availability"}</LinkIconButton>
<p className="mt-2 text-sm text-gray-500">See your team members availability at a glance.</p>
</div>

10
ee/components/team/availability/TeamAvailabilityScreen.tsx
View file

@ -62,9 +62,9 @@ export default function TeamAvailabilityScreen(props: Props) {
return (
<div className="flex flex-col flex-1 bg-white border rounded-sm border-neutral-200">
<div className="flex w-full p-5 pr-0 space-x-5 border-b border-gray-200">
<div className="flex w-full p-4 space-x-5 border-b border-gray-200">
<div className="flex flex-col">
<span className="font-bold text-gray-600">Date</span>
<span className="text-sm font-medium text-neutral-700">Date</span>
<DatePicker
date={selectedDate.toDate()}
className="p-1.5"
@ -74,7 +74,7 @@ export default function TeamAvailabilityScreen(props: Props) {
/>
</div>
<div className="flex flex-col">
<span className="font-bold text-gray-600">Timezone</span>
<span className="text-sm font-medium text-neutral-700">Timezone</span>
<TimezoneSelect
id="timeZone"
value={selectedTimeZone}
@ -83,8 +83,8 @@ export default function TeamAvailabilityScreen(props: Props) {
className="w-full border border-gray-300 rounded-sm shadow-sm react-select-container focus:ring-neutral-800 focus:border-neutral-800 sm:text-sm"
/>
</div>
<div>
<span className="font-bold text-gray-600">Slot Length</span>
<div className="hidden sm:block">
<span className="text-sm font-medium text-neutral-700">Slot Length</span>
<Select
options={[
{ value: 15, label: "15 minutes" },