добавил иконки редактирования, удаления доски, поправил сетку пинов и…

… пару обработчиков

public/components/button/icon-button.hbs

@@ -0,0 +1,3 @@
+<div class="icon-button__content-container {{state.className}}">
+    <img class="{{state.className}}" src="{{state.iconPath}}">
+</div>

public/components/button/icon-button.js

@@ -0,0 +1,30 @@
+'use strict'
+
+import { BaseComponent } from "../base.js"
+
+/**
+ * Component that is used to display button with icon inside of it.
+ */
+export class IconButtonComponent extends BaseComponent {
+    /**
+     * Creates an IconButtonComponent.
+     * @param {HTMLElement} parent - HTML element of the parent container.
+     * @param {String} iconPath - file path to the icon.
+     */
+    constructor(parent, state) {
+        super(parent, state);
+    }
+
+    /**
+     * Renders a template of IconButtonComponent.
+     * @returns rendered template of IconButtonComponent.
+     */
+    renderTemplate() {
+        const template = Handlebars.templates['icon-button.hbs'];
+        const renderedTemplate = template({
+            state: this.State
+        });
+
+        return renderedTemplate;
+    }
+};

public/components/complex/grid/grid.js

@@ -34,13 +34,10 @@ export class GridComponent extends BaseComponent {
 		this.#pins = pins;
 		this.#marginTop = marginTop;
 
-		let idx = 0;
 		// Providing layout rebuild on resize events
 		window.addEventListener('resize', (event) => {
 			event.preventDefault();
 
-			console.log("RESIZE:", idx++);
-
 			let body = document.body,
 				html = document.documentElement;
 
@@ -261,6 +258,7 @@ export class GridComponent extends BaseComponent {
 
 			previewContainer.style.width = `${intWidth * PREVIEW_IMG_X_FACTOR + previewRightSide.clientWidth}px`;
 			previewContainer.style.height = `${intHeight * PREVIEW_IMG_X_FACTOR + previewTopSide.clientHeight + previewBottomSide.clientHeight}px`;
+			previewContainer.style.marginTop = '3%';
 
 			// Create dark transparent background and add event listeners
 			this.createBackgroundListeners();

public/components/complex/pin/pin.css

@@ -4,10 +4,6 @@ div[class^=pin__content-container] {
 	flex-direction: column;
 }
 
-/* div[class^=pin__content-container] {
-    transition: all 0.1s ease-in-out;
-} */
-
 .pin__image-container {
 	position: relative;
 	width: 100%;
@@ -16,13 +12,11 @@ div[class^=pin__content-container] {
 
 img[class^=pin__image] {
 	border-radius: 20px;
-	transition: 0.5s;
 }
 
 .pin__image-container:hover img[class^=pin__image] {
 	filter: brightness(70%);
 	cursor: pointer;
-	transition: 0.5s;
 }
 
 div[class^=pin__image-preview-button] {

public/constants.css

@@ -58,4 +58,7 @@
 	--pinset-profile-user-name-text-color: #333333;
 	--pinset-profile-user-edit-block-color: #757575;
 	--pinset-profile-user-edit-block-hovered-color: #585858;
+
+	--pinset-delete-button-color: #C20000;
+	--pinset-delete-button-hovered-color: #910000;
 }

public/pages/profile/profile.css

@@ -275,6 +275,41 @@ a[class^=profile__boards-header-nav-to]:hover {
     cursor: pointer;
 }
 
+.icon-button__content-container {
+    width: 45px;
+    height: 45px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    border-radius: 10px;
+    transition: 0.5s;
+}
+
+.icon-button__edit-img,
+.icon-button__delete-img {
+    width: 40px;
+    height: 40px;
+}
+
+.icon-button__content-container.icon-button__edit-img {
+    margin: 10px;
+    background-color: var(--pinset-profile-user-edit-block-color);
+}
+
+.icon-button__content-container.icon-button__edit-img:hover {
+    background-color: var(--pinset-profile-user-edit-block-hovered-color);
+    cursor: pointer;
+    transition: 0.5s;
+}
+
+.icon-button__content-container.icon-button__delete-img {
+    background-color: var(--pinset-delete-button-color);
+}
+
+.icon-button__content-container.icon-button__delete-img:hover {
+    background-color: var(--pinset-delete-button-hovered-color);
+}
+
 .profile__boards-header-title p {
     margin: 0;
     font-size: 30px;

public/pages/profile/profile.js

@@ -16,6 +16,8 @@ import { postMethod } from "../../modules/network.js";
 import { BACKEND_LOGOUT_ROUTE } from "../../constants/api.js";
 import { isAuthorized } from "../../modules/network.js";
 
+import { IconButtonComponent as IconButton } from "../../components/button/icon-button.js";
+
 /**
  * Page of a user profile.
  */
@@ -76,6 +78,7 @@ export class ProfilePageComponent extends BaseComponent {
         this.addSearchInputsListeners();
         this.addBoardsSearchBarListener();
         this.addProfileImgListener();
+        this.addBoardDetailsIconListener();
         this.addBoardListener();
 
         return renderedTemplate;
@@ -125,7 +128,6 @@ export class ProfilePageComponent extends BaseComponent {
             }
         }
 
-
         const matchedBoardsComponent = new BoardGrid(this.Parent, matchedBoards, this.State.currentUser);
         const renderedMatchedBoards = matchedBoardsComponent.renderTemplate();
         const boardsContainer = document.querySelector('.profile__boards-container');
@@ -135,6 +137,8 @@ export class ProfilePageComponent extends BaseComponent {
 
         boardsContainer.insertAdjacentHTML('beforeend', renderedMatchedBoards);
         this.resizeBoardsCovers();
+        this.addBoardDetailsIconListener();
+        this.addBoardListener();
     }
 
     /**
@@ -243,13 +247,15 @@ export class ProfilePageComponent extends BaseComponent {
     }
 
     /**
-     * 
+     * Creates a listener of board click event.
      */
     addBoardListener() {
         const pinSet = [
             {
                 PinID: 1,
                 imageOnly: true,
+                AuthorName: "Mary Jane",
+                AuthorFollowersNumber: 100,
                 MediaUrl: "https://images.unsplash.com/photo-1655635949384-f737c5133dfe?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8MTN8fG5ldXJhbCUyMG5ldHdvcmtzfGVufDB8MXwwfHx8Mg%3D%3D",
                 BoardID: 1,
             },
@@ -716,6 +722,14 @@ export class ProfilePageComponent extends BaseComponent {
                 document.querySelector('.profile__boards-header-title p').textContent = boardTitle;
                 const headerTitleContainer = document.querySelector('.profile__boards-header-title');
                 headerTitleContainer.removeChild(document.querySelector('.profile__boards-header-create-board-btn'));
+                headerTitleContainer.insertAdjacentHTML('beforeend', new IconButton(this.Parent, {
+                    className: 'icon-button__edit-img',
+                    iconPath: './assets/icons/edit.svg',
+                }).renderTemplate());
+                headerTitleContainer.insertAdjacentHTML('beforeend', new IconButton(this.Parent, {
+                    className: 'icon-button__delete-img',
+                    iconPath: './assets/icons/delete.svg',
+                }).renderTemplate());
 
                 // Update search input bar
                 headerSearchBlock.removeChild(headerSearchBlock.querySelector('.searchinput__content-container'));
@@ -744,4 +758,18 @@ export class ProfilePageComponent extends BaseComponent {
             });
         }
     }
+
+    /**
+     * Creates a listener of board details icon click events.
+     */
+    addBoardDetailsIconListener() {
+        const detailsIcons = document.querySelectorAll('.profile__board-cover-more-icon');
+
+        for (const icon of detailsIcons) {
+            icon.addEventListener('click', (event) => {
+                event.preventDefault();
+                event.stopImmediatePropagation();
+            });
+        }
+    }
 };

public/precompiled.js

@@ -100,6 +100,22 @@ templates['button.hbs'] = template({"1":function(container,depth0,helpers,partia
     + ((stack1 = lookupProperty(helpers,"if").call(alias1,(depth0 != null ? lookupProperty(depth0,"iconRight") : depth0),{"name":"if","hash":{},"fn":container.program(7, data, 0),"inverse":container.noop,"data":data,"loc":{"start":{"line":5,"column":1},"end":{"line":5,"column":68}}})) != null ? stack1 : "")
     + "\r\n</button>\r\n";
 },"useData":true});
+templates['icon-button.hbs'] = template({"compiler":[8,">= 4.3.0"],"main":function(container,depth0,helpers,partials,data) {
+    var stack1, alias1=container.lambda, alias2=container.escapeExpression, lookupProperty = container.lookupProperty || function(parent, propertyName) {
+        if (Object.prototype.hasOwnProperty.call(parent, propertyName)) {
+          return parent[propertyName];
+        }
+        return undefined
+    };
+
+  return "<div class=\"icon-button__content-container "
+    + alias2(alias1(((stack1 = (depth0 != null ? lookupProperty(depth0,"state") : depth0)) != null ? lookupProperty(stack1,"className") : stack1), depth0))
+    + "\">\r\n    <img class=\""
+    + alias2(alias1(((stack1 = (depth0 != null ? lookupProperty(depth0,"state") : depth0)) != null ? lookupProperty(stack1,"className") : stack1), depth0))
+    + "\" src=\""
+    + alias2(alias1(((stack1 = (depth0 != null ? lookupProperty(depth0,"state") : depth0)) != null ? lookupProperty(stack1,"iconPath") : stack1), depth0))
+    + "\">\r\n</div>\r\n";
+},"useData":true});
 templates['grid.hbs'] = template({"1":function(container,depth0,helpers,partials,data) {
     var stack1;