Skip to content
Snippets Groups Projects
Verified Commit d57f1db5 authored by Tim Bastin's avatar Tim Bastin :lemon:
Browse files

responsive table

parent 4c0ef0d4
No related branches found
No related tags found
1 merge request!1Translation to de
Hide whitespace changes
Inline Side-by-side
src/components/ResultGrid.tsx
+ 3
− 3
View file @ d57f1db5
......@@ -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
......
src/components/ResultTable.tsx
+ 23
− 17
View file @ d57f1db5
......@@ -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
}
......
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment

Consent

On this website, we use the web analytics service Matomo to analyze and review the use of our website. Through the collected statistics, we can improve our offerings and make them more appealing for you. Here, you can decide whether to allow us to process your data and set corresponding cookies for these purposes, in addition to technically necessary cookies. Further information on data protection—especially regarding "cookies" and "Matomo"—can be found in our privacy policy. You can withdraw your consent at any time.