bookpauk / inpx-web

Веб-сервер для поиска по inpx-коллекции
https://lib.omnireader.ru
Creative Commons Zero v1.0 Universal
79 stars 22 forks source link

Улучшения для мобильного и поведение блока поиска #11

Closed Weegley closed 1 year ago

Weegley commented 1 year ago
  1. Исправление, что бы перенесённая строка со статистикой найденного (Авторов, серий или книг) не наползала на счётчик страниц.
  2. CSS свойство position:sticky уже давно отлично поддерживается браузерами. Перехват onScroll для удержания блока поиска сверху не нужен.
bookpauk commented 1 year ago
  1. Непонятно, в каком случае оно там наползает, у меня например на смартфоне все переносится нормально на след. строку. Я как раз добавлял height: 50px , т.к. оно наползало :)
  2. Как вы, саблей-то... Код в onScroll() нужен для того, чтобы панель плавно убиралась вверх при прокрутке списка. Правда, работает плоховато, особенно на смартфоне. Если вам удастся сделать это через чистый CSS - буду очень рад.
Weegley commented 1 year ago
  1. Наезжает на скрине
  2. По поводу прилипания - я, кажется понял. Оно уезжает вверх вместе с прокруткой, но отображается, если начать крутить назад? В настольном браузере - так. На мобильном оно съезжает вверх, но выпадает назад сразу. Выглядит как глюк. Как вариант - можно реализовать проверку на "мобильность" браузера и отрабатывать это дело только на десктопах. (Upd) https://www.npmjs.com/package/ismobilejs как раз для определения мобильного браузера
Weegley commented 1 year ago

кажется, нашёл что нужно Демка Если убрать offset : 205, то получается Ваша задумка, как я понял. Только никак не могу встроить этот модуль...

bookpauk commented 1 year ago

И зачем тащить целый сторонний модуль? Уж лучше я свой onScroll допилю, как время будет...

P.S. Мобильный Firefox отличается редким количеством глюков, можно посмотреть, как оно плавно работает в мобильном хроме - но тоже есть баги (уже с моей стороны в реализации onScroll).

Weegley commented 1 year ago

Он маленький совсем. Вся проблема в том что бы вызвать его init(); когда страница полностью построена. А она строится из bundle.js уже после window.load Я сам модуль по всякому пытался встроить. И в проект добавлял, и в шаблон index.html вызывал отдельный .js Всё упирается в построение страницы из bundle.js Если бы можно было как то отследить когда bundle.js уже отработал - встроить headroom было бы легко любым способом.

Weegley commented 1 year ago

В последнем коммите у себя я добился желаемого результата, вроде бы не поломав ничего из оригинала. Результат можно посмотреть тут Оно скорее всего выбивается из общей идеи компоновки проекта, но я просто не умею в разработку на node и vue, потому сделал такой вот костыль. Главное - работает и можно не тратить время на допиливание Вашего обработчика.

bookpauk commented 1 year ago

Идея была, чтобы панель убиралась по мере прокрутки, как бы "привязанная" к своей позиции внутри списка. Ваш вариант реализовать много легче, просто убирать по таймингу без привязки. Если не получится допилить onScroll - сделаю по вашему варианту.

Weegley commented 1 year ago

Теперь, кажется, понял. она прилипает к списку пока не будет полностью показана или полностью скрыта? Попробую подумать, если не улечу раньше в моря.