search

abnormalize0 / DailyTeleFrog

0 stars 0 forks source link

Реализовать страницы профилей пользователей #68

Open abnormalize0 opened 9 months ago

abnormalize0 commented 9 months ago

Необходимо реализовать функционал компонента ProfileView.vue.

Roffor commented 6 months ago

Мои замечания. @serynabatov сделает саму страницу профиля. Страница профиля должна себя включать:

Аватарка пользователя - картинка, которую он может загрузить с компа. Фон профиля - картинка, которая выбирается из доступных. Доступны несколько стандартных фонов ( сделать в рамках этого тикета) и фоны, доступные за подписку на авторов (пока не реализовано). Описание профиля - текстовое поле с ограничением. Ограничение - любое разумное на количество символов. Это текстовое поле должно поддерживать markdown. В профиле должно быть взаимодействие с черным списком и подписками (думаю пока достаточно возможности убрать элемент из любого списка). В профиле должна быть возможность смены пароля и имени.

Макет страницы сверстает @serynabatov и согласует с @abnormalize0 и @Roffor.

Так как задача довольно большая и комплексная при желании/необходимости можно разрезать на пачку тикетов поменьше. Это на усмотрение @serynabatov

abnormalize0 commented 6 months ago

Дополняю. Кроме вышеперечисленного должны отображаться:

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

По компоновке шапки предлагаю ориентироваться на ВК. Расположение аватара относительно шапки, кнопку редактирования, значок около имени тут же видно. 1

Остальные элементы такие как описание профиля и дату регистрации разместить там же, возможно по примеру ДТФа, возможно как-то более компактно. 2

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

Для профилей которые не принадлежат тебе и у которых есть посты за подписку между шапкой и постами должна быть плашка с возможностью подписаться и рекламирующей преимущества (у данного автора n эксклюзивных постов и m фонов профиля) как например это сделано в ВК. 4

Ниже шапки отображаются посты пользователя, так же как они выглядят в главной ленте сайта.

Страницы профилей должны быть реализованы в рамках компонента ProfileView.vue.

serynabatov commented 6 months ago

Вот вайрфрейм @Roffor @abnormalize0

https://www.figma.com/proto/acdt3ap6zOY7tlrRP3P4AW/Work--TeleFrog?page-id=501%3A2&type=design&node-id=709-639&viewport=258%2C425%2C0.04&t=E6GVYaUuh8L4jrGB-1&scaling=min-zoom&mode=design

Add refs:

abnormalize0 commented 6 months ago
  1. Общий лейаут сайта будет такой как на реддите: слева и справа колонки с элементами интерфейса. Тебе не надо их делать, просто чтобы ты понимал сколько у тебя свободного пространства для работы есть;
  2. Посты в профиле будут занимать всю ширину свободного места, опять же, как это сделано на реддите (или дтф, или пикабу); 5
  3. Мне не очень нравится аватарка посреди страницы, я бы разместил ее левее. То что она наполовину залезает на обложку это хорошо;
  4. Рейтинг пользователя это не рейтинг по пятибалльной шкале который ты добавил на обложку, это сумма оценок постов и комментариев пользователя (+13 106 на скрине страницы дтф);
  5. В целом как-то много свободного места, я бы расположил элементы как-то плотнее.