tea/browsertrix
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Fix browser profile table alignment (#322)

Browse Source
This commit is contained in:
sua yoo 2022-09-26 17:14:08 -07:00 committed by GitHub
parent 6e9fd96a64
commit 20bd8ceecb
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 9 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

18
frontend/src/pages/archive/browser-profiles-list.ts
View File

@ -90,18 +90,18 @@ export class BrowserProfilesList extends LiteElement {
private renderTable() {
return html`
<div role="table">
<div class="mb-2 px-4" role="rowgroup">
<div class="mb-2 px-1" role="rowgroup">
<div
class="hidden md:grid grid-cols-7 gap-3 md:gap-5 text-sm text-neutral-500"
class="hidden md:grid grid-cols-8 gap-3 md:gap-5 text-sm text-neutral-500"
role="row"
>
<div class="col-span-3" role="columnheader" aria-sort="none">
<div class="col-span-3 px-2" role="columnheader" aria-sort="none">
${msg("Description")}
</div>
<div class="col-span-1" role="columnheader" aria-sort="none">
<div class="col-span-1 px-2" role="columnheader" aria-sort="none">
${msg("Created")}
</div>
<div class="col-span-3" role="columnheader" aria-sort="none">
<div class="col-span-2 px-2" role="columnheader" aria-sort="none">
${msg("Visited URLs")}
</div>
</div>
@ -126,22 +126,22 @@ export class BrowserProfilesList extends LiteElement {
private renderItem(data: Profile) {
return html`
<a
class="block p-4 leading-none hover:bg-zinc-50 hover:text-primary border-t first:border-t-0 transition-colors"
class="block p-1 leading-none hover:bg-zinc-50 hover:text-primary border-t first:border-t-0 transition-colors"
href=${`/archives/${this.archiveId}/browser-profiles/profile/${data.id}`}
@click=${this.navLink}
title=${data.name}
>
<div class="grid grid-cols-8 gap-3 md:gap-5" role="row">
<div class="col-span-8 md:col-span-3" role="cell">
<div class="col-span-8 md:col-span-3 p-2" role="cell">
<div class="font-medium mb-1">${data.name}</div>
<div class="text-sm truncate" title=${data.description}>
${data.description}
</div>
</div>
<div class="col-span-8 md:col-span-1 text-sm" role="cell">
<div class="col-span-8 md:col-span-1 p-2 text-sm" role="cell">
${new Date(data.created).toLocaleDateString()}
</div>
<div class="col-span-7 md:col-span-3 text-sm" role="cell">
<div class="col-span-7 md:col-span-3 p-2 text-sm" role="cell">
${data.origins.join(", ")}
</div>
<div class="col-span-1 md:col-span-1 flex items-center justify-end">