forked from essentialsoft/ccdi-ods-ui
-
Notifications
You must be signed in to change notification settings - Fork 0
DATASHARE-134: FE: Mobile/Tablet Homepage: Latest Updates #90
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.
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
Open
RuoxiZhang08
wants to merge
14
commits into
1.2.0
Choose a base branch
from
LatestUpdate
base: 1.2.0
Could not load branches
Branch not found: {{ refName }}
Loading
Could not load tags
Nothing to show
Loading
Are you sure you want to change the base?
Some commits from the old base branch may be removed from the timeline,
and old review comments may become outdated.
Open
Changes from all commits
Commits
Show all changes
14 commits
Select commit
Hold shift + click to select a range
4f3a90d
Added carousel to mobile latest update
RuoxiZhang08 e131a6e
Added hover for tablet and mobile
RuoxiZhang08 83e16aa
Adjusted style
RuoxiZhang08 e803361
Updated layout for desktop Latest update
RuoxiZhang08 681365c
Added gallery-lg
RuoxiZhang08 ee19bc9
Added cursor-pointer to buttons
RuoxiZhang08 3efebc2
Added shadow and icon to pause button
RuoxiZhang08 b2539d4
Updated arrow
RuoxiZhang08 6f51af2
Added hover on arrow icon
RuoxiZhang08 e48bc5e
clean up code
RuoxiZhang08 6de44fc
mobile view carousel start
RuoxiZhang08 124dcf1
Updated Image
RuoxiZhang08 9b7e734
Update src/app/globals.css
RuoxiZhang08 80dfff8
Update src/components/LandingPage/Gallery/UpdateCard.tsx
RuoxiZhang08 File filter
Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
There are no files selected for viewing
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
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 | ||||||||||||||||||||||||||||||||||||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| @@ -1,6 +1,11 @@ | ||||||||||||||||||||||||||||||||||||||||||||||
| "use client"; | ||||||||||||||||||||||||||||||||||||||||||||||
| import React from "react"; | ||||||||||||||||||||||||||||||||||||||||||||||
| import React, { useRef, useState, useCallback, useEffect } from "react"; | ||||||||||||||||||||||||||||||||||||||||||||||
| import Image from "next/image"; | ||||||||||||||||||||||||||||||||||||||||||||||
| import UpdateCard from "./UpdateCard"; | ||||||||||||||||||||||||||||||||||||||||||||||
| import startIcon from '../../../../assets/icons/Start_Icon.svg' | ||||||||||||||||||||||||||||||||||||||||||||||
| import pauseIcon from '../../../../assets/icons/Pause_Icon.svg' | ||||||||||||||||||||||||||||||||||||||||||||||
|
|
||||||||||||||||||||||||||||||||||||||||||||||
| const AUTO_ROTATE_INTERVAL_MS = 5000; | ||||||||||||||||||||||||||||||||||||||||||||||
|
|
||||||||||||||||||||||||||||||||||||||||||||||
| export interface GalleryUpdate { | ||||||||||||||||||||||||||||||||||||||||||||||
| image: string; | ||||||||||||||||||||||||||||||||||||||||||||||
|
|
@@ -19,27 +24,183 @@ export interface GalleryConfig { | |||||||||||||||||||||||||||||||||||||||||||||
| } | ||||||||||||||||||||||||||||||||||||||||||||||
|
|
||||||||||||||||||||||||||||||||||||||||||||||
| interface GalleryProps { | ||||||||||||||||||||||||||||||||||||||||||||||
| data: { gallery: GalleryConfig}; | ||||||||||||||||||||||||||||||||||||||||||||||
| data: { gallery: GalleryConfig }; | ||||||||||||||||||||||||||||||||||||||||||||||
| } | ||||||||||||||||||||||||||||||||||||||||||||||
|
|
||||||||||||||||||||||||||||||||||||||||||||||
| const CARD_WIDTH_MOBILE = 214; | ||||||||||||||||||||||||||||||||||||||||||||||
| const CARD_GAP_MOBILE = 28; | ||||||||||||||||||||||||||||||||||||||||||||||
| const SLIDE_STEP = CARD_WIDTH_MOBILE + CARD_GAP_MOBILE; // 242 | ||||||||||||||||||||||||||||||||||||||||||||||
| const MOBILE_VIEWPORT_OFFSET = -SLIDE_STEP; // -242: show indices 1,2,3 | ||||||||||||||||||||||||||||||||||||||||||||||
|
|
||||||||||||||||||||||||||||||||||||||||||||||
| /** Build initial mobile list [c, a, b, c, a, b] from updates [a, b, c] so visible indices 1,2,3 show a,b,c */ | ||||||||||||||||||||||||||||||||||||||||||||||
| function buildMobileRotatingList(updates: GalleryUpdate[] | undefined): GalleryUpdate[] { | ||||||||||||||||||||||||||||||||||||||||||||||
| if (!updates || updates.length < 3) return []; | ||||||||||||||||||||||||||||||||||||||||||||||
| const [a, b, c] = updates; | ||||||||||||||||||||||||||||||||||||||||||||||
| return [c, a, b, c, a, b]; | ||||||||||||||||||||||||||||||||||||||||||||||
|
Comment on lines
+35
to
+39
|
||||||||||||||||||||||||||||||||||||||||||||||
| /** Build initial mobile list [c, a, b, c, a, b] from updates [a, b, c] so visible indices 1,2,3 show a,b,c */ | |
| function buildMobileRotatingList(updates: GalleryUpdate[] | undefined): GalleryUpdate[] { | |
| if (!updates || updates.length < 3) return []; | |
| const [a, b, c] = updates; | |
| return [c, a, b, c, a, b]; | |
| /** Build initial mobile list for the mobile carousel. | |
| * - For exactly 3 updates [a, b, c], return [c, a, b, c, a, b] so visible indices 1,2,3 show a,b,c. | |
| * - For fewer than 3 updates, return [] (not enough items to slide). | |
| * - For more than 3 updates, return the full list unchanged. | |
| */ | |
| function buildMobileRotatingList(updates: GalleryUpdate[] | undefined): GalleryUpdate[] { | |
| if (!updates || updates.length < 3) { | |
| return []; | |
| } | |
| if (updates.length === 3) { | |
| const [a, b, c] = updates; | |
| return [c, a, b, c, a, b]; | |
| } | |
| // For more than 3 updates, use the entire list without truncation. | |
| return updates; |
Copilot
AI
Mar 12, 2026
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.
slideTrackRef is declared but never read. With Next/TypeScript ESLint rules this is typically flagged as an unused variable and can fail CI; remove it (and the ref={...}) or use it (e.g., for imperative scrolling/measurement).
Suggested change
| const slideTrackRef = useRef<HTMLDivElement>(null); |
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.
The hover overlay is hidden via
opacity-0but still contains a focusable<a>; keyboard users can tab to an invisible link (andaria-hiddendoes not prevent focus). This is an accessibility issue. Consider disabling pointer events while hidden (e.g.,pointer-events-none+ enabling ongroup-hover/group-focus-within), and ensure the overlay can also be revealed on keyboard focus (not hover-only).