planfix.ru - Нанокарточки, эксперимент (by Kirr)

Added by Kirrrr@userstyles, Created: Feb 02, 2017, Updated: Feb 05, 2017
Размер шрифта названия задачи (в пикселях):
Начертание шрифта названия задачи:
Отображать подписи у некоторых полей:
Скрывать "не указана" в поле "Надзадача":
Отступ между полями в строке (в пикселях):
Размер аватаров пользователей (в пикселях):
Размещение списков аватаров пользователей:

Description:

Делает карточки в Планировщике компактными.

Экспериментальный стиль! Пробуйте, только если сильно интересно.

More info
(описание желательно прочитать хотя бы до части про нюансы и технические внутренности)

Производимый эффект:
— уменьшает вертикальное расстояние между карточками в списке;
— уменьшает отступы внутри карточки;
— убирает горизонтальные разделительные линии между полями;
— уменьшает шрифт названия задачи и делает его нежирным (размер и жирность можно выбрать);
— скрывает подписи у большинства полей (естественно, это ограничивает применение стиля теми вариантами компоновки карточек, в которых суть информации, отображаемой в данных полях, ясна и без подписей);
— часть скрываемых подписей можно оставить видимыми, это касается полей "Контрагент", "Процесс", "Проверка результата" и, возможно, каких-то ещё (действует только, если поле размещено в карточке третьим или ниже);
— большинство текстовых полей (кроме таких, как название задачи, списки пользователей с аватарами, описание задачи, чек-лист, прикреплённые файлы) собираются подряд в одной строке (без переноса по словам), а не занимают отдельные строки (отступ между полями можно выбрать);
— можно скрыть отображение надписи "не указана" в поле "Надзадача", если надзадачи нет (действует только, если поле размещено первым или вторым в карточке, см. подробности ниже);
— можно выбрать размер аватаров в списках пользователей (стандартный размер — 40 пикселей);
— позволяет разместить список аватаров пользователей справа от подписи в одной строке с ней, что может быть удобным, если размер аватаров мелкий.

Настраиваемые параметры выбираются при установке/обновлении стиля отсюда в полях ввода вверху.

На основном скриншоте показан пример отображения компактных карточек с другими моими стилями: "Тонированный Планировщик" и "Цветная подсветка выбора". На втором скриншоте — со стандартным оформлением.

Как и другие мои стили для ПланФикса, данный стиль может использоваться как в сочетании с ними, так и самостоятельно.

Почему "нанокарточки"? Потому что обычные карточки в коде страницы называются "микрокарточками". :-)

Самый первый вопрос: как указать, для какого списка нужно включить компактное отображение? Ведь обычное отображение тоже нужно.
Говоря по-простому: чтобы переключить отображение в другой режим, надо немножечко изменить ширину колонки в любую строну (буквально на пару миллиметров).
Почему именно так и как именно оно работает.
К сожалению, мне не удалось найти среди доступных настраиваемых свойств списка такое, которое можно было бы использовать в качестве своего рода галочки "Отображать карточки данного списка компактно". Потому пришлось применить достаточно необычное решение.
Во-первых, компактный вид применяется не к отдельному списку, а ко всем спискам в одной колонке, если их там несколько. По идее, это не страшное ограничение, так как вряд ли сильно понадобится в одну колонку поместить и компактный список, и обычный.
Во-вторых, включение/выключение компактного вида определяется шириной колонки в Планировщике. Если ширина в пикселях оканчивается на цифру от 5 до 9, то включается компактное отображение, если оканчивается на цифру от 0 до 4, то стиль не применяется и действует обычное отображение (в css-коде это выглядит жутковато, но что поделать). Кстати, ширина колонки по умолчанию, она же — минимальная ширина, равна 260 пикселям, соответственно, для такой колонки компактный вид не будет применён.


Само собой, решение целиком полагается на то, что однажды заданная ширина колонки не изменится без прямого вмешательства пользователя и будет одинаковой на любом устройстве, с которого пользователь открывает сайт ПланФикса. Но, вроде бы, работает чётко и стабильно.


Далее — описание нюансов и технических внутренностей.

Html-код карточек не позволяет средствами css выделить поля определённых типов — элементы кода просто не имеют подходящих отличительных признаков (увы, текстовое содержимое css воспринимать не умеет). Из-за этого невозможно сделать какую-либо произвольную индивидуальную настройку полей (скажем, выборочное отображение подписей) и стили применяются сразу ко многим разнородным (с точки зрения пользователя) полям, для выявления которых используются косвенные признаки и побочные эффекты.
Особую нервотрёпку в этом аспекте вызвала реализация функции скрытия надписи "не указана" в поле "Надзадача". Когда поле "Надзадача" отображает надпись "не указана", с точки зрения сss оно неотличимо от таких текстовых полей, как "Контрагент", "Процесс" и "Проверка результата" (и, возможно, каких-то ещё). Чтобы получить желаемый результат с минимумом побочных эффектов, действие этой функции пришлось ограничить первым и вторым полем в карточке (предполагается, что поле "Надзадача" ставится вверху, сразу после поля "Группа проектов / Проект").
Кроме того, для скрытия надписи "не указана" пришлось использовать весьма радикальный метод, который оказывает неявное влияние на всю карточку. В результате, возможно, что при некоторых вариантах настройки карточек, эта функция может приводить к побочному эффекту, выражающемуся в скрытии и каких-то других надписей.

В "сухом остатке": Поле "Надзадача", для достижения задуманного эффекта, надо ставить в карточке первым или вторым. Поля "Контрагент", "Процесс" и "Проверка результата", для нормального отображения надо ставить третьим или ниже.

Вот так вот всё запутано. Именно поэтому стиль назван экспериментальным. :-)


Тема на форуме ПланФикса: https://forum.planfix.ru/viewtopic.php?f=34&t=4004

P.S. Если стиль окажется для вас полезным и у вас возникнет желание отблагодарить меня условной "чашкой капучино", то это можно легко сделать тут: https://money.yandex.ru/to/410012920197755 :-)

Удачного пользования! :-)

Installs:
Applies to:
planfix.ru

Related styles:

WARNING: This webware is not functioning properly. Please enable javascript in your browser and try again.