ita-social-projects / ita-social-projects/StreetCode
News block
- Dominant language
- C#
- Stars
- 27
- Forks
- 14
- PR merge metrics
- No merged PRs in 30d
Description
**As a** user, **I want to** see the news on the main page **to** discover relevant information about the project
### Acceptance Criteria
1. Block is displayed according to [mockup](https://www.figma.com/design/jD2lHHBof7RrXWZqiUr0MU/HistoryCode?node-id=1-10555&t=U9ullVJNt8BRfpMu-0)
2. Title "Новини" is present and the 10 latest news items are available in the slider (if there are fewer than 10 news items in total, all the news will be available in the slider).

2. A single news card contains an image, title, short description, and the link "До новини”
2.1. Clicking the link "До новини" will redirect the user to a page with an entire article of the chosen news card
2.2. On desktop/tablet/mobile, the user can click any area of the news card to redirect to an entire article

3. The short description on a single news card is dynamically adjusts to the size of the card. When this limit is reached, an ellipsis appears followed by a "До новини" link.
4. On the Desktop, the user can see 1 news card in the middle and 2 from left and right on the screen

4.1. On tablet/mobile, the user can see only 1 news card on the screen

5. The user can navigate between news items by moving left and right.
5.1. On desktop, navigation between news items can be done using the navigation arrows or by swiping with the mouse held down over the news area.

5.2. On tablets and mobile devices, navigation between news items is done by swiping left or right.
6. Cards of the news are looped
7. On tablet/mobile the squares indicating the progress in switching news are present
7.1. The quantity of squares matches the amount of news
7.2. Selecting a specific square and clicking on it activates the square and redirects the user to the corresponding news card
7.3 Selected square change depending on the news card being displayed.

Mockup: https://www.figma.com/design/jD2lHHBof7RrXWZqiUr0MU/HistoryCode?node-id=1-10555&t=YGbBloT5xxClBTvQ-0
Epic link #694
Contributor guide
No contributing guide indexed for this repository
Research direction
Start with the acceptance criteria and the linked Figma mockup, then locate the main-page entry point and the existing news data source. The work is done when the responsive looping slider, card links, navigation, truncation, and mobile progress indicators match the specified behavior across desktop, tablet, and mobile.
Written by the indexing model from the issue text.
Assessment
- Domain
- frontend
- Issue type
- Feature
- Difficulty
- 4/5
- Estimated time
- 3-5 days
- Activity status
- Stale
- Clarity
- Mostly clear
- Newbie friendliness
- 45/100