bdemetrix/bdemetrix.github.io

bdemetrix.github.io's Issues

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

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

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

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

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

Поиск в профиле в мобильной версии

Задача: сверстать меню в профиле пользователя.
Пример блога: Блог пользователя Тимофей Мартынов
Дизайн: Artem Smart-lab
Нюансы: поскольку приходится рисовать на скриншотах (из-за постоянно изменчивости дизайна) то некоторые отступы должны быть несколько иными, в отличие от того что есть в дизайне. Такие отступы я выделил красного цвета стрелочками и подписью.

Иконки приложил.

Возвращение назад в слайдере через активный элемент

1. Заходим сюда, в корпоративные облигации: https://smart-lab.ru/q/bonds/
2. Дальше открываем в таблице любую облигацию, пусть первую: https://smart-lab.ru/q/bonds/RU000A1062M5/
3. И если человек хочет вернуться назад к списку облигаций он сразу нажимает на "Корпоративные", но этот пункт уже не работает, так как находится в активном состоянии.

Маленькое обновление для issues/23

Была задача: #23

Сейчас есть косяк в том, что если нет лайков и добавлений в избранное, то Вова просто эти показатели не выводит.

Я изменил третью плашку, чтобы отразить как это должно быть в данном случае.

Дизайн

Блок "Что вы писали в этот день в прошлом"

Задача: сверстать блок “thisday“
Дизайн: Artem Smart-lab
Пояснения: в посте “thisday“ показываются посты, которые были написаны в этот день в прошлом. Пишется заголовок, дата, количество добавлений в избранное и лайки. Заголовок поста является ссылкой, каждый пост в посте тоже является ссылкой. Лайки и избранное не кликабельные.

Таблица "Рейтинг Акций Мозговик"

Возвращение к блудному сыну (окну модерации)

В окне модерации в мобиле есть некоторый недостаток в понимании что сейчас активно, а что нет. Да и стили прыгают. Давай цвета подвигаем =) Знаю ты это не очень любишь)

Фрейм: "popup clear desktop new colors"

Меняем только цвета у активных и не активных элементов (кнопки, теги). Шрифты, font-weight и что ещё может отличаться не трогаем.

Ссылка: Figma

Закрытый пост

Проблема: есть посты которые автор закрывает для просмотра и комментирования.
Задача: сверстать вид закрытого поста в ленте, и сам вид закрытого поста.

https://trello.com/c/YkRN48K7

Таблица "рейтинг акций Мозговик" не для премиум пользователей

Проблема: если у пользователя нет статуса премиум, то мы ему показываем строчку текста, так как нет страницы.

Давай покажем следующее: копию таблиц рейтинга, но с фейковым данными, и эти данные "заблюрим". А свреху ещё сделаем плашку с ценами и возможностью прейти в магазин для покупки.

Что мы в итоге получим: клиент ещё до покупки поймёт как примерно выглядит таблица. да, она будет размытая, но картина ему уже будет понятна. Если клиент хитрожопый, и знает что она замазана в css, и снимет этот стиль, то он увидит таблицу с ненастоящими данными. "Мы переиграли твоё переигрывание".

Дизайн: ссылка

Ховер эффекты для лайков, дизлайков и реплаев в комментариях

Задача: Нужно сделать ховер эффект для иконок лайков, дизлайков и реплаев в комментариях.

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

Дизайн: Artem Figma

Иконки:

Шапка в блоге и в посте

Заголовок в ленте

Задача: сверстать заголовок для лент.
Дизайн: Artem Smart-lab(раздел ленты “новости“)
Нюанс: Этот заголовок может подставляться не всегда. Надо сверстать его так, чтобы если он не используется, всё было по прежнему

Прогресс бар в бондах

Задача: на странице Облигация нужно добавить рейтинг этой облигации. И чтобы отразить на каком месте этот рейтинг находится относительно других, нужно его оформить прогресс баром.

Дизайн: Artem Figma

Нюансы: у этого прогресс бара есть три варианта цвета, их видно в дизайне и показал ниже скриншотом. таблицу со списком рейтинга можно увидеть в дизайне над фреймом бонда.

Баннер в мобильную версию

Перенести верстку страницы котировок в новый проект

Добавляем кнопки для скачивания приложения в футер

Нужно добавить ещё две кнопки для скачивания приложения смартлаба в футер.

И чтобы было красиво)

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

https://apps.rustore.ru/app/ru.smartlab
https://appgallery.huawei.com/#/app/C109059143

Опросы

Проблема: на старой версии смартлаба есть “опросы”, на новой нет.
Пример поста с опросом: Переехали бы из России за границу, если бы могли себе позволить? (опрос)

Дизайн: Artem Smart-lab

Нюансы: опрос всегда сверху, над текстом поста. В превью поста, опрос идёт вместо изображения.

Доработки Рейтинга акций Мозговик

Предыдущий таск: github

Дизайн: Figma

Задача: Добавляем цвета к значениям,+ тёмная тема

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

PRs: #41 и #20

Экономический календарь

Возвращение блудного сына (поиска)

Задача: Сейчас поиск в мобиле на главной, скрывается на широких экранах. Тим хочет, чтобы поиск не скрывался.

Слайдер на странице котировок

Слайдер на странице котировок должен перелистываться к активному пункту при загрузке страницы

Цитирование в комментариях

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

Цитата в коде поста вставляется просто в теге

, нужно класс подвязать к этому тегу, видимо =)

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

Дополнение к календарю и ленте новостей

Стандартизация modals

Можно заменить все warning-popup на custom-pop-up
И перенести правила css в custom-pop-up

Но есть нюанс: у нас все окна отличатся - из этого возникает проблема из унификации (зоопарк стилей)
Предлагаю Артему собрать все окна и создать общий концепт в котором будет

1. заголовок с кнопкой-крестиком (эта часть готова и не отличается в разных окнах)
2. центральная часть - эта часть имеет разную верстку и ее надо унифицировать
3. футор модального окна (эта часть тоже есть)

Также очень важно оставить возможность вставлять любой уникальный контент в модальное окно для случаев как в премиум постах с описанием подписки

Новый блок "Читайте на Смартлабе"

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

Задача: сверстать блок как в дизайне =) Располагаться он должен после комментариев.

Дизайн: Artem Smart-lab

Нюансы: вопрос только к картинкам в превью. Надо сделать как в дизайне, чтобы высота и ширина фиксировалась, а изображение внутри контейнера центрировалось. Криво как-то сказал xD

Ссылка в заголовке некоторых блоков

У нас есть такой заголовок у некоторых блоков. И иногда там будет находится ссылка на страницу.

Надо прописать класс так, чтобы если там была ссылка, то появлялось подчёркивание (underline).

На данный момент мы ссылку ставим, но не понятно, что это ссылка.

И если ссылки нет, то и подчёркивания не должно быть, что логично)

Переработка заголовков и меню в лентах

Дим, к сожалению пришла задача по переделыванию того, что есть. Речь идёт о заголовках к странице, и сопутствующему ему меню.
Дизайн: Фигма

Адаптация всплывающих окно под jbox

На данный момент, есть 2 окна, которые требуют адаптации:

1. Окно логина: https://bdemetrix.github.io/sl_mobile/build/
2. Окно удаления комментария: https://bdemetrix.github.io/sl_mobile/build/post.html

Но скоро будет ещё одно мини окошко, без кнопок и т.д.

Кнопка в ленту "Premium"

Задача: нужны кнопки в ленту премиум, которые ведут на телеграм канал и на страницу с рейтингом акций нашей аналитики.
Дизайн: Artem Smart-lab раздел “Лента Premium“
Нюансы: иконку телеграма взял с у тебя с сайта с кнопки телеги внизу, иконку звёздочки могу скинуть SVG, если надо

Баг с превью поста

Проблема: на страницах с новостным типом лентой, Лента всех премиум постов (включается при нажатии на тогл “только заголовки“), если у автора слишком длинное имя, то строчку перекашивает. ориентироваться можно на автора “Анатолий Полубояринов“ (image1.png)
Нюансы: речь идёт о ширине экрана 360px. Меньше я так понимаю можно не смотреть. Обратил внимание, что при ширине 367px имя автора влезает, а при 366px, уже переносится, хотя место ещё есть. Если есть возможность, хотелось бы это пространство почти полностью использовать. Оставить чисто пару пикселей с двух сторон. (image2.png)

header menu position

На широких экранах меню сайта и иконки сообщений, уведомлений и профиля не по краям (И ТИМУ ЭТО НРАВИТСЯ =( поэтому не трогаем), но меню пользователя при нажатии на аватарку всплывает только в углу. Привяжи пожалуйста его к аватарке пользователя как на экранах до 1920px

Обновление окна модерации

Требуется небольшое обновление окна модерации в плане вёрстки.

https://www.figma.com/file/wk6Gcd36p17NDhlP0VjHod/Artem-Smart-lab?type=design&node-id=3584%3A2&mode=design&t=0tHpMYtO0uW8Qz0n-1

Изменения только здесь:

Я понимаю что изменение крошечное, но Вове так будет проще сделать.