HAR-126: Правки в профиле

frontend-park-mail-ru · May 7, 2024 · 2a11853 · 2a11853
1 parent ed54aaa
commit 2a11853
Show file tree

Hide file tree

Showing 11 changed files with 67 additions and 18 deletions.
diff --git a/source/entity/inputField/ui/inputField.handlebars b/source/entity/inputField/ui/inputField.handlebars
@@ -1,5 +1,5 @@
 <label for="{{field.inputField}}">{{field.label}}</label>
-<input type="{{field.type}}" class="input" id="{{field.inputField}}" placeholder="{{field.placeholder}}" value="{{field.value}}">
+<input type="{{field.type}}" class="input" id="{{field.inputField}}" placeholder="{{field.placeholder}}" value="{{field.value}}" {{#if field.disabled}}disabled{{/if}}>
 {{#if isPassword}}
     <div class="eye" id="eye">
         <img src="/static/eye.svg" alt="" class="eye-image" id="eye-open">

diff --git a/source/entity/inputField/ui/inputField.js b/source/entity/inputField/ui/inputField.js
@@ -35,6 +35,11 @@ export class InputField extends View {
             event.preventDefault();
             const value = input.value;
             const check = debounce(inputValidate, debounceTimeout);
+            if (this.field.repeat) {
+                const repeatInput = document.querySelector('#' + this.field.repeat);
+                check(this.field, value, repeatInput.value);
+                return;
+            }
             check(this.field, value);
         });
         if (this.field.type === 'password') {

diff --git a/source/entity/inputField/ui/inputField.scss b/source/entity/inputField/ui/inputField.scss
@@ -65,3 +65,10 @@
 .eye__visibility-hidden{
   visibility: hidden;
 }
+
+@media screen and (max-width: 900px) {
+  .hint{
+    inset: 100px auto auto 0;
+    z-index: 2;
+  }
+}
diff --git a/source/entity/pinPhoto/ui/pinPhoto.scss b/source/entity/pinPhoto/ui/pinPhoto.scss
@@ -15,6 +15,6 @@
 
 @media screen and (max-width: 430px) {
     .pin-photo__image{
-        width: 100%;
+        width: 100vw;
     }
 }
diff --git a/source/features/userFields/ui/userFields.js b/source/features/userFields/ui/userFields.js
@@ -73,6 +73,7 @@ export class UserFields extends View {
             'repPassword': {
                 label: 'Повторите пароль',
                 type: 'password',
+                repeat: 'register_password',
                 placeholder: 'Введите пароль повторно',
                 value: '',
                 errContent: 'signup_repeat_password_error',
@@ -112,7 +113,7 @@ export class UserFields extends View {
             const inputCont = [this.root.querySelector('#' + value.inputField).value];
             if (key === 'repPassword') {
                 inputCont.push(this.root.querySelector('#' +
-                    this.errFields.password.inputField).value);
+                    this.errFields['password'].inputField).value);
             }
             if (!value.validationFunc(...inputCont)) {
                 errContentChange(value, value.errText);

diff --git a/source/pages/login/ui/loginView.handlebars b/source/pages/login/ui/loginView.handlebars
@@ -1,6 +1,6 @@
 <main>
     <div class="window user-form-window">
-        <h3 class="window_title">Добро пожаловать в Harmonium!</h3>
+        <div class="window_title">Добро пожаловать в Harmonium!</div>
         <form action="" class="window_login-fields">
             <div class="window_input-fields">
                 <input type="text" class="input" placeholder="Email" id="login_email">

diff --git a/source/pages/profile/ui/profile.scss b/source/pages/profile/ui/profile.scss
@@ -55,6 +55,20 @@
     transform: unset;
 }
 
+.message-field{
+    display: flex;
+    flex-direction: column;
+    gap: 20px;
+    justify-content: center;
+    align-items: center;
+    margin-top: 50px;
+}
+
+.message__button{
+    width: fit-content;
+    height: fit-content;
+}
+
 @media screen and (max-width: 430px) {
     .profile-switcher{
         margin-top: 50px;

diff --git a/source/pages/signup/ui/signupView.scss b/source/pages/signup/ui/signupView.scss
@@ -23,10 +23,3 @@
   flex-direction: column;
   gap: 10px;
 }
-
-@media screen and (max-width: 900px) {
-  .hint{
-    inset: 50px auto auto 0;
-    z-index: 2;
-  }
-}
diff --git a/source/shared/styles/App.scss b/source/shared/styles/App.scss
@@ -44,10 +44,10 @@ main{
 .user-form-window{
     width: 300px;
     height: fit-content;
-    padding: 30px;
+    padding: 40px 30px;
     display: flex;
     flex-direction: column;
-    gap: 20px;
+    gap: 25px;
 }
 
 .dialog-window{

diff --git a/source/widgets/profileFeed/ui/profileFeed.handlebars b/source/widgets/profileFeed/ui/profileFeed.handlebars
@@ -1,7 +1,12 @@
 <div class="profile-feed">
     {{#unless pins}}
-        <div class="message message__margin-center">
-            Здесь ничего нет
+        <div class="message-field">
+            <div class="message">
+                Здесь ничего нет
+            </div>
+            <div class="message__button" id="message__button">
+
+            </div>
         </div>
     {{else}}
         <div class="feed" id="profile_feed">

diff --git a/source/widgets/profileFeed/ui/profileFeed.js b/source/widgets/profileFeed/ui/profileFeed.js
@@ -5,6 +5,9 @@ import {FeedBoardsView} from '../../../entity/profileFeedBoards/ui/profileFeedBo
 import {FeedBlockView} from '../../../features/feedBlock/ui/feedBlock.js';
 import {PinFeedView} from '../../../entity/pin/ui/pin.js';
 import {API} from '../../../shared/api/API.js';
+import {ButtonView} from '../../../entity/button/ui/button.js';
+import {PinView} from '../../../pages/pin/ui/pinView.js';
+import {BoardEdit} from '../../../pages/boardEdit/ui/boardEdit.js';
 
 /**
  * Class for handle profile feed
@@ -34,8 +37,17 @@ export class ProfileFeed extends View {
 
         if (pins) {
             const feed = new FeedBlockView('profile_feed');
-            feed.render(pins, PinFeedView);
+            await feed.render(pins, PinFeedView);
+            return;
         }
+        const newPinButton = new ButtonView('message__button');
+        newPinButton.render('Создайте первый пин!', ['primary-button'], 'new-pin-button');
+
+        newPinButton.root.addEventListener('click', (event) => {
+            event.preventDefault();
+            const newPin = new PinView();
+            newPin.renderPinCreate();
+        });
     }
 
     /**
@@ -50,7 +62,19 @@ export class ProfileFeed extends View {
 
         this.feed.innerHTML = profileFeedTemplate({pins: boards});
 
-        const feed = new FeedBlockView('profile_feed');
-        feed.render(boards, FeedBoardsView);
+        if (boards) {
+            const feed = new FeedBlockView('profile_feed');
+            await feed.render(boards, FeedBoardsView);
+            return;
+        }
+
+        const newBoardButton = new ButtonView('message__button');
+        newBoardButton.render('Создайте первую доску!', ['primary-button'], 'new-board-button');
+
+        newBoardButton.root.addEventListener('click', (event) => {
+            event.preventDefault();
+            const newBoard = new BoardEdit();
+            newBoard.renderCreateBoard();
+        });
     }
 }