Minor UI tweaks for entrelineas.
This commit is contained in:
parent
bbb19240fc
commit
08be5faf14
|
|
@ -96,7 +96,7 @@ function onToggleFavorite() {
|
|||
|
||||
<template>
|
||||
<UDashboardPanel id="entrelinea-detail">
|
||||
<UDashboardNavbar :title="document.origin||title" :toggle="false">
|
||||
<UDashboardNavbar :title="document.studies?.[0]?.title" :toggle="false">
|
||||
<template #leading>
|
||||
<UButton
|
||||
icon="i-lucide-x"
|
||||
|
|
@ -105,9 +105,22 @@ function onToggleFavorite() {
|
|||
class="-ms-1.5"
|
||||
@click="emits('close')"
|
||||
/>
|
||||
<UBadge
|
||||
v-if="document.studies?.[0]?.date"
|
||||
:label="String(document.studies[0].date).toUpperCase()"
|
||||
color="primary"
|
||||
variant="subtle"
|
||||
/>
|
||||
</template>
|
||||
|
||||
<template #right>
|
||||
<UBadge
|
||||
v-if="document.page"
|
||||
:label="`Página ${document.page}`"
|
||||
color="error"
|
||||
variant="subtle"
|
||||
size="sm"
|
||||
/>
|
||||
<UTooltip :text="isFav ? 'Quitar de mi lista' : 'Guardar en mi lista'">
|
||||
<UButton
|
||||
:icon="isFav ? 'i-lucide-bookmark-check' : 'i-lucide-bookmark-plus'"
|
||||
|
|
@ -127,17 +140,19 @@ function onToggleFavorite() {
|
|||
:label="String(document.filter).toUpperCase()"
|
||||
color="neutral"
|
||||
variant="subtle"
|
||||
size="sm"
|
||||
/>
|
||||
<UBadge
|
||||
v-if="document.type"
|
||||
:label="String(document.type).toUpperCase()"
|
||||
color="neutral"
|
||||
variant="subtle"
|
||||
size="sm"
|
||||
/>
|
||||
|
||||
<span v-if="document.page != null">Página {{ document.page }}</span>
|
||||
<UBadge
|
||||
v-if="document.origin"
|
||||
:label="String(document.origin).toUpperCase()"
|
||||
color="neutral"
|
||||
variant="soft"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
|
@ -173,9 +188,14 @@ function onToggleFavorite() {
|
|||
devolvió, si no el HTML crudo del documento. -->
|
||||
<article
|
||||
v-if="bodyHtml"
|
||||
class="prose prose-sm max-w-none dark:prose-invert"
|
||||
>
|
||||
<div
|
||||
v-html="bodyHtml"
|
||||
class="prose prose-sm max-w-none"
|
||||
/>
|
||||
<USeparator class="my-4" />
|
||||
<p class="font-semibold text-sm">{{ document.origin }}</p>
|
||||
</article>
|
||||
<p v-else class="text-sm text-muted">
|
||||
No hay entrelínea para esta coincidencia.
|
||||
</p>
|
||||
|
|
|
|||
|
|
@ -50,7 +50,7 @@ const { locale } = useI18n()
|
|||
* usuario haya puesto en `EXTRA_FILTER_BY`. Es un computed para que se
|
||||
* reevalúe automáticamente cuando cambia el idioma. */
|
||||
const filterBy = computed(() => {
|
||||
const localeFilter = `locale:=${$i18n.locale.value}`
|
||||
const localeFilter = `locale:=${locale.value}`
|
||||
return EXTRA_FILTER_BY ? `${localeFilter} && ${EXTRA_FILTER_BY}` : localeFilter
|
||||
})
|
||||
|
||||
|
|
@ -355,11 +355,11 @@ function highlightedFor(hit: TypesenseHit, field: string): string | null {
|
|||
<div
|
||||
v-for="(hit, index) in hits"
|
||||
:key="hit.document.id ?? index"
|
||||
class="p-4 sm:px-6 text-sm cursor-pointer border-l-2 transition-colors"
|
||||
class="p-4 sm:px-6 text-sm cursor-pointer transition-colors border-b-2"
|
||||
:class="[
|
||||
selected && selected.id === hit.document.id
|
||||
? 'border-primary bg-primary/10 text-highlighted'
|
||||
: 'border-transparent text-toned hover:border-primary hover:bg-primary/5'
|
||||
? 'bg-primary/10 text-highlighted'
|
||||
: 'border-gray-200 text-toned hover:bg-primary/5'
|
||||
]"
|
||||
@click="selected = hit.document"
|
||||
>
|
||||
|
|
@ -367,6 +367,22 @@ function highlightedFor(hit: TypesenseHit, field: string): string | null {
|
|||
<!-- Título pequeño = Origin (cae al id si no hay origin para no
|
||||
dejar la fila huérfana). -->
|
||||
<div class="min-w-0 flex-1 flex gap-2">
|
||||
<UBadge
|
||||
v-if="hit.document?.studies?.[0]?.date"
|
||||
:label="hit.document?.studies?.[0]?.date"
|
||||
size="sm"
|
||||
variant="subtle"
|
||||
color="info"
|
||||
class="mb-1 uppercase"
|
||||
/>
|
||||
<UBadge
|
||||
v-if="hit.document?.page"
|
||||
:label="`Página ${hit.document?.page}`"
|
||||
size="sm"
|
||||
variant="subtle"
|
||||
color="error"
|
||||
class="mb-1 uppercase"
|
||||
/>
|
||||
<UBadge
|
||||
v-if="hit.document?.filter"
|
||||
:label="hit.document?.filter"
|
||||
|
|
@ -383,9 +399,6 @@ function highlightedFor(hit: TypesenseHit, field: string): string | null {
|
|||
color="neutral"
|
||||
class="mb-1 uppercase"
|
||||
/>
|
||||
<div class="text-sm font-semibold tracking-wide truncate">
|
||||
{{ (hit.document.origin as string) || hit.document.id || `entrelinea_${index}` }}
|
||||
</div>
|
||||
</div>
|
||||
<UTooltip :text="isFav(hit.document) ? 'Quitar de mi lista' : 'Guardar en mi lista'">
|
||||
<UButton
|
||||
|
|
@ -399,6 +412,10 @@ function highlightedFor(hit: TypesenseHit, field: string): string | null {
|
|||
</UTooltip>
|
||||
</div>
|
||||
|
||||
<div class="text-sm font-semibold tracking-wide truncate mb-2">
|
||||
{{ (hit.document?.studies?.[0]?.title as string) || hit.document.id || `entrelinea_${index}` }}
|
||||
</div>
|
||||
|
||||
<!-- La entrelínea (text). Si Typesense devolvió un snippet con
|
||||
highlight, lo pintamos con v-html para que aparezca el <mark>;
|
||||
si no, mostramos el HTML crudo de `text`. -->
|
||||
|
|
@ -407,6 +424,12 @@ function highlightedFor(hit: TypesenseHit, field: string): string | null {
|
|||
class="snippet-html text-sm text-toned line-clamp-3"
|
||||
v-html="highlightedFor(hit, 'text') || hit.document.text"
|
||||
/>
|
||||
|
||||
<USeparator class="my-2"/>
|
||||
|
||||
<div class="text-xs text-dimmed">
|
||||
{{ hit.document?.origin }}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div
|
||||
|
|
|
|||
Loading…
Reference in New Issue