search

BDemetrix / BDemetrix.github.io

3 stars 2 forks source link

Апдейт для таблицы "Рейтинг акций Мозговик" #57

Closed kulbergArt closed 4 months ago

kulbergArt commented 9 months ago

Чтобы таблица стала ещё удобней, нужно добавить стили для сортировки по столбцам, и подсказки для пользователей, чем является тот или иной столбец.

Дизайн: Фигма

Что изменилось:

  1. Изменилась ширина столбцов, чтобы влезали иконки
  2. Слева от названия столбца иконка сортировки. Она имеет три вида: отсутствие сортировки, сортировка на убывание, сортировка на увеличение.
  3. Справа от названия столбца иконка подсказки. -при наведении на неё (в мобиле тач по ней), jbox показывает небольшое окошко, где указаны пояснения к этому столбцу.
  4. Поскольку сортировка у нас это открытие таблицы по другому адресу, то каждое название столбца это ссылка. Поэтому нужен ховер эффект, который подскажет,что это кликабельный объект. Стиль ховер эффекта видно на маленьком фрейме справа (видно на скриншоте к ТЗ).

image

BDemetrix commented 9 months ago

@kulbergArt есть несколько вопросов:

  1. ты хочешь сделать иконки 1010 - это та мобилке очень неудобно там кнопки должны быть минимум 3030 Image

  2. нет варианта иконок и ховер-эффекта(только цвет шрифта меняется?) для темной темы

kulbergArt commented 8 months ago

@BDemetrix

1) Да, иконки маленькие, но - иконка сортировки может отдельно не нажиматься, так как и сама иконка и текст рядом выполняют одну функцию, если их объеденить в одну ссылку, то попасть будет просто. Что касается иконки "i" тут да, сложнее, но я ориентировался на эту таблицу https://ai.finam.ru/ (собственно оттуда мы и взяли дизайн хехе). Если с мобильного устройства открыть, то всё открывается успешно. Посмотрим пожалуйста, сможем ли мы так же, или надо будет для мобильных устройств что-то придумывать?

2) Спасибо что напомнил про тёмную тему. Сделал окно где указал и цвет и ховер эффект. Так как иконки svg, меняем цвет как обычно через css.

BDemetrix commented 8 months ago

@kulbergArt иконки желательно такие делать (сравни с той, что в фигме)

<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20" fill="none">
    <circle cx="10" cy="10" r="9" fill="white"/>
    <path d="M9.21876 14.3281H9.71876V13.8281V9.24484V8.74484H9.21876H8.4636C8.3082 8.74484 8.18234 8.61896 8.18234 8.4636C8.18234 8.30822 8.30822 8.18234 8.4636 8.18234H10C10.1554 8.18234 10.2812 8.30821 10.2812 8.4636V13.8281V14.3281H10.7812H11.5364C11.6918 14.3281 11.8177 14.454 11.8177 14.6094C11.8177 14.7647 11.6918 14.8906 11.5364 14.8906H8.4636C8.30821 14.8906 8.18234 14.7647 8.18234 14.6094C8.18234 14.454 8.30822 14.3281 8.4636 14.3281H9.21876ZM0.5 10C0.5 4.74867 4.7494 0.5 10 0.5C15.2513 0.5 19.5 4.7494 19.5 10C19.5 15.2513 15.2506 19.5 10 19.5C4.74867 19.5 0.5 15.2506 0.5 10ZM1.0625 10C1.0625 14.9398 5.06063 18.9375 10 18.9375C14.9398 18.9375 18.9375 14.9394 18.9375 10C18.9375 5.06016 14.9394 1.0625 10 1.0625C5.06016 1.0625 1.0625 5.06063 1.0625 10ZM9.52344 4.83078C9.52344 4.5675 9.73672 4.35422 10 4.35422C10.2633 4.35422 10.4766 4.5675 10.4766 4.83078C10.4766 5.09395 10.2632 5.30734 10 5.30734C9.73678 5.30734 9.52344 5.09395 9.52344 4.83078Z" stroke="#666666"/>
</svg>
BDemetrix commented 8 months ago

@kulbergArt Верстка https://bdemetrix.github.io/sl_mobile/build/stocks-rating.html

kulbergArt commented 8 months ago

Ты был прав, иконки 10px это перебор. Но слишком сильно их не увеличить =(

Подправь пожалуйста следующее: 1) Высота и ширина иконок "i" в шапке таблицы не 10, а 12px 2) font size текста в всплывающей подсказке в "i" не 10px а 12px 3) line-height текста в всплывающей подсказке в "i" не 12px а 14px 4) Ширина блока с подсказкой не 220 px, а 250px. 5) Изменить ширину столбцов - цифры на скриншоте (всё есть в фигме) 6) Изменить текстовое описание столбцов (в некоторых местах текст был сокращён, чтобы влезало)

Image