Skip to content

Commit 0108f2a

Browse files
zouhir96zouhir96
committed
fix: Card items display.
1 parent d95655b commit 0108f2a

File tree

14 files changed

+127
-123
lines changed

14 files changed

+127
-123
lines changed

‎src/assets/index.css

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -28,6 +28,7 @@ code {
2828
--color-ht-100: oklch(0.9 0.0221 250.23);
2929
--color-ht-200: oklch(0.83 0.0314 249.73);
3030
--color-ht-900: oklch(0.3455 0.0507 251.49);
31+
--color-ht-caption: #616970;
3132
}
3233

3334
@layer base {

‎src/components/Elements/CardWithActions/CardItemWithActions.tsx

Lines changed: 9 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -81,30 +81,35 @@ export const CardItemWithActions = ({
8181
shareData={shareModalData}
8282
/>
8383
{cardItem}
84-
<div className={`flex items-end justify-end gap-1 ${isBookmarked ? 'active' : ''}`}>
84+
<div
85+
className={`absolute top-0 right-0 flex h-full w-1/3 items-end justify-end gap-1 ${isBookmarked ? 'active' : ''}`}>
8586
{source === 'ai' && (
8687
<CircleButton
8788
size="sm"
8889
className={`blockActionButton`}
8990
onClick={onReportClicked}
9091
aria-label="Report item">
91-
<MdBugReport />
92+
<MdBugReport className="justify-self-center" />
9293
</CircleButton>
9394
)}
9495
<CircleButton
9596
size="sm"
9697
className={`blockActionButton`}
9798
onClick={onShareModalClicked}
9899
aria-label="Open share modal">
99-
<BiShareAlt />
100+
<BiShareAlt className="justify-self-center" />
100101
</CircleButton>
101102
<CircleButton
102103
size="sm"
103104
variant={isBookmarked ? 'darkfocus' : 'secondary'}
104105
className={`blockActionButton ${isBookmarked ? 'active' : ''}`}
105106
onClick={onBookmarkClick}
106107
aria-label="Bookmark item">
107-
{!isBookmarked ? <BiBookmarkPlus /> : <BiBookmarkMinus />}
108+
{!isBookmarked ? (
109+
<BiBookmarkPlus className="justify-self-center" />
110+
) : (
111+
<BiBookmarkMinus className="justify-self-center" />
112+
)}
108113
</CircleButton>
109114
</div>
110115
</div>

‎src/features/cards/components/aiCard/ArticleItem.tsx

Lines changed: 12 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -37,22 +37,24 @@ const ArticleItem = (props: BaseItemPropsType<Article>) => {
3737
</CardLink>
3838
</p>
3939
{listingMode === 'compact' && (
40-
<div className="rowDetails">
41-
<span className="rowItem capitalize">
42-
<GoDotFill className="rowItemIcon" /> {item.source}
40+
<div className="m-0 mt-2 flex flex-row flex-wrap items-center">
41+
<span className="flex items-center gap-0.5 text-xs text-ht-caption capitalize">
42+
<GoDotFill /> {item.source}
4343
</span>
4444
</div>
4545
)}
4646
{listingMode === 'normal' && (
47-
<div className="rowDetails">
48-
<span className="rowItem capitalize">
49-
<GoDotFill className="rowItemIcon" /> {item.source}
47+
<div className="m-0 mt-2 flex flex-row flex-wrap items-center gap-x-4">
48+
<span className="flex items-center gap-0.5 text-xs text-ht-caption capitalize">
49+
<GoDotFill /> {item.source}
5050
</span>
51-
<span className="rowItem" title={new Date(item.published_at).toUTCString()}>
52-
<MdAccessTime className="rowItemIcon" /> {format(new Date(item.published_at))}
51+
<span
52+
className="flex items-center gap-0.5 text-xs text-ht-caption"
53+
title={new Date(item.published_at).toUTCString()}>
54+
<MdAccessTime /> {format(new Date(item.published_at))}
5355
</span>
54-
<span className="rowItem">
55-
<BiCommentDetail className={'rowTitleIcon'} />
56+
<span className="flex items-center gap-0.5 text-xs text-ht-caption">
57+
<BiCommentDetail />
5658
{item.comments} comments
5759
</span>
5860
</div>

‎src/features/cards/components/conferencesCard/ConferenceItem.tsx

Lines changed: 13 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,11 @@
1-
import { CardLink, CardItemWithActions } from 'src/components/Elements'
2-
import { Attributes } from 'src/lib/analytics'
3-
import { BaseItemPropsType, Conference } from 'src/types'
4-
import { MdAccessTime } from 'react-icons/md'
5-
import { ColoredLanguagesBadge } from 'src/components/Elements'
61
import { flag } from 'country-emoji'
72
import { IoIosPin } from 'react-icons/io'
3+
import { MdAccessTime } from 'react-icons/md'
84
import { RiCalendarEventFill } from 'react-icons/ri'
5+
import { CardItemWithActions, CardLink, ColoredLanguagesBadge } from 'src/components/Elements'
6+
import { Attributes } from 'src/lib/analytics'
97
import { useUserPreferences } from 'src/stores/preferences'
8+
import { BaseItemPropsType, Conference } from 'src/types'
109

1110
const ConferencesItem = ({ item, index, analyticsTag }: BaseItemPropsType<Conference>) => {
1211
const { listingMode } = useUserPreferences()
@@ -72,22 +71,20 @@ const ConferencesItem = ({ item, index, analyticsTag }: BaseItemPropsType<Confer
7271
</CardLink>
7372
{listingMode === 'normal' ? (
7473
<>
75-
<div className="rowDescription">
76-
<span className="rowItem">
77-
<IoIosPin className="rowItemIcon" /> {ConferenceLocation()}
74+
<div className="m-0 mt-2 flex flex-row flex-wrap items-center gap-x-4">
75+
<span className="flex items-center gap-0.5 text-xs text-ht-caption">
76+
<IoIosPin /> {ConferenceLocation()}
7877
</span>
79-
<span className="rowItem">
80-
<MdAccessTime className="rowItemIcon" /> {ConferenceDate()}
78+
<span className="flex items-center gap-0.5 text-xs text-ht-caption">
79+
<MdAccessTime /> {ConferenceDate()}
8180
</span>
8281
</div>
83-
<div className="rowDetails">
84-
<ColoredLanguagesBadge languages={[item.tag]} />
85-
</div>
82+
<ColoredLanguagesBadge languages={[item.tag]} />
8683
</>
8784
) : (
88-
<div className="rowDescription">
89-
<span className="rowItem">
90-
<MdAccessTime className="rowItemIcon" /> {ConferenceDate()}
85+
<div className="m-0 mt-2">
86+
<span className="flex items-center gap-0.5 text-xs text-ht-caption">
87+
<MdAccessTime /> {ConferenceDate()}
9188
</span>
9289
</div>
9390
)}

‎src/features/cards/components/devtoCard/ArticleItem.tsx

Lines changed: 11 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,11 @@
1+
import { AiOutlineLike } from 'react-icons/ai'
12
import { BiCommentDetail } from 'react-icons/bi'
2-
import { CardLink, CardItemWithActions } from 'src/components/Elements'
3+
import { MdAccessTime } from 'react-icons/md'
4+
import { CardItemWithActions, CardLink, ColoredLanguagesBadge } from 'src/components/Elements'
35
import { Attributes } from 'src/lib/analytics'
4-
import { BaseItemPropsType, Article } from 'src/types'
56
import { useUserPreferences } from 'src/stores/preferences'
7+
import { Article, BaseItemPropsType } from 'src/types'
68
import { format } from 'timeago.js'
7-
import { MdAccessTime } from 'react-icons/md'
8-
import { AiOutlineLike } from 'react-icons/ai'
9-
import { ColoredLanguagesBadge } from 'src/components/Elements'
109

1110
const ArticleItem = (props: BaseItemPropsType<Article>) => {
1211
const { item, index, selectedTag, analyticsTag } = props
@@ -41,17 +40,17 @@ const ArticleItem = (props: BaseItemPropsType<Article>) => {
4140

4241
{listingMode === 'normal' && (
4342
<>
44-
<p className="rowDescription">
45-
<span className="rowItem">
46-
<MdAccessTime className={'rowTitleIcon'} />
43+
<p className="m-0 mt-2 flex flex-row flex-wrap items-center gap-x-4">
44+
<span className="flex items-center gap-0.5 text-xs text-ht-caption">
45+
<MdAccessTime />
4746
{format(new Date(item.published_at))}
4847
</span>
49-
<span className="rowItem">
50-
<BiCommentDetail className={'rowTitleIcon'} />
48+
<span className="flex items-center gap-0.5 text-xs text-ht-caption">
49+
<BiCommentDetail />
5150
{item.comments} comments
5251
</span>
53-
<span className="rowItem">
54-
<AiOutlineLike className={'rowTitleIcon'} />
52+
<span className="flex items-center gap-0.5 text-xs text-ht-caption">
53+
<AiOutlineLike />
5554
{item.reactions} reactions
5655
</span>
5756
</p>

‎src/features/cards/components/freecodecampCard/ArticleItem.tsx

Lines changed: 7 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,8 @@
1-
import { CardLink, CardItemWithActions } from 'src/components/Elements'
1+
import { MdAccessTime } from 'react-icons/md'
2+
import { CardItemWithActions, CardLink, ColoredLanguagesBadge } from 'src/components/Elements'
23
import { Attributes } from 'src/lib/analytics'
3-
import { BaseItemPropsType, Article } from 'src/types'
4+
import { Article, BaseItemPropsType } from 'src/types'
45
import { format } from 'timeago.js'
5-
import { MdAccessTime } from 'react-icons/md'
6-
import { ColoredLanguagesBadge } from 'src/components/Elements'
76

87
const ArticleItem = (props: BaseItemPropsType<Article>) => {
98
const { item, index, selectedTag, analyticsTag } = props
@@ -27,12 +26,10 @@ const ArticleItem = (props: BaseItemPropsType<Article>) => {
2726
<div className="subTitle">{item.title}</div>
2827
</CardLink>
2928
<>
30-
<p className="rowDescription">
31-
<span className="rowItem">
32-
<MdAccessTime className={'rowTitleIcon'} />
33-
{format(new Date(item.published_at))}
34-
</span>
35-
</p>
29+
<span className="mt-2 flex items-center gap-0.5 text-xs text-ht-caption">
30+
<MdAccessTime />
31+
{format(new Date(item.published_at))}
32+
</span>
3633
<p className="rowDetails">
3734
<ColoredLanguagesBadge languages={item.tags.slice(0, 4)} />
3835
</p>

‎src/features/cards/components/githubCard/RepoItem.tsx

Lines changed: 9 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,10 @@
1-
import { CardLink, CardItemWithActions } from 'src/components/Elements'
1+
import { CardItemWithActions, CardLink } from 'src/components/Elements'
22

3-
import { Attributes } from 'src/lib/analytics'
4-
import { ColoredLanguagesBadge } from 'src/components/Elements'
53
import { VscRepo, VscRepoForked, VscStarFull } from 'react-icons/vsc'
6-
import { BaseItemPropsType, Repository } from 'src/types'
4+
import { ColoredLanguagesBadge } from 'src/components/Elements'
5+
import { Attributes } from 'src/lib/analytics'
76
import { useUserPreferences } from 'src/stores/preferences'
7+
import { BaseItemPropsType, Repository } from 'src/types'
88

99
function numberWithCommas(x: number | string) {
1010
return x.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ',')
@@ -37,16 +37,16 @@ const RepoItem = ({ item, index, selectedTag, analyticsTag }: BaseItemPropsType<
3737
</CardLink>
3838
<p className="rowDescription">{item.description}</p>
3939
{listingMode === 'normal' && (
40-
<div className="rowDetails">
40+
<div className="m-0 mt-2 flex flex-row flex-wrap items-center gap-x-4">
4141
<ColoredLanguagesBadge languages={[item.programmingLanguage]} />
4242
{numberWithCommas(item.stars) && (
43-
<span className="rowItem">
44-
<VscStarFull className="rowItemIcon" /> {numberWithCommas(item.stars)} stars
43+
<span className="flex items-center gap-0.5 text-xs text-ht-caption">
44+
<VscStarFull /> {numberWithCommas(item.stars)} stars
4545
</span>
4646
)}
4747
{item.forks && (
48-
<span className="rowItem">
49-
<VscRepoForked className="rowItemIcon" /> {numberWithCommas(item.forks)} forks
48+
<span className="flex items-center gap-0.5 text-xs text-ht-caption">
49+
<VscRepoForked /> {numberWithCommas(item.forks)} forks
5050
</span>
5151
)}
5252
</div>

‎src/features/cards/components/hackernewsCard/ArticleItem.tsx

Lines changed: 9 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -41,24 +41,26 @@ const ArticleItem = (props: BaseItemPropsType<Article>) => {
4141
</CardLink>
4242
</p>
4343
{listingMode === 'normal' && (
44-
<div className="rowDetails">
45-
<span className="rowItem hnRowItem">
46-
<GoDotFill className="rowItemIcon" /> {item.reactions} points
44+
<div className="m-0 mt-2 flex flex-row flex-wrap items-center gap-x-4">
45+
<span className="flex items-center gap-0.5 text-xs text-orange-500">
46+
<GoDotFill /> {item.reactions} points
4747
</span>
48-
<span className="rowItem" title={new Date(item.published_at).toUTCString()}>
49-
<MdAccessTime className="rowItemIcon" /> {format(new Date(item.published_at))}
48+
<span
49+
className="flex items-center gap-0.5 text-xs text-ht-caption"
50+
title={new Date(item.published_at).toUTCString()}>
51+
<MdAccessTime /> {format(new Date(item.published_at))}
5052
</span>
5153
<ClickableItem
5254
link={`https://news.ycombinator.com/item?id=${item.id}`}
53-
className="rowItem rowItemClickable"
55+
className="rowItemClickable flex items-center gap-0.5 text-xs text-ht-caption"
5456
analyticsAttributes={{
5557
[Attributes.POINTS]: item.reactions,
5658
[Attributes.TRIGERED_FROM]: 'card',
5759
[Attributes.TITLE]: `${item.title} comments`,
5860
[Attributes.LINK]: `https://news.ycombinator.com/item?id=${item.id}`,
5961
[Attributes.SOURCE]: analyticsTag,
6062
}}>
61-
<BiCommentDetail className="rowItemIcon" /> {item.comments} comments
63+
<BiCommentDetail /> {item.comments} comments
6264
</ClickableItem>
6365
</div>
6466
)}

‎src/features/cards/components/hashnodeCard/ArticleItem.tsx

Lines changed: 10 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,11 @@
11
import { BiCommentDetail } from 'react-icons/bi'
2-
import { CardLink, CardItemWithActions } from 'src/components/Elements'
2+
import { CardItemWithActions, CardLink } from 'src/components/Elements'
33

4-
import { BaseItemPropsType, Article } from 'src/types'
5-
import { format } from 'timeago.js'
64
import { MdAccessTime } from 'react-icons/md'
75
import { ColoredLanguagesBadge } from 'src/components/Elements'
86
import { useUserPreferences } from 'src/stores/preferences'
7+
import { Article, BaseItemPropsType } from 'src/types'
8+
import { format } from 'timeago.js'
99

1010
import { AiTwotoneHeart } from 'react-icons/ai'
1111
import { Attributes } from 'src/lib/analytics'
@@ -43,17 +43,17 @@ const ArticleItem = (props: BaseItemPropsType<Article>) => {
4343

4444
{listingMode === 'normal' && (
4545
<>
46-
<p className="rowDescription">
47-
<span className="rowItem">
48-
<MdAccessTime className={'rowTitleIcon'} />
46+
<p className="m-0 mt-2 flex flex-row flex-wrap items-center gap-x-4">
47+
<span className="flex items-center gap-0.5 text-xs text-ht-caption">
48+
<MdAccessTime />
4949
{format(new Date(item.published_at))}
5050
</span>
51-
<span className="rowItem">
52-
<BiCommentDetail className={'rowTitleIcon'} />
51+
<span className="flex items-center gap-0.5 text-xs text-ht-caption">
52+
<BiCommentDetail />
5353
{item.comments || 0} comments
5454
</span>
55-
<span className="rowItem">
56-
<AiTwotoneHeart className={'rowTitleIcon'} />
55+
<span className="flex items-center gap-0.5 text-xs text-ht-caption">
56+
<AiTwotoneHeart />
5757
{item.reactions || 0} reactions
5858
</span>
5959
</p>

‎src/features/cards/components/indiehackersCard/ArticleItem.tsx

Lines changed: 12 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,12 @@
1-
import { format } from 'timeago.js'
2-
import { VscTriangleUp } from 'react-icons/vsc'
31
import { BiCommentDetail } from 'react-icons/bi'
2+
import { FaChevronUp } from 'react-icons/fa'
43
import { MdAccessTime } from 'react-icons/md'
5-
import { CardLink, CardItemWithActions } from 'src/components/Elements'
4+
import { VscTriangleUp } from 'react-icons/vsc'
5+
import { CardItemWithActions, CardLink } from 'src/components/Elements'
66
import { Attributes } from 'src/lib/analytics'
7-
import { BaseItemPropsType, Article } from 'src/types'
8-
import { FaChevronUp } from 'react-icons/fa'
97
import { useUserPreferences } from 'src/stores/preferences'
8+
import { Article, BaseItemPropsType } from 'src/types'
9+
import { format } from 'timeago.js'
1010

1111
export const ArticleItem = (props: BaseItemPropsType<Article>) => {
1212
const { item, index, analyticsTag } = props
@@ -41,15 +41,15 @@ export const ArticleItem = (props: BaseItemPropsType<Article>) => {
4141
</CardLink>
4242
</p>
4343
{listingMode === 'normal' && (
44-
<div className="rowDetails">
45-
<span className="rowItem inRowItem">
46-
<FaChevronUp className="rowItemIcon" /> {item.reactions} points
44+
<div className="m-0 mt-2 flex flex-row flex-wrap items-center gap-x-4">
45+
<span className="flex items-center gap-0.5 text-xs text-blue-400">
46+
<FaChevronUp /> {item.reactions} points
4747
</span>
48-
<span className="rowItem">
49-
<MdAccessTime className="rowItemIcon" /> {format(new Date(item.published_at))}
48+
<span className="flex items-center gap-0.5 text-xs text-ht-caption">
49+
<MdAccessTime /> {format(new Date(item.published_at))}
5050
</span>
51-
<span className="rowItem">
52-
<BiCommentDetail className="rowItemIcon" /> {item.comments} comments
51+
<span className="flex items-center gap-0.5 text-xs text-ht-caption">
52+
<BiCommentDetail /> {item.comments} comments
5353
</span>
5454
</div>
5555
)}

0 commit comments

Comments
 (0)