diff --git a/src/components/ResultGrid.tsx b/src/components/ResultGrid.tsx index 5144557d5e17a4ffe3554c0e5f77addc2d257470..f9ea230ef88e8aaa140165f53e93872b87cc0d93 100644 --- a/src/components/ResultGrid.tsx +++ b/src/components/ResultGrid.tsx @@ -53,7 +53,7 @@ export default function ResultGrid({ currentScan }: Props) { } </a> </div> - <div className="-mx-6 grid grid-cols-1 gap-0.5 overflow-hidden px-6 sm:mx-0 sm:rounded-2xl sm:px-0 md:grid-cols-3"> + <div className="-mx-6 grid grid-cols-1 gap-0.5 overflow-hidden px-6 sm:mx-0 sm:grid-cols-2 sm:rounded-2xl sm:px-0 md:grid-cols-2 lg:grid-cols-3"> {currentScan.runs[0].properties.testedRepository && currentScan?.runs[0].properties.badges .sort(sortBadges) @@ -64,8 +64,8 @@ export default function ResultGrid({ currentScan }: Props) { > <div className="relative aspect-square"> {!badge.badgeGranted && ( - <div className="absolute right-0 top-0 -translate-y-1/2 translate-x-1/2 rotate-45 bg-red-600 px-10 py-2 text-xs font-bold text-white"> - Nicht gewährt + <div className="absolute right-0 top-0 -translate-y-1/2 translate-x-1/2 rotate-45 bg-red-600 px-10 py-2 text-center text-xs font-bold text-white"> + Verweigert </div> )} <Image diff --git a/src/components/ResultTable.tsx b/src/components/ResultTable.tsx index 9a2ca8ede5b44a26ae71520ecd18864ac88cc2f9..99feeeb320c14dd2b4dc5c64a242176d72905694 100644 --- a/src/components/ResultTable.tsx +++ b/src/components/ResultTable.tsx @@ -13,7 +13,7 @@ interface Props { const translateCriteriaStatus = (status: string) => { switch (status) { case 'open': - return 'Konnte nicht überprüft werden' + return 'Offen' case 'pass': return 'Bestanden' case 'fail': @@ -59,7 +59,7 @@ export default function ResultTable({ currentScan }: Props) { className="mt-8 rounded-lg bg-gray-100 px-4 py-2" > <details className=""> - <summary className="relative flex cursor-pointer flex-row justify-between text-lg font-medium text-gray-900"> + <summary className="relative flex cursor-pointer flex-row justify-between font-medium text-gray-900 md:text-lg"> <span> {translateBadge( badge.badgeId, @@ -74,26 +74,26 @@ export default function ResultTable({ currentScan }: Props) { className="ml-2" > {badge.badgeGranted - ? 'Gewährt' - : 'Nicht gewährt'} + ? 'Verliehen' + : 'Verweigert'} </Badge> </span> <div className="flex flex-row items-center gap-2"> - <span className="text-sm text-gray-500"> + <span className="hidden text-sm text-gray-500 md:inline-block"> Mehr informationen </span> <ChevronDownIcon className="w-4" /> </div> </summary> - <div className="mt-8"> + <div className="md:mt-8"> <div className="overflow-x-aut"> <div className="inline-block min-w-full py-2 align-middle"> - <table className="min-w-full divide-y divide-gray-400"> - <thead> + <table className="flex min-w-full divide-gray-400 md:table md:divide-y"> + <thead className="hidden md:table-header-group"> <tr className="grid grid-cols-6"> <th scope="col" - className="col-span-1 py-3.5 pl-4 pr-3 text-left font-semibold sm:pl-6 lg:pl-8" + className="col-span-1 py-3.5 pr-3 text-left font-semibold lg:pl-8" > Überprüfung </th> @@ -122,13 +122,13 @@ export default function ResultTable({ currentScan }: Props) { (criteria) => ( <tr key={`${badge.badgeId}-${badge.badgeLevel}-${criteria.ruleId}`} - className="grid grid-cols-6" + className="grid grid-cols-1 md:grid-cols-6" > <td title={ criteria.ruleId } - className="col-span-1 overflow-hidden overflow-ellipsis whitespace-nowrap py-4 pl-4 pr-3 font-medium text-gray-900 sm:pl-6 lg:pl-8" + className="col-span-1 overflow-hidden overflow-ellipsis whitespace-nowrap py-4 font-medium text-gray-900 md:pr-3 lg:pl-8" > { criteria.ruleId.split( @@ -136,8 +136,8 @@ export default function ResultTable({ currentScan }: Props) { )[0] } </td> - <td className="col-span-1 whitespace-nowrap px-3 py-4"> - <div className="flex items-center justify-end gap-x-2 sm:justify-start"> + <td className="col-span-1 whitespace-nowrap py-4 md:px-3"> + <div className="flex items-center justify-end gap-x-2 md:justify-start"> <span className="relative flex size-2"> <span className={cn( @@ -164,19 +164,25 @@ export default function ResultTable({ currentScan }: Props) { )} ></span> </span> - <div className="hidden sm:block"> + <span className="w-full"> {translateCriteriaStatus( criteria.status, )} - </div> + </span> </div> </td> - <td className="col-span-2 px-3 py-4"> + <td className="col-span-2 py-4 md:px-3"> + <b className="md:hidden"> + Beschreibung:{' '} + </b> { criteria.description } </td> - <td className="col-span-2 px-3 py-4"> + <td className="col-span-2 py-4 md:px-3"> + <b className="md:hidden"> + Nachweis:{' '} + </b> { criteria.evidence }