Skip to content

Commit

Permalink
Merge pull request #148 from ASSETS-Conference/dev
Browse files Browse the repository at this point in the history 
New Alert + Home Page Changes
  • Loading branch information
@surajgoraya
surajgoraya authored Jun 26, 2024
2 parents ff785cc + 88af080 commit e1d2099
Show file tree
Hide file tree
Showing 5 changed files with 237 additions and 184 deletions.
38 changes: 26 additions & 12 deletions src/app/authors/call-for-papers/page.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,18 +14,32 @@ export default function TechnicalPapers() {
<Subpage
title="Call for Papers"
subheading={"October 28th - 30th, 2024"}
// overrideTOC={
// <Alert raw={true} heading={"Technical Paper submissions now live"}>
// <p className="text-md text-white">
// The PCS portal to submit Technical Papers is now live! Please submit
// via the{" "}
// <Link href={"https://new.precisionconference.com/"}>
// ASSETS 2024 submission site
// </Link>
// .
// </p>
// </Alert>
// }
overrideTOC={
<Alert
className={"mb-5"}
raw={true}
heading={"All CFPs are now Live on PCS for Submission"}
>
<p className="text-md text-white">
All submission tracks are now live and available for submission on
the{" "}
<Link
className={"text-white"}
href={"https://new.precisionconference.com/"}
>
{" "}
PCS system
</Link>
. <br className="block lg:hidden" />
<br className="block lg:hidden" />
For more information, please take a look at the individual{" "}
<Link className={"text-white"} href={"/authors/call-for-papers/"}>
Call for Papers
</Link>{" "}
pages.
</p>
</Alert>
}
>
<Section title={"Call for Papers"} spacing={"bottom-only"}>
<p>{`The ASSETS conference is the premier forum for presenting research on the design, evaluation, use, and education related to computing for people with disabilities and older adults. We invite high-quality original submissions on topics relevant to computing and accessibility.`}</p>
Expand Down
178 changes: 92 additions & 86 deletions src/app/lib/components/DateList.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,100 +2,106 @@ import React from "react";
import { formatDate } from "../utils/mergeDates";

export function DateList({ dates, notice }) {
return dates && dates.length ? (
<>
{notice ? (
<div className="pl-4 flex flex-row items-center gap-3">
<p className=" bg-theme-blue text-white ml-[-1rem] p-2 font-bold">
NOTICE:
</p>
<p className="mb-[1rem]">{notice}</p>
</div>
) : null}
{dates.map((date, i, all) => {
return (
<MonthContainer
key={`month_container-${i}`}
isLast={all.length - 1 === i}
monthName={date.month}
year={date.year}
eventItems={date.eventItems}
/>
);
})}
</>
) : (
<div className="w-[100%] flex flex-col md:flex-row items-start">
{/* <div className="flex-1">
return dates && dates.length ? (
<>
{notice ? (
<div className="pl-4 flex flex-row items-center gap-3">
{typeof notice === "object" && notice?.lowPriority ? (
<>
<div
className={`bg-theme-dark
text-white ml-[-1rem] py-4 px-1 font-bold`}
></div>
<p className="mb-4">{notice.text}</p>
</>
) : (
<>
<p className=" bg-theme-blue text-white ml-[-1rem] p-2 font-bold">
NOTICE:
</p>
<p className="mb-[1rem]">{notice}</p>
</>
)}
</div>
) : null}
{dates.map((date, i, all) => {
return (
<MonthContainer
key={`month_container-${i}`}
isLast={all.length - 1 === i}
monthName={date.month}
year={date.year}
eventItems={date.eventItems}
/>
);
})}
</>
) : (
<div className="w-[100%] flex flex-col md:flex-row items-start">
{/* <div className="flex-1">
<p className="h3"> </p>
</div> */}
<div className="flex-1">
<p className="font-light h3 mt-12 md:mt-24">
{"Dates aren't out just yet "}&mdash; check back later!
</p>
</div>
</div>
);
<div className="flex-1">
<p className="font-light h3 mt-12 md:mt-24">
{"Dates aren't out just yet "}&mdash; check back later!
</p>
</div>
</div>
);
}

export function MonthContainer({ monthName, year, eventItems, isLast }) {
// const formatted = new Date(`${monthName} 1, ${year}`);
// const endOfMonth = new Date(
// formatted.getFullYear(),
// formatted.getMonth() + 1,
// 0
// ).getTime();
// const isPast = endOfMonth < new Date().setHours(0, 0, 0, 0);
// const formatted = new Date(`${monthName} 1, ${year}`);
// const endOfMonth = new Date(
// formatted.getFullYear(),
// formatted.getMonth() + 1,
// 0
// ).getTime();
// const isPast = endOfMonth < new Date().setHours(0, 0, 0, 0);

return (
<div className={`pt-10 w-[100%] flex flex-col md:flex-row items-start`}>
<div className="flex-1">
<p
className={`h2 uppercase ${
false ? "opacity-50" : "opacity-100"
}`}
>{`${monthName} ${year}`}</p>
</div>
<div
className={`flex-1 border-black w-[100%] ${
isLast
? `border-b-[0px]`
: "border-b-[1px] md:border-b-[2px]"
}`}
>
{eventItems.map((event, i) => {
return (
<EventItem
key={`event-item-${i}`}
title={event.title}
subtitle={event.subtitle}
date={event.date}
time={event.time}
/>
);
})}
</div>
</div>
);
return (
<div className={`pt-10 w-[100%] flex flex-col md:flex-row items-start`}>
<div className="flex-1">
<p
className={`h2 uppercase ${false ? "opacity-50" : "opacity-100"}`}
>{`${monthName} ${year}`}</p>
</div>
<div
className={`flex-1 border-black w-[100%] ${
isLast ? `border-b-[0px]` : "border-b-[1px] md:border-b-[2px]"
}`}
>
{eventItems.map((event, i) => {
return (
<EventItem
key={`event-item-${i}`}
title={event.title}
subtitle={event.subtitle}
date={event.date}
time={event.time}
/>
);
})}
</div>
</div>
);
}

export function EventItem({ title, subtitle, date, time }) {
// const isPast = new Date(formatDate(date)) < new Date().setHours(0, 0, 0, 0);
// const isPast = new Date(formatDate(date)) < new Date().setHours(0, 0, 0, 0);

return (
<div className={`mb-8 ${false ? "opacity-50" : "opacity-100"}`}>
<p className="font-medium my-2 text-xl md:mt-2 md:text-2xl">
{title}
</p>
{subtitle && (
<p className="mb-2 !-mt-2 text-sm">
<em>{subtitle}</em>
</p>
)}
<div className="grid grid-cols-2 gap-8">
<p>{date}</p>
{time ? <p className="!mt-0">{time} AOE</p> : null}
</div>
</div>
);
return (
<div className={`mb-8 ${false ? "opacity-50" : "opacity-100"}`}>
<p className="font-medium my-2 text-xl md:mt-2 md:text-2xl">{title}</p>
{subtitle && (
<p className="mb-2 !-mt-2 text-sm">
<em>{subtitle}</em>
</p>
)}
<div className="grid grid-cols-2 gap-8">
<p>{date}</p>
{time ? <p className="!mt-0">{time} AOE</p> : null}
</div>
</div>
);
}
14 changes: 11 additions & 3 deletions src/app/lib/components/primitives/Section.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,15 @@ import React from 'react'

import { FaArrowRight } from 'react-icons/fa';

export default function Section({ title, children, className, spacing, id }) {
/**
*
* @param {React.PropsWithChildren} props
* @param {String} props.title The title of the overarching section
* @param {React.ReactNode} props.children Children placed within the
*
* @returns
*/
export default function Section({ title, children, className, spacing, id, invertColours}) {

const generateID = () => {
return title.replace(/\s/g, '-').toLowerCase();
Expand Down Expand Up @@ -32,8 +40,8 @@ export default function Section({ title, children, className, spacing, id }) {
}

return (
<section className={`${evalSpacing()} ${className}`}>
<div className='mt-7 border-b-[2px] border-black'>
<section className={`${evalSpacing()} ${className} ${invertColours ? 'text-white' : 'text-black'}`}>
<div className={`mt-7 border-b-[2px] ${invertColours ? 'border-white' : 'border-black'}`}>
<h1 id={id ? id : generateID()} className='flex flex-row justify-flex-start content-center gap-3 mb-6 max-w-[30ch]'><FaArrowRight aria-hidden className='mt-[.1rem] min-w-[1em] aspect-square'/>{title}</h1>
</div>
<div className='mt-7'>
Expand Down
Loading

0 comments on commit e1d2099

Please sign in to comment.