Как сделать вертикальную шкалу с этапами (развития, строительства или другого) на HTML?

Question

[SpeakeazyYT10354]

Добрый вечер. Появилась задача - сделать вертикальную шкалу с этапами строительства на HTML. Прототип:

Вот так должна примерно выглядеть шкала на живом сайте В ШАХМАТНОМ ПОРЯДКЕ:

Что посоветуете? Может есть уже готовое решение?

Comments

[Adamos]

Нарисовать этот выпендр в SVG и вставить его инлайн.
Потому что в HTML придется много думать. например, о том, как это будет выглядеть у пользователя на мобиле с текстами дикого размера, напрочь не влезающими в отведенное им дизайнером место.

[dk-web]

Вертикальный таймлайн. Поищите по данным словам. В принципе и на бутстрапе можно сделать.
Но конкретно такую живопись воспроизвести...

[Виталий Першин]

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

[Виталий Першин]

Adamos,

Потому что в HTML придется много думать. например, о том, как это будет выглядеть у пользователя на мобиле с текстами дикого размера, напрочь не влезающими в отведенное им дизайнером место.

а что там думать то? Деградация стилей. Убираем лишний декор и выстраиваем в ряд, направление иконок слева или с права, без проблем контролируется флексами. Все предельно просто.

[Adamos]

Виталий, а если все-таки размер шрифта сделает этот текст в три раза больше, чем есть места напротив иконки?

[Виталий Першин]

Adamos, с чего вдруг, вам глаза и тесты для чего?

[Виталий Першин]

Adamos, Вы вообще про адаптацию слышали или что вас смущает в иконках, шрифтах и прочих мелочах с которыми верстальщик работает постоянно?

[Adamos]

Виталий, встречный вопрос: а у вас есть знакомые со зрением +8?
У которых настройка шрифтов в браузере почему-то разрывает всякие крутые дизайны в клочья?

[Виталий Першин]

Adamos,

встречный вопрос: а у вас есть знакомые со зрением +8?
У которых настройка шрифтов в браузере почему-то разрывает всякие крутые дизайны в клочья?

Я вообще не понимаю о чем вы говорите и где тут крутой дизайн. Притенения к размеру шрифта это дичь какая-то. Вы что не можете адаптировать блок и текст как надо без знакомых? Это настолько элементарная задача с кучей вариантов решения, что просто смешно слушать о каких-то проблемах. Лично я без проблем сделаю этот блок полностью отзывчивым ко всем экранам и размерам и динамическому тексту, но в двух словах я этого не напишу и делать за кого-то не буду, а поскольку такой вопрос задали я предложил простое решение. А то что вы шрифт не можете подогнать и вам иконка мешает, ну это ваши проблемы.

Answer 1

[RAX7]

сделай совою сетку на flex`ах, все эти стрелочки и иконки в svg и позиционируй абсолютом.

Comments

[SpeakeazyYT10354]

Очень даже не плохо, спасибо! Помоги пожалуйста ещё с одним вопросом - Как адаптизировать размер div блока под содержимое в нём (например картинку )?