artifacthub
/
hub
mirror of https://github.com/artifacthub/hub.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Improve versions table on modal 

Signed-off-by: Cintia Sánchez García <cynthiasg@icloud.com>
This commit is contained in:
Cintia Sánchez García 2025-05-06 12:14:49 +02:00
parent f8cd03e123
commit a559c03b85
5 changed files with 19 additions and 13 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
web/src/layout/package/VersionInRow.module.css
View File

@ -1,8 +1,3 @@
.versionCell {
min-width: 50%;
max-width: 400px;
}
.badge {
border-color: var(--bs-orange) !important;
color: var(--bs-orange);

2
web/src/layout/package/VersionInRow.tsx
View File

@ -46,7 +46,7 @@ const VersionInRow = (props: Props) => {
) : (
<button
onClick={() => openPackagePage()}
className={`btn btn-link text-primary ps-0 pt-0 pb-0 border-0 text-truncate d-block text-start ${styles.versionBtn}`}
className="btn btn-link text-primary ps-0 pt-0 pb-0 border-0 text-truncate d-block text-start"
aria-label={`Open version ${props.version}`}
>
{props.version}

8
web/src/layout/package/VersionsModal.module.css
View File

@ -8,6 +8,14 @@
top: -1px;
}
.versionCell {
width: 480px;
}
.appVersionCell {
width: 300px;
}
@media only screen and (max-height: 700px) {
.modalFooter {
display: none;

15
web/src/layout/package/VersionsModal.tsx
View File

@ -105,9 +105,6 @@ const VersionsModal = (props: Props) => {
} else {
sortedAppVersions.forEach((appVersion: string, index: number) => {
const versions = props.sortedVersions.filter((version: VersionData) => version.appVersion === appVersion);
console.log('versions', versions);
versions.forEach((av_version: VersionData) => {
const linkedChannels = getLinkedChannelsToVersion(av_version.version);
@ -163,6 +160,12 @@ const VersionsModal = (props: Props) => {
)}
</div>
{props.sortedVersions.length > 5 && (
<div className={`d-block d-md-none ${styles.legend}`}>
<small className="text-muted fst-italic">Displaying only the first 5 entries</small>
</div>
)}
<div className="d-none d-md-flex flex-row align-items-baseline">
<button
className={`btn btn-link ps-0 pe-1 position-relative text-primary ${styles.btn}`}
@ -175,7 +178,7 @@ const VersionsModal = (props: Props) => {
</div>
</button>
<div className={`text-muted position-relative ${styles.summary}`}>({versions.items.length})</div>
<div className={`text-muted position-relative ${styles.summary}`}>({props.sortedVersions.length})</div>
</div>
<Modal
@ -191,7 +194,7 @@ const VersionsModal = (props: Props) => {
<table className={`table table-striped table-bordered table-sm mb-0 ${styles.table}`}>
<thead>
<tr className={styles.tableTitle}>
<th scope="col">
<th scope="col" className={styles.versionCell}>
<button
onClick={() => setSortedBy('version')}
className="d-flex flex-row justify-content-between btn btn-link text-reset w-100 p-0 m-0 fw-bold"
@ -210,7 +213,7 @@ const VersionsModal = (props: Props) => {
</div>
</button>
</th>
<th scope="col">
<th scope="col" className={styles.appVersionCell}>
<button
onClick={() => setSortedBy('appVersion')}
className="d-flex flex-row justify-content-between btn btn-link text-reset w-100 p-0 m-0 fw-bold"

2
web/src/layout/package/__snapshots__/VersionInRow.test.tsx.snap generated
View File

@ -15,7 +15,7 @@ exports[`VersionInRow creates snapshot 1`] = `
>
<button
aria-label="Open version 1.0.1"
class="btn btn-link text-primary ps-0 pt-0 pb-0 border-0 text-truncate d-block text-start versionBtn"
class="btn btn-link text-primary ps-0 pt-0 pb-0 border-0 text-truncate d-block text-start"
>
1.0.1
</button>