Skip to content

Commit

Permalink
chore: fix table layout
Browse files Browse the repository at this point in the history
  • Loading branch information
@fntlnz
fntlnz committed Jul 24, 2024
1 parent e1dbda8 commit 1adad1d
Show file tree
Hide file tree
Showing 5 changed files with 104 additions and 66 deletions.
2 changes: 1 addition & 1 deletion Makefile
View file
Original file line number Diff line number Diff line change
Expand Up @@ -38,5 +38,5 @@ deps: _output/deps/tailwindcss
go mod verify


static/css/output.css: ./static/css/input.css _output/deps/tailwindcss
static/css/output.css: $(GO_FILES) ./static/css/input.css _output/deps/tailwindcss
_output/deps/tailwindcss ./static/css/input.css -o $@
7 changes: 7 additions & 0 deletions pkg/generator/generate.go
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,7 @@ package generator

import (
"context"
"fmt"
"io"
"log/slog"
"os"
Expand Down Expand Up @@ -106,6 +107,9 @@ func (g *Generator) generateRepository(
if err != nil {
return err
}
if repoData == nil {
return fmt.Errorf("empty repo data")
}
err = templates.RenderRepository(w, *repoData)
if err != nil {
return err
Expand All @@ -132,6 +136,9 @@ func (g *Generator) generateIndex(
if err != nil {
log.Warn("could not retrieve repo data", slog.String("repo", repo), logger.ErrAttr(err))
}
if repoData == nil {
continue
}
repositoriesData = append(repositoriesData, *repoData)
}

Expand Down
44 changes: 23 additions & 21 deletions pkg/templates/tmpl/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,37 +8,39 @@
<title>{{.RegistryName}}</title>
</head>

<body class=" bg-gray-100 h-full">
<body class="bg-gray-100 min-w-[240px]">
<header class="bg-white shadow">
<div class="mx-auto max-w-7xl px-4 py-6 sm:px-6 lg:px-8">
<h1 class="text-3xl font-bold tracking-tight text-gray-900">{{.RegistryName}}</h1>
<h1 class="lg:text-3xl xs:text-sm font-bold tracking-tight text-gray-900">{{.RegistryName}}</h1>
</div>

</header>
<main>
<div class="mx-auto max-w-7xl px-4 py-6 sm:px-6 lg:px-8">
<input type="text" id="searchInput" onkeyup="searchImages()" placeholder="Search for images.."
class="w-full p-2 mb-4 border border-gray-300 focus:outline-none focus:ring focus:ring-blue-400">
<table id="imageTable" class="lg:table-fixed table-auto w-full bg-white border">
<thead>
<tr class="bg-gray-100">
<th class="p-2 text-left">Name</th>
<th class="p-2 text-left">Pull Command</th>
</tr>
</thead>
<tbody>
{{range .Repositories}}
<tr>
<td class="p-2"><a class="text-blue-600 hover:text-blue-800 visited:text-purple-600"
href="{{$.AbsoluteDir}}repo/{{.RepositoryName}}">{{.RepositoryName}}</a>
</td>
<td class="p-2 font-mono text-sm">docker pull {{.PullReference}}
<div class="overflow-x-auto">
<table id="imageTable" class="w-full bg-white border divide-gray-200 ">
<thead>
<tr class="bg-gray-100">
<th class="p-2 text-left">Name</th>
<th class="p-2 text-left">Pull Command</th>
</tr>
</thead>
<tbody class="divide-y divide-gray-300">
{{range .Repositories}}
<tr class="[&>*]:whitespace-nowrap [&>*]:px-4 [&>*]:py-2">
<td class="p-2"><a class="text-blue-600 hover:text-blue-800 visited:text-purple-600"
href="{{$.AbsoluteDir}}repo/{{.RepositoryName}}">{{.RepositoryName}}</a>
</td>
<td class="p-2 font-mono text-sm">docker pull {{.PullReference}}

</td>
</tr>
{{end}}
</tbody>
</table>
</td>
</tr>
{{end}}
</tbody>
</table>
</div>
</div>
</main>

Expand Down
57 changes: 30 additions & 27 deletions pkg/templates/tmpl/repository.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,41 +8,44 @@
<title>{{.RepositoryName}} | {{.RegistryName}}</title>
</head>

<body class="bg-gray-100 h-screen w-screen">
<header class="bg-white shadow flex justify-between flex-wrap bg-teal w-screen">
<div class="mx-auto px-4 py-6 sm:px-6 lg:px-8">
<h1 class="text-3xl font-bold tracking-tight text-gray-900"><a
<body class="bg-gray-100 min-w-[240px]">


<header class="bg-white shadow">
<div class="mx-auto max-w-7xl px-4 py-6 sm:px-6 lg:px-8">
<h1 class="lg:text-3xl xs:text-sm font-bold tracking-tight text-gray-900"><a
class="text-blue-600 hover:text-blue-800 visited:text-purple-600"
href="{{.AbsoluteDir}}">{{.RegistryName}}</a>/{{.RepositoryName}}</h1>
</div>

</header>


<main>
<div class="mx-auto max-w-7xl px-4 py-6 sm:px-6 lg:px-8">
<table class="w-full bg-white border">
<thead>
<tr class="bg-gray-100">
<th class="p-2 w-2/12 text-lef td-classt">Name</th>
<th class="p-2 w-2/12 text-left">Tag</th>
<th class="p-2 w-2/12 text-left">Created</th>
<th class="p-2 w-6/12 text-left">Pull Command</th>
</tr>
</thead>
<tbody>
{{range .Tags}}
<tr>
<td class="p-2 ">{{.Name}}</td>
<td class="p-2"><span
class="inline-flex items-center rounded-md bg-gray-50 px-2 py-1 text-xs font-medium text-gray-600 ring-1 ring-inset ring-gray-500/10">{{.Tag}}</span>
</td>
<td class="p-2 text-xs">{{.CreatedAt}}</td>
<td class="p-2 font-mono text-sm">docker pull {{.PullReference}}</td>
</tr>
{{end}}
</tbody>
</table>
<div class="overflow-x-auto">
<table class="w-full bg-white border divide-gray-200 ">
<thead>
<tr class="bg-gray-100">
<th class="p-2 w-2/12 text-lef td-classt">Name</th>
<th class="p-2 w-2/12 text-left">Tag</th>
<th class="p-2 w-2/12 text-left">Created</th>
<th class="p-2 w-6/12 text-left">Pull Command</th>
</tr>
</thead>
<tbody class="divide-y divide-gray-300">
{{range .Tags}}
<tr class="[&>*]:whitespace-nowrap [&>*]:px-4 [&>*]:py-2">
<td class="p-2 ">{{.Name}}</td>
<td class="p-2"><span
class="inline-flex items-center rounded-md bg-gray-50 px-2 py-1 text-xs font-medium text-gray-600 ring-1 ring-inset ring-gray-500/10">{{.Tag}}</span>
</td>
<td class="p-2 text-xs">{{.CreatedAt}}</td>
<td class="p-2 font-mono text-sm">docker pull {{.PullReference}}</td>
</tr>
{{end}}
</tbody>
</table>
</div>
</div>
</main>
<footer class="p-4 text-center text-sm text-gray-600">
Expand Down
60 changes: 43 additions & 17 deletions static/css/output.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -583,10 +583,6 @@ video {
display: table;
}

.h-full {
height: 100%;
}

.h-screen {
height: 100vh;
}
Expand All @@ -603,6 +599,10 @@ video {
width: 100%;
}

.min-w-\[240px\] {
min-width: 240px;
}

.max-w-7xl {
max-width: 80rem;
}
Expand All @@ -611,10 +611,6 @@ video {
max-width: 28rem;
}

.table-auto {
table-layout: auto;
}

.items-center {
align-items: center;
}
Expand All @@ -623,6 +619,26 @@ video {
justify-content: center;
}

.divide-y > :not([hidden]) ~ :not([hidden]) {
--tw-divide-y-reverse: 0;
border-top-width: calc(1px * calc(1 - var(--tw-divide-y-reverse)));
border-bottom-width: calc(1px * var(--tw-divide-y-reverse));
}

.divide-gray-200 > :not([hidden]) ~ :not([hidden]) {
--tw-divide-opacity: 1;
border-color: rgb(229 231 235 / var(--tw-divide-opacity));
}

.divide-gray-300 > :not([hidden]) ~ :not([hidden]) {
--tw-divide-opacity: 1;
border-color: rgb(209 213 219 / var(--tw-divide-opacity));
}

.overflow-x-auto {
overflow-x: auto;
}

.rounded-full {
border-radius: 9999px;
}
Expand Down Expand Up @@ -710,11 +726,6 @@ video {
font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
}

.text-3xl {
font-size: 1.875rem;
line-height: 2.25rem;
}

.text-4xl {
font-size: 2.25rem;
line-height: 2.5rem;
Expand Down Expand Up @@ -829,12 +840,27 @@ video {
}

@media (min-width: 1024px) {
.lg\:table-fixed {
table-layout: fixed;
}

.lg\:px-8 {
padding-left: 2rem;
padding-right: 2rem;
}

.lg\:text-3xl {
font-size: 1.875rem;
line-height: 2.25rem;
}
}

.\[\&\>\*\]\:whitespace-nowrap>* {
white-space: nowrap;
}

.\[\&\>\*\]\:px-4>* {
padding-left: 1rem;
padding-right: 1rem;
}

.\[\&\>\*\]\:py-2>* {
padding-top: 0.5rem;
padding-bottom: 0.5rem;
}

0 comments on commit 1adad1d

Please sign in to comment.