LDBR 3.22: Добавить адаптивности в верстку (#40)

* LDBR-3.22: Исправить пропажу error сообщений в Register View * LDBR-3.22: Исправить wrapper у view, вынести повторяющиеся стили * LDBR-3.22: Истправить футер * LDBR-3.22: Добавить Flexbox для профиля * LDBR-3.22: Добавить сокрытие меню, возврат скролла в card popup, начальное заполнение списка участников карточки (в поиске) * LDBR-3.24: Правки после РК по интерфейсам. (#41) * LDBR-3.22: Исправить пропажу кнопок navbar'a в /login * LDBR-3.22: Добавить смену видимости элементов navbar в зависимости от width браузера * LDBR-3.22: Исправить футер на 404 * LDBR-3.22: Правки в положение аватара в мобильной и десктоп версии, чето в 404 * LDBR-3.22: Исправить баг с непонятным отступом в /profile * LDBR-3.22: Исправить баги с textarea и input * LDBR-3.22: Добавить адаптивность в popup'ы * LDBR-3.22: Увеличить площадь клика на элемент в navbar * LDBR-3.22: Добавитть заполнение списка пользователей членами команды, карточки, доски, если число символов < 3 * LDBR-3.22: Добавить поинтер на дедлайн * LDBR-3.22: Удаление пользователя из всех карточек, если он был удален из доски * LDBR-3.22: Добавить обновление чеклиста (CUD) без перезагрузка страницы, в случае переоткрытия попапа * LDBR-3.22: Добавить обновление элемента чеклиста (CUD) без перезагрузка страницы, в случае переоткрытия попапа * LDBR-3.22: Заблокировать возможность удалить самого себя из доски * LDBR-3.22: Добавить flex-wrap для участников доски * LDBR-3.22: Fix footer.scss * LDBR-3.22: убрать автофокус при добавлении комментария, добавить поинтер на дедлайн. * LDBR-3.22: Подверстать комментарии. * LDBR-3.22: Исправить верстку комментариев, исправить авторство комментария. * LDBR-3.22: Откатить дату комментария. * LDBR-3.22: Исправить формат даты комментария. * LDBR-3.22: исправить иконки списка досок и ширину попапа. * LDBR-3.22: Добавить data для комментария. * LDBR-3.22: Исправить сохранение uid юзера. * LDBR-3.22: Исправить toLocaleString. * LDBR-3.22: Исправить README Co-authored-by: Dmitry Peshkov <[email protected]> Co-authored-by: DPeshkoff <[email protected]>
frontend-park-mail-ru · Dec 1, 2021 · a614caa · a614caa
1 parent adce9ea
commit a614caa
Show file tree

Hide file tree

Showing 43 changed files with 965 additions and 1,134 deletions.
diff --git a/README.md b/README.md
@@ -1,4 +1,4 @@
-[![CI](https://github.com/frontend-park-mail-ru/2021_2_LadnoDavayteBezRoflov/actions/workflows/CI.yml/badge.svg?branch=main)](https://github.com/frontend-park-mail-ru/2021_2_LadnoDavayteBezRoflov/actions/workflows/CI.yml)
+[![CI](https://github.com/frontend-park-mail-ru/2021_2_LadnoDavayteBezRoflov/actions/workflows/CI.yml/badge.svg?branch=main)](https://github.com/frontend-park-mail-ru/2021_2_LadnoDavayteBezRoflov/actions/workflows/CI.yml) ![Website](https://img.shields.io/website?down_message=offline&up_message=online&url=http%3A%2F%2F95.163.213.142%2F) ![GitHub repo size](https://img.shields.io/github/repo-size/frontend-park-mail-ru/2021_2_LadnoDavayteBezRoflov)
 
 # Trello
 
@@ -46,9 +46,7 @@ Trello frontend repository for Ladno Davayte Bez Roflov team, autumn of 2021.
 |
 |--public
 |  |--assets #Pictures and icons
-|  |--css #CSS files
 |  |--fonts #Font files
-|  |-index.html
 |
 |--server #Static-server
 |  |-server.js
@@ -60,13 +58,19 @@ Trello frontend repository for Ladno Davayte Bez Roflov team, autumn of 2021.
 |  |--modules #Modules
 |  |  |--Dispatcher
 |  |  |--EventBus 
+|  |  |--Helpers
 |  |  |--Network
 |  |  |--Router
 |  |  |--Validator
 |  |
+|  |--popups
 |  |--stores #Stores & main logic
+|  |--styles
+|  |  |--scss
 |  |--views #Project pages
+|  |-index_template.html
 |  |-index.js
+|  |-sw.js
 ```
 
 ### Versions
@@ -77,7 +81,7 @@ Versions are updated via two ways:
 
 2. **Minor updates**: minor fixes and changes to server and modules. Example: *refactoring Network module*.
 
-Latest version: `0.2.0`: *Transferred to Flux architecture, refactored every module*.
+Latest version: `0.2.1`: *Service worker*.
 
 ### Code style
 The project is written using slightly modified [Google ESling config](https://github.com/google/eslint-config-google). Code style changes:

diff --git a/src/actions/card.js b/src/actions/card.js
@@ -20,6 +20,7 @@ export const CardActionTypes = {
     CARD_ADD_ASSIGNEE_CLOSE: 'card/assignee/close',
     CARD_ADD_ASSIGNEE_INPUT: 'card/assignee/input',
     CARD_ADD_ASSIGNEE_USER_CLICKED: 'card/assignee/clicked',
+    SCROLL_CHANGED: 'card/scroll',
 };
 
 /**
@@ -180,4 +181,14 @@ export const cardActions = {
         });
     },
 
+    /**
+     * Передает в стор значение скрола
+     * @param {Number} scrollValue - значение top скрола в px
+     */
+    changeScroll(scrollValue) {
+        Dispatcher.dispatch({
+            actionName: CardActionTypes.SCROLL_CHANGED,
+            data: {scrollValue},
+        });
+    },
 };
diff --git a/src/actions/settings.js b/src/actions/settings.js
@@ -10,6 +10,8 @@ export const SettingsActionTypes = {
     SETTINGS_GET: 'settings/get',
     SETTINGS_UPDATE: 'settings/put',
     AVATAR_UPLOAD: 'avatar/post',
+    NAVBAR_MENU_BTN_CLICK: 'navbar/menu-btn/click',
+    WINDOW_RESIZED: 'window/resized',
 };
 
 /**
@@ -48,4 +50,25 @@ export const settingsActions = {
             data: {avatar},
         });
     },
+
+    /**
+     * Действие: переключение видимости navbar menu
+     */
+    toggleNavbarMenu() {
+        Dispatcher.dispatch({
+            actionName: SettingsActionTypes.NAVBAR_MENU_BTN_CLICK,
+        });
+    },
+
+    /**
+     * Действие: изменился размер окна браузера
+     * @param {Number} width - ширина окна
+     * @param {Number} height - высота окна
+     */
+    windowResized(width, height) {
+        Dispatcher.dispatch({
+            actionName: SettingsActionTypes.WINDOW_RESIZED,
+            data: {width, height},
+        });
+    },
 };
diff --git a/src/components/Card/Card.hbs b/src/components/Card/Card.hbs
@@ -6,7 +6,7 @@
     </div>
     <div class="card__header" data-id="{{cid}}">
         <span class="card__title" data-id="{{cid}}">{{card_name}}</span>
-        <span class="column__delete material-icons deleteCard" data-id="{{cid}}"></span>
+        <span class="material-icon-remove deleteCard" data-id="{{cid}}"></span>
     </div>
     <div class="card__badges" data-id="{{cid}}">
         {{#if (IsEmptyDeadlineHelper deadline)}}
@@ -21,7 +21,7 @@
         {{#if attachments}}
             <div class="material-icons badge-attachments" data-id="{{cid}}"></div>
         {{/if}}
-        {{#if checklist}}
+        {{#if check_lists}}
             <div class="material-icons badge-checklist" data-id="{{cid}}"></div>
         {{/if}}
         <div class="card__assignees" data-id="{{cid}}">

diff --git a/src/components/Card/Card.scss b/src/components/Card/Card.scss
@@ -47,6 +47,7 @@ $card-due-date-done: forestgreen;
   flex-direction: row;
   padding-right: 5px;
   background: $secondary-bg-color;
+  cursor: pointer;
 }
 
 .badge-due-date__icon::before {
@@ -60,7 +61,8 @@ $card-due-date-done: forestgreen;
   line-height: normal;
   color: rgb(255, 255, 255);
   padding-top: 3px;
-
+  cursor: pointer;
+
   &-invalid {
     background-color: rgb(235, 90, 70);
   }
@@ -72,6 +74,10 @@ $card-due-date-done: forestgreen;
   &-completed {
     background-color: rgb(107, 148, 99);
   }
+
+  &-expiring {
+    background-color: rgb(255, 153, 0);
+  }
 }
 
 .badge-due-date-wrapper_overdue {

diff --git a/src/components/CardList/CardList.hbs b/src/components/CardList/CardList.hbs
@@ -1,9 +1,9 @@
 <div class="column">
     <div class="column__header">
         <div class="column__title">{{cardList_name}}</div>
-        <span class="column__add material-icons addCardToCardList" data-id="{{clid}}"></span>
-        <span class="column__edit material-icons editCardList" data-id="{{clid}}"></span>
-        <span class="column__delete material-icons deleteCardList" data-id="{{clid}}"></span>
+        <span class="material-icon-add addCardToCardList" data-id="{{clid}}"></span>
+        <span class="material-icon-edit editCardList" data-id="{{clid}}"></span>
+        <span class="material-icon-delete deleteCardList" data-id="{{clid}}"></span>
     </div>
     <div class="horizontal-line"></div>
     <div class="column__content custom-scroll" data-id="{{clid}}">

diff --git a/src/components/Footer/Footer.scss b/src/components/Footer/Footer.scss
@@ -5,18 +5,14 @@
 /* Таблица стилей для компонента footer */
 
 .footer {
-    position: fixed;
-    height: 50px;
     background-color: $main-theme-secondary-color;
-    bottom: 0;
-    left: 0;
-    right: 0;
-    margin-bottom: 0;
+    width: 100%;
+    height: 50px;
+
     display: flex;
     flex-direction: column;
     justify-content: center;
 
-
     &__text {
         color: rgb(255, 255, 255);
         font-family: 'Montserrat', sans-serif;

diff --git a/src/components/Navbar/Navbar.hbs b/src/components/Navbar/Navbar.hbs
@@ -1,26 +1,40 @@
 <header id="header-main">
     <div class="navbar__wrapper">
         <div class="navbar">
-            <a href="/" draggable="false">
-                <img alt="Brrrello" src="/assets/logo.webp" class="navbar__logo"
-                     draggable="false"/>
-            </a>
-            <div class="navbar__links">
-                {{#if isAuthorized}}
-                    <div class="navbar__link-wrapper"><a href="/boards" class="navbar__link">Доски</a></div>
-                    <a href="/profile" class="avatar-wrapper">
-                        <img id="navbarAvatarId" class="avatar-navbar-edition"
-                             src="{{avatar}}"
-                             alt="{{userName}}">
-                        <span id="navbarUserNameId">{{userName}}</span>
-                    </a>
-
-                    <div class="navbar__link-wrapper"><a id="logout" class="navbar__link">Выход</a></div>
-                {{else}}
-                    <div class="navbar__link-wrapper"><a href="/login" class="navbar__link">Войти</a></div>
-                    <div class="navbar__link-wrapper"><a href="/register" class="navbar__link">Зарегистрироваться</a></div>
-                {{/if}}
+            <div class="navbar__logo-wrapper">
+                <a href="/" draggable="false">
+                    <img alt="Brrrello" src="/assets/logo.webp" class="navbar__logo"
+                         draggable="false"/>
+                </a>
+                <div class="navbar__hamburger-wrapper" id="hamburgerBtnId">
+                    <div class="material-icon-hamburger"></div>
+                </div>
             </div>
+            {{# if navbar.linksVisible }}
+                <div class="navbar__links">
+                    {{#if isAuthorized}}
+                        <a class="navbar__link-wrapper" href="/boards" ><div class="navbar__link">Доски</div></a>
+                        <a href="/profile" class="avatar-wrapper">
+                            {{#if navbar.isMobile }}
+                                <span id="navbarUserNameId">{{userName}}</span>
+                                <img id="navbarAvatarId" class="avatar-navbar-edition avatar-navbar-edition_margin_left"
+                                     src="{{avatar}}"
+                                     alt="{{userName}}">
+                            {{else}}
+                                <img id="navbarAvatarId" class="avatar-navbar-edition"
+                                     src="{{avatar}}"
+                                     alt="{{userName}}">
+                                <span id="navbarUserNameId">{{userName}}</span>
+                            {{/if}}
+                        </a>
+
+                        <a id="logout" class="navbar__link-wrapper"><div class="navbar__link">Выход</div></a>
+                    {{else}}
+                        <a class="navbar__link-wrapper" href="/login"><div class="navbar__link">Войти</div></a>
+                        <a class="navbar__link-wrapper" href="/register"><div class="navbar__link">Зарегистрироваться</div></a>
+                    {{/if}}
+                </div>
+            {{/if}}
         </div>
     </div>
 </header>
diff --git a/src/components/Navbar/Navbar.js b/src/components/Navbar/Navbar.js
@@ -9,6 +9,7 @@ import UserStore from '../../stores/UserStore/UserStore.js';
 
 // Шаблон
 import template from './Navbar.hbs';
+import {settingsActions} from '../../actions/settings';
 
 
 /**
@@ -25,7 +26,8 @@ export default class NavbarComponent extends BaseComponent {
         this._onRefresh = this._onRefresh.bind(this);
         UserStore.addListener(this._onRefresh);
 
-        this._logoutCallback = this._logout.bind(this);
+        this._elements = {};
+        this._bindCallBacks();
     }
 
     /**
@@ -35,11 +37,41 @@ export default class NavbarComponent extends BaseComponent {
         this.context = UserStore.getContext();
     }
 
+    /**
+     * Метод биндит callback'и к this
+     * @private
+     */
+    _bindCallBacks() {
+        this._logout = this._logout.bind(this);
+        this._onHamburgerClick = this._onHamburgerClick.bind(this);
+    }
+
+    /**
+     * Метод сохраняет элементы DOM связанные с navbar
+     * @private
+     */
+    _registerElements() {
+        this._elements = {
+            logOutBtn: document.getElementById('logout'),
+            hamburgerBtn: document.getElementById('hamburgerBtnId'),
+        };
+    }
+
     /**
      * Метод, добавляющий обработчики событий для компонента.
      */
     addEventListeners() {
-        document.getElementById('logout')?.addEventListener('click', this._logoutCallback);
+        this._registerElements();
+        this._elements.logOutBtn?.addEventListener('click', this._logout);
+        this._elements.hamburgerBtn?.addEventListener('click', this._onHamburgerClick);
+    }
+
+    /**
+     * Метод, удаляющий обработчики событий для компонента.
+     */
+    removeEventListeners() {
+        this._elements.logOutBtn?.removeEventListener('click', this._logout);
+        this._elements.hamburgerBtn?.removeEventListener('click', this._onHamburgerClick);
     }
 
     /**
@@ -52,9 +84,14 @@ export default class NavbarComponent extends BaseComponent {
     }
 
     /**
-     * Метод, удаляющий обработчики событий для компонента.
+     * Метод, срабатывающий при клике на кнопку меню
+     * @private
      */
-    removeEventListeners() {
-        document.getElementById('logout')?.removeEventListener('click', this._logoutCallback);
+    _onHamburgerClick() {
+        const links = document.querySelector('.navbar__links');
+        if (links && this.context.get('navbar').is) {
+            links.style.display = 'flex';
+        }
+        settingsActions.toggleNavbarMenu();
     }
 }
diff --git a/src/components/Navbar/Navbar.scss b/src/components/Navbar/Navbar.scss
@@ -44,12 +44,34 @@
         align-items: center;
         cursor: pointer;
         min-height: $nav-bar-height;
+        text-decoration: none;
 
         &:hover {
             background-color: $nav-bar-hover;
         }
     }
 
+    &__hamburger-wrapper {
+        display: none;
+        flex-direction: row;
+        align-items: center;
+        justify-content: center;
+        cursor: pointer;
+        min-height: $nav-bar-height;
+        min-width: $nav-bar-height;
+
+        &:hover {
+            background-color: $nav-bar-hover;
+        }
+    }
+
+    &__logo-wrapper {
+        display: flex;
+        flex-direction: row;
+        align-items: center;
+        justify-content: space-between;
+    }
+
     &__link {
         display: block;
         padding: 0 12px;
@@ -80,11 +102,14 @@
     text-decoration: none;
 }
 
-@media screen and (max-width: 450px) {
+@media screen and (max-width: 500px) {
     .navbar {
         flex-direction: column;
         &__links {
             flex-direction: column;
         }
+        &__hamburger-wrapper {
+            display: flex;
+        }
     }
 }
diff --git a/src/constants/constants.js b/src/constants/constants.js
@@ -83,9 +83,9 @@ export const ConstantMessages = {
     BoardUpdateErrorOnServer: 'Не удалось обновить доску, попробуйте позднее',
     BoardNoAccess: 'Нет доступа к доске',
 
-    CardListTitleTooShort: 'Название списка карточек слишком короткое',
-    CardListTitleTooLong: 'Название списка карточек слишком длинное',
-    CardListErrorOnServer: 'Не удалось создать список, попробуйте позднее',
+    CardListTitleTooShort: 'Название колонки слишком короткое',
+    CardListTitleTooLong: 'Название колонки слишком длинное',
+    CardListErrorOnServer: 'Не удалось создать колонку, попробуйте позднее',
 
     CardTitleTooShort: 'Название карточки слишком короткое',
     CardTitleTooLong: 'Название карточки слишком длинное',
@@ -101,3 +101,7 @@ export const CheckLists = {
     CheckListDefaultTitle: 'Check List',
     CheckListItemDefaultTitle: 'Item',
 };
+
+export const SettingStoreConstants = {
+    MobileNavWidth: 500,
+};