fixed tag view for multiline tags

This commit is contained in:
Anton Tranelis 2024-05-02 10:57:27 +02:00
parent 321bd393f8
commit 72c8d4132c
3 changed files with 4 additions and 4 deletions

View File

@ -104,8 +104,8 @@ export const SearchControl = () => {
{hideSuggestions || Array.from(geoResults).length == 0 && itemsResults.length == 0 && tagsResults.length == 0 && !isGeoCoordinate(value)|| value.length == 0? "" :
<div className='tw-card tw-card-body tw-bg-base-100 tw-p-4 tw-mt-2 tw-shadow-xl tw-overflow-y-auto tw-max-h-[calc(100dvh-152px)]'>
{tagsResults.length > 0 &&
<div className='tw-flex tw-flex-wrap tw-max-h-16 tw-overflow-hidden tw-min-h-[32px]'>
{tagsResults.map(tag => (
<div className='tw-flex tw-flex-wrap'>
{tagsResults.slice(0, 3).map(tag => (
<div key={tag.name} className='tw-rounded-2xl tw-text-white tw-p-1 tw-px-4 tw-shadow-md tw-card tw-mr-2 tw-mb-2 tw-cursor-pointer' style={{ backgroundColor: tag.color }} onClick={() => {
addFilterTag(tag)
let params = new URLSearchParams(window.location.search);

View File

@ -82,7 +82,7 @@ export const TagsWidget = ({placeholder, containerStyle, defaultTags, onUpdate})
}} className={`tw-input tw-input-bordered tw-cursor-text ${containerStyle}`}>
<div className='tw-flex tw-flex-wrap tw-h-fit'>
{defaultTags.map((tag) => (
<div key={tag.name} className='tw-rounded-2xl tw-text-white tw-p-2 tw-px-4 tw-shadow-xl tw-card tw-h-[2.75em] tw-mt-3 tw-mr-4' style={{ backgroundColor: tag.color ? tag.color : "#666" }}>
<div key={tag.name} className='tw-rounded-2xl tw-text-white tw-p-2 tw-px-4 tw-shadow-xl tw-card tw-mt-3 tw-mr-4' style={{ backgroundColor: tag.color ? tag.color : "#666" }}>
<div className="tw-card-actions tw-justify-end">
<label className="tw-btn tw-btn-xs tw-btn-circle tw-absolute tw--right-2 tw--top-2 tw-bg-white tw-text-gray-600" onClick={() => (deleteTag(tag))}></label>
</div><b>{decodeTag(tag.name)}</b>

View File

@ -6,7 +6,7 @@ export const TagView = ({tag, heighlight, onClick} : {tag: Tag, heighlight?: boo
return (
// Use your imagination to render suggestions.
<div key={tag.name} onClick={onClick} className={`tw-rounded-2xl tw-text-white tw-p-2 tw-px-4 tw-shadow-xl tw-card tw-h-[2.75em] tw-mt-3 tw-mr-4 tw-cursor-pointer tw-w-fit ${heighlight && 'tw-border-primary tw-shadow-te-primary'}`} style={{ backgroundColor: tag.color ? tag.color : "#666" }}>
<div key={tag.name} onClick={onClick} className={`tw-rounded-2xl tw-text-white tw-p-2 tw-px-4 tw-shadow-xl tw-card tw-mt-3 tw-mr-4 tw-cursor-pointer tw-w-fit ${heighlight && 'tw-border-primary tw-shadow-te-primary'}`} style={{ backgroundColor: tag.color ? tag.color : "#666" }}>
<div className="tw-card-actions tw-justify-end">
</div><b>{decodeTag(tag.name)}</b>
</div>