krikkert/habitica
1
0
Fork 0
mirror of https://github.com/HabitRPG/habitica.git synced 2025-12-19 15:48:04 +01:00
Code Issues Packages Projects Releases Wiki Activity

selList overflow (#13179)

Browse Source 
* Limit `membersModal` list selector to 12-unit grid (to prevent wrap around on long text for `sortOptions`)
* Add ellipse based overflow for `membersModal` list selector
* Add padding so that the checkmark for `membersModal` list doesn't overlap with text
* Use scss with v-deep properly (also pretty checkmark to "full-width" of checkmark)
This commit is contained in:
Helcostr
2021-04-28 14:07:07 -07:00
committed by GitHub
parent 0bd737469a
commit 056f4926f5
2 changed files with 25 additions and 16 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
website/client/src/components/groups/membersModal.vue
View File

@@ -42,7 +42,7 @@
:placeholder="$t('search')" :placeholder="$t('search')"
> >
</div> </div>
<div class="col"> <div class="col-5">
<select-list <select-list
:items="sortOptions" :items="sortOptions"
:value="optionEntryBySelectedValue" :value="optionEntryBySelectedValue"

39
website/client/src/components/ui/selectList.vue
View File

@@ -53,23 +53,32 @@
<style lang="scss" scoped> <style lang="scss" scoped>
@import '~@/assets/scss/colors.scss'; @import '~@/assets/scss/colors.scss';
.select-list ::v-deep .selectListItem { .select-list ::v-deep {
position: relative; .dropdown-toggle {
white-space: nowrap;
&:not(.showIcon) { overflow: hidden;
.svg-icon.check-icon { text-overflow: ellipsis;
display: none;
}
} }
.svg-icon.check-icon.color { .selectListItem {
position: absolute; position: relative;
right: 0.855rem; padding-right: 1.625rem;
top: 0.688rem;
bottom: 0.688rem; &:not(.showIcon) {
width: 0.77rem; .svg-icon.check-icon {
height: 0.615rem; display: none;
color: $purple-300; }
}
.svg-icon.check-icon.color {
position: absolute;
right: 0.855rem;
top: 0.688rem;
bottom: 0.688rem;
width: 0.77rem;
height: 0.615rem;
color: $purple-300;
}
} }
} }
</style> </style>