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