refac: selector mobile styling

This commit is contained in:
Timothy J. Baek 2024-05-31 19:51:34 -07:00
parent 2dbbd1bc6f
commit 3730251958

View File

@ -251,13 +251,25 @@
show = false; show = false;
}} }}
> >
<div class="flex flex-col">
{#if $mobile && (item?.model?.info?.meta?.tags ?? []).length > 0}
<div class="flex gap-0.5 self-start h-full mb-0.5 -translate-x-1">
{#each item.model?.info?.meta.tags as tag}
<div
class=" text-xs font-black px-1 rounded uppercase line-clamp-1 bg-gray-500/20 text-gray-700 dark:text-gray-200"
>
{tag.name}
</div>
{/each}
</div>
{/if}
<div class="flex items-center gap-2"> <div class="flex items-center gap-2">
<div class="flex items-center"> <div class="flex items-center">
<div class="line-clamp-1"> <div class="line-clamp-1">
{item.label} {item.label}
</div> </div>
{#if item.model.owned_by === 'ollama' && (item.model.ollama?.details?.parameter_size ?? '') !== ''} {#if item.model.owned_by === 'ollama' && (item.model.ollama?.details?.parameter_size ?? '') !== ''}
<div class="flex ml-1 items-center"> <div class="flex ml-1 items-center translate-y-[0.5px]">
<Tooltip <Tooltip
content={`${ content={`${
item.model.ollama?.details?.quantization_level item.model.ollama?.details?.quantization_level
@ -270,7 +282,8 @@
}`} }`}
className="self-end" className="self-end"
> >
<span class=" text-xs font-medium text-gray-600 dark:text-gray-400" <span
class=" text-xs font-medium text-gray-600 dark:text-gray-400 line-clamp-1"
>{item.model.ollama?.details?.parameter_size ?? ''}</span >{item.model.ollama?.details?.parameter_size ?? ''}</span
> >
</Tooltip> </Tooltip>
@ -278,7 +291,7 @@
{/if} {/if}
</div> </div>
{#if (item?.model?.info?.meta?.tags ?? []).length > 0} {#if !$mobile && (item?.model?.info?.meta?.tags ?? []).length > 0}
<div class="flex gap-0.5 self-center items-center h-full translate-y-[0.5px]"> <div class="flex gap-0.5 self-center items-center h-full translate-y-[0.5px]">
{#each item.model?.info?.meta.tags as tag} {#each item.model?.info?.meta.tags as tag}
<div <div
@ -341,6 +354,7 @@
</Tooltip> </Tooltip>
{/if} {/if}
</div> </div>
</div>
{#if value === item.value} {#if value === item.value}
<div class="ml-auto pl-2"> <div class="ml-auto pl-2">