CSS: Колонки и центрирование сайта
Регистрация Войти
Статья

CSS: Колонки и центрирование сайта

Начал работать над дизайном, формирование колонок. Первые изменения уже на сайте.

Смотрим, править буду по мере обнаружение багов.

LibArea Дизайн
9
395
+ Читать

24 Ответа

  1. Мне по центру нравится больше!

    2
    Ответить

    1. потому что гармонично, а не разрывает блоки

      2
      Ответить

  1. Гораздо лучше, чем раньше, спасибо. Некоторые предложения:

    1. Вернуть блок быстрой авторизации справа
    2. Добавить справа кнопку up (если листаешь вниз очень удобна) (пример на пикабу https://disk.yandex.ru/i/OIdBobo6yFrKiQ)
    3. Сейчас в header пустует место, можно сделать search открытым, пока не происходит скролл вниз https://disk.yandex.ru/i/sr5QpuW-hg-FiA
    4. Опционально можно подумать над уменьшением размера шрифта меню слева
    3
    Ответить

    1. Думаю, блок авторизации в sidebar необходимо вернуть. В шапке используется ссылка на отдельную страницу «Вход». Если бы это было всплывающее окно, то другое дело. Тогда возможно этот блок был бы избыточным.

      Кроме того, он собственно после авторизации уходит и из шаблона его можно легко убрать (если надо).

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

      Т.е. ранее жалобы были в основном на моб. версию, что шрифт мелкий.

      По остальному пока не готов говорить. Но посмотрим.

      Спасибо. 👍

      2
      Ответить
      1. Search кстати пропадает на странице поста
      2. Он не должен быть шириной в 90% страницы при раскрытии
      2
      Ответить
        1. На его место заголовок поста.
        1
        Ответить

      1. Кстати да, возможно стоит заголовок убрать? Тогда поиск будет везде. А ширину, можно сделать 90%, гляну, спасибо +

        Ответить

        1. image.png

          1
          Ответить

        1. Да зачем он 90%? ааААаААааААаа

          Ответить

          1. Гляну, чтобы было норм по ширине )

            Ответить

          1. image.png

            Ответить

            1. Да это то норм, там просто Евг хочет строку поиска растянуть в 90% экрана :D

              Ответить

              1. image.png а такой вариант ?

                + image.png еще пересматриваю оформление профиля у себя

                1
                Ответить

                1. Погляжу на TJ. А профиль тоже можно переделать. Займусь тогда и им чуток позже.

                  1
                  Ответить

                1. Писал коммент и случайно нажал на менюшку в итоге проебалл его.

                  Крч, оба поиска работоспособны, оба годятся, но я лучше бы ещё обратил внимание на мобильный ui, т.к. по моей стате ~65% — это мобильный трафик.

                  И вот если посмотреть на vc, dtf — у них удобная нижняя панелька, как у мобильных приложений, но при этом я бы избавился от фикс-хедера, который занимает 10% экрана у них тупо логотипом.

                  Итого снизу лично для себя бы я делал как:

                  Плавающую кнопку «новый пост» над менюшкой снизу, или впихнул бы её в эту же менюшку куда-то, но там и так 5 пунктов, а эта кнопка просится быть обособленной. Либо в центре, либо справа, но справа уже «мой профиль» — и это привычный для всех паттерн. А в центр её не отцентровать, т.к. будет 6 элементов))

                  Менюшка снизу:

                   — хоме

                   — поиск

                   — сортировка

                  Свежее

                  Обсуждают (топ комментируемых)

                  Лучшее

                  ————————

                  Топ дня

                  Топ недели

                  Топ месяца

                  — Разделы/темы/блоги

                   — Профиль

                  Перейти в профиль (можно так же как на вц)

                  Черновики

                  Личные сообщения

                  Уведомления

                  Закладки

                  Инвайты (хз зачем нужны, мб в настройки унести их или в участники)

                  Участники

                  Настройки

                  О проекте

                  Выход

                  (уведосы отображаем красной точкой сверху в правом углу аватара в нижней менюшке, ну как в инсте крч, только у них снизу)

                  + Откуда-то высрался пробел перед «— Профиль», втф

                  1
                  Ответить

            1. Можно глянуть сейчас на сайте, сделал по центру.

              Если добавить:

              .form {
  float: right;
  margin-right: 20px;

              То поисковая форма прижмется к иконке поиска.

              2
              Ответить

  1. image.png image.png

    + вот ещё…

    концепт.png

    2
    Ответить

    1. Тут надо подумать. По поводу аватара скажем:

      некоторые пользователи предпочитают прямоугольные аватары, так как в них оптимальнее показать портрет человека и при этом захватить меньше фона.

      На Хабре были нешуточные страсти про округление, например.

      Далее про выделение меню: обычно при наведение выделяют так, какой она станет активной. А тут как бы появляется ещё один цвет: белый — активный, серый — навели курсор. И третий вариант, без этого всего. Всё это имеет вариант на сером фоне (левое меню) и на белом (правое). Хм.

      Ответить

      1. Да, белый- активная, серый- при наведении и без выделения. Это только концепт

        1
        Ответить

    1. Хорошо, только в попапе профиля у тебя справа пространства много пустого, там следует как минимум фон ховера шобы заполнялся по ширине всего блока (с равнозначным отступом от края разумеется как и слева)

      + Лайк и закладки плохо выглядят.

      Если уж и делать подобным образом, то обычно делают без подписи «комментариев» и отступы между этими сущностями как будто ещё больше надо. Ну на пикабу всё есть, хуле я объясняю))

      Вообще для себя я выбрал такой подход: https://iimg.su/i/TOUBu6

      Без закладок и репостов, т.к. сам никогда не пользовался этими функциями, так что спрячу их в «…» справа сверху, ну может в последствии вернул бы репосты вниз.

      И ещё придумать бы как подгружать топ комментарий туда к превьюшке мб))

      + Когда уже отдельная кнопка для загрузки изображений в коммы появится

      1
      Ответить

      1. Отсутствие иконки «закладка» в ленте, это заманчиво т.к. несет ряд преимуществ. Например, скорость самого тяжелого запроса на сайте (для ленты он) можно убрать: 

        LEFT JOIN favorites fav ON fav.tid = post_id
   AND fav.user_id = :uid AND fav.action_type = :type

        Вообще, насколько люди пользуются закладками из ленты? Логично предположить, что сперва необходим прочитать весь пост, чтобы сделать закладку.

        Это ВКонтакте, например, делает ставку на ленту. И соотв. все инструменты (закладки в том числе иконки) выносятся туда.

        Тут нет и думаю не будет цели, сконцентрировать пользователей на ленте и соотв. «засунуть» туда всё, что только есть. LibArea, это не соц. сеть.

        Дааааа, думаю подвал поста в ленте можно значительно упростить. )

        1
        Ответить

  1. Тут еще бы с комментариями поработать.

    Screenshot_20250916-084048.jpg

    Screenshot_20250916-084135.jpg

    Screenshot_20250916-084254.jpg

    1
    Ответить

    1. image.png

      Правая сторона еще (1366px)

      1
      Ответить

      1. Спасибо, гляну.

        @Nikita посмотрю, что для телефона можно сделать. Спасибо.

        1
        Ответить