feat(frontend): add thumbnail support to TagsSelect component
Display item and pokemon images in dropdown options and selected values Update Admin, Dish, Habitat, Pokemon, and Recipe views to pass image URLs
This commit is contained in:
@@ -2041,10 +2041,18 @@ button:disabled,
|
||||
}
|
||||
|
||||
.tags-select__single-value {
|
||||
display: block;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
min-width: 0;
|
||||
max-width: 100%;
|
||||
overflow: hidden;
|
||||
color: var(--ink);
|
||||
}
|
||||
|
||||
.tags-select__single-value span {
|
||||
min-width: 0;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
@@ -2054,6 +2062,7 @@ button:disabled,
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 6px;
|
||||
min-width: 0;
|
||||
min-height: 28px;
|
||||
padding: 4px 8px;
|
||||
border: 1px solid rgba(42, 117, 187, 0.28);
|
||||
@@ -2064,6 +2073,27 @@ button:disabled,
|
||||
font-weight: 850;
|
||||
}
|
||||
|
||||
.tags-select__tag > span:first-of-type {
|
||||
min-width: 0;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
.tags-select__thumb {
|
||||
flex: 0 0 auto;
|
||||
width: 28px;
|
||||
height: 28px;
|
||||
border: 1px solid var(--line);
|
||||
border-radius: var(--radius-small);
|
||||
background: var(--surface-soft);
|
||||
object-fit: contain;
|
||||
}
|
||||
|
||||
.tags-select__thumb--tag {
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
}
|
||||
|
||||
.tags-select__remove {
|
||||
min-width: 18px;
|
||||
min-height: 18px;
|
||||
@@ -2145,6 +2175,20 @@ button:disabled,
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.tags-select__option-label {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
flex: 1 1 auto;
|
||||
gap: 8px;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.tags-select__option-label span {
|
||||
min-width: 0;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
.tags-select__option:hover,
|
||||
.tags-select__option.active,
|
||||
.tags-select__option.selected {
|
||||
|
||||
Reference in New Issue
Block a user