"Тонированный Планировщик" — стиль оформления (user CSS)

Аватара пользователя
Кирилл Панькин
Сообщения: 244
Зарегистрирован: 30.03.2016 16:58

"Тонированный Планировщик" — стиль оформления (user CSS)

20.01.2017 23:10

Приветствую уважаемое сообщество!

Небольшой релиз! :-)

Решился поделиться пользовательским стилем оформления, который давно потихоньку разрабатываю для собственного пользования (начиналось вот с этого).
Стиль опубликован на сайте userstyles.org. Для установки в Chrome и Firefox рекомендуется использовать расширение Stylish.
Страница стиля: "Тонированный Планировщик".

Стиль добавляет Планировщику светлый бледно-зелёный фон, а блокам списков даёт ясные очертания с бледно-зелёным фоном потемнее. На другие части интерфейса Планфикса стиль никак не влияет.

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

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


Можно выбрать вариант с тенями у блоков (хоть это совсем не стыкуется с общей стилистикой оформления Планфикса). Вариант теней выбирается на странице стиля перед установкой/обновлением. На скриншоте показан вариант с тенью.

Стиль действует для всех страниц в домене planfix.ru, но побочных эффектов на других страницах домена (главная страница, блог, форум, справка), кроме самого пользовательского портала, не замечено. Если хочется чётко ограничить действие стиля доменом пользователя userdomain.planfix.ru, надо вручную отредактировать стиль в Stylish соответствующим образом (изменить целевой домен или задать выражение-фильтр).

Известные недочёты:
1. Ряд неаккуратных мест в отображении связан с тем, что размеры блоков рассчитываются и задаются скриптом на странице и, грубо говоря, его приоритет выше, чем у стиля, и не всегда можно найти обходной путь, чтобы добиться красивого результата. Тёмные рамки вокруг блоков реализованы изменением размеров и "раскраской" элемента, который по изначальному замыслу разработчиков страницы Планировщика является частью внутренней структуры вёрстки и вообще не должен быть видимым. Особенно любят эти неприятности проявляться при отображении/скрытии правой панели и при отображении скрытии нижней полосы прокрутки — даже когда все соотношения размеров в целом настроены чётко, иногда подсчёты сбоят и размеры немного "скачут". Победить описанные неприятности едва ли получится просто в силу их природы (хотя кое с чем прогресс со временем всё же произошёл). Тут можно только радоваться тому, что неприятности эти не очень страшные, и результат в целом получается достаточно симпатичным. :-)
1.1. Если блок календаря разместить в одной колонке с блоками карточек, то блоки карточек получаются заужены справа, а левые края блоков выровнены по смещённому вправо заголовку календаря (это проще увидеть глазами).
1.2. Блоки имеют странновато смотрящееся неодинаковое отображение нижнего края (где-то есть рамка, где-то нет, где-то она половинной ширины, "затемнение" разной высоты), а в некоторых блоках иногда содержимое чуть-чуть не докручивается до самого конца (скажем, последние 5 минут суток перед полуночью в некоторых представлениях календаря).
1.3. Правый край рабочего поля Планировщика часто немножко подрезан. Это связано как раз с дополнительной шириной, создаваемой тёмной рамкой блоков, о которой "не знает" алгоритм вычисления горизонтальных размеров.
2. Весьма вероятно, что в коде css есть "мёртвые" фрагменты, так как он дописывался достаточно долго вместе с изменениями в страницах Планфикса. К тому же, я не очень большой знаток сss и код местами очевидно корявый, хоть и работающий. Прошу не судить строго.

Пользуйтесь на здоровье! ;-)


P.S. Если стиль вызвал интерес, рекомендую установить его (и Stylish, если ещё не установлен) и посмотреть живьём, как оно смотрится (установленный стиль включается/отключается одним кликом без перезагрузки страницы).

 
Вложения
Tinted Planner - Summary STYLED 2.png
Стилизованный вид Сводных данных в свежесозданном аккаунте
Tinted Planner - Summary ORIGINAL 2.png
Исходный вид Сводных данных в свежесозданном аккаунте
Последний раз редактировалось Кирилл Панькин 09.02.2017 16:57, всего редактировалось 1 раз.

Аватара пользователя
Кирилл Панькин
Сообщения: 244
Зарегистрирован: 30.03.2016 16:58

22.01.2017 17:32

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

Аватара пользователя
Кирилл Панькин
Сообщения: 244
Зарегистрирован: 30.03.2016 16:58

30.01.2017 18:37

По ходу.
Я тут подумал, что можно ведь добавить выбор произвольных фоновых цветов (которые сейчас светлый и тёмный бледно-зелёный) при установке/обновлении стиля.
Если интересно, то черканите сюда, сделаю.

Аватара пользователя
Andrey Lezhnin(PF)
Сообщения: 186
Зарегистрирован: 16.04.2016 01:46

30.01.2017 20:07

Сегодня проверил update стиля - нужно было загрузить обновления.
Что поменялось, пока не понял

Аватара пользователя
Кирилл Панькин
Сообщения: 244
Зарегистрирован: 30.03.2016 16:58

30.01.2017 20:38

Никаких значимых изменений там не произошло, просто наводил порядок. Если бы я добавил что-то новое, то отразил бы в описании.

Аватара пользователя
Кирилл Панькин
Сообщения: 244
Зарегистрирован: 30.03.2016 16:58

06.02.2017 23:40

Поправил ряд косяков, связанных с вертикальными размерами блоков, и ещё кое-что по мелочи. Подробности в описании стиля на его странице.

Аватара пользователя
Кирилл Панькин
Сообщения: 244
Зарегистрирован: 30.03.2016 16:58

08.02.2017 16:07

Добавил возможность выбрать нейтральный цветовой тон оформления, со стандартным белым фоном и серыми рамками блоков.

Аватара пользователя
Кирилл Панькин
Сообщения: 244
Зарегистрирован: 30.03.2016 16:58

Re: "Тонированный Планировщик" — стиль оформления (user CSS)

21.03.2018 14:01

После длительного периода заброшенности, привёл стиль в порядок и соответствие текущему дизайну планировщика в Планфиксе.

Также убрана настройка альтернативного цвета общего фона.

Аватара пользователя
Федоров Илья
Сообщения: 224
Зарегистрирован: 21.01.2018 18:09

Re: "Тонированный Планировщик" — стиль оформления (user CSS)

15.04.2018 13:55

Кирилл Панькин писал(а):
21.03.2018 14:01
После длительного периода заброшенности, привёл стиль в порядок и соответствие текущему дизайну планировщика в Планфиксе.

Также убрана настройка альтернативного цвета общего фона.
Спасибо, обновимся посмотрим.

Аватара пользователя
Кирилл Панькин
Сообщения: 244
Зарегистрирован: 30.03.2016 16:58

Re: "Тонированный Планировщик" — стиль оформления (user CSS)

15.11.2018 14:12

Освежил стиль в соответствии с текущей вёрсткой ПланФикса.
В нём кроме прочего появилась поддержка нового списка "Таблица".

Также добавил несколько новых стилей для ПланФикса.

Как обычно, это одновременно и работоспособные средства, и наглядная демонстрация идей для интерфейса.

Изображение

Ответить