chore(templates): component-ize things
All checks were successful
continuous-integration/drone/push Build is passing
All checks were successful
continuous-integration/drone/push Build is passing
This commit is contained in:
14
templates/components/button.tmpl
Normal file
14
templates/components/button.tmpl
Normal file
@@ -0,0 +1,14 @@
|
||||
<!-- Variant -->
|
||||
{{ $baseClass := "transition duration-100 ease-in font-medium w-full h-full px-2 py-1 text-white" }}
|
||||
{{ if eq .Variant "Secondary" }}
|
||||
{{ $baseClass = printf "bg-black shadow-md hover:text-black hover:bg-white %s" $baseClass }}
|
||||
{{ else }}
|
||||
{{ $baseClass = printf "bg-gray-500 dark:text-gray-800 hover:bg-gray-800 dark:hover:bg-gray-100 %s" $baseClass }}
|
||||
{{ end }}
|
||||
<!-- Type -->
|
||||
{{ if eq .Type "Link" }}
|
||||
<a href="{{ .URL }}" class="text-center {{ $baseClass }}" type="submit">{{ .Title }}</a>
|
||||
{{ else }}
|
||||
<button class="{{ $baseClass }}" type="submit" {{ if .FormName }} form="{{ .FormName}}" {{ end }}>{{ .Title }}
|
||||
</button>
|
||||
{{ end }}
|
||||
43
templates/components/document-card.tmpl
Normal file
43
templates/components/document-card.tmpl
Normal file
@@ -0,0 +1,43 @@
|
||||
<div class="w-full relative">
|
||||
<div class="flex gap-4 w-full h-full p-4 shadow-lg bg-white dark:bg-gray-700 rounded">
|
||||
<div class="min-w-fit my-auto h-48 relative">
|
||||
<a href="./documents/{{.ID}}">
|
||||
<img class="rounded object-cover h-full" src="./documents/{{.ID}}/cover" />
|
||||
</a>
|
||||
</div>
|
||||
<div class="flex flex-col justify-around dark:text-white w-full text-sm">
|
||||
<div class="inline-flex shrink-0 items-center">
|
||||
<div>
|
||||
<p class="text-gray-400">Title</p>
|
||||
<p class="font-medium">{{ or .Title "Unknown" }}</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="inline-flex shrink-0 items-center">
|
||||
<div>
|
||||
<p class="text-gray-400">Author</p>
|
||||
<p class="font-medium">{{ or .Author "Unknown" }}</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="inline-flex shrink-0 items-center">
|
||||
<div>
|
||||
<p class="text-gray-400">Progress</p>
|
||||
<p class="font-medium">{{ .Percentage }}%</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="inline-flex shrink-0 items-center">
|
||||
<div>
|
||||
<p class="text-gray-400">Time Read</p>
|
||||
<p class="font-medium">{{ niceSeconds .TotalTimeSeconds }}</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="absolute flex flex-col gap-2 right-4 bottom-4 text-gray-500 dark:text-gray-400">
|
||||
<a href="./activity?document={{ .ID }}">{{ template "svg/activity" }}</a>
|
||||
{{ if .Filepath }}
|
||||
<a href="./documents/{{.ID}}/file">{{ template "svg/download" }}</a>
|
||||
{{ else }}
|
||||
{{ template "svg/download" (dict "Disabled" true) }}
|
||||
{{ end }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
12
templates/components/info-card.tmpl
Normal file
12
templates/components/info-card.tmpl
Normal file
@@ -0,0 +1,12 @@
|
||||
{{ if .Link }}<a href="{{ .Link }}" {{ else }} <div {{ end }}class="w-full">
|
||||
<div class="flex gap-4 w-full p-4 bg-white shadow-lg dark:bg-gray-700 rounded">
|
||||
<div class="flex flex-col justify-around dark:text-white w-full text-sm">
|
||||
<p class="text-2xl font-bold text-black dark:text-white">{{ .Size }}</p>
|
||||
<p class="text-sm text-gray-400">{{ .Title }}</p>
|
||||
</div>
|
||||
</div>
|
||||
{{ if .Link }}
|
||||
</a>
|
||||
{{ else }}
|
||||
</div>
|
||||
{{ end }}
|
||||
20
templates/components/key-val-edit.tmpl
Normal file
20
templates/components/key-val-edit.tmpl
Normal file
@@ -0,0 +1,20 @@
|
||||
<div class="relative">
|
||||
<div class="text-gray-500 inline-flex gap-2 relative">
|
||||
<p>{{ .Title }}</p>
|
||||
<label class="my-auto cursor-pointer" for="edit-{{ .FormValue }}-button">
|
||||
{{ template "svg/edit" (dict "Size" 18) }}
|
||||
</label>
|
||||
<input type="checkbox"
|
||||
id="edit-{{ .FormValue }}-button"
|
||||
class="hidden css-button" />
|
||||
<div class="absolute z-30 top-7 right-0 p-3 transition-all duration-200 bg-gray-200 rounded shadow-lg shadow-gray-500 dark:shadow-gray-900 dark:bg-gray-600">
|
||||
<form method="POST"
|
||||
action="{{ .URL }}"
|
||||
class="flex flex-col gap-2 text-black dark:text-white text-sm">
|
||||
<input type="text" id="{{ .FormValue }}" name="{{ .FormValue }}" value="{{ or .Value "N/A" }}" class="p-2 bg-gray-300 text-black dark:bg-gray-700 dark:text-white" />
|
||||
{{ template "component/button" (dict "Title" "Save") }}
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
<p class="font-medium text-lg">{{ or .Value "N/A" }}</p>
|
||||
</div>
|
||||
102
templates/components/metadata.tmpl
Normal file
102
templates/components/metadata.tmpl
Normal file
@@ -0,0 +1,102 @@
|
||||
{{ if .Error }}
|
||||
<div class="absolute top-0 left-0 w-full h-full z-50">
|
||||
<div class="fixed top-0 left-0 bg-black opacity-50 w-screen h-screen"></div>
|
||||
<div class="relative flex flex-col gap-4 p-4 max-h-[95%] bg-white dark:bg-gray-800 overflow-scroll -translate-x-2/4 -translate-y-2/4 top-1/2 left-1/2 w-5/6 overflow-hidden shadow rounded">
|
||||
<div class="text-center">
|
||||
<h3 class="text-lg font-bold leading-6 dark:text-gray-300">No Metadata Results Found</h3>
|
||||
</div>
|
||||
{{ template "component/button" (dict
|
||||
"Title" "Back to Document"
|
||||
"Type" "Link"
|
||||
"URL" (printf "/documents/%s" .ID)
|
||||
)}}
|
||||
</div>
|
||||
</div>
|
||||
{{ end }}
|
||||
{{ if .Metadata }}
|
||||
<div class="absolute top-0 left-0 w-full h-full z-50">
|
||||
<div class="fixed top-0 left-0 bg-black opacity-50 w-screen h-screen"></div>
|
||||
<div class="relative max-h-[95%] bg-white dark:bg-gray-800 overflow-scroll -translate-x-2/4 -translate-y-2/4 top-1/2 left-1/2 w-5/6 overflow-hidden shadow rounded">
|
||||
<div class="py-5 text-center">
|
||||
<h3 class="text-lg font-bold leading-6 dark:text-gray-300">Metadata Results</h3>
|
||||
</div>
|
||||
<form id="metadata-save"
|
||||
method="POST"
|
||||
action="/documents/{{ .ID }}/edit"
|
||||
class="text-black dark:text-white border-b dark:border-black">
|
||||
<dl>
|
||||
<div class="p-3 bg-gray-100 dark:bg-gray-900 grid grid-cols-3 gap-4 sm:px-6">
|
||||
<dt class="my-auto font-medium text-gray-500">Cover</dt>
|
||||
<dd class="mt-1 text-sm sm:mt-0 sm:col-span-2">
|
||||
<img class="rounded object-fill h-32"
|
||||
src="https://books.google.com/books/content/images/frontcover/{{ .Metadata.ID }}?fife=w480-h690" />
|
||||
</dd>
|
||||
</div>
|
||||
<div class="p-3 bg-white dark:bg-gray-800 grid grid-cols-3 gap-4 sm:px-6">
|
||||
<dt class="my-auto font-medium text-gray-500">Title</dt>
|
||||
<dd class="mt-1 text-sm sm:mt-0 sm:col-span-2">
|
||||
{{ or .Metadata.Title "N/A" }}
|
||||
</dd>
|
||||
</div>
|
||||
<div class="p-3 bg-gray-100 dark:bg-gray-900 grid grid-cols-3 gap-4 sm:px-6">
|
||||
<dt class="my-auto font-medium text-gray-500">Author</dt>
|
||||
<dd class="mt-1 text-sm sm:mt-0 sm:col-span-2">
|
||||
{{ or .Metadata.Author "N/A" }}
|
||||
</dd>
|
||||
</div>
|
||||
<div class="p-3 bg-white dark:bg-gray-800 grid grid-cols-3 gap-4 sm:px-6">
|
||||
<dt class="my-auto font-medium text-gray-500">ISBN 10</dt>
|
||||
<dd class="mt-1 text-sm sm:mt-0 sm:col-span-2">
|
||||
{{ or .Metadata.ISBN10 "N/A" }}
|
||||
</dd>
|
||||
</div>
|
||||
<div class="p-3 bg-gray-100 dark:bg-gray-900 grid grid-cols-3 gap-4 sm:px-6">
|
||||
<dt class="my-auto font-medium text-gray-500">ISBN 13</dt>
|
||||
<dd class="mt-1 text-sm sm:mt-0 sm:col-span-2">
|
||||
{{ or .Metadata.ISBN13 "N/A" }}
|
||||
</dd>
|
||||
</div>
|
||||
<div class="p-3 bg-white dark:bg-gray-800 sm:grid sm:grid-cols-3 sm:gap-4 px-6">
|
||||
<dt class="my-auto font-medium text-gray-500">Description</dt>
|
||||
<dd class="max-h-[10em] overflow-scroll mt-1 sm:mt-0 sm:col-span-2">
|
||||
{{ or .Metadata.Description "N/A" }}
|
||||
</dd>
|
||||
</div>
|
||||
</dl>
|
||||
<div class="hidden">
|
||||
<input type="text" id="title" name="title" value="{{ .Metadata.Title }}" />
|
||||
<input type="text" id="author" name="author" value="{{ .Metadata.Author }}" />
|
||||
<input type="text"
|
||||
id="description"
|
||||
name="description"
|
||||
value="{{ .Metadata.Description }}" />
|
||||
<input type="text"
|
||||
id="isbn_10"
|
||||
name="isbn_10"
|
||||
value="{{ .Metadata.ISBN10 }}" />
|
||||
<input type="text"
|
||||
id="isbn_13"
|
||||
name="isbn_13"
|
||||
value="{{ .Metadata.ISBN13 }}" />
|
||||
<input type="text"
|
||||
id="cover_gbid"
|
||||
name="cover_gbid"
|
||||
value="{{ .Metadata.ID }}" />
|
||||
</div>
|
||||
</form>
|
||||
<div class="flex justify-end">
|
||||
<div class="flex gap-4 m-4 w-48">
|
||||
{{ template "component/button" (dict
|
||||
"Title" "Cancel"
|
||||
"Type" "Link"
|
||||
"URL" (printf "/documents/%s" .ID)
|
||||
)}}
|
||||
{{ template "component/button" (dict
|
||||
"Title" "Save"
|
||||
"FormName" "metadata-save"
|
||||
)}}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{{ end }}
|
||||
39
templates/components/streak-card.tmpl
Normal file
39
templates/components/streak-card.tmpl
Normal file
@@ -0,0 +1,39 @@
|
||||
<div class="w-full">
|
||||
<div class="relative w-full px-4 py-6 bg-white shadow-lg dark:bg-gray-700 rounded">
|
||||
<p class="text-sm font-semibold text-gray-700 border-b border-gray-200 w-max dark:text-white dark:border-gray-500">
|
||||
{{ if eq .Window "WEEK" }}
|
||||
Weekly Read Streak
|
||||
{{ else }}
|
||||
Daily Read Streak
|
||||
{{ end }}
|
||||
</p>
|
||||
<div class="flex items-end my-6 space-x-2">
|
||||
<p class="text-5xl font-bold text-black dark:text-white">{{ .CurrentStreak }}</p>
|
||||
</div>
|
||||
<div class="dark:text-white">
|
||||
<div class="flex items-center justify-between pb-2 mb-2 text-sm border-b border-gray-200">
|
||||
<div>
|
||||
<p>
|
||||
{{ if eq .Window "WEEK" }} Current Weekly Streak {{ else }}
|
||||
Current Daily Streak {{ end }}
|
||||
</p>
|
||||
<div class="flex items-end text-sm text-gray-400">{{ .CurrentStreakStartDate }} ➞ {{ .CurrentStreakEndDate }}</div>
|
||||
</div>
|
||||
<div class="flex items-end font-bold">{{ .CurrentStreak }}</div>
|
||||
</div>
|
||||
<div class="flex items-center justify-between pb-2 mb-2 text-sm">
|
||||
<div>
|
||||
<p>
|
||||
{{ if eq .Window "WEEK" }}
|
||||
Best Weekly Streak
|
||||
{{ else }}
|
||||
Best Daily Streak
|
||||
{{ end }}
|
||||
</p>
|
||||
<div class="flex items-end text-sm text-gray-400">{{ .MaxStreakStartDate }} ➞ {{ .MaxStreakEndDate }}</div>
|
||||
</div>
|
||||
<div class="flex items-end font-bold">{{ .MaxStreak }}</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
28
templates/components/table.tmpl
Normal file
28
templates/components/table.tmpl
Normal file
@@ -0,0 +1,28 @@
|
||||
{{ $rows := .Rows }}
|
||||
{{ $cols := .Columns }}
|
||||
{{ $keys := .Keys }}
|
||||
<table class="min-w-full leading-normal bg-white dark:bg-gray-700 text-sm">
|
||||
<thead class="text-gray-800 dark:text-gray-400">
|
||||
<tr>
|
||||
{{ range $col := $cols }}
|
||||
<th class="p-3 font-normal text-left uppercase border-b border-gray-200 dark:border-gray-800">{{ $col }}</th>
|
||||
{{ end }}
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody class="text-black dark:text-white">
|
||||
{{ if not $rows }}
|
||||
<tr>
|
||||
<td class="text-center p-3" colspan="4">No Results</td>
|
||||
</tr>
|
||||
{{ end }}
|
||||
{{ range $row := $rows }}
|
||||
<tr>
|
||||
{{ range $key := $keys }}
|
||||
<td class="p-3 border-b border-gray-200">
|
||||
<p>{{ index (fields $row) $key }}</p>
|
||||
</td>
|
||||
{{ end }}
|
||||
</tr>
|
||||
{{ end }}
|
||||
</tbody>
|
||||
</table>
|
||||
Reference in New Issue
Block a user