mejorar layout en pantallas chicas

This commit is contained in:
Cat /dev/Nulo 2023-12-13 01:14:05 -03:00
parent e39fb851bf
commit f006df6089
3 changed files with 11 additions and 7 deletions

View file

@ -10,8 +10,8 @@
target="_blank" target="_blank"
rel="noopener" rel="noopener"
> >
<ExternalLink fill="currentColor" class="h-4" /> <ExternalLink fill="currentColor" class="h-4 shrink-0" />
<span class="underline"> <span class="w-full break-words underline">
<slot>Fuente</slot> <slot>Fuente</slot>
</span> </span>
</a> </a>

View file

@ -54,7 +54,9 @@
e.datasetIdentifier === dataset.identifier && e.datasetIdentifier === dataset.identifier &&
e.distributionIdentifier === dist.identifier, e.distributionIdentifier === dist.identifier,
)} )}
<li class="flex items-center justify-between px-6 py-5"> <li
class="flex flex-col items-center items-stretch justify-between gap-1 px-6 py-5 sm:flex-row"
>
<div> <div>
<h3> <h3>
{dist.title} {dist.title}
@ -81,7 +83,9 @@
<small>{dist.fileName}</small> <small>{dist.fileName}</small>
{/if} {/if}
</div> </div>
<div class="flex flex-col items-center gap-2"> <div
class="flex flex-row-reverse place-content-end gap-4 sm:flex-col sm:place-content-center sm:items-center sm:gap-2"
>
{#if !error} {#if !error}
<button <button
type="button" type="button"

View file

@ -56,7 +56,7 @@
<small> <small>
Viendo portal archivado de Viendo portal archivado de
<a <a
class="text-blue-500 underline dark:text-blue-300" class="break-words text-blue-500 underline dark:text-blue-300"
target="_blank" target="_blank"
rel="noopener" rel="noopener"
href={url}>{url}</a href={url}>{url}</a
@ -90,7 +90,7 @@
class="flex justify-between px-6 py-5 hover:bg-gray-50 dark:hover:bg-gray-700" class="flex justify-between px-6 py-5 hover:bg-gray-50 dark:hover:bg-gray-700"
href={datasetLink} href={datasetLink}
> >
<div> <div class="max-w-full hyphens-auto break-words">
<h3 class="text-lg">{dataset.title}</h3> <h3 class="text-lg">{dataset.title}</h3>
<p class="text-sm">{dataset.description}</p> <p class="text-sm">{dataset.description}</p>
</div> </div>