Suggerimenti per l'elenco di completamento automatico

Ciao,

Prima di tutto, grazie mille per il nuovo design dell’autocompletamento, lo adoro. :heart:

Ho apportato alcune piccole modifiche che utilizzo sul mio sito.

  1. Utilizzo la lista di autocompletamento a larghezza intera sui dispositivi mobili. Penso che sia una cosa sicura ora perché impedisce alla lista di uscire dallo schermo. Succede più o meno al centro. Offre una visione più ampia che è utile quando l’utente ha un nome più lungo o ha uno stato utente disponibile.
.d-editor-textarea-wrapper {
  .autocomplete {
    .mobile-view & {
      max-width: calc(100% - 20px);
      width: 100%;
      left: 10px !important; // sovrascrive il calcolo della posizione sinistra
    }
  }
}


  1. Sulla lista di dissolvenza, l’ombra inferiore e il margine sono sempre visibili anche se la lista non è scorrevole. Utilizzo l’ombra per uno pseudo :after invece di -webkit-mask. Ho aggiunto un’ombra superiore e inferiore che scivola sotto il primo e l’ultimo elemento li. In questo modo posso rimuovere il margine inferiore.
.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;
    }
    // mettilo sopra le ombre
    &:first-of-type,
    &:last-of-type {
      .hashtag-autocomplete__link {
        position: relative;
        z-index: 1;
      }
    }
  }
}

hashtag

9 Mi Piace

Adoro la soluzione; la implementerò. :heart:

7 Mi Piace