А чем не устраивал старый диз кнопок вв-панели?

Поделиться41Вт, 9 Мар 2021 22:11:25

Автор: kernel
Администратор
Зарегистрирован: Пт, 31 Янв 2020
Сообщений: 1617
Уважение: +3694
Позитив: +191
Последний визит:
Вт, 20 Окт 2020 15:41:44

sshmmv написал(а):

Упс! А при чем здесь все остальные пользователи форума?

Вряд ли вы найдете любой современный телефон без размытия. 52% всех посещений форумов происходит с сотовых.

sshmmv написал(а):

Скрин в моем первом сообщении рассмотрели? В котором про смайлы? Вот как теперь с этим быть? О себе вы позаботились. А о других подумали?

Как уже сказал Deff, это возможно только из-за кэша. При этом, я ссылку меняю каждый раз при изменении css, так что кэш при этом должнен быть очень жестким, игнорирующим то, что на странице стиль уже находится по другой ссылке )

+1

Поделиться42Вт, 9 Мар 2021 22:26:13

Автор: kolobdur74
...
Зарегистрирован: Пн, 6 Сен 2010
Сообщений: 7394
Уважение: +5896
Позитив: +6527
Пол: Мужской
Последний визит:
Сегодня 16:27:09

А, да и на счет разрешения.. Берем родное разрешение:

И размытие не наблюдаем, но на узких форумах с родным разрешением не посидишь, поднимаем что бы что-то видно было и получаем размытие:

А в остальном прекрасная маркиза..

0

Поделиться43Вт, 9 Мар 2021 22:28:40

Автор: kolobdur74
...
Зарегистрирован: Пн, 6 Сен 2010
Сообщений: 7394
Уважение: +5896
Позитив: +6527
Пол: Мужской
Последний визит:
Сегодня 16:27:09

kernel написал(а):

Вряд ли вы найдете любой современный телефон без размытия. 52% всех посещений форумов происходит с сотовых.

Это называется дизайн для мобильных телефонов..

0

Поделиться44Вт, 9 Мар 2021 22:33:06

Автор: kernel
Администратор
Зарегистрирован: Пт, 31 Янв 2020
Сообщений: 1617
Уважение: +3694
Позитив: +191
Последний визит:
Вт, 20 Окт 2020 15:41:44

kolobdur74 написал(а):

kernel написал(а):
Вряд ли вы найдете любой современный телефон без размытия. 52% всех посещений форумов происходит с сотовых.
Это называется дизайн для мобильных телефонов..

Предлагаете сделать векторные иконки только для телефонов? Тогда без внимания останутся 4k мониторы. Ок, можно учитывая разрешение менять иконки, но как-то это совсем криво, разные иконки в зависимости от разрешения.

0

Поделиться45Вт, 9 Мар 2021 22:38:52

Автор: kolobdur74
...
Зарегистрирован: Пн, 6 Сен 2010
Сообщений: 7394
Уважение: +5896
Позитив: +6527
Пол: Мужской
Последний визит:
Сегодня 16:27:09

kernel написал(а):

Предлагаете сделать векторные иконки только для телефонов? Тогда без внимания останутся 4k мониторы. Ок, можно учитывая разрешение менять иконки, но как-то это совсем криво, разные иконки в зависимости от разрешения.

В теории так и должно быть, или вариант, который вы поставили, но это тогда должны быть иконки под мобильные устройства, если старые, на ваш взгляд, под мобильные устройства не годятся.. И да, на Майбб нет мобильного дизайна, хотя от сервиса есть галочка в настройках Админ панели, но это что угодно, но не диз для мобильных устройств.. А люди на это ведутся, потом получают проблемы, потом идут сюда, потом правят свои дизы..

0

Поделиться46Вт, 9 Мар 2021 22:44:35

Автор: Romych
drumman
Зарегистрирован: Вт, 16 Дек 2008
Сообщений: 2709
Уважение: +4098
Позитив: +2387
Пол: Мужской
Последний визит:
Пт, 20 Дек 2024 23:15:33

kolobdur74 написал(а):

И да, на Майбб нет мобильного дизайна, хотя от сервиса есть галочка в настройках Админ панели, но это что угодно, но не диз для мобильных устройств..

Ну, когда-то Макс (бывший владелец сервиса) планировал сделать мобильный дизайн с применением Bootstrap, но потом тупо воспользовался наработкой Reysler'a и не стал ничего делать. Хотя сейчас применение bootstrap на сервисе думается действительно было бы полезным, и не только для мобильного диза

0

Instagram drumman.1

Поделиться47Вт, 9 Мар 2021 22:48:18

Автор: kolobdur74
...
Зарегистрирован: Пн, 6 Сен 2010
Сообщений: 7394
Уважение: +5896
Позитив: +6527
Пол: Мужской
Последний визит:
Сегодня 16:27:09

Romych написал(а):

Ну, когда-то Макс (бывший владелец сервиса) планировал сделать мобильный дизайн с применением Bootstrap, но потом тупо воспользовался наработкой Reysler'a и не стал ничего делать. Хотя сейчас применение bootstrap на сервисе думается действительно было бы полезным, и не только для мобильного диза

Я выкладывал готовый диз, да он предполагал добавку одного скрипта: Мобильный дизайн "Приложение". Установка сложная. - был послан.. Думал его переделать под чисто CSS, а потом подумал оно мне надо.. Это не правка, как от сервиса предлагается, это полностью написанный дизайн, правда с учетом нынешних изменений уже вероятно кривой..

0

Поделиться48Вт, 9 Мар 2021 22:56:12

Автор: kolobdur74
...
Зарегистрирован: Пн, 6 Сен 2010
Сообщений: 7394
Уважение: +5896
Позитив: +6527
Пол: Мужской
Последний визит:
Сегодня 16:27:09

Romych, я предлагал поставить вот этот скрипт на весь сервис: https://unpkg.com/current-device/umd/cu … ice.min.js , который добавляет класс в html в зависимости от устройства, на котором заходишь, что резко увеличивает возможность по ваянию для мобильных устройств - ответ был, что на фига нужен лишний скрипт и так хорошо.. Ну, хорошо и ладно.. Сделал, то, что сделал и забил, бо все равно это все через ж..

+1

Поделиться49Вт, 9 Мар 2021 22:56:23

Автор: Romych
drumman
Зарегистрирован: Вт, 16 Дек 2008
Сообщений: 2709
Уважение: +4098
Позитив: +2387
Пол: Мужской
Последний визит:
Пт, 20 Дек 2024 23:15:33

kolobdur74 написал(а):

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

Молодец! :cool: Я в 2019 на сервисе отсутствовал, данной темы не видел. Да со временем всё меняется, появляются новые девайсы, новые требования. Bootstrap идёт в ногу со временем. А тебе в одиночку каждый раз переписывать дизайн под новые требования, действительно нет смысла

+1

Instagram drumman.1

Поделиться50Вт, 9 Мар 2021 22:59:28

Автор: Deff
Тутошний...
Зарегистрирован: Ср, 16 Июн 2010
Сообщений: 51442
Уважение: +15403
Позитив: +11961
Последний визит:
Сегодня 18:11:19

kolobdur74 написал(а):

который добавляет класс в html в зависимости от устройства,

Тут надо бы сатсану еще сагитировать, ибо у неё приличный опыт проектирования стиля mybb и для андроидов и Ios, тады бы идея ожила и распространилась... Хотя попасть в фазу её хотелок сложно...

Отредактировано Deff (Вт, 9 Мар 2021 23:00:23)

0

Поделиться51Вт, 9 Мар 2021 23:03:27

Автор: kolobdur74
...
Зарегистрирован: Пн, 6 Сен 2010
Сообщений: 7394
Уважение: +5896
Позитив: +6527
Пол: Мужской
Последний визит:
Сегодня 16:27:09

Romych написал(а):

Да со временем всё меняется, появляются новые девайсы, новые требования. Bootstrap идёт в ногу со временем.

Прикол в том, что этот скрипт просто добавляет классы: под мобилку, под планшеты, под ПК - в зависимости от того, с чего зашел.. То есть он не портит ничего, но добавляет возможность.. Я его в свое время случайно нашел, это гитхабовский скрипт, он правится до сих пор..

Deff написал(а):

Тут надо бы сатсану еще сагитировать, ибо у неё приличный опыт проектирования стиля и для андроидов и Ios, тады бы идея ожила и распространилась... Хотя попасть в фазу её хотелок сложно...

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

0

Поделиться52Вт, 9 Мар 2021 23:13:56

Автор: kernel
Администратор
Зарегистрирован: Пт, 31 Янв 2020
Сообщений: 1617
Уважение: +3694
Позитив: +191
Последний визит:
Вт, 20 Окт 2020 15:41:44

Romych написал(а):

kolobdur74 написал(а):
И да, на Майбб нет мобильного дизайна, хотя от сервиса есть галочка в настройках Админ панели, но это что угодно, но не диз для мобильных устройств..
Ну, когда-то Макс (бывший владелец сервиса) планировал сделать мобильный дизайн с применением Bootstrap, но потом тупо воспользовался наработкой Reysler'a и не стал ничего делать. Хотя сейчас применение bootstrap на сервисе думается действительно было бы полезным, и не только для мобильного диза

Представляешь объем работы? Это изменение не стилей, это изменение всей вёрстки. Учитывая, что в коде форумов нет разделения view, то по-сути это выльется в переписывания большого количества всего кода форумов. Категорически нельзя для всех делать такие изменения, так что нужно выделять отдельно view и ставить в зависимости от настройки одну вёрстку или другую. При этом, любое изменение на форуме потребует изменений и тестирования в двух вёрстках.

Romych написал(а):

Bootstrap идёт в ногу со временем.

На самом деле не совсем. Во-первых, он не адаптивен сам по себе ) Да, на нем адаптивность сделать гораздо проще, чем на каком-то кастомном дизайне (точнее, это относится к старому доброму css2, flex и grid во многом меняют ситуацию), но сам по себе адаптивность он не привносит. Плюс сейчас уже во всю новые сайты пишут на js фреймворках, vue, react, svelte, при этом для bootstrap там код приходится поддерживать сторонним людям, сами разработчики bootstrap до сих пор используют jquery.

kolobdur74 написал(а):

Romych, я предлагал поставить вот этот скрипт на весь сервис: https://unpkg.com/current-device/umd/cu … ice.min.js , который добавляет класс в html в зависимости от устройства, на котором заходишь, что резко увеличивает возможность по ваянию для мобильных устройств - ответ был, что на фига нужен лишний скрипт и так хорошо.. Ну, хорошо и ладно.. Сделал, то, что сделал и забил, бо все равно это все через ж..

На самом деле ответа от Максима я там не вижу, а alex63 тогда не имел доступа к коду и на весь сервис что-то добавить мог только через Администрирование->Скрипты. Но посмотрев, я так и не понял чем это принципиально лучше обычной адаптивной вёрстки.

+1

Поделиться53Вт, 9 Мар 2021 23:33:39

Автор: kolobdur74
...
Зарегистрирован: Пн, 6 Сен 2010
Сообщений: 7394
Уважение: +5896
Позитив: +6527
Пол: Мужской
Последний визит:
Сегодня 16:27:09

kernel написал(а):

На самом деле ответа от Максима я там не вижу, а alex63 тогда не имел доступа к коду и на весь сервис что-то добавить мог только через Администрирование->Скрипты. Но посмотрев, я так и не понял чем это принципиально лучше обычной адаптивной вёрстки.

Максим и не участвовал в той дискуссии.. Отличие в добавке класса, что позволяет верстать дизайн отдельно под мобильную версию, под планшет или под ПК, без использования конструкций media, как сейчас.. Что зачастую тянет и зависимость приоритетов, отсюда вставляем кучу импортантов, что есть сейчас.. Вот берем кусок того, что есть:

Код:

/* E1.1 */
@media all and (max-width: 1200px) and (min-width: 700px) {
  #pun, .punbb, #pun-title table, #pun-navlinks, #pun-ulinks .container {
    max-width: 900px !important;
    min-width: 600px !important;
    }
 
  #pun-ulinks >.container{
    max-width: 900px !important;
    min-width: 0px !important;
    }

  #pun-main h1 span, #pun-main h2 span {
    text-overflow: ellipsis;
    max-width: 100%;
    white-space: nowrap;
    display: inline-block;
    overflow-x: hidden;
    }
}
 
/* E1.2 */
@media screen and (max-width: 699px) and (min-width: 541px) {
  #pun_wrap {
    overflow-x: hidden !important;
    }

  #pun, .punbb {
    max-width: 600px !important;
    min-width: 400px !important;
    }
 
  #pun-ulinks, #pun-ulinks .container, #pun-navlinks, #pun-navlinks .container, #pun-title table, #pun-title h1 {
    max-width: 100% !important;
    min-width: 410px !important;
    width: auto !important;
    }

  #pun-ulinks {
    width: 100% !important;
    }
 
  #pun-navlinks li:not(#navextra1)> a, #pun-ulinks a {
    font-size: .9em;
    padding-left: .68em !important;
    }

  #pun-main h1 span, #pun-main h2 span {
    text-overflow: ellipsis;
    max-width: 100%;
    white-space: nowrap;
    display: inline-block;
    overflow-x: hidden;
    }
}

И говорим, что это есть нормальный мобильный стиль?

Вот, что дает данный скрипт:

Вот его описание: https://github.com/matthewhudson/current-device

Отредактировано kolobdur74 (Вт, 9 Мар 2021 23:51:39)

0

Поделиться54Вт, 9 Мар 2021 23:52:33

Автор: Deff
Тутошний...
Зарегистрирован: Ср, 16 Июн 2010
Сообщений: 51442
Уважение: +15403
Позитив: +11961
Последний визит:
Сегодня 18:11:19

Ну по идее в классе неплохо бы иметь не ток название но и текущую ширину экрана... Хотя кнешн текущая ширина наверно должна подставляться скриптом и должна менятся от cобытия window.resize

Отредактировано Deff (Вт, 9 Мар 2021 23:54:19)

0

Поделиться55Ср, 10 Мар 2021 00:12:23

Автор: kolobdur74
...
Зарегистрирован: Пн, 6 Сен 2010
Сообщений: 7394
Уважение: +5896
Позитив: +6527
Пол: Мужской
Последний визит:
Сегодня 16:27:09

Кстати, еще логика с метатегом:

Код:

<meta name="viewport" content="width=device-width, initial-scale=1.0">

Включается только с мобильным стилем от сервиса, а если я не хочу его включать, а имею свой, то мне надо этот метатег самостоятельно прописывать.. %-)

Отредактировано kolobdur74 (Ср, 10 Мар 2021 00:13:23)

0

Поделиться56Ср, 10 Мар 2021 00:16:07

Автор: kernel
Администратор
Зарегистрирован: Пт, 31 Янв 2020
Сообщений: 1617
Уважение: +3694
Позитив: +191
Последний визит:
Вт, 20 Окт 2020 15:41:44

kolobdur74
На самом деле, в нормальной адаптивной вёрстке совсем не обязательно использовать !important. Я делал очень большие сайты с сотнями кб css и там !important можно было перечислить по пальцам одной руки... Насколько понимаю, в форумах используется много !import для того, чтобы кастомные дизайны не смогли так уж легко поломать базовые стили. Это соответственно ведет к тому, что в кастомных стилях тоже приходится !important использовать.

Помню свой первый адаптивный дизайн, там использовались точно такие же вспомогательные классы - mobile, portrait, landscope, desktop, tablet. Здесь немного другой подход, скрипт их подставляет, но принципиально никакой разницы нет, и с тем и с другим подходом получится в итоге абсолютно одинаковый адаптивный дизайн. Только при использовании @media не будет этапа, когда js еще не подставил свои классы и резкого изменения оформления после подстановки (на медленных каналах это актуально).

Отличие в добавке класса, что позволяет верстать дизайн отдельно под мобильную версию, под планшет или под ПК, без использования конструкций media, как сейчас..

Это, кстати, устаревший подход. Я не зря говорю о похожем разделении при первом своем адаптивном дизайне, затем всё усложнилось. У того же bootstrap тот же путь, можно посмотреть как это было на bootstrap 2 (https://getbootstrap.com/2.3.2/scaffolding.html раздел Responsive utility classes) и Bootstrap 5 https://getbootstrap.com/docs/5.0/layout/grid/. В реальности всегда находятся пользователи, пользующиеся браузером в окне, где размеры совершенно произвольны или нестандартные размеры. Так что при вёрстке адаптивного дизайна приходится рассматривать вообще все диапазоны размеров, и, как правило, нельзя уже расcчитывать только на 5 точек mobile, mobile landscope, tablet, tablet landscope, desctop. Дополнительные классы с названием операционной системы ничего для css полезного не дают. Соответсвенно, когда делаю изначально резиновый дизайн, то переходные точки, как правило, совсем не совпадают с общепризнанными и соответствуют размеру главных элементов на странице.

+1

Поделиться57Ср, 10 Мар 2021 00:24:19

Автор: kolobdur74
...
Зарегистрирован: Пн, 6 Сен 2010
Сообщений: 7394
Уважение: +5896
Позитив: +6527
Пол: Мужской
Последний визит:
Сегодня 16:27:09

kernel написал(а):

На самом деле, в нормальной адаптивной вёрстке совсем не обязательно использовать !important. Я делал очень большие сайты с сотнями кб css и там !important можно было перечислить по пальцам одной руки... Насколько понимаю, в форумах используется много !import для того, чтобы кастомные дизайны не смогли так уж легко поломать базовые стили. Это соответственно ведет к тому, что в кастномных стилях тоже приходится !important использовать.

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

0