tmdinosaurcenter
/
tainacan
mirror of https://github.com/tainacan/tainacan
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Checkbox filters alignment tweaks.

This commit is contained in:
mateuswetah 2024-06-13 12:13:31 -03:00
parent 317ef33141
commit bda3f7dea9
3 changed files with 45 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

24
src/views/admin/components/filter-types/checkbox/TainacanFilterCheckbox.vue
View File

@ -19,10 +19,14 @@
@input="resetPage()"> @input="resetPage()">
<span class="check" /> <span class="check" />
<span class="control-label"> <span class="control-label">
<span class="checkbox-label-text">{{ option.label }}</span> <span
:title="option.name"
class="checkbox-label-text">
{{ option.label }}
</span>
<span <span
v-if="option.total_items != undefined" v-if="option.total_items != undefined"
class="has-text-gray">&nbsp;{{ "(" + option.total_items + ")" }}</span> class="facet-item-count has-text-gray">&nbsp;{{ "(" + option.total_items + ")" }}</span>
</span> </span>
</label> </label>
<button <button
@ -242,12 +246,26 @@
display: flex; display: flex;
flex-wrap: nowrap; flex-wrap: nowrap;
width: 100%; width: 100%;
align-items: baseline;
} }
.checkbox-label-text { .checkbox-label-text {
white-space: nowrap; white-space: wrap;
text-overflow: ellipsis; text-overflow: ellipsis;
overflow: hidden; overflow: hidden;
line-height: 1.45em; line-height: 1.45em;
break-inside: avoid; break-inside: avoid;
display: -webkit-box;
line-clamp: 2;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
} }
.facet-item-count {
margin-left: auto;
}
.b-checkbox:hover .facet-item-count,
.b-checkbox:focus .facet-item-count {
--tainacan-info-color: var(--tainacan-input-color);
}
</style> </style>

4
src/views/admin/components/filter-types/tainacan-filter-item.vue
View File

@ -68,7 +68,6 @@
<i class="tainacan-icon tainacan-icon-arrowright tainacan-icon-1-25em" /> <i class="tainacan-icon tainacan-icon-arrowright tainacan-icon-1-25em" />
</span> </span>
<span <span
class="collapse-label"
v-tooltip="{ v-tooltip="{
delay: { delay: {
shown: 500, shown: 500,
@ -79,7 +78,8 @@
autoHide: false, autoHide: false,
placement: 'top-start', placement: 'top-start',
popperClass: ['tainacan-tooltip', 'tooltip', isRepositoryLevel ? 'tainacan-repository-tooltip' : ''] popperClass: ['tainacan-tooltip', 'tooltip', isRepositoryLevel ? 'tainacan-repository-tooltip' : '']
}"> }"
class="collapse-label">
{{ filter.name }} {{ filter.name }}
</span> </span>
<help-button <help-button

25
src/views/admin/components/filter-types/taxonomy/TainacanFilterCheckbox.vue
View File

@ -20,10 +20,14 @@
@input="resetPage"> @input="resetPage">
<span class="check" /> <span class="check" />
<span class="control-label"> <span class="control-label">
<span class="checkbox-label-text">{{ option.label }}</span> <span
:title="option.label"
class="checkbox-label-text">
{{ option.label }}
</span>
<span <span
v-if="option.total_items != undefined" v-if="option.total_items != undefined"
class="has-text-gray">&nbsp;{{ "(" + option.total_items + ")" }}</span> class="facet-item-count has-text-gray">&nbsp;{{ "(" + option.total_items + ")" }}</span>
</span> </span>
</label> </label>
<button <button
@ -328,12 +332,27 @@
display: flex; display: flex;
flex-wrap: nowrap; flex-wrap: nowrap;
width: 100%; width: 100%;
align-items: baseline;
} }
.checkbox-label-text { .checkbox-label-text {
white-space: nowrap; white-space: wrap;
text-overflow: ellipsis; text-overflow: ellipsis;
overflow: hidden; overflow: hidden;
line-height: 1.45em; line-height: 1.45em;
break-inside: avoid; break-inside: avoid;
display: -webkit-box;
line-clamp: 2;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
} }
.facet-item-count {
margin-left: auto;
}
.b-checkbox:hover .facet-item-count,
.b-checkbox:focus .facet-item-count {
--tainacan-info-color: var(--tainacan-input-color);
}
</style> </style>