Bonjour,
Tout d’abord, merci beaucoup pour le nouveau design de l’autocomplétion, je l’adore. ![]()
J’ai apporté quelques modifications à ce que j’utilise sur mon site.
- J’utilise la liste d’autocomplétion en pleine largeur sur mobile. Je pense que c’est une chose sûre maintenant car cela empêche la liste de sortir de l’écran. Elle apparaît quelque part au centre. Cela offre une vue plus large, ce qui est bien lorsque l’utilisateur a un nom plus long ou dispose d’un statut utilisateur.
.d-editor-textarea-wrapper {
.autocomplete {
.mobile-view & {
max-width: calc(100% - 20px);
width: 100%;
left: 10px !important; // override left position calculation
}
}
}
- Sur la liste en fondu, l’ombre et la marge du bas sont toujours visibles même si la liste n’est pas défilante. J’utilise l’ombre pour un pseudo :after au lieu d’un -webkit-mask. J’ai ajouté une ombre supérieure et inférieure qui glisse sous le premier et le dernier élément li. De cette façon, je peux supprimer la marge du bas.
.hashtag-autocomplete {
max-height: 14em;
&__fadeout {
-webkit-mask: none;
&:before {
content: '';
position: absolute;
top: 0;
width: 100%;
height: 1.5em;
background: linear-gradient(
to bottom,
rgba(var(--secondary-rgb), 1),
rgba(var(--secondary-rgb), 0)
);
}
&:after {
content: '';
position: absolute;
bottom: 0;
width: 100%;
height: 1.5em;
background: linear-gradient(
to bottom,
rgba(var(--secondary-rgb), 0),
rgba(var(--secondary-rgb), 1)
);
}
}
&__option {
&:last-of-type {
margin-bottom: 0;
}
// put it top of the shadows
&:first-of-type,
&:last-of-type {
.hashtag-autocomplete__link {
position: relative;
z-index: 1;
}
}
}
}




