feat: add 4k support for screen #52
There are no files selected for viewing
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,16 @@ | ||
| import { MosqueMetadataType } from "@/types/MosqueDataType" | ||
|
|
||
| export default function MosqueLogo({ | ||
| metadata, | ||
| }: { | ||
| metadata: MosqueMetadataType | ||
| }) { | ||
| return ( | ||
| // eslint-disable-next-line @next/next/no-img-element | ||
| <img | ||
| className="m-2 max-w-full lg:max-w-lg max-h-16 mx-auto" | ||
| src={metadata.logo_url} | ||
| alt="" | ||
| /> | ||
| ) | ||
| } |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,13 +1,13 @@ | ||
| export default function Notice() { | ||
| return ( | ||
| <div className="flex text-mosqueBrand-onPrimary text-center md:text-left "> | ||
| <div className="mr-[1.2vw] flex-shrink-0 self-center"> | ||
| <svg | ||
| xmlns="http://www.w3.org/2000/svg" | ||
| width={24} | ||
| height={24} | ||
| viewBox="0 0 24 24" | ||
| className="h-20 2k:h-[8vh] w-auto" | ||
| > | ||
| <path | ||
| fill="none" | ||
|
|
@@ -20,7 +20,7 @@ export default function Notice() { | |
| </svg> | ||
| </div> | ||
| <div> | ||
| <p className="italic text-xl md:text-2xl 2k:text-4xl 4k:text-5xl 4k:leading-[1.3] md:max-w-[25vw] hidden md:block"> | ||
| Please ensure your mobile phone is silent in the prayer hall. | ||
| </p> | ||
| </div> | ||
|
|
||
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
|
|
@@ -5,6 +5,7 @@ import { getNextPrayer } from "@/services/PrayerTimeService" | |
| import { DailyPrayerTime } from "@/types/DailyPrayerTimeType" | ||
| import { useConfiguration } from "@/hooks/useConfiguration" | ||
| import { dtFormatTimeTo12h } from "@/lib/datetimeUtils" | ||
| import { cn } from "@/lib/utils" | ||
|
|
||
| export default function PrayerTimes({ | ||
| today, | ||
|
|
@@ -44,6 +45,8 @@ export default function PrayerTimes({ | |
| const config = useConfiguration() | ||
| const [nextPrayerTime, setNextPrayerTime] = useState(getNextPrayer(today)) | ||
| const isTomorrowEnabled = config.feature.prayer_time_tomorrow.enabled | ||
| const tableColumnTitleClassNames = "md:text-5xl 2k:text-6xl 4k:text-8xl" | ||
| const tableDataClassNames = "text-xl md:text-6xl 2k:text-[5rem] 4k:text-9xl" | ||
|
|
||
| useEffect(() => { | ||
| const interval = setInterval(() => { | ||
|
|
@@ -54,17 +57,19 @@ export default function PrayerTimes({ | |
| }, [today]) | ||
|
|
||
| return ( | ||
| <table className="text-mosqueBrand-onPrimary mx-auto table-auto border-collapse border-none w-full h-full"> | ||
| <thead> | ||
| <tr | ||
| className="text-center [&>*]:p-2 md:[&>*]:p-8 | ||
| md:[&>*]:border [&>*]:border-mosqueBrand-primaryAlt | ||
| [&>th]:border-t-0 [&>th:last-of-type]:border-r-0" | ||
| > | ||
| <th className="sr-only">Prayer time</th> | ||
| <th className={cn(tableColumnTitleClassNames)}>Begins</th> | ||
| <th className={cn(tableColumnTitleClassNames)}>Jama'ah</th> | ||
| {isTomorrowEnabled && ( | ||
| <th className={cn(tableColumnTitleClassNames)}>Tomorrow</th> | ||
| )} | ||
| </tr> | ||
| </thead> | ||
| <tbody> | ||
|
|
@@ -83,36 +88,38 @@ export default function PrayerTimes({ | |
| border border-mosqueBrand-primaryAlt border-l-0 border-r-0 | ||
| last-of-type:border-b-0" | ||
| > | ||
| <th | ||
| className={cn("text-left md:text-right", tableDataClassNames)} | ||
| > | ||
| {prayer.label} | ||
| </th> | ||
| <td className={cn(tableDataClassNames)}> | ||
| {dtFormatTimeTo12h(prayer.data.start)} | ||
| {prayer.data?.start_secondary ? ( | ||
| <div className="block mt-1 md:mt-2"> | ||
| {dtFormatTimeTo12h(prayer.data.start_secondary)} | ||
| </div> | ||
| ) : null} | ||
| </td> | ||
| <td className={cn(`font-bold`, tableDataClassNames)}> | ||
| <span | ||
| className={ | ||
| nextPrayerTime.today === true && | ||
| nextPrayerTime.prayerIndex === index | ||
| ? "underline decoration-mosqueBrand-highlight underline-offset-[1.5vh]" | ||
| : "" | ||
| } | ||
| > | ||
| {dtFormatTimeTo12h(prayer.data.congregation_start)} | ||
| </span> | ||
| </td> | ||
| {isTomorrowEnabled && ( | ||
| <td className={cn(tableDataClassNames)}> | ||
| <span | ||
| className={ | ||
| nextPrayerTime.today === false && | ||
| nextPrayerTime.prayerIndex === index | ||
| ? "underline decoration-mosqueBrand-highlight underline-offset-[1.5vh]" | ||
| : "" | ||
| } | ||
| > | ||
|
|
||
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,87 @@ | ||
| import type { | ||
| DailyPrayerTime, | ||
| UpcomingPrayerTimes, | ||
| } from "@/types/DailyPrayerTimeType" | ||
| import { | ||
| getConfiguration, | ||
| getJummahTimes, | ||
| getMetaData, | ||
| getPrayerTimesForToday, | ||
| getPrayerTimesForTomorrow, | ||
| getPrayerTimesForUpcomingDays, | ||
| } from "@/services/MosqueDataService" | ||
| import type { JummahTimes } from "@/types/JummahTimesType" | ||
| import type { MosqueMetadataType } from "@/types/MosqueDataType" | ||
| import { ConfigurationJson } from "@/types/ConfigurationType" | ||
| import SunriseJummahTiles from "@/components/SunriseJummahTiles/SunriseJummahTiles" | ||
| import UpcomingPrayerDayTiles from "@/components/UpcomingPrayerDayTiles/UpcomingPrayerDayTiles" | ||
| import { ConfigurationProvider } from "@/providers/ConfigurationProvider" | ||
| import Clock from "@/components/Clock/Clock" | ||
| import Date from "@/components/Date/Date" | ||
| import MosqueMetadata from "@/components/MosqueMetadata/MosqueMetadata" | ||
| import Notice from "@/components/Notice/Notice" | ||
| import PrayerTimes from "@/components/PrayerTimes/PrayerTimes" | ||
| import SlidingBanner from "@/components/SlidingBanner/SlidingBanner" | ||
| import ServiceWorker from "@/components/ServiceWorker/ServiceWorker" | ||
| import Announcement from "@/components/Announcement/Announcement" | ||
| import Blackout from "@/components/Blackout/Blackout" | ||
|
|
||
|
|
||
| interface DefaultScreenProps { | ||
| config: ConfigurationJson | ||
| } | ||
|
|
||
| export default async function DefaultScreen({ config }: DefaultScreenProps) { | ||
| const today: DailyPrayerTime = await getPrayerTimesForToday() | ||
| const tomorrow: DailyPrayerTime = await getPrayerTimesForTomorrow() | ||
| const jummahTimes: JummahTimes = await getJummahTimes() | ||
| const mosqueMetadata: MosqueMetadataType = await getMetaData() | ||
| const upcomingPrayerDays: UpcomingPrayerTimes[] = | ||
| await getPrayerTimesForUpcomingDays() | ||
|
|
||
| let slides = [ | ||
| <SunriseJummahTiles | ||
| sunrise={today.sunrise_start} | ||
| jummahTimes={jummahTimes} | ||
| key={"sunrise_jummah_times"} | ||
| />, | ||
| ] | ||
|
|
||
| upcomingPrayerDays.forEach((times) => { | ||
| slides.push( | ||
| <UpcomingPrayerDayTiles times={times} key={times.display_date} />, | ||
| ) | ||
| }) | ||
|
|
||
| return ( | ||
| <div className="bg-mosqueBrand h-full w-full"> | ||
| <main className="flex h-full w-full flex-col p-4 md:p-5 2k:p-[1.5vw]"> | ||
| <div className="min-h-0 flex-1 md:grid md:grid-cols-8"> | ||
|
Contributor
Author
There was a problem hiding this comment. This was added to ensure the full screen was used, otherwise prayer table wasn't utilising the space |
||
| <div className="md:col-span-3 flex flex-col gap-4 2k:gap-[2vh]"> | ||
| <div className="p-4 md:p-6 2k:p-[1.5vh]"> | ||
| <Clock /> | ||
| </div> | ||
| <div className="p-4 md:p-6 2k:p-[1.5vh]"> | ||
| <Date /> | ||
| </div> | ||
| <div className="p-4 md:p-6 2k:p-[1.5vh]"> | ||
| <MosqueMetadata metadata={mosqueMetadata} /> | ||
| </div> | ||
| <div className="hidden md:p-6 md:block 2k:p-[1.5vh]"> | ||
| <Notice /> | ||
| </div> | ||
| </div> | ||
| <div className="p-4 md:p-6 md:col-span-5"> | ||
| <PrayerTimes today={today} tomorrow={tomorrow} /> | ||
| </div> | ||
| </div> | ||
| <div className="shrink-0 p-4 md:p-6"> | ||
| <SlidingBanner slides={slides} /> | ||
| </div> | ||
| <ServiceWorker /> | ||
| </main> | ||
| {config.feature.announcement.enabled && <Announcement />} | ||
| <Blackout prayerTimeToday={today} /> | ||
| </div> | ||
| ) | ||
| } | ||
Oops, something went wrong.
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
This was added to ensure the full screen was used, otherwise prayer table wasn't utilising the space