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 6f1ad642b4
commit 90d9d9c700
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()">
<span class="check" />
<span class="control-label">
<span class="checkbox-label-text">{{ option.label }}</span>
<span
:title="option.name"
class="checkbox-label-text">
{{ option.label }}
</span>
<span
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>
</label>
<button
@ -242,12 +246,26 @@
display: flex;
flex-wrap: nowrap;
width: 100%;
align-items: baseline;
}
.checkbox-label-text {
white-space: nowrap;
white-space: wrap;
text-overflow: ellipsis;
overflow: hidden;
line-height: 1.45em;
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>

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" />
</span>
<span
class="collapse-label"
v-tooltip="{
delay: {
shown: 500,
@ -79,7 +78,8 @@
autoHide: false,
placement: 'top-start',
popperClass: ['tainacan-tooltip', 'tooltip', isRepositoryLevel ? 'tainacan-repository-tooltip' : '']
}">
}"
class="collapse-label">
{{ filter.name }}
</span>
<help-button

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

@ -20,10 +20,14 @@
@input="resetPage">
<span class="check" />
<span class="control-label">
<span class="checkbox-label-text">{{ option.label }}</span>
<span
:title="option.label"
class="checkbox-label-text">
{{ option.label }}
</span>
<span
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>
</label>
<button
@ -328,12 +332,27 @@
display: flex;
flex-wrap: nowrap;
width: 100%;
align-items: baseline;
}
.checkbox-label-text {
white-space: nowrap;
white-space: wrap;
text-overflow: ellipsis;
overflow: hidden;
line-height: 1.45em;
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>