اقتراحات قائمة الإكمال التلقائي

[Don]

أهلاً،

أولاً، شكراً جزيلاً على تصميم الإكمال التلقائي الجديد، أنا أحبه حقاً.

لقد أجريت بعض التغييرات التي أستخدمها على موقعي.

1. أستخدم قائمة الإكمال التلقائي بعرض كامل على الهاتف المحمول. أعتقد أن هذا آمن الآن لأنه يمنع القائمة من الخروج من الشاشة. يحدث هذا في مكان ما في المنتصف. إنه يوفر عرضًا أوسع وهو أمر جيد عندما يكون لدى المستخدم اسم أطول أو لديه حالة مستخدم متاحة.

.d-editor-textarea-wrapper {
  .autocomplete {
    .mobile-view & {
      max-width: calc(100% - 20px);
      width: 100%;
      left: 10px !important; // override left position calculation
    }
  }
}

---

2. في قائمة التلاشي، يظل الظل السفلي والهامش مرئيين دائمًا حتى لو لم تكن القائمة قابلة للتمرير. أستخدم الظل كعنصر زائف :after بدلاً من -webkit-mask. لقد أضفت ظلًا علويًا وسفليًا ينزلق تحت العنصر الأول والأخير li. بهذه الطريقة يمكنني إزالة الهامش السفلي.

.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;
      }
    }
  }
}

[chapoi]

@Don

2. في قائمة التلاشي، يظهر الظل السفلي والهامش دائمًا حتى لو لم تكن القائمة قابلة للتمرير. أستخدم الظل لعنصر زائف :after بدلاً من -webkit-mask. أضفت ظلًا علويًا وسفليًا ينزلق تحت العنصر الأول والأخير li. بهذه الطريقة يمكنني إزالة الهامش السفلي.

أحب الحل؛ سأقوم بتطبيقه.