#правки_дизайна_фанфикса

Поправлена старая, но весьма узкая проблема адаптивности дизайна Фанфикса. Проблема наблюдалась только у не зарегистрированных пользователей с шириной экрана смартфона от 400 до 510 пикселей.

Они видели в шапке сайта вот такое: https://imgur.com/AqsCZXA

Дальше читайте только если вам интересны мои хэштеги #будни_админа или #веб_разработка

Причина проблемы в том, что для зарегистрированных пользователей в правом верхнем углу показывается только квадратная аватарка и иконка поиска, а для не зарегистрированных вместо аватарки аж два слова "Вход, Регистрация". Я настроил адаптивность по варианту зарегистрированных и не додумался всё внимательно посмотреть для не зарегистрированных. Позднее несколько раз видел скриншоты с этой проблемой, но почему-то был уверен, что проблема очень редкая. Тут ведь ещё нюанс в том, что получить обратную связь от не зарегистрированных пользователей проблематично - в большинстве своём они на сайте мимоходом, им не до того, чтобы писать о чем-то администратору.

Сегодня по случаю скинул знакомому ссылку и получил в ответ скриншот проблемы. Тут-то до меня вдруг дошло, что это не проблема редкая, это мне о ней редко пишут.

Конкретная проблема в медиа-запросе для логотипа сайта. Для зарегистрированных пользователей длинный логотип меняется на квадратный при ширине экрана менее 400 пикселей, а для не зарегистрированных уже в 510 надо менять, и даже тогда в шапке все элементы слишком плотно. Пришлось по условию зарегистрированный/не зарегистрированный присваивать логотипу разные классы и писать два медиа-запроса.

И ещё одну мелочь поправил, действительно мелочь. Тоже про адаптивность.

Правая колонка скрывается при ширине экрана 1023 пикселя. Специально так делал, чтобы у редких юзеров экранов 1024х768 всё было хорошо, мониторов таких уже почти нет, а вот iPad встречается не так уж редко. Именно при ширине экрана 1024 пикселя сайт занимает весь экран - белого фона по краям нет. Если экран шире или уже, появляются поля.

А теперь смотрим на главную колонку с контентом, если справа или слева она граничит с чем-то, то там добавлена граница в 1 пиксель, ибо переход от желтоватого фона под контентом к почти белому цвету фона или к серому цвету правого меню без границы смотрится неряшливо, контраста не хватает между этими цветами. А если граничит с краем экрана, то граница не нужна, она там только мешается. При ширине экрана менее 775 пикселей, граница с обеих сторон убирается, ибо белого фона на экране не остаётся. Если экран шире, граница добавляется.

Возвращаемся к iPad. Ровно при ширине экрана 1024 пикселя - граница слева убирается, ибо там нет полей. При 775-1023 граница есть, при >=1025 граница тоже есть. Именно это исключение для 1024 пикселей я сегодня добавил. Особенно заметна не нужная граница была на страницах фандомов, слева от обложки фандома была тоненькая полоска - царапала взгляд.