Skip to content

Commit

Permalink
session details
Browse files Browse the repository at this point in the history
  • Loading branch information
@lassejaco
lassejaco committed Oct 26, 2024
1 parent 35a65f8 commit d67e3d7
Show file tree
Hide file tree
Showing 5 changed files with 145 additions and 43 deletions.
3 changes: 3 additions & 0 deletions devcon-app/src/assets/icons/livestream.svg
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
73 changes: 67 additions & 6 deletions devcon-app/src/components/domain/app/dc7/sessions/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -40,6 +40,17 @@ import ScrollDownIcon from 'lib/assets/icons/scroll-down.svg'
import CityGuide from 'assets/images/dc-7/city-guide.png'
import { useRecoilValue } from 'recoil'
import { Popup } from 'lib/components/pop-up'
import LivestreamIcon from 'assets/icons/livestream.svg'
import IconStar from 'assets/icons/star.svg'
import IconStarFill from 'assets/icons/star-fill.svg'
import IconCalendarAdd from 'assets/icons/schedule-plus.svg'
import IconMarker from 'assets/icons/icon_marker.svg'
import IconPeople from 'assets/icons/icon_people.svg'
import IconAdded from 'assets/icons/calendar-added.svg'
import IconAdd from 'assets/icons/calendar-add.svg'
import IconCalendar from 'assets/icons/calendar.svg'
import PinIcon from 'assets/icons/pin.svg'
import AddToCalendar from 'components/domain/index/add-to-calendar/AddToCalendar'

const cardClass = 'flex flex-col lg:border lg:border-solid lg:border-[#E4E6EB] rounded-3xl relative'

Expand Down Expand Up @@ -291,7 +302,7 @@ export const SessionCard = ({ session, className }: { session: SessionType; clas
</div>

<div
className="shrink-0 flex justify-center p-3 pl-1 cursor-pointer"
className="shrink-0 flex self-start justify-center items-start p-3 pl-1 cursor-pointer"
onClick={e => {
e.stopPropagation()
e.preventDefault()
Expand Down Expand Up @@ -655,7 +666,7 @@ export const SessionView = ({ session, standalone }: { session: SessionType | nu
className={cn(
cardClass,
'flex flex-col gap-3 lg:p-4 self-start w-full no-scrollbar',
!standalone && 'lg:max-h-[calc(100vh-72px)] lg:overflow-auto'
!standalone && 'lg:max-h-[calc(100vh-84px)] lg:overflow-auto'
)}
>
<div
Expand Down Expand Up @@ -702,8 +713,10 @@ export const SessionView = ({ session, standalone }: { session: SessionType | nu
</div>
</div>
</div>
<div className="flex flex-col gap-3 font-semibold shrink-0">Session Details</div>
<div className="text-sm text-[#717784] shrink-0">{session.description}</div>
<div className="flex flex-col gap-1 shrink-0">
<div className="flex flex-col font-semibold">Description</div>
<div className="text-sm text-[#535353] shrink-0">{session.description}</div>
</div>

<div className="flex flex-col gap-2 shrink-0">
<div className="flex items-center gap-2">
Expand All @@ -713,13 +726,49 @@ export const SessionView = ({ session, standalone }: { session: SessionType | nu
{moment(session.endTime).format('HH:mm A')}
</span>
</div>
<div className="flex items-center gap-2">
{/* <div className="flex items-center gap-2">
<IconSpeaker className="icon shrink-0" style={{ '--color-icon': 'black' }} />
<span className="text-sm text-[black]">{session.speakers?.map(speaker => speaker.name).join(', ')}</span>
</div> */}
</div>

<div
className="flex justify-evenly shrink-0 text-xs border border-solid border-[#E1E4EA] rounded-2xl p-1 gap-2 my-1 font-semibold bg-white"
style={{ '--color-icon': '#7D52F4' }}
>
<div className="flex flex-col items-center justify-center gap-1 cursor-pointer">
<div className="text-lg "> {true ? <HeartIcon /> : <HeartIcon />}</div>
<p>Mark as interesting</p>
</div>
<div className="flex flex-col items-center justify-center gap-1 cursor-pointer">
<div className="text-lg"> {false ? <IconAdded /> : <CalendarIcon />}</div>
<p>Attend Session</p>
</div>

<AddToCalendar
event={{
id: session.id,
title: `${session.title}${session.room ? ` / Room: ${session.room.name}` : ''}`,
description: session.description,
location: 'Queen Sirikit National Convention Center',
startDate: moment.utc(session.start),
endDate: moment.utc(session.end),
}}
>
<div className="flex flex-col items-center gap-1 cursor-pointer">
<div className="text-lg cursor-pointer">
<IconCalendar />
</div>
<p>Export to Calendar</p>
</div>
</AddToCalendar>

{/* <Link to={standalone ? `/venue?room=${session.room?.id}` : `/venue/${session.room?.id}`}>
<p>Room Details</p> <PinIcon />
</Link> */}
</div>

<div className="border-top border-bottom py-4 shrink-0">
<div className="border-bottom pb-4 shrink-0">
<StandalonePrompt
className="w-full"
onClick={() => setDevaBotVisible(`Tell me about similar sessions to "${session.title}"`)}
Expand All @@ -735,6 +784,18 @@ export const SessionView = ({ session, standalone }: { session: SessionType | nu
<SpeakerCard speaker={speaker} key={speaker.id} />
))}
</div>

<div className="flex justify-between items-center shrink-0 border-top pt-4 pb-0 mt-2">
<div className="flex flex-col gap-3 font-semibold shrink-0">Livestream</div>
<div className="text-xs text-red bg-[#FFC0C5] px-2 py-0.5 rounded-full flex items-center gap-1">
<LivestreamIcon className="icon shrink-0" style={{ '--color-icon': 'red' }} />
<div className="text-red font-semibold">Live</div>
</div>
</div>

<div className="aspect shrink-0">
<div className="w-full h-full bg-[#784DEF1A] rounded-2xl"></div>
</div>
</div>
)
}
Expand Down
38 changes: 38 additions & 0 deletions devcon-app/src/components/domain/app/dc7/sessions/sessions.module.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -55,3 +55,41 @@
-webkit-backdrop-filter: blur(8px);
// border: 1px solid rgba(255, 255, 255, 0.3);
}

.actions {
margin-top: 16px;
margin-bottom: 16px;
display: grid;
grid-template-columns: 1fr 1fr;
grid-gap: 1px;
// background: $colors-standard-border-color;
// border: 1px solid $colors-standard-border-color;
max-width: 600px;

@media (min-width: 1024px) {
grid-template-columns: repeat(4, 1fr);
max-width: none;
}

> * {
// height: 52px;
display: flex;
justify-content: space-between;
align-items: center;
// background: $colors-monochrome-1;
padding: 8px;
cursor: pointer;
// --color-icon: #{$colors-monochrome-5};

> p {
font-size: 13px;
// @include fonts-bold;
// color: $colors-monochrome-8;
// align-self: flex-end;
}

> svg {
font-size: 20px;
}
}
}
2 changes: 1 addition & 1 deletion devcon-app/src/components/domain/app/dc7/speakers/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -422,7 +422,7 @@ export const SpeakerView = ({ speaker, standalone }: { speaker: SpeakerType | nu
className={cn(
cardClass,
'flex flex-col gap-3 lg:p-4 self-start w-full no-scrollbar',
!standalone && 'lg:max-h-[calc(100vh-72px)] lg:overflow-auto'
!standalone && 'lg:max-h-[calc(100vh-84px)] lg:overflow-auto'
)}
>
{/* <Button color="black-1" fill className="self-center text-sm sticky top-[76px] z-10">
Expand Down
72 changes: 36 additions & 36 deletions lib/components/pop-up/PopUp.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -25,44 +25,44 @@ export const Popup = ({
setIsIOS(checkIsIOS());
}, []);

React.useEffect(() => {
if (open) {
scrollPositionRef.current = window.scrollY;
scrollLock.current = true;
// React.useEffect(() => {
// if (open) {
// scrollPositionRef.current = window.scrollY;
// scrollLock.current = true;

if (isIOS) {
// IOS needs this demonic hack to work... (this effectively hides a visual bug while also disabling scroll on background)
setTimeout(() => {
if (!scrollLock.current) return;
document.documentElement.style.overflow = "hidden";
document.documentElement.style.height = "100vh";
document.body.style.overflow = "hidden";
document.body.style.height = "100vh";
}, 300);
} else {
// For non-iOS devices, use a simpler approach
document.body.style.overflow = "hidden";
}
} else {
scrollLock.current = false;
if (isIOS) {
document.documentElement.style.overflow = "";
document.documentElement.style.height = "";
document.body.style.overflow = "";
document.body.style.height = "";
} else {
document.body.style.overflow = "";
}
window.scrollTo(0, scrollPositionRef.current);
}
// if (isIOS) {
// // IOS needs this demonic hack to work... (this effectively hides a visual bug while also disabling scroll on background)
// setTimeout(() => {
// if (!scrollLock.current) return;
// document.documentElement.style.overflow = "hidden";
// document.documentElement.style.height = "100vh";
// document.body.style.overflow = "hidden";
// document.body.style.height = "100vh";
// }, 300);
// } else {
// // For non-iOS devices, use a simpler approach
// document.body.style.overflow = "hidden";
// }
// } else {
// scrollLock.current = false;
// if (isIOS) {
// document.documentElement.style.overflow = "";
// document.documentElement.style.height = "";
// document.body.style.overflow = "";
// document.body.style.height = "";
// } else {
// document.body.style.overflow = "";
// }
// window.scrollTo(0, scrollPositionRef.current);
// }

return () => {
document.documentElement.style.overflow = "";
document.documentElement.style.height = "";
document.body.style.overflow = "";
document.body.style.height = "";
};
}, [open, isIOS]);
// return () => {
// document.documentElement.style.overflow = "";
// document.documentElement.style.height = "";
// document.body.style.overflow = "";
// document.body.style.height = "";
// };
// }, [open, isIOS]);

return (
<AnimatePresence>
Expand Down

0 comments on commit d67e3d7

Please sign in to comment.