Skip to content

Commit 76d01e2

Browse files
KaranNegi20Febarkid15r
KaranNegi20Feb
and
arkid15r
authored
Fixes 1396: UI for Mobile Homepage fixed (OWASP#1404)
* fix-home-page * arrange-side-by-side * arrange-side-by-side * Update code --------- Co-authored-by: Arkadii Yakovets <[email protected]> Co-authored-by: Arkadii Yakovets <[email protected]>
1 parent 897613a commit 76d01e2

File tree

4 files changed

+32
-29
lines changed

4 files changed

+32
-29
lines changed

‎frontend/src/app/page.tsx‎

Lines changed: 11 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -171,15 +171,15 @@ export default function Home() {
171171
>
172172
<TruncatedText text={event.name} />
173173
</button>
174-
<div className="flex flex-col flex-wrap items-start text-sm text-gray-600 dark:text-gray-400 md:flex-row">
174+
<div className="flex flex-wrap items-center text-sm text-gray-600 dark:text-gray-400">
175175
<div className="mr-2 flex items-center">
176176
<FontAwesomeIcon icon={faCalendar} className="mr-2 h-4 w-4" />
177177
<span>{formatDateRange(event.startDate, event.endDate)}</span>
178178
</div>
179179
{event.suggestedLocation && (
180-
<div className="flex items-center">
180+
<div className="flex flex-1 items-center overflow-hidden">
181181
<FontAwesomeIcon icon={faMapMarkerAlt} className="mr-1 h-4 w-4" />
182-
<span>{event.suggestedLocation}</span>
182+
<TruncatedText text={event.suggestedLocation} />
183183
</div>
184184
)}
185185
</div>
@@ -227,14 +227,14 @@ export default function Home() {
227227
<FontAwesomeIcon icon={faCalendar} className="mr-2 h-4 w-4" />
228228
<span>{formatDate(chapter.createdAt)}</span>
229229
</div>
230-
<div className="mr-4 flex flex-1 items-center overflow-hidden">
230+
<div className="flex flex-1 items-center overflow-hidden">
231231
<FontAwesomeIcon icon={faMapMarkerAlt} className="mr-2 h-4 w-4" />
232232
<TruncatedText text={chapter.suggestedLocation} />
233233
</div>
234234
</div>
235235

236236
{chapter.leaders.length > 0 && (
237-
<div className="mr-4 mt-1 flex items-center gap-x-2 text-sm text-gray-600 dark:text-gray-400">
237+
<div className="mt-1 flex items-center gap-x-2 text-sm text-gray-600 dark:text-gray-400">
238238
{' '}
239239
<FontAwesomeIcon icon={faUsers} className="h-4 w-4" />
240240
<LeadersList leaders={String(chapter.leaders)} />
@@ -265,22 +265,21 @@ export default function Home() {
265265
<TruncatedText text={project.name} />
266266
</h3>
267267
</Link>
268-
<div className="flex items-center text-sm text-gray-600 dark:text-gray-400">
268+
<div className="flex flex-wrap items-center text-sm text-gray-600 dark:text-gray-400">
269269
<div className="mr-4 flex items-center">
270270
<FontAwesomeIcon icon={faCalendar} className="mr-2 h-4 w-4" />
271271
<span>{formatDate(project.createdAt)}</span>
272272
</div>
273-
<div className="mr-4 flex items-center">
273+
<div className="mr-4 flex flex-1 items-center overflow-hidden">
274274
<FontAwesomeIcon
275275
icon={getProjectIcon(project.type) as IconProp}
276276
className="mr-2 h-4 w-4"
277277
/>
278-
<span>{capitalize(project.type)}</span>
278+
<TruncatedText text={capitalize(project.type)} />
279279
</div>
280280
</div>
281-
282281
{project.leaders.length > 0 && (
283-
<div className="mr-4 mt-1 flex items-center gap-x-2 text-sm text-gray-600 dark:text-gray-400">
282+
<div className="mt-1 flex items-center gap-x-2 text-sm text-gray-600 dark:text-gray-400">
284283
<FontAwesomeIcon icon={faUsers} className="h-4 w-4" />
285284
<LeadersList leaders={String(project.leaders)} />
286285
</div>
@@ -355,12 +354,12 @@ export default function Home() {
355354
<TruncatedText text={post.title} />
356355
</Link>
357356
</h3>
358-
<div className="mt-2 flex flex-col flex-wrap items-start text-sm text-gray-600 dark:text-gray-400 md:flex-row">
357+
<div className="mt-2 flex flex-wrap items-center text-sm text-gray-600 dark:text-gray-400">
359358
<div className="mr-4 flex items-center">
360359
<FontAwesomeIcon icon={faCalendar} className="mr-2 h-4 w-4" />
361360
<span>{formatDate(post.publishedAt)}</span>
362361
</div>
363-
<div className="flex items-center">
362+
<div className="flex flex-1 items-center overflow-hidden">
364363
<FontAwesomeIcon icon={faUser} className="mr-2 h-4 w-4" />
365364
<LeadersList leaders={post.authorName} />
366365
</div>

‎frontend/src/components/RecentIssues.tsx‎

Lines changed: 7 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,7 @@ import { ProjectIssuesType } from 'types/project'
66
import { formatDate } from 'utils/dateFormatter'
77
import AnchorTitle from './AnchorTitle'
88
import ItemCardList from './ItemCardList'
9+
import { TruncatedText } from './TruncatedText'
910

1011
interface RecentIssuesProps {
1112
data: ProjectIssuesType[]
@@ -30,23 +31,23 @@ const RecentIssues: React.FC<RecentIssuesProps> = ({ data, showAvatar = true })
3031
showAvatar={showAvatar}
3132
icon={faCircleExclamation}
3233
renderDetails={(item) => (
33-
<div className="mt-2 flex flex-col flex-wrap items-start text-sm text-gray-600 dark:text-gray-400 md:flex-row">
34-
<div className="flex items-center">
34+
<div className="mt-2 flex flex-wrap items-center text-sm text-gray-600 dark:text-gray-400">
35+
<div className="mr-4 flex items-center">
3536
<FontAwesomeIcon icon={faCalendar} className="mr-2 h-4 w-4" />
3637
<span>{formatDate(item.createdAt)}</span>
3738
</div>
3839
{item?.repositoryName && (
39-
<div className="item-center flex">
40-
<FontAwesomeIcon icon={faFolderOpen} className="ml-4 mr-2 h-4 w-4" />
40+
<div className="flex flex-1 items-center overflow-hidden">
41+
<FontAwesomeIcon icon={faFolderOpen} className="mr-2 h-5 w-4" />
4142
<button
42-
className="cursor-pointer text-gray-600 hover:underline dark:text-gray-400"
43+
className="cursor-pointer overflow-hidden text-ellipsis whitespace-nowrap text-gray-600 hover:underline dark:text-gray-400"
4344
onClick={() =>
4445
router.push(
4546
`/organizations/${item.organizationName}/repositories/${item.repositoryName || ''}`
4647
)
4748
}
4849
>
49-
{item.repositoryName}
50+
<TruncatedText text={item.repositoryName} />
5051
</button>
5152
</div>
5253
)}

‎frontend/src/components/RecentPullRequests.tsx‎

Lines changed: 7 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,7 @@ import { ItemCardPullRequests } from 'types/user'
77
import { formatDate } from 'utils/dateFormatter'
88
import AnchorTitle from './AnchorTitle'
99
import ItemCardList from './ItemCardList'
10+
import { TruncatedText } from './TruncatedText'
1011

1112
interface RecentPullRequestsProps {
1213
data: ItemCardPullRequests[] | PullRequestsType[]
@@ -31,24 +32,24 @@ const RecentPullRequests: React.FC<RecentPullRequestsProps> = ({ data, showAvata
3132
icon={faCodePullRequest}
3233
showAvatar={showAvatar}
3334
renderDetails={(item) => (
34-
<div className="mt-2 flex flex-col flex-wrap items-start text-sm text-gray-600 dark:text-gray-400 md:flex-row">
35-
<div className="flex items-center">
35+
<div className="mt-2 flex flex-wrap items-center text-sm text-gray-600 dark:text-gray-400">
36+
<div className="mr-4 flex items-center">
3637
<FontAwesomeIcon icon={faCalendar} className="mr-2 h-4 w-4" />
3738
<span>{formatDate(item.createdAt)}</span>
3839
</div>
3940

4041
{item?.repositoryName && (
41-
<div className="item-center flex">
42-
<FontAwesomeIcon icon={faFolderOpen} className="ml-4 mr-2 h-4 w-4" />
42+
<div className="mr-4 flex flex-1 items-center overflow-hidden">
43+
<FontAwesomeIcon icon={faFolderOpen} className="mr-2 h-5 w-4" />
4344
<button
44-
className="cursor-pointer text-gray-600 hover:underline dark:text-gray-400"
45+
className="cursor-pointer overflow-hidden text-ellipsis whitespace-nowrap text-gray-600 hover:underline dark:text-gray-400"
4546
onClick={() =>
4647
router.push(
4748
`/organizations/${item.organizationName}/repositories/${item.repositoryName || ''}`
4849
)
4950
}
5051
>
51-
{item.repositoryName}
52+
<TruncatedText text={item.repositoryName} />
5253
</button>
5354
</div>
5455
)}

‎frontend/src/components/RecentReleases.tsx‎

Lines changed: 7 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -79,20 +79,22 @@ const RecentReleases: React.FC<RecentReleasesProps> = ({
7979
</Link>
8080
</h3>
8181
</div>
82-
<div className="ml-0.5 w-full">
83-
<div className="mt-2 flex items-center text-sm text-gray-600 dark:text-gray-400">
82+
<div className="mt-2 flex flex-wrap items-center text-sm text-gray-600 dark:text-gray-400">
83+
<div className="mr-4 flex items-center">
8484
<FontAwesomeIcon icon={faCalendar} className="mr-2 h-4 w-4" />
8585
<span>{formatDate(item.publishedAt)}</span>
86-
<FontAwesomeIcon icon={faFolderOpen} className="ml-4 mr-2 h-4 w-4" />
86+
</div>
87+
<div className="flex flex-1 items-center overflow-hidden">
88+
<FontAwesomeIcon icon={faFolderOpen} className="mr-2 h-5 w-4" />
8789
<button
88-
className="cursor-pointer text-gray-600 hover:underline dark:text-gray-400"
90+
className="cursor-pointer overflow-hidden text-ellipsis whitespace-nowrap text-gray-600 hover:underline dark:text-gray-400"
8991
onClick={() =>
9092
router.push(
9193
`/organizations/${item?.organizationName}/repositories/${item.repositoryName || ''}`
9294
)
9395
}
9496
>
95-
{item.repositoryName}
97+
<TruncatedText text={item.repositoryName} />
9698
</button>
9799
</div>
98100
</div>

0 commit comments

Comments
 (0)