feat(RSS-ECOMM-5_19): implement about us page (#367)

* fix: year at the promo code

* feat: implement about us page

src/app/styles/common.scss

@@ -1,5 +1,9 @@
 * {
   box-sizing: border-box;
+
+  &::selection {
+    background-color: var(--steam-green-1000);
+  }
 }
 
 html,
@@ -44,6 +48,7 @@ img {
   max-width: 100%;
 }
 
+/* stylelint-disable-next-line selector-class-pattern */
 .stop-scroll {
   overflow-y: hidden;
 }

src/app/styles/variables.scss

@@ -59,6 +59,8 @@
     --noble-gray-1000: #1a1a1ab5; // header background
     --steam-green-900: #46a3581a; // blog background, personal info background
     --steam-green-1000: #46a35937; // footer links background, pics round thingies
+    --noble-gray-1200: #091e420f; // about us cards
+    --noble-gray-1300: #ffffffd6; // about us cards modal
 
     // tranparent colors:
     --noble-gray-tr-800: #acacacbd; // not active labels, tumblers
@@ -112,6 +114,8 @@
     --noble-white-200: #4a4a4a; // catalog filters background and product cards
     --white-tr: #1a1a1ab5; // footer background, modal background, pagination background, card buttons background
     --noble-gray-200: #f6f6f6; // loader / input basic
+    --noble-gray-1200: #a1bdd914; // about us cards
+    --noble-gray-1300: #080808a8; // about us cards modal
 
     // tranparent colors:
     --noble-gray-tr-800: #acacacbd; // not active labels, tumblers

src/entities/AboutFullCard/model/AboutFullCardModel.ts

@@ -0,0 +1,16 @@
+import type { AboutData } from '@/shared/types/validation/aboutData.ts';
+
+import AboutShortCardModel from '@/entities/AboutShortCard/model/AboutShortCardModel.ts';
+
+import AboutFullCardView from '../view/AboutFullCardView.ts';
+
+class AboutFullCardModel extends AboutShortCardModel {
+  protected view: AboutFullCardView;
+
+  constructor(params: AboutData) {
+    super(params);
+    this.view = new AboutFullCardView(params);
+  }
+}
+
+export default AboutFullCardModel;

src/entities/AboutFullCard/view/AboutFullCardView.ts

@@ -0,0 +1,146 @@
+import type { AboutData, AboutFeedback } from '@/shared/types/validation/aboutData';
+
+import AboutShortCardView from '@/entities/AboutShortCard/view/AboutShortCardView.ts';
+import LinkModel from '@/shared/Link/model/LinkModel.ts';
+import getStore from '@/shared/Store/Store.ts';
+import observeStore, { selectCurrentLanguage, selectCurrentTheme } from '@/shared/Store/observer.ts';
+import ABOUT_TEXT from '@/shared/constants/about.ts';
+import { LINK_DETAILS } from '@/shared/constants/links.ts';
+import changeColor from '@/shared/utils/changeColor.ts';
+import createBaseElement from '@/shared/utils/createBaseElement.ts';
+import hexToRgba from '@/shared/utils/hexToRgba.ts';
+
+import styles from './aboutFullCardView.module.scss';
+
+class AboutFullCardView extends AboutShortCardView {
+  constructor(params: AboutData) {
+    super(params);
+    this.view.classList.add(styles.aboutFullCard);
+    this.view.append(this.createChecklist(), this.createFeedbackList());
+  }
+
+  private createCheckItem(item: { text: string }): HTMLLIElement {
+    const listItem = createBaseElement({
+      cssClasses: [styles.checklistItem],
+      tag: 'li',
+    });
+    const label = createBaseElement({
+      cssClasses: [styles.label],
+      innerContent: item.text,
+      tag: 'label',
+    });
+
+    listItem.append(label);
+    return listItem;
+  }
+
+  private createChecklist(): HTMLUListElement {
+    const list = createBaseElement({
+      cssClasses: [styles.checklist],
+      tag: 'ul',
+    });
+
+    const title = createBaseElement({
+      cssClasses: [styles.title],
+      innerContent: ABOUT_TEXT[getStore().getState().currentLanguage].CHECKLIST,
+      tag: 'h3',
+    });
+
+    changeColor(title, this.params.coverColor[getStore().getState().isAppThemeLight ? 'true' : 'false'].color);
+    list.append(title);
+    this.params.checklist[getStore().getState().currentLanguage].forEach((item) => {
+      list.append(this.createCheckItem(item));
+    });
+
+    observeStore(selectCurrentLanguage, () => {
+      list.innerHTML = '';
+      title.innerText = ABOUT_TEXT[getStore().getState().currentLanguage].CHECKLIST;
+      list.append(title);
+      this.params.checklist[getStore().getState().currentLanguage].forEach((item) => {
+        list.append(this.createCheckItem(item));
+      });
+    });
+
+    observeStore(selectCurrentTheme, () => {
+      changeColor(title, this.params.coverColor[getStore().getState().isAppThemeLight ? 'true' : 'false'].color);
+    });
+    return list;
+  }
+
+  private createFeedbackItem(item: AboutFeedback): HTMLLIElement {
+    const listItem = createBaseElement({ cssClasses: [styles.feedbackListItem], tag: 'li' });
+    const label = createBaseElement({
+      cssClasses: [styles.label, styles.feedbackLabel],
+      innerContent: `— ${item.text[getStore().getState().currentLanguage].text}`,
+      tag: 'label',
+    });
+
+    label.style.backgroundColor = hexToRgba(
+      this.params.coverColor[getStore().getState().isAppThemeLight ? 'true' : 'false'].color,
+      0.2,
+    );
+
+    const href = `https://github.com/${item.from}`;
+    const background = `url(${`/img/png/${item.from}Avatar.png`})`;
+    const from = new LinkModel({
+      attrs: { href, target: LINK_DETAILS.BLANK },
+      classes: [styles.from],
+      text: item.from,
+    });
+
+    const avatar = new LinkModel({ attrs: { href, target: LINK_DETAILS.BLANK }, classes: [styles.avatar] });
+
+    avatar.getHTML().style.backgroundImage = background;
+    from.getHTML().append(avatar.getHTML());
+
+    changeColor(from.getHTML(), this.params.coverColor[getStore().getState().isAppThemeLight ? 'true' : 'false'].color);
+
+    observeStore(selectCurrentLanguage, () => {
+      label.innerText = `— ${item.text[getStore().getState().currentLanguage].text}`;
+    });
+
+    observeStore(selectCurrentTheme, () => {
+      changeColor(
+        from.getHTML(),
+        this.params.coverColor[getStore().getState().isAppThemeLight ? 'true' : 'false'].color,
+      );
+      label.style.backgroundColor = hexToRgba(
+        this.params.coverColor[getStore().getState().isAppThemeLight ? 'true' : 'false'].color,
+        0.2,
+      );
+    });
+
+    listItem.append(from.getHTML(), label);
+    return listItem;
+  }
+
+  private createFeedbackList(): HTMLUListElement {
+    const list = createBaseElement({
+      cssClasses: [styles.feedbackList],
+      tag: 'ul',
+    });
+
+    const title = createBaseElement({
+      cssClasses: [styles.title],
+      innerContent: ABOUT_TEXT[getStore().getState().currentLanguage].FEEDBACK,
+      tag: 'h3',
+    });
+
+    changeColor(title, this.params.coverColor[getStore().getState().isAppThemeLight ? 'true' : 'false'].color);
+    list.append(title);
+    this.params.feedback.forEach((item) => {
+      list.append(this.createFeedbackItem(item));
+    });
+
+    observeStore(selectCurrentLanguage, () => {
+      title.innerText = ABOUT_TEXT[getStore().getState().currentLanguage].FEEDBACK;
+    });
+
+    observeStore(selectCurrentTheme, () => {
+      changeColor(title, this.params.coverColor[getStore().getState().isAppThemeLight ? 'true' : 'false'].color);
+    });
+    return list;
+  }
+}
+
+export default AboutFullCardView;

src/entities/AboutFullCard/view/aboutFullCardView.module.scss

@@ -0,0 +1,103 @@
+@import 'src/app/styles/mixins';
+
+.aboutFullCard {
+  border-radius: 0;
+  box-shadow: none;
+  background-color: var(--noble-gray-1300);
+  cursor: auto;
+
+  &:active {
+    transform: none;
+    scale: none;
+  }
+
+  @media (hover: hover) {
+    &:hover {
+      box-shadow: none;
+      transform: none;
+    }
+  }
+
+  @media (max-width: 840px) {
+    max-width: 100%;
+  }
+}
+
+.checklist,
+.feedbackList {
+  display: flex;
+  flex-direction: column;
+  padding: var(--extra-small-offset);
+  padding-top: 0;
+  font: var(--regular-font);
+  line-height: 170%;
+  letter-spacing: var(--one);
+  color: var(--noble-gray-700);
+  gap: var(--extra-small-offset);
+}
+
+.label {
+  position: relative;
+  display: flex;
+  align-items: center;
+  padding-left: var(--extra-small-offset);
+  gap: var(--tiny-offset);
+
+  &::after {
+    content: '✔';
+    position: absolute;
+    left: 0;
+    top: 0;
+  }
+}
+
+.feedbackLabel {
+  border-radius: var(--medium-br);
+  border-top-left-radius: 0;
+  padding: var(--extra-small-offset);
+
+  &::after {
+    content: '';
+    position: absolute;
+    left: 0;
+    top: -0.7rem;
+    border-top-left-radius: 1rem;
+    border-top-right-radius: 0.2rem;
+    border-bottom-right-radius: 100%;
+    width: 1.7rem;
+    height: 0.7rem;
+    background-color: inherit;
+  }
+}
+
+.from {
+  @include link;
+
+  display: flex;
+  align-items: center;
+  margin-bottom: var(--tiny-offset);
+  padding: 0;
+  padding-bottom: var(--two);
+  width: max-content;
+  height: max-content;
+  max-width: max-content;
+  font: var(--regular-font);
+  letter-spacing: var(--one);
+  text-transform: uppercase;
+  color: var(--noble-gray-500);
+  gap: var(--tiny-offset);
+}
+
+.avatar {
+  border-radius: 50%;
+  width: 1.5rem;
+  height: 1.5rem;
+  background-size: cover;
+  transition: filter 0.2s;
+
+  @media (hover: hover) {
+    &:hover {
+      filter: brightness(1.15);
+    }
+  }
+}

src/entities/AboutShortCard/model/AboutShortCardModel.ts

@@ -0,0 +1,54 @@
+import type AboutFullCardModel from '@/entities/AboutFullCard/model/AboutFullCardModel.ts';
+import type { AboutData } from '@/shared/types/validation/aboutData.ts';
+
+import RouterModel from '@/app/Router/model/RouterModel.ts';
+import modal from '@/shared/Modal/model/ModalModel.ts';
+import { PAGE_ID } from '@/shared/constants/pages.ts';
+import { aboutUsPathWithID } from '@/shared/utils/buildPathname.ts';
+
+import AboutShortCardView from '../view/AboutShortCardView.ts';
+
+class AboutShortCardModel {
+  private fullCard: AboutFullCardModel | null = null;
+
+  protected params: AboutData;
+
+  protected view: AboutShortCardView;
+
+  constructor(params: AboutData) {
+    this.params = params;
+    this.view = new AboutShortCardView(params);
+    this.init();
+  }
+
+  private cardHandler(): void {
+    RouterModel.getInstance().navigateTo(aboutUsPathWithID(this.params.github.name));
+    if (this.fullCard) {
+      modal.setContent(this.fullCard.getHTML());
+      modal.show(() => RouterModel.getInstance().navigateTo(PAGE_ID.ABOUT_US_PAGE));
+      modal.getView().getModalContent().scrollTo(0, 0);
+    }
+  }
+
+  private init(): void {
+    this.getHTML().addEventListener('click', this.cardHandler.bind(this));
+  }
+
+  public getHTML(): HTMLDivElement {
+    return this.view.getHTML();
+  }
+
+  public openFullCard(): void {
+    const id = RouterModel.getPageID();
+
+    if (id === this.params.github.name) {
+      this.cardHandler();
+    }
+  }
+
+  public setFullCard(fullCard: AboutFullCardModel): void {
+    this.fullCard = fullCard;
+  }
+}
+
+export default AboutShortCardModel;