Merge pull request #20 from frontend-park-mail-ru/dev-27

Dev-27: страница профиля пользователя

public/app.js

@@ -3,6 +3,7 @@
 import { LoginComponent as Login } from './pages/login/login.js';
 import { SignUpComponent as SignUp } from './pages/signup/signup.js';
 import { MainPageComponent } from './pages/main/main.js';
+import { ProfilePageComponent as ProfilePage } from './pages/profile/profile.js';
 
 import { ROUTES } from './constants/routes.js';
 import { BACKEND_LOGIN_ROUTE, BACKEND_SIGNUP_ROUTE, BACKEND_FEED_ROUTE, BACKEND_LOGOUT_ROUTE } from './constants/api.js';
@@ -48,6 +49,10 @@ export default class App {
 				history.pushState({}, '', ROUTES.signup);
 				this.#renderSignup();
 				break;
+			case ROUTES.profile:
+				history.pushState({}, '', ROUTES.profile);
+				this.#renderProfile();
+				break;
 			default:
 				this.#handleUnknownRoute();
 				break;
@@ -525,7 +530,7 @@ export default class App {
 
 		const template = Handlebars.templates['unknown.hbs']
 		const renderedTemplate = template()
-		this.root.innerHTML += renderedTemplate;
+		this.root.insertAdjacentHTML(renderedTemplate);
 
 		document.querySelector('.tomain__tap-button').addEventListener('click', (event) => {
 			event.preventDefault();
@@ -537,6 +542,140 @@ export default class App {
 		return renderedTemplate
 	}
 
+	#renderProfile() {
+		const profileState = {
+			userName: 'Иван Иванов',
+			userNickname: 'ivanvanov',
+			avatarUrl: './assets/imgs/bono_avatar.jpg',
+			followersNumber: 19,
+			followingsNumber: 60,
+			personalWebsiteLink: 'https://sales-generator.ru/blog/brend-marketing/',
+			geolocation: 'Россия, Москва',
+			bio: `Я — директор по бренд-маркетингу с опытом управления глобальными командами и многомиллионными кампаниями.
+				Ее опыт в области стратегии бренда, визуального дизайна и управления учетными записями определяет ее осознанный, но...`,
+			currentUser: true,
+			socialNetworks: {
+				vk: true,
+				telegram: true,
+				github: true,
+				pinterest: true,
+			},
+			boards: [
+				{
+					boardID: 1,
+					coverUrl: './assets/imgs/bookmarks-board-cover.jpg',
+					title: 'Закладки',
+					bookmarkedNumber: 139,
+					rewardedNumber: 128,
+					lastModifyTime: '1 нед. назад',
+					private: true,
+				},
+				{
+					boardID: 2,
+					coverUrl: './assets/imgs/michael.jpg',
+					title: 'Singers',
+					bookmarkedNumber: 139,
+					rewardedNumber: 128,
+					lastModifyTime: '1 нед. назад',
+					private: true,
+				},
+				{
+					boardID: 3,
+					coverUrl: './assets/imgs/art.jpg',
+					title: 'Work-of-art',
+					bookmarkedNumber: 139,
+					rewardedNumber: 128,
+					lastModifyTime: '1 нед. назад',
+					private: false,
+				},
+				{
+					boardID: 4,
+					coverUrl: './assets/imgs/recipe.jpg',
+					title: 'Recipes',
+					bookmarkedNumber: 139,
+					rewardedNumber: 128,
+					lastModifyTime: '1 нед. назад',
+					private: true,
+				},
+				{
+					boardID: 5,
+					coverUrl: './assets/imgs/michael.jpg',
+					title: 'Singers',
+					bookmarkedNumber: 139,
+					rewardedNumber: 128,
+					lastModifyTime: '1 нед. назад',
+					private: true,
+				},
+				{
+					boardID: 6,
+					coverUrl: './assets/imgs/avatar.jpg',
+					title: 'Singers',
+					bookmarkedNumber: 139,
+					rewardedNumber: 128,
+					lastModifyTime: '1 нед. назад',
+					private: false,
+				},
+				{
+					boardID: 7,
+					coverUrl: './assets/imgs/michael.jpg',
+					title: 'Singers',
+					bookmarkedNumber: 139,
+					rewardedNumber: 128,
+					lastModifyTime: '1 нед. назад',
+					private: true,
+				},
+				{
+					boardID: 8,
+					coverUrl: './assets/imgs/avatar.jpg',
+					title: 'Work-of-art',
+					bookmarkedNumber: 139,
+					rewardedNumber: 128,
+					lastModifyTime: '1 нед. назад',
+					private: false,
+				},
+				{
+					boardID: 9,
+					coverUrl: './assets/imgs/art.jpg',
+					title: 'Work-of-art',
+					bookmarkedNumber: 139,
+					rewardedNumber: 128,
+					lastModifyTime: '1 нед. назад',
+					private: false,
+				},
+				{
+					boardID: 10,
+					coverUrl: './assets/imgs/recipe.jpg',
+					title: 'Recipes',
+					bookmarkedNumber: 139,
+					rewardedNumber: 128,
+					lastModifyTime: '1 нед. назад',
+					private: true,
+				},
+				{
+					boardID: 11,
+					coverUrl: './assets/imgs/michael.jpg',
+					title: 'Singers',
+					bookmarkedNumber: 139,
+					rewardedNumber: 128,
+					lastModifyTime: '1 нед. назад',
+					private: true,
+				},
+				{
+					boardID: 12,
+					coverUrl: './assets/imgs/avatar.jpg',
+					title: 'Singers',
+					bookmarkedNumber: 139,
+					rewardedNumber: 128,
+					lastModifyTime: '1 нед. назад',
+					private: false,
+				},
+			]
+		};
+
+		const profile = new ProfilePage(this.root, profileState);
+		return profile.renderTemplate()
+	}
+
 	/**
 	 * Clear all page data if it's needed.
 	 * @param {boolean} deleteEverything - flag for clearing all page data.

public/components/boards-list/boards-list.css

@@ -5,7 +5,7 @@
 .savebox__boards-list p {
     margin: 0;
     font-size: 12px;
-    color: #838383;
+    color: var(--pinset-boards-list-not-found-text-color);
 }
 
 .savebox__board-selection {
@@ -36,8 +36,8 @@
 }
 
 .savebox__board-cover {
-    width: 100%;
-    height: 100%;
+    width: inherit;
+    height: inherit;
     object-fit: cover;
 }
 

public/components/button/button.hbs

@@ -1,6 +1,6 @@
-<button class="button {{type}} {{#if disabled}}disabled{{/if}} {{#if active}}active{{/if}}" {{#if
-  disabled}}disabled{{/if}}>
-  {{#if iconLeft}}<img src="{{iconLeft}}" alt="iconLeft" />{{/if}}
-  {{label}}
-  {{#if iconRight}}<img src="{{iconRight}}" alt="iconRight" />{{/if}}
+<button class="{{className}} button {{type}} {{#if disabled}}disabled{{/if}} {{#if active}}active{{/if}}" {{#if
+	disabled}}disabled{{/if}}>
+	{{#if iconLeft}}<img src="{{iconLeft}}" alt="iconLeft" />{{/if}}
+	{{label}}
+	{{#if iconRight}}<img src="{{iconRight}}" alt="iconRight" />{{/if}}
 </button>

public/components/complex/grid/grid.js

@@ -89,21 +89,25 @@ export class GridComponent extends BaseComponent {
 
 		for (const pin of this.#pins) {
 			const pinContainer = document.querySelector(`.pin__content-container-${pin.PinID}`);
-			const pinImage = document.querySelector(`.pin__image-${pin.PinID}`);
-
-			pinContainer.style.width = pinImage.style.width = `${columnWidth}px`;
-
-			// Next column index to insert the pinContainer
-			const minIdx = heights.indexOf(Math.min(...heights));
-
-			pinContainer.style.top = `${heights[minIdx] + heightGutter + headerHeight}px`;
-			pinContainer.style.left = `${minIdx * columnWidth + widthGutter * (minIdx + 1)}px`;
-
-			heights[minIdx] += pinContainer.offsetHeight + heightGutter;
+			if (pinContainer) {
+				const pinImage = document.querySelector(`.pin__image-${pin.PinID}`);
+
+				pinContainer.style.width = pinImage.style.width = `${columnWidth}px`;
+
+				// Next column index to insert the pinContainer
+				const minIdx = heights.indexOf(Math.min(...heights));
+
+				pinContainer.style.top = `${heights[minIdx] + heightGutter + headerHeight}px`;
+				pinContainer.style.left = `${minIdx * columnWidth + widthGutter * (minIdx + 1)}px`;
+
+				heights[minIdx] += pinContainer.offsetHeight + heightGutter;
+			}
 		}
 
 		const layoutContainer = document.querySelector('.feed__layout-container');
-		layoutContainer.style.height = `${Math.max(...heights)}px`;
+		if (layoutContainer) {
+			layoutContainer.style.height = `${Math.max(...heights)}px`;
+		}
 	}
 
 	/**

public/components/complex/header/header.css

@@ -21,7 +21,7 @@
 }
 
 .header__search-input-content-container {
-	margin: 0 20px 0 20px;
+	margin: 0 20px;
 	width: 80%;
 	height: 80%;
 }
@@ -30,7 +30,6 @@
 	height: 100%;
 	width: 100%;
 	background-color: var(--pinset-search-input-background-color);
-	gap: 1rem;
     border-radius: 10px;
 }
 .header__search-input-content-container .searchinput__content-container .searchinput__search-field {
@@ -70,7 +69,7 @@
 .header__create-btn-container .button {
 	background-color: var(--pinset-main-color-purple);
 	background-image: linear-gradient(to bottom, transparent 0%, var(--pinset-main-color-blue) 100%);
-	height: 80%;
+	height: fit-content;
 	font-size: 18px;
 	font-weight: 600;
 	border-radius: 7px;

public/components/details-menu/details-menu.css

@@ -7,7 +7,7 @@
     box-shadow: var(--pinset-box-shadowed-cards-color) 0px 7px 29px 0px;
     border-radius: 15px;
     padding: 7px 10px 7px 10px;
-    z-index: 9999;
+    z-index: 999;
 }
 
 .details-menu__options-list-container {

public/components/search-input/search-input.css

@@ -1,5 +1,5 @@
 .searchinput__content-container {
-    margin-bottom: 5px;
+    /* margin-bottom: 5px; */
     height: 13%;
     width: 100%;
     display: flex;

public/constants.css

@@ -40,7 +40,22 @@
 	--pinset-checkbox-input-checked-color: #4C2CFF;
 	--pinset-box-list-option-hover-color: #4C2CFF;
 	--pinset-list-entity-background-color-on-hover: #E6E6E6;
-	--pinset-box-shadowed-cards-color: #0000008a;
+	--pinset-box-shadowed-cards-color: #6d6d6d8a;
 	--pinset-header-background-color: #F2F2F2;
 	--pinset-search-input-text-color: #161616;
+
+	--pinset-boards-list-not-found-text-color: #838383;
+
+	--pinset-profile-bio-divider-color: #686868;
+	--pinset-profile-nickname-block-color: #595959;
+	--pinset-profile-navigation-text-color: #666666;
+	--pinset-profile-navigation-hovered-text-color: #3d3d3d;
+	--pinset-profile-chat-button-color: #515151;
+	--pinset-profile-chat-button-hovered-color: #333333;
+	--pinset-profile-board-modify-time-text-color: #4e4e4e;
+	--pinset-profile-board-border-color: #c9c9c9;
+	--pinset-profile-board-title-text-color: #333333;
+	--pinset-profile-user-name-text-color: #333333;
+	--pinset-profile-user-edit-block-color: #757575;
+	--pinset-profile-user-edit-block-hovered-color: #585858;
 }

public/constants/routes.js

@@ -2,6 +2,7 @@
 
 export const ROUTES = {
 	main: '/feed',
+	profile: '/profile',
 	login: '/login',
 	signup: '/signup',
 	isAuthorized: '/is_authorized',

public/index.css

@@ -4,6 +4,7 @@
 @import url(pages/login/login.css);
 @import url(pages/signup/signup.css);
 @import url(pages/unknown/unknown.css);
+@import url(pages/profile/profile.css);
 @import url(components/complex/header/header.css);
 @import url(components/complex/grid/grid.css);
 @import url(components/complex/pin/pin.css);

public/pages/main/main.js

@@ -130,12 +130,15 @@ export class MainPageComponent extends BaseComponent {
                     profileContainer.insertAdjacentHTML('beforeend', renderedTemplate);
 
                     const dropDownMenuElement = document.querySelector('.drop-down-menu__content-container');
-                    const header = document.querySelector('.header__content-container');
-                    const dropDownMenuMarginTop = -10, dropDownMenuMarginRight = 10;
-                    dropDownMenuElement.style.top = header.clientHeight + dropDownMenuMarginTop + 'px';
-                    dropDownMenuElement.style.right = dropDownMenuMarginRight + 'px';
-
-                    this.addLogoutButtonListener();
+                    if (dropDownMenuElement) {
+                        const header = document.querySelector('.header__content-container');
+                        const dropDownMenuMarginTop = -10, dropDownMenuMarginRight = 10;
+                        dropDownMenuElement.style.top = header.clientHeight + dropDownMenuMarginTop + 'px';
+                        dropDownMenuElement.style.right = dropDownMenuMarginRight + 'px';
+
+                        this.addLogoutButtonListener();
+                        this.addProfileListener();
+                    }
                 }
                 else {
                     const dropDownMenu = document.querySelector('.drop-down-menu__content-container');
@@ -165,4 +168,19 @@ export class MainPageComponent extends BaseComponent {
             });
         }
     }
+
+    /**
+     * Creates a listener of profile button.
+     */
+    addProfileListener() {
+        const menuProfileButton = document.querySelector('.drop-down-menu__user-option')
+        if (menuProfileButton) {
+            menuProfileButton.addEventListener('click', (event) => {
+                event.preventDefault();
+
+                root.innerHTML = '';
+                app.renderPage(ROUTES.profile);
+            });
+        }
+    }
 };