add mobile version of courses & programs list pages

.eslintrc.json

@@ -14,6 +14,9 @@
   "rules": {
     "no-useless-constructor": "off",
     "@typescript-eslint/no-empty-function": "off",
-    "dot-notation": "off"
+    "dot-notation": "off",
+    "@typescript-eslint/no-explicit-any": "warn",
+    "@typescript-eslint/no-unused-vars": "warn",
+    "@typescript-eslint/no-unused-expressions": "warn"
   }
 }

projects/social_platform/src/app/office/chat/chat.component.scss

@@ -1,4 +1,6 @@
 .page {
+  margin-top: 30px;
+
   &__bar {
     margin-bottom: 20px;
   }

projects/social_platform/src/app/office/courses/courses.component.html

@@ -4,7 +4,7 @@
   <app-back namespace="курсы" path="/office/program/all"></app-back>
 
   <div class="profile__info">
-    <form class="page__search" [formGroup]="searchForm">
+    <form class="profile__search" [formGroup]="searchForm">
       <app-search formControlName="search"></app-search>
     </form>
 

projects/social_platform/src/app/office/courses/courses.component.scss

@@ -2,9 +2,42 @@
 @use "styles/responsive";
 
 .profile {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  padding-bottom: 100px;
+  margin-top: 30px;
+
+  @include responsive.apply-desktop {
+    display: block;
+  }
+
   &__info {
     display: grid;
-    grid-template-columns: 8fr 2fr;
     column-gap: 20px;
+
+    @include responsive.apply-desktop {
+      grid-template-columns: 8fr 2fr;
+    }
+  }
+
+  &__search {
+    margin-bottom: 24px;
+  }
+
+  app-back {
+    display: none;
+
+    @include responsive.apply-desktop {
+      display: block;
+    }
+  }
+
+  app-soon-card {
+    display: none;
+
+    @include responsive.apply-desktop {
+      display: block;
+    }
   }
 }

projects/social_platform/src/app/office/courses/list/list.component.scss

@@ -1,9 +1,13 @@
-.courses {
-  margin-top: 20px;
+@use "styles/responsive";
 
+.courses {
   &__list {
     display: grid;
-    grid-template-columns: 4fr 4fr;
+    grid-template-columns: 1fr;
     grid-gap: 20px;
+
+    @include responsive.apply-desktop {
+      grid-template-columns: 4fr 4fr;
+    }
   }
 }

projects/social_platform/src/app/office/features/nav/nav.component.html

@@ -2,13 +2,14 @@
 
 <div class="nav-bar">
   <div class="nav-bar__inner">
-    <h1 class="text-heading-1 nav-bar__title">{{ title }}</h1>
     <div class="nav-bar__toggle">
       <i
         appIcon
+        [ngStyle]="{ color: mobileMenuOpen ? 'var(--dark-grey)' : 'var(--light-white)' }"
         [icon]="mobileMenuOpen ? 'menu-cross' : 'menu-burger'"
-        appSquare="40"
+        appSquare="24"
         (click)="mobileMenuOpen = !mobileMenuOpen"
+        class="nav-bar__icon"
       >
       </i>
       @if (((notificationService.hasNotifications | async) || hasInvites) && !mobileMenuOpen) {
@@ -19,9 +20,6 @@ <h1 class="text-heading-1 nav-bar__title">{{ title }}</h1>
   @if (mobileMenuOpen) {
   <div class="nav-bar__mobile-menu">
     <div class="nav-bar__top">
-      <a class="nav-bar__mobile-logo" href="https://procollab.ru/" target="_blank">
-        <img src="/assets/images/shared/logo.svg" alt="procollab" width="125px" />
-      </a>
       <div
         class="nav-bar__notifications-toggle"
         [class.nav-bar__notifications-toggle--active]="notificationsOpen"
@@ -34,9 +32,17 @@ <h1 class="text-heading-1 nav-bar__title">{{ title }}</h1>
           appWidth="23"
           appHeight="21"
           appViewBox="0 0 23 21"
+          class="nav-bar__icon"
         ></i>
 
-        <i appIcon icon="bell" appWidth="20" appHeight="22" appViewBox="0 0 20 22"></i>
+        <i
+          appIcon
+          icon="bell"
+          appWidth="20"
+          appHeight="22"
+          appViewBox="0 0 20 22"
+          class="nav-bar__icon"
+        ></i>
         @if ((notificationService.hasNotifications | async) || hasInvites) {
         <div class="attention"></div>
         }
@@ -47,50 +53,75 @@ <h1 class="text-heading-1 nav-bar__title">{{ title }}</h1>
       <ul class="nav__list">
         <a class="nav__link" routerLink="feed" routerLinkActive="nav__link--active">
           <li class="text-body-14 nav__item">
-            <i appIcon icon="feed" appSquare="24" appViewBox="0 0 24 20"></i>
-            Новости
+            <i appIcon icon="feed" appSquare="24" appViewBox="0 0 24 20" class="nav-bar__icon"></i>
+            новости
           </li>
         </a>
         <a class="nav__link" routerLink="projects" routerLinkActive="nav__link--active">
           <li class="text-body-14 nav__item">
-            <i appIcon icon="projects-filled" appSquare="24" appViewBox="0 0 24 20"></i>
-            Проекты
+            <i
+              appIcon
+              icon="projects"
+              appSquare="24"
+              appViewBox="0 0 24 20"
+              class="nav-bar__icon"
+            ></i>
+            проекты
           </li>
         </a>
-        <a class="nav__link" routerLink="program/list" routerLinkActive="nav__link--active">
+        <a class="nav__link" routerLink="members" routerLinkActive="nav__link--active">
           <li class="text-body-14 nav__item">
-            <i appIcon icon="program" appSquare="24" appViewBox="0 0 24 16"></i>
-            Программы
+            <i
+              appIcon
+              icon="people-bold"
+              appSquare="24"
+              appViewBox="0 0 24 18"
+              class="nav-bar__icon"
+            ></i>
+            участники
           </li>
         </a>
-        <a class="nav__link" routerLink="members" routerLinkActive="nav__link--active">
+        <a class="nav__link" routerLink="program" routerLinkActive="nav__link--active">
           <li class="text-body-14 nav__item">
-            <i appIcon icon="people-bold" appSquare="24" appViewBox="0 0 24 18"></i>
-            Участники
+            <i
+              appIcon
+              icon="program"
+              appSquare="24"
+              appViewBox="0 0 24 16"
+              class="nav-bar__icon"
+            ></i>
+            программы
           </li>
         </a>
-        <a class="nav__link" routerLink="mentors" routerLinkActive="nav__link--active">
+        <a class="nav__link" routerLink="courses" routerLinkActive="nav__link--active">
           <li class="text-body-14 nav__item">
-            <i appIcon icon="two-people" appSquare="24" appViewBox="0 0 28 20"></i>
-            Эксперты
+            <i
+              appIcon
+              icon="trajectories"
+              appSquare="24"
+              appViewBox="0 0 28 20"
+              class="nav-bar__icon"
+            ></i>
+            курсы
           </li>
         </a>
         <a class="nav__link" routerLink="vacancies" routerLinkActive="nav__link--active">
           <li class="text-body-14 nav__item">
-            <i appIcon icon="search-sidebar" appSquare="24" appViewBox="0 0 28 20"></i>
-            Вакансии
+            <i
+              appIcon
+              icon="search-sidebar"
+              appSquare="24"
+              appViewBox="0 0 28 20"
+              class="nav-bar__icon"
+            ></i>
+            вакансии
           </li>
         </a>
-        <div class="text-body-14 pro-item" (click)="openSkills()" afterNavItems>
-          <div class="pro-item__name">
-            <i appIcon icon="trajectories" appSquare="24"></i> <span> Траектории </span>
-          </div>
-        </div>
       </ul>
     </nav>
     } @else {
     <div>
-      <h3 class="text-bold-body-16 notifications__title">Уведомления</h3>
+      <h3 class="text-bold-body-16 notifications__title">уведомления</h3>
       <ul class="notifications__invites">
         @for (invite of invites; track invite.id) {
         <li class="notifications__invite">
@@ -103,8 +134,6 @@ <h3 class="text-bold-body-16 notifications__title">Уведомления</h3>
         }
       </ul>
     </div>
-    } @if (authService.profile | async; as user) {
-    <app-profile-info class="nav-bar__profile" [user]="user"></app-profile-info>
     }
   </div>
   }

projects/social_platform/src/app/office/features/nav/nav.component.scss

@@ -5,8 +5,6 @@
 
 .nav-bar {
   display: block;
-  padding: 25px 0 10px;
-  background-color: var(--light-gray);
 
   @include responsive.apply-desktop {
     display: none;
@@ -18,19 +16,21 @@
     display: flex;
     justify-content: space-between;
     max-width: responsive.$container-md;
-    padding: 0 15px;
     margin: 0 auto;
 
     @include responsive.apply-desktop {
       padding: 0;
     }
   }
 
+  &__icon {
+    color: var(--dark-grey);
+  }
+
   &__top {
     display: flex;
     align-items: center;
-    justify-content: space-between;
-    padding-right: 50px;
+    justify-content: flex-end;
     margin-bottom: 40px;
   }
 
@@ -42,7 +42,6 @@
     justify-content: center;
     width: 60px;
     height: 40px;
-    color: var(--black);
     cursor: pointer;
     border-radius: var(--rounded-sm);
 
@@ -73,16 +72,6 @@
     }
   }
 
-  &__title {
-    color: var(--black);
-
-    @include typography.heading-3;
-
-    @include responsive.apply-desktop {
-      @include typography.heading-1;
-    }
-  }
-
   &__mobile-menu {
     position: fixed;
     top: 0;
@@ -131,35 +120,3 @@
   background-color: var(--red);
   border-radius: 50%;
 }
-
-.pro-item {
-  display: flex;
-  gap: 10px;
-  align-items: center;
-  justify-content: space-between;
-  margin-right: 20px;
-  color: var(--dark-grey);
-  cursor: pointer;
-  transition: color 0.2s;
-
-  &:hover {
-    color: var(--black);
-  }
-
-  &__name {
-    display: flex;
-    align-items: center;
-
-    i {
-      margin-right: 12px;
-    }
-  }
-
-  &__badge {
-    padding: 2px 10px;
-    margin-left: auto;
-    color: var(--white);
-    background-color: var(--accent);
-    border-radius: 12px;
-  }
-}

projects/social_platform/src/app/office/features/nav/nav.component.ts

@@ -1,14 +1,13 @@
 /** @format */
 
 import { ChangeDetectorRef, Component, Input, OnDestroy, OnInit } from "@angular/core";
-import { NavService } from "@services/nav.service";
 import { NavigationStart, Router, RouterLink, RouterLinkActive } from "@angular/router";
 import { noop, Subscription } from "rxjs";
 import { NotificationService } from "@services/notification.service";
 import { Invite } from "@models/invite.model";
 import { AuthService } from "@auth/services";
 import { InviteService } from "@services/invite.service";
-import { AsyncPipe } from "@angular/common";
+import { AsyncPipe, CommonModule } from "@angular/common";
 import { IconComponent } from "@ui/components";
 import { InviteManageCardComponent, ProfileInfoComponent } from "@uilib";
 
@@ -47,6 +46,7 @@ import { InviteManageCardComponent, ProfileInfoComponent } from "@uilib";
   styleUrl: "./nav.component.scss",
   standalone: true,
   imports: [
+    CommonModule,
     IconComponent,
     RouterLink,
     RouterLinkActive,
@@ -57,12 +57,10 @@ import { InviteManageCardComponent, ProfileInfoComponent } from "@uilib";
 })
 export class NavComponent implements OnInit, OnDestroy {
   constructor(
-    public readonly navService: NavService,
     private readonly router: Router,
     public readonly notificationService: NotificationService,
     private readonly inviteService: InviteService,
-    public readonly authService: AuthService,
-    private readonly cdref: ChangeDetectorRef
+    public readonly authService: AuthService
   ) {}
 
   ngOnInit(): void {
@@ -73,14 +71,6 @@ export class NavComponent implements OnInit, OnDestroy {
       }
     });
     routerEvents$ && this.subscriptions$.push(routerEvents$);
-
-    // Подписка на изменения заголовка страницы
-    const title$ = this.navService.navTitle.subscribe(title => {
-      this.title = title;
-      this.cdref.detectChanges();
-    });
-
-    title$ && this.subscriptions$.push(title$);
   }
 
   ngOnDestroy(): void {
@@ -92,7 +82,6 @@ export class NavComponent implements OnInit, OnDestroy {
   subscriptions$: Subscription[] = [];
   mobileMenuOpen = false;
   notificationsOpen = false;
-  title = "";
 
   /**
    * Проверка наличия непринятых приглашений