+ ![Эталон]()
![Исправление для наложения]()
+
+ PROCOLLAB · visual regression
+Desktop: dev до #401 (5fe4d5c6). Mobile: адаптив 1138fe0c.
+
+
+
+
+
+
+
+ + Отчёт, команды и ограничения · Высота viewport 844 px, внутренний + scroll Office. Изображения без масок. +
+
@if (loading()) {
-
diff --git a/projects/social_platform/src/app/ui/pages/courses/list/list.component.ts b/projects/social_platform/src/app/ui/pages/courses/list/list.component.ts
index 7794dcce6..7fba4fd49 100644
--- a/projects/social_platform/src/app/ui/pages/courses/list/list.component.ts
+++ b/projects/social_platform/src/app/ui/pages/courses/list/list.component.ts
@@ -1,6 +1,6 @@
/** @format */
-import { StateComponent } from "@uilib";
+import { DesktopLayoutService, StateComponent } from "@uilib";
/** @format */
import { ChangeDetectionStrategy, Component, inject, OnInit } from "@angular/core";
@@ -22,6 +22,7 @@ import { AppRoutes } from "@api/paths/app-routes";
changeDetection: ChangeDetectionStrategy.OnPush,
})
export class CoursesListComponent implements OnInit {
+ protected readonly desktopLayout = inject(DesktopLayoutService).desktop;
private readonly coursesListInfoService = inject(CoursesListInfoService);
private readonly coursesListUIInfoService = inject(CoursesListUIInfoService);
diff --git a/projects/social_platform/src/app/ui/pages/error/error-code/error-code.component.scss b/projects/social_platform/src/app/ui/pages/error/error-code/error-code.component.scss
index 408198756..6c671a8e7 100644
--- a/projects/social_platform/src/app/ui/pages/error/error-code/error-code.component.scss
+++ b/projects/social_platform/src/app/ui/pages/error/error-code/error-code.component.scss
@@ -15,12 +15,19 @@
height: 580px;
margin-bottom: 20px;
color: var(--error-code);
- background:
- radial-gradient(
- 50% 50% at 50% 50%,
- var(--ui-success-glow) 0%,
- var(--ui-success-glow-end) 100%
- );
+
+ @media screen and (max-width: 999px) {
+ background:
+ radial-gradient(
+ 50% 50% at 50% 50%,
+ var(--ui-success-glow) 0%,
+ var(--ui-success-glow-end) 100%
+ );
+ }
+
+ @media screen and (min-width: 1000px) {
+ background: radial-gradient(50% 50% at 50% 50%, rgb(0 200 147 / 51%) 0%, rgb(0 200 147 / 0%) 100%);
+ }
}
&__title {
@@ -35,24 +42,26 @@
}
}
-@include responsive.apply-below-desktop {
- .error {
- padding: 24px var(--page-gutter);
- }
+@media screen and (max-width: 999px) {
+ @include responsive.apply-below-desktop {
+ .error {
+ padding: 24px var(--page-gutter);
+ }
- .error__body {
- width: 100%;
- min-width: 0;
- }
+ .error__body {
+ width: 100%;
+ min-width: 0;
+ }
- .error__code {
- width: 100%;
- height: auto;
- min-height: 240px;
- font-size: clamp(96px, 30vw, 240px);
- }
+ .error__code {
+ width: 100%;
+ height: auto;
+ min-height: 240px;
+ font-size: clamp(96px, 30vw, 240px);
+ }
- .error__link {
- min-height: 44px;
+ .error__link {
+ min-height: 44px;
+ }
}
}
diff --git a/projects/social_platform/src/app/ui/pages/feed/feed.component.html b/projects/social_platform/src/app/ui/pages/feed/feed.component.html
index c4a83e34c..ba9368ea4 100644
--- a/projects/social_platform/src/app/ui/pages/feed/feed.component.html
+++ b/projects/social_platform/src/app/ui/pages/feed/feed.component.html
@@ -34,7 +34,14 @@
}
}
} @else {
-
@for (course of coursesList(); track course.id) {
@@ -12,6 +16,8 @@
}
} @else {
-
+
+
+ } @else {
+ в данном разделе пока нет новостей
+{{ feedItem()
>
}
+
}
diff --git a/projects/social_platform/src/app/ui/pages/office/nav/nav.component.scss b/projects/social_platform/src/app/ui/pages/office/nav/nav.component.scss
index 8a5bf28dd..06e059c65 100644
--- a/projects/social_platform/src/app/ui/pages/office/nav/nav.component.scss
+++ b/projects/social_platform/src/app/ui/pages/office/nav/nav.component.scss
@@ -3,6 +3,12 @@
@use "styles/responsive";
@use "styles/typography";
+@media screen and (max-width: 999px) {
+ .nav-bar__logout {
+ margin-top: auto;
+ }
+}
+
.nav-bar {
display: block;
@@ -13,10 +19,26 @@
}
&__inner {
- display: flex;
- gap: 8px;
- align-items: center;
- justify-content: space-between;
+ @media screen and (max-width: 999px) {
+ display: grid;
+ }
+
+ @media screen and (min-width: 1000px) {
+ display: flex;
+ }
+
+ @media screen and (max-width: 999px) {
+ grid-template-columns: 88px minmax(0, 1fr) 88px;
+ }
+
+ @media screen and (max-width: 999px) {
+ align-items: center;
+ }
+
+ @media screen and (min-width: 1000px) {
+ justify-content: space-between;
+ }
+
max-width: responsive.$container-md;
margin: 0 auto;
@@ -47,9 +69,18 @@
cursor: pointer;
border-radius: var(--rounded-sm);
- > .attention {
- top: 9px;
- right: 11px;
+ @media screen and (max-width: 999px) {
+ > .attention {
+ top: 9px;
+ right: 11px;
+ }
+ }
+
+ @media screen and (min-width: 1000px) {
+ >.attention {
+ top: 9px;
+ right: 11px;
+ }
}
&--active {
@@ -61,17 +92,49 @@
&__toggle {
position: relative;
z-index: 100;
- display: flex;
- flex-shrink: 0;
- align-items: center;
- justify-content: center;
- width: 44px;
- height: 44px;
+
+ @media screen and (max-width: 999px) {
+ display: flex;
+ }
+
+ @media screen and (min-width: 1000px) {
+ display: block;
+ }
+
+ @media screen and (max-width: 999px) {
+ flex-shrink: 0;
+ }
+
+ @media screen and (max-width: 999px) {
+ align-items: center;
+ }
+
+ @media screen and (max-width: 999px) {
+ justify-content: center;
+ }
+
+ @media screen and (max-width: 999px) {
+ width: 44px;
+ }
+
+ @media screen and (max-width: 999px) {
+ height: 44px;
+ }
+
cursor: pointer;
- > .attention {
- top: 8px;
- right: 2px;
+ @media screen and (max-width: 999px) {
+ > .attention {
+ top: 8px;
+ right: 2px;
+ }
+ }
+
+ @media screen and (min-width: 1000px) {
+ >.attention {
+ top: 8px;
+ right: 2px;
+ }
}
@include responsive.apply-desktop {
@@ -84,48 +147,72 @@
top: 0;
bottom: 0;
left: 0;
- z-index: 201;
display: flex;
flex-direction: column;
- width: min(360px, calc(100% - 32px));
- max-height: 100dvh;
- padding: max(16px, env(safe-area-inset-top)) 16px max(24px, env(safe-area-inset-bottom));
- overflow-y: auto;
- overscroll-behavior: contain;
background-color: var(--white);
+
+ @media screen and (max-width: 999px) {
+ z-index: 201;
+ width: min(360px, calc(100% - 32px));
+ max-height: 100dvh;
+ padding: max(16px, env(safe-area-inset-top)) 16px max(24px, env(safe-area-inset-bottom));
+ overflow-y: auto;
+ overscroll-behavior: contain;
+ }
+
+ @media screen and (min-width: 1000px) {
+ right: 0;
+ z-index: 50;
+ padding: 25px 15px 30px;
+ }
}
- &__backdrop {
- position: fixed;
- inset: 0;
- z-index: 200;
- background: var(--ui-scrim);
+ @media screen and (max-width: 999px) {
+ &__backdrop {
+ position: fixed;
+ inset: 0;
+ z-index: 200;
+ background: var(--ui-scrim);
+ }
}
- &__close {
- display: flex;
- align-items: center;
- justify-content: center;
- width: 44px;
- height: 44px;
- margin-right: auto;
- color: var(--dark-grey);
- cursor: pointer;
+ @media screen and (max-width: 999px) {
+ &__close {
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ width: 44px;
+ height: 44px;
+ margin-right: auto;
+ color: var(--dark-grey);
+ cursor: pointer;
+ }
}
- &__title {
- min-width: 0;
- color: var(--white);
- overflow-wrap: anywhere;
+ @media screen and (max-width: 999px) {
+ &__title {
+ grid-row: 1;
+ grid-column: 2;
+ min-width: 0;
+ font-weight: 600;
+ line-height: 18px;
+ color: var(--ui-text);
+ text-align: center;
+ overflow-wrap: anywhere;
+ }
}
- ::ng-deep .nav__link {
- width: 100%;
- margin-bottom: 12px;
+ @media screen and (max-width: 999px) {
+ ::ng-deep .nav__link {
+ width: 100%;
+ margin-bottom: 12px;
+ }
}
- ::ng-deep .nav__item {
- min-height: 44px;
+ @media screen and (max-width: 999px) {
+ ::ng-deep .nav__item {
+ min-height: 44px;
+ }
}
&__user {
diff --git a/projects/social_platform/src/app/ui/pages/office/nav/nav.component.ts b/projects/social_platform/src/app/ui/pages/office/nav/nav.component.ts
index da9e3de2e..97e35dca5 100644
--- a/projects/social_platform/src/app/ui/pages/office/nav/nav.component.ts
+++ b/projects/social_platform/src/app/ui/pages/office/nav/nav.component.ts
@@ -21,10 +21,17 @@ import {
OnDestroy,
OnInit,
inject,
+ output,
} from "@angular/core";
import { AsyncPipe, CommonModule } from "@angular/common";
import { IconComponent } from "@ui/primitives";
-import { NavigationStart, Router, RouterLink, RouterLinkActive } from "@angular/router";
+import {
+ NavigationEnd,
+ NavigationStart,
+ Router,
+ RouterLink,
+ RouterLinkActive,
+} from "@angular/router";
import { NavService } from "@api/shared/nav.service";
import { InviteInfoService } from "@api/invite/facades/invite-info.service";
import { A11yModule } from "@angular/cdk/a11y";
@@ -86,6 +93,7 @@ export class NavComponent implements OnInit, OnDestroy {
private menuTrigger?: HTMLElement;
readonly invites = this.inviteInfoService.invites;
+ readonly logout = output();
constructor(
private readonly router: Router,
@@ -96,17 +104,22 @@ export class NavComponent implements OnInit, OnDestroy {
) {}
ngOnInit(): void {
+ this.title = this.routeTitle(this.router.url);
// Подписка на события роутера для закрытия мобильного меню
this.router.events.pipe(takeUntilDestroyed(this.destroyRef)).subscribe(event => {
if (event instanceof NavigationStart) {
this.closeMenu();
this.cdref.markForCheck();
}
+ if (event instanceof NavigationEnd) {
+ this.title = this.routeTitle(event.urlAfterRedirects) || this.title;
+ this.cdref.markForCheck();
+ }
});
// Подписка на изменения заголовка страницы
this.navService.navTitle.pipe(takeUntilDestroyed(this.destroyRef)).subscribe(title => {
- this.title = title;
+ this.title = this.routeTitle(this.router.url) || title;
this.cdref.detectChanges();
});
}
@@ -115,6 +128,25 @@ export class NavComponent implements OnInit, OnDestroy {
this.menuScrollStrategy.disable();
}
+ private routeTitle(url: string): string {
+ const path = url.split(/[?#]/)[0];
+ if (/^\/office\/profile\/edit(?:\/|$)/.test(path)) return "Редактирование профиля";
+ if (/^\/office\/projects\/create(?:\/|$)/.test(path)) return "Создание проекта";
+ if (/^\/office\/projects\/\d+\/edit(?:\/|$)/.test(path)) return "Редактирование проекта";
+ if (/^\/office\/projects\/\d+(?:\/|$)/.test(path)) return "Профиль проекта";
+ const sections: Record = {
+ feed: "Новости",
+ projects: "Проекты",
+ members: "Участники",
+ program: "Программы",
+ courses: "Курсы",
+ vacancies: "Вакансии",
+ profile: "Профиль",
+ chats: "Чаты",
+ };
+ return sections[path.split("/")[2]] || "";
+ }
+
@HostListener("window:resize")
onViewportResize(): void {
if (this.mobileMenuOpen && window.innerWidth >= desktop) this.closeMenu();
diff --git a/projects/social_platform/src/app/ui/pages/office/office.component.html b/projects/social_platform/src/app/ui/pages/office/office.component.html
index 5f840178f..ce1d59b4b 100644
--- a/projects/social_platform/src/app/ui/pages/office/office.component.html
+++ b/projects/social_platform/src/app/ui/pages/office/office.component.html
@@ -39,7 +39,7 @@
- app-nav {
- flex: 1;
- min-width: 0;
+ @media screen and (max-width: 999px) {
+ &__top > app-nav {
+ grid-row: 1;
+ grid-column: 1 / -1;
+ min-width: 0;
+ }
+ }
+
+ @media screen and (max-width: 999px) {
+ &__top > app-profile-control-panel {
+ grid-row: 1;
+ grid-column: 3;
+ justify-self: end;
+ min-width: 0;
+ }
}
&__header {
diff --git a/projects/social_platform/src/app/ui/pages/office/snackbar/snackbar.component.scss b/projects/social_platform/src/app/ui/pages/office/snackbar/snackbar.component.scss
index d6da495e1..60046c083 100644
--- a/projects/social_platform/src/app/ui/pages/office/snackbar/snackbar.component.scss
+++ b/projects/social_platform/src/app/ui/pages/office/snackbar/snackbar.component.scss
@@ -2,8 +2,6 @@
@use "styles/responsive";
-/** @format */
-
.snackbar {
position: absolute;
top: 0;
@@ -13,7 +11,15 @@
padding-right: 50px;
overflow-x: hidden;
+ @media screen and (max-width: 999px) {
+ pointer-events: none;
+ }
+
&__item {
+ @media screen and (max-width: 999px) {
+ pointer-events: auto;
+ }
+
&:not(:last-child) {
margin-bottom: 10px;
}
@@ -44,20 +50,22 @@
}
}
-@include responsive.apply-mobile {
- .snackbar {
- position: fixed;
- top: max(12px, env(safe-area-inset-top));
- right: var(--page-gutter);
- left: var(--page-gutter);
- max-height: calc(100dvh - 24px);
- padding: 0;
- overflow-y: auto;
- }
+@media screen and (max-width: 999px) {
+ @include responsive.apply-mobile {
+ .snackbar {
+ position: fixed;
+ top: max(12px, env(safe-area-inset-top));
+ right: var(--page-gutter);
+ left: var(--page-gutter);
+ max-height: calc(100dvh - 24px);
+ padding: 0;
+ overflow-y: auto;
+ }
- .item {
- min-width: 0;
- padding: 12px;
- overflow-wrap: anywhere;
+ .item {
+ min-width: 0;
+ padding: 12px;
+ overflow-wrap: anywhere;
+ }
}
}
diff --git a/projects/social_platform/src/app/ui/pages/profile/detail/main/components/profile-left-side/profile-left-side.component.scss b/projects/social_platform/src/app/ui/pages/profile/detail/main/components/profile-left-side/profile-left-side.component.scss
index b7d5313f6..ae0c8110d 100644
--- a/projects/social_platform/src/app/ui/pages/profile/detail/main/components/profile-left-side/profile-left-side.component.scss
+++ b/projects/social_platform/src/app/ui/pages/profile/detail/main/components/profile-left-side/profile-left-side.component.scss
@@ -111,8 +111,8 @@
background-color: var(--accent-light);
}
- /* stylelint-disable value-no-vendor-prefix */
&__program-name {
+ /* stylelint-disable-next-line value-no-vendor-prefix */
display: -webkit-box;
min-width: 0;
overflow: hidden;
@@ -122,14 +122,21 @@
-webkit-line-clamp: 2;
&--compact {
- font-size: var(--ui-font-caption);
- font-weight: 400;
line-height: 14px;
word-break: normal;
overflow-wrap: normal;
+
+ @media screen and (max-width: 999px) {
+ font-size: var(--ui-font-caption);
+ font-weight: 400;
+ }
+
+ @media screen and (min-width: 1000px) {
+ font-size: 10px;
+ font-weight: 400;
+ }
}
}
- /* stylelint-enable value-no-vendor-prefix */
&__icon {
color: var(--accent);
diff --git a/projects/social_platform/src/app/ui/pages/profile/detail/main/components/profile-right-side/profile-right-side.component.scss b/projects/social_platform/src/app/ui/pages/profile/detail/main/components/profile-right-side/profile-right-side.component.scss
index a8d873e0b..98008d770 100644
--- a/projects/social_platform/src/app/ui/pages/profile/detail/main/components/profile-right-side/profile-right-side.component.scss
+++ b/projects/social_platform/src/app/ui/pages/profile/detail/main/components/profile-right-side/profile-right-side.component.scss
@@ -107,17 +107,31 @@
}
&--subtext {
- font-size: var(--ui-font-caption);
line-height: 16px;
color: var(--grey-for-text) !important;
word-break: break-word;
overflow-wrap: anywhere;
+
+ @media screen and (max-width: 999px) {
+ font-size: var(--ui-font-caption);
+ }
+
+ @media screen and (min-width: 1000px) {
+ font-size: 11px;
+ }
}
&--more {
- font-size: var(--ui-font-caption);
line-height: 16px;
color: var(--accent) !important;
+
+ @media screen and (max-width: 999px) {
+ font-size: var(--ui-font-caption);
+ }
+
+ @media screen and (min-width: 1000px) {
+ font-size: 11px;
+ }
}
img {
@@ -125,8 +139,8 @@
}
}
- /* stylelint-disable value-no-vendor-prefix */
&__project-name {
+ /* stylelint-disable-next-line value-no-vendor-prefix */
display: -webkit-box;
overflow: hidden;
font-size: var(--ui-font-small);
@@ -140,12 +154,18 @@
&__project-role {
margin-top: 3px;
- font-size: var(--ui-font-caption);
line-height: 15px;
color: var(--dark-grey);
overflow-wrap: anywhere;
+
+ @media screen and (max-width: 999px) {
+ font-size: var(--ui-font-caption);
+ }
+
+ @media screen and (min-width: 1000px) {
+ font-size: 11px;
+ }
}
- /* stylelint-enable value-no-vendor-prefix */
&__date {
display: flex;
@@ -158,9 +178,16 @@
border-radius: var(--rounded-xl);
p {
- font-size: var(--ui-font-caption);
line-height: 14px;
color: var(--dark-grey);
+
+ @media screen and (max-width: 999px) {
+ font-size: var(--ui-font-caption);
+ }
+
+ @media screen and (min-width: 1000px) {
+ font-size: 11px;
+ }
}
}
diff --git a/projects/social_platform/src/app/ui/pages/profile/detail/profile-news/profile-news.component.scss b/projects/social_platform/src/app/ui/pages/profile/detail/profile-news/profile-news.component.scss
index 0219fccd0..3195861cc 100644
--- a/projects/social_platform/src/app/ui/pages/profile/detail/profile-news/profile-news.component.scss
+++ b/projects/social_platform/src/app/ui/pages/profile/detail/profile-news/profile-news.component.scss
@@ -6,7 +6,6 @@
display: block;
@include responsive.apply-desktop {
- width: 100%;
- min-width: 0;
+ min-width: 800px;
}
}
diff --git a/projects/social_platform/src/app/ui/pages/profile/edit/components/profile-achievements-step/profile-achievements-step.component.scss b/projects/social_platform/src/app/ui/pages/profile/edit/components/profile-achievements-step/profile-achievements-step.component.scss
index c394c4427..fab36a81e 100644
--- a/projects/social_platform/src/app/ui/pages/profile/edit/components/profile-achievements-step/profile-achievements-step.component.scss
+++ b/projects/social_platform/src/app/ui/pages/profile/edit/components/profile-achievements-step/profile-achievements-step.component.scss
@@ -1,7 +1,6 @@
-@use "styles/profile-form";
-
/** @format */
+@use "styles/profile-form";
@use "styles/responsive";
.profile__wrapper--education {
@@ -119,4 +118,6 @@
}
}
-@include profile-form.responsive-layout;
+@media screen and (max-width: 999px) {
+ @include profile-form.responsive-layout;
+}
diff --git a/projects/social_platform/src/app/ui/pages/profile/edit/components/profile-education-step/profile-education-step.component.scss b/projects/social_platform/src/app/ui/pages/profile/edit/components/profile-education-step/profile-education-step.component.scss
index fc3d2503b..bbf8e84bb 100644
--- a/projects/social_platform/src/app/ui/pages/profile/edit/components/profile-education-step/profile-education-step.component.scss
+++ b/projects/social_platform/src/app/ui/pages/profile/edit/components/profile-education-step/profile-education-step.component.scss
@@ -1,7 +1,6 @@
-@use "styles/profile-form";
-
/** @format */
+@use "styles/profile-form";
@use "styles/responsive";
.profile__wrapper--education {
@@ -113,4 +112,6 @@
}
}
-@include profile-form.responsive-layout;
+@media screen and (max-width: 999px) {
+ @include profile-form.responsive-layout;
+}
diff --git a/projects/social_platform/src/app/ui/pages/profile/edit/components/profile-experience-step/profile-experience-step.component.scss b/projects/social_platform/src/app/ui/pages/profile/edit/components/profile-experience-step/profile-experience-step.component.scss
index fc3d2503b..bbf8e84bb 100644
--- a/projects/social_platform/src/app/ui/pages/profile/edit/components/profile-experience-step/profile-experience-step.component.scss
+++ b/projects/social_platform/src/app/ui/pages/profile/edit/components/profile-experience-step/profile-experience-step.component.scss
@@ -1,7 +1,6 @@
-@use "styles/profile-form";
-
/** @format */
+@use "styles/profile-form";
@use "styles/responsive";
.profile__wrapper--education {
@@ -113,4 +112,6 @@
}
}
-@include profile-form.responsive-layout;
+@media screen and (max-width: 999px) {
+ @include profile-form.responsive-layout;
+}
diff --git a/projects/social_platform/src/app/ui/pages/profile/edit/components/profile-main-step/profile-main-step.component.scss b/projects/social_platform/src/app/ui/pages/profile/edit/components/profile-main-step/profile-main-step.component.scss
index 220ea437a..4163ebdc8 100644
--- a/projects/social_platform/src/app/ui/pages/profile/edit/components/profile-main-step/profile-main-step.component.scss
+++ b/projects/social_platform/src/app/ui/pages/profile/edit/components/profile-main-step/profile-main-step.component.scss
@@ -1,7 +1,6 @@
-@use "styles/profile-form";
-
/** @format */
+@use "styles/profile-form";
@use "styles/responsive";
.profile__wrapper--main {
@@ -114,4 +113,6 @@
margin-bottom: 10px;
}
-@include profile-form.responsive-layout;
+@media screen and (max-width: 999px) {
+ @include profile-form.responsive-layout;
+}
diff --git a/projects/social_platform/src/app/ui/pages/profile/edit/components/profile-skills-step/profile-skills-step.component.scss b/projects/social_platform/src/app/ui/pages/profile/edit/components/profile-skills-step/profile-skills-step.component.scss
index 40a17ae90..bafc5d9dd 100644
--- a/projects/social_platform/src/app/ui/pages/profile/edit/components/profile-skills-step/profile-skills-step.component.scss
+++ b/projects/social_platform/src/app/ui/pages/profile/edit/components/profile-skills-step/profile-skills-step.component.scss
@@ -1,7 +1,6 @@
-@use "styles/profile-form";
-
/** @format */
+@use "styles/profile-form";
@use "styles/responsive";
:host,
@@ -129,4 +128,6 @@ fieldset {
}
}
-@include profile-form.responsive-layout;
+@media screen and (max-width: 999px) {
+ @include profile-form.responsive-layout;
+}
diff --git a/projects/social_platform/src/app/ui/pages/profile/edit/edit.component.html b/projects/social_platform/src/app/ui/pages/profile/edit/edit.component.html
index a3e98136b..64fdfabd8 100644
--- a/projects/social_platform/src/app/ui/pages/profile/edit/edit.component.html
+++ b/projects/social_platform/src/app/ui/pages/profile/edit/edit.component.html
@@ -2,10 +2,21 @@
@if (profileForm.get("userType"); as currentType) {
-
+ @if (desktopLayout()) {
+
+
+ редактирование профиля
+
+
+
+ }
+
-
+
diff --git a/projects/social_platform/src/app/ui/pages/profile/edit/edit.component.scss b/projects/social_platform/src/app/ui/pages/profile/edit/edit.component.scss
index 108f39d41..cc72026a6 100644
--- a/projects/social_platform/src/app/ui/pages/profile/edit/edit.component.scss
+++ b/projects/social_platform/src/app/ui/pages/profile/edit/edit.component.scss
@@ -327,10 +327,17 @@
flex-direction: column;
gap: 20px;
align-items: center;
- width: 100%;
- min-width: 0;
- max-width: 100%;
- padding: 0;
+
+ @media screen and (max-width: 999px) {
+ width: 100%;
+ min-width: 0;
+ max-width: 100%;
+ padding: 0;
+ }
+
+ @media screen and (min-width: 1000px) {
+ width: 672px;
+ }
}
&__close {
@@ -416,32 +423,34 @@
}
}
-@include responsive.apply-below-desktop {
- :host {
- display: block;
- min-width: 0;
- }
+@media screen and (max-width: 999px) {
+ @include responsive.apply-below-desktop {
+ :host {
+ display: block;
+ min-width: 0;
+ }
- .profile {
- padding: 16px var(--page-gutter) max(24px, env(safe-area-inset-bottom));
- }
+ .profile {
+ padding: 16px var(--page-gutter) max(24px, env(safe-area-inset-bottom));
+ }
- .profile__top {
- position: static;
- gap: 12px;
- justify-content: space-between;
- padding: 8px var(--page-gutter);
- }
+ .profile__top {
+ position: static;
+ gap: 12px;
+ justify-content: space-between;
+ padding: 8px var(--page-gutter);
+ }
- .profile__left form {
- width: 100%;
- }
+ .profile__left form {
+ width: 100%;
+ }
- .profile__save {
- @include responsive.mobile-actions;
- }
+ .profile__save {
+ @include responsive.mobile-actions;
+ }
- .profile__wrapper--settings {
- min-width: 0;
+ .profile__wrapper--settings {
+ min-width: 0;
+ }
}
}
diff --git a/projects/social_platform/src/app/ui/pages/profile/edit/edit.component.ts b/projects/social_platform/src/app/ui/pages/profile/edit/edit.component.ts
index af9259bc4..63f9fb9b1 100644
--- a/projects/social_platform/src/app/ui/pages/profile/edit/edit.component.ts
+++ b/projects/social_platform/src/app/ui/pages/profile/edit/edit.component.ts
@@ -1,6 +1,11 @@
/** @format */
-import { ButtonDirective, FormLayoutDirective, PageHeaderComponent } from "@uilib";
+import {
+ ButtonDirective,
+ DesktopLayoutService,
+ FormLayoutDirective,
+ PageHeaderComponent,
+} from "@uilib";
/** @format */
import {
@@ -93,6 +98,7 @@ import { ProfileEditAchievementsInfoService } from "@api/profile/facades/edit/pr
changeDetection: ChangeDetectionStrategy.OnPush,
})
export class ProfileEditComponent implements OnInit, AfterViewInit {
+ protected readonly desktopLayout = inject(DesktopLayoutService).desktop;
private readonly profileFormService = inject(ProfileFormService);
private readonly profileEditInfoService = inject(ProfileEditInfoService);
private readonly projectStepService = inject(ProjectStepService);
diff --git a/projects/social_platform/src/app/ui/pages/program/detail/analytics/analytics.component.scss b/projects/social_platform/src/app/ui/pages/program/detail/analytics/analytics.component.scss
index 1e304f650..91cb4e3be 100644
--- a/projects/social_platform/src/app/ui/pages/program/detail/analytics/analytics.component.scss
+++ b/projects/social_platform/src/app/ui/pages/program/detail/analytics/analytics.component.scss
@@ -208,10 +208,18 @@
&__value {
display: block;
margin-top: 6px;
- font-size: var(--ui-font-h1);
- font-weight: 700;
line-height: 1;
color: var(--black);
+
+ @media screen and (max-width: 999px) {
+ font-size: var(--ui-font-h1);
+ font-weight: 700;
+ }
+
+ @media screen and (min-width: 1000px) {
+ font-size: 24px;
+ font-weight: 700;
+ }
}
&--skeleton {
@@ -258,10 +266,18 @@
}
&__section-label {
- font-size: var(--ui-font-body);
- font-weight: 600;
line-height: 18px;
color: var(--black);
+
+ @media screen and (max-width: 999px) {
+ font-size: var(--ui-font-body);
+ font-weight: 600;
+ }
+
+ @media screen and (min-width: 1000px) {
+ font-size: 13px;
+ font-weight: 600;
+ }
}
}
@@ -279,7 +295,6 @@
max-height: 380px;
@include responsive.apply-desktop {
- /* Let the evaluation card size the row; keep the case list scrolling inside it. */
align-self: stretch;
max-height: none;
contain: size;
@@ -341,7 +356,7 @@
}
&__name {
- /* stylelint-disable-next-line value-no-vendor-prefix -- Required for two-line clamp. */
+ /* stylelint-disable-next-line value-no-vendor-prefix */
display: -webkit-box;
min-width: 0;
overflow: hidden;
@@ -363,17 +378,33 @@
}
&__total-value {
- font-size: var(--ui-font-h2);
- font-weight: 700;
line-height: 20px;
+
+ @media screen and (max-width: 999px) {
+ font-size: var(--ui-font-h2);
+ font-weight: 700;
+ }
+
+ @media screen and (min-width: 1000px) {
+ font-size: 17px;
+ font-weight: 700;
+ }
}
&__total-label,
&__meta {
- font-size: var(--ui-font-caption);
- font-weight: 500;
line-height: 16px;
color: var(--dark-grey);
+
+ @media screen and (max-width: 999px) {
+ font-size: var(--ui-font-caption);
+ font-weight: 500;
+ }
+
+ @media screen and (min-width: 1000px) {
+ font-size: 10px;
+ font-weight: 500;
+ }
}
&__bar {
@@ -470,10 +501,18 @@
}
strong {
- font-size: var(--ui-font-h2);
- font-weight: 700;
line-height: 20px;
color: var(--black);
+
+ @media screen and (max-width: 999px) {
+ font-size: var(--ui-font-h2);
+ font-weight: 700;
+ }
+
+ @media screen and (min-width: 1000px) {
+ font-size: 17px;
+ font-weight: 700;
+ }
}
}
@@ -569,8 +608,15 @@
color: var(--dark-grey);
strong {
- font-size: var(--ui-font-body);
color: var(--black);
+
+ @media screen and (max-width: 999px) {
+ font-size: var(--ui-font-body);
+ }
+
+ @media screen and (min-width: 1000px) {
+ font-size: 13px;
+ }
}
.text-body-10 {
@@ -851,8 +897,15 @@
span {
position: absolute;
- font-size: var(--ui-font-caption);
transform: translateX(-50%);
+
+ @media screen and (max-width: 999px) {
+ font-size: var(--ui-font-caption);
+ }
+
+ @media screen and (min-width: 1000px) {
+ font-size: 11px;
+ }
}
}
}
diff --git a/projects/social_platform/src/app/ui/pages/program/detail/analytics/drilldown/analytics-drilldown.component.scss b/projects/social_platform/src/app/ui/pages/program/detail/analytics/drilldown/analytics-drilldown.component.scss
index be07e5b72..b0d3775ba 100644
--- a/projects/social_platform/src/app/ui/pages/program/detail/analytics/drilldown/analytics-drilldown.component.scss
+++ b/projects/social_platform/src/app/ui/pages/program/detail/analytics/drilldown/analytics-drilldown.component.scss
@@ -1,13 +1,20 @@
/** @format */
+
@use "styles/responsive";
-/* Только case-вариант: shared modal задаёт width своим stylesheet после подключения overlay. */
.modal__body.analytics-drilldown-body.analytics-drilldown-body--case {
box-sizing: border-box;
width: min(880px, calc(100% - 24px));
- max-height: calc(var(--visual-viewport-height, 100dvh) - 32px);
padding: 20px;
overflow-y: auto;
+
+ @media screen and (max-width: 999px) {
+ max-height: calc(var(--visual-viewport-height, 100dvh) - 32px);
+ }
+
+ @media screen and (min-width: 1000px) {
+ max-height: calc(100dvh - 32px);
+ }
}
.analytics-case {
@@ -102,7 +109,7 @@
}
th {
- font-size: var(--ui-font-body);
+ font-size: 13px;
}
th:first-child,
@@ -128,16 +135,21 @@
}
}
-/* Overlay лежит вне host: единственное глобальное правило ограничено собственным bodyClass. */
.modal__body.analytics-drilldown-body {
box-sizing: border-box;
width: min(880px, calc(100vw - 24px));
- max-height: calc(var(--visual-viewport-height, 100dvh) - 32px);
padding: 20px;
overflow-y: auto;
+
+ @media screen and (max-width: 999px) {
+ max-height: calc(var(--visual-viewport-height, 100dvh) - 32px);
+ }
+
+ @media screen and (min-width: 1000px) {
+ max-height: calc(100dvh - 32px);
+ }
}
-/* Тот же шаблон используется в backlog: оформление меняется только у трёх списков назначений. */
.modal__body.analytics-drilldown-body.analytics-drilldown-body--assignments {
width: min(980px, calc(100vw - 32px));
padding: 16px;
@@ -151,8 +163,15 @@
margin-bottom: 24px;
h2 {
- font-size: var(--ui-font-h1);
line-height: 30px;
+
+ @media screen and (max-width: 999px) {
+ font-size: var(--ui-font-h1);
+ }
+
+ @media screen and (min-width: 1000px) {
+ font-size: 24px;
+ }
}
}
@@ -446,7 +465,7 @@
}
th {
- font-size: var(--ui-font-body);
+ font-size: 13px;
font-weight: 600;
}
@@ -520,9 +539,17 @@
.analytics-drilldown__action {
padding: 4px 0;
- font-size: var(--ui-font-body);
- font-weight: 500;
line-height: 20px;
+
+ @media screen and (max-width: 999px) {
+ font-size: var(--ui-font-body);
+ font-weight: 500;
+ }
+
+ @media screen and (min-width: 1000px) {
+ font-size: 13px;
+ font-weight: 500;
+ }
}
@include responsive.apply-desktop {
diff --git a/projects/social_platform/src/app/ui/pages/program/detail/list/list.component.scss b/projects/social_platform/src/app/ui/pages/program/detail/list/list.component.scss
index 53f7b4266..f3ab345b7 100644
--- a/projects/social_platform/src/app/ui/pages/program/detail/list/list.component.scss
+++ b/projects/social_platform/src/app/ui/pages/program/detail/list/list.component.scss
@@ -138,9 +138,19 @@
&__tooltip {
position: fixed;
- right: calc((100vw - 1080px) / 2);
bottom: 24px;
z-index: 30;
+
+ @media screen and (max-width: 999px) {
+ right: calc((100vw - 1080px) / 2);
+ }
+
+ @media screen and (min-width: 1000px) {
+ right:
+ calc(
+ (100vw - 1080px) / 2
+ );
+ }
}
}
@@ -265,11 +275,33 @@
flex-direction: column;
align-items: center;
justify-content: center;
- width: 100%;
- min-width: 0;
- max-width: 100%;
+
+ @media screen and (max-width: 999px) {
+ width: 100%;
+ }
+
+ @media screen and (min-width: 1000px) {
+ width: 80%;
+ }
+
+ @media screen and (max-width: 999px) {
+ min-width: 0;
+ }
+
+ @media screen and (max-width: 999px) {
+ max-width: 100%;
+ }
+
max-height: calc(100vh - 40px);
- padding: 0;
+
+ @media screen and (max-width: 999px) {
+ padding: 0;
+ }
+
+ @media screen and (min-width: 1000px) {
+ padding: 0 24px;
+ }
+
overflow-y: auto;
@include responsive.apply-desktop {
@@ -313,39 +345,43 @@
}
}
-@include responsive.apply-mobile {
- .page__list {
- @include responsive.single-column;
- }
+@media screen and (max-width: 999px) {
+ @include responsive.apply-mobile {
+ .page__list {
+ @include responsive.single-column;
+ }
- .page__mobile-filter-row {
- @include responsive.mobile-actions;
- }
+ .page__mobile-filter-row {
+ @include responsive.mobile-actions;
+ }
- .page__tooltip {
- right: var(--page-gutter);
- bottom: max(16px, env(safe-area-inset-bottom));
- }
+ .page__tooltip {
+ right: var(--page-gutter);
+ bottom: max(16px, env(safe-area-inset-bottom));
+ }
- .tooltip__wrapper {
- position: fixed;
- right: var(--page-gutter);
- bottom: 60px;
- left: auto;
- width: calc(100vw - 2 * var(--page-gutter));
+ .tooltip__wrapper {
+ position: fixed;
+ right: var(--page-gutter);
+ bottom: 60px;
+ left: auto;
+ width: calc(100vw - 2 * var(--page-gutter));
+ }
}
}
-@include responsive.apply-below-desktop {
- .filter {
- position: fixed;
- z-index: 300;
- }
+@media screen and (max-width: 999px) {
+ @include responsive.apply-below-desktop {
+ .filter {
+ position: fixed;
+ z-index: 300;
+ }
- .filter__body {
- min-height: 0;
- max-height: calc(var(--visual-viewport-height, 100dvh) - 80px);
- padding-bottom: env(safe-area-inset-bottom, 0);
- overscroll-behavior: contain;
+ .filter__body {
+ min-height: 0;
+ max-height: calc(var(--visual-viewport-height, 100dvh) - 80px);
+ padding-bottom: env(safe-area-inset-bottom, 0);
+ overscroll-behavior: contain;
+ }
}
}
diff --git a/projects/social_platform/src/app/ui/pages/program/detail/list/rating-card/project-rating/components/boolean-criterion/boolean-criterion.component.scss b/projects/social_platform/src/app/ui/pages/program/detail/list/rating-card/project-rating/components/boolean-criterion/boolean-criterion.component.scss
index 500b43267..09137139f 100644
--- a/projects/social_platform/src/app/ui/pages/program/detail/list/rating-card/project-rating/components/boolean-criterion/boolean-criterion.component.scss
+++ b/projects/social_platform/src/app/ui/pages/program/detail/list/rating-card/project-rating/components/boolean-criterion/boolean-criterion.component.scss
@@ -6,11 +6,13 @@
display: block;
}
-@include responsive.apply-mobile {
- .container {
- justify-content: center;
- min-width: 44px;
- min-height: 44px;
+@media screen and (max-width: 999px) {
+ @include responsive.apply-mobile {
+ .container {
+ justify-content: center;
+ min-width: 44px;
+ min-height: 44px;
+ }
}
}
diff --git a/projects/social_platform/src/app/ui/pages/program/detail/list/rating-card/project-rating/components/range-criterion-input/range-criterion-input.component.scss b/projects/social_platform/src/app/ui/pages/program/detail/list/rating-card/project-rating/components/range-criterion-input/range-criterion-input.component.scss
index 8701d4225..9d620ee46 100644
--- a/projects/social_platform/src/app/ui/pages/program/detail/list/rating-card/project-rating/components/range-criterion-input/range-criterion-input.component.scss
+++ b/projects/social_platform/src/app/ui/pages/program/detail/list/rating-card/project-rating/components/range-criterion-input/range-criterion-input.component.scss
@@ -36,27 +36,35 @@
&:focus {
border-color: var(--accent);
- box-shadow: var(--ui-focus-ring);
+
+ @media screen and (max-width: 999px) {
+ box-shadow: var(--ui-focus-ring);
+ }
+
+ @media screen and (min-width: 1000px) {
+ box-shadow: 0 0 6px rgb(109 40 255 / 30%);
+ }
}
}
}
-/* stylelint-disable property-no-vendor-prefix */
input {
&::-webkit-outer-spin-button,
&::-webkit-inner-spin-button {
- -webkit-appearance: none;
+ appearance: none;
}
&[type="number"] {
- -moz-appearance: textfield;
+ appearance: textfield;
}
}
-@include responsive.apply-mobile {
- .field__input {
- width: 44px;
- height: 44px;
- font-size: var(--ui-font-h3);
+@media screen and (max-width: 999px) {
+ @include responsive.apply-mobile {
+ .field__input {
+ width: 44px;
+ height: 44px;
+ font-size: var(--ui-font-h3);
+ }
}
}
diff --git a/projects/social_platform/src/app/ui/pages/program/detail/main/role-widget/program-role-widget.component.scss b/projects/social_platform/src/app/ui/pages/program/detail/main/role-widget/program-role-widget.component.scss
index d2b8e90f8..3861bff23 100644
--- a/projects/social_platform/src/app/ui/pages/program/detail/main/role-widget/program-role-widget.component.scss
+++ b/projects/social_platform/src/app/ui/pages/program/detail/main/role-widget/program-role-widget.component.scss
@@ -13,17 +13,22 @@
grid-template-rows: 18px minmax(0, 1fr) 22px;
row-gap: 5px;
width: 100%;
-
- /* Исходная карточка при 100%: 157 × 140.984375 CSS px (Mont, desktop). */
height: 140.9844px;
padding: 7px 8px;
- font-size: var(--ui-font-caption);
line-height: 13px;
color: var(--black);
background: var(--light-white);
border: 0.5px solid var(--medium-grey-for-outline);
border-radius: var(--rounded-lg);
+ @media screen and (max-width: 999px) {
+ font-size: var(--ui-font-caption);
+ }
+
+ @media screen and (min-width: 1000px) {
+ font-size: 10px;
+ }
+
&__header {
display: flex;
gap: 5px;
@@ -87,9 +92,16 @@
&__stage-state {
height: 12px;
margin-top: 3px;
- font-size: var(--ui-font-caption);
line-height: 12px;
color: var(--grey-for-text);
+
+ @media screen and (max-width: 999px) {
+ font-size: var(--ui-font-caption);
+ }
+
+ @media screen and (min-width: 1000px) {
+ font-size: 10px;
+ }
}
&__steps {
@@ -161,9 +173,16 @@
}
dt {
- font-size: var(--ui-font-caption);
line-height: 12px;
color: var(--grey-for-text);
+
+ @media screen and (max-width: 999px) {
+ font-size: var(--ui-font-caption);
+ }
+
+ @media screen and (min-width: 1000px) {
+ font-size: 10px;
+ }
}
dd {
@@ -214,8 +233,15 @@
align-content: center;
min-height: 28px;
margin-top: 6px;
- font-size: var(--ui-font-caption);
line-height: 12px;
+
+ @media screen and (max-width: 999px) {
+ font-size: var(--ui-font-caption);
+ }
+
+ @media screen and (min-width: 1000px) {
+ font-size: 10px;
+ }
}
&__status-label {
@@ -297,34 +323,36 @@
}
}
-@include responsive.apply-below-desktop {
- :host {
- width: 100%;
- min-width: 0;
- }
-
- .widget {
- grid-template-rows: auto minmax(0, 1fr) auto;
- gap: 12px;
- height: auto;
- min-height: 160px;
- padding: 16px;
- font-size: var(--ui-font-body);
- line-height: 1.5;
- }
-
- .widget__footer a,
- .widget__footer button {
- min-height: 44px;
- font-size: var(--ui-font-body);
- }
-
- .widget__ellipsis {
- overflow-wrap: anywhere;
- white-space: normal;
- }
-
- .widget__badge {
- font-size: var(--ui-font-small);
+@media screen and (max-width: 999px) {
+ @include responsive.apply-below-desktop {
+ :host {
+ width: 100%;
+ min-width: 0;
+ }
+
+ .widget {
+ grid-template-rows: auto minmax(0, 1fr) auto;
+ gap: 12px;
+ height: auto;
+ min-height: 160px;
+ padding: 16px;
+ font-size: var(--ui-font-body);
+ line-height: 1.5;
+ }
+
+ .widget__footer a,
+ .widget__footer button {
+ min-height: 44px;
+ font-size: var(--ui-font-body);
+ }
+
+ .widget__ellipsis {
+ overflow-wrap: anywhere;
+ white-space: normal;
+ }
+
+ .widget__badge {
+ font-size: var(--ui-font-small);
+ }
}
}
diff --git a/projects/social_platform/src/app/ui/pages/program/main/program-card/program-card.component.html b/projects/social_platform/src/app/ui/pages/program/main/program-card/program-card.component.html
index 42654715f..826edca5b 100644
--- a/projects/social_platform/src/app/ui/pages/program/main/program-card/program-card.component.html
+++ b/projects/social_platform/src/app/ui/pages/program/main/program-card/program-card.component.html
@@ -1,44 +1,86 @@
-@if (program()) {
-
-
- {{ program().name }}
+@if (desktopLayout()) {
+ @if (program()) {
+
+
+
-
- {{
- registerDateExpired
- ? "регистрация завершена"
- : program().isUserMember
- ? "ты уже участвуешь!"
- : "Регистрация до " + (program().datetimeRegistrationEnds | date: "dd MMMM")
- }}
-
+
+ {{ program().name }}
-
-
- {{ program().datetimeStarted | date: "dd.MM.yyyy" }}
+
+
+ {{
+ registerDateExpired
+ ? "регистрация завершена"
+ : program().isUserMember
+ ? "ты уже участвуешь!"
+ : "Регистрация до " + (program().datetimeRegistrationEnds | date: "dd MMMM")
+ }}
- -
-
- {{ program().datetimeFinished | date: "dd.MM.yyyy" }}
+
+
+
+ {{ program().datetimeStarted | date: "dd.MM.yyyy" }}
+
+ -
+
+ {{ program().datetimeFinished | date: "dd.MM.yyyy" }}
+
+
+ • для всей России
+
+
+
+ }
+} @else {
+ @if (program()) {
+
+
+ {{ program().name }}
+
+
+
+ {{
+ registerDateExpired
+ ? "регистрация завершена"
+ : program().isUserMember
+ ? "ты уже участвуешь!"
+ : "Регистрация до " + (program().datetimeRegistrationEnds | date: "dd MMMM")
+ }}
-
- • для всей России
+
+
+
+ {{ program().datetimeStarted | date: "dd.MM.yyyy" }} -
+ {{ program().datetimeFinished | date: "dd.MM.yyyy" }}
+
+
+ для всей России
+
-
+ }
}
diff --git a/projects/social_platform/src/app/ui/pages/program/main/program-card/program-card.component.scss b/projects/social_platform/src/app/ui/pages/program/main/program-card/program-card.component.scss
index d9bfd33a4..e66ff0477 100644
--- a/projects/social_platform/src/app/ui/pages/program/main/program-card/program-card.component.scss
+++ b/projects/social_platform/src/app/ui/pages/program/main/program-card/program-card.component.scss
@@ -1,77 +1,145 @@
/** @format */
@use "styles/ui-foundation";
-
-/** @format */
-
@use "styles/responsive";
-.card {
- position: relative;
- display: flex;
- gap: 20px;
- align-items: center;
- max-width: 333px;
+@media screen and (max-width: 999px) {
+ .card {
+ @include ui-foundation.card;
- &__photo {
position: relative;
- z-index: 10;
- flex-shrink: 0;
- width: 123px;
- height: 123px;
- padding: 12px;
- background: var(--white);
- border: 0.5px solid var(--dark-grey);
- border-radius: 50%;
- }
+ display: grid;
+ grid-template-columns: 64px minmax(0, 1fr);
+ gap: 12px;
+ align-items: start;
- &__info {
- @include ui-foundation.card;
+ &__photo {
+ width: 64px;
+ height: 64px;
+ }
- position: relative;
- z-index: 1;
- min-width: 0;
- margin-left: -18%;
- overflow: hidden;
- }
+ &__info {
+ display: grid;
+ gap: 8px;
+ min-width: 0;
+ }
+
+ &__name {
+ /* stylelint-disable-next-line value-no-vendor-prefix */
+ display: -webkit-box;
+ overflow: hidden;
+ font-size: var(--ui-font-body);
+ font-weight: 600;
+ line-height: 20px;
+ color: var(--black);
+ overflow-wrap: anywhere;
+ -webkit-box-orient: vertical;
+ -webkit-line-clamp: 3;
+ }
+
+ &__dates {
+ display: grid;
+ gap: 4px;
+ }
+
+ &__description {
+ font-size: var(--ui-font-small);
+ line-height: 18px;
+ color: var(--dark-grey);
+ }
- &__name {
- overflow: hidden;
- color: var(--black);
- text-overflow: ellipsis;
- white-space: nowrap;
+ &__registration {
+ justify-self: start;
+ max-width: 100%;
+ padding: 4px 8px;
+ color: var(--white);
+ overflow-wrap: anywhere;
+ border-radius: var(--rounded-lg);
+
+ &--actual {
+ background-color: var(--accent);
+ }
+
+ &--ended {
+ background-color: var(--red) !important;
+ }
+
+ &--participating {
+ background-color: var(--green);
+ }
+ }
}
+}
- &__dates {
+@media screen and (min-width: 1000px) {
+ .card {
+ position: relative;
display: flex;
- gap: 2px;
- white-space: nowrap;
- }
+ gap: 20px;
+ align-items: center;
+ max-width: 333px;
- &__description {
- color: var(--dark-grey);
- }
+ &__photo {
+ position: relative;
+ z-index: 10;
+ flex-shrink: 0;
+ width: 123px;
+ height: 123px;
+ padding: 12px;
+ background: var(--white);
+ border: 0.5px solid var(--dark-grey);
+ border-radius: 50%;
+ }
+
+ &__info {
+ position: relative;
+ z-index: 1;
+ min-width: 0;
+ padding: 22px;
+ margin-left: -18%;
+ overflow: hidden;
+ border: 0.5px solid var(--dark-grey);
+ border-radius: var(--rounded-lg);
+ }
+
+ &__name {
+ overflow: hidden;
+ color: var(--black);
+ text-overflow: ellipsis;
+ white-space: nowrap;
+ }
- &__registration {
- padding: 2px 2px 2px 25px;
- margin-top: 2px;
- margin-bottom: 6px;
- overflow: hidden;
- color: var(--white);
- text-overflow: ellipsis;
- white-space: nowrap;
- border-radius: var(--rounded-lg);
-
- &--actual {
- background-color: var(--accent);
+ &__dates {
+ display: flex;
+ gap: 2px;
+ white-space: nowrap;
}
- &--ended {
- background-color: var(--red) !important;
+ &__description {
+ color: var(--dark-grey);
}
- &--participating {
- background-color: var(--green);
+ &__registration {
+ padding: 2px 2px 2px 25px;
+ margin-top: 2px;
+ margin-bottom: 6px;
+ overflow: hidden;
+ color: var(--white);
+ text-overflow: ellipsis;
+ white-space: nowrap;
+ border-radius: var(--rounded-lg);
+
+ &--actual {
+ background-color: var(--accent);
+ }
+
+ &--ended {
+ background-color: var(--red) !important;
+ }
+
+ &--participating {
+ background-color: var(--green);
+ }
}
}
}
diff --git a/projects/social_platform/src/app/ui/pages/program/main/program-card/program-card.component.ts b/projects/social_platform/src/app/ui/pages/program/main/program-card/program-card.component.ts
index a92fc222e..6034b1ab9 100644
--- a/projects/social_platform/src/app/ui/pages/program/main/program-card/program-card.component.ts
+++ b/projects/social_platform/src/app/ui/pages/program/main/program-card/program-card.component.ts
@@ -1,9 +1,12 @@
/** @format */
+import { DesktopLayoutService } from "@uilib";
+/** @format */
+
import { CardDirective } from "@uilib";
/** @format */
-import { ChangeDetectionStrategy, Component, input, Input, OnInit } from "@angular/core";
+import { ChangeDetectionStrategy, Component, inject, input, Input, OnInit } from "@angular/core";
import { AvatarComponent } from "@ui/primitives/avatar/avatar.component";
import { DatePipe, NgClass } from "@angular/common";
import { Program } from "@domain/program/program.model";
@@ -17,6 +20,8 @@ import { Program } from "@domain/program/program.model";
changeDetection: ChangeDetectionStrategy.OnPush,
})
export class ProgramCardComponent implements OnInit {
+ protected readonly desktopLayout = inject(DesktopLayoutService).desktop;
+
readonly program = input.required();
ngOnInit(): void {
diff --git a/projects/social_platform/src/app/ui/pages/projects/bar-new/bar.component.html b/projects/social_platform/src/app/ui/pages/projects/bar-new/bar.component.html
index 12887372a..7b993203c 100644
--- a/projects/social_platform/src/app/ui/pages/projects/bar-new/bar.component.html
+++ b/projects/social_platform/src/app/ui/pages/projects/bar-new/bar.component.html
@@ -1,3 +1,31 @@
-();
readonly stepChange = output();
protected readonly tabs = computed(() =>
diff --git a/projects/social_platform/src/app/ui/pages/projects/edit/components/project-team-step/project-team-step.component.scss b/projects/social_platform/src/app/ui/pages/projects/edit/components/project-team-step/project-team-step.component.scss
index c4dffdf56..92bd6bb77 100644
--- a/projects/social_platform/src/app/ui/pages/projects/edit/components/project-team-step/project-team-step.component.scss
+++ b/projects/social_platform/src/app/ui/pages/projects/edit/components/project-team-step/project-team-step.component.scss
@@ -55,6 +55,12 @@
}
::ng-deep .invite__submit button {
+ @media screen and (min-width: 1000px) {
+ min-height: 25px;
+ padding: 4px 12px;
+ line-height: 16px;
+ }
+
&:focus-visible {
outline: 2px solid var(--accent);
outline-offset: 3px;
@@ -139,6 +145,11 @@
}
.team ::ng-deep .invite__submit button {
+ @media screen and (min-width: 1000px) {
+ min-height: 44px;
+ max-height: none;
+ }
+
i {
position: absolute;
left: 12px;
diff --git a/projects/social_platform/src/app/ui/pages/projects/edit/components/project-vacancy-step/project-vacancy-step.component.scss b/projects/social_platform/src/app/ui/pages/projects/edit/components/project-vacancy-step/project-vacancy-step.component.scss
index 83d16bdc2..2b2a5f909 100644
--- a/projects/social_platform/src/app/ui/pages/projects/edit/components/project-vacancy-step/project-vacancy-step.component.scss
+++ b/projects/social_platform/src/app/ui/pages/projects/edit/components/project-vacancy-step/project-vacancy-step.component.scss
@@ -114,9 +114,16 @@
&__error {
margin-top: 12px;
- font-size: var(--ui-font-body);
line-height: 20px;
color: var(--black);
+
+ @media screen and (max-width: 999px) {
+ font-size: var(--ui-font-body);
+ }
+
+ @media screen and (min-width: 1000px) {
+ font-size: 13px;
+ }
}
&__city {
diff --git a/projects/social_platform/src/app/ui/pages/projects/edit/edit.component.html b/projects/social_platform/src/app/ui/pages/projects/edit/edit.component.html
index f544b22d8..86056f6a0 100644
--- a/projects/social_platform/src/app/ui/pages/projects/edit/edit.component.html
+++ b/projects/social_platform/src/app/ui/pages/projects/edit/edit.component.html
@@ -146,7 +146,7 @@ 📢 внимание!
[open]="isSendDescisionLate()"
(openChange)="isSendDescisionLate.set(!isSendDescisionLate())"
>
-
+
Подача проектов завершена!
@@ -159,7 +159,7 @@ 📢 внимание!
@defer (when fromProgramOpen()) {
-
+
Начнем создавать историю!
diff --git a/projects/social_platform/src/app/ui/pages/projects/edit/edit.component.scss b/projects/social_platform/src/app/ui/pages/projects/edit/edit.component.scss
index 0f1db861c..2dd6d64f4 100644
--- a/projects/social_platform/src/app/ui/pages/projects/edit/edit.component.scss
+++ b/projects/social_platform/src/app/ui/pages/projects/edit/edit.component.scss
@@ -144,6 +144,12 @@
}
.cancel {
+ @media screen and (min-width: 1000px) {
+ &.cancel--fixed-width {
+ width: 605px;
+ }
+ }
+
display: flex;
flex-direction: column;
align-items: center;
diff --git a/projects/social_platform/src/app/ui/pages/projects/list/list.component.scss b/projects/social_platform/src/app/ui/pages/projects/list/list.component.scss
index 88722d855..5ab519922 100644
--- a/projects/social_platform/src/app/ui/pages/projects/list/list.component.scss
+++ b/projects/social_platform/src/app/ui/pages/projects/list/list.component.scss
@@ -176,10 +176,9 @@
}
}
-@include responsive.apply-mobile {
+@include responsive.apply-below-desktop {
.page__list {
- @include responsive.single-column;
-
+ grid-template-columns: repeat(auto-fill, minmax(0, var(--ui-mobile-entity-card-width)));
row-gap: 48px;
}
diff --git a/projects/social_platform/src/app/ui/pages/projects/project-activity-card/project-activity-card.component.scss b/projects/social_platform/src/app/ui/pages/projects/project-activity-card/project-activity-card.component.scss
index 1c3e7c1c7..2c03035ef 100644
--- a/projects/social_platform/src/app/ui/pages/projects/project-activity-card/project-activity-card.component.scss
+++ b/projects/social_platform/src/app/ui/pages/projects/project-activity-card/project-activity-card.component.scss
@@ -1,5 +1,7 @@
/** @format */
+@use "styles/responsive";
+
:host {
display: block;
width: 156px;
@@ -48,10 +50,18 @@
gap: 4px;
align-items: center;
min-width: 0;
- font-size: var(--ui-font-caption);
- font-weight: 400;
line-height: 14px;
color: var(--black);
+
+ @media screen and (max-width: 999px) {
+ font-size: var(--ui-font-caption);
+ font-weight: 400;
+ }
+
+ @media screen and (min-width: 1000px) {
+ font-size: 11px;
+ font-weight: 400;
+ }
}
&__icon {
@@ -67,8 +77,6 @@
&__value {
flex: 0 0 auto;
-
- /* Очень большие числа не вытесняют подпись; полное значение остаётся в DOM и title. */
max-width: 45px;
margin: 0 0 0 4px;
overflow: hidden;
@@ -82,3 +90,30 @@
white-space: nowrap;
}
}
+
+@media screen and (max-width: 999px) {
+ @include responsive.apply-below-desktop {
+ :host {
+ width: 100%;
+ height: auto;
+ }
+
+ .activity {
+ padding: 16px;
+ }
+
+ .activity__title {
+ color: var(--ui-text);
+ }
+
+ .activity__metrics {
+ grid-template-rows: auto;
+ grid-template-columns: repeat(2, minmax(0, 1fr));
+ gap: 12px 16px;
+ }
+
+ .activity__metric + .activity__metric {
+ border-top: 0;
+ }
+ }
+}
diff --git a/projects/social_platform/src/app/ui/pages/projects/projects-activity-placement.spec.ts b/projects/social_platform/src/app/ui/pages/projects/projects-activity-placement.spec.ts
index a2ede1797..eb7c116ea 100644
--- a/projects/social_platform/src/app/ui/pages/projects/projects-activity-placement.spec.ts
+++ b/projects/social_platform/src/app/ui/pages/projects/projects-activity-placement.spec.ts
@@ -2,6 +2,14 @@
import { readFileSync } from "node:fs";
import { join } from "node:path";
+import {
+ parseTemplate,
+ TmplAstElement,
+ TmplAstForLoopBlock,
+ TmplAstIfBlock,
+ TmplAstNode,
+ TmplAstTemplate,
+} from "@angular/compiler";
describe("ProjectsComponent: размещение проектной активности", () => {
const template = readFileSync(
@@ -12,17 +20,35 @@ describe("ProjectsComponent: размещение проектной актив
"utf8",
);
+ const activityConditions: string[][] = [];
+ const walk = (nodes: TmplAstNode[], conditions: string[] = []) => {
+ for (const node of nodes) {
+ if (node instanceof TmplAstIfBlock) {
+ for (const branch of node.branches) {
+ walk(branch.children, [...conditions, branch.expression?.source || "else"]);
+ }
+ } else if (node instanceof TmplAstElement || node instanceof TmplAstTemplate) {
+ if (node instanceof TmplAstElement && node.name === "app-project-activity-card") {
+ activityConditions.push(conditions);
+ }
+ walk(node.children, conditions);
+ } else if (node instanceof TmplAstForLoopBlock) {
+ walk(node.children, conditions);
+ }
+ }
+ };
+ walk(parseTemplate(template, "projects.component.html").nodes);
+
it("показывает блок только для dashboard и my", () => {
- expect(template).toMatch(
- /@if \(isMy\(\) \|\| isDashboard\(\)\) \{\s* {
- const conditionalBlock = new RegExp(
- `@if \\(${condition.replace(/[()]/g, "\\$&")}\\) \\{[\\s\\S]*?
-
-
-
+
+
+
+
+
+ }
@if (isDashboard()) {
@@ -80,7 +98,13 @@
}
} @else {
- пока нет приглашений
+
+ } @else {
+ >("filterBody");
private readonly projectsInfoService = inject(ProjectsInfoService);
diff --git a/projects/social_platform/src/app/ui/pages/vacancies/detail/info/components/vacancies-right-side/vacancies-right-side.component.scss b/projects/social_platform/src/app/ui/pages/vacancies/detail/info/components/vacancies-right-side/vacancies-right-side.component.scss
index 03e6e05c6..ec8524c92 100644
--- a/projects/social_platform/src/app/ui/pages/vacancies/detail/info/components/vacancies-right-side/vacancies-right-side.component.scss
+++ b/projects/social_platform/src/app/ui/pages/vacancies/detail/info/components/vacancies-right-side/vacancies-right-side.component.scss
@@ -62,7 +62,14 @@
}
a {
- font-size: var(--ui-font-body);
+ @media screen and (max-width: 999px) {
+ font-size: var(--ui-font-body);
+ }
+
+ @media screen and (min-width: 1000px) {
+ font-size: 13px;
+ }
+
line-height: 20px;
@include vacancy-ui.link;
diff --git a/projects/social_platform/src/app/ui/pages/vacancies/detail/info/components/vacancy-responses/vacancy-responses.component.scss b/projects/social_platform/src/app/ui/pages/vacancies/detail/info/components/vacancy-responses/vacancy-responses.component.scss
index e2064dedb..1e83f4ce9 100644
--- a/projects/social_platform/src/app/ui/pages/vacancies/detail/info/components/vacancy-responses/vacancy-responses.component.scss
+++ b/projects/social_platform/src/app/ui/pages/vacancies/detail/info/components/vacancy-responses/vacancy-responses.component.scss
@@ -132,18 +132,33 @@
&__label {
margin-bottom: 8px;
- font-size: var(--ui-font-body);
- font-weight: 600;
line-height: 20px;
color: var(--accent-dark);
+
+ @media screen and (max-width: 999px) {
+ font-size: var(--ui-font-body);
+ font-weight: 600;
+ }
+
+ @media screen and (min-width: 1000px) {
+ font-size: 13px;
+ font-weight: 600;
+ }
}
&__file-row {
display: flex;
flex-wrap: wrap;
gap: 6px 10px;
- font-size: var(--ui-font-body);
line-height: 20px;
+
+ @media screen and (max-width: 999px) {
+ font-size: var(--ui-font-body);
+ }
+
+ @media screen and (min-width: 1000px) {
+ font-size: 13px;
+ }
}
&__file {
diff --git a/projects/social_platform/src/app/ui/pages/vacancies/detail/vacancies-detail.component.scss b/projects/social_platform/src/app/ui/pages/vacancies/detail/vacancies-detail.component.scss
index 7ddd5f975..ffc9cb05f 100644
--- a/projects/social_platform/src/app/ui/pages/vacancies/detail/vacancies-detail.component.scss
+++ b/projects/social_platform/src/app/ui/pages/vacancies/detail/vacancies-detail.component.scss
@@ -60,7 +60,15 @@
&__specialization {
margin-top: 12px;
- font-size: var(--ui-font-body);
+
+ @media screen and (max-width: 999px) {
+ font-size: var(--ui-font-body);
+ }
+
+ @media screen and (min-width: 1000px) {
+ font-size: 13px;
+ }
+
line-height: 20px;
@include vacancy-ui.secondary;
diff --git a/projects/social_platform/src/app/ui/pages/vacancies/list/list.component.html b/projects/social_platform/src/app/ui/pages/vacancies/list/list.component.html
index 4dd2495fd..2eb39c448 100644
--- a/projects/social_platform/src/app/ui/pages/vacancies/list/list.component.html
+++ b/projects/social_platform/src/app/ui/pages/vacancies/list/list.component.html
@@ -12,28 +12,49 @@
}
@if (hasNoResults()) {
-
- Сбросить фильтры
+ Вакансии не найдены
+ Попробуйте изменить запрос или сбросить фильтры.
+ Сбросить фильтры
+
+ } @else {
+
-
+ Сбросить фильтры
+
+ }
}
}
@if (type() === "my") {
@for (response of responsesList(); track response.id) {
- Перейти к вакансиям
+
+ У вас пока нет откликов
+ Найдите подходящую вакансию и расскажите проекту о себе.
+ Перейти к вакансиям
+
+ } @else {
+
-
+ Перейти к вакансиям
+
+ }
}
}
diff --git a/projects/social_platform/src/app/ui/pages/vacancies/list/list.component.ts b/projects/social_platform/src/app/ui/pages/vacancies/list/list.component.ts
index c7a3b94af..e46219a3d 100644
--- a/projects/social_platform/src/app/ui/pages/vacancies/list/list.component.ts
+++ b/projects/social_platform/src/app/ui/pages/vacancies/list/list.component.ts
@@ -1,6 +1,6 @@
/** @format */
-import { StateComponent } from "@uilib";
+import { DesktopLayoutService, StateComponent } from "@uilib";
/** @format */
// list.component.ts
@@ -35,6 +35,7 @@ import { AppRoutes } from "@api/paths/app-routes";
providers: [VacancyInfoService, VacancyUIInfoService],
})
export class VacanciesListComponent {
+ protected readonly desktopLayout = inject(DesktopLayoutService).desktop;
private readonly vacancyInfoService = inject(VacancyInfoService);
private readonly vacancyUIInfoService = inject(VacancyUIInfoService);
diff --git a/projects/social_platform/src/app/ui/pages/vacancies/list/response-card/response-card.component.scss b/projects/social_platform/src/app/ui/pages/vacancies/list/response-card/response-card.component.scss
index 44ad04fa5..479244524 100644
--- a/projects/social_platform/src/app/ui/pages/vacancies/list/response-card/response-card.component.scss
+++ b/projects/social_platform/src/app/ui/pages/vacancies/list/response-card/response-card.component.scss
@@ -42,7 +42,14 @@
}
&__project {
- font-size: var(--ui-font-body);
+ @media screen and (max-width: 999px) {
+ font-size: var(--ui-font-body);
+ }
+
+ @media screen and (min-width: 1000px) {
+ font-size: 13px;
+ }
+
line-height: 20px;
@include vacancy-ui.link;
@@ -63,10 +70,18 @@
h3 {
margin-bottom: 10px;
- font-size: var(--ui-font-body);
- font-weight: 600;
line-height: 20px;
color: var(--accent-dark);
+
+ @media screen and (max-width: 999px) {
+ font-size: var(--ui-font-body);
+ font-weight: 600;
+ }
+
+ @media screen and (min-width: 1000px) {
+ font-size: 13px;
+ font-weight: 600;
+ }
}
}
@@ -76,10 +91,17 @@
gap: 6px 12px;
padding-top: 16px;
margin-top: 16px;
- font-size: var(--ui-font-body);
line-height: 20px;
border-top: 1px solid var(--medium-grey-for-outline);
+ @media screen and (max-width: 999px) {
+ font-size: var(--ui-font-body);
+ }
+
+ @media screen and (min-width: 1000px) {
+ font-size: 13px;
+ }
+
span {
@include vacancy-ui.secondary;
}
diff --git a/projects/social_platform/src/app/ui/primitives/autocomplete-input/autocomplete-input.component.scss b/projects/social_platform/src/app/ui/primitives/autocomplete-input/autocomplete-input.component.scss
index 158add79f..7e14134a4 100644
--- a/projects/social_platform/src/app/ui/primitives/autocomplete-input/autocomplete-input.component.scss
+++ b/projects/social_platform/src/app/ui/primitives/autocomplete-input/autocomplete-input.component.scss
@@ -1,217 +1,367 @@
/** @format */
@use "styles/ui-foundation";
-
-/** @format */
-
@use "styles/responsive";
@use "styles/typography";
-.field {
- position: relative;
- width: 100%;
-
- &__input-wrapper {
- z-index: 3;
- width: 100%;
- overflow: hidden;
- }
-
- &__input {
+@media screen and (max-width: 999px) {
+ .field {
+ position: relative;
width: 100%;
- padding: 12px;
- &::placeholder {
- color: var(--dark-grey);
+ &__input-wrapper {
+ z-index: 3;
+ width: 100%;
+ overflow: hidden;
}
- &--error {
- border-color: var(--red);
+ &__input {
+ width: 100%;
+ padding: 12px;
+
+ &::placeholder {
+ color: var(--dark-grey);
+ }
+
+ &--error {
+ border-color: var(--red);
+ }
+
+ &:focus {
+ border-color: var(--accent);
+ box-shadow: var(--ui-focus-ring);
+ }
+
+ &--no-icon {
+ padding-right: 45px;
+ }
+
+ @include ui-foundation.control;
}
- &:focus {
- border-color: var(--accent);
- box-shadow: var(--ui-focus-ring);
+ &__input-slim {
+ width: 100%;
+ padding: 6px 30px 6px 10px;
+ font-size: var(--ui-font-small);
+ background: transparent;
+ border: none;
+ border-bottom: 1px solid var(--grey-button);
+ outline: none;
+
+ &:focus {
+ border-color: var(--accent);
+
+ + &_arrow {
+ color: var(--accent);
+
+ i {
+ transform: rotate(0);
+ }
+ }
+ }
+
+ @include ui-foundation.control;
}
- &--no-icon {
- padding-right: 45px;
+ &__dropdown {
+ position: relative;
+ right: 0;
+ left: 0;
+ z-index: 4;
+ background-color: transparent;
+ box-shadow: 5px 5px 25px 0 var(--gray);
+ transform-origin: center top;
+
+ &--options,
+ &--no-results {
+ max-height: 300px;
+ max-height: min(300px, calc(var(--visual-viewport-height, 100dvh) - 24px));
+ padding: 10px;
+ overflow-y: auto;
+ overscroll-behavior: contain;
+ background-color: var(--white);
+ scrollbar-width: thin;
+ }
}
- @include ui-foundation.control;
- }
+ &__option {
+ padding: 7px;
+ color: var(--dark-grey);
+ cursor: pointer;
+ border-radius: var(--rounded-lg);
+ transition: background-color 0.2s;
- &__input-slim {
- width: 100%;
- padding: 6px 30px 6px 10px;
- font-size: var(--ui-font-small);
- background: transparent;
- border: none;
- border-bottom: 1px solid var(--grey-button);
- outline: none;
+ &:hover {
+ background-color: var(--light-gray);
+ }
- &:focus {
- border-color: var(--accent);
+ @include typography.body-12;
+
+ &-slim {
+ padding: 3px;
+ }
+ }
- + &_arrow {
- color: var(--accent);
+ &__chip {
+ position: absolute;
+ top: 50%;
+ left: 10px;
+ z-index: 4;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ max-width: 100%;
+ padding: 5px 10px;
+ color: var(--white);
+ background-color: var(--accent);
+ border-radius: var(--rounded-md);
+ transform: translateY(-50%);
+
+ span {
+ display: inline-block;
+ overflow: hidden;
+ text-overflow: ellipsis;
+ white-space: nowrap;
+ }
- i {
- transform: rotate(0);
- }
+ i {
+ flex-shrink: 0;
+ margin-left: 10px;
+ cursor: pointer;
}
}
- @include ui-foundation.control;
- }
+ &__icons {
+ position: absolute;
+ top: 50%;
+ right: 15px;
+ z-index: 2;
+ display: flex;
+ align-items: center;
+ cursor: pointer;
+ opacity: 1;
+ transform: translateY(-50%);
- &__dropdown {
- position: relative;
- right: 0;
- left: 0;
- z-index: 4;
- background-color: transparent;
- box-shadow: 5px 5px 25px 0 var(--gray);
- transform-origin: center top;
-
- &--options,
- &--no-results {
- max-height: 300px;
- max-height: min(300px, calc(var(--visual-viewport-height, 100dvh) - 24px));
- padding: 10px;
- overflow-y: auto;
- overscroll-behavior: contain;
- background-color: var(--white);
- scrollbar-width: thin;
+ &:hover {
+ opacity: 0.6;
+ }
+ }
+
+ &__loading-icon {
+ margin-right: 5px;
}
}
- &__option {
- padding: 7px;
- color: var(--dark-grey);
- cursor: pointer;
- border-radius: var(--rounded-lg);
- transition: background-color 0.2s;
+ :host {
+ display: block;
+ min-width: 0;
+ max-width: 100%;
+ }
+
+ .field,
+ .search,
+ .search__input {
+ min-width: 0;
+ max-width: 100%;
+ }
+
+ @include responsive.apply-mobile {
+ .field__input,
+ .field__input-slim,
+ .search__input input {
+ min-width: 0;
+ max-width: 100%;
+ min-height: 44px;
+ font-size: var(--ui-font-h3);
+ }
- &:hover {
- background-color: var(--light-gray);
+ .field--small,
+ .field__input--small {
+ min-width: 0;
}
- @include typography.body-12;
+ .field__input--with-tooltip {
+ padding-right: 44px;
+ }
- &-slim {
- padding: 3px;
+ .field__option {
+ min-height: 44px;
+ overflow-wrap: anywhere;
}
- }
- &__chip {
- position: absolute;
- top: 50%;
- left: 10px;
- z-index: 4;
- display: flex;
- align-items: center;
- justify-content: center;
- max-width: 100%;
- padding: 5px 10px;
- color: var(--white);
- background-color: var(--accent);
- border-radius: var(--rounded-md);
- transform: translateY(-50%);
-
- span {
- display: inline-block;
- overflow: hidden;
- text-overflow: ellipsis;
- white-space: nowrap;
+ .field__chip {
+ max-width: calc(100% - 44px);
}
- i {
- flex-shrink: 0;
- margin-left: 10px;
- cursor: pointer;
+ .field__chip span {
+ overflow-wrap: anywhere;
+ white-space: normal;
}
- }
- &__icons {
- position: absolute;
- top: 50%;
- right: 15px;
- z-index: 2;
- display: flex;
- align-items: center;
- cursor: pointer;
- opacity: 1;
- transform: translateY(-50%);
+ .field__calendar-button {
+ right: 4px;
+ width: 44px;
+ height: 44px;
+ }
- &:hover {
- opacity: 0.6;
+ .field__input[type="date"] {
+ padding-right: 48px;
}
}
- &__loading-icon {
- margin-right: 5px;
+ .field__input,
+ .field__input-slim {
+ padding-right: 44px;
}
}
-:host {
- display: block;
- min-width: 0;
- max-width: 100%;
-}
+@media screen and (min-width: 1000px) {
+ .field {
+ position: relative;
+ width: 100%;
-.field,
-.search,
-.search__input {
- min-width: 0;
- max-width: 100%;
-}
+ &__input-wrapper {
+ z-index: 3;
+ width: 100%;
+ overflow: hidden;
+ }
-@include responsive.apply-mobile {
- .field__input,
- .field__input-slim,
- .search__input input {
- min-width: 0;
- max-width: 100%;
- min-height: 44px;
- font-size: var(--ui-font-h3);
- }
+ &__input {
+ width: 100%;
+ padding: 12px;
+ color: var(--black);
+ background-color: var(--white);
+ border: 0.5px solid var(--gray);
+ border-radius: var(--rounded-xxl);
+ outline: none;
+ transition: all 0.2s;
- .field--small,
- .field__input--small {
- min-width: 0;
- }
+ &::placeholder {
+ color: var(--dark-grey);
+ }
- .field__input--with-tooltip {
- padding-right: 44px;
- }
+ &--error {
+ border-color: var(--red);
+ }
- .field__option {
- min-height: 44px;
- overflow-wrap: anywhere;
- }
+ &:focus {
+ border-color: var(--accent);
+ box-shadow: 0 0 6px rgb(109 40 255 / 30%);
+ }
- .field__chip {
- max-width: calc(100% - 44px);
- }
+ &--no-icon {
+ padding-right: 45px;
+ }
- .field__chip span {
- overflow-wrap: anywhere;
- white-space: normal;
- }
+ @include typography.body-12;
+ }
- .field__calendar-button {
- right: 4px;
- width: 44px;
- height: 44px;
- }
+ &__input-slim {
+ width: 100%;
+ padding: 6px 30px 6px 10px;
+ font-size: 12px;
+ background: transparent;
+ border: none;
+ border-bottom: 1px solid var(--grey-button);
+ outline: none;
- .field__input[type="date"] {
- padding-right: 48px;
- }
-}
+ &:focus {
+ border-color: var(--accent);
-.field__input,
-.field__input-slim {
- padding-right: 44px;
+ +&_arrow {
+ color: var(--accent);
+
+ i {
+ transform: rotate(0);
+ }
+ }
+ }
+ }
+
+ &__dropdown {
+ position: absolute;
+ right: 0;
+ left: 0;
+ z-index: 4;
+ background-color: transparent;
+ box-shadow: 5px 5px 25px 0 var(--gray);
+ transform-origin: center top;
+
+ &--options,
+ &--no-results {
+ scrollbar-width: thin;
+ max-height: 300px;
+ padding: 10px;
+ overflow-y: auto;
+ background-color: var(--white);
+ }
+ }
+
+ &__option {
+ padding: 7px;
+ color: var(--dark-grey);
+ cursor: pointer;
+ border-radius: var(--rounded-lg);
+ transition: background-color 0.2s;
+
+ &:hover {
+ background-color: var(--light-gray);
+ }
+
+ @include typography.body-12;
+
+ &-slim {
+ padding: 3px;
+ }
+ }
+
+ &__chip {
+ position: absolute;
+ top: 50%;
+ left: 10px;
+ z-index: 4;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ max-width: 100%;
+ padding: 5px 10px;
+ color: var(--white);
+ background-color: var(--accent);
+ border-radius: var(--rounded-md);
+ transform: translateY(-50%);
+
+ span {
+ display: inline-block;
+ overflow: hidden;
+ text-overflow: ellipsis;
+ white-space: nowrap;
+ }
+
+ i {
+ flex-shrink: 0;
+ margin-left: 10px;
+ cursor: pointer;
+ }
+ }
+
+ &__icons {
+ position: absolute;
+ top: 50%;
+ right: 15px;
+ z-index: 2;
+ display: flex;
+ align-items: center;
+ cursor: pointer;
+ opacity: 1;
+ transform: translateY(-50%);
+
+ &:hover {
+ opacity: 0.6;
+ }
+ }
+
+ &__loading-icon {
+ margin-right: 5px;
+ }
+ }
}
diff --git a/projects/social_platform/src/app/ui/primitives/avatar/avatar.component.html b/projects/social_platform/src/app/ui/primitives/avatar/avatar.component.html
new file mode 100644
index 000000000..803a1e35e
--- /dev/null
+++ b/projects/social_platform/src/app/ui/primitives/avatar/avatar.component.html
@@ -0,0 +1,71 @@
+
+@if (desktopLayout()) {
+
+
+ @if (progress()) {
+
+ }
+
+ ![avatar]()
+
+ @if (isOnline()) {
+
+ }
+
+
+} @else {
+
+
+ @if (progress()) {
+
+ }
+
+ ![avatar]()
+
+ @if (isOnline()) {
+
+ }
+
+
+}
diff --git a/projects/social_platform/src/app/ui/primitives/avatar/avatar.component.scss b/projects/social_platform/src/app/ui/primitives/avatar/avatar.component.scss
new file mode 100644
index 000000000..9e1c9b40a
--- /dev/null
+++ b/projects/social_platform/src/app/ui/primitives/avatar/avatar.component.scss
@@ -0,0 +1,56 @@
+/** @format */
+@use "../../../../../../ui/src/lib/components/primitives/avatar/avatar.component.scss";
+
+@media screen and (min-width: 1000px) {
+ .avatar {
+ position: relative;
+
+ &__progress {
+ position: absolute;
+ top: 0;
+ left: 0;
+ z-index: 3;
+ width: 100%;
+ height: 100%;
+ background:
+ conic-gradient(
+ var(--progress-color) 0 var(--progress),
+ transparent var(--progress) 100%
+ );
+ border-radius: 50%;
+ mask:
+ radial-gradient(
+ circle,
+ transparent calc(50% - var(--progress-width)),
+ white calc(50% - var(--progress-width))
+ );
+ }
+
+ img {
+ position: relative;
+ z-index: 1;
+ border-radius: 50%;
+ object-fit: cover;
+ object-position: center;
+ }
+
+ &__online {
+ position: absolute;
+ right: 0;
+ bottom: -1.5px;
+ z-index: 3;
+ width: 16px;
+ height: 16px;
+ background-color: var(--green);
+ border: 3px solid var(--white);
+ border-radius: 50%;
+ }
+
+ &--border {
+ img {
+ border-style: solid;
+ border-width: 0.5px;
+ }
+ }
+ }
+}
diff --git a/projects/social_platform/src/app/ui/primitives/avatar/avatar.component.ts b/projects/social_platform/src/app/ui/primitives/avatar/avatar.component.ts
index 1e644a4a2..d08067f51 100644
--- a/projects/social_platform/src/app/ui/primitives/avatar/avatar.component.ts
+++ b/projects/social_platform/src/app/ui/primitives/avatar/avatar.component.ts
@@ -1,7 +1,14 @@
-/**
- * Compatibility export. Canonical implementation: @uilib.
- *
- * @format
- */
+/** @format */
+import { ChangeDetectionStrategy, Component, inject } from "@angular/core";
+import { AvatarComponent as CanonicalAvatar, DesktopLayoutService } from "@uilib";
-export { AvatarComponent } from "@uilib";
+/** Legacy desktop presentation with the canonical avatar inputs and mobile view. */
+@Component({
+ selector: "app-avatar",
+ templateUrl: "./avatar.component.html",
+ styleUrl: "./avatar.component.scss",
+ changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class AvatarComponent extends CanonicalAvatar {
+ protected readonly desktopLayout = inject(DesktopLayoutService).desktop;
+}
diff --git a/projects/social_platform/src/app/ui/primitives/bar/bar.component.html b/projects/social_platform/src/app/ui/primitives/bar/bar.component.html
index 122ca075e..4a722ae71 100644
--- a/projects/social_platform/src/app/ui/primitives/bar/bar.component.html
+++ b/projects/social_platform/src/app/ui/primitives/bar/bar.component.html
@@ -1,8 +1,46 @@
-
+@if (desktopLayout()) {
+
+} @else {
+
+}
+
+();
diff --git a/projects/social_platform/src/app/ui/primitives/checkbox/checkbox.component.scss b/projects/social_platform/src/app/ui/primitives/checkbox/checkbox.component.scss
index e6686a225..6bdcd2551 100644
--- a/projects/social_platform/src/app/ui/primitives/checkbox/checkbox.component.scss
+++ b/projects/social_platform/src/app/ui/primitives/checkbox/checkbox.component.scss
@@ -1,13 +1,12 @@
/** @format */
@use "styles/ui-foundation";
-
-/** @format */
-
@use "styles/responsive";
.field {
- @include ui-foundation.choice;
+ @media screen and (max-width: 999px) {
+ @include ui-foundation.choice;
+ }
position: relative;
display: flex;
@@ -28,29 +27,35 @@
color: var(--light-white);
}
- &:focus-visible {
- outline: 2px solid var(--accent-dark);
- outline-offset: 3px;
+ @media screen and (max-width: 999px) {
+ &:focus-visible {
+ outline: 2px solid var(--accent-dark);
+ outline-offset: 3px;
+ }
}
- &:disabled {
- cursor: not-allowed;
- opacity: var(--ui-disabled-opacity);
+ @media screen and (max-width: 999px) {
+ &:disabled {
+ cursor: not-allowed;
+ opacity: var(--ui-disabled-opacity);
+ }
}
}
-@include responsive.apply-mobile {
- :host {
- display: inline-flex;
- align-items: center;
- justify-content: center;
- min-width: 44px;
- min-height: 44px;
- }
-
- .field::before {
- position: absolute;
- inset: -12px;
- content: "";
+@media screen and (max-width: 999px) {
+ @include responsive.apply-mobile {
+ :host {
+ display: inline-flex;
+ align-items: center;
+ justify-content: center;
+ min-width: 44px;
+ min-height: 44px;
+ }
+
+ .field::before {
+ position: absolute;
+ inset: -12px;
+ content: "";
+ }
}
}
diff --git a/projects/social_platform/src/app/ui/primitives/dropdown/dropdown.component.scss b/projects/social_platform/src/app/ui/primitives/dropdown/dropdown.component.scss
index 0030c716b..0664e3524 100644
--- a/projects/social_platform/src/app/ui/primitives/dropdown/dropdown.component.scss
+++ b/projects/social_platform/src/app/ui/primitives/dropdown/dropdown.component.scss
@@ -10,17 +10,27 @@
gap: 5px;
align-items: flex-start;
width: 100%;
- min-width: 0;
- max-width: calc(100vw - 24px);
- max-height: min(300px, calc(var(--visual-viewport-height, 100dvh) - 24px));
- padding: var(--ui-space-sm);
overflow-y: auto;
- overscroll-behavior: contain;
background-color: var(--light-white);
- border: 0.5px solid var(--medium-grey-for-outline);
- border-color: var(--ui-border);
- border-radius: var(--ui-radius-card);
- box-shadow: var(--ui-card-hover-shadow);
+
+ @media screen and (max-width: 999px) {
+ min-width: 0;
+ max-width: calc(100vw - 24px);
+ max-height: min(300px, calc(var(--visual-viewport-height, 100dvh) - 24px));
+ padding: var(--ui-space-sm);
+ overscroll-behavior: contain;
+ border: 0.5px solid var(--medium-grey-for-outline);
+ border-color: var(--ui-border);
+ border-radius: var(--ui-radius-card);
+ box-shadow: var(--ui-card-hover-shadow);
+ }
+
+ @media screen and (min-width: 1000px) {
+ max-height: 200px;
+ padding: 12px;
+ border: 0.5px solid var(--medium-grey-for-outline);
+ border-radius: var(--rounded-lg);
+ }
}
&__option {
@@ -28,14 +38,17 @@
gap: 5px;
align-items: center;
justify-content: space-between;
- width: 100%;
- min-width: 0;
- min-height: var(--ui-control-height);
- padding: 8px 12px;
cursor: pointer;
- border-radius: var(--rounded-lg);
transition: color 0.2s ease-in-out;
+ @media screen and (max-width: 999px) {
+ width: 100%;
+ min-width: 0;
+ min-height: var(--ui-control-height);
+ padding: 8px 12px;
+ border-radius: var(--rounded-lg);
+ }
+
&--add-object {
display: flex;
align-items: center;
@@ -101,13 +114,17 @@
}
}
-.field__option p {
- min-width: 0;
- overflow-wrap: anywhere;
+@media screen and (max-width: 999px) {
+ .field__option p {
+ min-width: 0;
+ overflow-wrap: anywhere;
+ }
}
-@include responsive.apply-mobile {
- .field__option {
- min-height: 44px;
+@media screen and (max-width: 999px) {
+ @include responsive.apply-mobile {
+ .field__option {
+ min-height: 44px;
+ }
}
}
diff --git a/projects/social_platform/src/app/ui/primitives/file-item/file-item.component.scss b/projects/social_platform/src/app/ui/primitives/file-item/file-item.component.scss
index 97ef30871..03db598dd 100644
--- a/projects/social_platform/src/app/ui/primitives/file-item/file-item.component.scss
+++ b/projects/social_platform/src/app/ui/primitives/file-item/file-item.component.scss
@@ -2,8 +2,6 @@
@use "styles/responsive";
-/** @format */
-
.file {
display: flex;
gap: 10px;
@@ -23,9 +21,12 @@
&__left {
display: flex;
- flex: 1;
gap: 5px;
align-items: center;
+
+ @media screen and (max-width: 999px) {
+ flex: 1;
+ }
}
&__meta {
@@ -34,7 +35,6 @@
&__icon {
display: flex;
- flex-shrink: 0;
align-items: center;
align-self: center;
justify-content: center;
@@ -44,6 +44,10 @@
border: 0.5px solid var(--medium-grey-for-outline);
border-radius: var(--rounded-xxl);
+ @media screen and (max-width: 999px) {
+ flex-shrink: 0;
+ }
+
&--delete {
color: var(--red);
cursor: pointer;
@@ -61,23 +65,27 @@
}
}
-.file,
-.file__left {
- min-width: 0;
+@media screen and (max-width: 999px) {
+ .file,
+ .file__left {
+ min-width: 0;
+ }
}
-@include responsive.apply-mobile {
- .file {
- flex-wrap: wrap;
- }
+@media screen and (max-width: 999px) {
+ @include responsive.apply-mobile {
+ .file {
+ flex-wrap: wrap;
+ }
- .file__name {
- overflow-wrap: anywhere;
- white-space: normal;
- }
+ .file__name {
+ overflow-wrap: anywhere;
+ white-space: normal;
+ }
- .file__icon {
- width: 44px;
- height: 44px;
+ .file__icon {
+ width: 44px;
+ height: 44px;
+ }
}
}
diff --git a/projects/social_platform/src/app/ui/primitives/input/input.component.scss b/projects/social_platform/src/app/ui/primitives/input/input.component.scss
index 5ff66aaa9..f0ae4a8cf 100644
--- a/projects/social_platform/src/app/ui/primitives/input/input.component.scss
+++ b/projects/social_platform/src/app/ui/primitives/input/input.component.scss
@@ -1,251 +1,442 @@
/** @format */
@use "styles/ui-foundation";
-
-/** @format */
-
@use "styles/typography";
@use "styles/responsive";
-.field {
- position: relative;
+@media screen and (max-width: 999px) {
+ .field {
+ position: relative;
- &__input {
- &::placeholder {
- color: var(--dark-grey);
- }
+ &__input {
+ &::placeholder {
+ color: var(--dark-grey);
+ }
- &--small {
- max-width: 70px;
- padding: 12px 0;
- text-align: center;
+ &--small {
+ max-width: 70px;
+ padding: 12px 0;
+ text-align: center;
- &--error {
- text-align: start;
+ &--error {
+ text-align: start;
+ }
}
- }
- &--big {
- width: 100%;
- padding: 12px;
- }
+ &--big {
+ width: 100%;
+ padding: 12px;
+ }
- &--with-tooltip {
- padding-right: 60px;
- }
+ &--with-tooltip {
+ padding-right: 60px;
+ }
- &--border {
- border: 0.5px solid var(--gray);
- border-radius: var(--rounded-xxl);
+ &--border {
+ border: 0.5px solid var(--gray);
+ border-radius: var(--rounded-xxl);
- &:focus {
- border-color: var(--accent);
- box-shadow: var(--ui-focus-ring);
+ &:focus {
+ border-color: var(--accent);
+ box-shadow: var(--ui-focus-ring);
+ }
}
- }
- &--error,
- &--overflow {
- border: 0.5px solid var(--red);
+ &--error,
+ &--overflow {
+ border: 0.5px solid var(--red);
- &:focus {
- border-color: var(--red);
- box-shadow: var(--ui-error-ring);
+ &:focus {
+ border-color: var(--red);
+ box-shadow: var(--ui-error-ring);
+ }
}
- }
- @include responsive.apply-desktop {
- @include typography.body-12;
- }
-
- @include ui-foundation.control;
- }
+ @include responsive.apply-desktop {
+ @include typography.body-12;
+ }
- &__input[type="date"]::-webkit-inner-spin-button,
- &__input[type="date"]::-webkit-calendar-picker-indicator {
- display: none;
- appearance: none;
- }
+ @include ui-foundation.control;
+ }
- &__input[type="radio"] {
- position: relative;
- width: 10px;
- height: 10px;
- padding: 4px;
- cursor: pointer;
- border: 0.5px solid var(--dark-grey);
- border-radius: 50%;
- transition:
- border-color 0.2s,
- background-color 0.2s;
- appearance: none;
-
- &:hover::after {
- position: absolute;
- top: 50%;
- left: 50%;
- width: 4px;
- height: 4px;
- content: "";
- background-color: var(--accent);
- border-radius: 50%;
- transform: translate(-50%, -50%);
+ &__input[type="date"]::-webkit-inner-spin-button,
+ &__input[type="date"]::-webkit-calendar-picker-indicator {
+ display: none;
+ appearance: none;
}
- &:checked {
- z-index: 1;
- background-color: var(--accent);
- border-color: var(--accent);
+ &__input[type="radio"] {
+ position: relative;
+ width: 10px;
+ height: 10px;
+ padding: 4px;
+ cursor: pointer;
+ border: 0.5px solid var(--dark-grey);
+ border-radius: 50%;
+ transition:
+ border-color 0.2s,
+ background-color 0.2s;
+ appearance: none;
- &::after {
+ &:hover::after {
position: absolute;
top: 50%;
left: 50%;
width: 4px;
height: 4px;
content: "";
- background-color: var(--light-gray);
+ background-color: var(--accent);
border-radius: 50%;
transform: translate(-50%, -50%);
}
+
+ &:checked {
+ z-index: 1;
+ background-color: var(--accent);
+ border-color: var(--accent);
+
+ &::after {
+ position: absolute;
+ top: 50%;
+ left: 50%;
+ width: 4px;
+ height: 4px;
+ content: "";
+ background-color: var(--light-gray);
+ border-radius: 50%;
+ transform: translate(-50%, -50%);
+ }
+ }
+ }
+
+ &__error-icon {
+ position: absolute;
+ top: 50%;
+ right: 26px;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ color: var(--red) !important;
+ pointer-events: none;
+ transform: translateY(-50%);
+
+ &--bare {
+ padding: 0;
+ background: transparent;
+ }
}
- }
- &__error-icon {
- position: absolute;
- top: 50%;
- right: 26px;
- display: flex;
- align-items: center;
- justify-content: center;
- color: var(--red) !important;
- pointer-events: none;
- transform: translateY(-50%);
-
- &--bare {
+ &__right-icon {
+ position: absolute;
+ top: 27%;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ }
+
+ &__calendar-button {
+ position: absolute;
+ top: 50%;
+ right: 18px;
+ display: flex;
+ align-items: center;
+ justify-content: center;
padding: 0;
+ color: var(--accent);
+ cursor: pointer;
background: transparent;
+ border: none;
+ transform: translateY(-50%);
}
- }
- &__right-icon {
- position: absolute;
- top: 27%;
- display: flex;
- align-items: center;
- justify-content: center;
+ &__datepicker-anchor {
+ position: absolute;
+ right: 0;
+ bottom: 0;
+ width: 0;
+ height: 0;
+ padding: 0;
+ pointer-events: none;
+ opacity: 0;
+ }
+
+ &__tooltip-wrapper {
+ position: absolute;
+ top: 55%;
+ right: 20px;
+ z-index: 10;
+ padding: 2px;
+ background-color: var(--light-gray);
+ border-radius: 100%;
+ transform: translateY(-50%);
+
+ &--small {
+ top: 15%;
+ right: -3px;
+ }
+ }
+
+ &__counter {
+ position: absolute;
+ right: 18px;
+ bottom: 0;
+
+ p {
+ color: var(--dark-grey);
+ }
+
+ &--overflow {
+ color: var(--red) !important;
+ }
+ }
}
- &__calendar-button {
- position: absolute;
- top: 50%;
- right: 18px;
- display: flex;
- align-items: center;
- justify-content: center;
- padding: 0;
- color: var(--accent);
- cursor: pointer;
- background: transparent;
- border: none;
- transform: translateY(-50%);
+ :host {
+ display: block;
+ min-width: 0;
+ max-width: 100%;
}
- &__datepicker-anchor {
- position: absolute;
- right: 0;
- bottom: 0;
- width: 0;
- height: 0;
- padding: 0;
- pointer-events: none;
- opacity: 0;
+ .field,
+ .search,
+ .search__input {
+ min-width: 0;
+ max-width: 100%;
}
- &__tooltip-wrapper {
- position: absolute;
- top: 55%;
- right: 20px;
- z-index: 10;
- padding: 2px;
- background-color: var(--light-gray);
- border-radius: 100%;
- transform: translateY(-50%);
+ @include responsive.apply-mobile {
+ .field__input,
+ .field__input-slim,
+ .search__input input {
+ min-width: 0;
+ max-width: 100%;
+ min-height: 44px;
+ font-size: var(--ui-font-h3);
+ }
- &--small {
- top: 15%;
- right: -3px;
+ .field--small,
+ .field__input--small {
+ min-width: 0;
+ }
+
+ .field__input--with-tooltip {
+ padding-right: 44px;
}
- }
- &__counter {
- position: absolute;
- right: 18px;
- bottom: 0;
+ .field__option {
+ min-height: 44px;
+ overflow-wrap: anywhere;
+ }
- p {
- color: var(--dark-grey);
+ .field__chip {
+ max-width: calc(100% - 44px);
}
- &--overflow {
- color: var(--red) !important;
+ .field__chip span {
+ overflow-wrap: anywhere;
+ white-space: normal;
+ }
+
+ .field__calendar-button {
+ right: 4px;
+ width: 44px;
+ height: 44px;
+ }
+
+ .field__input[type="date"] {
+ padding-right: 48px;
}
}
}
-:host {
- display: block;
- min-width: 0;
- max-width: 100%;
-}
+@media screen and (min-width: 1000px) {
+ .field {
+ position: relative;
-.field,
-.search,
-.search__input {
- min-width: 0;
- max-width: 100%;
-}
+ &__input {
+ color: var(--black) !important;
+ background-color: var(--white);
+ border: none;
+ outline: none;
+ transition: all 0.2s;
-@include responsive.apply-mobile {
- .field__input,
- .field__input-slim,
- .search__input input {
- min-width: 0;
- max-width: 100%;
- min-height: 44px;
- font-size: var(--ui-font-h3);
- }
+ &::placeholder {
+ color: var(--dark-grey);
+ }
- .field--small,
- .field__input--small {
- min-width: 0;
- }
+ &--small {
+ max-width: 70px;
+ padding: 12px 0;
+ text-align: center;
- .field__input--with-tooltip {
- padding-right: 44px;
- }
+ &--error {
+ text-align: start;
+ }
+ }
- .field__option {
- min-height: 44px;
- overflow-wrap: anywhere;
- }
+ &--big {
+ width: 100%;
+ padding: 12px;
+ }
- .field__chip {
- max-width: calc(100% - 44px);
- }
+ &--with-tooltip {
+ padding-right: 60px;
+ }
- .field__chip span {
- overflow-wrap: anywhere;
- white-space: normal;
- }
+ &--border {
+ border: 0.5px solid var(--gray);
+ border-radius: var(--rounded-xxl);
- .field__calendar-button {
- right: 4px;
- width: 44px;
- height: 44px;
- }
+ &:focus {
+ border-color: var(--accent);
+ box-shadow: 0 0 6px rgb(109 40 255 / 30%);
+ }
+ }
+
+ &--error,
+ &--overflow {
+ border: 0.5px solid var(--red);
+
+ &:focus {
+ border-color: var(--red);
+ box-shadow: 0 0 6px rgb(255 40 40 / 30.8%);
+ }
+ }
+
+ @include typography.body-10;
+
+ @include responsive.apply-desktop {
+ @include typography.body-12;
+ }
+ }
+
+ &__input[type="date"]::-webkit-inner-spin-button,
+ &__input[type="date"]::-webkit-calendar-picker-indicator {
+ display: none;
+ appearance: none;
+ }
+
+ &__input[type="radio"] {
+ position: relative;
+ width: 10px;
+ height: 10px;
+ padding: 4px;
+ cursor: pointer;
+ border: 0.5px solid var(--dark-grey);
+ border-radius: 50%;
+ transition: border-color 0.2s, background-color 0.2s;
+ appearance: none;
+
+ &:hover::after {
+ position: absolute;
+ top: 50%;
+ left: 50%;
+ width: 4px;
+ height: 4px;
+ content: "";
+ background-color: var(--accent);
+ border-radius: 50%;
+ transform: translate(-50%, -50%);
+ }
+
+ &:checked {
+ z-index: 1;
+ background-color: var(--accent);
+ border-color: var(--accent);
+
+ &::after {
+ position: absolute;
+ top: 50%;
+ left: 50%;
+ width: 4px;
+ height: 4px;
+ content: "";
+ background-color: var(--light-gray);
+ border-radius: 50%;
+ transform: translate(-50%, -50%);
+ }
+ }
+ }
+
+ &__error-icon {
+ position: absolute;
+ top: 50%;
+ right: 26px;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ color: var(--red) !important;
+ pointer-events: none;
+ transform: translateY(-50%);
+
+ &--bare {
+ padding: 0;
+ background: transparent;
+ }
+ }
+
+ &__right-icon {
+ position: absolute;
+ top: 27%;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ }
+
+ &__calendar-button {
+ position: absolute;
+ top: 50%;
+ right: 18px;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ padding: 0;
+ color: var(--accent);
+ cursor: pointer;
+ background: transparent;
+ border: none;
+ transform: translateY(-50%);
+ }
+
+ &__datepicker-anchor {
+ position: absolute;
+ right: 0;
+ bottom: 0;
+ width: 0;
+ height: 0;
+ padding: 0;
+ pointer-events: none;
+ opacity: 0;
+ }
+
+ &__tooltip-wrapper {
+ position: absolute;
+ top: 55%;
+ right: 20px;
+ z-index: 10;
+ padding: 2px;
+ background-color: var(--light-gray);
+ border-radius: 100%;
+ transform: translateY(-50%);
+
+ &--small {
+ top: 15%;
+ right: -3px;
+ }
+ }
+
+ &__counter {
+ position: absolute;
+ right: 18px;
+ bottom: 0;
- .field__input[type="date"] {
- padding-right: 48px;
+ p {
+ color: var(--dark-grey);
+ }
+
+ &--overflow {
+ color: var(--red) !important;
+ }
+ }
}
}
diff --git a/projects/social_platform/src/app/ui/primitives/modal/modal.component.scss b/projects/social_platform/src/app/ui/primitives/modal/modal.component.scss
index cded98e6d..18d997d11 100644
--- a/projects/social_platform/src/app/ui/primitives/modal/modal.component.scss
+++ b/projects/social_platform/src/app/ui/primitives/modal/modal.component.scss
@@ -16,7 +16,14 @@
right: 0;
bottom: 0;
left: 0;
- background-color: var(--ui-backdrop);
+
+ @media screen and (max-width: 999px) {
+ background-color: var(--ui-backdrop);
+ }
+
+ @media screen and (min-width: 1000px) {
+ background-color: rgb(51 46 45 / 50%);
+ }
}
&__body {
@@ -25,18 +32,54 @@
left: 50%;
display: flex;
justify-content: center;
- width: min(var(--ui-dialog-width, var(--ui-dialog-md)), calc(100vw - 24px));
- min-width: 0;
- max-width: calc(100vw - 24px);
- max-height: calc(var(--visual-viewport-height, 100dvh) - 24px);
- padding: var(--ui-dialog-padding);
- overflow-y: auto;
- overscroll-behavior: contain;
+
+ @media screen and (max-width: 999px) {
+ width: min(var(--ui-dialog-width, var(--ui-dialog-md)), calc(100vw - 24px));
+ }
+
+ @media screen and (min-width: 1000px) {
+ width: 90%;
+ }
+
+ @media screen and (max-width: 999px) {
+ min-width: 0;
+ }
+
+ @media screen and (max-width: 999px) {
+ max-width: calc(100vw - 24px);
+ }
+
+ @media screen and (max-width: 999px) {
+ max-height: calc(var(--visual-viewport-height, 100dvh) - 24px);
+ }
+
+ @media screen and (max-width: 999px) {
+ padding: var(--ui-dialog-padding);
+ }
+
+ @media screen and (min-width: 1000px) {
+ padding: 24px;
+ }
+
+ @media screen and (max-width: 999px) {
+ overflow-y: auto;
+ }
+
+ @media screen and (max-width: 999px) {
+ overscroll-behavior: contain;
+ }
+
+ @media screen and (min-width: 1000px) {
+ overflow: hidden;
+ }
+
background: var(--white);
border-radius: var(--ui-radius-dialog);
transform: translate(-50%, -50%);
@include responsive.apply-desktop {
+ width: unset;
+ max-height: 98vh;
overflow-y: auto;
}
@@ -48,66 +91,74 @@
display: block;
}
- ::ng-deep > * {
- flex-shrink: 1;
- min-width: 0;
- max-width: 100%;
- }
-
- @include responsive.apply-below-desktop {
- top: calc(var(--visual-viewport-top, 0px) + var(--visual-viewport-height, 100dvh) / 2);
- padding: var(--ui-dialog-padding);
-
- ::ng-deep .cancel {
+ @media screen and (max-width: 999px) {
+ ::ng-deep > * {
+ flex-shrink: 1;
min-width: 0;
max-width: 100%;
- max-height: none;
- padding: 12px;
}
+ }
- ::ng-deep .cancel__buttons {
- @include responsive.mobile-actions;
+ @media screen and (max-width: 999px) {
+ @include responsive.apply-below-desktop {
+ top: calc(var(--visual-viewport-top, 0px) + var(--visual-viewport-height, 100dvh) / 2);
+ padding: var(--ui-dialog-padding);
- position: sticky;
- bottom: 0;
- z-index: 2;
- justify-content: center;
- padding-top: 8px;
- padding-bottom: env(safe-area-inset-bottom, 0);
- background: var(--white);
- }
+ ::ng-deep .cancel {
+ min-width: 0;
+ max-width: 100%;
+ max-height: none;
+ padding: 12px;
+ }
- ::ng-deep .cancel__text {
- width: 100%;
- }
+ ::ng-deep .cancel__buttons {
+ @include responsive.mobile-actions;
- ::ng-deep .cancel__top {
- position: sticky;
- top: 0;
- z-index: 2;
- background: var(--white);
- }
+ position: sticky;
+ bottom: 0;
+ z-index: 2;
+ justify-content: center;
+ padding-top: 8px;
+ padding-bottom: env(safe-area-inset-bottom, 0);
+ background: var(--white);
+ }
- ::ng-deep .cancel__cross {
- display: inline-flex;
- align-items: center;
- justify-content: center;
- min-width: 44px;
- min-height: 44px;
+ ::ng-deep .cancel__text {
+ width: 100%;
+ }
+
+ ::ng-deep .cancel__top {
+ position: sticky;
+ top: 0;
+ z-index: 2;
+ background: var(--white);
+ }
- svg {
- max-width: 16px;
- max-height: 16px;
+ ::ng-deep .cancel__cross {
+ display: inline-flex;
+ align-items: center;
+ justify-content: center;
+ min-width: 44px;
+ min-height: 44px;
+
+ svg {
+ max-width: 16px;
+ max-height: 16px;
+ }
}
}
}
}
}
-.modal__body--small {
- --ui-dialog-width: var(--ui-dialog-sm);
+@media screen and (max-width: 999px) {
+ .modal__body--small {
+ --ui-dialog-width: var(--ui-dialog-sm);
+ }
}
-.modal__body--large {
- --ui-dialog-width: var(--ui-dialog-lg);
+@media screen and (max-width: 999px) {
+ .modal__body--large {
+ --ui-dialog-width: var(--ui-dialog-lg);
+ }
}
diff --git a/projects/social_platform/src/app/ui/primitives/search/search.component.scss b/projects/social_platform/src/app/ui/primitives/search/search.component.scss
index 5e00182a9..a4416338a 100644
--- a/projects/social_platform/src/app/ui/primitives/search/search.component.scss
+++ b/projects/social_platform/src/app/ui/primitives/search/search.component.scss
@@ -1,112 +1,159 @@
/** @format */
@use "styles/ui-foundation";
-
-/** @format */
-
@use "styles/responsive";
-.search {
- display: flex;
- align-items: center;
- width: 100%;
- cursor: pointer;
- border-bottom: 0.5px solid var(--dark-grey);
-
- &__other {
- flex-grow: 1;
- }
-
- &__icon {
- margin-right: 4px;
- margin-bottom: 2px;
- color: var(--dark-grey);
+@media screen and (max-width: 999px) {
+ .search {
+ display: flex;
+ align-items: center;
+ width: 100%;
+ cursor: pointer;
+ border-bottom: 0.5px solid var(--dark-grey);
- &--open {
- margin-top: 4px;
- margin-bottom: 0;
+ &__other {
+ flex-grow: 1;
}
- }
- &__text {
- color: var(--dark-grey);
- }
+ &__icon {
+ margin-right: 4px;
+ margin-bottom: 2px;
+ color: var(--dark-grey);
- &__input {
- width: 100%;
+ &--open {
+ margin-top: 4px;
+ margin-bottom: 0;
+ }
+ }
- @include responsive.apply-desktop {
- width: 200px;
+ &__text {
+ color: var(--dark-grey);
}
- input {
+ &__input {
width: 100%;
- background-color: transparent;
- border: none;
- outline: none;
- &::placeholder {
- color: var(--dark-grey);
+ @include responsive.apply-desktop {
+ width: 200px;
}
- @include ui-foundation.control;
- }
- }
-}
+ input {
+ width: 100%;
+ background-color: transparent;
+ border: none;
+ outline: none;
-:host {
- display: block;
- min-width: 0;
- max-width: 100%;
-}
+ &::placeholder {
+ color: var(--dark-grey);
+ }
-.field,
-.search,
-.search__input {
- min-width: 0;
- max-width: 100%;
-}
+ @include ui-foundation.control;
+ }
+ }
+ }
-@include responsive.apply-mobile {
- .field__input,
- .field__input-slim,
- .search__input input {
+ :host {
+ display: block;
min-width: 0;
max-width: 100%;
- min-height: 44px;
- font-size: var(--ui-font-h3);
}
- .field--small,
- .field__input--small {
+ .field,
+ .search,
+ .search__input {
min-width: 0;
+ max-width: 100%;
}
- .field__input--with-tooltip {
- padding-right: 44px;
- }
+ @include responsive.apply-mobile {
+ .field__input,
+ .field__input-slim,
+ .search__input input {
+ min-width: 0;
+ max-width: 100%;
+ min-height: 44px;
+ font-size: var(--ui-font-h3);
+ }
- .field__option {
- min-height: 44px;
- overflow-wrap: anywhere;
- }
+ .field--small,
+ .field__input--small {
+ min-width: 0;
+ }
- .field__chip {
- max-width: calc(100% - 44px);
- }
+ .field__input--with-tooltip {
+ padding-right: 44px;
+ }
- .field__chip span {
- overflow-wrap: anywhere;
- white-space: normal;
- }
+ .field__option {
+ min-height: 44px;
+ overflow-wrap: anywhere;
+ }
+
+ .field__chip {
+ max-width: calc(100% - 44px);
+ }
+
+ .field__chip span {
+ overflow-wrap: anywhere;
+ white-space: normal;
+ }
+
+ .field__calendar-button {
+ right: 4px;
+ width: 44px;
+ height: 44px;
+ }
- .field__calendar-button {
- right: 4px;
- width: 44px;
- height: 44px;
+ .field__input[type="date"] {
+ padding-right: 48px;
+ }
}
+}
+
+@media screen and (min-width: 1000px) {
+ .search {
+ display: flex;
+ align-items: center;
+ width: 100%;
+ cursor: pointer;
+ border-bottom: 0.5px solid var(--dark-grey);
+
+ &__other {
+ flex-grow: 1;
+ }
- .field__input[type="date"] {
- padding-right: 48px;
+ &__icon {
+ margin-right: 4px;
+ margin-bottom: 2px;
+ color: var(--dark-grey);
+
+ &--open {
+ margin-top: 4px;
+ margin-bottom: 0;
+ }
+ }
+
+ &__text {
+ color: var(--dark-grey);
+ }
+
+ &__input {
+ width: 100%;
+
+ @include responsive.apply-desktop {
+ width: 200px;
+ }
+
+ input {
+ width: 100%;
+ background-color: transparent;
+ border: none;
+ outline: none;
+
+ &::placeholder {
+ color: var(--dark-grey);
+ }
+ }
+ }
}
}
diff --git a/projects/social_platform/src/app/ui/primitives/select/select.component.scss b/projects/social_platform/src/app/ui/primitives/select/select.component.scss
index 26758630c..8afe52e48 100644
--- a/projects/social_platform/src/app/ui/primitives/select/select.component.scss
+++ b/projects/social_platform/src/app/ui/primitives/select/select.component.scss
@@ -1,177 +1,284 @@
/** @format */
@use "styles/ui-foundation";
-
-/** @format */
-
@use "styles/typography";
@use "styles/responsive";
-.field {
- position: relative;
- width: 100%;
-
- &__input {
+@media screen and (max-width: 999px) {
+ .field {
position: relative;
- z-index: 2;
- display: flex;
- align-items: center;
- justify-content: space-between;
- cursor: pointer;
-
- &--small {
- max-width: 70px;
- padding: 12px;
- text-align: center;
+ width: 100%;
+
+ &__input {
+ position: relative;
+ z-index: 2;
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+ cursor: pointer;
+
+ &--small {
+ max-width: 70px;
+ padding: 12px;
+ text-align: center;
+ }
+
+ &--big {
+ width: 100%;
+ padding: 12px;
+ }
+
+ &--placeholder {
+ color: var(--dark-grey);
+ }
+
+ &--open {
+ border-color: var(--accent);
+ box-shadow: var(--ui-focus-ring);
+ }
+
+ &--error {
+ border-color: var(--red) !important;
+ }
+
+ &--disabled {
+ cursor: not-allowed;
+ opacity: 0.5;
+ }
+
+ @include ui-foundation.control;
}
- &--big {
- width: 100%;
- padding: 12px;
+ &__options {
+ position: absolute;
+ right: 0;
+ bottom: -6px;
+ left: 5%;
+ z-index: 11;
+ width: 90%;
+ max-height: 200px;
+ overflow-y: auto;
+ background-color: var(--white);
+ border: 0.5px solid var(--gray);
+ border-radius: var(--rounded-lg);
+ transform: translateY(100%);
}
- &--placeholder {
+ &__option {
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+ padding: 12px 18px;
color: var(--dark-grey);
- }
+ cursor: pointer;
+ border-radius: var(--rounded-lg);
+ transition: background-color 0.2s;
- &--open {
- border-color: var(--accent);
- box-shadow: var(--ui-focus-ring);
- }
+ &--highlighted {
+ background-color: var(--light-gray);
+ }
- &--error {
- border-color: var(--red) !important;
+ &:hover {
+ color: var(--accent);
+ }
}
- &--disabled {
- cursor: not-allowed;
- opacity: 0.5;
+ &__arrow {
+ color: var(--dark-grey);
+ transition: all 0.2s;
+ transform: rotate(180deg);
+
+ &--filpped {
+ color: var(--accent);
+ transform: rotate(0deg);
+ }
}
- @include ui-foundation.control;
+ &__error-icon {
+ flex: 0 0 auto;
+ color: var(--red);
+ pointer-events: none;
+
+ &--bare {
+ padding: 0;
+ background: transparent;
+ }
+ }
}
- &__options {
- position: absolute;
- right: 0;
- bottom: -6px;
- left: 5%;
- z-index: 11;
- width: 90%;
- max-height: 200px;
- overflow-y: auto;
- background-color: var(--white);
- border: 0.5px solid var(--gray);
- border-radius: var(--rounded-lg);
- transform: translateY(100%);
+ :host {
+ display: block;
+ min-width: 0;
+ max-width: 100%;
}
- &__option {
- display: flex;
- align-items: center;
- justify-content: space-between;
- padding: 12px 18px;
- color: var(--dark-grey);
- cursor: pointer;
- border-radius: var(--rounded-lg);
- transition: background-color 0.2s;
+ .field,
+ .search,
+ .search__input {
+ min-width: 0;
+ max-width: 100%;
+ }
- &--highlighted {
- background-color: var(--light-gray);
+ @include responsive.apply-mobile {
+ .field__input,
+ .field__input-slim,
+ .search__input input {
+ min-width: 0;
+ max-width: 100%;
+ min-height: 44px;
+ font-size: var(--ui-font-h3);
}
- &:hover {
- color: var(--accent);
+ .field--small,
+ .field__input--small {
+ min-width: 0;
}
- }
- &__arrow {
- color: var(--dark-grey);
- transition: all 0.2s;
- transform: rotate(180deg);
-
- &--filpped {
- color: var(--accent);
- transform: rotate(0deg);
+ .field__input--with-tooltip {
+ padding-right: 44px;
}
- }
- &__error-icon {
- flex: 0 0 auto;
- color: var(--red);
- pointer-events: none;
+ .field__option {
+ min-height: 44px;
+ overflow-wrap: anywhere;
+ }
- &--bare {
- padding: 0;
- background: transparent;
+ .field__chip {
+ max-width: calc(100% - 44px);
}
- }
-}
-:host {
- display: block;
- min-width: 0;
- max-width: 100%;
-}
+ .field__chip span {
+ overflow-wrap: anywhere;
+ white-space: normal;
+ }
-.field,
-.search,
-.search__input {
- min-width: 0;
- max-width: 100%;
-}
+ .field__calendar-button {
+ right: 4px;
+ width: 44px;
+ height: 44px;
+ }
-@include responsive.apply-mobile {
- .field__input,
- .field__input-slim,
- .search__input input {
- min-width: 0;
- max-width: 100%;
- min-height: 44px;
- font-size: var(--ui-font-h3);
+ .field__input[type="date"] {
+ padding-right: 48px;
+ }
}
- .field--small,
- .field__input--small {
+ .field__input > span,
+ .field__input > p {
min-width: 0;
+ overflow-wrap: anywhere;
}
- .field__input--with-tooltip {
- padding-right: 44px;
+ .field__arrow,
+ .field__error-icon {
+ flex-shrink: 0;
}
+}
- .field__option {
- min-height: 44px;
- overflow-wrap: anywhere;
- }
+@media screen and (min-width: 1000px) {
+ .field {
+ position: relative;
+ width: 100%;
+
+ &__input {
+ position: relative;
+ z-index: 2;
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+ color: var(--black);
+ cursor: pointer;
+ background-color: var(--white);
+ border: 0.5px solid var(--gray);
+ border-radius: var(--rounded-xxl);
+ outline: none;
+
+ &--small {
+ max-width: 70px;
+ padding: 12px;
+ text-align: center;
+ }
+
+ &--big {
+ width: 100%;
+ padding: 12px;
+ }
+
+ &--placeholder {
+ color: var(--dark-grey);
+ }
+
+ &--open {
+ border-color: var(--accent);
+ box-shadow: 0 0 6px rgb(109 40 255 / 30%);
+ }
+
+ &--error {
+ border-color: var(--red) !important;
+ }
+
+ &--disabled {
+ cursor: not-allowed;
+ opacity: 0.5;
+ }
+
+ @include typography.body-12;
+ }
- .field__chip {
- max-width: calc(100% - 44px);
- }
+ &__options {
+ position: absolute;
+ right: 0;
+ bottom: -6px;
+ left: 5%;
+ z-index: 11;
+ width: 90%;
+ max-height: 200px;
+ overflow-y: auto;
+ background-color: var(--white);
+ border: 0.5px solid var(--gray);
+ border-radius: var(--rounded-lg);
+ transform: translateY(100%);
+ }
- .field__chip span {
- overflow-wrap: anywhere;
- white-space: normal;
- }
+ &__option {
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+ padding: 12px 18px;
+ color: var(--dark-grey);
+ cursor: pointer;
+ border-radius: var(--rounded-lg);
+ transition: background-color 0.2s;
- .field__calendar-button {
- right: 4px;
- width: 44px;
- height: 44px;
- }
+ &--highlighted {
+ background-color: var(--light-gray);
+ }
- .field__input[type="date"] {
- padding-right: 48px;
- }
-}
+ &:hover {
+ color: var(--accent);
+ }
+ }
-.field__input > span,
-.field__input > p {
- min-width: 0;
- overflow-wrap: anywhere;
-}
+ &__arrow {
+ color: var(--dark-grey);
+ transition: all 0.2s;
+ transform: rotate(180deg);
+
+ &--filpped {
+ color: var(--accent);
+ transform: rotate(0deg);
+ }
+ }
-.field__arrow,
-.field__error-icon {
- flex-shrink: 0;
+ &__error-icon {
+ flex: 0 0 auto;
+ color: var(--red);
+ pointer-events: none;
+
+ &--bare {
+ padding: 0;
+ background: transparent;
+ }
+ }
+ }
}
diff --git a/projects/social_platform/src/app/ui/primitives/switch/switch.component.scss b/projects/social_platform/src/app/ui/primitives/switch/switch.component.scss
index ff0112559..b589397ea 100644
--- a/projects/social_platform/src/app/ui/primitives/switch/switch.component.scss
+++ b/projects/social_platform/src/app/ui/primitives/switch/switch.component.scss
@@ -31,18 +31,20 @@
}
}
-@include responsive.apply-mobile {
- :host {
- display: inline-flex;
- align-items: center;
- justify-content: center;
- min-width: 44px;
- min-height: 44px;
- }
+@media screen and (max-width: 999px) {
+ @include responsive.apply-mobile {
+ :host {
+ display: inline-flex;
+ align-items: center;
+ justify-content: center;
+ min-width: 44px;
+ min-height: 44px;
+ }
- .switch::before {
- position: absolute;
- inset: -12px -2px;
- content: "";
+ .switch::before {
+ position: absolute;
+ inset: -12px -2px;
+ content: "";
+ }
}
}
diff --git a/projects/social_platform/src/app/ui/primitives/tag/tag.component.scss b/projects/social_platform/src/app/ui/primitives/tag/tag.component.scss
index 14d8f9629..b0190ed62 100644
--- a/projects/social_platform/src/app/ui/primitives/tag/tag.component.scss
+++ b/projects/social_platform/src/app/ui/primitives/tag/tag.component.scss
@@ -1,15 +1,12 @@
/** @format */
@use "styles/ui-foundation";
-
-/** @format */
-
@use "styles/responsive";
-/** @format */
-
.tag {
- @include ui-foundation.badge;
+ @media screen and (max-width: 999px) {
+ @include ui-foundation.badge;
+ }
position: relative;
display: flex;
@@ -17,10 +14,25 @@
justify-content: center;
width: 100%;
max-width: 120px;
- padding: 4px 12px;
+
+ @media screen and (max-width: 999px) {
+ padding: 4px 12px;
+ }
+
+ @media screen and (min-width: 1000px) {
+ padding: 2px 20px;
+ }
+
overflow: hidden;
- font-size: var(--ui-font-caption);
- line-height: 1.5;
+
+ @media screen and (max-width: 999px) {
+ font-size: var(--ui-font-caption);
+ }
+
+ @media screen and (max-width: 999px) {
+ line-height: 1.5;
+ }
+
color: var(--accent);
text-overflow: ellipsis;
white-space: nowrap;
@@ -192,25 +204,27 @@
}
}
-@include responsive.apply-mobile {
- .tag {
- max-width: 100%;
- padding: 4px 12px;
- overflow-wrap: anywhere;
- white-space: normal;
- }
+@media screen and (max-width: 999px) {
+ @include responsive.apply-mobile {
+ .tag {
+ max-width: 100%;
+ padding: 4px 12px;
+ overflow-wrap: anywhere;
+ white-space: normal;
+ }
- .tag p {
- min-width: 0;
- }
+ .tag p {
+ min-width: 0;
+ }
- .tag:has(.tag__icons) {
- padding-right: 40px;
- }
+ .tag:has(.tag__icons) {
+ padding-right: 40px;
+ }
- .tag__icons {
- top: 0;
- bottom: 0;
- align-items: center;
+ .tag__icons {
+ top: 0;
+ bottom: 0;
+ align-items: center;
+ }
}
}
diff --git a/projects/social_platform/src/app/ui/primitives/textarea/textarea.component.scss b/projects/social_platform/src/app/ui/primitives/textarea/textarea.component.scss
index 6c32da48c..3003879cf 100644
--- a/projects/social_platform/src/app/ui/primitives/textarea/textarea.component.scss
+++ b/projects/social_platform/src/app/ui/primitives/textarea/textarea.component.scss
@@ -1,33 +1,12 @@
/** @format */
@use "styles/ui-foundation";
-
-/** @format */
-
@use "styles/typography";
@use "styles/responsive";
-.field {
- position: relative;
-
- &--small {
- min-width: 245px;
- }
-
- &--big {
- width: 100%;
- }
-
- &__input {
- display: block;
- width: 100%;
- min-height: 162px;
- padding: 12px 18px;
- resize: none;
-
- &::placeholder {
- color: var(--dark-grey);
- }
+@media screen and (max-width: 999px) {
+ .field {
+ position: relative;
&--small {
min-width: 245px;
@@ -37,131 +16,256 @@
width: 100%;
}
- &--with-tooltip {
- padding-right: 130px;
- padding-right: 60px;
- }
+ &__input {
+ display: block;
+ width: 100%;
+ min-height: 162px;
+ padding: 12px 18px;
+ resize: none;
- &--error,
- &--overflow {
- border: 0.5px solid var(--red);
+ &::placeholder {
+ color: var(--dark-grey);
+ }
+
+ &--small {
+ min-width: 245px;
+ }
+
+ &--big {
+ width: 100%;
+ }
+
+ &--with-tooltip {
+ padding-right: 130px;
+ padding-right: 60px;
+ }
+
+ &--error,
+ &--overflow {
+ border: 0.5px solid var(--red);
+
+ &:focus {
+ border-color: var(--red) !important;
+ box-shadow: var(--ui-error-ring) !important;
+ }
+ }
&:focus {
- border-color: var(--red) !important;
- box-shadow: var(--ui-error-ring) !important;
+ border-color: var(--accent);
+ box-shadow: var(--ui-focus-ring);
}
- }
- &:focus {
- border-color: var(--accent);
- box-shadow: var(--ui-focus-ring);
+ @include ui-foundation.control;
+
+ border-radius: var(--ui-radius-card);
}
- @include ui-foundation.control;
+ &__error-icon {
+ position: absolute;
+ top: 25px;
+ right: 15px;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ color: var(--red) !important;
+ pointer-events: none;
+ transform: translateY(-50%);
- border-radius: var(--ui-radius-card);
- }
+ i {
+ color: var(--red) !important;
+ }
- &__error-icon {
- position: absolute;
- top: 25px;
- right: 15px;
- display: flex;
- align-items: center;
- justify-content: center;
- color: var(--red) !important;
- pointer-events: none;
- transform: translateY(-50%);
-
- i {
- color: var(--red) !important;
+ &--bare {
+ padding: 0;
+ background: transparent;
+ }
+ }
+
+ &__tooltip-wrapper {
+ position: absolute;
+ top: 25px;
+ right: 15px;
+ z-index: 10;
+ padding: 2px;
+ background-color: var(--light-gray);
+ border-radius: 100%;
+ transform: translateY(-50%);
}
- &--bare {
- padding: 0;
- background: transparent;
+ &__counter {
+ position: absolute;
+ right: 18px;
+ bottom: 4px;
+
+ p {
+ color: var(--dark-grey);
+ }
+
+ &--overflow {
+ color: var(--red) !important;
+ }
}
}
- &__tooltip-wrapper {
- position: absolute;
- top: 25px;
- right: 15px;
- z-index: 10;
- padding: 2px;
- background-color: var(--light-gray);
- border-radius: 100%;
- transform: translateY(-50%);
+ :host {
+ display: block;
+ min-width: 0;
+ max-width: 100%;
+ }
+
+ .field,
+ .search,
+ .search__input {
+ min-width: 0;
+ max-width: 100%;
}
- &__counter {
- position: absolute;
- right: 18px;
- bottom: 4px;
+ @include responsive.apply-mobile {
+ .field__input,
+ .field__input-slim,
+ .search__input input {
+ min-width: 0;
+ max-width: 100%;
+ min-height: 44px;
+ font-size: var(--ui-font-h3);
+ }
- p {
- color: var(--dark-grey);
+ .field--small,
+ .field__input--small {
+ min-width: 0;
}
- &--overflow {
- color: var(--red) !important;
+ .field__input--with-tooltip {
+ padding-right: 44px;
+ }
+
+ .field__option {
+ min-height: 44px;
+ overflow-wrap: anywhere;
+ }
+
+ .field__chip {
+ max-width: calc(100% - 44px);
+ }
+
+ .field__chip span {
+ overflow-wrap: anywhere;
+ white-space: normal;
+ }
+
+ .field__calendar-button {
+ right: 4px;
+ width: 44px;
+ height: 44px;
+ }
+
+ .field__input[type="date"] {
+ padding-right: 48px;
}
}
}
-:host {
- display: block;
- min-width: 0;
- max-width: 100%;
-}
+@media screen and (min-width: 1000px) {
+ .field {
+ position: relative;
-.field,
-.search,
-.search__input {
- min-width: 0;
- max-width: 100%;
-}
+ &--small {
+ min-width: 245px;
+ }
-@include responsive.apply-mobile {
- .field__input,
- .field__input-slim,
- .search__input input {
- min-width: 0;
- max-width: 100%;
- min-height: 44px;
- font-size: var(--ui-font-h3);
- }
+ &--big {
+ width: 100%;
+ }
- .field--small,
- .field__input--small {
- min-width: 0;
- }
+ &__input {
+ display: block;
+ width: 100%;
+ min-height: 162px;
+ padding: 12px 18px;
+ color: var(--black);
+ resize: none;
+ background-color: var(--white);
+ border: 0.5px solid var(--gray);
+ border-radius: var(--rounded-xl);
+ outline: none;
+ transition: all 0.2s;
+
+ &::placeholder {
+ color: var(--dark-grey);
+ }
- .field__input--with-tooltip {
- padding-right: 44px;
- }
+ &--small {
+ min-width: 245px;
+ }
- .field__option {
- min-height: 44px;
- overflow-wrap: anywhere;
- }
+ &--big {
+ width: 100%;
+ }
- .field__chip {
- max-width: calc(100% - 44px);
- }
+ &--with-tooltip {
+ padding-right: 130px;
+ }
- .field__chip span {
- overflow-wrap: anywhere;
- white-space: normal;
- }
+ &--error,
+ &--overflow {
+ border: 0.5px solid var(--red);
- .field__calendar-button {
- right: 4px;
- width: 44px;
- height: 44px;
- }
+ &:focus {
+ border-color: var(--red) !important;
+ box-shadow: 0 0 6px rgb(255 40 40 / 30.8%) !important;
+ }
+ }
+
+ &:focus {
+ border-color: var(--accent);
+ box-shadow: 0 0 6px rgb(109 40 255 / 30%);
+ }
+ }
+
+ &__error-icon {
+ position: absolute;
+ top: 25px;
+ right: 15px;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ color: var(--red) !important;
+ pointer-events: none;
+ transform: translateY(-50%);
- .field__input[type="date"] {
- padding-right: 48px;
+ i {
+ color: var(--red) !important;
+ }
+
+ &--bare {
+ padding: 0;
+ background: transparent;
+ }
+ }
+
+ &__tooltip-wrapper {
+ position: absolute;
+ top: 25px;
+ right: 15px;
+ z-index: 10;
+ padding: 2px;
+ background-color: var(--light-gray);
+ border-radius: 100%;
+ transform: translateY(-50%);
+ }
+
+ &__counter {
+ position: absolute;
+ right: 18px;
+ bottom: 4px;
+
+ p {
+ color: var(--dark-grey);
+ }
+
+ &--overflow {
+ color: var(--red) !important;
+ }
+ }
}
}
diff --git a/projects/social_platform/src/app/ui/primitives/upload-file/upload-file.component.scss b/projects/social_platform/src/app/ui/primitives/upload-file/upload-file.component.scss
index fc2230911..a71af676a 100644
--- a/projects/social_platform/src/app/ui/primitives/upload-file/upload-file.component.scss
+++ b/projects/social_platform/src/app/ui/primitives/upload-file/upload-file.component.scss
@@ -56,7 +56,6 @@
border-radius: var(--rounded-lg);
&__title {
- /* width: 80%; */
overflow: hidden;
color: var(--black);
text-overflow: ellipsis;
@@ -88,34 +87,36 @@
}
}
-@include responsive.apply-mobile {
- .control {
- height: auto;
- min-height: 120px;
- }
+@media screen and (max-width: 999px) {
+ @include responsive.apply-mobile {
+ .control {
+ height: auto;
+ min-height: 120px;
+ }
- .control label {
- min-height: 120px;
- padding: 16px;
- }
+ .control label {
+ min-height: 120px;
+ padding: 16px;
+ }
- .control__success,
- .file {
- flex-wrap: wrap;
- min-width: 0;
- max-width: 100%;
- }
+ .control__success,
+ .file {
+ flex-wrap: wrap;
+ min-width: 0;
+ max-width: 100%;
+ }
- .file__title {
- min-width: 0;
- max-width: 100%;
- overflow-wrap: anywhere;
- white-space: normal;
- }
+ .file__title {
+ min-width: 0;
+ max-width: 100%;
+ overflow-wrap: anywhere;
+ white-space: normal;
+ }
- .file__basket,
- .file__replace {
- min-width: 44px;
- min-height: 44px;
+ .file__basket,
+ .file__replace {
+ min-width: 44px;
+ min-height: 44px;
+ }
}
}
diff --git a/projects/social_platform/src/app/ui/widgets/cookie-consent/cookie-consent.component.scss b/projects/social_platform/src/app/ui/widgets/cookie-consent/cookie-consent.component.scss
index de7c55c2d..e9302095a 100644
--- a/projects/social_platform/src/app/ui/widgets/cookie-consent/cookie-consent.component.scss
+++ b/projects/social_platform/src/app/ui/widgets/cookie-consent/cookie-consent.component.scss
@@ -2,8 +2,6 @@
@use "styles/responsive";
-/** @format */
-
.cookie-consent {
position: fixed;
right: 20px;
@@ -38,18 +36,20 @@
}
}
-@include responsive.apply-mobile {
- .cookie-consent {
- right: var(--page-gutter);
- bottom: max(12px, env(safe-area-inset-bottom));
- left: var(--page-gutter);
- max-width: none;
- max-height: calc(100dvh - 24px);
- padding: 16px;
- overflow-y: auto;
- }
+@media screen and (max-width: 999px) {
+ @include responsive.apply-mobile {
+ .cookie-consent {
+ right: var(--page-gutter);
+ bottom: max(12px, env(safe-area-inset-bottom));
+ left: var(--page-gutter);
+ max-width: none;
+ max-height: calc(100dvh - 24px);
+ padding: 16px;
+ overflow-y: auto;
+ }
- .cookie-consent__buttons {
- @include responsive.mobile-actions;
+ .cookie-consent__buttons {
+ @include responsive.mobile-actions;
+ }
}
}
diff --git a/projects/social_platform/src/app/ui/widgets/detail/detail.component.html b/projects/social_platform/src/app/ui/widgets/detail/detail.component.html
index 8b90c4323..703713ece 100644
--- a/projects/social_platform/src/app/ui/widgets/detail/detail.component.html
+++ b/projects/social_platform/src/app/ui/widgets/detail/detail.component.html
@@ -5,20 +5,16 @@
@if (info()) {
- @if (appWidth > 1000) {
- ![cover]()
- }
-
-
+ ![cover]()
- @if (listType() === "project") {
+ @if (appWidth >= 1000 && (listType() === "project" || listType() === "profile")) {
- @if (listType() === "profile") {
+ @if (appWidth < 1000) {
оценка проектов
@@ -186,8 +187,8 @@
@if (isUserManager()) {
аналитика
@@ -197,27 +198,25 @@
- @if (appWidth > 1000) {
- {{
- info().name.includes("Технолидеры Будущего")
- ? "Каталог лучших стартапов 2022/23"
- : "положение"
- }}
- }
+ {{
+ info().name.includes("Технолидеры Будущего")
+ ? "Каталог лучших стартапов 2022/23"
+ : "положение"
+ }}
}
- @if (appWidth > 1000) {
+ @if (appWidth >= 1000) {
}
@if (appWidth < 1000) {
@@ -230,9 +229,12 @@
(click)="isContactsModalOpen.set(true)"
>
+ @if (appWidth < 1000) {
+ Контакты
+ }
}
- @if (isUserManager() || (isUserExpert() && appWidth > 1000)) {
+ @if (isUserManager() || (isUserExpert() && appWidth >= 1000)) {
}
- @if (!isUserManager() && !isUserExpert() && appWidth > 1000) {
+ @if (!isUserManager() && !isUserExpert() && appWidth >= 1000) {
}
- @if (isUserManager() || (isUserExpert() && appWidth > 1000)) {
+ @if (isUserManager() || (isUserExpert() && appWidth >= 1000)) {
- {{ appWidth > 1000 ? "перейти в курс" : "курс" }}
+ {{ appWidth >= 1000 ? "перейти в курс" : "курс" }}
}
diff --git a/projects/social_platform/src/app/ui/widgets/detail/detail.component.scss b/projects/social_platform/src/app/ui/widgets/detail/detail.component.scss
index 502d1191c..bfe10888d 100644
--- a/projects/social_platform/src/app/ui/widgets/detail/detail.component.scss
+++ b/projects/social_platform/src/app/ui/widgets/detail/detail.component.scss
@@ -64,15 +64,17 @@ $detail-bar-mb: 12px;
object-position: center;
}
- &--mobile {
- display: block;
- max-width: 100%;
- height: 136px;
- background: linear-gradient(90deg, var(--accent) 0%, var(--lime) 100%);
- border-radius: 15px;
-
- @include responsive.apply-desktop {
- display: none;
+ @media screen and (min-width: 1000px) {
+ &--mobile {
+ display: block;
+ max-width: 100%;
+ height: 136px;
+ background: linear-gradient(90deg, var(--accent) 0%, var(--lime) 100%);
+ border-radius: 15px;
+
+ @include responsive.apply-desktop {
+ display: none;
+ }
}
}
}
@@ -421,55 +423,119 @@ $detail-bar-mb: 12px;
}
}
-@include responsive.apply-below-desktop {
- .detail {
- height: auto;
- margin: 0 var(--page-gutter);
- }
+@media screen and (max-width: 999px) {
+ @include responsive.apply-below-desktop {
+ .detail {
+ height: auto;
+ margin: 0 var(--page-gutter);
+ }
- .detail__body {
- max-height: none;
- }
+ .detail__body {
+ max-height: none;
+ }
- .info__row {
- @include responsive.mobile-actions;
- }
+ .info__row {
+ @include responsive.mobile-actions;
+ }
- .approve {
- min-width: 0;
- padding: 8px;
- }
+ .approve {
+ min-width: 0;
+ padding: 8px;
+ }
- .project__item,
- .project__item--info {
- @include responsive.mobile-actions;
- }
+ .project__item,
+ .project__item--info {
+ @include responsive.mobile-actions;
+ }
- .approves__text {
- overflow-wrap: anywhere;
- white-space: normal;
+ .approves__text {
+ overflow-wrap: anywhere;
+ white-space: normal;
+ }
}
}
-.info__page-header {
- padding-top: 80px;
+@media screen and (max-width: 999px) {
+ .info__page-header {
+ padding-top: 80px;
+ }
}
-@media (max-width: 999px) {
- .info__page-header {
- padding-top: 150px;
+@media screen and (max-width: 999px) {
+ @include responsive.apply-below-desktop {
+ .info__cover,
+ .info__cover--program {
+ height: 136px;
+ }
+
+ .info__avatar,
+ .info__avatar--program {
+ bottom: -32px;
+ left: 16px;
+ transform: none;
+ }
+
+ .info__page-header {
+ padding-top: 52px;
+ margin-bottom: 16px;
+ }
+
+ .info__actions {
+ grid-template-columns: repeat(2, minmax(0, 1fr));
+ align-items: stretch;
+ padding: 0 0 24px;
+
+ > a,
+ > app-button,
+ > .info__unavailable,
+ > .info__primary-action {
+ display: block;
+ justify-self: stretch;
+ width: 100%;
+ min-width: 0;
+ }
+
+ ::ng-deep app-button {
+ display: block;
+ width: 100%;
+ height: 100%;
+ }
+
+ ::ng-deep app-button > button {
+ width: 100%;
+ height: 100%;
+ padding-right: 12px;
+ padding-left: 12px;
+ }
+ }
+
+ .info__divider {
+ display: none;
+ }
+
+ .info__primary-action {
+ order: 0;
+ }
+
+ .info__materials--full {
+ grid-column: auto;
+ }
}
}
-.approve,
-.cancel,
-.support {
- width: 100%;
- min-width: 0;
- max-width: 100%;
- padding: 0;
+@media screen and (max-width: 999px) {
+ .approve,
+ .cancel,
+ .support {
+ width: 100%;
+ min-width: 0;
+ max-width: 100%;
+ padding: 0;
+ }
}
-.info__page-header + .info__actions {
- padding-top: 0;
+@media screen and (max-width: 999px) {
+ .info__page-header + .info__actions {
+ padding-top: 0;
+ }
}
diff --git a/projects/social_platform/src/app/ui/widgets/feed-filter/feed-filter.component.html b/projects/social_platform/src/app/ui/widgets/feed-filter/feed-filter.component.html
index fcb69c083..253ce92d7 100644
--- a/projects/social_platform/src/app/ui/widgets/feed-filter/feed-filter.component.html
+++ b/projects/social_platform/src/app/ui/widgets/feed-filter/feed-filter.component.html
@@ -4,31 +4,6 @@
-
-
-
- Фильтр
-
-
- @if (filterOpen()) {
-
-
@for (filterItem of feedFilterOptions; track $index) {
diff --git a/projects/social_platform/src/app/ui/widgets/feed-filter/feed-filter.component.scss b/projects/social_platform/src/app/ui/widgets/feed-filter/feed-filter.component.scss
index c0502a6d8..16cb04fa0 100644
--- a/projects/social_platform/src/app/ui/widgets/feed-filter/feed-filter.component.scss
+++ b/projects/social_platform/src/app/ui/widgets/feed-filter/feed-filter.component.scss
@@ -1,150 +1,232 @@
/** @format */
-@use "styles/typography";
@use "styles/responsive";
+@use "styles/typography";
-.mobile {
- display: grid;
- grid-template-columns: 0.6fr 0.4fr;
- gap: 5px;
- margin-bottom: 20px;
+@media screen and (min-width: 1000px) {
+ .mobile {
+ display: grid;
+ grid-template-columns: 0.6fr 0.4fr;
+ gap: 5px;
+ margin-bottom: 20px;
- @include responsive.apply-desktop {
- display: none;
+ @include responsive.apply-desktop {
+ display: none;
+ }
+
+ app-button {
+ &::ng-deep .button--inline {
+ min-height: 38px;
+ padding: 0;
+ }
+ }
}
}
-.select {
- position: relative;
-
- &__input {
+@media screen and (min-width: 1000px) {
+ .select {
position: relative;
- z-index: 4;
- display: flex;
- align-items: center;
- width: 100%;
- height: 38px;
- padding: 13px 80px 13px 20px;
- background-color: var(--white);
- border: 1px solid var(--gray);
- border-radius: var(--rounded-lg);
- transition: all 0.2s;
-
- &::placeholder {
- color: var(--dark-grey);
- }
- &:hover,
- &--open {
- cursor: pointer;
- border-color: var(--accent);
- }
+ &__input {
+ position: relative;
+ z-index: 4;
+ display: flex;
+ align-items: center;
+ width: 100%;
+ height: 38px;
+ padding: 13px 80px 13px 20px;
+ background-color: var(--white);
+ border: 1px solid var(--gray);
+ border-radius: var(--rounded-lg);
+ transition: all 0.2s;
- @include typography.body-14;
- }
+ &::placeholder {
+ color: var(--dark-grey);
+ }
- &__dropdown {
- position: absolute;
- top: 80%;
- right: 0;
- left: 0;
- z-index: 3;
- padding: 20px 10px 10px;
- background-color: var(--white);
- border: 1px solid var(--gray);
- border-radius: var(--rounded-lg);
- box-shadow: 5px 5px 25px 0 var(--gray-for-shadow);
- transform-origin: center top;
- }
+ &:hover,
+ &--open {
+ cursor: pointer;
+ border-color: var(--accent);
+ }
- &__dropdown-icon {
- position: absolute;
- top: 50%;
- right: 15px;
- z-index: 4;
- color: var(--dark-grey);
- pointer-events: none;
- transform: translateY(-50%) rotate(180deg);
+ @include typography.body-14;
+ }
+
+ &__dropdown {
+ position: absolute;
+ top: 80%;
+ right: 0;
+ left: 0;
+ z-index: 3;
+ padding: 20px 10px 10px;
+ background-color: var(--white);
+ border: 1px solid var(--gray);
+ border-radius: var(--rounded-lg);
+ box-shadow: 5px 5px 25px 0 var(--gray-for-shadow);
+ transform-origin: center top;
+ }
+
+ &__dropdown-icon {
+ position: absolute;
+ top: 50%;
+ right: 15px;
+ z-index: 4;
+ color: var(--dark-grey);
+ pointer-events: none;
+ transform: translateY(-50%) rotate(180deg);
+ }
}
}
.filter {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
- gap: 30px 12px;
- padding-top: 25px;
+
+ @media screen and (max-width: 999px) {
+ gap: 8px;
+ }
+
+ @media screen and (min-width: 1000px) {
+ gap: 30px 12px;
+ }
+
+ @media screen and (min-width: 1000px) {
+ padding-top: 25px;
+ }
@include responsive.apply-desktop {
grid-template-columns: repeat(6, minmax(0, 1fr));
}
- &__option {
- position: relative;
- display: grid;
- grid-template-rows: 32px 18px;
- row-gap: 4px;
- align-items: center;
- justify-items: center;
- min-width: 0;
- height: 104px;
- padding: 36px 6px 12px;
- cursor: pointer;
- background-color: var(--light-white);
- border: 0.5px solid var(--medium-grey-for-outline);
- border-radius: var(--rounded-xl);
+ @media screen and (max-width: 999px) {
+ &__option.ui-button {
+ position: relative;
+ display: grid;
+ grid-template-columns: 20px minmax(0, 1fr);
+ gap: 4px 8px;
+ align-items: center;
+ min-width: 0;
+ height: auto;
+ min-height: 64px;
+ padding: 12px;
+ white-space: normal;
+ cursor: pointer;
+ background-color: var(--ui-surface);
+ border: 1px solid var(--ui-border-subtle);
+ border-radius: var(--rounded-lg);
- &--disable {
- cursor: not-allowed;
- opacity: 0.5;
+ &:focus-visible {
+ outline: 2px solid var(--accent-dark);
+ outline-offset: 3px;
+ }
}
+ }
- &--active {
+ @media screen and (max-width: 999px) {
+ &__option--active.ui-button {
+ background-color: var(--accent-light);
border-color: var(--accent);
+ }
+ }
- i {
- color: var(--light-white) !important;
- }
-
- .filter__option--icon {
- background-color: var(--accent);
- }
-
- .filter__title {
- color: var(--accent);
- }
+ @media screen and (max-width: 999px) {
+ &__option--disable.ui-button {
+ cursor: not-allowed;
+ opacity: 0.5;
}
+ }
- &--icon {
- position: absolute;
- bottom: 100%;
- left: 50%;
+ @media screen and (max-width: 999px) {
+ &__option--icon {
+ position: static;
display: flex;
+ grid-row: 1 / 3;
align-items: center;
justify-content: center;
- width: 50px;
- height: 50px;
+ width: 20px;
+ height: 20px;
+ color: var(--accent);
+ }
+ }
+
+ @media screen and (min-width: 1000px) {
+ &__option {
+ position: relative;
+ display: grid;
+ grid-template-rows: 32px 18px;
+ row-gap: 4px;
+ align-items: center;
+ justify-items: center;
+ min-width: 0;
+ height: 104px;
+ padding: 36px 6px 12px;
+ cursor: pointer;
background-color: var(--light-white);
border: 0.5px solid var(--medium-grey-for-outline);
- border-radius: 50%;
- transform: translate(-50%, 50%);
+ border-radius: var(--rounded-xl);
- i {
- color: var(--accent);
+ &--disable {
+ cursor: not-allowed;
+ opacity: 0.5;
}
- }
- &:focus-visible {
- outline: 2px solid var(--accent-dark);
- outline-offset: 3px;
+ &--active {
+ border-color: var(--accent);
+
+ i {
+ color: var(--light-white) !important;
+ }
+
+ .filter__option--icon {
+ background-color: var(--accent);
+ }
+
+ .filter__title {
+ color: var(--accent);
+ }
+ }
+
+ &--icon {
+ position: absolute;
+ bottom: 100%;
+ left: 50%;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ width: 50px;
+ height: 50px;
+ background-color: var(--light-white);
+ border: 0.5px solid var(--medium-grey-for-outline);
+ border-radius: 50%;
+ transform: translate(-50%, 50%);
+
+ i {
+ color: var(--accent);
+ }
+ }
+
+ &:focus-visible {
+ outline: 2px solid var(--accent-dark);
+ outline-offset: 3px;
+ }
}
}
- /* Одна двухстрочная область названия задаёт общую базовую линию всех счётчиков. */
&__title {
- font-size: var(--ui-font-caption);
line-height: 16px;
- color: var(--grey-for-text);
- text-align: center;
+ color: var(--ui-text-muted);
+
+ @media screen and (max-width: 999px) {
+ font-size: var(--ui-font-small);
+ text-align: left;
+ overflow-wrap: anywhere;
+ }
+
+ @media screen and (min-width: 1000px) {
+ font-size: 11px;
+ text-align: center;
+ }
}
&__count {
@@ -154,21 +236,30 @@
font-variant-numeric: tabular-nums;
line-height: 18px;
color: var(--accent);
+
+ @media screen and (max-width: 999px) {
+ grid-column: 2;
+ text-align: left;
+ }
}
- &__checkbox {
- display: flex;
- align-items: center;
- margin-bottom: 6px;
- color: var(--black);
- cursor: pointer;
+ @media screen and (min-width: 1000px) {
+ &__checkbox {
+ display: flex;
+ align-items: center;
+ margin-bottom: 6px;
+ color: var(--black);
+ cursor: pointer;
- app-checkbox {
- margin-right: 15px;
+ app-checkbox {
+ margin-right: 15px;
+ }
}
}
}
-a:hover {
- cursor: pointer;
+@media screen and (min-width: 1000px) {
+ a:hover {
+ cursor: pointer;
+ }
}
diff --git a/projects/social_platform/src/app/ui/widgets/feed-filter/feed-filter.component.ts b/projects/social_platform/src/app/ui/widgets/feed-filter/feed-filter.component.ts
index 3a8e8fc37..a57db3db7 100644
--- a/projects/social_platform/src/app/ui/widgets/feed-filter/feed-filter.component.ts
+++ b/projects/social_platform/src/app/ui/widgets/feed-filter/feed-filter.component.ts
@@ -3,11 +3,9 @@
import { ButtonDirective, FiltersDirective } from "@uilib";
/** @format */
-import { animate, style, transition, trigger } from "@angular/animations";
import { CommonModule } from "@angular/common";
import { ChangeDetectionStrategy, Component, inject, OnInit } from "@angular/core";
import { IconComponent } from "@ui/primitives";
-import { ClickOutsideModule } from "ng-click-outside";
import { feedFilter } from "@core/consts/filters/feed-filter.const";
import { FeedFilterInfoService } from "./service/feed-filter-info.service";
import { DetailProfileInfoService } from "../detail/services/profile/detail-profile-info.service";
@@ -18,28 +16,16 @@ import { FeedCategoryCounts } from "@domain/feed/feed-item.model";
/** Компонент фильтрации ленты по типам контента с мгновенной синхронизацией через URL. */
@Component({
selector: "app-feed-filter",
- imports: [FiltersDirective, ButtonDirective, CommonModule, ClickOutsideModule, IconComponent],
+ imports: [FiltersDirective, ButtonDirective, CommonModule, IconComponent],
templateUrl: "./feed-filter.component.html",
styleUrl: "./feed-filter.component.scss",
changeDetection: ChangeDetectionStrategy.OnPush,
- animations: [
- trigger("dropdownAnimation", [
- transition(":enter", [
- style({ opacity: 0, transform: "scaleY(0.8)" }),
- animate(".12s cubic-bezier(0, 0, 0.2, 1)"),
- ]),
- transition(":leave", [animate(".1s linear", style({ opacity: 0 }))]),
- ]),
- ],
providers: [FeedFilterInfoService, ProfileDetailUIInfoService, DetailProfileInfoService],
})
export class FeedFilterComponent implements OnInit {
private readonly feedFilterInfoService = inject(FeedFilterInfoService);
private readonly feedUIInfoService = inject(FeedUIInfoService);
- // Состояние выпадающего меню фильтров
- protected readonly filterOpen = this.feedFilterInfoService.filterOpen;
-
// Массив активных фильтров
protected readonly includedFilters = this.feedFilterInfoService.includedFilters;
@@ -57,12 +43,4 @@ export class FeedFilterComponent implements OnInit {
setFilter(keyword: string): void {
this.feedFilterInfoService.setFilter(keyword);
}
-
- resetFilter(): void {
- this.feedFilterInfoService.resetFilter();
- }
-
- onClickOutside(): void {
- this.feedFilterInfoService.onClickOutside();
- }
}
diff --git a/projects/social_platform/src/app/ui/widgets/info-card/info-card.component.html b/projects/social_platform/src/app/ui/widgets/info-card/info-card.component.html
index da10464c3..b30e41b1f 100644
--- a/projects/social_platform/src/app/ui/widgets/info-card/info-card.component.html
+++ b/projects/social_platform/src/app/ui/widgets/info-card/info-card.component.html
@@ -47,7 +47,7 @@
[routerLink]="AppRoutes.projects.detail(info()?.id)"
[attr.aria-label]="
'Открыть проект «' +
- info()?.name +
+ (info()?.name?.trim() || 'Проект без названия') +
'»' +
(programName() ? '. Программа: ' + programName() : '')
"
@@ -143,7 +143,11 @@
@if (isProjectCard()) {
- {{ info().name }}
+
} @else if (type() === "projects" || type() === "invite") {
@if (info().name) {
{{ info().name }}
diff --git a/projects/social_platform/src/app/ui/widgets/info-card/info-card.component.scss b/projects/social_platform/src/app/ui/widgets/info-card/info-card.component.scss
index aace0eabf..541dd8399 100644
--- a/projects/social_platform/src/app/ui/widgets/info-card/info-card.component.scss
+++ b/projects/social_platform/src/app/ui/widgets/info-card/info-card.component.scss
@@ -1,21 +1,46 @@
/** @format */
@use "styles/ui-foundation";
-
-/** @format */
-
@use "styles/responsive";
.card {
&__body {
- @include ui-foundation.card;
+ @media screen and (max-width: 999px) {
+ @include ui-foundation.card;
+ }
position: relative;
display: flex;
flex-direction: column;
width: 156px;
- height: auto;
- min-height: 180px;
+
+ @media screen and (max-width: 999px) {
+ height: auto;
+ }
+
+ @media screen and (min-width: 1000px) {
+ height: 180px;
+ }
+
+ @media screen and (max-width: 999px) {
+ min-height: 180px;
+ }
+
+ @media screen and (min-width: 1000px) {
+ padding: 15px 0 12px;
+ }
+
+ @media screen and (min-width: 1000px) {
+ background-color: var(--light-white);
+ }
+
+ @media screen and (min-width: 1000px) {
+ border: 0.5px solid var(--medium-grey-for-outline);
+ }
+
+ @media screen and (min-width: 1000px) {
+ border-radius: var(--rounded-xl);
+ }
&--empty {
background: transparent;
@@ -38,7 +63,6 @@
}
}
- /* Ссылка занимает прежнее место контента; CTA внутри не создаёт второй tab stop. */
&__project-link {
display: flex;
flex: 1;
@@ -52,11 +76,55 @@
}
}
- /* CTA занимает ширину контента, сохраняя единственную ссылку на проект. */
&__project-action {
- @include ui-foundation.button;
+ @media screen and (max-width: 999px) {
+ @include ui-foundation.button;
+ }
+
+ @media screen and (min-width: 1000px) {
+ display: inline-flex;
+ }
+
+ @media screen and (min-width: 1000px) {
+ align-items: center;
+ }
+
+ @media screen and (min-width: 1000px) {
+ justify-content: center;
+ }
width: 100%;
+
+ @media screen and (min-width: 1000px) {
+ padding: 4px 24px;
+ }
+
+ @media screen and (min-width: 1000px) {
+ color: var(--white);
+ }
+
+ @media screen and (min-width: 1000px) {
+ background: var(--accent);
+ }
+
+ @media screen and (min-width: 1000px) {
+ border: 0.5px solid transparent;
+ }
+
+ @media screen and (min-width: 1000px) {
+ border-radius: var(--rounded-xxl);
+ }
+
+ @media screen and (min-width: 1000px) {
+ transition: all 0.2s;
+ }
+
+ @media screen and (min-width: 1000px) {
+ &:hover {
+ background-color: var(--accent-medium);
+ box-shadow: -2px 3px 3px rgb(51 51 51 / 20%);
+ }
+ }
}
&__subscription-action {
@@ -237,7 +305,6 @@
width: 100px;
}
- /* Общая геометрия проектов не затрагивает приглашения, участников и пустые карточки. */
&--project {
.card__content {
padding: 27px 12px 0;
@@ -245,8 +312,6 @@
.card__head {
width: 100%;
-
- /* Короткое название не резервирует пустую вторую строку перед описанием. */
margin-bottom: 2px;
> div {
@@ -256,7 +321,7 @@
}
.card__name {
- /* stylelint-disable-next-line value-no-vendor-prefix -- Префикс нужен для двухстрочного ellipsis. */
+ /* stylelint-disable-next-line value-no-vendor-prefix */
display: -webkit-box;
max-height: 30px;
margin: 0;
@@ -270,28 +335,42 @@
}
.card__description {
- /* Место удалённой отрасли отдано описанию без увеличения внешней карточки. */
flex: 0 0 52px;
width: 100%;
height: 52px;
min-height: 52px;
p {
- /* stylelint-disable-next-line value-no-vendor-prefix -- Префикс ограничивает описание четырьмя строками. */
+ /* stylelint-disable-next-line value-no-vendor-prefix */
display: -webkit-box;
overflow: hidden;
- font-size: var(--ui-font-caption);
line-height: 13px;
-webkit-line-clamp: 4;
-webkit-box-orient: vertical;
+
+ @media screen and (max-width: 999px) {
+ font-size: var(--ui-font-caption);
+ }
+
+ @media screen and (min-width: 1000px) {
+ font-size: 10px;
+ }
}
}
.card__project-action-label {
- font-size: var(--ui-font-caption);
- font-weight: 600;
line-height: 12px;
white-space: nowrap;
+
+ @media screen and (max-width: 999px) {
+ font-size: var(--ui-font-caption);
+ font-weight: 600;
+ }
+
+ @media screen and (min-width: 1000px) {
+ font-size: 10px;
+ font-weight: 600;
+ }
}
.card__footer,
@@ -301,7 +380,6 @@
}
}
- /* Нижний блок имеет постоянную высоту: длинный текст не сдвигает роль и CTA. */
&--my-project {
.card__body {
padding-bottom: 8px;
@@ -321,9 +399,16 @@
.card__name {
max-height: 28px;
- font-size: var(--ui-font-caption);
line-height: 14px;
text-align: center;
+
+ @media screen and (max-width: 999px) {
+ font-size: var(--ui-font-caption);
+ }
+
+ @media screen and (min-width: 1000px) {
+ font-size: 11px;
+ }
}
.card__description {
@@ -367,7 +452,6 @@
}
}
- /* Приглашения в списке и правой колонке используют одну компактную геометрию. */
&--invite {
.card__body {
padding-bottom: 6px;
@@ -388,7 +472,7 @@
}
.card__name {
- /* stylelint-disable-next-line value-no-vendor-prefix -- Освободившаяся строка сохраняет длинное название. */
+ /* stylelint-disable-next-line value-no-vendor-prefix */
display: -webkit-box;
max-height: 30px;
overflow: hidden;
@@ -405,12 +489,19 @@
}
.card__user {
- font-size: var(--ui-font-caption);
line-height: 13px;
+
+ @media screen and (max-width: 999px) {
+ font-size: var(--ui-font-caption);
+ }
+
+ @media screen and (min-width: 1000px) {
+ font-size: 10px;
+ }
}
.card__user--invite {
- /* stylelint-disable-next-line value-no-vendor-prefix -- Две строки сохраняют место для действий. */
+ /* stylelint-disable-next-line value-no-vendor-prefix */
display: -webkit-box;
overflow: hidden;
font-size: var(--ui-font-small);
@@ -556,78 +647,93 @@
}
}
-@include responsive.apply-mobile {
- :host {
- display: block;
- width: 100%;
- min-width: 0;
- }
-
- .card__body {
- width: 100%;
- height: auto;
- min-height: 200px;
- }
+@media screen and (max-width: 999px) {
+ @include responsive.apply-below-desktop {
+ :host {
+ display: block;
+ width: min(100%, var(--ui-mobile-entity-card-width));
+ min-width: 0;
+ }
- .card__content {
- padding-right: 16px;
- padding-left: 16px;
- overflow: visible;
- }
+ .card__body {
+ width: 100%;
+ height: auto;
+ min-height: 244px;
+ }
- .card__head {
- width: 100%;
- }
+ .card__content {
+ padding-right: 16px;
+ padding-left: 16px;
+ overflow: visible;
+ }
- .card__name {
- max-width: 100%;
- overflow-wrap: anywhere;
- white-space: normal;
- }
+ .card__head {
+ width: 100%;
+ }
- .card--project,
- .card--my-project {
.card__name {
- display: block;
- max-height: none;
- font-size: var(--ui-font-body);
- line-height: 20px;
- -webkit-line-clamp: unset;
+ max-width: 100%;
+ overflow-wrap: anywhere;
+ white-space: normal;
}
- .card__description {
+ .card--project,
+ .card--my-project {
+ .card__name {
+ display: block;
+ max-height: none;
+ font-size: var(--ui-font-body);
+ line-height: 20px;
+ -webkit-line-clamp: unset;
+ }
+
+ .card__description {
+ height: auto;
+ font-size: var(--ui-font-body);
+ line-height: 20px;
+ }
+ }
+
+ .card__context {
height: auto;
- font-size: var(--ui-font-body);
- line-height: 20px;
+ min-height: 24px;
+ overflow-wrap: anywhere;
+ white-space: normal;
}
- }
- .card__context {
- height: auto;
- min-height: 24px;
- overflow-wrap: anywhere;
- white-space: normal;
- }
+ .card__role,
+ .card__access-label {
+ font-size: var(--ui-font-small);
+ line-height: 16px;
+ }
- .card__role,
- .card__access-label {
- font-size: var(--ui-font-small);
- line-height: 16px;
- }
+ .card__description {
+ flex-basis: auto;
+ width: 100%;
+ height: auto;
+ min-height: 24px;
+ }
- .card__description {
- flex-basis: auto;
- width: 100%;
- height: auto;
- min-height: 24px;
- }
+ .card__project-action {
+ align-self: center;
+ width: auto;
+ min-height: 44px;
+ }
- .card__project-action {
- min-height: 44px;
- }
+ .card--my-project .card__program-name {
+ font-size: var(--ui-font-small);
+ line-height: 16px;
+ }
- .card__subscription-action {
- width: 44px;
- height: 44px;
+ .card--project .card__description p,
+ .card--my-project .card__description p {
+ font-size: var(--ui-font-small);
+ line-height: 18px;
+ }
+
+ .card__subscription-action {
+ width: 44px;
+ height: 44px;
+ }
}
}
diff --git a/projects/social_platform/src/app/ui/widgets/news-card/feed-news-modal/feed-news-modal.component.scss b/projects/social_platform/src/app/ui/widgets/news-card/feed-news-modal/feed-news-modal.component.scss
index 2c89b44b7..6ba478aee 100644
--- a/projects/social_platform/src/app/ui/widgets/news-card/feed-news-modal/feed-news-modal.component.scss
+++ b/projects/social_platform/src/app/ui/widgets/news-card/feed-news-modal/feed-news-modal.component.scss
@@ -1,6 +1,5 @@
/** @format */
-/* Overlay находится вне host. Все правила ограничены локальным классом окна чтения. */
.modal .modal__body.feed-news-modal-body {
box-sizing: border-box;
display: block;
@@ -35,19 +34,35 @@
&__badge {
padding: 4px 10px;
- font-size: var(--ui-font-caption);
- font-weight: 600;
color: var(--accent-dark);
background: var(--accent-light);
border-radius: var(--rounded-xxl);
+
+ @media screen and (max-width: 999px) {
+ font-size: var(--ui-font-caption);
+ font-weight: 600;
+ }
+
+ @media screen and (min-width: 1000px) {
+ font-size: 11px;
+ font-weight: 600;
+ }
}
time {
margin-left: auto;
- font-size: var(--ui-font-caption);
- font-variant-numeric: tabular-nums;
color: var(--grey-for-text);
white-space: nowrap;
+
+ @media screen and (max-width: 999px) {
+ font-size: var(--ui-font-caption);
+ font-variant-numeric: tabular-nums;
+ }
+
+ @media screen and (min-width: 1000px) {
+ font-size: 11px;
+ font-variant-numeric: tabular-nums;
+ }
}
button {
@@ -69,7 +84,14 @@
padding: 0;
font-size: 28px;
line-height: 1;
- border-radius: var(--ui-radius-dialog);
+
+ @media screen and (max-width: 999px) {
+ border-radius: var(--ui-radius-dialog);
+ }
+
+ @media screen and (min-width: 1000px) {
+ border-radius: var(--rounded-lg);
+ }
}
&__scroll {
@@ -101,8 +123,15 @@
}
&__source span {
- font-size: var(--ui-font-caption);
color: var(--grey-for-text);
+
+ @media screen and (max-width: 999px) {
+ font-size: var(--ui-font-caption);
+ }
+
+ @media screen and (min-width: 1000px) {
+ font-size: 11px;
+ }
}
&__source a {
diff --git a/projects/social_platform/src/app/ui/widgets/news-card/feed-news-preview/feed-news-preview.component.scss b/projects/social_platform/src/app/ui/widgets/news-card/feed-news-preview/feed-news-preview.component.scss
index 46b9097bf..d3e1c564e 100644
--- a/projects/social_platform/src/app/ui/widgets/news-card/feed-news-preview/feed-news-preview.component.scss
+++ b/projects/social_platform/src/app/ui/widgets/news-card/feed-news-preview/feed-news-preview.component.scss
@@ -1,9 +1,6 @@
/** @format */
@use "styles/ui-foundation";
-
-/** @format */
-
@use "styles/feed-card";
:host {
@@ -12,7 +9,9 @@
}
.feed-preview {
- @include ui-foundation.card;
+ @media screen and (max-width: 999px) {
+ @include ui-foundation.card;
+ }
cursor: pointer;
@@ -23,7 +22,6 @@
outline-offset: 3px;
}
- /* Ссылки полного текста доступны в окне: скрытая часть clamp не создаёт невидимые tab-stop. */
.feed-card__description {
white-space: pre-line;
}
@@ -98,10 +96,17 @@
right: 4px;
bottom: 4px;
padding: 2px 4px;
- font-size: var(--ui-font-caption);
color: var(--white);
background: var(--ui-media-backdrop);
border-radius: 4px;
+
+ @media screen and (max-width: 999px) {
+ font-size: var(--ui-font-caption);
+ }
+
+ @media screen and (min-width: 1000px) {
+ font-size: 10px;
+ }
}
button.feed-preview__more {
@@ -112,9 +117,16 @@
}
&__attachments {
- font-size: var(--ui-font-caption);
line-height: 16px;
color: var(--grey-for-text);
+
+ @media screen and (max-width: 999px) {
+ font-size: var(--ui-font-caption);
+ }
+
+ @media screen and (min-width: 1000px) {
+ font-size: 11px;
+ }
}
&__actions {
diff --git a/projects/social_platform/src/app/ui/widgets/news-card/news-card.component.scss b/projects/social_platform/src/app/ui/widgets/news-card/news-card.component.scss
index d49de7666..6fe340394 100644
--- a/projects/social_platform/src/app/ui/widgets/news-card/news-card.component.scss
+++ b/projects/social_platform/src/app/ui/widgets/news-card/news-card.component.scss
@@ -1,9 +1,6 @@
/** @format */
@use "styles/ui-foundation";
-
-/** @format */
-
@use "styles/typography";
@use "styles/responsive";
@@ -101,12 +98,12 @@
align-items: center;
}
- /* stylelint-disable value-no-vendor-prefix */
&__text {
color: var(--grey-for-text);
white-space: break-spaces;
p {
+ /* stylelint-disable-next-line value-no-vendor-prefix */
display: -webkit-box;
overflow: hidden;
color: var(--black);
@@ -127,7 +124,6 @@
-webkit-line-clamp: 3;
}
}
- /* stylelint-enable value-no-vendor-prefix */
&__edit-files {
display: flex;
@@ -256,6 +252,8 @@
}
}
-.news {
- @include ui-foundation.card;
+@media screen and (max-width: 999px) {
+ .news {
+ @include ui-foundation.card;
+ }
}
diff --git a/projects/social_platform/src/app/ui/widgets/news-form/news-form.component.scss b/projects/social_platform/src/app/ui/widgets/news-form/news-form.component.scss
index 4d65c475d..f8b4d5e3f 100644
--- a/projects/social_platform/src/app/ui/widgets/news-form/news-form.component.scss
+++ b/projects/social_platform/src/app/ui/widgets/news-form/news-form.component.scss
@@ -83,23 +83,25 @@
}
}
-@include responsive.apply-mobile {
- .form__input {
- min-width: 0;
- }
+@media screen and (max-width: 999px) {
+ @include responsive.apply-mobile {
+ .form__input {
+ min-width: 0;
+ }
- .form__send {
- flex-shrink: 0;
- min-width: 44px;
- min-height: 44px;
- margin-left: 8px;
- }
+ .form__send {
+ flex-shrink: 0;
+ min-width: 44px;
+ min-height: 44px;
+ margin-left: 8px;
+ }
- .footer__attach {
- display: inline-flex;
- align-items: center;
- justify-content: center;
- min-width: 44px;
- min-height: 44px;
+ .footer__attach {
+ display: inline-flex;
+ align-items: center;
+ justify-content: center;
+ min-width: 44px;
+ min-height: 44px;
+ }
}
}
diff --git a/projects/social_platform/src/app/ui/widgets/project-invite/project-invite-dialog.component.scss b/projects/social_platform/src/app/ui/widgets/project-invite/project-invite-dialog.component.scss
index c61da7a54..a164e32c7 100644
--- a/projects/social_platform/src/app/ui/widgets/project-invite/project-invite-dialog.component.scss
+++ b/projects/social_platform/src/app/ui/widgets/project-invite/project-invite-dialog.component.scss
@@ -1,25 +1,43 @@
/** @format */
-/* Стили portal ограничены оболочкой приглашения и не меняют остальные app-modal. */
.modal .modal__body.project-invite-body {
left: 50%;
display: block;
- width: min(var(--ui-dialog-md), calc(100% - 24px));
- max-width: calc(100% - 24px);
- max-height: min(720px, calc(var(--visual-viewport-height, 100dvh) - 48px));
padding: 0;
overflow: visible;
- border-radius: var(--ui-radius-dialog);
+
+ @media screen and (max-width: 999px) {
+ width: min(var(--ui-dialog-md), calc(100% - 24px));
+ max-width: calc(100% - 24px);
+ max-height: min(720px, calc(var(--visual-viewport-height, 100dvh) - 48px));
+ border-radius: var(--ui-radius-dialog);
+ }
+
+ @media screen and (min-width: 1000px) {
+ width: min(552px, calc(100% - 24px));
+ max-width: calc(100% - 24px);
+ max-height: min(720px, calc(100dvh - 48px));
+ border-radius: var(--rounded-lg);
+ }
}
.project-invite {
display: flex;
flex-direction: column;
- max-height: min(720px, calc(var(--visual-viewport-height, 100dvh) - 48px));
- padding: var(--ui-dialog-padding);
color: var(--black);
background: var(--white);
- border-radius: var(--ui-radius-dialog);
+
+ @media screen and (max-width: 999px) {
+ max-height: min(720px, calc(var(--visual-viewport-height, 100dvh) - 48px));
+ padding: var(--ui-dialog-padding);
+ border-radius: var(--ui-radius-dialog);
+ }
+
+ @media screen and (min-width: 1000px) {
+ max-height: min(720px, calc(100dvh - 48px));
+ padding: 24px;
+ border-radius: var(--rounded-lg);
+ }
&,
* {
@@ -78,7 +96,14 @@
height: 48px;
color: var(--accent);
background: color-mix(in srgb, var(--accent) 8%, white);
- border-radius: var(--ui-radius-dialog);
+
+ @media screen and (max-width: 999px) {
+ border-radius: var(--ui-radius-dialog);
+ }
+
+ @media screen and (min-width: 1000px) {
+ border-radius: var(--rounded-lg);
+ }
}
&__close {
@@ -144,13 +169,23 @@
justify-content: center;
min-height: 44px;
padding: 9px 12px;
- font-size: var(--ui-font-body);
- font-weight: 600;
line-height: 1.4;
color: var(--accent);
background: var(--white);
- border: 1px solid var(--accent);
- border-radius: var(--ui-radius-dialog);
+
+ @media screen and (max-width: 999px) {
+ font-size: var(--ui-font-body);
+ font-weight: 600;
+ border: 1px solid var(--accent);
+ border-radius: var(--ui-radius-dialog);
+ }
+
+ @media screen and (min-width: 1000px) {
+ font-size: 13px;
+ font-weight: 600;
+ border: 1px solid var(--accent);
+ border-radius: var(--rounded-lg);
+ }
}
.invite-button--primary {
@@ -169,8 +204,16 @@
min-height: 44px;
padding: 0 12px;
color: var(--grey-for-text);
- border: 1px solid color-mix(in srgb, var(--accent) 45%, white);
- border-radius: var(--ui-radius-dialog);
+
+ @media screen and (max-width: 999px) {
+ border: 1px solid color-mix(in srgb, var(--accent) 45%, white);
+ border-radius: var(--ui-radius-dialog);
+ }
+
+ @media screen and (min-width: 1000px) {
+ border: 1px solid color-mix(in srgb, var(--accent) 45%, white);
+ border-radius: var(--rounded-lg);
+ }
}
.invite-search:focus-within {
@@ -196,9 +239,17 @@
.invite-label {
display: block;
margin-bottom: 8px;
- font-size: var(--ui-font-body);
- font-weight: 600;
color: var(--accent);
+
+ @media screen and (max-width: 999px) {
+ font-size: var(--ui-font-body);
+ font-weight: 600;
+ }
+
+ @media screen and (min-width: 1000px) {
+ font-size: 13px;
+ font-weight: 600;
+ }
}
.invite-rows {
@@ -216,8 +267,16 @@
padding: 10px 12px;
text-align: left;
background: var(--white);
- border: 1px solid var(--medium-grey-for-outline);
- border-radius: var(--ui-radius-dialog);
+
+ @media screen and (max-width: 999px) {
+ border: 1px solid var(--medium-grey-for-outline);
+ border-radius: var(--ui-radius-dialog);
+ }
+
+ @media screen and (min-width: 1000px) {
+ border: 1px solid var(--medium-grey-for-outline);
+ border-radius: var(--rounded-lg);
+ }
}
.invite-row--selected {
@@ -260,19 +319,34 @@
.invite-copy strong {
display: block;
- font-size: var(--ui-font-body);
- font-weight: 600;
line-height: 1.5;
overflow-wrap: anywhere;
+
+ @media screen and (max-width: 999px) {
+ font-size: var(--ui-font-body);
+ font-weight: 600;
+ }
+
+ @media screen and (min-width: 1000px) {
+ font-size: 13px;
+ font-weight: 600;
+ }
}
.invite-meta {
display: block;
margin-top: 3px;
- font-size: var(--ui-font-caption);
line-height: 1.4;
color: var(--grey-for-text);
overflow-wrap: anywhere;
+
+ @media screen and (max-width: 999px) {
+ font-size: var(--ui-font-caption);
+ }
+
+ @media screen and (min-width: 1000px) {
+ font-size: 11px;
+ }
}
.invite-avatar {
@@ -286,7 +360,14 @@
font-weight: 600;
color: var(--accent);
background: color-mix(in srgb, var(--accent) 9%, white);
- border-radius: var(--ui-radius-dialog);
+
+ @media screen and (max-width: 999px) {
+ border-radius: var(--ui-radius-dialog);
+ }
+
+ @media screen and (min-width: 1000px) {
+ border-radius: var(--rounded-lg);
+ }
}
.invite-avatar img {
@@ -297,10 +378,17 @@
.invite-helper {
padding: 22px 12px;
- font-size: var(--ui-font-body);
line-height: 1.6;
color: var(--grey-for-text);
text-align: center;
+
+ @media screen and (max-width: 999px) {
+ font-size: var(--ui-font-body);
+ }
+
+ @media screen and (min-width: 1000px) {
+ font-size: 13px;
+ }
}
.invite-error {
@@ -391,7 +479,6 @@
}
}
-/* Opt-in для окон команды: приглашение из профиля сохраняет прежнюю композицию. */
.project-invite.project-invite--compact {
.project-invite__symbol {
display: none;
diff --git a/projects/social_platform/src/app/ui/widgets/project-invite/project-invite-role-input.component.scss b/projects/social_platform/src/app/ui/widgets/project-invite/project-invite-role-input.component.scss
index b4657998d..9a3df46ff 100644
--- a/projects/social_platform/src/app/ui/widgets/project-invite/project-invite-role-input.component.scss
+++ b/projects/social_platform/src/app/ui/widgets/project-invite/project-invite-role-input.component.scss
@@ -1,4 +1,5 @@
/** @format */
+
:host {
display: block;
min-width: 0;
@@ -10,9 +11,17 @@
label {
display: block;
margin-bottom: 8px;
- font-size: var(--ui-font-body);
- font-weight: 600;
color: var(--accent);
+
+ @media screen and (max-width: 999px) {
+ font-size: var(--ui-font-body);
+ font-weight: 600;
+ }
+
+ @media screen and (min-width: 1000px) {
+ font-size: 13px;
+ font-weight: 600;
+ }
}
input {
@@ -39,9 +48,16 @@
p {
margin: 6px 0 0;
- font-size: var(--ui-font-caption);
line-height: 1.4;
color: var(--grey-for-text);
+
+ @media screen and (max-width: 999px) {
+ font-size: var(--ui-font-caption);
+ }
+
+ @media screen and (min-width: 1000px) {
+ font-size: 11px;
+ }
}
p.invalid {
@@ -68,14 +84,22 @@
width: 100%;
min-height: 44px;
padding: 10px;
- font: inherit;
- font-size: var(--ui-font-body);
color: var(--black);
text-align: left;
cursor: pointer;
background: transparent;
border: 0;
border-radius: var(--rounded-lg);
+
+ @media screen and (max-width: 999px) {
+ font: inherit;
+ font-size: var(--ui-font-body);
+ }
+
+ @media screen and (min-width: 1000px) {
+ font: inherit;
+ font-size: 13px;
+ }
}
button.active,
diff --git a/projects/social_platform/src/app/ui/widgets/project-vacancy-card/project-vacancy-card.component.scss b/projects/social_platform/src/app/ui/widgets/project-vacancy-card/project-vacancy-card.component.scss
index caaca621c..333a2f7a2 100644
--- a/projects/social_platform/src/app/ui/widgets/project-vacancy-card/project-vacancy-card.component.scss
+++ b/projects/social_platform/src/app/ui/widgets/project-vacancy-card/project-vacancy-card.component.scss
@@ -1,9 +1,6 @@
/** @format */
@use "styles/ui-foundation";
-
-/** @format */
-
@use "styles/components/vacancy-ui";
:host {
@@ -13,7 +10,10 @@
}
.vacancy {
- @include ui-foundation.card;
+ @media screen and (max-width: 999px) {
+ @include ui-foundation.card;
+ }
+
@include vacancy-ui.surface;
display: flex;
@@ -83,9 +83,16 @@
}
&__project-name {
- font-size: var(--ui-font-body);
line-height: 20px;
color: var(--black);
+
+ @media screen and (max-width: 999px) {
+ font-size: var(--ui-font-body);
+ }
+
+ @media screen and (min-width: 1000px) {
+ font-size: 13px;
+ }
}
&__specialization {
@@ -99,12 +106,13 @@
font-size: var(--ui-font-body);
line-height: 21px;
}
- /* stylelint-disable value-no-vendor-prefix */
+
&__role,
&__project-name,
&__specialization,
&__salary,
&__description p {
+ /* stylelint-disable-next-line value-no-vendor-prefix */
display: -webkit-box;
overflow: hidden;
overflow-wrap: anywhere;
@@ -124,7 +132,7 @@
@include vacancy-ui.link;
}
}
- /* stylelint-enable value-no-vendor-prefix */
+
&__empty {
@include vacancy-ui.secondary;
}
diff --git a/projects/social_platform/src/app/ui/widgets/projects-filter/projects-filter.component.scss b/projects/social_platform/src/app/ui/widgets/projects-filter/projects-filter.component.scss
index 3f54ff98b..2cdf708cb 100644
--- a/projects/social_platform/src/app/ui/widgets/projects-filter/projects-filter.component.scss
+++ b/projects/social_platform/src/app/ui/widgets/projects-filter/projects-filter.component.scss
@@ -106,3 +106,14 @@
}
}
}
+
+@media screen and (min-width: 1000px) {
+ .filter__titles button.ui-button {
+ font-family: Mont, sans-serif;
+ font-size: 10px;
+ font-style: normal;
+ font-weight: 400;
+ line-height: 130%;
+ color: var(--accent);
+ }
+}
diff --git a/projects/social_platform/src/app/ui/widgets/region-select/region-select.component.scss b/projects/social_platform/src/app/ui/widgets/region-select/region-select.component.scss
index 30cd0e0f2..d23d13459 100644
--- a/projects/social_platform/src/app/ui/widgets/region-select/region-select.component.scss
+++ b/projects/social_platform/src/app/ui/widgets/region-select/region-select.component.scss
@@ -24,7 +24,14 @@
&:focus {
border-color: var(--accent);
- box-shadow: var(--ui-focus-ring);
+
+ @media screen and (max-width: 999px) {
+ box-shadow: var(--ui-focus-ring);
+ }
+
+ @media screen and (min-width: 1000px) {
+ box-shadow: 0 0 6px rgb(109 40 255 / 30%);
+ }
}
}
@@ -36,7 +43,6 @@
&__clear {
position: absolute;
top: 50%;
- right: var(--ui-space-xs);
display: grid;
place-items: center;
padding: 4px;
@@ -45,6 +51,14 @@
background: transparent;
border: 0;
transform: translateY(-50%);
+
+ @media screen and (max-width: 999px) {
+ right: var(--ui-space-xs);
+ }
+
+ @media screen and (min-width: 1000px) {
+ right: 14px;
+ }
}
&__legacy {
diff --git a/projects/social_platform/src/app/ui/widgets/vacancy-card/vacancy-card.component.scss b/projects/social_platform/src/app/ui/widgets/vacancy-card/vacancy-card.component.scss
index bdd14a950..2235c0b71 100644
--- a/projects/social_platform/src/app/ui/widgets/vacancy-card/vacancy-card.component.scss
+++ b/projects/social_platform/src/app/ui/widgets/vacancy-card/vacancy-card.component.scss
@@ -1,9 +1,6 @@
/** @format */
@use "styles/ui-foundation";
-
-/** @format */
-
@use "styles/components/vacancy-ui";
:host {
@@ -13,13 +10,19 @@
}
.vacancy {
- @include ui-foundation.card;
+ @media screen and (max-width: 999px) {
+ @include ui-foundation.card;
+ }
display: flex;
flex-direction: column;
gap: 16px;
height: 100%;
+ @media screen and (min-width: 1000px) {
+ padding: 16px;
+ }
+
@include vacancy-ui.surface;
&__header {
diff --git a/projects/social_platform/src/app/ui/widgets/vacancy-created-dialog/vacancy-created-dialog.component.scss b/projects/social_platform/src/app/ui/widgets/vacancy-created-dialog/vacancy-created-dialog.component.scss
index 6823383d3..cf4495263 100644
--- a/projects/social_platform/src/app/ui/widgets/vacancy-created-dialog/vacancy-created-dialog.component.scss
+++ b/projects/social_platform/src/app/ui/widgets/vacancy-created-dialog/vacancy-created-dialog.component.scss
@@ -55,5 +55,11 @@
app-button {
flex-basis: auto;
}
+
+ @media screen and (min-width: 1000px) {
+ ::ng-deep .button {
+ min-height: 40px;
+ }
+ }
}
}
diff --git a/projects/social_platform/src/app/ui/widgets/vacancy-filter/vacancy-filter.component.scss b/projects/social_platform/src/app/ui/widgets/vacancy-filter/vacancy-filter.component.scss
index 85928ae79..1747438ee 100644
--- a/projects/social_platform/src/app/ui/widgets/vacancy-filter/vacancy-filter.component.scss
+++ b/projects/social_platform/src/app/ui/widgets/vacancy-filter/vacancy-filter.component.scss
@@ -53,6 +53,10 @@
> a ::ng-deep .button {
width: 100%;
+
+ @media screen and (min-width: 1000px) {
+ height: 38px;
+ }
}
@include responsive.apply-desktop {
@@ -166,3 +170,14 @@
a:hover {
cursor: pointer;
}
+
+@media screen and (min-width: 1000px) {
+ .desktop__header button.ui-button {
+ font-family: Mont, sans-serif;
+ font-size: 10px;
+ font-style: normal;
+ font-weight: 400;
+ line-height: 130%;
+ color: var(--accent);
+ }
+}
diff --git a/projects/social_platform/src/app/ui/widgets/vacancy-skills/vacancy-skills.component.scss b/projects/social_platform/src/app/ui/widgets/vacancy-skills/vacancy-skills.component.scss
index b47228d1e..576d749ac 100644
--- a/projects/social_platform/src/app/ui/widgets/vacancy-skills/vacancy-skills.component.scss
+++ b/projects/social_platform/src/app/ui/widgets/vacancy-skills/vacancy-skills.component.scss
@@ -22,10 +22,25 @@
}
&__toggle {
- min-height: 28px;
+ @media screen and (max-width: 999px) {
+ min-height: 44px;
+ }
+
+ @media screen and (min-width: 1000px) {
+ min-height: 28px;
+ }
+
padding: 4px 10px;
font: inherit;
- font-size: var(--ui-font-body);
+
+ @media screen and (max-width: 999px) {
+ font-size: var(--ui-font-body);
+ }
+
+ @media screen and (min-width: 1000px) {
+ font-size: 13px;
+ }
+
line-height: 18px;
color: var(--black);
cursor: pointer;
diff --git a/projects/social_platform/src/app/ui/widgets/vacancy-status/vacancy-status.component.scss b/projects/social_platform/src/app/ui/widgets/vacancy-status/vacancy-status.component.scss
index ac84ea190..793a7890e 100644
--- a/projects/social_platform/src/app/ui/widgets/vacancy-status/vacancy-status.component.scss
+++ b/projects/social_platform/src/app/ui/widgets/vacancy-status/vacancy-status.component.scss
@@ -5,3 +5,38 @@
flex-shrink: 0;
max-width: 100%;
}
+
+@media screen and (min-width: 1000px) {
+ .status {
+ display: inline-flex;
+ align-items: center;
+ min-height: 26px;
+ padding: 3px 10px;
+ font-size: 12px;
+ font-weight: 400;
+ line-height: 18px;
+ color: var(--black);
+ overflow-wrap: anywhere;
+ background: var(--light-gray);
+ border: 1px solid var(--gray);
+ border-radius: var(--rounded-xxl);
+
+ &--success {
+ color: var(--green-dark);
+ background: var(--green-light);
+ border-color: var(--green);
+ }
+
+ &--pending {
+ color: var(--black);
+ background: var(--accent-light);
+ border-color: var(--accent-light);
+ }
+
+ &--declined {
+ color: var(--black);
+ background: var(--red-light);
+ border-color: var(--red-light);
+ }
+ }
+}
diff --git a/projects/social_platform/src/styles.scss b/projects/social_platform/src/styles.scss
index 61133c798..de6d8b584 100644
--- a/projects/social_platform/src/styles.scss
+++ b/projects/social_platform/src/styles.scss
@@ -27,10 +27,13 @@
:root {
--app-height: 100vh;
- --page-gutter: 16px;
- @supports (height: 100dvh) {
- --app-height: 100dvh;
+ @media screen and (max-width: 999px) {
+ --page-gutter: 16px;
+
+ @supports (height: 100dvh) {
+ --app-height: 100dvh;
+ }
}
}
diff --git a/projects/social_platform/src/styles/_course-task.scss b/projects/social_platform/src/styles/_course-task.scss
index c68503472..c5e36045d 100644
--- a/projects/social_platform/src/styles/_course-task.scss
+++ b/projects/social_platform/src/styles/_course-task.scss
@@ -13,14 +13,12 @@
max-width: 100%;
overflow-wrap: anywhere;
}
-
.#{$name}__header,
.#{$name}__body,
.#{$name}__content {
min-height: 0;
padding: 16px;
}
-
.#{$name}__files,
.#{$name}__content {
::ng-deep app-upload-file .control {
diff --git a/projects/social_platform/src/styles/_feed-card.scss b/projects/social_platform/src/styles/_feed-card.scss
index 9ab53c322..83a269b96 100644
--- a/projects/social_platform/src/styles/_feed-card.scss
+++ b/projects/social_platform/src/styles/_feed-card.scss
@@ -1,198 +1,392 @@
/** @format */
-// Высоту задаёт содержимое самого высокого соседа в строке grid, а не общий media slot.
-// CTA остаётся снизу строки; detail/profile этот миксин не используют.
@mixin layout {
- box-sizing: border-box;
- display: flex;
- flex-direction: column;
- gap: 10px;
- width: 100%;
- min-width: 0;
- height: 100%;
- padding: 20px;
- color: var(--feed-text, var(--black));
- background: var(--feed-background, var(--light-white));
- border: 1px solid var(--medium-grey-for-outline);
- border-radius: var(--rounded-xl);
-
- > * {
- flex-shrink: 0;
+ @media screen and (max-width: 999px) {
+ box-sizing: border-box;
+ display: flex;
+ flex-direction: column;
+ gap: 10px;
+ width: 100%;
min-width: 0;
- min-height: 0;
- }
+ height: 100%;
+ padding: 20px;
+ color: var(--feed-text, var(--black));
+ background: var(--feed-background, var(--light-white));
+ border: 1px solid var(--medium-grey-for-outline);
+ border-radius: var(--rounded-xl);
- a:focus-visible,
- button:focus-visible {
- outline: 2px solid var(--feed-text, var(--accent-dark));
- outline-offset: 3px;
- }
+ > * {
+ flex-shrink: 0;
+ min-width: 0;
+ min-height: 0;
+ }
- .feed-card__meta {
- display: flex;
- gap: 8px;
- align-items: center;
- justify-content: space-between;
- min-height: 26px;
- }
+ a:focus-visible,
+ button:focus-visible {
+ outline: 2px solid var(--feed-text, var(--accent-dark));
+ outline-offset: 3px;
+ }
- .feed-card__type {
- display: inline-flex;
- align-items: center;
- height: 26px;
- padding: 0 10px;
- overflow: hidden;
- font-size: 11px;
- font-weight: 600;
- line-height: 16px;
- color: var(--accent-dark);
- text-overflow: ellipsis;
- white-space: nowrap;
- background: var(--accent-light);
- border: 1px solid transparent;
- border-radius: var(--rounded-xxl);
- }
+ .feed-card__meta {
+ display: flex;
+ gap: 8px;
+ align-items: center;
+ justify-content: space-between;
+ min-height: 26px;
+ }
- .feed-card__date {
- flex-shrink: 0;
- font-size: 10px;
- font-variant-numeric: tabular-nums;
- line-height: 14px;
- color: var(--feed-secondary, var(--grey-for-text));
- }
+ .feed-card__type {
+ display: inline-flex;
+ align-items: center;
+ height: 26px;
+ padding: 0 10px;
+ overflow: hidden;
+ font-size: 11px;
+ font-weight: 600;
+ line-height: 16px;
+ color: var(--accent-dark);
+ text-overflow: ellipsis;
+ white-space: nowrap;
+ background: var(--accent-light);
+ border: 1px solid transparent;
+ border-radius: var(--rounded-xxl);
+ }
- .feed-card__source {
- display: flex;
- gap: 10px;
- align-items: center;
- min-height: 40px;
- }
+ .feed-card__date {
+ flex-shrink: 0;
+ font-size: 10px;
+ font-variant-numeric: tabular-nums;
+ line-height: 14px;
+ color: var(--feed-secondary, var(--grey-for-text));
+ }
- .feed-card__avatar {
- flex: 0 0 40px;
- width: 40px;
- height: 40px;
- border-radius: 50%;
- object-fit: cover;
- }
+ .feed-card__source {
+ display: flex;
+ gap: 10px;
+ align-items: center;
+ min-height: 40px;
+ }
- .feed-card__source-text {
- display: flex;
- flex-direction: column;
- gap: 3px;
- min-width: 0;
- }
+ .feed-card__avatar {
+ flex: 0 0 40px;
+ width: 40px;
+ height: 40px;
+ border-radius: 50%;
+ object-fit: cover;
+ }
- .feed-card__eyebrow {
- font-size: 10px;
- line-height: 14px;
- color: var(--feed-secondary, var(--grey-for-text));
- }
+ .feed-card__source-text {
+ display: flex;
+ flex-direction: column;
+ gap: 3px;
+ min-width: 0;
+ }
- .feed-card__source-name {
- overflow: hidden;
- font-size: 13px;
- font-weight: 600;
- line-height: 17px;
- color: inherit;
- text-overflow: ellipsis;
- white-space: nowrap;
- }
+ .feed-card__eyebrow {
+ font-size: 10px;
+ line-height: 14px;
+ color: var(--feed-secondary, var(--grey-for-text));
+ }
- /* stylelint-disable value-no-vendor-prefix -- Line-clamp ограничивает текст, сохраняя полное значение в DOM. */
- .feed-card__title,
- .feed-card__description {
- display: -webkit-box;
- margin: 0;
- overflow: hidden;
- overflow-wrap: anywhere;
- -webkit-box-orient: vertical;
- }
- /* stylelint-enable value-no-vendor-prefix */
+ .feed-card__source-name {
+ overflow: hidden;
+ font-size: 13px;
+ font-weight: 600;
+ line-height: 17px;
+ color: inherit;
+ text-overflow: ellipsis;
+ white-space: nowrap;
+ }
- .feed-card__title {
- font-size: 18px;
- font-weight: 600;
- line-height: 22px;
- -webkit-line-clamp: 2;
- }
+ .feed-card__title,
+ .feed-card__description {
+ /* stylelint-disable-next-line value-no-vendor-prefix */
+ display: -webkit-box;
+ margin: 0;
+ overflow: hidden;
+ overflow-wrap: anywhere;
+ -webkit-box-orient: vertical;
+ }
- .feed-card__description {
- font-size: 12px;
- font-weight: 400;
- line-height: 18px;
- color: var(--feed-secondary, var(--grey-for-text));
- -webkit-line-clamp: 3;
- }
+ .feed-card__title {
+ font-size: 18px;
+ font-weight: 600;
+ line-height: 22px;
+ -webkit-line-clamp: 2;
+ }
- .feed-card__metadata {
- display: flex;
- flex-direction: column;
- gap: 8px;
- align-items: flex-start;
- min-width: 0;
+ .feed-card__description {
+ font-size: 12px;
+ font-weight: 400;
+ line-height: 18px;
+ color: var(--feed-secondary, var(--grey-for-text));
+ -webkit-line-clamp: 3;
+ }
+
+ .feed-card__metadata {
+ display: flex;
+ flex-direction: column;
+ gap: 8px;
+ align-items: flex-start;
+ min-width: 0;
- &:empty {
- display: none;
+ &:empty {
+ display: none;
+ }
}
- }
- .feed-card__skills {
- display: flex;
- gap: 6px;
- width: 100%;
- padding: 0;
- margin: 0;
- list-style: none;
- }
+ .feed-card__skills {
+ display: flex;
+ flex-wrap: wrap;
+ gap: 6px;
+ width: 100%;
+ padding: 0;
+ margin: 0;
+ list-style: none;
+ }
- .feed-card__chip {
- box-sizing: border-box;
- flex-shrink: 0;
- max-width: 100%;
- height: 24px;
- padding: 4px 8px;
- overflow: hidden;
- font-size: 10px;
- font-weight: 400;
- line-height: 16px;
- color: var(--accent-dark);
- text-overflow: ellipsis;
- white-space: nowrap;
- background: var(--accent-light);
- border-radius: var(--rounded-lg);
-
- &--skill {
- flex-shrink: 1;
- max-width: calc((100% - 18px) / 4);
- }
-
- &--industry {
- color: var(--green-dark);
- background: var(--green-light);
+ .feed-card__chip {
+ box-sizing: border-box;
+ flex-shrink: 0;
+ max-width: 100%;
+ min-height: 24px;
+ padding: 4px 8px;
+ font-size: 12px;
+ font-weight: 400;
+ line-height: 16px;
+ color: var(--accent-dark);
+ overflow-wrap: anywhere;
+ white-space: normal;
+ background: var(--accent-light);
+ border-radius: var(--rounded-lg);
+
+ &--skill {
+ flex-shrink: 1;
+ max-width: 100%;
+ }
+
+ &--industry {
+ color: var(--green-dark);
+ background: var(--green-light);
+ }
+ }
+
+ .feed-card__cta {
+ box-sizing: border-box;
+ display: flex;
+ align-items: center;
+ align-self: flex-start;
+ justify-content: center;
+ max-width: 100%;
+ min-height: 44px;
+ padding: 10px 16px;
+ margin-top: auto;
+ font-size: 12px;
+ font-weight: 600;
+ line-height: 16px;
+ color: var(--feed-cta-text, var(--white));
+ text-align: center;
+ background: var(--feed-cta-background, var(--accent));
+ border: 1px solid transparent;
+ border-radius: var(--rounded-xxl);
+
+ &:hover {
+ filter: brightness(0.95);
+ }
}
}
- .feed-card__cta {
+ @media screen and (min-width: 1000px) {
box-sizing: border-box;
display: flex;
- align-items: center;
- justify-content: center;
+ flex-direction: column;
+ gap: 10px;
width: 100%;
- height: 36px;
- padding: 0 12px;
- margin-top: auto;
- font-size: 12px;
- font-weight: 600;
- line-height: 16px;
- color: var(--feed-cta-text, var(--white));
- text-align: center;
- background: var(--feed-cta-background, var(--accent));
- border: 1px solid transparent;
- border-radius: var(--rounded-xxl);
-
- &:hover {
- filter: brightness(0.95);
+ min-width: 0;
+ height: 100%;
+ padding: 20px;
+ color: var(--feed-text, var(--black));
+ background: var(--feed-background, var(--light-white));
+ border: 1px solid var(--medium-grey-for-outline);
+ border-radius: var(--rounded-xl);
+
+ > * {
+ flex-shrink: 0;
+ min-width: 0;
+ min-height: 0;
+ }
+
+ a:focus-visible,
+ button:focus-visible {
+ outline: 2px solid var(--feed-text, var(--accent-dark));
+ outline-offset: 3px;
+ }
+
+ .feed-card__meta {
+ display: flex;
+ gap: 8px;
+ align-items: center;
+ justify-content: space-between;
+ min-height: 26px;
+ }
+
+ .feed-card__type {
+ display: inline-flex;
+ align-items: center;
+ height: 26px;
+ padding: 0 10px;
+ overflow: hidden;
+ font-size: 11px;
+ font-weight: 600;
+ line-height: 16px;
+ color: var(--accent-dark);
+ text-overflow: ellipsis;
+ white-space: nowrap;
+ background: var(--accent-light);
+ border: 1px solid transparent;
+ border-radius: var(--rounded-xxl);
+ }
+
+ .feed-card__date {
+ flex-shrink: 0;
+ font-size: 10px;
+ font-variant-numeric: tabular-nums;
+ line-height: 14px;
+ color: var(--feed-secondary, var(--grey-for-text));
+ }
+
+ .feed-card__source {
+ display: flex;
+ gap: 10px;
+ align-items: center;
+ min-height: 40px;
+ }
+
+ .feed-card__avatar {
+ flex: 0 0 40px;
+ width: 40px;
+ height: 40px;
+ border-radius: 50%;
+ object-fit: cover;
+ }
+
+ .feed-card__source-text {
+ display: flex;
+ flex-direction: column;
+ gap: 3px;
+ min-width: 0;
+ }
+
+ .feed-card__eyebrow {
+ font-size: 10px;
+ line-height: 14px;
+ color: var(--feed-secondary, var(--grey-for-text));
+ }
+
+ .feed-card__source-name {
+ overflow: hidden;
+ font-size: 13px;
+ font-weight: 600;
+ line-height: 17px;
+ color: inherit;
+ text-overflow: ellipsis;
+ white-space: nowrap;
+ }
+
+ .feed-card__title,
+ .feed-card__description {
+ /* stylelint-disable-next-line value-no-vendor-prefix */
+ display: -webkit-box;
+ margin: 0;
+ overflow: hidden;
+ overflow-wrap: anywhere;
+ -webkit-box-orient: vertical;
+ }
+
+ .feed-card__title {
+ font-size: 18px;
+ font-weight: 600;
+ line-height: 22px;
+ -webkit-line-clamp: 2;
+ }
+
+ .feed-card__description {
+ font-size: 12px;
+ font-weight: 400;
+ line-height: 18px;
+ color: var(--feed-secondary, var(--grey-for-text));
+ -webkit-line-clamp: 3;
+ }
+
+ .feed-card__metadata {
+ display: flex;
+ flex-direction: column;
+ gap: 8px;
+ align-items: flex-start;
+ min-width: 0;
+
+ &:empty {
+ display: none;
+ }
+ }
+
+ .feed-card__skills {
+ display: flex;
+ gap: 6px;
+ width: 100%;
+ padding: 0;
+ margin: 0;
+ list-style: none;
+ }
+
+ .feed-card__chip {
+ box-sizing: border-box;
+ flex-shrink: 0;
+ max-width: 100%;
+ height: 24px;
+ padding: 4px 8px;
+ overflow: hidden;
+ font-size: 10px;
+ font-weight: 400;
+ line-height: 16px;
+ color: var(--accent-dark);
+ text-overflow: ellipsis;
+ white-space: nowrap;
+ background: var(--accent-light);
+ border-radius: var(--rounded-lg);
+
+ &--skill {
+ flex-shrink: 1;
+ max-width: calc((100% - 18px) / 4);
+ }
+
+ &--industry {
+ color: var(--green-dark);
+ background: var(--green-light);
+ }
+ }
+
+ .feed-card__cta {
+ box-sizing: border-box;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ width: 100%;
+ height: 36px;
+ padding: 0 12px;
+ margin-top: auto;
+ font-size: 12px;
+ font-weight: 600;
+ line-height: 16px;
+ color: var(--feed-cta-text, var(--white));
+ text-align: center;
+ background: var(--feed-cta-background, var(--accent));
+ border: 1px solid transparent;
+ border-radius: var(--rounded-xxl);
+
+ &:hover {
+ filter: brightness(0.95);
+ }
}
}
}
diff --git a/projects/social_platform/src/styles/_platform-responsive.scss b/projects/social_platform/src/styles/_platform-responsive.scss
index 26ca0420e..164404ec5 100644
--- a/projects/social_platform/src/styles/_platform-responsive.scss
+++ b/projects/social_platform/src/styles/_platform-responsive.scss
@@ -2,119 +2,138 @@
@use "responsive";
-// Intrinsic sizing is shared by every page and every projected control.
-app-root,
-app-input,
-app-textarea,
-app-select,
-app-autocomplete-input,
-app-search,
-app-upload-file,
-app-file-item,
-app-file-upload-item,
-app-button,
-ui-button {
- min-width: 0;
- max-width: 100%;
-}
-
-h1,
-h2,
-h3,
-h4,
-p,
-label,
-.error {
- overflow-wrap: anywhere;
-}
-
-video,
-iframe,
-canvas {
- max-width: 100%;
-}
-
-// Connected controls opened inside the shared modal must stay above its backdrop.
-.cdk-overlay-container {
- z-index: 10010;
-}
-
-// Opt-in primitives for new screens; use the same boundaries as existing components.
-.responsive-header,
-.responsive-actions {
- display: flex;
- flex-wrap: wrap;
- gap: 12px;
- align-items: center;
- justify-content: space-between;
- min-width: 0;
-}
-
-.responsive-table {
- min-width: 0;
- max-width: 100%;
- overflow-x: auto;
- overscroll-behavior-inline: contain;
-}
-
-.responsive-dialog-header,
-.responsive-dialog-actions {
- position: sticky;
- z-index: 2;
- background: inherit;
-}
-
-.responsive-dialog-header {
- top: 0;
+@media screen and (max-width: 999px) {
+ app-root,
+ app-input,
+ app-textarea,
+ app-select,
+ app-autocomplete-input,
+ app-search,
+ app-upload-file,
+ app-file-item,
+ app-file-upload-item,
+ app-button,
+ ui-button {
+ min-width: 0;
+ max-width: 100%;
+ }
}
-.responsive-dialog-actions {
- bottom: 0;
- padding-bottom: env(safe-area-inset-bottom, 0);
+@media screen and (max-width: 999px) {
+ h1,
+ h2,
+ h3,
+ h4,
+ p,
+ label,
+ .error {
+ overflow-wrap: anywhere;
+ }
}
-@include responsive.apply-mobile {
- html {
- scrollbar-gutter: auto;
+@media screen and (max-width: 999px) {
+ video,
+ iframe,
+ canvas {
+ max-width: 100%;
}
+}
- .text-body-10 {
- font-size: 12px;
- line-height: 18px;
+@media screen and (max-width: 999px) {
+ .cdk-overlay-container {
+ z-index: 10010;
}
+}
- .text-body-12 {
- font-size: 14px;
- line-height: 20px;
+@media screen and (max-width: 999px) {
+ .responsive-header,
+ .responsive-actions {
+ display: flex;
+ flex-wrap: wrap;
+ gap: 12px;
+ align-items: center;
+ justify-content: space-between;
+ min-width: 0;
}
+}
- input:not([type="checkbox"], [type="radio"]),
- textarea,
- select {
+@media screen and (max-width: 999px) {
+ .responsive-table {
min-width: 0;
max-width: 100%;
- font-size: 16px;
+ overflow-x: auto;
+ overscroll-behavior-inline: contain;
}
+}
- .responsive-header,
- .responsive-actions {
- flex-direction: column;
- align-items: stretch;
+@media screen and (max-width: 999px) {
+ .responsive-dialog-header,
+ .responsive-dialog-actions {
+ position: sticky;
+ z-index: 2;
+ background: inherit;
+ }
+}
+
+@media screen and (max-width: 999px) {
+ .responsive-dialog-header {
+ top: 0;
}
+}
- .cdk-overlay-pane {
- max-width: calc(100vw - 24px);
+@media screen and (max-width: 999px) {
+ .responsive-dialog-actions {
+ bottom: 0;
+ padding-bottom: env(safe-area-inset-bottom, 0);
}
+}
- .mat-datepicker-content {
- max-width: 100%;
- max-height: calc(100dvh - 24px);
- overflow: auto;
+@media screen and (max-width: 999px) {
+ @include responsive.apply-mobile {
+ html {
+ scrollbar-gutter: auto;
+ }
+
+ .text-body-10 {
+ font-size: 12px;
+ line-height: 18px;
+ }
+
+ .text-body-12 {
+ font-size: 14px;
+ line-height: 20px;
+ }
+
+ input:not([type="checkbox"], [type="radio"]),
+ textarea,
+ select {
+ min-width: 0;
+ max-width: 100%;
+ font-size: 16px;
+ }
+
+ .responsive-header,
+ .responsive-actions {
+ flex-direction: column;
+ align-items: stretch;
+ }
+
+ .cdk-overlay-pane {
+ max-width: calc(100vw - 24px);
+ }
+
+ .mat-datepicker-content {
+ max-width: 100%;
+ max-height: calc(100dvh - 24px);
+ overflow: auto;
+ }
}
}
-@media screen and (max-width: 359px) {
- :root {
- --page-gutter: 12px;
+@media screen and (max-width: 999px) {
+ @media screen and (max-width: 359px) {
+ :root {
+ --page-gutter: 12px;
+ }
}
}
diff --git a/projects/social_platform/src/styles/_typography.scss b/projects/social_platform/src/styles/_typography.scss
index d2c957ca1..80483ed1e 100644
--- a/projects/social_platform/src/styles/_typography.scss
+++ b/projects/social_platform/src/styles/_typography.scss
@@ -1,5 +1,155 @@
/** @format */
+@mixin heading-1 {
+ font-family: Mont, sans-serif;
+ font-size: 18px;
+ font-style: normal;
+ font-weight: 400;
+ line-height: 150%;
+}
+
+@mixin heading-1-bold {
+ font-family: Mont, sans-serif;
+ font-size: 18px;
+ font-style: normal;
+ font-weight: 600;
+ line-height: 150%;
+}
+
+@mixin heading-2 {
+ font-family: Mont, sans-serif;
+ font-size: 16px;
+ font-style: normal;
+ font-weight: 400;
+ line-height: 150%;
+}
+
+@mixin heading-2-bold {
+ font-family: Mont, sans-serif;
+ font-size: 16px;
+ font-style: normal;
+ font-weight: 600;
+ line-height: 150%;
+}
+
+@mixin heading-3 {
+ font-family: Mont, sans-serif;
+ font-size: 24px;
+ font-style: normal;
+ font-weight: 700;
+ line-height: 150%;
+}
+
+@mixin heading-4 {
+ font-family: Mont, sans-serif;
+ font-size: 18px;
+ font-style: normal;
+ font-weight: 700;
+ line-height: 150%;
+}
+
+@mixin body-18 {
+ font-family: Mont, sans-serif;
+ font-size: 18px;
+ font-style: normal;
+ font-weight: 600;
+ line-height: 150%;
+}
+
+@mixin body-bold-18 {
+ font-family: Mont, sans-serif;
+ font-size: 18px;
+ font-style: normal;
+ font-weight: 800;
+ line-height: 130%;
+}
+
+@mixin bold-body-16 {
+ font-family: Mont, sans-serif;
+ font-size: 16px;
+ font-style: normal;
+ font-weight: 700;
+ line-height: 150%;
+}
+
+@mixin body-16 {
+ font-family: Mont, sans-serif;
+ font-size: 16px;
+ font-style: normal;
+ font-weight: 600;
+ line-height: 150%;
+}
+
+@mixin bold-body-14 {
+ font-family: Mont, sans-serif;
+ font-size: 14px;
+ font-style: normal;
+ font-weight: 700;
+ line-height: 150%;
+}
+
+@mixin body-14 {
+ font-family: Mont, sans-serif;
+ font-size: 14px;
+ font-style: normal;
+ font-weight: 400;
+ line-height: 150%;
+}
+
+@mixin body-12 {
+ font-family: Mont, sans-serif;
+ font-size: 12px;
+ font-style: normal;
+ font-weight: 400;
+ line-height: 130%;
+}
+
+@mixin body-12-bold {
+ font-family: Mont, sans-serif;
+ font-size: 12px;
+ font-style: normal;
+ font-weight: 600;
+ line-height: 130%;
+}
+
+@mixin body-10 {
+ @media screen and (max-width: 999px) {
+ font-family: Mont, sans-serif;
+ font-size: var(--ui-font-caption);
+ font-style: normal;
+ font-weight: 400;
+ line-height: 130%;
+ color: var(--ui-text-muted);
+ }
+
+ @media screen and (min-width: 1000px) {
+ font-family: Mont, sans-serif;
+ font-size: 10px;
+ font-style: normal;
+ font-weight: 400;
+ line-height: 130%;
+ color: var(--grey-button);
+ }
+}
+
+@mixin body-6 {
+ @media screen and (max-width: 999px) {
+ font-family: Mont, sans-serif;
+ font-size: var(--ui-font-caption);
+ font-style: normal;
+ font-weight: 400;
+ line-height: 130%;
+ }
+
+ @media screen and (min-width: 1000px) {
+ font-family: Mont, sans-serif;
+ font-size: 6px;
+ font-style: normal;
+ font-weight: 400;
+ line-height: 130%;
+ }
+}
+
@font-face {
font-family: Mont;
font-style: normal;
@@ -64,195 +214,66 @@
url("../assets/font/Mont-Regular.ttf") format("truetype");
}
-@mixin heading-1 {
- font-family: Mont, sans-serif;
- font-size: 18px;
- font-style: normal;
- font-weight: 400;
- line-height: 150%;
-}
-
.text-heading-1 {
@include heading-1;
}
-@mixin heading-1-bold {
- font-family: Mont, sans-serif;
- font-size: 18px;
- font-style: normal;
- font-weight: 600;
- line-height: 150%;
-}
-
.text-heading-1-bold {
@include heading-1-bold;
}
-@mixin heading-2 {
- font-family: Mont, sans-serif;
- font-size: 16px;
- font-style: normal;
- font-weight: 400;
- line-height: 150%;
-}
-
.text-heading-2 {
@include heading-2;
}
-@mixin heading-2-bold {
- font-family: Mont, sans-serif;
- font-size: 16px;
- font-style: normal;
- font-weight: 600;
- line-height: 150%;
-}
-
.text-heading-2-bold {
@include heading-2-bold;
}
-@mixin heading-3 {
- font-family: Mont, sans-serif;
- font-size: 24px;
- font-style: normal;
- font-weight: 700;
- line-height: 150%;
-}
-
.text-heading-3 {
@include heading-3;
}
-@mixin heading-4 {
- font-family: Mont, sans-serif;
- font-size: 18px;
- font-style: normal;
- font-weight: 700;
- line-height: 150%;
-}
-
.text-heading-4 {
@include heading-4;
}
-@mixin body-18 {
- font-family: Mont, sans-serif;
- font-size: 18px;
- font-style: normal;
- font-weight: 600;
- line-height: 150%;
-}
-
.text-body-18 {
@include body-18;
}
-@mixin body-bold-18 {
- font-family: Mont, sans-serif;
- font-size: 18px;
- font-style: normal;
- font-weight: 800;
- line-height: 130%;
-}
-
.text-body-bold-18 {
@include body-18;
}
-@mixin bold-body-16 {
- font-family: Mont, sans-serif;
- font-size: 16px;
- font-style: normal;
- font-weight: 700;
- line-height: 150%;
-}
-
.text-bold-body-16 {
@include bold-body-16;
}
-@mixin body-16 {
- font-family: Mont, sans-serif;
- font-size: 16px;
- font-style: normal;
- font-weight: 600;
- line-height: 150%;
-}
-
.text-body-16 {
@include body-16;
}
-@mixin bold-body-14 {
- font-family: Mont, sans-serif;
- font-size: 14px;
- font-style: normal;
- font-weight: 700;
- line-height: 150%;
-}
-
.text-bold-body-14 {
@include bold-body-14;
}
-@mixin body-14 {
- font-family: Mont, sans-serif;
- font-size: 14px;
- font-style: normal;
- font-weight: 400;
- line-height: 150%;
-}
-
.text-body-14 {
@include body-14;
}
-@mixin body-12 {
- font-family: Mont, sans-serif;
- font-size: 12px;
- font-style: normal;
- font-weight: 400;
- line-height: 130%;
-}
-
.text-body-12 {
@include body-12;
}
-@mixin body-12-bold {
- font-family: Mont, sans-serif;
- font-size: 12px;
- font-style: normal;
- font-weight: 600;
- line-height: 130%;
-}
-
.text-body-12-bold {
@include body-12-bold;
}
-@mixin body-10 {
- font-family: Mont, sans-serif;
- font-size: var(--ui-font-caption);
- font-style: normal;
- font-weight: 400;
- line-height: 130%;
- color: var(--ui-text-muted);
-}
-
.text-body-10 {
@include body-10;
}
-@mixin body-6 {
- font-family: Mont, sans-serif;
- font-size: var(--ui-font-caption);
- font-style: normal;
- font-weight: 400;
- line-height: 130%;
-}
-
.text-body-6 {
@include body-6;
}
diff --git a/projects/social_platform/src/styles/_ui-system.scss b/projects/social_platform/src/styles/_ui-system.scss
index 75abcc461..397f054b0 100644
--- a/projects/social_platform/src/styles/_ui-system.scss
+++ b/projects/social_platform/src/styles/_ui-system.scss
@@ -2,206 +2,268 @@
@use "ui-foundation";
-button.ui-button.ui-button {
- @include ui-foundation.button($layout: false);
-}
-
-.ui-button {
- display: inline-flex;
- gap: var(--ui-space-sm);
- align-items: center;
- justify-content: center;
+@media screen and (min-width: 1000px) {
+ :where(button.ui-button) {
+ padding: 0;
+ font: inherit;
+ color: inherit;
+ text-align: inherit;
+ cursor: pointer;
+ background: transparent;
+ border: 0;
+ }
}
-button.ui-button[role="radio"] {
- justify-content: space-between;
- width: 100%;
- padding: var(--ui-control-padding);
- color: var(--ui-text);
- text-align: left;
- background: var(--ui-surface-subtle);
- border-color: var(--ui-border-subtle);
- border-radius: var(--ui-radius-card);
-
- &[aria-checked="true"] {
- background: var(--accent-light);
- border-color: var(--ui-accent);
+@media screen and (max-width: 999px) {
+ button.ui-button.ui-button {
+ @include ui-foundation.button($layout: false);
}
}
-.ui-field {
- @include ui-foundation.control;
+@media screen and (max-width: 999px) {
+ .ui-button {
+ display: inline-flex;
+ gap: var(--ui-space-sm);
+ align-items: center;
+ justify-content: center;
+ }
}
-input.ui-choice.ui-choice {
- min-height: 18px;
- padding: 0;
- background: transparent;
-
- @include ui-foundation.choice;
+@media screen and (max-width: 999px) {
+ button.ui-button[role="radio"] {
+ justify-content: space-between;
+ width: 100%;
+ padding: var(--ui-control-padding);
+ color: var(--ui-text);
+ text-align: left;
+ background: var(--ui-surface-subtle);
+ border-color: var(--ui-border-subtle);
+ border-radius: var(--ui-radius-card);
- appearance: auto;
+ &[aria-checked="true"] {
+ background: var(--accent-light);
+ border-color: var(--ui-accent);
+ }
+ }
}
-.ui-card {
- @include ui-foundation.card;
-
- &--interactive {
- transition:
- box-shadow 0.2s,
- border-color 0.2s;
+@media screen and (max-width: 999px) {
+ .ui-field {
+ @include ui-foundation.control;
}
+}
- &--interactive:hover {
- border-color: var(--ui-accent);
- box-shadow: var(--ui-card-hover-shadow);
- }
+@media screen and (max-width: 999px) {
+ input.ui-choice.ui-choice {
+ min-height: 18px;
+ padding: 0;
+ background: transparent;
- &:focus-visible {
- outline: 2px solid var(--accent-dark);
- outline-offset: 3px;
- }
-}
+ @include ui-foundation.choice;
-.ui-form {
- min-width: 0;
+ appearance: auto;
+ }
}
-.ui-form label.field-label,
-label.field-label {
- margin-bottom: var(--ui-space-sm);
- font-size: var(--ui-font-small);
- line-height: 1.5;
- color: var(--ui-text);
+@media screen and (max-width: 999px) {
+ .ui-card {
+ @include ui-foundation.card;
+
+ &--interactive {
+ transition:
+ box-shadow 0.2s,
+ border-color 0.2s;
+ }
+
+ &--interactive:hover {
+ border-color: var(--ui-accent);
+ box-shadow: var(--ui-card-hover-shadow);
+ }
+
+ &:focus-visible {
+ outline: 2px solid var(--accent-dark);
+ outline-offset: 3px;
+ }
+ }
}
-.ui-form .error,
-.error {
- font-size: var(--ui-font-small);
- line-height: 1.5;
- color: var(--ui-danger);
+@media screen and (max-width: 999px) {
+ .ui-form {
+ min-width: 0;
+ }
}
-.ui-filters {
- display: flex;
- flex-direction: column;
- gap: var(--ui-space-md);
- min-width: 0;
+@media screen and (max-width: 999px) {
+ .ui-form label.field-label,
+ label.field-label {
+ margin-bottom: var(--ui-space-sm);
+ font-size: var(--ui-font-small);
+ line-height: 1.5;
+ color: var(--ui-text);
+ }
}
-.ui-filters__header {
- display: flex;
- flex-wrap: wrap;
- gap: var(--ui-space-xs);
- align-items: center;
- justify-content: space-between;
-
- > p,
- > .ui-button {
- flex-shrink: 0;
+@media screen and (max-width: 999px) {
+ .ui-form .error,
+ .error {
+ font-size: var(--ui-font-small);
+ line-height: 1.5;
+ color: var(--ui-danger);
}
}
-.ui-dialog-body {
- min-width: 0;
- font-size: var(--ui-font-body);
- line-height: 1.5;
- overflow-wrap: anywhere;
+@media screen and (max-width: 999px) {
+ .ui-filters {
+ display: flex;
+ flex-direction: column;
+ gap: var(--ui-space-md);
+ min-width: 0;
+ }
}
-.ui-dialog-footer {
- display: flex;
- flex-wrap: wrap;
- gap: var(--ui-space-sm);
- align-items: center;
- justify-content: flex-end;
- padding-top: var(--ui-space-md);
- margin-top: var(--ui-space-md);
+@media screen and (max-width: 999px) {
+ .ui-filters__header {
+ display: flex;
+ flex-wrap: wrap;
+ gap: var(--ui-space-xs);
+ align-items: center;
+ justify-content: space-between;
+
+ > p,
+ > .ui-button {
+ flex-shrink: 0;
+ }
+ }
}
-.ui-alert {
- padding: var(--ui-space-md);
- color: var(--ui-text);
- background: var(--accent-light);
- border-radius: var(--ui-radius-card);
+@media screen and (max-width: 999px) {
+ .ui-dialog-body {
+ min-width: 0;
+ font-size: var(--ui-font-body);
+ line-height: 1.5;
+ overflow-wrap: anywhere;
+ }
}
-.ui-alert--error {
- color: var(--red-dark);
- background: var(--red-light);
+@media screen and (max-width: 999px) {
+ .ui-dialog-footer {
+ display: flex;
+ flex-wrap: wrap;
+ gap: var(--ui-space-sm);
+ align-items: center;
+ justify-content: flex-end;
+ padding-top: var(--ui-space-md);
+ margin-top: var(--ui-space-md);
+ }
}
-.ui-alert--success {
- color: var(--green-dark);
- background: var(--green-light);
+@media screen and (max-width: 999px) {
+ .ui-alert {
+ padding: var(--ui-space-md);
+ color: var(--ui-text);
+ background: var(--accent-light);
+ border-radius: var(--ui-radius-card);
+ }
}
-.ui-alert--warning {
- color: var(--gold-dark);
- background: var(--gold-light);
+@media screen and (max-width: 999px) {
+ .ui-alert--error {
+ color: var(--red-dark);
+ background: var(--red-light);
+ }
}
-.ui-drawer {
- min-width: 0;
- max-width: 100vw;
- overscroll-behavior: contain;
+@media screen and (max-width: 999px) {
+ .ui-alert--success {
+ color: var(--green-dark);
+ background: var(--green-light);
+ }
}
-table.ui-table {
- width: 100%;
- font-size: var(--ui-font-small);
- line-height: 1.5;
- color: var(--ui-text);
- border-collapse: collapse;
-
- th {
- padding: 12px 16px;
- font-weight: 600;
- text-align: left;
- background: var(--ui-surface-subtle);
- border-bottom: 1px solid var(--ui-border);
+@media screen and (max-width: 999px) {
+ .ui-alert--warning {
+ color: var(--gold-dark);
+ background: var(--gold-light);
}
+}
- td {
- padding: 12px 16px;
- border-bottom: 1px solid var(--ui-border-subtle);
+@media screen and (max-width: 999px) {
+ .ui-drawer {
+ min-width: 0;
+ max-width: 100vw;
+ overscroll-behavior: contain;
}
+}
- tbody tr:hover {
- background: var(--accent-light);
+@media screen and (max-width: 999px) {
+ table.ui-table {
+ width: 100%;
+ font-size: var(--ui-font-small);
+ line-height: 1.5;
+ color: var(--ui-text);
+ border-collapse: collapse;
+
+ th {
+ padding: 12px 16px;
+ font-weight: 600;
+ text-align: left;
+ background: var(--ui-surface-subtle);
+ border-bottom: 1px solid var(--ui-border);
+ }
+
+ td {
+ padding: 12px 16px;
+ border-bottom: 1px solid var(--ui-border-subtle);
+ }
+
+ tbody tr:hover {
+ background: var(--accent-light);
+ }
}
}
-.ui-h1 {
- font-size: var(--ui-font-h1);
- font-weight: 600;
- line-height: 1.3;
+@media screen and (max-width: 999px) {
+ .ui-h1 {
+ font-size: var(--ui-font-h1);
+ font-weight: 600;
+ line-height: 1.3;
+ }
}
-.ui-h2 {
- font-size: var(--ui-font-h2);
- font-weight: 600;
- line-height: 1.4;
+@media screen and (max-width: 999px) {
+ .ui-h2 {
+ font-size: var(--ui-font-h2);
+ font-weight: 600;
+ line-height: 1.4;
+ }
}
-.ui-h3 {
- font-size: var(--ui-font-h3);
- font-weight: 600;
- line-height: 1.4;
+@media screen and (max-width: 999px) {
+ .ui-h3 {
+ font-size: var(--ui-font-h3);
+ font-weight: 600;
+ line-height: 1.4;
+ }
}
-.ui-body {
- font-size: var(--ui-font-body);
- line-height: 1.5;
+@media screen and (max-width: 999px) {
+ .ui-body {
+ font-size: var(--ui-font-body);
+ line-height: 1.5;
+ }
}
-.ui-small {
- font-size: var(--ui-font-small);
- line-height: 1.5;
+@media screen and (max-width: 999px) {
+ .ui-small {
+ font-size: var(--ui-font-small);
+ line-height: 1.5;
+ }
}
-.ui-caption {
- font-size: var(--ui-font-caption);
- line-height: 1.5;
- color: var(--ui-text-muted);
+@media screen and (max-width: 999px) {
+ .ui-caption {
+ font-size: var(--ui-font-caption);
+ line-height: 1.5;
+ color: var(--ui-text-muted);
+ }
}
diff --git a/projects/social_platform/src/styles/_ui-tokens.scss b/projects/social_platform/src/styles/_ui-tokens.scss
index 765fa3aae..e67559647 100644
--- a/projects/social_platform/src/styles/_ui-tokens.scss
+++ b/projects/social_platform/src/styles/_ui-tokens.scss
@@ -18,6 +18,7 @@
--ui-radius-dialog: var(--rounded-xl);
--ui-control-height: 44px;
--ui-compact-sidebar-width: 157px;
+ --ui-mobile-entity-card-width: 260px;
--ui-control-padding: 12px 16px;
--ui-card-padding: 16px;
--ui-dialog-padding: 24px;
diff --git a/projects/social_platform/src/styles/components/_vacancy-ui.scss b/projects/social_platform/src/styles/components/_vacancy-ui.scss
index 02d37e78f..185bdc471 100644
--- a/projects/social_platform/src/styles/components/_vacancy-ui.scss
+++ b/projects/social_platform/src/styles/components/_vacancy-ui.scss
@@ -3,15 +3,27 @@
@use "styles/ui-foundation";
@mixin surface {
- @include ui-foundation.card;
+ @media screen and (max-width: 999px) {
+ @include ui-foundation.card;
- min-width: 0;
- padding: var(--ui-card-padding);
- color: var(--black);
- overflow-wrap: anywhere;
- background: var(--white);
- border: 1px solid var(--medium-grey-for-outline);
- border-radius: var(--ui-radius-card);
+ min-width: 0;
+ padding: var(--ui-card-padding);
+ color: var(--black);
+ overflow-wrap: anywhere;
+ background: var(--white);
+ border: 1px solid var(--medium-grey-for-outline);
+ border-radius: var(--ui-radius-card);
+ }
+
+ @media screen and (min-width: 1000px) {
+ min-width: 0;
+ padding: 20px;
+ color: var(--black);
+ overflow-wrap: anywhere;
+ background: var(--white);
+ border: 1px solid var(--medium-grey-for-outline);
+ border-radius: var(--rounded-lg);
+ }
}
@mixin secondary {
@@ -38,7 +50,6 @@
}
}
-// Feature-адаптер Pattern / PageHeader; глобальный BackComponent не меняется.
@mixin page-header {
display: flex;
flex-direction: column;
@@ -71,12 +82,42 @@
}
@mixin actions {
- display: flex;
- flex-wrap: wrap;
- gap: 8px;
+ @media screen and (max-width: 999px) {
+ display: flex;
+ flex-wrap: wrap;
+ gap: 8px;
+
+ app-button {
+ flex: 1 1 140px;
+ min-width: 0;
+ }
+ }
- app-button {
- flex: 1 1 140px;
- min-width: 0;
+ @media screen and (min-width: 1000px) {
+ display: flex;
+ flex-wrap: wrap;
+ gap: 8px;
+
+ app-button {
+ flex: 1 1 140px;
+ min-width: 0;
+ }
+
+ ::ng-deep .button {
+ gap: 6px;
+ width: 100%;
+ min-height: 36px;
+ max-height: none;
+ padding: 8px 12px;
+ font-size: 12px;
+ line-height: 18px;
+
+ @include focus;
+
+ &.button--outline.button--red {
+ color: var(--black);
+ background: transparent;
+ }
+ }
}
}
diff --git a/projects/ui/src/lib/components/layout/page-header/page-header.component.scss b/projects/ui/src/lib/components/layout/page-header/page-header.component.scss
index 4fccfa53b..594c404d4 100644
--- a/projects/ui/src/lib/components/layout/page-header/page-header.component.scss
+++ b/projects/ui/src/lib/components/layout/page-header/page-header.component.scss
@@ -1,61 +1,78 @@
/** @format */
-:host {
- display: block;
- width: 100%;
- min-width: 0;
-}
+@media screen and (min-width: 1000px) {
+ :host,
+ .page-header,
+ .page-header__heading,
+ .page-header__title-row {
+ display: contents;
+ }
-.page-header {
- display: flex;
- flex-wrap: wrap;
- gap: var(--ui-space-md);
- align-items: center;
- justify-content: space-between;
- margin-bottom: var(--ui-space-lg);
+ .page-header__title {
+ display: none;
+ }
+}
- &__heading {
+@media screen and (max-width: 999px) {
+ :host {
+ display: block;
+ width: 100%;
min-width: 0;
}
+}
- &__title-row {
+@media screen and (max-width: 999px) {
+ .page-header {
display: flex;
- gap: var(--ui-space-sm);
+ flex-wrap: wrap;
+ gap: var(--ui-space-md);
align-items: center;
- }
+ justify-content: space-between;
+ margin-bottom: var(--ui-space-lg);
- &__title {
- font-size: var(--ui-font-h1);
- font-weight: 600;
- line-height: 1.3;
- color: var(--ui-text);
- overflow-wrap: anywhere;
- }
+ &__heading {
+ min-width: 0;
+ }
- &__description {
- margin-top: var(--ui-space-sm);
- font-size: var(--ui-font-body);
- line-height: 1.5;
- color: var(--ui-text-muted);
- }
+ &__title-row {
+ display: flex;
+ gap: var(--ui-space-sm);
+ align-items: center;
+ }
- &__breadcrumbs {
- display: flex;
- flex-wrap: wrap;
- gap: var(--ui-space-sm);
- margin-bottom: var(--ui-space-sm);
- font-size: var(--ui-font-caption);
- }
+ &__title {
+ font-size: var(--ui-font-h1);
+ font-weight: 600;
+ line-height: 1.3;
+ color: var(--ui-text);
+ overflow-wrap: anywhere;
+ }
- &__actions {
- display: flex;
- flex-wrap: wrap;
- gap: var(--ui-space-sm);
- align-items: center;
- max-width: 100%;
- }
+ &__description {
+ margin-top: var(--ui-space-sm);
+ font-size: var(--ui-font-body);
+ line-height: 1.5;
+ color: var(--ui-text-muted);
+ }
- &__actions:empty {
- display: none;
+ &__breadcrumbs {
+ display: flex;
+ flex-wrap: wrap;
+ gap: var(--ui-space-sm);
+ margin-bottom: var(--ui-space-sm);
+ font-size: var(--ui-font-caption);
+ }
+
+ &__actions {
+ display: flex;
+ flex-wrap: wrap;
+ gap: var(--ui-space-sm);
+ align-items: center;
+ max-width: 100%;
+ }
+
+ &__actions:empty {
+ display: none;
+ }
}
}
diff --git a/projects/ui/src/lib/components/layout/page-header/page-header.component.ts b/projects/ui/src/lib/components/layout/page-header/page-header.component.ts
index 00d1abb72..31d08a3dc 100644
--- a/projects/ui/src/lib/components/layout/page-header/page-header.component.ts
+++ b/projects/ui/src/lib/components/layout/page-header/page-header.component.ts
@@ -1,8 +1,9 @@
/** @format */
-import { ChangeDetectionStrategy, Component, input } from "@angular/core";
+import { ChangeDetectionStrategy, Component, inject, input } from "@angular/core";
import { RouterLink } from "@angular/router";
import { BackComponent } from "../../primitives/back/back.component";
+import { DesktopLayoutService } from "../../../services/desktop-layout.service";
export interface PageBreadcrumb {
label: string;
@@ -28,7 +29,11 @@ export interface PageBreadcrumb {
}
@if (backRoute()) {
- {{ title() }}
@@ -43,6 +48,7 @@ export interface PageBreadcrumb {
changeDetection: ChangeDetectionStrategy.OnPush,
})
export class PageHeaderComponent {
+ protected readonly desktopLayout = inject(DesktopLayoutService).desktop;
readonly title = input.required();
readonly description = input();
readonly breadcrumbs = input([]);
diff --git a/projects/ui/src/lib/components/layout/profile-control-panel/profile-control-panel.component.html b/projects/ui/src/lib/components/layout/profile-control-panel/profile-control-panel.component.html
index 7727bd3eb..5a5c47002 100644
--- a/projects/ui/src/lib/components/layout/profile-control-panel/profile-control-panel.component.html
+++ b/projects/ui/src/lib/components/layout/profile-control-panel/profile-control-panel.component.html
@@ -2,17 +2,39 @@
-
-
- @if (hasNotifications() || hasInvites) {
-
- }
-
- @if (invites().length) {
-
- }
+ @if (desktopLayout()) {
+
+
+ @if (hasNotifications() || hasInvites) {
+
+ }
+
+ @if (invites().length) {
+
+ }
+
-
+ } @else {
+
+ }
@if (showNotifications) {
@@ -30,7 +52,7 @@
}
-
+
diff --git a/projects/ui/src/lib/components/layout/profile-control-panel/profile-control-panel.component.scss b/projects/ui/src/lib/components/layout/profile-control-panel/profile-control-panel.component.scss
index d582e47ea..eeb01e411 100644
--- a/projects/ui/src/lib/components/layout/profile-control-panel/profile-control-panel.component.scss
+++ b/projects/ui/src/lib/components/layout/profile-control-panel/profile-control-panel.component.scss
@@ -64,7 +64,13 @@
}
i {
- color: var(--light-white);
+ @media screen and (max-width: 999px) {
+ color: var(--ui-text-muted);
+ }
+
+ @media screen and (min-width: 1000px) {
+ color: var(--light-white);
+ }
@include responsive.apply-desktop {
color: var(--dark-grey);
@@ -72,30 +78,44 @@
}
}
-@include responsive.apply-below-desktop {
- .control-panel {
- position: static;
- }
+@media screen and (max-width: 999px) {
+ @include responsive.apply-below-desktop {
+ .control-panel {
+ position: static;
+ }
- .control-panel__actions {
- gap: 0;
- margin-right: 4px;
- }
+ .control-panel__actions {
+ gap: 0;
+ margin-right: 0;
+ }
- .control-panel__action {
- display: flex;
- align-items: center;
- justify-content: center;
- min-width: 44px;
- min-height: 44px;
- }
+ .control-panel__action {
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ min-width: 44px;
+ min-height: 44px;
+ }
+
+ .control-panel__action--logout {
+ display: none;
+ }
+
+ .control-panel__profile {
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ width: 44px;
+ min-height: 44px;
+ }
- .control-panel__notifications {
- position: fixed;
- top: 64px;
- right: var(--page-gutter);
- left: var(--page-gutter);
- max-height: calc(var(--visual-viewport-height, 100dvh) - 80px);
- overflow-y: auto;
+ .control-panel__notifications {
+ position: fixed;
+ top: 64px;
+ right: var(--page-gutter);
+ left: var(--page-gutter);
+ max-height: calc(var(--visual-viewport-height, 100dvh) - 80px);
+ overflow-y: auto;
+ }
}
}
diff --git a/projects/ui/src/lib/components/layout/profile-control-panel/profile-control-panel.component.ts b/projects/ui/src/lib/components/layout/profile-control-panel/profile-control-panel.component.ts
index 80ecd205d..b6e9f1dbb 100644
--- a/projects/ui/src/lib/components/layout/profile-control-panel/profile-control-panel.component.ts
+++ b/projects/ui/src/lib/components/layout/profile-control-panel/profile-control-panel.component.ts
@@ -1,7 +1,11 @@
/** @format */
+import { DesktopLayoutService } from "../../../services/desktop-layout.service";
+/** @format */
+
import { CommonModule } from "@angular/common";
import {
+ inject,
ChangeDetectionStrategy,
Component,
Input,
@@ -18,6 +22,7 @@ import type { Invite } from "projects/social_platform/src/app/domain/invite/invi
import { RouterLink } from "@angular/router";
import { EmptyManageCardComponent } from "../empty-manage-card/empty-manage-card.component";
import { User } from "@domain/auth/user.model";
+import { ButtonDirective } from "../../primitives/button/button.directive";
/**
* Компонент панели управления профилем
@@ -48,12 +53,14 @@ import { User } from "@domain/auth/user.model";
ClickOutsideModule,
IconComponent,
EmptyManageCardComponent,
+ ButtonDirective,
],
templateUrl: "./profile-control-panel.component.html",
styleUrl: "./profile-control-panel.component.scss",
changeDetection: ChangeDetectionStrategy.OnPush,
})
export class ProfileControlPanelComponent {
+ protected readonly desktopLayout = inject(DesktopLayoutService).desktop;
/** Данные текущего пользователя */
readonly user = input.required();
diff --git a/projects/ui/src/lib/components/layout/profile-info/profile-info.component.html b/projects/ui/src/lib/components/layout/profile-info/profile-info.component.html
index c9885743e..57394a0d7 100644
--- a/projects/ui/src/lib/components/layout/profile-info/profile-info.component.html
+++ b/projects/ui/src/lib/components/layout/profile-info/profile-info.component.html
@@ -1,7 +1,7 @@
@if (user()) {
-
+
-
- @if (loader()) {
+
+ @if (loader() && desktopLayout()) {
+
- app-nav {
- flex: 1;
- min-width: 0;
+ @media screen and (max-width: 999px) {
+ &__top > app-nav {
+ grid-row: 1;
+ grid-column: 1 / -1;
+ min-width: 0;
+ }
+ }
+
+ @media screen and (max-width: 999px) {
+ &__top > app-profile-control-panel {
+ grid-row: 1;
+ grid-column: 3;
+ justify-self: end;
+ min-width: 0;
+ }
}
&__header {
diff --git a/projects/social_platform/src/app/ui/pages/office/snackbar/snackbar.component.scss b/projects/social_platform/src/app/ui/pages/office/snackbar/snackbar.component.scss
index d6da495e1..60046c083 100644
--- a/projects/social_platform/src/app/ui/pages/office/snackbar/snackbar.component.scss
+++ b/projects/social_platform/src/app/ui/pages/office/snackbar/snackbar.component.scss
@@ -2,8 +2,6 @@
@use "styles/responsive";
-/** @format */
-
.snackbar {
position: absolute;
top: 0;
@@ -13,7 +11,15 @@
padding-right: 50px;
overflow-x: hidden;
+ @media screen and (max-width: 999px) {
+ pointer-events: none;
+ }
+
&__item {
+ @media screen and (max-width: 999px) {
+ pointer-events: auto;
+ }
+
&:not(:last-child) {
margin-bottom: 10px;
}
@@ -44,20 +50,22 @@
}
}
-@include responsive.apply-mobile {
- .snackbar {
- position: fixed;
- top: max(12px, env(safe-area-inset-top));
- right: var(--page-gutter);
- left: var(--page-gutter);
- max-height: calc(100dvh - 24px);
- padding: 0;
- overflow-y: auto;
- }
+@media screen and (max-width: 999px) {
+ @include responsive.apply-mobile {
+ .snackbar {
+ position: fixed;
+ top: max(12px, env(safe-area-inset-top));
+ right: var(--page-gutter);
+ left: var(--page-gutter);
+ max-height: calc(100dvh - 24px);
+ padding: 0;
+ overflow-y: auto;
+ }
- .item {
- min-width: 0;
- padding: 12px;
- overflow-wrap: anywhere;
+ .item {
+ min-width: 0;
+ padding: 12px;
+ overflow-wrap: anywhere;
+ }
}
}
diff --git a/projects/social_platform/src/app/ui/pages/profile/detail/main/components/profile-left-side/profile-left-side.component.scss b/projects/social_platform/src/app/ui/pages/profile/detail/main/components/profile-left-side/profile-left-side.component.scss
index b7d5313f6..ae0c8110d 100644
--- a/projects/social_platform/src/app/ui/pages/profile/detail/main/components/profile-left-side/profile-left-side.component.scss
+++ b/projects/social_platform/src/app/ui/pages/profile/detail/main/components/profile-left-side/profile-left-side.component.scss
@@ -111,8 +111,8 @@
background-color: var(--accent-light);
}
- /* stylelint-disable value-no-vendor-prefix */
&__program-name {
+ /* stylelint-disable-next-line value-no-vendor-prefix */
display: -webkit-box;
min-width: 0;
overflow: hidden;
@@ -122,14 +122,21 @@
-webkit-line-clamp: 2;
&--compact {
- font-size: var(--ui-font-caption);
- font-weight: 400;
line-height: 14px;
word-break: normal;
overflow-wrap: normal;
+
+ @media screen and (max-width: 999px) {
+ font-size: var(--ui-font-caption);
+ font-weight: 400;
+ }
+
+ @media screen and (min-width: 1000px) {
+ font-size: 10px;
+ font-weight: 400;
+ }
}
}
- /* stylelint-enable value-no-vendor-prefix */
&__icon {
color: var(--accent);
diff --git a/projects/social_platform/src/app/ui/pages/profile/detail/main/components/profile-right-side/profile-right-side.component.scss b/projects/social_platform/src/app/ui/pages/profile/detail/main/components/profile-right-side/profile-right-side.component.scss
index a8d873e0b..98008d770 100644
--- a/projects/social_platform/src/app/ui/pages/profile/detail/main/components/profile-right-side/profile-right-side.component.scss
+++ b/projects/social_platform/src/app/ui/pages/profile/detail/main/components/profile-right-side/profile-right-side.component.scss
@@ -107,17 +107,31 @@
}
&--subtext {
- font-size: var(--ui-font-caption);
line-height: 16px;
color: var(--grey-for-text) !important;
word-break: break-word;
overflow-wrap: anywhere;
+
+ @media screen and (max-width: 999px) {
+ font-size: var(--ui-font-caption);
+ }
+
+ @media screen and (min-width: 1000px) {
+ font-size: 11px;
+ }
}
&--more {
- font-size: var(--ui-font-caption);
line-height: 16px;
color: var(--accent) !important;
+
+ @media screen and (max-width: 999px) {
+ font-size: var(--ui-font-caption);
+ }
+
+ @media screen and (min-width: 1000px) {
+ font-size: 11px;
+ }
}
img {
@@ -125,8 +139,8 @@
}
}
- /* stylelint-disable value-no-vendor-prefix */
&__project-name {
+ /* stylelint-disable-next-line value-no-vendor-prefix */
display: -webkit-box;
overflow: hidden;
font-size: var(--ui-font-small);
@@ -140,12 +154,18 @@
&__project-role {
margin-top: 3px;
- font-size: var(--ui-font-caption);
line-height: 15px;
color: var(--dark-grey);
overflow-wrap: anywhere;
+
+ @media screen and (max-width: 999px) {
+ font-size: var(--ui-font-caption);
+ }
+
+ @media screen and (min-width: 1000px) {
+ font-size: 11px;
+ }
}
- /* stylelint-enable value-no-vendor-prefix */
&__date {
display: flex;
@@ -158,9 +178,16 @@
border-radius: var(--rounded-xl);
p {
- font-size: var(--ui-font-caption);
line-height: 14px;
color: var(--dark-grey);
+
+ @media screen and (max-width: 999px) {
+ font-size: var(--ui-font-caption);
+ }
+
+ @media screen and (min-width: 1000px) {
+ font-size: 11px;
+ }
}
}
diff --git a/projects/social_platform/src/app/ui/pages/profile/detail/profile-news/profile-news.component.scss b/projects/social_platform/src/app/ui/pages/profile/detail/profile-news/profile-news.component.scss
index 0219fccd0..3195861cc 100644
--- a/projects/social_platform/src/app/ui/pages/profile/detail/profile-news/profile-news.component.scss
+++ b/projects/social_platform/src/app/ui/pages/profile/detail/profile-news/profile-news.component.scss
@@ -6,7 +6,6 @@
display: block;
@include responsive.apply-desktop {
- width: 100%;
- min-width: 0;
+ min-width: 800px;
}
}
diff --git a/projects/social_platform/src/app/ui/pages/profile/edit/components/profile-achievements-step/profile-achievements-step.component.scss b/projects/social_platform/src/app/ui/pages/profile/edit/components/profile-achievements-step/profile-achievements-step.component.scss
index c394c4427..fab36a81e 100644
--- a/projects/social_platform/src/app/ui/pages/profile/edit/components/profile-achievements-step/profile-achievements-step.component.scss
+++ b/projects/social_platform/src/app/ui/pages/profile/edit/components/profile-achievements-step/profile-achievements-step.component.scss
@@ -1,7 +1,6 @@
-@use "styles/profile-form";
-
/** @format */
+@use "styles/profile-form";
@use "styles/responsive";
.profile__wrapper--education {
@@ -119,4 +118,6 @@
}
}
-@include profile-form.responsive-layout;
+@media screen and (max-width: 999px) {
+ @include profile-form.responsive-layout;
+}
diff --git a/projects/social_platform/src/app/ui/pages/profile/edit/components/profile-education-step/profile-education-step.component.scss b/projects/social_platform/src/app/ui/pages/profile/edit/components/profile-education-step/profile-education-step.component.scss
index fc3d2503b..bbf8e84bb 100644
--- a/projects/social_platform/src/app/ui/pages/profile/edit/components/profile-education-step/profile-education-step.component.scss
+++ b/projects/social_platform/src/app/ui/pages/profile/edit/components/profile-education-step/profile-education-step.component.scss
@@ -1,7 +1,6 @@
-@use "styles/profile-form";
-
/** @format */
+@use "styles/profile-form";
@use "styles/responsive";
.profile__wrapper--education {
@@ -113,4 +112,6 @@
}
}
-@include profile-form.responsive-layout;
+@media screen and (max-width: 999px) {
+ @include profile-form.responsive-layout;
+}
diff --git a/projects/social_platform/src/app/ui/pages/profile/edit/components/profile-experience-step/profile-experience-step.component.scss b/projects/social_platform/src/app/ui/pages/profile/edit/components/profile-experience-step/profile-experience-step.component.scss
index fc3d2503b..bbf8e84bb 100644
--- a/projects/social_platform/src/app/ui/pages/profile/edit/components/profile-experience-step/profile-experience-step.component.scss
+++ b/projects/social_platform/src/app/ui/pages/profile/edit/components/profile-experience-step/profile-experience-step.component.scss
@@ -1,7 +1,6 @@
-@use "styles/profile-form";
-
/** @format */
+@use "styles/profile-form";
@use "styles/responsive";
.profile__wrapper--education {
@@ -113,4 +112,6 @@
}
}
-@include profile-form.responsive-layout;
+@media screen and (max-width: 999px) {
+ @include profile-form.responsive-layout;
+}
diff --git a/projects/social_platform/src/app/ui/pages/profile/edit/components/profile-main-step/profile-main-step.component.scss b/projects/social_platform/src/app/ui/pages/profile/edit/components/profile-main-step/profile-main-step.component.scss
index 220ea437a..4163ebdc8 100644
--- a/projects/social_platform/src/app/ui/pages/profile/edit/components/profile-main-step/profile-main-step.component.scss
+++ b/projects/social_platform/src/app/ui/pages/profile/edit/components/profile-main-step/profile-main-step.component.scss
@@ -1,7 +1,6 @@
-@use "styles/profile-form";
-
/** @format */
+@use "styles/profile-form";
@use "styles/responsive";
.profile__wrapper--main {
@@ -114,4 +113,6 @@
margin-bottom: 10px;
}
-@include profile-form.responsive-layout;
+@media screen and (max-width: 999px) {
+ @include profile-form.responsive-layout;
+}
diff --git a/projects/social_platform/src/app/ui/pages/profile/edit/components/profile-skills-step/profile-skills-step.component.scss b/projects/social_platform/src/app/ui/pages/profile/edit/components/profile-skills-step/profile-skills-step.component.scss
index 40a17ae90..bafc5d9dd 100644
--- a/projects/social_platform/src/app/ui/pages/profile/edit/components/profile-skills-step/profile-skills-step.component.scss
+++ b/projects/social_platform/src/app/ui/pages/profile/edit/components/profile-skills-step/profile-skills-step.component.scss
@@ -1,7 +1,6 @@
-@use "styles/profile-form";
-
/** @format */
+@use "styles/profile-form";
@use "styles/responsive";
:host,
@@ -129,4 +128,6 @@ fieldset {
}
}
-@include profile-form.responsive-layout;
+@media screen and (max-width: 999px) {
+ @include profile-form.responsive-layout;
+}
diff --git a/projects/social_platform/src/app/ui/pages/profile/edit/edit.component.html b/projects/social_platform/src/app/ui/pages/profile/edit/edit.component.html
index a3e98136b..64fdfabd8 100644
--- a/projects/social_platform/src/app/ui/pages/profile/edit/edit.component.html
+++ b/projects/social_platform/src/app/ui/pages/profile/edit/edit.component.html
@@ -2,10 +2,21 @@
@if (profileForm.get("userType"); as currentType) {
diff --git a/projects/social_platform/src/app/ui/pages/profile/edit/edit.component.scss b/projects/social_platform/src/app/ui/pages/profile/edit/edit.component.scss
index 108f39d41..cc72026a6 100644
--- a/projects/social_platform/src/app/ui/pages/profile/edit/edit.component.scss
+++ b/projects/social_platform/src/app/ui/pages/profile/edit/edit.component.scss
@@ -327,10 +327,17 @@
flex-direction: column;
gap: 20px;
align-items: center;
- width: 100%;
- min-width: 0;
- max-width: 100%;
- padding: 0;
+
+ @media screen and (max-width: 999px) {
+ width: 100%;
+ min-width: 0;
+ max-width: 100%;
+ padding: 0;
+ }
+
+ @media screen and (min-width: 1000px) {
+ width: 672px;
+ }
}
&__close {
@@ -416,32 +423,34 @@
}
}
-@include responsive.apply-below-desktop {
- :host {
- display: block;
- min-width: 0;
- }
+@media screen and (max-width: 999px) {
+ @include responsive.apply-below-desktop {
+ :host {
+ display: block;
+ min-width: 0;
+ }
- .profile {
- padding: 16px var(--page-gutter) max(24px, env(safe-area-inset-bottom));
- }
+ .profile {
+ padding: 16px var(--page-gutter) max(24px, env(safe-area-inset-bottom));
+ }
- .profile__top {
- position: static;
- gap: 12px;
- justify-content: space-between;
- padding: 8px var(--page-gutter);
- }
+ .profile__top {
+ position: static;
+ gap: 12px;
+ justify-content: space-between;
+ padding: 8px var(--page-gutter);
+ }
- .profile__left form {
- width: 100%;
- }
+ .profile__left form {
+ width: 100%;
+ }
- .profile__save {
- @include responsive.mobile-actions;
- }
+ .profile__save {
+ @include responsive.mobile-actions;
+ }
- .profile__wrapper--settings {
- min-width: 0;
+ .profile__wrapper--settings {
+ min-width: 0;
+ }
}
}
diff --git a/projects/social_platform/src/app/ui/pages/profile/edit/edit.component.ts b/projects/social_platform/src/app/ui/pages/profile/edit/edit.component.ts
index af9259bc4..63f9fb9b1 100644
--- a/projects/social_platform/src/app/ui/pages/profile/edit/edit.component.ts
+++ b/projects/social_platform/src/app/ui/pages/profile/edit/edit.component.ts
@@ -1,6 +1,11 @@
/** @format */
-import { ButtonDirective, FormLayoutDirective, PageHeaderComponent } from "@uilib";
+import {
+ ButtonDirective,
+ DesktopLayoutService,
+ FormLayoutDirective,
+ PageHeaderComponent,
+} from "@uilib";
/** @format */
import {
@@ -93,6 +98,7 @@ import { ProfileEditAchievementsInfoService } from "@api/profile/facades/edit/pr
changeDetection: ChangeDetectionStrategy.OnPush,
})
export class ProfileEditComponent implements OnInit, AfterViewInit {
+ protected readonly desktopLayout = inject(DesktopLayoutService).desktop;
private readonly profileFormService = inject(ProfileFormService);
private readonly profileEditInfoService = inject(ProfileEditInfoService);
private readonly projectStepService = inject(ProjectStepService);
diff --git a/projects/social_platform/src/app/ui/pages/program/detail/analytics/analytics.component.scss b/projects/social_platform/src/app/ui/pages/program/detail/analytics/analytics.component.scss
index 1e304f650..91cb4e3be 100644
--- a/projects/social_platform/src/app/ui/pages/program/detail/analytics/analytics.component.scss
+++ b/projects/social_platform/src/app/ui/pages/program/detail/analytics/analytics.component.scss
@@ -208,10 +208,18 @@
&__value {
display: block;
margin-top: 6px;
- font-size: var(--ui-font-h1);
- font-weight: 700;
line-height: 1;
color: var(--black);
+
+ @media screen and (max-width: 999px) {
+ font-size: var(--ui-font-h1);
+ font-weight: 700;
+ }
+
+ @media screen and (min-width: 1000px) {
+ font-size: 24px;
+ font-weight: 700;
+ }
}
&--skeleton {
@@ -258,10 +266,18 @@
}
&__section-label {
- font-size: var(--ui-font-body);
- font-weight: 600;
line-height: 18px;
color: var(--black);
+
+ @media screen and (max-width: 999px) {
+ font-size: var(--ui-font-body);
+ font-weight: 600;
+ }
+
+ @media screen and (min-width: 1000px) {
+ font-size: 13px;
+ font-weight: 600;
+ }
}
}
@@ -279,7 +295,6 @@
max-height: 380px;
@include responsive.apply-desktop {
- /* Let the evaluation card size the row; keep the case list scrolling inside it. */
align-self: stretch;
max-height: none;
contain: size;
@@ -341,7 +356,7 @@
}
&__name {
- /* stylelint-disable-next-line value-no-vendor-prefix -- Required for two-line clamp. */
+ /* stylelint-disable-next-line value-no-vendor-prefix */
display: -webkit-box;
min-width: 0;
overflow: hidden;
@@ -363,17 +378,33 @@
}
&__total-value {
- font-size: var(--ui-font-h2);
- font-weight: 700;
line-height: 20px;
+
+ @media screen and (max-width: 999px) {
+ font-size: var(--ui-font-h2);
+ font-weight: 700;
+ }
+
+ @media screen and (min-width: 1000px) {
+ font-size: 17px;
+ font-weight: 700;
+ }
}
&__total-label,
&__meta {
- font-size: var(--ui-font-caption);
- font-weight: 500;
line-height: 16px;
color: var(--dark-grey);
+
+ @media screen and (max-width: 999px) {
+ font-size: var(--ui-font-caption);
+ font-weight: 500;
+ }
+
+ @media screen and (min-width: 1000px) {
+ font-size: 10px;
+ font-weight: 500;
+ }
}
&__bar {
@@ -470,10 +501,18 @@
}
strong {
- font-size: var(--ui-font-h2);
- font-weight: 700;
line-height: 20px;
color: var(--black);
+
+ @media screen and (max-width: 999px) {
+ font-size: var(--ui-font-h2);
+ font-weight: 700;
+ }
+
+ @media screen and (min-width: 1000px) {
+ font-size: 17px;
+ font-weight: 700;
+ }
}
}
@@ -569,8 +608,15 @@
color: var(--dark-grey);
strong {
- font-size: var(--ui-font-body);
color: var(--black);
+
+ @media screen and (max-width: 999px) {
+ font-size: var(--ui-font-body);
+ }
+
+ @media screen and (min-width: 1000px) {
+ font-size: 13px;
+ }
}
.text-body-10 {
@@ -851,8 +897,15 @@
span {
position: absolute;
- font-size: var(--ui-font-caption);
transform: translateX(-50%);
+
+ @media screen and (max-width: 999px) {
+ font-size: var(--ui-font-caption);
+ }
+
+ @media screen and (min-width: 1000px) {
+ font-size: 11px;
+ }
}
}
}
diff --git a/projects/social_platform/src/app/ui/pages/program/detail/analytics/drilldown/analytics-drilldown.component.scss b/projects/social_platform/src/app/ui/pages/program/detail/analytics/drilldown/analytics-drilldown.component.scss
index be07e5b72..b0d3775ba 100644
--- a/projects/social_platform/src/app/ui/pages/program/detail/analytics/drilldown/analytics-drilldown.component.scss
+++ b/projects/social_platform/src/app/ui/pages/program/detail/analytics/drilldown/analytics-drilldown.component.scss
@@ -1,13 +1,20 @@
/** @format */
+
@use "styles/responsive";
-/* Только case-вариант: shared modal задаёт width своим stylesheet после подключения overlay. */
.modal__body.analytics-drilldown-body.analytics-drilldown-body--case {
box-sizing: border-box;
width: min(880px, calc(100% - 24px));
- max-height: calc(var(--visual-viewport-height, 100dvh) - 32px);
padding: 20px;
overflow-y: auto;
+
+ @media screen and (max-width: 999px) {
+ max-height: calc(var(--visual-viewport-height, 100dvh) - 32px);
+ }
+
+ @media screen and (min-width: 1000px) {
+ max-height: calc(100dvh - 32px);
+ }
}
.analytics-case {
@@ -102,7 +109,7 @@
}
th {
- font-size: var(--ui-font-body);
+ font-size: 13px;
}
th:first-child,
@@ -128,16 +135,21 @@
}
}
-/* Overlay лежит вне host: единственное глобальное правило ограничено собственным bodyClass. */
.modal__body.analytics-drilldown-body {
box-sizing: border-box;
width: min(880px, calc(100vw - 24px));
- max-height: calc(var(--visual-viewport-height, 100dvh) - 32px);
padding: 20px;
overflow-y: auto;
+
+ @media screen and (max-width: 999px) {
+ max-height: calc(var(--visual-viewport-height, 100dvh) - 32px);
+ }
+
+ @media screen and (min-width: 1000px) {
+ max-height: calc(100dvh - 32px);
+ }
}
-/* Тот же шаблон используется в backlog: оформление меняется только у трёх списков назначений. */
.modal__body.analytics-drilldown-body.analytics-drilldown-body--assignments {
width: min(980px, calc(100vw - 32px));
padding: 16px;
@@ -151,8 +163,15 @@
margin-bottom: 24px;
h2 {
- font-size: var(--ui-font-h1);
line-height: 30px;
+
+ @media screen and (max-width: 999px) {
+ font-size: var(--ui-font-h1);
+ }
+
+ @media screen and (min-width: 1000px) {
+ font-size: 24px;
+ }
}
}
@@ -446,7 +465,7 @@
}
th {
- font-size: var(--ui-font-body);
+ font-size: 13px;
font-weight: 600;
}
@@ -520,9 +539,17 @@
.analytics-drilldown__action {
padding: 4px 0;
- font-size: var(--ui-font-body);
- font-weight: 500;
line-height: 20px;
+
+ @media screen and (max-width: 999px) {
+ font-size: var(--ui-font-body);
+ font-weight: 500;
+ }
+
+ @media screen and (min-width: 1000px) {
+ font-size: 13px;
+ font-weight: 500;
+ }
}
@include responsive.apply-desktop {
diff --git a/projects/social_platform/src/app/ui/pages/program/detail/list/list.component.scss b/projects/social_platform/src/app/ui/pages/program/detail/list/list.component.scss
index 53f7b4266..f3ab345b7 100644
--- a/projects/social_platform/src/app/ui/pages/program/detail/list/list.component.scss
+++ b/projects/social_platform/src/app/ui/pages/program/detail/list/list.component.scss
@@ -138,9 +138,19 @@
&__tooltip {
position: fixed;
- right: calc((100vw - 1080px) / 2);
bottom: 24px;
z-index: 30;
+
+ @media screen and (max-width: 999px) {
+ right: calc((100vw - 1080px) / 2);
+ }
+
+ @media screen and (min-width: 1000px) {
+ right:
+ calc(
+ (100vw - 1080px) / 2
+ );
+ }
}
}
@@ -265,11 +275,33 @@
flex-direction: column;
align-items: center;
justify-content: center;
- width: 100%;
- min-width: 0;
- max-width: 100%;
+
+ @media screen and (max-width: 999px) {
+ width: 100%;
+ }
+
+ @media screen and (min-width: 1000px) {
+ width: 80%;
+ }
+
+ @media screen and (max-width: 999px) {
+ min-width: 0;
+ }
+
+ @media screen and (max-width: 999px) {
+ max-width: 100%;
+ }
+
max-height: calc(100vh - 40px);
- padding: 0;
+
+ @media screen and (max-width: 999px) {
+ padding: 0;
+ }
+
+ @media screen and (min-width: 1000px) {
+ padding: 0 24px;
+ }
+
overflow-y: auto;
@include responsive.apply-desktop {
@@ -313,39 +345,43 @@
}
}
-@include responsive.apply-mobile {
- .page__list {
- @include responsive.single-column;
- }
+@media screen and (max-width: 999px) {
+ @include responsive.apply-mobile {
+ .page__list {
+ @include responsive.single-column;
+ }
- .page__mobile-filter-row {
- @include responsive.mobile-actions;
- }
+ .page__mobile-filter-row {
+ @include responsive.mobile-actions;
+ }
- .page__tooltip {
- right: var(--page-gutter);
- bottom: max(16px, env(safe-area-inset-bottom));
- }
+ .page__tooltip {
+ right: var(--page-gutter);
+ bottom: max(16px, env(safe-area-inset-bottom));
+ }
- .tooltip__wrapper {
- position: fixed;
- right: var(--page-gutter);
- bottom: 60px;
- left: auto;
- width: calc(100vw - 2 * var(--page-gutter));
+ .tooltip__wrapper {
+ position: fixed;
+ right: var(--page-gutter);
+ bottom: 60px;
+ left: auto;
+ width: calc(100vw - 2 * var(--page-gutter));
+ }
}
}
-@include responsive.apply-below-desktop {
- .filter {
- position: fixed;
- z-index: 300;
- }
+@media screen and (max-width: 999px) {
+ @include responsive.apply-below-desktop {
+ .filter {
+ position: fixed;
+ z-index: 300;
+ }
- .filter__body {
- min-height: 0;
- max-height: calc(var(--visual-viewport-height, 100dvh) - 80px);
- padding-bottom: env(safe-area-inset-bottom, 0);
- overscroll-behavior: contain;
+ .filter__body {
+ min-height: 0;
+ max-height: calc(var(--visual-viewport-height, 100dvh) - 80px);
+ padding-bottom: env(safe-area-inset-bottom, 0);
+ overscroll-behavior: contain;
+ }
}
}
diff --git a/projects/social_platform/src/app/ui/pages/program/detail/list/rating-card/project-rating/components/boolean-criterion/boolean-criterion.component.scss b/projects/social_platform/src/app/ui/pages/program/detail/list/rating-card/project-rating/components/boolean-criterion/boolean-criterion.component.scss
index 500b43267..09137139f 100644
--- a/projects/social_platform/src/app/ui/pages/program/detail/list/rating-card/project-rating/components/boolean-criterion/boolean-criterion.component.scss
+++ b/projects/social_platform/src/app/ui/pages/program/detail/list/rating-card/project-rating/components/boolean-criterion/boolean-criterion.component.scss
@@ -6,11 +6,13 @@
display: block;
}
-@include responsive.apply-mobile {
- .container {
- justify-content: center;
- min-width: 44px;
- min-height: 44px;
+@media screen and (max-width: 999px) {
+ @include responsive.apply-mobile {
+ .container {
+ justify-content: center;
+ min-width: 44px;
+ min-height: 44px;
+ }
}
}
diff --git a/projects/social_platform/src/app/ui/pages/program/detail/list/rating-card/project-rating/components/range-criterion-input/range-criterion-input.component.scss b/projects/social_platform/src/app/ui/pages/program/detail/list/rating-card/project-rating/components/range-criterion-input/range-criterion-input.component.scss
index 8701d4225..9d620ee46 100644
--- a/projects/social_platform/src/app/ui/pages/program/detail/list/rating-card/project-rating/components/range-criterion-input/range-criterion-input.component.scss
+++ b/projects/social_platform/src/app/ui/pages/program/detail/list/rating-card/project-rating/components/range-criterion-input/range-criterion-input.component.scss
@@ -36,27 +36,35 @@
&:focus {
border-color: var(--accent);
- box-shadow: var(--ui-focus-ring);
+
+ @media screen and (max-width: 999px) {
+ box-shadow: var(--ui-focus-ring);
+ }
+
+ @media screen and (min-width: 1000px) {
+ box-shadow: 0 0 6px rgb(109 40 255 / 30%);
+ }
}
}
}
-/* stylelint-disable property-no-vendor-prefix */
input {
&::-webkit-outer-spin-button,
&::-webkit-inner-spin-button {
- -webkit-appearance: none;
+ appearance: none;
}
&[type="number"] {
- -moz-appearance: textfield;
+ appearance: textfield;
}
}
-@include responsive.apply-mobile {
- .field__input {
- width: 44px;
- height: 44px;
- font-size: var(--ui-font-h3);
+@media screen and (max-width: 999px) {
+ @include responsive.apply-mobile {
+ .field__input {
+ width: 44px;
+ height: 44px;
+ font-size: var(--ui-font-h3);
+ }
}
}
diff --git a/projects/social_platform/src/app/ui/pages/program/detail/main/role-widget/program-role-widget.component.scss b/projects/social_platform/src/app/ui/pages/program/detail/main/role-widget/program-role-widget.component.scss
index d2b8e90f8..3861bff23 100644
--- a/projects/social_platform/src/app/ui/pages/program/detail/main/role-widget/program-role-widget.component.scss
+++ b/projects/social_platform/src/app/ui/pages/program/detail/main/role-widget/program-role-widget.component.scss
@@ -13,17 +13,22 @@
grid-template-rows: 18px minmax(0, 1fr) 22px;
row-gap: 5px;
width: 100%;
-
- /* Исходная карточка при 100%: 157 × 140.984375 CSS px (Mont, desktop). */
height: 140.9844px;
padding: 7px 8px;
- font-size: var(--ui-font-caption);
line-height: 13px;
color: var(--black);
background: var(--light-white);
border: 0.5px solid var(--medium-grey-for-outline);
border-radius: var(--rounded-lg);
+ @media screen and (max-width: 999px) {
+ font-size: var(--ui-font-caption);
+ }
+
+ @media screen and (min-width: 1000px) {
+ font-size: 10px;
+ }
+
&__header {
display: flex;
gap: 5px;
@@ -87,9 +92,16 @@
&__stage-state {
height: 12px;
margin-top: 3px;
- font-size: var(--ui-font-caption);
line-height: 12px;
color: var(--grey-for-text);
+
+ @media screen and (max-width: 999px) {
+ font-size: var(--ui-font-caption);
+ }
+
+ @media screen and (min-width: 1000px) {
+ font-size: 10px;
+ }
}
&__steps {
@@ -161,9 +173,16 @@
}
dt {
- font-size: var(--ui-font-caption);
line-height: 12px;
color: var(--grey-for-text);
+
+ @media screen and (max-width: 999px) {
+ font-size: var(--ui-font-caption);
+ }
+
+ @media screen and (min-width: 1000px) {
+ font-size: 10px;
+ }
}
dd {
@@ -214,8 +233,15 @@
align-content: center;
min-height: 28px;
margin-top: 6px;
- font-size: var(--ui-font-caption);
line-height: 12px;
+
+ @media screen and (max-width: 999px) {
+ font-size: var(--ui-font-caption);
+ }
+
+ @media screen and (min-width: 1000px) {
+ font-size: 10px;
+ }
}
&__status-label {
@@ -297,34 +323,36 @@
}
}
-@include responsive.apply-below-desktop {
- :host {
- width: 100%;
- min-width: 0;
- }
-
- .widget {
- grid-template-rows: auto minmax(0, 1fr) auto;
- gap: 12px;
- height: auto;
- min-height: 160px;
- padding: 16px;
- font-size: var(--ui-font-body);
- line-height: 1.5;
- }
-
- .widget__footer a,
- .widget__footer button {
- min-height: 44px;
- font-size: var(--ui-font-body);
- }
-
- .widget__ellipsis {
- overflow-wrap: anywhere;
- white-space: normal;
- }
-
- .widget__badge {
- font-size: var(--ui-font-small);
+@media screen and (max-width: 999px) {
+ @include responsive.apply-below-desktop {
+ :host {
+ width: 100%;
+ min-width: 0;
+ }
+
+ .widget {
+ grid-template-rows: auto minmax(0, 1fr) auto;
+ gap: 12px;
+ height: auto;
+ min-height: 160px;
+ padding: 16px;
+ font-size: var(--ui-font-body);
+ line-height: 1.5;
+ }
+
+ .widget__footer a,
+ .widget__footer button {
+ min-height: 44px;
+ font-size: var(--ui-font-body);
+ }
+
+ .widget__ellipsis {
+ overflow-wrap: anywhere;
+ white-space: normal;
+ }
+
+ .widget__badge {
+ font-size: var(--ui-font-small);
+ }
}
}
diff --git a/projects/social_platform/src/app/ui/pages/program/main/program-card/program-card.component.html b/projects/social_platform/src/app/ui/pages/program/main/program-card/program-card.component.html
index 42654715f..826edca5b 100644
--- a/projects/social_platform/src/app/ui/pages/program/main/program-card/program-card.component.html
+++ b/projects/social_platform/src/app/ui/pages/program/main/program-card/program-card.component.html
@@ -1,44 +1,86 @@
-@if (program()) {
-
-
+ @if (desktopLayout()) {
+
+
+ }
+
-
+
+
+
+ редактирование профиля
+
-
-
-
-
- ();
ngOnInit(): void {
diff --git a/projects/social_platform/src/app/ui/pages/projects/bar-new/bar.component.html b/projects/social_platform/src/app/ui/pages/projects/bar-new/bar.component.html
index 12887372a..7b993203c 100644
--- a/projects/social_platform/src/app/ui/pages/projects/bar-new/bar.component.html
+++ b/projects/social_platform/src/app/ui/pages/projects/bar-new/bar.component.html
@@ -1,3 +1,31 @@
-();
readonly stepChange = output();
protected readonly tabs = computed(() =>
diff --git a/projects/social_platform/src/app/ui/pages/projects/edit/components/project-team-step/project-team-step.component.scss b/projects/social_platform/src/app/ui/pages/projects/edit/components/project-team-step/project-team-step.component.scss
index c4dffdf56..92bd6bb77 100644
--- a/projects/social_platform/src/app/ui/pages/projects/edit/components/project-team-step/project-team-step.component.scss
+++ b/projects/social_platform/src/app/ui/pages/projects/edit/components/project-team-step/project-team-step.component.scss
@@ -55,6 +55,12 @@
}
::ng-deep .invite__submit button {
+ @media screen and (min-width: 1000px) {
+ min-height: 25px;
+ padding: 4px 12px;
+ line-height: 16px;
+ }
+
&:focus-visible {
outline: 2px solid var(--accent);
outline-offset: 3px;
@@ -139,6 +145,11 @@
}
.team ::ng-deep .invite__submit button {
+ @media screen and (min-width: 1000px) {
+ min-height: 44px;
+ max-height: none;
+ }
+
i {
position: absolute;
left: 12px;
diff --git a/projects/social_platform/src/app/ui/pages/projects/edit/components/project-vacancy-step/project-vacancy-step.component.scss b/projects/social_platform/src/app/ui/pages/projects/edit/components/project-vacancy-step/project-vacancy-step.component.scss
index 83d16bdc2..2b2a5f909 100644
--- a/projects/social_platform/src/app/ui/pages/projects/edit/components/project-vacancy-step/project-vacancy-step.component.scss
+++ b/projects/social_platform/src/app/ui/pages/projects/edit/components/project-vacancy-step/project-vacancy-step.component.scss
@@ -114,9 +114,16 @@
&__error {
margin-top: 12px;
- font-size: var(--ui-font-body);
line-height: 20px;
color: var(--black);
+
+ @media screen and (max-width: 999px) {
+ font-size: var(--ui-font-body);
+ }
+
+ @media screen and (min-width: 1000px) {
+ font-size: 13px;
+ }
}
&__city {
diff --git a/projects/social_platform/src/app/ui/pages/projects/edit/edit.component.html b/projects/social_platform/src/app/ui/pages/projects/edit/edit.component.html
index f544b22d8..86056f6a0 100644
--- a/projects/social_platform/src/app/ui/pages/projects/edit/edit.component.html
+++ b/projects/social_platform/src/app/ui/pages/projects/edit/edit.component.html
@@ -146,7 +146,7 @@
{{ program().name }}
+@if (desktopLayout()) { + @if (program()) { +
+
+ }
}
diff --git a/projects/social_platform/src/app/ui/pages/program/main/program-card/program-card.component.scss b/projects/social_platform/src/app/ui/pages/program/main/program-card/program-card.component.scss
index d9bfd33a4..e66ff0477 100644
--- a/projects/social_platform/src/app/ui/pages/program/main/program-card/program-card.component.scss
+++ b/projects/social_platform/src/app/ui/pages/program/main/program-card/program-card.component.scss
@@ -1,77 +1,145 @@
/** @format */
@use "styles/ui-foundation";
-
-/** @format */
-
@use "styles/responsive";
-.card {
- position: relative;
- display: flex;
- gap: 20px;
- align-items: center;
- max-width: 333px;
+@media screen and (max-width: 999px) {
+ .card {
+ @include ui-foundation.card;
- &__photo {
position: relative;
- z-index: 10;
- flex-shrink: 0;
- width: 123px;
- height: 123px;
- padding: 12px;
- background: var(--white);
- border: 0.5px solid var(--dark-grey);
- border-radius: 50%;
- }
+ display: grid;
+ grid-template-columns: 64px minmax(0, 1fr);
+ gap: 12px;
+ align-items: start;
- &__info {
- @include ui-foundation.card;
+ &__photo {
+ width: 64px;
+ height: 64px;
+ }
- position: relative;
- z-index: 1;
- min-width: 0;
- margin-left: -18%;
- overflow: hidden;
- }
+ &__info {
+ display: grid;
+ gap: 8px;
+ min-width: 0;
+ }
+
+ &__name {
+ /* stylelint-disable-next-line value-no-vendor-prefix */
+ display: -webkit-box;
+ overflow: hidden;
+ font-size: var(--ui-font-body);
+ font-weight: 600;
+ line-height: 20px;
+ color: var(--black);
+ overflow-wrap: anywhere;
+ -webkit-box-orient: vertical;
+ -webkit-line-clamp: 3;
+ }
+
+ &__dates {
+ display: grid;
+ gap: 4px;
+ }
+
+ &__description {
+ font-size: var(--ui-font-small);
+ line-height: 18px;
+ color: var(--dark-grey);
+ }
- &__name {
- overflow: hidden;
- color: var(--black);
- text-overflow: ellipsis;
- white-space: nowrap;
+ &__registration {
+ justify-self: start;
+ max-width: 100%;
+ padding: 4px 8px;
+ color: var(--white);
+ overflow-wrap: anywhere;
+ border-radius: var(--rounded-lg);
+
+ &--actual {
+ background-color: var(--accent);
+ }
+
+ &--ended {
+ background-color: var(--red) !important;
+ }
+
+ &--participating {
+ background-color: var(--green);
+ }
+ }
}
+}
- &__dates {
+@media screen and (min-width: 1000px) {
+ .card {
+ position: relative;
display: flex;
- gap: 2px;
- white-space: nowrap;
- }
+ gap: 20px;
+ align-items: center;
+ max-width: 333px;
- &__description {
- color: var(--dark-grey);
- }
+ &__photo {
+ position: relative;
+ z-index: 10;
+ flex-shrink: 0;
+ width: 123px;
+ height: 123px;
+ padding: 12px;
+ background: var(--white);
+ border: 0.5px solid var(--dark-grey);
+ border-radius: 50%;
+ }
+
+ &__info {
+ position: relative;
+ z-index: 1;
+ min-width: 0;
+ padding: 22px;
+ margin-left: -18%;
+ overflow: hidden;
+ border: 0.5px solid var(--dark-grey);
+ border-radius: var(--rounded-lg);
+ }
+
+ &__name {
+ overflow: hidden;
+ color: var(--black);
+ text-overflow: ellipsis;
+ white-space: nowrap;
+ }
- &__registration {
- padding: 2px 2px 2px 25px;
- margin-top: 2px;
- margin-bottom: 6px;
- overflow: hidden;
- color: var(--white);
- text-overflow: ellipsis;
- white-space: nowrap;
- border-radius: var(--rounded-lg);
-
- &--actual {
- background-color: var(--accent);
+ &__dates {
+ display: flex;
+ gap: 2px;
+ white-space: nowrap;
}
- &--ended {
- background-color: var(--red) !important;
+ &__description {
+ color: var(--dark-grey);
}
- &--participating {
- background-color: var(--green);
+ &__registration {
+ padding: 2px 2px 2px 25px;
+ margin-top: 2px;
+ margin-bottom: 6px;
+ overflow: hidden;
+ color: var(--white);
+ text-overflow: ellipsis;
+ white-space: nowrap;
+ border-radius: var(--rounded-lg);
+
+ &--actual {
+ background-color: var(--accent);
+ }
+
+ &--ended {
+ background-color: var(--red) !important;
+ }
+
+ &--participating {
+ background-color: var(--green);
+ }
}
}
}
diff --git a/projects/social_platform/src/app/ui/pages/program/main/program-card/program-card.component.ts b/projects/social_platform/src/app/ui/pages/program/main/program-card/program-card.component.ts
index a92fc222e..6034b1ab9 100644
--- a/projects/social_platform/src/app/ui/pages/program/main/program-card/program-card.component.ts
+++ b/projects/social_platform/src/app/ui/pages/program/main/program-card/program-card.component.ts
@@ -1,9 +1,12 @@
/** @format */
+import { DesktopLayoutService } from "@uilib";
+/** @format */
+
import { CardDirective } from "@uilib";
/** @format */
-import { ChangeDetectionStrategy, Component, input, Input, OnInit } from "@angular/core";
+import { ChangeDetectionStrategy, Component, inject, input, Input, OnInit } from "@angular/core";
import { AvatarComponent } from "@ui/primitives/avatar/avatar.component";
import { DatePipe, NgClass } from "@angular/common";
import { Program } from "@domain/program/program.model";
@@ -17,6 +20,8 @@ import { Program } from "@domain/program/program.model";
changeDetection: ChangeDetectionStrategy.OnPush,
})
export class ProgramCardComponent implements OnInit {
+ protected readonly desktopLayout = inject(DesktopLayoutService).desktop;
+
readonly program = input.required
+
- - - {{ - registerDateExpired - ? "регистрация завершена" - : program().isUserMember - ? "ты уже участвуешь!" - : "Регистрация до " + (program().datetimeRegistrationEnds | date: "dd MMMM") - }} -
+
+
+ }
+} @else {
+ @if (program()) {
+ {{ program().name }}
-
-
+ - {{ program().datetimeStarted | date: "dd.MM.yyyy" }} +
+ + {{ + registerDateExpired + ? "регистрация завершена" + : program().isUserMember + ? "ты уже участвуешь!" + : "Регистрация до " + (program().datetimeRegistrationEnds | date: "dd MMMM") + }}
--
-- {{ program().datetimeFinished | date: "dd.MM.yyyy" }} + +
+
+ + {{ program().datetimeStarted | date: "dd.MM.yyyy" }} +
+-
++ {{ program().datetimeFinished | date: "dd.MM.yyyy" }} +
+ +• для всей России
+
+
-
+
+
+
+
{{ program().name }}
+ ++ + {{ + registerDateExpired + ? "регистрация завершена" + : program().isUserMember + ? "ты уже участвуешь!" + : "Регистрация до " + (program().datetimeRegistrationEnds | date: "dd MMMM") + }}
- -• для всей России
+ +
+
+ {{ program().datetimeStarted | date: "dd.MM.yyyy" }} - + {{ program().datetimeFinished | date: "dd.MM.yyyy" }} +
+ +для всей России
+📢 внимание!
[open]="isSendDescisionLate()" (openChange)="isSendDescisionLate.set(!isSendDescisionLate())" > -
+
-
Подача проектов завершена!
@@ -159,7 +159,7 @@📢 внимание!
@defer (when fromProgramOpen()) {
+
diff --git a/projects/social_platform/src/app/ui/pages/projects/edit/edit.component.scss b/projects/social_platform/src/app/ui/pages/projects/edit/edit.component.scss
index 0f1db861c..2dd6d64f4 100644
--- a/projects/social_platform/src/app/ui/pages/projects/edit/edit.component.scss
+++ b/projects/social_platform/src/app/ui/pages/projects/edit/edit.component.scss
@@ -144,6 +144,12 @@
}
.cancel {
+ @media screen and (min-width: 1000px) {
+ &.cancel--fixed-width {
+ width: 605px;
+ }
+ }
+
display: flex;
flex-direction: column;
align-items: center;
diff --git a/projects/social_platform/src/app/ui/pages/projects/list/list.component.scss b/projects/social_platform/src/app/ui/pages/projects/list/list.component.scss
index 88722d855..5ab519922 100644
--- a/projects/social_platform/src/app/ui/pages/projects/list/list.component.scss
+++ b/projects/social_platform/src/app/ui/pages/projects/list/list.component.scss
@@ -176,10 +176,9 @@
}
}
-@include responsive.apply-mobile {
+@include responsive.apply-below-desktop {
.page__list {
- @include responsive.single-column;
-
+ grid-template-columns: repeat(auto-fill, minmax(0, var(--ui-mobile-entity-card-width)));
row-gap: 48px;
}
diff --git a/projects/social_platform/src/app/ui/pages/projects/project-activity-card/project-activity-card.component.scss b/projects/social_platform/src/app/ui/pages/projects/project-activity-card/project-activity-card.component.scss
index 1c3e7c1c7..2c03035ef 100644
--- a/projects/social_platform/src/app/ui/pages/projects/project-activity-card/project-activity-card.component.scss
+++ b/projects/social_platform/src/app/ui/pages/projects/project-activity-card/project-activity-card.component.scss
@@ -1,5 +1,7 @@
/** @format */
+@use "styles/responsive";
+
:host {
display: block;
width: 156px;
@@ -48,10 +50,18 @@
gap: 4px;
align-items: center;
min-width: 0;
- font-size: var(--ui-font-caption);
- font-weight: 400;
line-height: 14px;
color: var(--black);
+
+ @media screen and (max-width: 999px) {
+ font-size: var(--ui-font-caption);
+ font-weight: 400;
+ }
+
+ @media screen and (min-width: 1000px) {
+ font-size: 11px;
+ font-weight: 400;
+ }
}
&__icon {
@@ -67,8 +77,6 @@
&__value {
flex: 0 0 auto;
-
- /* Очень большие числа не вытесняют подпись; полное значение остаётся в DOM и title. */
max-width: 45px;
margin: 0 0 0 4px;
overflow: hidden;
@@ -82,3 +90,30 @@
white-space: nowrap;
}
}
+
+@media screen and (max-width: 999px) {
+ @include responsive.apply-below-desktop {
+ :host {
+ width: 100%;
+ height: auto;
+ }
+
+ .activity {
+ padding: 16px;
+ }
+
+ .activity__title {
+ color: var(--ui-text);
+ }
+
+ .activity__metrics {
+ grid-template-rows: auto;
+ grid-template-columns: repeat(2, minmax(0, 1fr));
+ gap: 12px 16px;
+ }
+
+ .activity__metric + .activity__metric {
+ border-top: 0;
+ }
+ }
+}
diff --git a/projects/social_platform/src/app/ui/pages/projects/projects-activity-placement.spec.ts b/projects/social_platform/src/app/ui/pages/projects/projects-activity-placement.spec.ts
index a2ede1797..eb7c116ea 100644
--- a/projects/social_platform/src/app/ui/pages/projects/projects-activity-placement.spec.ts
+++ b/projects/social_platform/src/app/ui/pages/projects/projects-activity-placement.spec.ts
@@ -2,6 +2,14 @@
import { readFileSync } from "node:fs";
import { join } from "node:path";
+import {
+ parseTemplate,
+ TmplAstElement,
+ TmplAstForLoopBlock,
+ TmplAstIfBlock,
+ TmplAstNode,
+ TmplAstTemplate,
+} from "@angular/compiler";
describe("ProjectsComponent: размещение проектной активности", () => {
const template = readFileSync(
@@ -12,17 +20,35 @@ describe("ProjectsComponent: размещение проектной актив
"utf8",
);
+ const activityConditions: string[][] = [];
+ const walk = (nodes: TmplAstNode[], conditions: string[] = []) => {
+ for (const node of nodes) {
+ if (node instanceof TmplAstIfBlock) {
+ for (const branch of node.branches) {
+ walk(branch.children, [...conditions, branch.expression?.source || "else"]);
+ }
+ } else if (node instanceof TmplAstElement || node instanceof TmplAstTemplate) {
+ if (node instanceof TmplAstElement && node.name === "app-project-activity-card") {
+ activityConditions.push(conditions);
+ }
+ walk(node.children, conditions);
+ } else if (node instanceof TmplAstForLoopBlock) {
+ walk(node.children, conditions);
+ }
+ }
+ };
+ walk(parseTemplate(template, "projects.component.html").nodes);
+
it("показывает блок только для dashboard и my", () => {
- expect(template).toMatch(
- /@if \(isMy\(\) \|\| isDashboard\(\)\) \{\s* {
- const conditionalBlock = new RegExp(
- `@if \\(${condition.replace(/[()]/g, "\\$&")}\\) \\{[\\s\\S]*?
Начнем создавать историю!
-
-
-
+
+ ();
diff --git a/projects/social_platform/src/app/ui/primitives/checkbox/checkbox.component.scss b/projects/social_platform/src/app/ui/primitives/checkbox/checkbox.component.scss
index e6686a225..6bdcd2551 100644
--- a/projects/social_platform/src/app/ui/primitives/checkbox/checkbox.component.scss
+++ b/projects/social_platform/src/app/ui/primitives/checkbox/checkbox.component.scss
@@ -1,13 +1,12 @@
/** @format */
@use "styles/ui-foundation";
-
-/** @format */
-
@use "styles/responsive";
.field {
- @include ui-foundation.choice;
+ @media screen and (max-width: 999px) {
+ @include ui-foundation.choice;
+ }
position: relative;
display: flex;
@@ -28,29 +27,35 @@
color: var(--light-white);
}
- &:focus-visible {
- outline: 2px solid var(--accent-dark);
- outline-offset: 3px;
+ @media screen and (max-width: 999px) {
+ &:focus-visible {
+ outline: 2px solid var(--accent-dark);
+ outline-offset: 3px;
+ }
}
- &:disabled {
- cursor: not-allowed;
- opacity: var(--ui-disabled-opacity);
+ @media screen and (max-width: 999px) {
+ &:disabled {
+ cursor: not-allowed;
+ opacity: var(--ui-disabled-opacity);
+ }
}
}
-@include responsive.apply-mobile {
- :host {
- display: inline-flex;
- align-items: center;
- justify-content: center;
- min-width: 44px;
- min-height: 44px;
- }
-
- .field::before {
- position: absolute;
- inset: -12px;
- content: "";
+@media screen and (max-width: 999px) {
+ @include responsive.apply-mobile {
+ :host {
+ display: inline-flex;
+ align-items: center;
+ justify-content: center;
+ min-width: 44px;
+ min-height: 44px;
+ }
+
+ .field::before {
+ position: absolute;
+ inset: -12px;
+ content: "";
+ }
}
}
diff --git a/projects/social_platform/src/app/ui/primitives/dropdown/dropdown.component.scss b/projects/social_platform/src/app/ui/primitives/dropdown/dropdown.component.scss
index 0030c716b..0664e3524 100644
--- a/projects/social_platform/src/app/ui/primitives/dropdown/dropdown.component.scss
+++ b/projects/social_platform/src/app/ui/primitives/dropdown/dropdown.component.scss
@@ -10,17 +10,27 @@
gap: 5px;
align-items: flex-start;
width: 100%;
- min-width: 0;
- max-width: calc(100vw - 24px);
- max-height: min(300px, calc(var(--visual-viewport-height, 100dvh) - 24px));
- padding: var(--ui-space-sm);
overflow-y: auto;
- overscroll-behavior: contain;
background-color: var(--light-white);
- border: 0.5px solid var(--medium-grey-for-outline);
- border-color: var(--ui-border);
- border-radius: var(--ui-radius-card);
- box-shadow: var(--ui-card-hover-shadow);
+
+ @media screen and (max-width: 999px) {
+ min-width: 0;
+ max-width: calc(100vw - 24px);
+ max-height: min(300px, calc(var(--visual-viewport-height, 100dvh) - 24px));
+ padding: var(--ui-space-sm);
+ overscroll-behavior: contain;
+ border: 0.5px solid var(--medium-grey-for-outline);
+ border-color: var(--ui-border);
+ border-radius: var(--ui-radius-card);
+ box-shadow: var(--ui-card-hover-shadow);
+ }
+
+ @media screen and (min-width: 1000px) {
+ max-height: 200px;
+ padding: 12px;
+ border: 0.5px solid var(--medium-grey-for-outline);
+ border-radius: var(--rounded-lg);
+ }
}
&__option {
@@ -28,14 +38,17 @@
gap: 5px;
align-items: center;
justify-content: space-between;
- width: 100%;
- min-width: 0;
- min-height: var(--ui-control-height);
- padding: 8px 12px;
cursor: pointer;
- border-radius: var(--rounded-lg);
transition: color 0.2s ease-in-out;
+ @media screen and (max-width: 999px) {
+ width: 100%;
+ min-width: 0;
+ min-height: var(--ui-control-height);
+ padding: 8px 12px;
+ border-radius: var(--rounded-lg);
+ }
+
&--add-object {
display: flex;
align-items: center;
@@ -101,13 +114,17 @@
}
}
-.field__option p {
- min-width: 0;
- overflow-wrap: anywhere;
+@media screen and (max-width: 999px) {
+ .field__option p {
+ min-width: 0;
+ overflow-wrap: anywhere;
+ }
}
-@include responsive.apply-mobile {
- .field__option {
- min-height: 44px;
+@media screen and (max-width: 999px) {
+ @include responsive.apply-mobile {
+ .field__option {
+ min-height: 44px;
+ }
}
}
diff --git a/projects/social_platform/src/app/ui/primitives/file-item/file-item.component.scss b/projects/social_platform/src/app/ui/primitives/file-item/file-item.component.scss
index 97ef30871..03db598dd 100644
--- a/projects/social_platform/src/app/ui/primitives/file-item/file-item.component.scss
+++ b/projects/social_platform/src/app/ui/primitives/file-item/file-item.component.scss
@@ -2,8 +2,6 @@
@use "styles/responsive";
-/** @format */
-
.file {
display: flex;
gap: 10px;
@@ -23,9 +21,12 @@
&__left {
display: flex;
- flex: 1;
gap: 5px;
align-items: center;
+
+ @media screen and (max-width: 999px) {
+ flex: 1;
+ }
}
&__meta {
@@ -34,7 +35,6 @@
&__icon {
display: flex;
- flex-shrink: 0;
align-items: center;
align-self: center;
justify-content: center;
@@ -44,6 +44,10 @@
border: 0.5px solid var(--medium-grey-for-outline);
border-radius: var(--rounded-xxl);
+ @media screen and (max-width: 999px) {
+ flex-shrink: 0;
+ }
+
&--delete {
color: var(--red);
cursor: pointer;
@@ -61,23 +65,27 @@
}
}
-.file,
-.file__left {
- min-width: 0;
+@media screen and (max-width: 999px) {
+ .file,
+ .file__left {
+ min-width: 0;
+ }
}
-@include responsive.apply-mobile {
- .file {
- flex-wrap: wrap;
- }
+@media screen and (max-width: 999px) {
+ @include responsive.apply-mobile {
+ .file {
+ flex-wrap: wrap;
+ }
- .file__name {
- overflow-wrap: anywhere;
- white-space: normal;
- }
+ .file__name {
+ overflow-wrap: anywhere;
+ white-space: normal;
+ }
- .file__icon {
- width: 44px;
- height: 44px;
+ .file__icon {
+ width: 44px;
+ height: 44px;
+ }
}
}
diff --git a/projects/social_platform/src/app/ui/primitives/input/input.component.scss b/projects/social_platform/src/app/ui/primitives/input/input.component.scss
index 5ff66aaa9..f0ae4a8cf 100644
--- a/projects/social_platform/src/app/ui/primitives/input/input.component.scss
+++ b/projects/social_platform/src/app/ui/primitives/input/input.component.scss
@@ -1,251 +1,442 @@
/** @format */
@use "styles/ui-foundation";
-
-/** @format */
-
@use "styles/typography";
@use "styles/responsive";
-.field {
- position: relative;
+@media screen and (max-width: 999px) {
+ .field {
+ position: relative;
- &__input {
- &::placeholder {
- color: var(--dark-grey);
- }
+ &__input {
+ &::placeholder {
+ color: var(--dark-grey);
+ }
- &--small {
- max-width: 70px;
- padding: 12px 0;
- text-align: center;
+ &--small {
+ max-width: 70px;
+ padding: 12px 0;
+ text-align: center;
- &--error {
- text-align: start;
+ &--error {
+ text-align: start;
+ }
}
- }
- &--big {
- width: 100%;
- padding: 12px;
- }
+ &--big {
+ width: 100%;
+ padding: 12px;
+ }
- &--with-tooltip {
- padding-right: 60px;
- }
+ &--with-tooltip {
+ padding-right: 60px;
+ }
- &--border {
- border: 0.5px solid var(--gray);
- border-radius: var(--rounded-xxl);
+ &--border {
+ border: 0.5px solid var(--gray);
+ border-radius: var(--rounded-xxl);
- &:focus {
- border-color: var(--accent);
- box-shadow: var(--ui-focus-ring);
+ &:focus {
+ border-color: var(--accent);
+ box-shadow: var(--ui-focus-ring);
+ }
}
- }
- &--error,
- &--overflow {
- border: 0.5px solid var(--red);
+ &--error,
+ &--overflow {
+ border: 0.5px solid var(--red);
- &:focus {
- border-color: var(--red);
- box-shadow: var(--ui-error-ring);
+ &:focus {
+ border-color: var(--red);
+ box-shadow: var(--ui-error-ring);
+ }
}
- }
- @include responsive.apply-desktop {
- @include typography.body-12;
- }
-
- @include ui-foundation.control;
- }
+ @include responsive.apply-desktop {
+ @include typography.body-12;
+ }
- &__input[type="date"]::-webkit-inner-spin-button,
- &__input[type="date"]::-webkit-calendar-picker-indicator {
- display: none;
- appearance: none;
- }
+ @include ui-foundation.control;
+ }
- &__input[type="radio"] {
- position: relative;
- width: 10px;
- height: 10px;
- padding: 4px;
- cursor: pointer;
- border: 0.5px solid var(--dark-grey);
- border-radius: 50%;
- transition:
- border-color 0.2s,
- background-color 0.2s;
- appearance: none;
-
- &:hover::after {
- position: absolute;
- top: 50%;
- left: 50%;
- width: 4px;
- height: 4px;
- content: "";
- background-color: var(--accent);
- border-radius: 50%;
- transform: translate(-50%, -50%);
+ &__input[type="date"]::-webkit-inner-spin-button,
+ &__input[type="date"]::-webkit-calendar-picker-indicator {
+ display: none;
+ appearance: none;
}
- &:checked {
- z-index: 1;
- background-color: var(--accent);
- border-color: var(--accent);
+ &__input[type="radio"] {
+ position: relative;
+ width: 10px;
+ height: 10px;
+ padding: 4px;
+ cursor: pointer;
+ border: 0.5px solid var(--dark-grey);
+ border-radius: 50%;
+ transition:
+ border-color 0.2s,
+ background-color 0.2s;
+ appearance: none;
- &::after {
+ &:hover::after {
position: absolute;
top: 50%;
left: 50%;
width: 4px;
height: 4px;
content: "";
- background-color: var(--light-gray);
+ background-color: var(--accent);
border-radius: 50%;
transform: translate(-50%, -50%);
}
+
+ &:checked {
+ z-index: 1;
+ background-color: var(--accent);
+ border-color: var(--accent);
+
+ &::after {
+ position: absolute;
+ top: 50%;
+ left: 50%;
+ width: 4px;
+ height: 4px;
+ content: "";
+ background-color: var(--light-gray);
+ border-radius: 50%;
+ transform: translate(-50%, -50%);
+ }
+ }
+ }
+
+ &__error-icon {
+ position: absolute;
+ top: 50%;
+ right: 26px;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ color: var(--red) !important;
+ pointer-events: none;
+ transform: translateY(-50%);
+
+ &--bare {
+ padding: 0;
+ background: transparent;
+ }
}
- }
- &__error-icon {
- position: absolute;
- top: 50%;
- right: 26px;
- display: flex;
- align-items: center;
- justify-content: center;
- color: var(--red) !important;
- pointer-events: none;
- transform: translateY(-50%);
-
- &--bare {
+ &__right-icon {
+ position: absolute;
+ top: 27%;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ }
+
+ &__calendar-button {
+ position: absolute;
+ top: 50%;
+ right: 18px;
+ display: flex;
+ align-items: center;
+ justify-content: center;
padding: 0;
+ color: var(--accent);
+ cursor: pointer;
background: transparent;
+ border: none;
+ transform: translateY(-50%);
}
- }
- &__right-icon {
- position: absolute;
- top: 27%;
- display: flex;
- align-items: center;
- justify-content: center;
+ &__datepicker-anchor {
+ position: absolute;
+ right: 0;
+ bottom: 0;
+ width: 0;
+ height: 0;
+ padding: 0;
+ pointer-events: none;
+ opacity: 0;
+ }
+
+ &__tooltip-wrapper {
+ position: absolute;
+ top: 55%;
+ right: 20px;
+ z-index: 10;
+ padding: 2px;
+ background-color: var(--light-gray);
+ border-radius: 100%;
+ transform: translateY(-50%);
+
+ &--small {
+ top: 15%;
+ right: -3px;
+ }
+ }
+
+ &__counter {
+ position: absolute;
+ right: 18px;
+ bottom: 0;
+
+ p {
+ color: var(--dark-grey);
+ }
+
+ &--overflow {
+ color: var(--red) !important;
+ }
+ }
}
- &__calendar-button {
- position: absolute;
- top: 50%;
- right: 18px;
- display: flex;
- align-items: center;
- justify-content: center;
- padding: 0;
- color: var(--accent);
- cursor: pointer;
- background: transparent;
- border: none;
- transform: translateY(-50%);
+ :host {
+ display: block;
+ min-width: 0;
+ max-width: 100%;
}
- &__datepicker-anchor {
- position: absolute;
- right: 0;
- bottom: 0;
- width: 0;
- height: 0;
- padding: 0;
- pointer-events: none;
- opacity: 0;
+ .field,
+ .search,
+ .search__input {
+ min-width: 0;
+ max-width: 100%;
}
- &__tooltip-wrapper {
- position: absolute;
- top: 55%;
- right: 20px;
- z-index: 10;
- padding: 2px;
- background-color: var(--light-gray);
- border-radius: 100%;
- transform: translateY(-50%);
+ @include responsive.apply-mobile {
+ .field__input,
+ .field__input-slim,
+ .search__input input {
+ min-width: 0;
+ max-width: 100%;
+ min-height: 44px;
+ font-size: var(--ui-font-h3);
+ }
- &--small {
- top: 15%;
- right: -3px;
+ .field--small,
+ .field__input--small {
+ min-width: 0;
+ }
+
+ .field__input--with-tooltip {
+ padding-right: 44px;
}
- }
- &__counter {
- position: absolute;
- right: 18px;
- bottom: 0;
+ .field__option {
+ min-height: 44px;
+ overflow-wrap: anywhere;
+ }
- p {
- color: var(--dark-grey);
+ .field__chip {
+ max-width: calc(100% - 44px);
}
- &--overflow {
- color: var(--red) !important;
+ .field__chip span {
+ overflow-wrap: anywhere;
+ white-space: normal;
+ }
+
+ .field__calendar-button {
+ right: 4px;
+ width: 44px;
+ height: 44px;
+ }
+
+ .field__input[type="date"] {
+ padding-right: 48px;
}
}
}
-:host {
- display: block;
- min-width: 0;
- max-width: 100%;
-}
+@media screen and (min-width: 1000px) {
+ .field {
+ position: relative;
-.field,
-.search,
-.search__input {
- min-width: 0;
- max-width: 100%;
-}
+ &__input {
+ color: var(--black) !important;
+ background-color: var(--white);
+ border: none;
+ outline: none;
+ transition: all 0.2s;
-@include responsive.apply-mobile {
- .field__input,
- .field__input-slim,
- .search__input input {
- min-width: 0;
- max-width: 100%;
- min-height: 44px;
- font-size: var(--ui-font-h3);
- }
+ &::placeholder {
+ color: var(--dark-grey);
+ }
- .field--small,
- .field__input--small {
- min-width: 0;
- }
+ &--small {
+ max-width: 70px;
+ padding: 12px 0;
+ text-align: center;
- .field__input--with-tooltip {
- padding-right: 44px;
- }
+ &--error {
+ text-align: start;
+ }
+ }
- .field__option {
- min-height: 44px;
- overflow-wrap: anywhere;
- }
+ &--big {
+ width: 100%;
+ padding: 12px;
+ }
- .field__chip {
- max-width: calc(100% - 44px);
- }
+ &--with-tooltip {
+ padding-right: 60px;
+ }
- .field__chip span {
- overflow-wrap: anywhere;
- white-space: normal;
- }
+ &--border {
+ border: 0.5px solid var(--gray);
+ border-radius: var(--rounded-xxl);
- .field__calendar-button {
- right: 4px;
- width: 44px;
- height: 44px;
- }
+ &:focus {
+ border-color: var(--accent);
+ box-shadow: 0 0 6px rgb(109 40 255 / 30%);
+ }
+ }
+
+ &--error,
+ &--overflow {
+ border: 0.5px solid var(--red);
+
+ &:focus {
+ border-color: var(--red);
+ box-shadow: 0 0 6px rgb(255 40 40 / 30.8%);
+ }
+ }
+
+ @include typography.body-10;
+
+ @include responsive.apply-desktop {
+ @include typography.body-12;
+ }
+ }
+
+ &__input[type="date"]::-webkit-inner-spin-button,
+ &__input[type="date"]::-webkit-calendar-picker-indicator {
+ display: none;
+ appearance: none;
+ }
+
+ &__input[type="radio"] {
+ position: relative;
+ width: 10px;
+ height: 10px;
+ padding: 4px;
+ cursor: pointer;
+ border: 0.5px solid var(--dark-grey);
+ border-radius: 50%;
+ transition: border-color 0.2s, background-color 0.2s;
+ appearance: none;
+
+ &:hover::after {
+ position: absolute;
+ top: 50%;
+ left: 50%;
+ width: 4px;
+ height: 4px;
+ content: "";
+ background-color: var(--accent);
+ border-radius: 50%;
+ transform: translate(-50%, -50%);
+ }
+
+ &:checked {
+ z-index: 1;
+ background-color: var(--accent);
+ border-color: var(--accent);
+
+ &::after {
+ position: absolute;
+ top: 50%;
+ left: 50%;
+ width: 4px;
+ height: 4px;
+ content: "";
+ background-color: var(--light-gray);
+ border-radius: 50%;
+ transform: translate(-50%, -50%);
+ }
+ }
+ }
+
+ &__error-icon {
+ position: absolute;
+ top: 50%;
+ right: 26px;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ color: var(--red) !important;
+ pointer-events: none;
+ transform: translateY(-50%);
+
+ &--bare {
+ padding: 0;
+ background: transparent;
+ }
+ }
+
+ &__right-icon {
+ position: absolute;
+ top: 27%;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ }
+
+ &__calendar-button {
+ position: absolute;
+ top: 50%;
+ right: 18px;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ padding: 0;
+ color: var(--accent);
+ cursor: pointer;
+ background: transparent;
+ border: none;
+ transform: translateY(-50%);
+ }
+
+ &__datepicker-anchor {
+ position: absolute;
+ right: 0;
+ bottom: 0;
+ width: 0;
+ height: 0;
+ padding: 0;
+ pointer-events: none;
+ opacity: 0;
+ }
+
+ &__tooltip-wrapper {
+ position: absolute;
+ top: 55%;
+ right: 20px;
+ z-index: 10;
+ padding: 2px;
+ background-color: var(--light-gray);
+ border-radius: 100%;
+ transform: translateY(-50%);
+
+ &--small {
+ top: 15%;
+ right: -3px;
+ }
+ }
+
+ &__counter {
+ position: absolute;
+ right: 18px;
+ bottom: 0;
- .field__input[type="date"] {
- padding-right: 48px;
+ p {
+ color: var(--dark-grey);
+ }
+
+ &--overflow {
+ color: var(--red) !important;
+ }
+ }
}
}
diff --git a/projects/social_platform/src/app/ui/primitives/modal/modal.component.scss b/projects/social_platform/src/app/ui/primitives/modal/modal.component.scss
index cded98e6d..18d997d11 100644
--- a/projects/social_platform/src/app/ui/primitives/modal/modal.component.scss
+++ b/projects/social_platform/src/app/ui/primitives/modal/modal.component.scss
@@ -16,7 +16,14 @@
right: 0;
bottom: 0;
left: 0;
- background-color: var(--ui-backdrop);
+
+ @media screen and (max-width: 999px) {
+ background-color: var(--ui-backdrop);
+ }
+
+ @media screen and (min-width: 1000px) {
+ background-color: rgb(51 46 45 / 50%);
+ }
}
&__body {
@@ -25,18 +32,54 @@
left: 50%;
display: flex;
justify-content: center;
- width: min(var(--ui-dialog-width, var(--ui-dialog-md)), calc(100vw - 24px));
- min-width: 0;
- max-width: calc(100vw - 24px);
- max-height: calc(var(--visual-viewport-height, 100dvh) - 24px);
- padding: var(--ui-dialog-padding);
- overflow-y: auto;
- overscroll-behavior: contain;
+
+ @media screen and (max-width: 999px) {
+ width: min(var(--ui-dialog-width, var(--ui-dialog-md)), calc(100vw - 24px));
+ }
+
+ @media screen and (min-width: 1000px) {
+ width: 90%;
+ }
+
+ @media screen and (max-width: 999px) {
+ min-width: 0;
+ }
+
+ @media screen and (max-width: 999px) {
+ max-width: calc(100vw - 24px);
+ }
+
+ @media screen and (max-width: 999px) {
+ max-height: calc(var(--visual-viewport-height, 100dvh) - 24px);
+ }
+
+ @media screen and (max-width: 999px) {
+ padding: var(--ui-dialog-padding);
+ }
+
+ @media screen and (min-width: 1000px) {
+ padding: 24px;
+ }
+
+ @media screen and (max-width: 999px) {
+ overflow-y: auto;
+ }
+
+ @media screen and (max-width: 999px) {
+ overscroll-behavior: contain;
+ }
+
+ @media screen and (min-width: 1000px) {
+ overflow: hidden;
+ }
+
background: var(--white);
border-radius: var(--ui-radius-dialog);
transform: translate(-50%, -50%);
@include responsive.apply-desktop {
+ width: unset;
+ max-height: 98vh;
overflow-y: auto;
}
@@ -48,66 +91,74 @@
display: block;
}
- ::ng-deep > * {
- flex-shrink: 1;
- min-width: 0;
- max-width: 100%;
- }
-
- @include responsive.apply-below-desktop {
- top: calc(var(--visual-viewport-top, 0px) + var(--visual-viewport-height, 100dvh) / 2);
- padding: var(--ui-dialog-padding);
-
- ::ng-deep .cancel {
+ @media screen and (max-width: 999px) {
+ ::ng-deep > * {
+ flex-shrink: 1;
min-width: 0;
max-width: 100%;
- max-height: none;
- padding: 12px;
}
+ }
- ::ng-deep .cancel__buttons {
- @include responsive.mobile-actions;
+ @media screen and (max-width: 999px) {
+ @include responsive.apply-below-desktop {
+ top: calc(var(--visual-viewport-top, 0px) + var(--visual-viewport-height, 100dvh) / 2);
+ padding: var(--ui-dialog-padding);
- position: sticky;
- bottom: 0;
- z-index: 2;
- justify-content: center;
- padding-top: 8px;
- padding-bottom: env(safe-area-inset-bottom, 0);
- background: var(--white);
- }
+ ::ng-deep .cancel {
+ min-width: 0;
+ max-width: 100%;
+ max-height: none;
+ padding: 12px;
+ }
- ::ng-deep .cancel__text {
- width: 100%;
- }
+ ::ng-deep .cancel__buttons {
+ @include responsive.mobile-actions;
- ::ng-deep .cancel__top {
- position: sticky;
- top: 0;
- z-index: 2;
- background: var(--white);
- }
+ position: sticky;
+ bottom: 0;
+ z-index: 2;
+ justify-content: center;
+ padding-top: 8px;
+ padding-bottom: env(safe-area-inset-bottom, 0);
+ background: var(--white);
+ }
- ::ng-deep .cancel__cross {
- display: inline-flex;
- align-items: center;
- justify-content: center;
- min-width: 44px;
- min-height: 44px;
+ ::ng-deep .cancel__text {
+ width: 100%;
+ }
+
+ ::ng-deep .cancel__top {
+ position: sticky;
+ top: 0;
+ z-index: 2;
+ background: var(--white);
+ }
- svg {
- max-width: 16px;
- max-height: 16px;
+ ::ng-deep .cancel__cross {
+ display: inline-flex;
+ align-items: center;
+ justify-content: center;
+ min-width: 44px;
+ min-height: 44px;
+
+ svg {
+ max-width: 16px;
+ max-height: 16px;
+ }
}
}
}
}
}
-.modal__body--small {
- --ui-dialog-width: var(--ui-dialog-sm);
+@media screen and (max-width: 999px) {
+ .modal__body--small {
+ --ui-dialog-width: var(--ui-dialog-sm);
+ }
}
-.modal__body--large {
- --ui-dialog-width: var(--ui-dialog-lg);
+@media screen and (max-width: 999px) {
+ .modal__body--large {
+ --ui-dialog-width: var(--ui-dialog-lg);
+ }
}
diff --git a/projects/social_platform/src/app/ui/primitives/search/search.component.scss b/projects/social_platform/src/app/ui/primitives/search/search.component.scss
index 5e00182a9..a4416338a 100644
--- a/projects/social_platform/src/app/ui/primitives/search/search.component.scss
+++ b/projects/social_platform/src/app/ui/primitives/search/search.component.scss
@@ -1,112 +1,159 @@
/** @format */
@use "styles/ui-foundation";
-
-/** @format */
-
@use "styles/responsive";
-.search {
- display: flex;
- align-items: center;
- width: 100%;
- cursor: pointer;
- border-bottom: 0.5px solid var(--dark-grey);
-
- &__other {
- flex-grow: 1;
- }
-
- &__icon {
- margin-right: 4px;
- margin-bottom: 2px;
- color: var(--dark-grey);
+@media screen and (max-width: 999px) {
+ .search {
+ display: flex;
+ align-items: center;
+ width: 100%;
+ cursor: pointer;
+ border-bottom: 0.5px solid var(--dark-grey);
- &--open {
- margin-top: 4px;
- margin-bottom: 0;
+ &__other {
+ flex-grow: 1;
}
- }
- &__text {
- color: var(--dark-grey);
- }
+ &__icon {
+ margin-right: 4px;
+ margin-bottom: 2px;
+ color: var(--dark-grey);
- &__input {
- width: 100%;
+ &--open {
+ margin-top: 4px;
+ margin-bottom: 0;
+ }
+ }
- @include responsive.apply-desktop {
- width: 200px;
+ &__text {
+ color: var(--dark-grey);
}
- input {
+ &__input {
width: 100%;
- background-color: transparent;
- border: none;
- outline: none;
- &::placeholder {
- color: var(--dark-grey);
+ @include responsive.apply-desktop {
+ width: 200px;
}
- @include ui-foundation.control;
- }
- }
-}
+ input {
+ width: 100%;
+ background-color: transparent;
+ border: none;
+ outline: none;
-:host {
- display: block;
- min-width: 0;
- max-width: 100%;
-}
+ &::placeholder {
+ color: var(--dark-grey);
+ }
-.field,
-.search,
-.search__input {
- min-width: 0;
- max-width: 100%;
-}
+ @include ui-foundation.control;
+ }
+ }
+ }
-@include responsive.apply-mobile {
- .field__input,
- .field__input-slim,
- .search__input input {
+ :host {
+ display: block;
min-width: 0;
max-width: 100%;
- min-height: 44px;
- font-size: var(--ui-font-h3);
}
- .field--small,
- .field__input--small {
+ .field,
+ .search,
+ .search__input {
min-width: 0;
+ max-width: 100%;
}
- .field__input--with-tooltip {
- padding-right: 44px;
- }
+ @include responsive.apply-mobile {
+ .field__input,
+ .field__input-slim,
+ .search__input input {
+ min-width: 0;
+ max-width: 100%;
+ min-height: 44px;
+ font-size: var(--ui-font-h3);
+ }
- .field__option {
- min-height: 44px;
- overflow-wrap: anywhere;
- }
+ .field--small,
+ .field__input--small {
+ min-width: 0;
+ }
- .field__chip {
- max-width: calc(100% - 44px);
- }
+ .field__input--with-tooltip {
+ padding-right: 44px;
+ }
- .field__chip span {
- overflow-wrap: anywhere;
- white-space: normal;
- }
+ .field__option {
+ min-height: 44px;
+ overflow-wrap: anywhere;
+ }
+
+ .field__chip {
+ max-width: calc(100% - 44px);
+ }
+
+ .field__chip span {
+ overflow-wrap: anywhere;
+ white-space: normal;
+ }
+
+ .field__calendar-button {
+ right: 4px;
+ width: 44px;
+ height: 44px;
+ }
- .field__calendar-button {
- right: 4px;
- width: 44px;
- height: 44px;
+ .field__input[type="date"] {
+ padding-right: 48px;
+ }
}
+}
+
+@media screen and (min-width: 1000px) {
+ .search {
+ display: flex;
+ align-items: center;
+ width: 100%;
+ cursor: pointer;
+ border-bottom: 0.5px solid var(--dark-grey);
+
+ &__other {
+ flex-grow: 1;
+ }
- .field__input[type="date"] {
- padding-right: 48px;
+ &__icon {
+ margin-right: 4px;
+ margin-bottom: 2px;
+ color: var(--dark-grey);
+
+ &--open {
+ margin-top: 4px;
+ margin-bottom: 0;
+ }
+ }
+
+ &__text {
+ color: var(--dark-grey);
+ }
+
+ &__input {
+ width: 100%;
+
+ @include responsive.apply-desktop {
+ width: 200px;
+ }
+
+ input {
+ width: 100%;
+ background-color: transparent;
+ border: none;
+ outline: none;
+
+ &::placeholder {
+ color: var(--dark-grey);
+ }
+ }
+ }
}
}
diff --git a/projects/social_platform/src/app/ui/primitives/select/select.component.scss b/projects/social_platform/src/app/ui/primitives/select/select.component.scss
index 26758630c..8afe52e48 100644
--- a/projects/social_platform/src/app/ui/primitives/select/select.component.scss
+++ b/projects/social_platform/src/app/ui/primitives/select/select.component.scss
@@ -1,177 +1,284 @@
/** @format */
@use "styles/ui-foundation";
-
-/** @format */
-
@use "styles/typography";
@use "styles/responsive";
-.field {
- position: relative;
- width: 100%;
-
- &__input {
+@media screen and (max-width: 999px) {
+ .field {
position: relative;
- z-index: 2;
- display: flex;
- align-items: center;
- justify-content: space-between;
- cursor: pointer;
-
- &--small {
- max-width: 70px;
- padding: 12px;
- text-align: center;
+ width: 100%;
+
+ &__input {
+ position: relative;
+ z-index: 2;
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+ cursor: pointer;
+
+ &--small {
+ max-width: 70px;
+ padding: 12px;
+ text-align: center;
+ }
+
+ &--big {
+ width: 100%;
+ padding: 12px;
+ }
+
+ &--placeholder {
+ color: var(--dark-grey);
+ }
+
+ &--open {
+ border-color: var(--accent);
+ box-shadow: var(--ui-focus-ring);
+ }
+
+ &--error {
+ border-color: var(--red) !important;
+ }
+
+ &--disabled {
+ cursor: not-allowed;
+ opacity: 0.5;
+ }
+
+ @include ui-foundation.control;
}
- &--big {
- width: 100%;
- padding: 12px;
+ &__options {
+ position: absolute;
+ right: 0;
+ bottom: -6px;
+ left: 5%;
+ z-index: 11;
+ width: 90%;
+ max-height: 200px;
+ overflow-y: auto;
+ background-color: var(--white);
+ border: 0.5px solid var(--gray);
+ border-radius: var(--rounded-lg);
+ transform: translateY(100%);
}
- &--placeholder {
+ &__option {
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+ padding: 12px 18px;
color: var(--dark-grey);
- }
+ cursor: pointer;
+ border-radius: var(--rounded-lg);
+ transition: background-color 0.2s;
- &--open {
- border-color: var(--accent);
- box-shadow: var(--ui-focus-ring);
- }
+ &--highlighted {
+ background-color: var(--light-gray);
+ }
- &--error {
- border-color: var(--red) !important;
+ &:hover {
+ color: var(--accent);
+ }
}
- &--disabled {
- cursor: not-allowed;
- opacity: 0.5;
+ &__arrow {
+ color: var(--dark-grey);
+ transition: all 0.2s;
+ transform: rotate(180deg);
+
+ &--filpped {
+ color: var(--accent);
+ transform: rotate(0deg);
+ }
}
- @include ui-foundation.control;
+ &__error-icon {
+ flex: 0 0 auto;
+ color: var(--red);
+ pointer-events: none;
+
+ &--bare {
+ padding: 0;
+ background: transparent;
+ }
+ }
}
- &__options {
- position: absolute;
- right: 0;
- bottom: -6px;
- left: 5%;
- z-index: 11;
- width: 90%;
- max-height: 200px;
- overflow-y: auto;
- background-color: var(--white);
- border: 0.5px solid var(--gray);
- border-radius: var(--rounded-lg);
- transform: translateY(100%);
+ :host {
+ display: block;
+ min-width: 0;
+ max-width: 100%;
}
- &__option {
- display: flex;
- align-items: center;
- justify-content: space-between;
- padding: 12px 18px;
- color: var(--dark-grey);
- cursor: pointer;
- border-radius: var(--rounded-lg);
- transition: background-color 0.2s;
+ .field,
+ .search,
+ .search__input {
+ min-width: 0;
+ max-width: 100%;
+ }
- &--highlighted {
- background-color: var(--light-gray);
+ @include responsive.apply-mobile {
+ .field__input,
+ .field__input-slim,
+ .search__input input {
+ min-width: 0;
+ max-width: 100%;
+ min-height: 44px;
+ font-size: var(--ui-font-h3);
}
- &:hover {
- color: var(--accent);
+ .field--small,
+ .field__input--small {
+ min-width: 0;
}
- }
- &__arrow {
- color: var(--dark-grey);
- transition: all 0.2s;
- transform: rotate(180deg);
-
- &--filpped {
- color: var(--accent);
- transform: rotate(0deg);
+ .field__input--with-tooltip {
+ padding-right: 44px;
}
- }
- &__error-icon {
- flex: 0 0 auto;
- color: var(--red);
- pointer-events: none;
+ .field__option {
+ min-height: 44px;
+ overflow-wrap: anywhere;
+ }
- &--bare {
- padding: 0;
- background: transparent;
+ .field__chip {
+ max-width: calc(100% - 44px);
}
- }
-}
-:host {
- display: block;
- min-width: 0;
- max-width: 100%;
-}
+ .field__chip span {
+ overflow-wrap: anywhere;
+ white-space: normal;
+ }
-.field,
-.search,
-.search__input {
- min-width: 0;
- max-width: 100%;
-}
+ .field__calendar-button {
+ right: 4px;
+ width: 44px;
+ height: 44px;
+ }
-@include responsive.apply-mobile {
- .field__input,
- .field__input-slim,
- .search__input input {
- min-width: 0;
- max-width: 100%;
- min-height: 44px;
- font-size: var(--ui-font-h3);
+ .field__input[type="date"] {
+ padding-right: 48px;
+ }
}
- .field--small,
- .field__input--small {
+ .field__input > span,
+ .field__input > p {
min-width: 0;
+ overflow-wrap: anywhere;
}
- .field__input--with-tooltip {
- padding-right: 44px;
+ .field__arrow,
+ .field__error-icon {
+ flex-shrink: 0;
}
+}
- .field__option {
- min-height: 44px;
- overflow-wrap: anywhere;
- }
+@media screen and (min-width: 1000px) {
+ .field {
+ position: relative;
+ width: 100%;
+
+ &__input {
+ position: relative;
+ z-index: 2;
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+ color: var(--black);
+ cursor: pointer;
+ background-color: var(--white);
+ border: 0.5px solid var(--gray);
+ border-radius: var(--rounded-xxl);
+ outline: none;
+
+ &--small {
+ max-width: 70px;
+ padding: 12px;
+ text-align: center;
+ }
+
+ &--big {
+ width: 100%;
+ padding: 12px;
+ }
+
+ &--placeholder {
+ color: var(--dark-grey);
+ }
+
+ &--open {
+ border-color: var(--accent);
+ box-shadow: 0 0 6px rgb(109 40 255 / 30%);
+ }
+
+ &--error {
+ border-color: var(--red) !important;
+ }
+
+ &--disabled {
+ cursor: not-allowed;
+ opacity: 0.5;
+ }
+
+ @include typography.body-12;
+ }
- .field__chip {
- max-width: calc(100% - 44px);
- }
+ &__options {
+ position: absolute;
+ right: 0;
+ bottom: -6px;
+ left: 5%;
+ z-index: 11;
+ width: 90%;
+ max-height: 200px;
+ overflow-y: auto;
+ background-color: var(--white);
+ border: 0.5px solid var(--gray);
+ border-radius: var(--rounded-lg);
+ transform: translateY(100%);
+ }
- .field__chip span {
- overflow-wrap: anywhere;
- white-space: normal;
- }
+ &__option {
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+ padding: 12px 18px;
+ color: var(--dark-grey);
+ cursor: pointer;
+ border-radius: var(--rounded-lg);
+ transition: background-color 0.2s;
- .field__calendar-button {
- right: 4px;
- width: 44px;
- height: 44px;
- }
+ &--highlighted {
+ background-color: var(--light-gray);
+ }
- .field__input[type="date"] {
- padding-right: 48px;
- }
-}
+ &:hover {
+ color: var(--accent);
+ }
+ }
-.field__input > span,
-.field__input > p {
- min-width: 0;
- overflow-wrap: anywhere;
-}
+ &__arrow {
+ color: var(--dark-grey);
+ transition: all 0.2s;
+ transform: rotate(180deg);
+
+ &--filpped {
+ color: var(--accent);
+ transform: rotate(0deg);
+ }
+ }
-.field__arrow,
-.field__error-icon {
- flex-shrink: 0;
+ &__error-icon {
+ flex: 0 0 auto;
+ color: var(--red);
+ pointer-events: none;
+
+ &--bare {
+ padding: 0;
+ background: transparent;
+ }
+ }
+ }
}
diff --git a/projects/social_platform/src/app/ui/primitives/switch/switch.component.scss b/projects/social_platform/src/app/ui/primitives/switch/switch.component.scss
index ff0112559..b589397ea 100644
--- a/projects/social_platform/src/app/ui/primitives/switch/switch.component.scss
+++ b/projects/social_platform/src/app/ui/primitives/switch/switch.component.scss
@@ -31,18 +31,20 @@
}
}
-@include responsive.apply-mobile {
- :host {
- display: inline-flex;
- align-items: center;
- justify-content: center;
- min-width: 44px;
- min-height: 44px;
- }
+@media screen and (max-width: 999px) {
+ @include responsive.apply-mobile {
+ :host {
+ display: inline-flex;
+ align-items: center;
+ justify-content: center;
+ min-width: 44px;
+ min-height: 44px;
+ }
- .switch::before {
- position: absolute;
- inset: -12px -2px;
- content: "";
+ .switch::before {
+ position: absolute;
+ inset: -12px -2px;
+ content: "";
+ }
}
}
diff --git a/projects/social_platform/src/app/ui/primitives/tag/tag.component.scss b/projects/social_platform/src/app/ui/primitives/tag/tag.component.scss
index 14d8f9629..b0190ed62 100644
--- a/projects/social_platform/src/app/ui/primitives/tag/tag.component.scss
+++ b/projects/social_platform/src/app/ui/primitives/tag/tag.component.scss
@@ -1,15 +1,12 @@
/** @format */
@use "styles/ui-foundation";
-
-/** @format */
-
@use "styles/responsive";
-/** @format */
-
.tag {
- @include ui-foundation.badge;
+ @media screen and (max-width: 999px) {
+ @include ui-foundation.badge;
+ }
position: relative;
display: flex;
@@ -17,10 +14,25 @@
justify-content: center;
width: 100%;
max-width: 120px;
- padding: 4px 12px;
+
+ @media screen and (max-width: 999px) {
+ padding: 4px 12px;
+ }
+
+ @media screen and (min-width: 1000px) {
+ padding: 2px 20px;
+ }
+
overflow: hidden;
- font-size: var(--ui-font-caption);
- line-height: 1.5;
+
+ @media screen and (max-width: 999px) {
+ font-size: var(--ui-font-caption);
+ }
+
+ @media screen and (max-width: 999px) {
+ line-height: 1.5;
+ }
+
color: var(--accent);
text-overflow: ellipsis;
white-space: nowrap;
@@ -192,25 +204,27 @@
}
}
-@include responsive.apply-mobile {
- .tag {
- max-width: 100%;
- padding: 4px 12px;
- overflow-wrap: anywhere;
- white-space: normal;
- }
+@media screen and (max-width: 999px) {
+ @include responsive.apply-mobile {
+ .tag {
+ max-width: 100%;
+ padding: 4px 12px;
+ overflow-wrap: anywhere;
+ white-space: normal;
+ }
- .tag p {
- min-width: 0;
- }
+ .tag p {
+ min-width: 0;
+ }
- .tag:has(.tag__icons) {
- padding-right: 40px;
- }
+ .tag:has(.tag__icons) {
+ padding-right: 40px;
+ }
- .tag__icons {
- top: 0;
- bottom: 0;
- align-items: center;
+ .tag__icons {
+ top: 0;
+ bottom: 0;
+ align-items: center;
+ }
}
}
diff --git a/projects/social_platform/src/app/ui/primitives/textarea/textarea.component.scss b/projects/social_platform/src/app/ui/primitives/textarea/textarea.component.scss
index 6c32da48c..3003879cf 100644
--- a/projects/social_platform/src/app/ui/primitives/textarea/textarea.component.scss
+++ b/projects/social_platform/src/app/ui/primitives/textarea/textarea.component.scss
@@ -1,33 +1,12 @@
/** @format */
@use "styles/ui-foundation";
-
-/** @format */
-
@use "styles/typography";
@use "styles/responsive";
-.field {
- position: relative;
-
- &--small {
- min-width: 245px;
- }
-
- &--big {
- width: 100%;
- }
-
- &__input {
- display: block;
- width: 100%;
- min-height: 162px;
- padding: 12px 18px;
- resize: none;
-
- &::placeholder {
- color: var(--dark-grey);
- }
+@media screen and (max-width: 999px) {
+ .field {
+ position: relative;
&--small {
min-width: 245px;
@@ -37,131 +16,256 @@
width: 100%;
}
- &--with-tooltip {
- padding-right: 130px;
- padding-right: 60px;
- }
+ &__input {
+ display: block;
+ width: 100%;
+ min-height: 162px;
+ padding: 12px 18px;
+ resize: none;
- &--error,
- &--overflow {
- border: 0.5px solid var(--red);
+ &::placeholder {
+ color: var(--dark-grey);
+ }
+
+ &--small {
+ min-width: 245px;
+ }
+
+ &--big {
+ width: 100%;
+ }
+
+ &--with-tooltip {
+ padding-right: 130px;
+ padding-right: 60px;
+ }
+
+ &--error,
+ &--overflow {
+ border: 0.5px solid var(--red);
+
+ &:focus {
+ border-color: var(--red) !important;
+ box-shadow: var(--ui-error-ring) !important;
+ }
+ }
&:focus {
- border-color: var(--red) !important;
- box-shadow: var(--ui-error-ring) !important;
+ border-color: var(--accent);
+ box-shadow: var(--ui-focus-ring);
}
- }
- &:focus {
- border-color: var(--accent);
- box-shadow: var(--ui-focus-ring);
+ @include ui-foundation.control;
+
+ border-radius: var(--ui-radius-card);
}
- @include ui-foundation.control;
+ &__error-icon {
+ position: absolute;
+ top: 25px;
+ right: 15px;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ color: var(--red) !important;
+ pointer-events: none;
+ transform: translateY(-50%);
- border-radius: var(--ui-radius-card);
- }
+ i {
+ color: var(--red) !important;
+ }
- &__error-icon {
- position: absolute;
- top: 25px;
- right: 15px;
- display: flex;
- align-items: center;
- justify-content: center;
- color: var(--red) !important;
- pointer-events: none;
- transform: translateY(-50%);
-
- i {
- color: var(--red) !important;
+ &--bare {
+ padding: 0;
+ background: transparent;
+ }
+ }
+
+ &__tooltip-wrapper {
+ position: absolute;
+ top: 25px;
+ right: 15px;
+ z-index: 10;
+ padding: 2px;
+ background-color: var(--light-gray);
+ border-radius: 100%;
+ transform: translateY(-50%);
}
- &--bare {
- padding: 0;
- background: transparent;
+ &__counter {
+ position: absolute;
+ right: 18px;
+ bottom: 4px;
+
+ p {
+ color: var(--dark-grey);
+ }
+
+ &--overflow {
+ color: var(--red) !important;
+ }
}
}
- &__tooltip-wrapper {
- position: absolute;
- top: 25px;
- right: 15px;
- z-index: 10;
- padding: 2px;
- background-color: var(--light-gray);
- border-radius: 100%;
- transform: translateY(-50%);
+ :host {
+ display: block;
+ min-width: 0;
+ max-width: 100%;
+ }
+
+ .field,
+ .search,
+ .search__input {
+ min-width: 0;
+ max-width: 100%;
}
- &__counter {
- position: absolute;
- right: 18px;
- bottom: 4px;
+ @include responsive.apply-mobile {
+ .field__input,
+ .field__input-slim,
+ .search__input input {
+ min-width: 0;
+ max-width: 100%;
+ min-height: 44px;
+ font-size: var(--ui-font-h3);
+ }
- p {
- color: var(--dark-grey);
+ .field--small,
+ .field__input--small {
+ min-width: 0;
}
- &--overflow {
- color: var(--red) !important;
+ .field__input--with-tooltip {
+ padding-right: 44px;
+ }
+
+ .field__option {
+ min-height: 44px;
+ overflow-wrap: anywhere;
+ }
+
+ .field__chip {
+ max-width: calc(100% - 44px);
+ }
+
+ .field__chip span {
+ overflow-wrap: anywhere;
+ white-space: normal;
+ }
+
+ .field__calendar-button {
+ right: 4px;
+ width: 44px;
+ height: 44px;
+ }
+
+ .field__input[type="date"] {
+ padding-right: 48px;
}
}
}
-:host {
- display: block;
- min-width: 0;
- max-width: 100%;
-}
+@media screen and (min-width: 1000px) {
+ .field {
+ position: relative;
-.field,
-.search,
-.search__input {
- min-width: 0;
- max-width: 100%;
-}
+ &--small {
+ min-width: 245px;
+ }
-@include responsive.apply-mobile {
- .field__input,
- .field__input-slim,
- .search__input input {
- min-width: 0;
- max-width: 100%;
- min-height: 44px;
- font-size: var(--ui-font-h3);
- }
+ &--big {
+ width: 100%;
+ }
- .field--small,
- .field__input--small {
- min-width: 0;
- }
+ &__input {
+ display: block;
+ width: 100%;
+ min-height: 162px;
+ padding: 12px 18px;
+ color: var(--black);
+ resize: none;
+ background-color: var(--white);
+ border: 0.5px solid var(--gray);
+ border-radius: var(--rounded-xl);
+ outline: none;
+ transition: all 0.2s;
+
+ &::placeholder {
+ color: var(--dark-grey);
+ }
- .field__input--with-tooltip {
- padding-right: 44px;
- }
+ &--small {
+ min-width: 245px;
+ }
- .field__option {
- min-height: 44px;
- overflow-wrap: anywhere;
- }
+ &--big {
+ width: 100%;
+ }
- .field__chip {
- max-width: calc(100% - 44px);
- }
+ &--with-tooltip {
+ padding-right: 130px;
+ }
- .field__chip span {
- overflow-wrap: anywhere;
- white-space: normal;
- }
+ &--error,
+ &--overflow {
+ border: 0.5px solid var(--red);
- .field__calendar-button {
- right: 4px;
- width: 44px;
- height: 44px;
- }
+ &:focus {
+ border-color: var(--red) !important;
+ box-shadow: 0 0 6px rgb(255 40 40 / 30.8%) !important;
+ }
+ }
+
+ &:focus {
+ border-color: var(--accent);
+ box-shadow: 0 0 6px rgb(109 40 255 / 30%);
+ }
+ }
+
+ &__error-icon {
+ position: absolute;
+ top: 25px;
+ right: 15px;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ color: var(--red) !important;
+ pointer-events: none;
+ transform: translateY(-50%);
- .field__input[type="date"] {
- padding-right: 48px;
+ i {
+ color: var(--red) !important;
+ }
+
+ &--bare {
+ padding: 0;
+ background: transparent;
+ }
+ }
+
+ &__tooltip-wrapper {
+ position: absolute;
+ top: 25px;
+ right: 15px;
+ z-index: 10;
+ padding: 2px;
+ background-color: var(--light-gray);
+ border-radius: 100%;
+ transform: translateY(-50%);
+ }
+
+ &__counter {
+ position: absolute;
+ right: 18px;
+ bottom: 4px;
+
+ p {
+ color: var(--dark-grey);
+ }
+
+ &--overflow {
+ color: var(--red) !important;
+ }
+ }
}
}
diff --git a/projects/social_platform/src/app/ui/primitives/upload-file/upload-file.component.scss b/projects/social_platform/src/app/ui/primitives/upload-file/upload-file.component.scss
index fc2230911..a71af676a 100644
--- a/projects/social_platform/src/app/ui/primitives/upload-file/upload-file.component.scss
+++ b/projects/social_platform/src/app/ui/primitives/upload-file/upload-file.component.scss
@@ -56,7 +56,6 @@
border-radius: var(--rounded-lg);
&__title {
- /* width: 80%; */
overflow: hidden;
color: var(--black);
text-overflow: ellipsis;
@@ -88,34 +87,36 @@
}
}
-@include responsive.apply-mobile {
- .control {
- height: auto;
- min-height: 120px;
- }
+@media screen and (max-width: 999px) {
+ @include responsive.apply-mobile {
+ .control {
+ height: auto;
+ min-height: 120px;
+ }
- .control label {
- min-height: 120px;
- padding: 16px;
- }
+ .control label {
+ min-height: 120px;
+ padding: 16px;
+ }
- .control__success,
- .file {
- flex-wrap: wrap;
- min-width: 0;
- max-width: 100%;
- }
+ .control__success,
+ .file {
+ flex-wrap: wrap;
+ min-width: 0;
+ max-width: 100%;
+ }
- .file__title {
- min-width: 0;
- max-width: 100%;
- overflow-wrap: anywhere;
- white-space: normal;
- }
+ .file__title {
+ min-width: 0;
+ max-width: 100%;
+ overflow-wrap: anywhere;
+ white-space: normal;
+ }
- .file__basket,
- .file__replace {
- min-width: 44px;
- min-height: 44px;
+ .file__basket,
+ .file__replace {
+ min-width: 44px;
+ min-height: 44px;
+ }
}
}
diff --git a/projects/social_platform/src/app/ui/widgets/cookie-consent/cookie-consent.component.scss b/projects/social_platform/src/app/ui/widgets/cookie-consent/cookie-consent.component.scss
index de7c55c2d..e9302095a 100644
--- a/projects/social_platform/src/app/ui/widgets/cookie-consent/cookie-consent.component.scss
+++ b/projects/social_platform/src/app/ui/widgets/cookie-consent/cookie-consent.component.scss
@@ -2,8 +2,6 @@
@use "styles/responsive";
-/** @format */
-
.cookie-consent {
position: fixed;
right: 20px;
@@ -38,18 +36,20 @@
}
}
-@include responsive.apply-mobile {
- .cookie-consent {
- right: var(--page-gutter);
- bottom: max(12px, env(safe-area-inset-bottom));
- left: var(--page-gutter);
- max-width: none;
- max-height: calc(100dvh - 24px);
- padding: 16px;
- overflow-y: auto;
- }
+@media screen and (max-width: 999px) {
+ @include responsive.apply-mobile {
+ .cookie-consent {
+ right: var(--page-gutter);
+ bottom: max(12px, env(safe-area-inset-bottom));
+ left: var(--page-gutter);
+ max-width: none;
+ max-height: calc(100dvh - 24px);
+ padding: 16px;
+ overflow-y: auto;
+ }
- .cookie-consent__buttons {
- @include responsive.mobile-actions;
+ .cookie-consent__buttons {
+ @include responsive.mobile-actions;
+ }
}
}
diff --git a/projects/social_platform/src/app/ui/widgets/detail/detail.component.html b/projects/social_platform/src/app/ui/widgets/detail/detail.component.html
index 8b90c4323..703713ece 100644
--- a/projects/social_platform/src/app/ui/widgets/detail/detail.component.html
+++ b/projects/social_platform/src/app/ui/widgets/detail/detail.component.html
@@ -5,20 +5,16 @@
@if (info()) {
@@ -60,6 +67,17 @@
+ @if (desktopLayout()) {
+
+
+
+
+ }
- Сбросить фильтры
+ Сбросить фильтры
+
+ } @else {
+
-
+ Сбросить фильтры
+
+ }
}
}
@if (type() === "my") {
@for (response of responsesList(); track response.id) {
- Перейти к вакансиям
+
+ Перейти к вакансиям
+
+ } @else {
+
-
+ Перейти к вакансиям
+
+ }
}
}
diff --git a/projects/social_platform/src/app/ui/pages/vacancies/list/list.component.ts b/projects/social_platform/src/app/ui/pages/vacancies/list/list.component.ts
index c7a3b94af..e46219a3d 100644
--- a/projects/social_platform/src/app/ui/pages/vacancies/list/list.component.ts
+++ b/projects/social_platform/src/app/ui/pages/vacancies/list/list.component.ts
@@ -1,6 +1,6 @@
/** @format */
-import { StateComponent } from "@uilib";
+import { DesktopLayoutService, StateComponent } from "@uilib";
/** @format */
// list.component.ts
@@ -35,6 +35,7 @@ import { AppRoutes } from "@api/paths/app-routes";
providers: [VacancyInfoService, VacancyUIInfoService],
})
export class VacanciesListComponent {
+ protected readonly desktopLayout = inject(DesktopLayoutService).desktop;
private readonly vacancyInfoService = inject(VacancyInfoService);
private readonly vacancyUIInfoService = inject(VacancyUIInfoService);
diff --git a/projects/social_platform/src/app/ui/pages/vacancies/list/response-card/response-card.component.scss b/projects/social_platform/src/app/ui/pages/vacancies/list/response-card/response-card.component.scss
index 44ad04fa5..479244524 100644
--- a/projects/social_platform/src/app/ui/pages/vacancies/list/response-card/response-card.component.scss
+++ b/projects/social_platform/src/app/ui/pages/vacancies/list/response-card/response-card.component.scss
@@ -42,7 +42,14 @@
}
&__project {
- font-size: var(--ui-font-body);
+ @media screen and (max-width: 999px) {
+ font-size: var(--ui-font-body);
+ }
+
+ @media screen and (min-width: 1000px) {
+ font-size: 13px;
+ }
+
line-height: 20px;
@include vacancy-ui.link;
@@ -63,10 +70,18 @@
h3 {
margin-bottom: 10px;
- font-size: var(--ui-font-body);
- font-weight: 600;
line-height: 20px;
color: var(--accent-dark);
+
+ @media screen and (max-width: 999px) {
+ font-size: var(--ui-font-body);
+ font-weight: 600;
+ }
+
+ @media screen and (min-width: 1000px) {
+ font-size: 13px;
+ font-weight: 600;
+ }
}
}
@@ -76,10 +91,17 @@
gap: 6px 12px;
padding-top: 16px;
margin-top: 16px;
- font-size: var(--ui-font-body);
line-height: 20px;
border-top: 1px solid var(--medium-grey-for-outline);
+ @media screen and (max-width: 999px) {
+ font-size: var(--ui-font-body);
+ }
+
+ @media screen and (min-width: 1000px) {
+ font-size: 13px;
+ }
+
span {
@include vacancy-ui.secondary;
}
diff --git a/projects/social_platform/src/app/ui/primitives/autocomplete-input/autocomplete-input.component.scss b/projects/social_platform/src/app/ui/primitives/autocomplete-input/autocomplete-input.component.scss
index 158add79f..7e14134a4 100644
--- a/projects/social_platform/src/app/ui/primitives/autocomplete-input/autocomplete-input.component.scss
+++ b/projects/social_platform/src/app/ui/primitives/autocomplete-input/autocomplete-input.component.scss
@@ -1,217 +1,367 @@
/** @format */
@use "styles/ui-foundation";
-
-/** @format */
-
@use "styles/responsive";
@use "styles/typography";
-.field {
- position: relative;
- width: 100%;
-
- &__input-wrapper {
- z-index: 3;
- width: 100%;
- overflow: hidden;
- }
-
- &__input {
+@media screen and (max-width: 999px) {
+ .field {
+ position: relative;
width: 100%;
- padding: 12px;
- &::placeholder {
- color: var(--dark-grey);
+ &__input-wrapper {
+ z-index: 3;
+ width: 100%;
+ overflow: hidden;
}
- &--error {
- border-color: var(--red);
+ &__input {
+ width: 100%;
+ padding: 12px;
+
+ &::placeholder {
+ color: var(--dark-grey);
+ }
+
+ &--error {
+ border-color: var(--red);
+ }
+
+ &:focus {
+ border-color: var(--accent);
+ box-shadow: var(--ui-focus-ring);
+ }
+
+ &--no-icon {
+ padding-right: 45px;
+ }
+
+ @include ui-foundation.control;
}
- &:focus {
- border-color: var(--accent);
- box-shadow: var(--ui-focus-ring);
+ &__input-slim {
+ width: 100%;
+ padding: 6px 30px 6px 10px;
+ font-size: var(--ui-font-small);
+ background: transparent;
+ border: none;
+ border-bottom: 1px solid var(--grey-button);
+ outline: none;
+
+ &:focus {
+ border-color: var(--accent);
+
+ + &_arrow {
+ color: var(--accent);
+
+ i {
+ transform: rotate(0);
+ }
+ }
+ }
+
+ @include ui-foundation.control;
}
- &--no-icon {
- padding-right: 45px;
+ &__dropdown {
+ position: relative;
+ right: 0;
+ left: 0;
+ z-index: 4;
+ background-color: transparent;
+ box-shadow: 5px 5px 25px 0 var(--gray);
+ transform-origin: center top;
+
+ &--options,
+ &--no-results {
+ max-height: 300px;
+ max-height: min(300px, calc(var(--visual-viewport-height, 100dvh) - 24px));
+ padding: 10px;
+ overflow-y: auto;
+ overscroll-behavior: contain;
+ background-color: var(--white);
+ scrollbar-width: thin;
+ }
}
- @include ui-foundation.control;
- }
+ &__option {
+ padding: 7px;
+ color: var(--dark-grey);
+ cursor: pointer;
+ border-radius: var(--rounded-lg);
+ transition: background-color 0.2s;
- &__input-slim {
- width: 100%;
- padding: 6px 30px 6px 10px;
- font-size: var(--ui-font-small);
- background: transparent;
- border: none;
- border-bottom: 1px solid var(--grey-button);
- outline: none;
+ &:hover {
+ background-color: var(--light-gray);
+ }
- &:focus {
- border-color: var(--accent);
+ @include typography.body-12;
+
+ &-slim {
+ padding: 3px;
+ }
+ }
- + &_arrow {
- color: var(--accent);
+ &__chip {
+ position: absolute;
+ top: 50%;
+ left: 10px;
+ z-index: 4;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ max-width: 100%;
+ padding: 5px 10px;
+ color: var(--white);
+ background-color: var(--accent);
+ border-radius: var(--rounded-md);
+ transform: translateY(-50%);
+
+ span {
+ display: inline-block;
+ overflow: hidden;
+ text-overflow: ellipsis;
+ white-space: nowrap;
+ }
- i {
- transform: rotate(0);
- }
+ i {
+ flex-shrink: 0;
+ margin-left: 10px;
+ cursor: pointer;
}
}
- @include ui-foundation.control;
- }
+ &__icons {
+ position: absolute;
+ top: 50%;
+ right: 15px;
+ z-index: 2;
+ display: flex;
+ align-items: center;
+ cursor: pointer;
+ opacity: 1;
+ transform: translateY(-50%);
- &__dropdown {
- position: relative;
- right: 0;
- left: 0;
- z-index: 4;
- background-color: transparent;
- box-shadow: 5px 5px 25px 0 var(--gray);
- transform-origin: center top;
-
- &--options,
- &--no-results {
- max-height: 300px;
- max-height: min(300px, calc(var(--visual-viewport-height, 100dvh) - 24px));
- padding: 10px;
- overflow-y: auto;
- overscroll-behavior: contain;
- background-color: var(--white);
- scrollbar-width: thin;
+ &:hover {
+ opacity: 0.6;
+ }
+ }
+
+ &__loading-icon {
+ margin-right: 5px;
}
}
- &__option {
- padding: 7px;
- color: var(--dark-grey);
- cursor: pointer;
- border-radius: var(--rounded-lg);
- transition: background-color 0.2s;
+ :host {
+ display: block;
+ min-width: 0;
+ max-width: 100%;
+ }
+
+ .field,
+ .search,
+ .search__input {
+ min-width: 0;
+ max-width: 100%;
+ }
+
+ @include responsive.apply-mobile {
+ .field__input,
+ .field__input-slim,
+ .search__input input {
+ min-width: 0;
+ max-width: 100%;
+ min-height: 44px;
+ font-size: var(--ui-font-h3);
+ }
- &:hover {
- background-color: var(--light-gray);
+ .field--small,
+ .field__input--small {
+ min-width: 0;
}
- @include typography.body-12;
+ .field__input--with-tooltip {
+ padding-right: 44px;
+ }
- &-slim {
- padding: 3px;
+ .field__option {
+ min-height: 44px;
+ overflow-wrap: anywhere;
}
- }
- &__chip {
- position: absolute;
- top: 50%;
- left: 10px;
- z-index: 4;
- display: flex;
- align-items: center;
- justify-content: center;
- max-width: 100%;
- padding: 5px 10px;
- color: var(--white);
- background-color: var(--accent);
- border-radius: var(--rounded-md);
- transform: translateY(-50%);
-
- span {
- display: inline-block;
- overflow: hidden;
- text-overflow: ellipsis;
- white-space: nowrap;
+ .field__chip {
+ max-width: calc(100% - 44px);
}
- i {
- flex-shrink: 0;
- margin-left: 10px;
- cursor: pointer;
+ .field__chip span {
+ overflow-wrap: anywhere;
+ white-space: normal;
}
- }
- &__icons {
- position: absolute;
- top: 50%;
- right: 15px;
- z-index: 2;
- display: flex;
- align-items: center;
- cursor: pointer;
- opacity: 1;
- transform: translateY(-50%);
+ .field__calendar-button {
+ right: 4px;
+ width: 44px;
+ height: 44px;
+ }
- &:hover {
- opacity: 0.6;
+ .field__input[type="date"] {
+ padding-right: 48px;
}
}
- &__loading-icon {
- margin-right: 5px;
+ .field__input,
+ .field__input-slim {
+ padding-right: 44px;
}
}
-:host {
- display: block;
- min-width: 0;
- max-width: 100%;
-}
+@media screen and (min-width: 1000px) {
+ .field {
+ position: relative;
+ width: 100%;
-.field,
-.search,
-.search__input {
- min-width: 0;
- max-width: 100%;
-}
+ &__input-wrapper {
+ z-index: 3;
+ width: 100%;
+ overflow: hidden;
+ }
-@include responsive.apply-mobile {
- .field__input,
- .field__input-slim,
- .search__input input {
- min-width: 0;
- max-width: 100%;
- min-height: 44px;
- font-size: var(--ui-font-h3);
- }
+ &__input {
+ width: 100%;
+ padding: 12px;
+ color: var(--black);
+ background-color: var(--white);
+ border: 0.5px solid var(--gray);
+ border-radius: var(--rounded-xxl);
+ outline: none;
+ transition: all 0.2s;
- .field--small,
- .field__input--small {
- min-width: 0;
- }
+ &::placeholder {
+ color: var(--dark-grey);
+ }
- .field__input--with-tooltip {
- padding-right: 44px;
- }
+ &--error {
+ border-color: var(--red);
+ }
- .field__option {
- min-height: 44px;
- overflow-wrap: anywhere;
- }
+ &:focus {
+ border-color: var(--accent);
+ box-shadow: 0 0 6px rgb(109 40 255 / 30%);
+ }
- .field__chip {
- max-width: calc(100% - 44px);
- }
+ &--no-icon {
+ padding-right: 45px;
+ }
- .field__chip span {
- overflow-wrap: anywhere;
- white-space: normal;
- }
+ @include typography.body-12;
+ }
- .field__calendar-button {
- right: 4px;
- width: 44px;
- height: 44px;
- }
+ &__input-slim {
+ width: 100%;
+ padding: 6px 30px 6px 10px;
+ font-size: 12px;
+ background: transparent;
+ border: none;
+ border-bottom: 1px solid var(--grey-button);
+ outline: none;
- .field__input[type="date"] {
- padding-right: 48px;
- }
-}
+ &:focus {
+ border-color: var(--accent);
-.field__input,
-.field__input-slim {
- padding-right: 44px;
+ +&_arrow {
+ color: var(--accent);
+
+ i {
+ transform: rotate(0);
+ }
+ }
+ }
+ }
+
+ &__dropdown {
+ position: absolute;
+ right: 0;
+ left: 0;
+ z-index: 4;
+ background-color: transparent;
+ box-shadow: 5px 5px 25px 0 var(--gray);
+ transform-origin: center top;
+
+ &--options,
+ &--no-results {
+ scrollbar-width: thin;
+ max-height: 300px;
+ padding: 10px;
+ overflow-y: auto;
+ background-color: var(--white);
+ }
+ }
+
+ &__option {
+ padding: 7px;
+ color: var(--dark-grey);
+ cursor: pointer;
+ border-radius: var(--rounded-lg);
+ transition: background-color 0.2s;
+
+ &:hover {
+ background-color: var(--light-gray);
+ }
+
+ @include typography.body-12;
+
+ &-slim {
+ padding: 3px;
+ }
+ }
+
+ &__chip {
+ position: absolute;
+ top: 50%;
+ left: 10px;
+ z-index: 4;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ max-width: 100%;
+ padding: 5px 10px;
+ color: var(--white);
+ background-color: var(--accent);
+ border-radius: var(--rounded-md);
+ transform: translateY(-50%);
+
+ span {
+ display: inline-block;
+ overflow: hidden;
+ text-overflow: ellipsis;
+ white-space: nowrap;
+ }
+
+ i {
+ flex-shrink: 0;
+ margin-left: 10px;
+ cursor: pointer;
+ }
+ }
+
+ &__icons {
+ position: absolute;
+ top: 50%;
+ right: 15px;
+ z-index: 2;
+ display: flex;
+ align-items: center;
+ cursor: pointer;
+ opacity: 1;
+ transform: translateY(-50%);
+
+ &:hover {
+ opacity: 0.6;
+ }
+ }
+
+ &__loading-icon {
+ margin-right: 5px;
+ }
+ }
}
diff --git a/projects/social_platform/src/app/ui/primitives/avatar/avatar.component.html b/projects/social_platform/src/app/ui/primitives/avatar/avatar.component.html
new file mode 100644
index 000000000..803a1e35e
--- /dev/null
+++ b/projects/social_platform/src/app/ui/primitives/avatar/avatar.component.html
@@ -0,0 +1,71 @@
+
+@if (desktopLayout()) {
+
@if (isDashboard()) {
>("filterBody");
private readonly projectsInfoService = inject(ProjectsInfoService);
diff --git a/projects/social_platform/src/app/ui/pages/vacancies/detail/info/components/vacancies-right-side/vacancies-right-side.component.scss b/projects/social_platform/src/app/ui/pages/vacancies/detail/info/components/vacancies-right-side/vacancies-right-side.component.scss
index 03e6e05c6..ec8524c92 100644
--- a/projects/social_platform/src/app/ui/pages/vacancies/detail/info/components/vacancies-right-side/vacancies-right-side.component.scss
+++ b/projects/social_platform/src/app/ui/pages/vacancies/detail/info/components/vacancies-right-side/vacancies-right-side.component.scss
@@ -62,7 +62,14 @@
}
a {
- font-size: var(--ui-font-body);
+ @media screen and (max-width: 999px) {
+ font-size: var(--ui-font-body);
+ }
+
+ @media screen and (min-width: 1000px) {
+ font-size: 13px;
+ }
+
line-height: 20px;
@include vacancy-ui.link;
diff --git a/projects/social_platform/src/app/ui/pages/vacancies/detail/info/components/vacancy-responses/vacancy-responses.component.scss b/projects/social_platform/src/app/ui/pages/vacancies/detail/info/components/vacancy-responses/vacancy-responses.component.scss
index e2064dedb..1e83f4ce9 100644
--- a/projects/social_platform/src/app/ui/pages/vacancies/detail/info/components/vacancy-responses/vacancy-responses.component.scss
+++ b/projects/social_platform/src/app/ui/pages/vacancies/detail/info/components/vacancy-responses/vacancy-responses.component.scss
@@ -132,18 +132,33 @@
&__label {
margin-bottom: 8px;
- font-size: var(--ui-font-body);
- font-weight: 600;
line-height: 20px;
color: var(--accent-dark);
+
+ @media screen and (max-width: 999px) {
+ font-size: var(--ui-font-body);
+ font-weight: 600;
+ }
+
+ @media screen and (min-width: 1000px) {
+ font-size: 13px;
+ font-weight: 600;
+ }
}
&__file-row {
display: flex;
flex-wrap: wrap;
gap: 6px 10px;
- font-size: var(--ui-font-body);
line-height: 20px;
+
+ @media screen and (max-width: 999px) {
+ font-size: var(--ui-font-body);
+ }
+
+ @media screen and (min-width: 1000px) {
+ font-size: 13px;
+ }
}
&__file {
diff --git a/projects/social_platform/src/app/ui/pages/vacancies/detail/vacancies-detail.component.scss b/projects/social_platform/src/app/ui/pages/vacancies/detail/vacancies-detail.component.scss
index 7ddd5f975..ffc9cb05f 100644
--- a/projects/social_platform/src/app/ui/pages/vacancies/detail/vacancies-detail.component.scss
+++ b/projects/social_platform/src/app/ui/pages/vacancies/detail/vacancies-detail.component.scss
@@ -60,7 +60,15 @@
&__specialization {
margin-top: 12px;
- font-size: var(--ui-font-body);
+
+ @media screen and (max-width: 999px) {
+ font-size: var(--ui-font-body);
+ }
+
+ @media screen and (min-width: 1000px) {
+ font-size: 13px;
+ }
+
line-height: 20px;
@include vacancy-ui.secondary;
diff --git a/projects/social_platform/src/app/ui/pages/vacancies/list/list.component.html b/projects/social_platform/src/app/ui/pages/vacancies/list/list.component.html
index 4dd2495fd..2eb39c448 100644
--- a/projects/social_platform/src/app/ui/pages/vacancies/list/list.component.html
+++ b/projects/social_platform/src/app/ui/pages/vacancies/list/list.component.html
@@ -12,28 +12,49 @@
}
@if (hasNoResults()) {
-
@@ -80,7 +98,13 @@
}
} @else {
-
}
diff --git a/projects/social_platform/src/app/ui/pages/projects/projects.component.scss b/projects/social_platform/src/app/ui/pages/projects/projects.component.scss
index 3bb497f99..48f5563df 100644
--- a/projects/social_platform/src/app/ui/pages/projects/projects.component.scss
+++ b/projects/social_platform/src/app/ui/pages/projects/projects.component.scss
@@ -1,3 +1,5 @@
+/** @format */
+
@use "styles/responsive";
.page {
@@ -32,11 +34,6 @@
display: flex;
flex-direction: column;
align-items: center;
-
- @include responsive.apply-desktop {
- flex: 0 0 var(--ui-compact-sidebar-width);
- width: var(--ui-compact-sidebar-width);
- }
}
&__left {
@@ -85,5 +82,42 @@
}
.bar__add-project {
- margin-bottom: 0;
+ @media screen and (max-width: 999px) {
+ margin-bottom: 0;
+ }
+
+ @media screen and (min-width: 1000px) {
+ margin-bottom: 15px;
+ }
+}
+
+@media screen and (max-width: 999px) {
+ @include responsive.apply-below-desktop {
+ .page {
+ margin: 24px var(--page-gutter) 0;
+ }
+
+ .page__info {
+ gap: 24px;
+ padding-bottom: 32px;
+ }
+
+ .page__outlet {
+ order: 2;
+ }
+
+ .page__create,
+ .page__left {
+ display: contents;
+ }
+
+ .page__left > app-project-activity-card {
+ order: 1;
+ }
+
+ .page__invites {
+ order: 3;
+ margin-top: 16px;
+ }
+ }
}
diff --git a/projects/social_platform/src/app/ui/pages/projects/projects.component.ts b/projects/social_platform/src/app/ui/pages/projects/projects.component.ts
index fb05448a0..b04dddb2f 100644
--- a/projects/social_platform/src/app/ui/pages/projects/projects.component.ts
+++ b/projects/social_platform/src/app/ui/pages/projects/projects.component.ts
@@ -1,5 +1,8 @@
/** @format */
+import { DesktopLayoutService } from "@uilib";
+/** @format */
+
import {
ChangeDetectionStrategy,
Component,
@@ -48,6 +51,8 @@ import { ProjectActivityCardComponent } from "./project-activity-card/project-ac
changeDetection: ChangeDetectionStrategy.OnPush,
})
export class ProjectsComponent implements OnInit {
+ protected readonly desktopLayout = inject(DesktopLayoutService).desktop;
+
readonly filterBody = viewChild
+
+ } @else {
+ пока нет приглашений
+Вакансии не найдены
+Попробуйте изменить запрос или сбросить фильтры.
+У вас пока нет откликов
+Найдите подходящую вакансию и расскажите проекту о себе.
+
+
+} @else {
+
+ @if (progress()) {
+
+ }
+
+ ![avatar]()
+
+ @if (isOnline()) {
+
+ }
+
+
+
+}
diff --git a/projects/social_platform/src/app/ui/primitives/avatar/avatar.component.scss b/projects/social_platform/src/app/ui/primitives/avatar/avatar.component.scss
new file mode 100644
index 000000000..9e1c9b40a
--- /dev/null
+++ b/projects/social_platform/src/app/ui/primitives/avatar/avatar.component.scss
@@ -0,0 +1,56 @@
+/** @format */
+@use "../../../../../../ui/src/lib/components/primitives/avatar/avatar.component.scss";
+
+@media screen and (min-width: 1000px) {
+ .avatar {
+ position: relative;
+
+ &__progress {
+ position: absolute;
+ top: 0;
+ left: 0;
+ z-index: 3;
+ width: 100%;
+ height: 100%;
+ background:
+ conic-gradient(
+ var(--progress-color) 0 var(--progress),
+ transparent var(--progress) 100%
+ );
+ border-radius: 50%;
+ mask:
+ radial-gradient(
+ circle,
+ transparent calc(50% - var(--progress-width)),
+ white calc(50% - var(--progress-width))
+ );
+ }
+
+ img {
+ position: relative;
+ z-index: 1;
+ border-radius: 50%;
+ object-fit: cover;
+ object-position: center;
+ }
+
+ &__online {
+ position: absolute;
+ right: 0;
+ bottom: -1.5px;
+ z-index: 3;
+ width: 16px;
+ height: 16px;
+ background-color: var(--green);
+ border: 3px solid var(--white);
+ border-radius: 50%;
+ }
+
+ &--border {
+ img {
+ border-style: solid;
+ border-width: 0.5px;
+ }
+ }
+ }
+}
diff --git a/projects/social_platform/src/app/ui/primitives/avatar/avatar.component.ts b/projects/social_platform/src/app/ui/primitives/avatar/avatar.component.ts
index 1e644a4a2..d08067f51 100644
--- a/projects/social_platform/src/app/ui/primitives/avatar/avatar.component.ts
+++ b/projects/social_platform/src/app/ui/primitives/avatar/avatar.component.ts
@@ -1,7 +1,14 @@
-/**
- * Compatibility export. Canonical implementation: @uilib.
- *
- * @format
- */
+/** @format */
+import { ChangeDetectionStrategy, Component, inject } from "@angular/core";
+import { AvatarComponent as CanonicalAvatar, DesktopLayoutService } from "@uilib";
-export { AvatarComponent } from "@uilib";
+/** Legacy desktop presentation with the canonical avatar inputs and mobile view. */
+@Component({
+ selector: "app-avatar",
+ templateUrl: "./avatar.component.html",
+ styleUrl: "./avatar.component.scss",
+ changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class AvatarComponent extends CanonicalAvatar {
+ protected readonly desktopLayout = inject(DesktopLayoutService).desktop;
+}
diff --git a/projects/social_platform/src/app/ui/primitives/bar/bar.component.html b/projects/social_platform/src/app/ui/primitives/bar/bar.component.html
index 122ca075e..4a722ae71 100644
--- a/projects/social_platform/src/app/ui/primitives/bar/bar.component.html
+++ b/projects/social_platform/src/app/ui/primitives/bar/bar.component.html
@@ -1,8 +1,46 @@
-
+@if (desktopLayout()) {
+
+} @else {
+
+}
+
+
+ @if (progress()) {
+
+ }
+
+ ![avatar]()
+
+ @if (isOnline()) {
+
+ }
+
+
- @if (appWidth > 1000) {
- ![cover]()
- }
-
-
+ ![cover]()
- @if (listType() === "project") {
+ @if (appWidth >= 1000 && (listType() === "project" || listType() === "profile")) {
- @if (listType() === "profile") {
+ @if (appWidth < 1000) {
- @if (listType() === "profile") {
+ @if (appWidth < 1000) {
оценка проектов
@@ -186,8 +187,8 @@
@if (isUserManager()) {
аналитика
@@ -197,27 +198,25 @@
- @if (appWidth > 1000) {
- {{
- info().name.includes("Технолидеры Будущего")
- ? "Каталог лучших стартапов 2022/23"
- : "положение"
- }}
- }
+ {{
+ info().name.includes("Технолидеры Будущего")
+ ? "Каталог лучших стартапов 2022/23"
+ : "положение"
+ }}
}
- @if (appWidth > 1000) {
+ @if (appWidth >= 1000) {
}
@if (appWidth < 1000) {
@@ -230,9 +229,12 @@
(click)="isContactsModalOpen.set(true)"
>
+ @if (appWidth < 1000) {
+ Контакты
+ }
}
- @if (isUserManager() || (isUserExpert() && appWidth > 1000)) {
+ @if (isUserManager() || (isUserExpert() && appWidth >= 1000)) {
}
- @if (!isUserManager() && !isUserExpert() && appWidth > 1000) {
+ @if (!isUserManager() && !isUserExpert() && appWidth >= 1000) {
}
- @if (isUserManager() || (isUserExpert() && appWidth > 1000)) {
+ @if (isUserManager() || (isUserExpert() && appWidth >= 1000)) {
- {{ appWidth > 1000 ? "перейти в курс" : "курс" }}
+ {{ appWidth >= 1000 ? "перейти в курс" : "курс" }}
}
diff --git a/projects/social_platform/src/app/ui/widgets/detail/detail.component.scss b/projects/social_platform/src/app/ui/widgets/detail/detail.component.scss
index 502d1191c..bfe10888d 100644
--- a/projects/social_platform/src/app/ui/widgets/detail/detail.component.scss
+++ b/projects/social_platform/src/app/ui/widgets/detail/detail.component.scss
@@ -64,15 +64,17 @@ $detail-bar-mb: 12px;
object-position: center;
}
- &--mobile {
- display: block;
- max-width: 100%;
- height: 136px;
- background: linear-gradient(90deg, var(--accent) 0%, var(--lime) 100%);
- border-radius: 15px;
-
- @include responsive.apply-desktop {
- display: none;
+ @media screen and (min-width: 1000px) {
+ &--mobile {
+ display: block;
+ max-width: 100%;
+ height: 136px;
+ background: linear-gradient(90deg, var(--accent) 0%, var(--lime) 100%);
+ border-radius: 15px;
+
+ @include responsive.apply-desktop {
+ display: none;
+ }
}
}
}
@@ -421,55 +423,119 @@ $detail-bar-mb: 12px;
}
}
-@include responsive.apply-below-desktop {
- .detail {
- height: auto;
- margin: 0 var(--page-gutter);
- }
+@media screen and (max-width: 999px) {
+ @include responsive.apply-below-desktop {
+ .detail {
+ height: auto;
+ margin: 0 var(--page-gutter);
+ }
- .detail__body {
- max-height: none;
- }
+ .detail__body {
+ max-height: none;
+ }
- .info__row {
- @include responsive.mobile-actions;
- }
+ .info__row {
+ @include responsive.mobile-actions;
+ }
- .approve {
- min-width: 0;
- padding: 8px;
- }
+ .approve {
+ min-width: 0;
+ padding: 8px;
+ }
- .project__item,
- .project__item--info {
- @include responsive.mobile-actions;
- }
+ .project__item,
+ .project__item--info {
+ @include responsive.mobile-actions;
+ }
- .approves__text {
- overflow-wrap: anywhere;
- white-space: normal;
+ .approves__text {
+ overflow-wrap: anywhere;
+ white-space: normal;
+ }
}
}
-.info__page-header {
- padding-top: 80px;
+@media screen and (max-width: 999px) {
+ .info__page-header {
+ padding-top: 80px;
+ }
}
-@media (max-width: 999px) {
- .info__page-header {
- padding-top: 150px;
+@media screen and (max-width: 999px) {
+ @include responsive.apply-below-desktop {
+ .info__cover,
+ .info__cover--program {
+ height: 136px;
+ }
+
+ .info__avatar,
+ .info__avatar--program {
+ bottom: -32px;
+ left: 16px;
+ transform: none;
+ }
+
+ .info__page-header {
+ padding-top: 52px;
+ margin-bottom: 16px;
+ }
+
+ .info__actions {
+ grid-template-columns: repeat(2, minmax(0, 1fr));
+ align-items: stretch;
+ padding: 0 0 24px;
+
+ > a,
+ > app-button,
+ > .info__unavailable,
+ > .info__primary-action {
+ display: block;
+ justify-self: stretch;
+ width: 100%;
+ min-width: 0;
+ }
+
+ ::ng-deep app-button {
+ display: block;
+ width: 100%;
+ height: 100%;
+ }
+
+ ::ng-deep app-button > button {
+ width: 100%;
+ height: 100%;
+ padding-right: 12px;
+ padding-left: 12px;
+ }
+ }
+
+ .info__divider {
+ display: none;
+ }
+
+ .info__primary-action {
+ order: 0;
+ }
+
+ .info__materials--full {
+ grid-column: auto;
+ }
}
}
-.approve,
-.cancel,
-.support {
- width: 100%;
- min-width: 0;
- max-width: 100%;
- padding: 0;
+@media screen and (max-width: 999px) {
+ .approve,
+ .cancel,
+ .support {
+ width: 100%;
+ min-width: 0;
+ max-width: 100%;
+ padding: 0;
+ }
}
-.info__page-header + .info__actions {
- padding-top: 0;
+@media screen and (max-width: 999px) {
+ .info__page-header + .info__actions {
+ padding-top: 0;
+ }
}
diff --git a/projects/social_platform/src/app/ui/widgets/feed-filter/feed-filter.component.html b/projects/social_platform/src/app/ui/widgets/feed-filter/feed-filter.component.html
index fcb69c083..253ce92d7 100644
--- a/projects/social_platform/src/app/ui/widgets/feed-filter/feed-filter.component.html
+++ b/projects/social_platform/src/app/ui/widgets/feed-filter/feed-filter.component.html
@@ -4,31 +4,6 @@
-
-
-
- Фильтр
-
-
- @if (filterOpen()) {
-
-
@for (filterItem of feedFilterOptions; track $index) {
diff --git a/projects/social_platform/src/app/ui/widgets/feed-filter/feed-filter.component.scss b/projects/social_platform/src/app/ui/widgets/feed-filter/feed-filter.component.scss
index c0502a6d8..16cb04fa0 100644
--- a/projects/social_platform/src/app/ui/widgets/feed-filter/feed-filter.component.scss
+++ b/projects/social_platform/src/app/ui/widgets/feed-filter/feed-filter.component.scss
@@ -1,150 +1,232 @@
/** @format */
-@use "styles/typography";
@use "styles/responsive";
+@use "styles/typography";
-.mobile {
- display: grid;
- grid-template-columns: 0.6fr 0.4fr;
- gap: 5px;
- margin-bottom: 20px;
+@media screen and (min-width: 1000px) {
+ .mobile {
+ display: grid;
+ grid-template-columns: 0.6fr 0.4fr;
+ gap: 5px;
+ margin-bottom: 20px;
- @include responsive.apply-desktop {
- display: none;
+ @include responsive.apply-desktop {
+ display: none;
+ }
+
+ app-button {
+ &::ng-deep .button--inline {
+ min-height: 38px;
+ padding: 0;
+ }
+ }
}
}
-.select {
- position: relative;
-
- &__input {
+@media screen and (min-width: 1000px) {
+ .select {
position: relative;
- z-index: 4;
- display: flex;
- align-items: center;
- width: 100%;
- height: 38px;
- padding: 13px 80px 13px 20px;
- background-color: var(--white);
- border: 1px solid var(--gray);
- border-radius: var(--rounded-lg);
- transition: all 0.2s;
-
- &::placeholder {
- color: var(--dark-grey);
- }
- &:hover,
- &--open {
- cursor: pointer;
- border-color: var(--accent);
- }
+ &__input {
+ position: relative;
+ z-index: 4;
+ display: flex;
+ align-items: center;
+ width: 100%;
+ height: 38px;
+ padding: 13px 80px 13px 20px;
+ background-color: var(--white);
+ border: 1px solid var(--gray);
+ border-radius: var(--rounded-lg);
+ transition: all 0.2s;
- @include typography.body-14;
- }
+ &::placeholder {
+ color: var(--dark-grey);
+ }
- &__dropdown {
- position: absolute;
- top: 80%;
- right: 0;
- left: 0;
- z-index: 3;
- padding: 20px 10px 10px;
- background-color: var(--white);
- border: 1px solid var(--gray);
- border-radius: var(--rounded-lg);
- box-shadow: 5px 5px 25px 0 var(--gray-for-shadow);
- transform-origin: center top;
- }
+ &:hover,
+ &--open {
+ cursor: pointer;
+ border-color: var(--accent);
+ }
- &__dropdown-icon {
- position: absolute;
- top: 50%;
- right: 15px;
- z-index: 4;
- color: var(--dark-grey);
- pointer-events: none;
- transform: translateY(-50%) rotate(180deg);
+ @include typography.body-14;
+ }
+
+ &__dropdown {
+ position: absolute;
+ top: 80%;
+ right: 0;
+ left: 0;
+ z-index: 3;
+ padding: 20px 10px 10px;
+ background-color: var(--white);
+ border: 1px solid var(--gray);
+ border-radius: var(--rounded-lg);
+ box-shadow: 5px 5px 25px 0 var(--gray-for-shadow);
+ transform-origin: center top;
+ }
+
+ &__dropdown-icon {
+ position: absolute;
+ top: 50%;
+ right: 15px;
+ z-index: 4;
+ color: var(--dark-grey);
+ pointer-events: none;
+ transform: translateY(-50%) rotate(180deg);
+ }
}
}
.filter {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
- gap: 30px 12px;
- padding-top: 25px;
+
+ @media screen and (max-width: 999px) {
+ gap: 8px;
+ }
+
+ @media screen and (min-width: 1000px) {
+ gap: 30px 12px;
+ }
+
+ @media screen and (min-width: 1000px) {
+ padding-top: 25px;
+ }
@include responsive.apply-desktop {
grid-template-columns: repeat(6, minmax(0, 1fr));
}
- &__option {
- position: relative;
- display: grid;
- grid-template-rows: 32px 18px;
- row-gap: 4px;
- align-items: center;
- justify-items: center;
- min-width: 0;
- height: 104px;
- padding: 36px 6px 12px;
- cursor: pointer;
- background-color: var(--light-white);
- border: 0.5px solid var(--medium-grey-for-outline);
- border-radius: var(--rounded-xl);
+ @media screen and (max-width: 999px) {
+ &__option.ui-button {
+ position: relative;
+ display: grid;
+ grid-template-columns: 20px minmax(0, 1fr);
+ gap: 4px 8px;
+ align-items: center;
+ min-width: 0;
+ height: auto;
+ min-height: 64px;
+ padding: 12px;
+ white-space: normal;
+ cursor: pointer;
+ background-color: var(--ui-surface);
+ border: 1px solid var(--ui-border-subtle);
+ border-radius: var(--rounded-lg);
- &--disable {
- cursor: not-allowed;
- opacity: 0.5;
+ &:focus-visible {
+ outline: 2px solid var(--accent-dark);
+ outline-offset: 3px;
+ }
}
+ }
- &--active {
+ @media screen and (max-width: 999px) {
+ &__option--active.ui-button {
+ background-color: var(--accent-light);
border-color: var(--accent);
+ }
+ }
- i {
- color: var(--light-white) !important;
- }
-
- .filter__option--icon {
- background-color: var(--accent);
- }
-
- .filter__title {
- color: var(--accent);
- }
+ @media screen and (max-width: 999px) {
+ &__option--disable.ui-button {
+ cursor: not-allowed;
+ opacity: 0.5;
}
+ }
- &--icon {
- position: absolute;
- bottom: 100%;
- left: 50%;
+ @media screen and (max-width: 999px) {
+ &__option--icon {
+ position: static;
display: flex;
+ grid-row: 1 / 3;
align-items: center;
justify-content: center;
- width: 50px;
- height: 50px;
+ width: 20px;
+ height: 20px;
+ color: var(--accent);
+ }
+ }
+
+ @media screen and (min-width: 1000px) {
+ &__option {
+ position: relative;
+ display: grid;
+ grid-template-rows: 32px 18px;
+ row-gap: 4px;
+ align-items: center;
+ justify-items: center;
+ min-width: 0;
+ height: 104px;
+ padding: 36px 6px 12px;
+ cursor: pointer;
background-color: var(--light-white);
border: 0.5px solid var(--medium-grey-for-outline);
- border-radius: 50%;
- transform: translate(-50%, 50%);
+ border-radius: var(--rounded-xl);
- i {
- color: var(--accent);
+ &--disable {
+ cursor: not-allowed;
+ opacity: 0.5;
}
- }
- &:focus-visible {
- outline: 2px solid var(--accent-dark);
- outline-offset: 3px;
+ &--active {
+ border-color: var(--accent);
+
+ i {
+ color: var(--light-white) !important;
+ }
+
+ .filter__option--icon {
+ background-color: var(--accent);
+ }
+
+ .filter__title {
+ color: var(--accent);
+ }
+ }
+
+ &--icon {
+ position: absolute;
+ bottom: 100%;
+ left: 50%;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ width: 50px;
+ height: 50px;
+ background-color: var(--light-white);
+ border: 0.5px solid var(--medium-grey-for-outline);
+ border-radius: 50%;
+ transform: translate(-50%, 50%);
+
+ i {
+ color: var(--accent);
+ }
+ }
+
+ &:focus-visible {
+ outline: 2px solid var(--accent-dark);
+ outline-offset: 3px;
+ }
}
}
- /* Одна двухстрочная область названия задаёт общую базовую линию всех счётчиков. */
&__title {
- font-size: var(--ui-font-caption);
line-height: 16px;
- color: var(--grey-for-text);
- text-align: center;
+ color: var(--ui-text-muted);
+
+ @media screen and (max-width: 999px) {
+ font-size: var(--ui-font-small);
+ text-align: left;
+ overflow-wrap: anywhere;
+ }
+
+ @media screen and (min-width: 1000px) {
+ font-size: 11px;
+ text-align: center;
+ }
}
&__count {
@@ -154,21 +236,30 @@
font-variant-numeric: tabular-nums;
line-height: 18px;
color: var(--accent);
+
+ @media screen and (max-width: 999px) {
+ grid-column: 2;
+ text-align: left;
+ }
}
- &__checkbox {
- display: flex;
- align-items: center;
- margin-bottom: 6px;
- color: var(--black);
- cursor: pointer;
+ @media screen and (min-width: 1000px) {
+ &__checkbox {
+ display: flex;
+ align-items: center;
+ margin-bottom: 6px;
+ color: var(--black);
+ cursor: pointer;
- app-checkbox {
- margin-right: 15px;
+ app-checkbox {
+ margin-right: 15px;
+ }
}
}
}
-a:hover {
- cursor: pointer;
+@media screen and (min-width: 1000px) {
+ a:hover {
+ cursor: pointer;
+ }
}
diff --git a/projects/social_platform/src/app/ui/widgets/feed-filter/feed-filter.component.ts b/projects/social_platform/src/app/ui/widgets/feed-filter/feed-filter.component.ts
index 3a8e8fc37..a57db3db7 100644
--- a/projects/social_platform/src/app/ui/widgets/feed-filter/feed-filter.component.ts
+++ b/projects/social_platform/src/app/ui/widgets/feed-filter/feed-filter.component.ts
@@ -3,11 +3,9 @@
import { ButtonDirective, FiltersDirective } from "@uilib";
/** @format */
-import { animate, style, transition, trigger } from "@angular/animations";
import { CommonModule } from "@angular/common";
import { ChangeDetectionStrategy, Component, inject, OnInit } from "@angular/core";
import { IconComponent } from "@ui/primitives";
-import { ClickOutsideModule } from "ng-click-outside";
import { feedFilter } from "@core/consts/filters/feed-filter.const";
import { FeedFilterInfoService } from "./service/feed-filter-info.service";
import { DetailProfileInfoService } from "../detail/services/profile/detail-profile-info.service";
@@ -18,28 +16,16 @@ import { FeedCategoryCounts } from "@domain/feed/feed-item.model";
/** Компонент фильтрации ленты по типам контента с мгновенной синхронизацией через URL. */
@Component({
selector: "app-feed-filter",
- imports: [FiltersDirective, ButtonDirective, CommonModule, ClickOutsideModule, IconComponent],
+ imports: [FiltersDirective, ButtonDirective, CommonModule, IconComponent],
templateUrl: "./feed-filter.component.html",
styleUrl: "./feed-filter.component.scss",
changeDetection: ChangeDetectionStrategy.OnPush,
- animations: [
- trigger("dropdownAnimation", [
- transition(":enter", [
- style({ opacity: 0, transform: "scaleY(0.8)" }),
- animate(".12s cubic-bezier(0, 0, 0.2, 1)"),
- ]),
- transition(":leave", [animate(".1s linear", style({ opacity: 0 }))]),
- ]),
- ],
providers: [FeedFilterInfoService, ProfileDetailUIInfoService, DetailProfileInfoService],
})
export class FeedFilterComponent implements OnInit {
private readonly feedFilterInfoService = inject(FeedFilterInfoService);
private readonly feedUIInfoService = inject(FeedUIInfoService);
- // Состояние выпадающего меню фильтров
- protected readonly filterOpen = this.feedFilterInfoService.filterOpen;
-
// Массив активных фильтров
protected readonly includedFilters = this.feedFilterInfoService.includedFilters;
@@ -57,12 +43,4 @@ export class FeedFilterComponent implements OnInit {
setFilter(keyword: string): void {
this.feedFilterInfoService.setFilter(keyword);
}
-
- resetFilter(): void {
- this.feedFilterInfoService.resetFilter();
- }
-
- onClickOutside(): void {
- this.feedFilterInfoService.onClickOutside();
- }
}
diff --git a/projects/social_platform/src/app/ui/widgets/info-card/info-card.component.html b/projects/social_platform/src/app/ui/widgets/info-card/info-card.component.html
index da10464c3..b30e41b1f 100644
--- a/projects/social_platform/src/app/ui/widgets/info-card/info-card.component.html
+++ b/projects/social_platform/src/app/ui/widgets/info-card/info-card.component.html
@@ -47,7 +47,7 @@
[routerLink]="AppRoutes.projects.detail(info()?.id)"
[attr.aria-label]="
'Открыть проект «' +
- info()?.name +
+ (info()?.name?.trim() || 'Проект без названия') +
'»' +
(programName() ? '. Программа: ' + programName() : '')
"
@@ -143,7 +143,11 @@
@if (isProjectCard()) {
- {{ info().name }}
+
} @else if (type() === "projects" || type() === "invite") {
@if (info().name) {
{{ info().name }}
diff --git a/projects/social_platform/src/app/ui/widgets/info-card/info-card.component.scss b/projects/social_platform/src/app/ui/widgets/info-card/info-card.component.scss
index aace0eabf..541dd8399 100644
--- a/projects/social_platform/src/app/ui/widgets/info-card/info-card.component.scss
+++ b/projects/social_platform/src/app/ui/widgets/info-card/info-card.component.scss
@@ -1,21 +1,46 @@
/** @format */
@use "styles/ui-foundation";
-
-/** @format */
-
@use "styles/responsive";
.card {
&__body {
- @include ui-foundation.card;
+ @media screen and (max-width: 999px) {
+ @include ui-foundation.card;
+ }
position: relative;
display: flex;
flex-direction: column;
width: 156px;
- height: auto;
- min-height: 180px;
+
+ @media screen and (max-width: 999px) {
+ height: auto;
+ }
+
+ @media screen and (min-width: 1000px) {
+ height: 180px;
+ }
+
+ @media screen and (max-width: 999px) {
+ min-height: 180px;
+ }
+
+ @media screen and (min-width: 1000px) {
+ padding: 15px 0 12px;
+ }
+
+ @media screen and (min-width: 1000px) {
+ background-color: var(--light-white);
+ }
+
+ @media screen and (min-width: 1000px) {
+ border: 0.5px solid var(--medium-grey-for-outline);
+ }
+
+ @media screen and (min-width: 1000px) {
+ border-radius: var(--rounded-xl);
+ }
&--empty {
background: transparent;
@@ -38,7 +63,6 @@
}
}
- /* Ссылка занимает прежнее место контента; CTA внутри не создаёт второй tab stop. */
&__project-link {
display: flex;
flex: 1;
@@ -52,11 +76,55 @@
}
}
- /* CTA занимает ширину контента, сохраняя единственную ссылку на проект. */
&__project-action {
- @include ui-foundation.button;
+ @media screen and (max-width: 999px) {
+ @include ui-foundation.button;
+ }
+
+ @media screen and (min-width: 1000px) {
+ display: inline-flex;
+ }
+
+ @media screen and (min-width: 1000px) {
+ align-items: center;
+ }
+
+ @media screen and (min-width: 1000px) {
+ justify-content: center;
+ }
width: 100%;
+
+ @media screen and (min-width: 1000px) {
+ padding: 4px 24px;
+ }
+
+ @media screen and (min-width: 1000px) {
+ color: var(--white);
+ }
+
+ @media screen and (min-width: 1000px) {
+ background: var(--accent);
+ }
+
+ @media screen and (min-width: 1000px) {
+ border: 0.5px solid transparent;
+ }
+
+ @media screen and (min-width: 1000px) {
+ border-radius: var(--rounded-xxl);
+ }
+
+ @media screen and (min-width: 1000px) {
+ transition: all 0.2s;
+ }
+
+ @media screen and (min-width: 1000px) {
+ &:hover {
+ background-color: var(--accent-medium);
+ box-shadow: -2px 3px 3px rgb(51 51 51 / 20%);
+ }
+ }
}
&__subscription-action {
@@ -237,7 +305,6 @@
width: 100px;
}
- /* Общая геометрия проектов не затрагивает приглашения, участников и пустые карточки. */
&--project {
.card__content {
padding: 27px 12px 0;
@@ -245,8 +312,6 @@
.card__head {
width: 100%;
-
- /* Короткое название не резервирует пустую вторую строку перед описанием. */
margin-bottom: 2px;
> div {
@@ -256,7 +321,7 @@
}
.card__name {
- /* stylelint-disable-next-line value-no-vendor-prefix -- Префикс нужен для двухстрочного ellipsis. */
+ /* stylelint-disable-next-line value-no-vendor-prefix */
display: -webkit-box;
max-height: 30px;
margin: 0;
@@ -270,28 +335,42 @@
}
.card__description {
- /* Место удалённой отрасли отдано описанию без увеличения внешней карточки. */
flex: 0 0 52px;
width: 100%;
height: 52px;
min-height: 52px;
p {
- /* stylelint-disable-next-line value-no-vendor-prefix -- Префикс ограничивает описание четырьмя строками. */
+ /* stylelint-disable-next-line value-no-vendor-prefix */
display: -webkit-box;
overflow: hidden;
- font-size: var(--ui-font-caption);
line-height: 13px;
-webkit-line-clamp: 4;
-webkit-box-orient: vertical;
+
+ @media screen and (max-width: 999px) {
+ font-size: var(--ui-font-caption);
+ }
+
+ @media screen and (min-width: 1000px) {
+ font-size: 10px;
+ }
}
}
.card__project-action-label {
- font-size: var(--ui-font-caption);
- font-weight: 600;
line-height: 12px;
white-space: nowrap;
+
+ @media screen and (max-width: 999px) {
+ font-size: var(--ui-font-caption);
+ font-weight: 600;
+ }
+
+ @media screen and (min-width: 1000px) {
+ font-size: 10px;
+ font-weight: 600;
+ }
}
.card__footer,
@@ -301,7 +380,6 @@
}
}
- /* Нижний блок имеет постоянную высоту: длинный текст не сдвигает роль и CTA. */
&--my-project {
.card__body {
padding-bottom: 8px;
@@ -321,9 +399,16 @@
.card__name {
max-height: 28px;
- font-size: var(--ui-font-caption);
line-height: 14px;
text-align: center;
+
+ @media screen and (max-width: 999px) {
+ font-size: var(--ui-font-caption);
+ }
+
+ @media screen and (min-width: 1000px) {
+ font-size: 11px;
+ }
}
.card__description {
@@ -367,7 +452,6 @@
}
}
- /* Приглашения в списке и правой колонке используют одну компактную геометрию. */
&--invite {
.card__body {
padding-bottom: 6px;
@@ -388,7 +472,7 @@
}
.card__name {
- /* stylelint-disable-next-line value-no-vendor-prefix -- Освободившаяся строка сохраняет длинное название. */
+ /* stylelint-disable-next-line value-no-vendor-prefix */
display: -webkit-box;
max-height: 30px;
overflow: hidden;
@@ -405,12 +489,19 @@
}
.card__user {
- font-size: var(--ui-font-caption);
line-height: 13px;
+
+ @media screen and (max-width: 999px) {
+ font-size: var(--ui-font-caption);
+ }
+
+ @media screen and (min-width: 1000px) {
+ font-size: 10px;
+ }
}
.card__user--invite {
- /* stylelint-disable-next-line value-no-vendor-prefix -- Две строки сохраняют место для действий. */
+ /* stylelint-disable-next-line value-no-vendor-prefix */
display: -webkit-box;
overflow: hidden;
font-size: var(--ui-font-small);
@@ -556,78 +647,93 @@
}
}
-@include responsive.apply-mobile {
- :host {
- display: block;
- width: 100%;
- min-width: 0;
- }
-
- .card__body {
- width: 100%;
- height: auto;
- min-height: 200px;
- }
+@media screen and (max-width: 999px) {
+ @include responsive.apply-below-desktop {
+ :host {
+ display: block;
+ width: min(100%, var(--ui-mobile-entity-card-width));
+ min-width: 0;
+ }
- .card__content {
- padding-right: 16px;
- padding-left: 16px;
- overflow: visible;
- }
+ .card__body {
+ width: 100%;
+ height: auto;
+ min-height: 244px;
+ }
- .card__head {
- width: 100%;
- }
+ .card__content {
+ padding-right: 16px;
+ padding-left: 16px;
+ overflow: visible;
+ }
- .card__name {
- max-width: 100%;
- overflow-wrap: anywhere;
- white-space: normal;
- }
+ .card__head {
+ width: 100%;
+ }
- .card--project,
- .card--my-project {
.card__name {
- display: block;
- max-height: none;
- font-size: var(--ui-font-body);
- line-height: 20px;
- -webkit-line-clamp: unset;
+ max-width: 100%;
+ overflow-wrap: anywhere;
+ white-space: normal;
}
- .card__description {
+ .card--project,
+ .card--my-project {
+ .card__name {
+ display: block;
+ max-height: none;
+ font-size: var(--ui-font-body);
+ line-height: 20px;
+ -webkit-line-clamp: unset;
+ }
+
+ .card__description {
+ height: auto;
+ font-size: var(--ui-font-body);
+ line-height: 20px;
+ }
+ }
+
+ .card__context {
height: auto;
- font-size: var(--ui-font-body);
- line-height: 20px;
+ min-height: 24px;
+ overflow-wrap: anywhere;
+ white-space: normal;
}
- }
- .card__context {
- height: auto;
- min-height: 24px;
- overflow-wrap: anywhere;
- white-space: normal;
- }
+ .card__role,
+ .card__access-label {
+ font-size: var(--ui-font-small);
+ line-height: 16px;
+ }
- .card__role,
- .card__access-label {
- font-size: var(--ui-font-small);
- line-height: 16px;
- }
+ .card__description {
+ flex-basis: auto;
+ width: 100%;
+ height: auto;
+ min-height: 24px;
+ }
- .card__description {
- flex-basis: auto;
- width: 100%;
- height: auto;
- min-height: 24px;
- }
+ .card__project-action {
+ align-self: center;
+ width: auto;
+ min-height: 44px;
+ }
- .card__project-action {
- min-height: 44px;
- }
+ .card--my-project .card__program-name {
+ font-size: var(--ui-font-small);
+ line-height: 16px;
+ }
- .card__subscription-action {
- width: 44px;
- height: 44px;
+ .card--project .card__description p,
+ .card--my-project .card__description p {
+ font-size: var(--ui-font-small);
+ line-height: 18px;
+ }
+
+ .card__subscription-action {
+ width: 44px;
+ height: 44px;
+ }
}
}
diff --git a/projects/social_platform/src/app/ui/widgets/news-card/feed-news-modal/feed-news-modal.component.scss b/projects/social_platform/src/app/ui/widgets/news-card/feed-news-modal/feed-news-modal.component.scss
index 2c89b44b7..6ba478aee 100644
--- a/projects/social_platform/src/app/ui/widgets/news-card/feed-news-modal/feed-news-modal.component.scss
+++ b/projects/social_platform/src/app/ui/widgets/news-card/feed-news-modal/feed-news-modal.component.scss
@@ -1,6 +1,5 @@
/** @format */
-/* Overlay находится вне host. Все правила ограничены локальным классом окна чтения. */
.modal .modal__body.feed-news-modal-body {
box-sizing: border-box;
display: block;
@@ -35,19 +34,35 @@
&__badge {
padding: 4px 10px;
- font-size: var(--ui-font-caption);
- font-weight: 600;
color: var(--accent-dark);
background: var(--accent-light);
border-radius: var(--rounded-xxl);
+
+ @media screen and (max-width: 999px) {
+ font-size: var(--ui-font-caption);
+ font-weight: 600;
+ }
+
+ @media screen and (min-width: 1000px) {
+ font-size: 11px;
+ font-weight: 600;
+ }
}
time {
margin-left: auto;
- font-size: var(--ui-font-caption);
- font-variant-numeric: tabular-nums;
color: var(--grey-for-text);
white-space: nowrap;
+
+ @media screen and (max-width: 999px) {
+ font-size: var(--ui-font-caption);
+ font-variant-numeric: tabular-nums;
+ }
+
+ @media screen and (min-width: 1000px) {
+ font-size: 11px;
+ font-variant-numeric: tabular-nums;
+ }
}
button {
@@ -69,7 +84,14 @@
padding: 0;
font-size: 28px;
line-height: 1;
- border-radius: var(--ui-radius-dialog);
+
+ @media screen and (max-width: 999px) {
+ border-radius: var(--ui-radius-dialog);
+ }
+
+ @media screen and (min-width: 1000px) {
+ border-radius: var(--rounded-lg);
+ }
}
&__scroll {
@@ -101,8 +123,15 @@
}
&__source span {
- font-size: var(--ui-font-caption);
color: var(--grey-for-text);
+
+ @media screen and (max-width: 999px) {
+ font-size: var(--ui-font-caption);
+ }
+
+ @media screen and (min-width: 1000px) {
+ font-size: 11px;
+ }
}
&__source a {
diff --git a/projects/social_platform/src/app/ui/widgets/news-card/feed-news-preview/feed-news-preview.component.scss b/projects/social_platform/src/app/ui/widgets/news-card/feed-news-preview/feed-news-preview.component.scss
index 46b9097bf..d3e1c564e 100644
--- a/projects/social_platform/src/app/ui/widgets/news-card/feed-news-preview/feed-news-preview.component.scss
+++ b/projects/social_platform/src/app/ui/widgets/news-card/feed-news-preview/feed-news-preview.component.scss
@@ -1,9 +1,6 @@
/** @format */
@use "styles/ui-foundation";
-
-/** @format */
-
@use "styles/feed-card";
:host {
@@ -12,7 +9,9 @@
}
.feed-preview {
- @include ui-foundation.card;
+ @media screen and (max-width: 999px) {
+ @include ui-foundation.card;
+ }
cursor: pointer;
@@ -23,7 +22,6 @@
outline-offset: 3px;
}
- /* Ссылки полного текста доступны в окне: скрытая часть clamp не создаёт невидимые tab-stop. */
.feed-card__description {
white-space: pre-line;
}
@@ -98,10 +96,17 @@
right: 4px;
bottom: 4px;
padding: 2px 4px;
- font-size: var(--ui-font-caption);
color: var(--white);
background: var(--ui-media-backdrop);
border-radius: 4px;
+
+ @media screen and (max-width: 999px) {
+ font-size: var(--ui-font-caption);
+ }
+
+ @media screen and (min-width: 1000px) {
+ font-size: 10px;
+ }
}
button.feed-preview__more {
@@ -112,9 +117,16 @@
}
&__attachments {
- font-size: var(--ui-font-caption);
line-height: 16px;
color: var(--grey-for-text);
+
+ @media screen and (max-width: 999px) {
+ font-size: var(--ui-font-caption);
+ }
+
+ @media screen and (min-width: 1000px) {
+ font-size: 11px;
+ }
}
&__actions {
diff --git a/projects/social_platform/src/app/ui/widgets/news-card/news-card.component.scss b/projects/social_platform/src/app/ui/widgets/news-card/news-card.component.scss
index d49de7666..6fe340394 100644
--- a/projects/social_platform/src/app/ui/widgets/news-card/news-card.component.scss
+++ b/projects/social_platform/src/app/ui/widgets/news-card/news-card.component.scss
@@ -1,9 +1,6 @@
/** @format */
@use "styles/ui-foundation";
-
-/** @format */
-
@use "styles/typography";
@use "styles/responsive";
@@ -101,12 +98,12 @@
align-items: center;
}
- /* stylelint-disable value-no-vendor-prefix */
&__text {
color: var(--grey-for-text);
white-space: break-spaces;
p {
+ /* stylelint-disable-next-line value-no-vendor-prefix */
display: -webkit-box;
overflow: hidden;
color: var(--black);
@@ -127,7 +124,6 @@
-webkit-line-clamp: 3;
}
}
- /* stylelint-enable value-no-vendor-prefix */
&__edit-files {
display: flex;
@@ -256,6 +252,8 @@
}
}
-.news {
- @include ui-foundation.card;
+@media screen and (max-width: 999px) {
+ .news {
+ @include ui-foundation.card;
+ }
}
diff --git a/projects/social_platform/src/app/ui/widgets/news-form/news-form.component.scss b/projects/social_platform/src/app/ui/widgets/news-form/news-form.component.scss
index 4d65c475d..f8b4d5e3f 100644
--- a/projects/social_platform/src/app/ui/widgets/news-form/news-form.component.scss
+++ b/projects/social_platform/src/app/ui/widgets/news-form/news-form.component.scss
@@ -83,23 +83,25 @@
}
}
-@include responsive.apply-mobile {
- .form__input {
- min-width: 0;
- }
+@media screen and (max-width: 999px) {
+ @include responsive.apply-mobile {
+ .form__input {
+ min-width: 0;
+ }
- .form__send {
- flex-shrink: 0;
- min-width: 44px;
- min-height: 44px;
- margin-left: 8px;
- }
+ .form__send {
+ flex-shrink: 0;
+ min-width: 44px;
+ min-height: 44px;
+ margin-left: 8px;
+ }
- .footer__attach {
- display: inline-flex;
- align-items: center;
- justify-content: center;
- min-width: 44px;
- min-height: 44px;
+ .footer__attach {
+ display: inline-flex;
+ align-items: center;
+ justify-content: center;
+ min-width: 44px;
+ min-height: 44px;
+ }
}
}
diff --git a/projects/social_platform/src/app/ui/widgets/project-invite/project-invite-dialog.component.scss b/projects/social_platform/src/app/ui/widgets/project-invite/project-invite-dialog.component.scss
index c61da7a54..a164e32c7 100644
--- a/projects/social_platform/src/app/ui/widgets/project-invite/project-invite-dialog.component.scss
+++ b/projects/social_platform/src/app/ui/widgets/project-invite/project-invite-dialog.component.scss
@@ -1,25 +1,43 @@
/** @format */
-/* Стили portal ограничены оболочкой приглашения и не меняют остальные app-modal. */
.modal .modal__body.project-invite-body {
left: 50%;
display: block;
- width: min(var(--ui-dialog-md), calc(100% - 24px));
- max-width: calc(100% - 24px);
- max-height: min(720px, calc(var(--visual-viewport-height, 100dvh) - 48px));
padding: 0;
overflow: visible;
- border-radius: var(--ui-radius-dialog);
+
+ @media screen and (max-width: 999px) {
+ width: min(var(--ui-dialog-md), calc(100% - 24px));
+ max-width: calc(100% - 24px);
+ max-height: min(720px, calc(var(--visual-viewport-height, 100dvh) - 48px));
+ border-radius: var(--ui-radius-dialog);
+ }
+
+ @media screen and (min-width: 1000px) {
+ width: min(552px, calc(100% - 24px));
+ max-width: calc(100% - 24px);
+ max-height: min(720px, calc(100dvh - 48px));
+ border-radius: var(--rounded-lg);
+ }
}
.project-invite {
display: flex;
flex-direction: column;
- max-height: min(720px, calc(var(--visual-viewport-height, 100dvh) - 48px));
- padding: var(--ui-dialog-padding);
color: var(--black);
background: var(--white);
- border-radius: var(--ui-radius-dialog);
+
+ @media screen and (max-width: 999px) {
+ max-height: min(720px, calc(var(--visual-viewport-height, 100dvh) - 48px));
+ padding: var(--ui-dialog-padding);
+ border-radius: var(--ui-radius-dialog);
+ }
+
+ @media screen and (min-width: 1000px) {
+ max-height: min(720px, calc(100dvh - 48px));
+ padding: 24px;
+ border-radius: var(--rounded-lg);
+ }
&,
* {
@@ -78,7 +96,14 @@
height: 48px;
color: var(--accent);
background: color-mix(in srgb, var(--accent) 8%, white);
- border-radius: var(--ui-radius-dialog);
+
+ @media screen and (max-width: 999px) {
+ border-radius: var(--ui-radius-dialog);
+ }
+
+ @media screen and (min-width: 1000px) {
+ border-radius: var(--rounded-lg);
+ }
}
&__close {
@@ -144,13 +169,23 @@
justify-content: center;
min-height: 44px;
padding: 9px 12px;
- font-size: var(--ui-font-body);
- font-weight: 600;
line-height: 1.4;
color: var(--accent);
background: var(--white);
- border: 1px solid var(--accent);
- border-radius: var(--ui-radius-dialog);
+
+ @media screen and (max-width: 999px) {
+ font-size: var(--ui-font-body);
+ font-weight: 600;
+ border: 1px solid var(--accent);
+ border-radius: var(--ui-radius-dialog);
+ }
+
+ @media screen and (min-width: 1000px) {
+ font-size: 13px;
+ font-weight: 600;
+ border: 1px solid var(--accent);
+ border-radius: var(--rounded-lg);
+ }
}
.invite-button--primary {
@@ -169,8 +204,16 @@
min-height: 44px;
padding: 0 12px;
color: var(--grey-for-text);
- border: 1px solid color-mix(in srgb, var(--accent) 45%, white);
- border-radius: var(--ui-radius-dialog);
+
+ @media screen and (max-width: 999px) {
+ border: 1px solid color-mix(in srgb, var(--accent) 45%, white);
+ border-radius: var(--ui-radius-dialog);
+ }
+
+ @media screen and (min-width: 1000px) {
+ border: 1px solid color-mix(in srgb, var(--accent) 45%, white);
+ border-radius: var(--rounded-lg);
+ }
}
.invite-search:focus-within {
@@ -196,9 +239,17 @@
.invite-label {
display: block;
margin-bottom: 8px;
- font-size: var(--ui-font-body);
- font-weight: 600;
color: var(--accent);
+
+ @media screen and (max-width: 999px) {
+ font-size: var(--ui-font-body);
+ font-weight: 600;
+ }
+
+ @media screen and (min-width: 1000px) {
+ font-size: 13px;
+ font-weight: 600;
+ }
}
.invite-rows {
@@ -216,8 +267,16 @@
padding: 10px 12px;
text-align: left;
background: var(--white);
- border: 1px solid var(--medium-grey-for-outline);
- border-radius: var(--ui-radius-dialog);
+
+ @media screen and (max-width: 999px) {
+ border: 1px solid var(--medium-grey-for-outline);
+ border-radius: var(--ui-radius-dialog);
+ }
+
+ @media screen and (min-width: 1000px) {
+ border: 1px solid var(--medium-grey-for-outline);
+ border-radius: var(--rounded-lg);
+ }
}
.invite-row--selected {
@@ -260,19 +319,34 @@
.invite-copy strong {
display: block;
- font-size: var(--ui-font-body);
- font-weight: 600;
line-height: 1.5;
overflow-wrap: anywhere;
+
+ @media screen and (max-width: 999px) {
+ font-size: var(--ui-font-body);
+ font-weight: 600;
+ }
+
+ @media screen and (min-width: 1000px) {
+ font-size: 13px;
+ font-weight: 600;
+ }
}
.invite-meta {
display: block;
margin-top: 3px;
- font-size: var(--ui-font-caption);
line-height: 1.4;
color: var(--grey-for-text);
overflow-wrap: anywhere;
+
+ @media screen and (max-width: 999px) {
+ font-size: var(--ui-font-caption);
+ }
+
+ @media screen and (min-width: 1000px) {
+ font-size: 11px;
+ }
}
.invite-avatar {
@@ -286,7 +360,14 @@
font-weight: 600;
color: var(--accent);
background: color-mix(in srgb, var(--accent) 9%, white);
- border-radius: var(--ui-radius-dialog);
+
+ @media screen and (max-width: 999px) {
+ border-radius: var(--ui-radius-dialog);
+ }
+
+ @media screen and (min-width: 1000px) {
+ border-radius: var(--rounded-lg);
+ }
}
.invite-avatar img {
@@ -297,10 +378,17 @@
.invite-helper {
padding: 22px 12px;
- font-size: var(--ui-font-body);
line-height: 1.6;
color: var(--grey-for-text);
text-align: center;
+
+ @media screen and (max-width: 999px) {
+ font-size: var(--ui-font-body);
+ }
+
+ @media screen and (min-width: 1000px) {
+ font-size: 13px;
+ }
}
.invite-error {
@@ -391,7 +479,6 @@
}
}
-/* Opt-in для окон команды: приглашение из профиля сохраняет прежнюю композицию. */
.project-invite.project-invite--compact {
.project-invite__symbol {
display: none;
diff --git a/projects/social_platform/src/app/ui/widgets/project-invite/project-invite-role-input.component.scss b/projects/social_platform/src/app/ui/widgets/project-invite/project-invite-role-input.component.scss
index b4657998d..9a3df46ff 100644
--- a/projects/social_platform/src/app/ui/widgets/project-invite/project-invite-role-input.component.scss
+++ b/projects/social_platform/src/app/ui/widgets/project-invite/project-invite-role-input.component.scss
@@ -1,4 +1,5 @@
/** @format */
+
:host {
display: block;
min-width: 0;
@@ -10,9 +11,17 @@
label {
display: block;
margin-bottom: 8px;
- font-size: var(--ui-font-body);
- font-weight: 600;
color: var(--accent);
+
+ @media screen and (max-width: 999px) {
+ font-size: var(--ui-font-body);
+ font-weight: 600;
+ }
+
+ @media screen and (min-width: 1000px) {
+ font-size: 13px;
+ font-weight: 600;
+ }
}
input {
@@ -39,9 +48,16 @@
p {
margin: 6px 0 0;
- font-size: var(--ui-font-caption);
line-height: 1.4;
color: var(--grey-for-text);
+
+ @media screen and (max-width: 999px) {
+ font-size: var(--ui-font-caption);
+ }
+
+ @media screen and (min-width: 1000px) {
+ font-size: 11px;
+ }
}
p.invalid {
@@ -68,14 +84,22 @@
width: 100%;
min-height: 44px;
padding: 10px;
- font: inherit;
- font-size: var(--ui-font-body);
color: var(--black);
text-align: left;
cursor: pointer;
background: transparent;
border: 0;
border-radius: var(--rounded-lg);
+
+ @media screen and (max-width: 999px) {
+ font: inherit;
+ font-size: var(--ui-font-body);
+ }
+
+ @media screen and (min-width: 1000px) {
+ font: inherit;
+ font-size: 13px;
+ }
}
button.active,
diff --git a/projects/social_platform/src/app/ui/widgets/project-vacancy-card/project-vacancy-card.component.scss b/projects/social_platform/src/app/ui/widgets/project-vacancy-card/project-vacancy-card.component.scss
index caaca621c..333a2f7a2 100644
--- a/projects/social_platform/src/app/ui/widgets/project-vacancy-card/project-vacancy-card.component.scss
+++ b/projects/social_platform/src/app/ui/widgets/project-vacancy-card/project-vacancy-card.component.scss
@@ -1,9 +1,6 @@
/** @format */
@use "styles/ui-foundation";
-
-/** @format */
-
@use "styles/components/vacancy-ui";
:host {
@@ -13,7 +10,10 @@
}
.vacancy {
- @include ui-foundation.card;
+ @media screen and (max-width: 999px) {
+ @include ui-foundation.card;
+ }
+
@include vacancy-ui.surface;
display: flex;
@@ -83,9 +83,16 @@
}
&__project-name {
- font-size: var(--ui-font-body);
line-height: 20px;
color: var(--black);
+
+ @media screen and (max-width: 999px) {
+ font-size: var(--ui-font-body);
+ }
+
+ @media screen and (min-width: 1000px) {
+ font-size: 13px;
+ }
}
&__specialization {
@@ -99,12 +106,13 @@
font-size: var(--ui-font-body);
line-height: 21px;
}
- /* stylelint-disable value-no-vendor-prefix */
+
&__role,
&__project-name,
&__specialization,
&__salary,
&__description p {
+ /* stylelint-disable-next-line value-no-vendor-prefix */
display: -webkit-box;
overflow: hidden;
overflow-wrap: anywhere;
@@ -124,7 +132,7 @@
@include vacancy-ui.link;
}
}
- /* stylelint-enable value-no-vendor-prefix */
+
&__empty {
@include vacancy-ui.secondary;
}
diff --git a/projects/social_platform/src/app/ui/widgets/projects-filter/projects-filter.component.scss b/projects/social_platform/src/app/ui/widgets/projects-filter/projects-filter.component.scss
index 3f54ff98b..2cdf708cb 100644
--- a/projects/social_platform/src/app/ui/widgets/projects-filter/projects-filter.component.scss
+++ b/projects/social_platform/src/app/ui/widgets/projects-filter/projects-filter.component.scss
@@ -106,3 +106,14 @@
}
}
}
+
+@media screen and (min-width: 1000px) {
+ .filter__titles button.ui-button {
+ font-family: Mont, sans-serif;
+ font-size: 10px;
+ font-style: normal;
+ font-weight: 400;
+ line-height: 130%;
+ color: var(--accent);
+ }
+}
diff --git a/projects/social_platform/src/app/ui/widgets/region-select/region-select.component.scss b/projects/social_platform/src/app/ui/widgets/region-select/region-select.component.scss
index 30cd0e0f2..d23d13459 100644
--- a/projects/social_platform/src/app/ui/widgets/region-select/region-select.component.scss
+++ b/projects/social_platform/src/app/ui/widgets/region-select/region-select.component.scss
@@ -24,7 +24,14 @@
&:focus {
border-color: var(--accent);
- box-shadow: var(--ui-focus-ring);
+
+ @media screen and (max-width: 999px) {
+ box-shadow: var(--ui-focus-ring);
+ }
+
+ @media screen and (min-width: 1000px) {
+ box-shadow: 0 0 6px rgb(109 40 255 / 30%);
+ }
}
}
@@ -36,7 +43,6 @@
&__clear {
position: absolute;
top: 50%;
- right: var(--ui-space-xs);
display: grid;
place-items: center;
padding: 4px;
@@ -45,6 +51,14 @@
background: transparent;
border: 0;
transform: translateY(-50%);
+
+ @media screen and (max-width: 999px) {
+ right: var(--ui-space-xs);
+ }
+
+ @media screen and (min-width: 1000px) {
+ right: 14px;
+ }
}
&__legacy {
diff --git a/projects/social_platform/src/app/ui/widgets/vacancy-card/vacancy-card.component.scss b/projects/social_platform/src/app/ui/widgets/vacancy-card/vacancy-card.component.scss
index bdd14a950..2235c0b71 100644
--- a/projects/social_platform/src/app/ui/widgets/vacancy-card/vacancy-card.component.scss
+++ b/projects/social_platform/src/app/ui/widgets/vacancy-card/vacancy-card.component.scss
@@ -1,9 +1,6 @@
/** @format */
@use "styles/ui-foundation";
-
-/** @format */
-
@use "styles/components/vacancy-ui";
:host {
@@ -13,13 +10,19 @@
}
.vacancy {
- @include ui-foundation.card;
+ @media screen and (max-width: 999px) {
+ @include ui-foundation.card;
+ }
display: flex;
flex-direction: column;
gap: 16px;
height: 100%;
+ @media screen and (min-width: 1000px) {
+ padding: 16px;
+ }
+
@include vacancy-ui.surface;
&__header {
diff --git a/projects/social_platform/src/app/ui/widgets/vacancy-created-dialog/vacancy-created-dialog.component.scss b/projects/social_platform/src/app/ui/widgets/vacancy-created-dialog/vacancy-created-dialog.component.scss
index 6823383d3..cf4495263 100644
--- a/projects/social_platform/src/app/ui/widgets/vacancy-created-dialog/vacancy-created-dialog.component.scss
+++ b/projects/social_platform/src/app/ui/widgets/vacancy-created-dialog/vacancy-created-dialog.component.scss
@@ -55,5 +55,11 @@
app-button {
flex-basis: auto;
}
+
+ @media screen and (min-width: 1000px) {
+ ::ng-deep .button {
+ min-height: 40px;
+ }
+ }
}
}
diff --git a/projects/social_platform/src/app/ui/widgets/vacancy-filter/vacancy-filter.component.scss b/projects/social_platform/src/app/ui/widgets/vacancy-filter/vacancy-filter.component.scss
index 85928ae79..1747438ee 100644
--- a/projects/social_platform/src/app/ui/widgets/vacancy-filter/vacancy-filter.component.scss
+++ b/projects/social_platform/src/app/ui/widgets/vacancy-filter/vacancy-filter.component.scss
@@ -53,6 +53,10 @@
> a ::ng-deep .button {
width: 100%;
+
+ @media screen and (min-width: 1000px) {
+ height: 38px;
+ }
}
@include responsive.apply-desktop {
@@ -166,3 +170,14 @@
a:hover {
cursor: pointer;
}
+
+@media screen and (min-width: 1000px) {
+ .desktop__header button.ui-button {
+ font-family: Mont, sans-serif;
+ font-size: 10px;
+ font-style: normal;
+ font-weight: 400;
+ line-height: 130%;
+ color: var(--accent);
+ }
+}
diff --git a/projects/social_platform/src/app/ui/widgets/vacancy-skills/vacancy-skills.component.scss b/projects/social_platform/src/app/ui/widgets/vacancy-skills/vacancy-skills.component.scss
index b47228d1e..576d749ac 100644
--- a/projects/social_platform/src/app/ui/widgets/vacancy-skills/vacancy-skills.component.scss
+++ b/projects/social_platform/src/app/ui/widgets/vacancy-skills/vacancy-skills.component.scss
@@ -22,10 +22,25 @@
}
&__toggle {
- min-height: 28px;
+ @media screen and (max-width: 999px) {
+ min-height: 44px;
+ }
+
+ @media screen and (min-width: 1000px) {
+ min-height: 28px;
+ }
+
padding: 4px 10px;
font: inherit;
- font-size: var(--ui-font-body);
+
+ @media screen and (max-width: 999px) {
+ font-size: var(--ui-font-body);
+ }
+
+ @media screen and (min-width: 1000px) {
+ font-size: 13px;
+ }
+
line-height: 18px;
color: var(--black);
cursor: pointer;
diff --git a/projects/social_platform/src/app/ui/widgets/vacancy-status/vacancy-status.component.scss b/projects/social_platform/src/app/ui/widgets/vacancy-status/vacancy-status.component.scss
index ac84ea190..793a7890e 100644
--- a/projects/social_platform/src/app/ui/widgets/vacancy-status/vacancy-status.component.scss
+++ b/projects/social_platform/src/app/ui/widgets/vacancy-status/vacancy-status.component.scss
@@ -5,3 +5,38 @@
flex-shrink: 0;
max-width: 100%;
}
+
+@media screen and (min-width: 1000px) {
+ .status {
+ display: inline-flex;
+ align-items: center;
+ min-height: 26px;
+ padding: 3px 10px;
+ font-size: 12px;
+ font-weight: 400;
+ line-height: 18px;
+ color: var(--black);
+ overflow-wrap: anywhere;
+ background: var(--light-gray);
+ border: 1px solid var(--gray);
+ border-radius: var(--rounded-xxl);
+
+ &--success {
+ color: var(--green-dark);
+ background: var(--green-light);
+ border-color: var(--green);
+ }
+
+ &--pending {
+ color: var(--black);
+ background: var(--accent-light);
+ border-color: var(--accent-light);
+ }
+
+ &--declined {
+ color: var(--black);
+ background: var(--red-light);
+ border-color: var(--red-light);
+ }
+ }
+}
diff --git a/projects/social_platform/src/styles.scss b/projects/social_platform/src/styles.scss
index 61133c798..de6d8b584 100644
--- a/projects/social_platform/src/styles.scss
+++ b/projects/social_platform/src/styles.scss
@@ -27,10 +27,13 @@
:root {
--app-height: 100vh;
- --page-gutter: 16px;
- @supports (height: 100dvh) {
- --app-height: 100dvh;
+ @media screen and (max-width: 999px) {
+ --page-gutter: 16px;
+
+ @supports (height: 100dvh) {
+ --app-height: 100dvh;
+ }
}
}
diff --git a/projects/social_platform/src/styles/_course-task.scss b/projects/social_platform/src/styles/_course-task.scss
index c68503472..c5e36045d 100644
--- a/projects/social_platform/src/styles/_course-task.scss
+++ b/projects/social_platform/src/styles/_course-task.scss
@@ -13,14 +13,12 @@
max-width: 100%;
overflow-wrap: anywhere;
}
-
.#{$name}__header,
.#{$name}__body,
.#{$name}__content {
min-height: 0;
padding: 16px;
}
-
.#{$name}__files,
.#{$name}__content {
::ng-deep app-upload-file .control {
diff --git a/projects/social_platform/src/styles/_feed-card.scss b/projects/social_platform/src/styles/_feed-card.scss
index 9ab53c322..83a269b96 100644
--- a/projects/social_platform/src/styles/_feed-card.scss
+++ b/projects/social_platform/src/styles/_feed-card.scss
@@ -1,198 +1,392 @@
/** @format */
-// Высоту задаёт содержимое самого высокого соседа в строке grid, а не общий media slot.
-// CTA остаётся снизу строки; detail/profile этот миксин не используют.
@mixin layout {
- box-sizing: border-box;
- display: flex;
- flex-direction: column;
- gap: 10px;
- width: 100%;
- min-width: 0;
- height: 100%;
- padding: 20px;
- color: var(--feed-text, var(--black));
- background: var(--feed-background, var(--light-white));
- border: 1px solid var(--medium-grey-for-outline);
- border-radius: var(--rounded-xl);
-
- > * {
- flex-shrink: 0;
+ @media screen and (max-width: 999px) {
+ box-sizing: border-box;
+ display: flex;
+ flex-direction: column;
+ gap: 10px;
+ width: 100%;
min-width: 0;
- min-height: 0;
- }
+ height: 100%;
+ padding: 20px;
+ color: var(--feed-text, var(--black));
+ background: var(--feed-background, var(--light-white));
+ border: 1px solid var(--medium-grey-for-outline);
+ border-radius: var(--rounded-xl);
- a:focus-visible,
- button:focus-visible {
- outline: 2px solid var(--feed-text, var(--accent-dark));
- outline-offset: 3px;
- }
+ > * {
+ flex-shrink: 0;
+ min-width: 0;
+ min-height: 0;
+ }
- .feed-card__meta {
- display: flex;
- gap: 8px;
- align-items: center;
- justify-content: space-between;
- min-height: 26px;
- }
+ a:focus-visible,
+ button:focus-visible {
+ outline: 2px solid var(--feed-text, var(--accent-dark));
+ outline-offset: 3px;
+ }
- .feed-card__type {
- display: inline-flex;
- align-items: center;
- height: 26px;
- padding: 0 10px;
- overflow: hidden;
- font-size: 11px;
- font-weight: 600;
- line-height: 16px;
- color: var(--accent-dark);
- text-overflow: ellipsis;
- white-space: nowrap;
- background: var(--accent-light);
- border: 1px solid transparent;
- border-radius: var(--rounded-xxl);
- }
+ .feed-card__meta {
+ display: flex;
+ gap: 8px;
+ align-items: center;
+ justify-content: space-between;
+ min-height: 26px;
+ }
- .feed-card__date {
- flex-shrink: 0;
- font-size: 10px;
- font-variant-numeric: tabular-nums;
- line-height: 14px;
- color: var(--feed-secondary, var(--grey-for-text));
- }
+ .feed-card__type {
+ display: inline-flex;
+ align-items: center;
+ height: 26px;
+ padding: 0 10px;
+ overflow: hidden;
+ font-size: 11px;
+ font-weight: 600;
+ line-height: 16px;
+ color: var(--accent-dark);
+ text-overflow: ellipsis;
+ white-space: nowrap;
+ background: var(--accent-light);
+ border: 1px solid transparent;
+ border-radius: var(--rounded-xxl);
+ }
- .feed-card__source {
- display: flex;
- gap: 10px;
- align-items: center;
- min-height: 40px;
- }
+ .feed-card__date {
+ flex-shrink: 0;
+ font-size: 10px;
+ font-variant-numeric: tabular-nums;
+ line-height: 14px;
+ color: var(--feed-secondary, var(--grey-for-text));
+ }
- .feed-card__avatar {
- flex: 0 0 40px;
- width: 40px;
- height: 40px;
- border-radius: 50%;
- object-fit: cover;
- }
+ .feed-card__source {
+ display: flex;
+ gap: 10px;
+ align-items: center;
+ min-height: 40px;
+ }
- .feed-card__source-text {
- display: flex;
- flex-direction: column;
- gap: 3px;
- min-width: 0;
- }
+ .feed-card__avatar {
+ flex: 0 0 40px;
+ width: 40px;
+ height: 40px;
+ border-radius: 50%;
+ object-fit: cover;
+ }
- .feed-card__eyebrow {
- font-size: 10px;
- line-height: 14px;
- color: var(--feed-secondary, var(--grey-for-text));
- }
+ .feed-card__source-text {
+ display: flex;
+ flex-direction: column;
+ gap: 3px;
+ min-width: 0;
+ }
- .feed-card__source-name {
- overflow: hidden;
- font-size: 13px;
- font-weight: 600;
- line-height: 17px;
- color: inherit;
- text-overflow: ellipsis;
- white-space: nowrap;
- }
+ .feed-card__eyebrow {
+ font-size: 10px;
+ line-height: 14px;
+ color: var(--feed-secondary, var(--grey-for-text));
+ }
- /* stylelint-disable value-no-vendor-prefix -- Line-clamp ограничивает текст, сохраняя полное значение в DOM. */
- .feed-card__title,
- .feed-card__description {
- display: -webkit-box;
- margin: 0;
- overflow: hidden;
- overflow-wrap: anywhere;
- -webkit-box-orient: vertical;
- }
- /* stylelint-enable value-no-vendor-prefix */
+ .feed-card__source-name {
+ overflow: hidden;
+ font-size: 13px;
+ font-weight: 600;
+ line-height: 17px;
+ color: inherit;
+ text-overflow: ellipsis;
+ white-space: nowrap;
+ }
- .feed-card__title {
- font-size: 18px;
- font-weight: 600;
- line-height: 22px;
- -webkit-line-clamp: 2;
- }
+ .feed-card__title,
+ .feed-card__description {
+ /* stylelint-disable-next-line value-no-vendor-prefix */
+ display: -webkit-box;
+ margin: 0;
+ overflow: hidden;
+ overflow-wrap: anywhere;
+ -webkit-box-orient: vertical;
+ }
- .feed-card__description {
- font-size: 12px;
- font-weight: 400;
- line-height: 18px;
- color: var(--feed-secondary, var(--grey-for-text));
- -webkit-line-clamp: 3;
- }
+ .feed-card__title {
+ font-size: 18px;
+ font-weight: 600;
+ line-height: 22px;
+ -webkit-line-clamp: 2;
+ }
- .feed-card__metadata {
- display: flex;
- flex-direction: column;
- gap: 8px;
- align-items: flex-start;
- min-width: 0;
+ .feed-card__description {
+ font-size: 12px;
+ font-weight: 400;
+ line-height: 18px;
+ color: var(--feed-secondary, var(--grey-for-text));
+ -webkit-line-clamp: 3;
+ }
+
+ .feed-card__metadata {
+ display: flex;
+ flex-direction: column;
+ gap: 8px;
+ align-items: flex-start;
+ min-width: 0;
- &:empty {
- display: none;
+ &:empty {
+ display: none;
+ }
}
- }
- .feed-card__skills {
- display: flex;
- gap: 6px;
- width: 100%;
- padding: 0;
- margin: 0;
- list-style: none;
- }
+ .feed-card__skills {
+ display: flex;
+ flex-wrap: wrap;
+ gap: 6px;
+ width: 100%;
+ padding: 0;
+ margin: 0;
+ list-style: none;
+ }
- .feed-card__chip {
- box-sizing: border-box;
- flex-shrink: 0;
- max-width: 100%;
- height: 24px;
- padding: 4px 8px;
- overflow: hidden;
- font-size: 10px;
- font-weight: 400;
- line-height: 16px;
- color: var(--accent-dark);
- text-overflow: ellipsis;
- white-space: nowrap;
- background: var(--accent-light);
- border-radius: var(--rounded-lg);
-
- &--skill {
- flex-shrink: 1;
- max-width: calc((100% - 18px) / 4);
- }
-
- &--industry {
- color: var(--green-dark);
- background: var(--green-light);
+ .feed-card__chip {
+ box-sizing: border-box;
+ flex-shrink: 0;
+ max-width: 100%;
+ min-height: 24px;
+ padding: 4px 8px;
+ font-size: 12px;
+ font-weight: 400;
+ line-height: 16px;
+ color: var(--accent-dark);
+ overflow-wrap: anywhere;
+ white-space: normal;
+ background: var(--accent-light);
+ border-radius: var(--rounded-lg);
+
+ &--skill {
+ flex-shrink: 1;
+ max-width: 100%;
+ }
+
+ &--industry {
+ color: var(--green-dark);
+ background: var(--green-light);
+ }
+ }
+
+ .feed-card__cta {
+ box-sizing: border-box;
+ display: flex;
+ align-items: center;
+ align-self: flex-start;
+ justify-content: center;
+ max-width: 100%;
+ min-height: 44px;
+ padding: 10px 16px;
+ margin-top: auto;
+ font-size: 12px;
+ font-weight: 600;
+ line-height: 16px;
+ color: var(--feed-cta-text, var(--white));
+ text-align: center;
+ background: var(--feed-cta-background, var(--accent));
+ border: 1px solid transparent;
+ border-radius: var(--rounded-xxl);
+
+ &:hover {
+ filter: brightness(0.95);
+ }
}
}
- .feed-card__cta {
+ @media screen and (min-width: 1000px) {
box-sizing: border-box;
display: flex;
- align-items: center;
- justify-content: center;
+ flex-direction: column;
+ gap: 10px;
width: 100%;
- height: 36px;
- padding: 0 12px;
- margin-top: auto;
- font-size: 12px;
- font-weight: 600;
- line-height: 16px;
- color: var(--feed-cta-text, var(--white));
- text-align: center;
- background: var(--feed-cta-background, var(--accent));
- border: 1px solid transparent;
- border-radius: var(--rounded-xxl);
-
- &:hover {
- filter: brightness(0.95);
+ min-width: 0;
+ height: 100%;
+ padding: 20px;
+ color: var(--feed-text, var(--black));
+ background: var(--feed-background, var(--light-white));
+ border: 1px solid var(--medium-grey-for-outline);
+ border-radius: var(--rounded-xl);
+
+ > * {
+ flex-shrink: 0;
+ min-width: 0;
+ min-height: 0;
+ }
+
+ a:focus-visible,
+ button:focus-visible {
+ outline: 2px solid var(--feed-text, var(--accent-dark));
+ outline-offset: 3px;
+ }
+
+ .feed-card__meta {
+ display: flex;
+ gap: 8px;
+ align-items: center;
+ justify-content: space-between;
+ min-height: 26px;
+ }
+
+ .feed-card__type {
+ display: inline-flex;
+ align-items: center;
+ height: 26px;
+ padding: 0 10px;
+ overflow: hidden;
+ font-size: 11px;
+ font-weight: 600;
+ line-height: 16px;
+ color: var(--accent-dark);
+ text-overflow: ellipsis;
+ white-space: nowrap;
+ background: var(--accent-light);
+ border: 1px solid transparent;
+ border-radius: var(--rounded-xxl);
+ }
+
+ .feed-card__date {
+ flex-shrink: 0;
+ font-size: 10px;
+ font-variant-numeric: tabular-nums;
+ line-height: 14px;
+ color: var(--feed-secondary, var(--grey-for-text));
+ }
+
+ .feed-card__source {
+ display: flex;
+ gap: 10px;
+ align-items: center;
+ min-height: 40px;
+ }
+
+ .feed-card__avatar {
+ flex: 0 0 40px;
+ width: 40px;
+ height: 40px;
+ border-radius: 50%;
+ object-fit: cover;
+ }
+
+ .feed-card__source-text {
+ display: flex;
+ flex-direction: column;
+ gap: 3px;
+ min-width: 0;
+ }
+
+ .feed-card__eyebrow {
+ font-size: 10px;
+ line-height: 14px;
+ color: var(--feed-secondary, var(--grey-for-text));
+ }
+
+ .feed-card__source-name {
+ overflow: hidden;
+ font-size: 13px;
+ font-weight: 600;
+ line-height: 17px;
+ color: inherit;
+ text-overflow: ellipsis;
+ white-space: nowrap;
+ }
+
+ .feed-card__title,
+ .feed-card__description {
+ /* stylelint-disable-next-line value-no-vendor-prefix */
+ display: -webkit-box;
+ margin: 0;
+ overflow: hidden;
+ overflow-wrap: anywhere;
+ -webkit-box-orient: vertical;
+ }
+
+ .feed-card__title {
+ font-size: 18px;
+ font-weight: 600;
+ line-height: 22px;
+ -webkit-line-clamp: 2;
+ }
+
+ .feed-card__description {
+ font-size: 12px;
+ font-weight: 400;
+ line-height: 18px;
+ color: var(--feed-secondary, var(--grey-for-text));
+ -webkit-line-clamp: 3;
+ }
+
+ .feed-card__metadata {
+ display: flex;
+ flex-direction: column;
+ gap: 8px;
+ align-items: flex-start;
+ min-width: 0;
+
+ &:empty {
+ display: none;
+ }
+ }
+
+ .feed-card__skills {
+ display: flex;
+ gap: 6px;
+ width: 100%;
+ padding: 0;
+ margin: 0;
+ list-style: none;
+ }
+
+ .feed-card__chip {
+ box-sizing: border-box;
+ flex-shrink: 0;
+ max-width: 100%;
+ height: 24px;
+ padding: 4px 8px;
+ overflow: hidden;
+ font-size: 10px;
+ font-weight: 400;
+ line-height: 16px;
+ color: var(--accent-dark);
+ text-overflow: ellipsis;
+ white-space: nowrap;
+ background: var(--accent-light);
+ border-radius: var(--rounded-lg);
+
+ &--skill {
+ flex-shrink: 1;
+ max-width: calc((100% - 18px) / 4);
+ }
+
+ &--industry {
+ color: var(--green-dark);
+ background: var(--green-light);
+ }
+ }
+
+ .feed-card__cta {
+ box-sizing: border-box;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ width: 100%;
+ height: 36px;
+ padding: 0 12px;
+ margin-top: auto;
+ font-size: 12px;
+ font-weight: 600;
+ line-height: 16px;
+ color: var(--feed-cta-text, var(--white));
+ text-align: center;
+ background: var(--feed-cta-background, var(--accent));
+ border: 1px solid transparent;
+ border-radius: var(--rounded-xxl);
+
+ &:hover {
+ filter: brightness(0.95);
+ }
}
}
}
diff --git a/projects/social_platform/src/styles/_platform-responsive.scss b/projects/social_platform/src/styles/_platform-responsive.scss
index 26ca0420e..164404ec5 100644
--- a/projects/social_platform/src/styles/_platform-responsive.scss
+++ b/projects/social_platform/src/styles/_platform-responsive.scss
@@ -2,119 +2,138 @@
@use "responsive";
-// Intrinsic sizing is shared by every page and every projected control.
-app-root,
-app-input,
-app-textarea,
-app-select,
-app-autocomplete-input,
-app-search,
-app-upload-file,
-app-file-item,
-app-file-upload-item,
-app-button,
-ui-button {
- min-width: 0;
- max-width: 100%;
-}
-
-h1,
-h2,
-h3,
-h4,
-p,
-label,
-.error {
- overflow-wrap: anywhere;
-}
-
-video,
-iframe,
-canvas {
- max-width: 100%;
-}
-
-// Connected controls opened inside the shared modal must stay above its backdrop.
-.cdk-overlay-container {
- z-index: 10010;
-}
-
-// Opt-in primitives for new screens; use the same boundaries as existing components.
-.responsive-header,
-.responsive-actions {
- display: flex;
- flex-wrap: wrap;
- gap: 12px;
- align-items: center;
- justify-content: space-between;
- min-width: 0;
-}
-
-.responsive-table {
- min-width: 0;
- max-width: 100%;
- overflow-x: auto;
- overscroll-behavior-inline: contain;
-}
-
-.responsive-dialog-header,
-.responsive-dialog-actions {
- position: sticky;
- z-index: 2;
- background: inherit;
-}
-
-.responsive-dialog-header {
- top: 0;
+@media screen and (max-width: 999px) {
+ app-root,
+ app-input,
+ app-textarea,
+ app-select,
+ app-autocomplete-input,
+ app-search,
+ app-upload-file,
+ app-file-item,
+ app-file-upload-item,
+ app-button,
+ ui-button {
+ min-width: 0;
+ max-width: 100%;
+ }
}
-.responsive-dialog-actions {
- bottom: 0;
- padding-bottom: env(safe-area-inset-bottom, 0);
+@media screen and (max-width: 999px) {
+ h1,
+ h2,
+ h3,
+ h4,
+ p,
+ label,
+ .error {
+ overflow-wrap: anywhere;
+ }
}
-@include responsive.apply-mobile {
- html {
- scrollbar-gutter: auto;
+@media screen and (max-width: 999px) {
+ video,
+ iframe,
+ canvas {
+ max-width: 100%;
}
+}
- .text-body-10 {
- font-size: 12px;
- line-height: 18px;
+@media screen and (max-width: 999px) {
+ .cdk-overlay-container {
+ z-index: 10010;
}
+}
- .text-body-12 {
- font-size: 14px;
- line-height: 20px;
+@media screen and (max-width: 999px) {
+ .responsive-header,
+ .responsive-actions {
+ display: flex;
+ flex-wrap: wrap;
+ gap: 12px;
+ align-items: center;
+ justify-content: space-between;
+ min-width: 0;
}
+}
- input:not([type="checkbox"], [type="radio"]),
- textarea,
- select {
+@media screen and (max-width: 999px) {
+ .responsive-table {
min-width: 0;
max-width: 100%;
- font-size: 16px;
+ overflow-x: auto;
+ overscroll-behavior-inline: contain;
}
+}
- .responsive-header,
- .responsive-actions {
- flex-direction: column;
- align-items: stretch;
+@media screen and (max-width: 999px) {
+ .responsive-dialog-header,
+ .responsive-dialog-actions {
+ position: sticky;
+ z-index: 2;
+ background: inherit;
+ }
+}
+
+@media screen and (max-width: 999px) {
+ .responsive-dialog-header {
+ top: 0;
}
+}
- .cdk-overlay-pane {
- max-width: calc(100vw - 24px);
+@media screen and (max-width: 999px) {
+ .responsive-dialog-actions {
+ bottom: 0;
+ padding-bottom: env(safe-area-inset-bottom, 0);
}
+}
- .mat-datepicker-content {
- max-width: 100%;
- max-height: calc(100dvh - 24px);
- overflow: auto;
+@media screen and (max-width: 999px) {
+ @include responsive.apply-mobile {
+ html {
+ scrollbar-gutter: auto;
+ }
+
+ .text-body-10 {
+ font-size: 12px;
+ line-height: 18px;
+ }
+
+ .text-body-12 {
+ font-size: 14px;
+ line-height: 20px;
+ }
+
+ input:not([type="checkbox"], [type="radio"]),
+ textarea,
+ select {
+ min-width: 0;
+ max-width: 100%;
+ font-size: 16px;
+ }
+
+ .responsive-header,
+ .responsive-actions {
+ flex-direction: column;
+ align-items: stretch;
+ }
+
+ .cdk-overlay-pane {
+ max-width: calc(100vw - 24px);
+ }
+
+ .mat-datepicker-content {
+ max-width: 100%;
+ max-height: calc(100dvh - 24px);
+ overflow: auto;
+ }
}
}
-@media screen and (max-width: 359px) {
- :root {
- --page-gutter: 12px;
+@media screen and (max-width: 999px) {
+ @media screen and (max-width: 359px) {
+ :root {
+ --page-gutter: 12px;
+ }
}
}
diff --git a/projects/social_platform/src/styles/_typography.scss b/projects/social_platform/src/styles/_typography.scss
index d2c957ca1..80483ed1e 100644
--- a/projects/social_platform/src/styles/_typography.scss
+++ b/projects/social_platform/src/styles/_typography.scss
@@ -1,5 +1,155 @@
/** @format */
+@mixin heading-1 {
+ font-family: Mont, sans-serif;
+ font-size: 18px;
+ font-style: normal;
+ font-weight: 400;
+ line-height: 150%;
+}
+
+@mixin heading-1-bold {
+ font-family: Mont, sans-serif;
+ font-size: 18px;
+ font-style: normal;
+ font-weight: 600;
+ line-height: 150%;
+}
+
+@mixin heading-2 {
+ font-family: Mont, sans-serif;
+ font-size: 16px;
+ font-style: normal;
+ font-weight: 400;
+ line-height: 150%;
+}
+
+@mixin heading-2-bold {
+ font-family: Mont, sans-serif;
+ font-size: 16px;
+ font-style: normal;
+ font-weight: 600;
+ line-height: 150%;
+}
+
+@mixin heading-3 {
+ font-family: Mont, sans-serif;
+ font-size: 24px;
+ font-style: normal;
+ font-weight: 700;
+ line-height: 150%;
+}
+
+@mixin heading-4 {
+ font-family: Mont, sans-serif;
+ font-size: 18px;
+ font-style: normal;
+ font-weight: 700;
+ line-height: 150%;
+}
+
+@mixin body-18 {
+ font-family: Mont, sans-serif;
+ font-size: 18px;
+ font-style: normal;
+ font-weight: 600;
+ line-height: 150%;
+}
+
+@mixin body-bold-18 {
+ font-family: Mont, sans-serif;
+ font-size: 18px;
+ font-style: normal;
+ font-weight: 800;
+ line-height: 130%;
+}
+
+@mixin bold-body-16 {
+ font-family: Mont, sans-serif;
+ font-size: 16px;
+ font-style: normal;
+ font-weight: 700;
+ line-height: 150%;
+}
+
+@mixin body-16 {
+ font-family: Mont, sans-serif;
+ font-size: 16px;
+ font-style: normal;
+ font-weight: 600;
+ line-height: 150%;
+}
+
+@mixin bold-body-14 {
+ font-family: Mont, sans-serif;
+ font-size: 14px;
+ font-style: normal;
+ font-weight: 700;
+ line-height: 150%;
+}
+
+@mixin body-14 {
+ font-family: Mont, sans-serif;
+ font-size: 14px;
+ font-style: normal;
+ font-weight: 400;
+ line-height: 150%;
+}
+
+@mixin body-12 {
+ font-family: Mont, sans-serif;
+ font-size: 12px;
+ font-style: normal;
+ font-weight: 400;
+ line-height: 130%;
+}
+
+@mixin body-12-bold {
+ font-family: Mont, sans-serif;
+ font-size: 12px;
+ font-style: normal;
+ font-weight: 600;
+ line-height: 130%;
+}
+
+@mixin body-10 {
+ @media screen and (max-width: 999px) {
+ font-family: Mont, sans-serif;
+ font-size: var(--ui-font-caption);
+ font-style: normal;
+ font-weight: 400;
+ line-height: 130%;
+ color: var(--ui-text-muted);
+ }
+
+ @media screen and (min-width: 1000px) {
+ font-family: Mont, sans-serif;
+ font-size: 10px;
+ font-style: normal;
+ font-weight: 400;
+ line-height: 130%;
+ color: var(--grey-button);
+ }
+}
+
+@mixin body-6 {
+ @media screen and (max-width: 999px) {
+ font-family: Mont, sans-serif;
+ font-size: var(--ui-font-caption);
+ font-style: normal;
+ font-weight: 400;
+ line-height: 130%;
+ }
+
+ @media screen and (min-width: 1000px) {
+ font-family: Mont, sans-serif;
+ font-size: 6px;
+ font-style: normal;
+ font-weight: 400;
+ line-height: 130%;
+ }
+}
+
@font-face {
font-family: Mont;
font-style: normal;
@@ -64,195 +214,66 @@
url("../assets/font/Mont-Regular.ttf") format("truetype");
}
-@mixin heading-1 {
- font-family: Mont, sans-serif;
- font-size: 18px;
- font-style: normal;
- font-weight: 400;
- line-height: 150%;
-}
-
.text-heading-1 {
@include heading-1;
}
-@mixin heading-1-bold {
- font-family: Mont, sans-serif;
- font-size: 18px;
- font-style: normal;
- font-weight: 600;
- line-height: 150%;
-}
-
.text-heading-1-bold {
@include heading-1-bold;
}
-@mixin heading-2 {
- font-family: Mont, sans-serif;
- font-size: 16px;
- font-style: normal;
- font-weight: 400;
- line-height: 150%;
-}
-
.text-heading-2 {
@include heading-2;
}
-@mixin heading-2-bold {
- font-family: Mont, sans-serif;
- font-size: 16px;
- font-style: normal;
- font-weight: 600;
- line-height: 150%;
-}
-
.text-heading-2-bold {
@include heading-2-bold;
}
-@mixin heading-3 {
- font-family: Mont, sans-serif;
- font-size: 24px;
- font-style: normal;
- font-weight: 700;
- line-height: 150%;
-}
-
.text-heading-3 {
@include heading-3;
}
-@mixin heading-4 {
- font-family: Mont, sans-serif;
- font-size: 18px;
- font-style: normal;
- font-weight: 700;
- line-height: 150%;
-}
-
.text-heading-4 {
@include heading-4;
}
-@mixin body-18 {
- font-family: Mont, sans-serif;
- font-size: 18px;
- font-style: normal;
- font-weight: 600;
- line-height: 150%;
-}
-
.text-body-18 {
@include body-18;
}
-@mixin body-bold-18 {
- font-family: Mont, sans-serif;
- font-size: 18px;
- font-style: normal;
- font-weight: 800;
- line-height: 130%;
-}
-
.text-body-bold-18 {
@include body-18;
}
-@mixin bold-body-16 {
- font-family: Mont, sans-serif;
- font-size: 16px;
- font-style: normal;
- font-weight: 700;
- line-height: 150%;
-}
-
.text-bold-body-16 {
@include bold-body-16;
}
-@mixin body-16 {
- font-family: Mont, sans-serif;
- font-size: 16px;
- font-style: normal;
- font-weight: 600;
- line-height: 150%;
-}
-
.text-body-16 {
@include body-16;
}
-@mixin bold-body-14 {
- font-family: Mont, sans-serif;
- font-size: 14px;
- font-style: normal;
- font-weight: 700;
- line-height: 150%;
-}
-
.text-bold-body-14 {
@include bold-body-14;
}
-@mixin body-14 {
- font-family: Mont, sans-serif;
- font-size: 14px;
- font-style: normal;
- font-weight: 400;
- line-height: 150%;
-}
-
.text-body-14 {
@include body-14;
}
-@mixin body-12 {
- font-family: Mont, sans-serif;
- font-size: 12px;
- font-style: normal;
- font-weight: 400;
- line-height: 130%;
-}
-
.text-body-12 {
@include body-12;
}
-@mixin body-12-bold {
- font-family: Mont, sans-serif;
- font-size: 12px;
- font-style: normal;
- font-weight: 600;
- line-height: 130%;
-}
-
.text-body-12-bold {
@include body-12-bold;
}
-@mixin body-10 {
- font-family: Mont, sans-serif;
- font-size: var(--ui-font-caption);
- font-style: normal;
- font-weight: 400;
- line-height: 130%;
- color: var(--ui-text-muted);
-}
-
.text-body-10 {
@include body-10;
}
-@mixin body-6 {
- font-family: Mont, sans-serif;
- font-size: var(--ui-font-caption);
- font-style: normal;
- font-weight: 400;
- line-height: 130%;
-}
-
.text-body-6 {
@include body-6;
}
diff --git a/projects/social_platform/src/styles/_ui-system.scss b/projects/social_platform/src/styles/_ui-system.scss
index 75abcc461..397f054b0 100644
--- a/projects/social_platform/src/styles/_ui-system.scss
+++ b/projects/social_platform/src/styles/_ui-system.scss
@@ -2,206 +2,268 @@
@use "ui-foundation";
-button.ui-button.ui-button {
- @include ui-foundation.button($layout: false);
-}
-
-.ui-button {
- display: inline-flex;
- gap: var(--ui-space-sm);
- align-items: center;
- justify-content: center;
+@media screen and (min-width: 1000px) {
+ :where(button.ui-button) {
+ padding: 0;
+ font: inherit;
+ color: inherit;
+ text-align: inherit;
+ cursor: pointer;
+ background: transparent;
+ border: 0;
+ }
}
-button.ui-button[role="radio"] {
- justify-content: space-between;
- width: 100%;
- padding: var(--ui-control-padding);
- color: var(--ui-text);
- text-align: left;
- background: var(--ui-surface-subtle);
- border-color: var(--ui-border-subtle);
- border-radius: var(--ui-radius-card);
-
- &[aria-checked="true"] {
- background: var(--accent-light);
- border-color: var(--ui-accent);
+@media screen and (max-width: 999px) {
+ button.ui-button.ui-button {
+ @include ui-foundation.button($layout: false);
}
}
-.ui-field {
- @include ui-foundation.control;
+@media screen and (max-width: 999px) {
+ .ui-button {
+ display: inline-flex;
+ gap: var(--ui-space-sm);
+ align-items: center;
+ justify-content: center;
+ }
}
-input.ui-choice.ui-choice {
- min-height: 18px;
- padding: 0;
- background: transparent;
-
- @include ui-foundation.choice;
+@media screen and (max-width: 999px) {
+ button.ui-button[role="radio"] {
+ justify-content: space-between;
+ width: 100%;
+ padding: var(--ui-control-padding);
+ color: var(--ui-text);
+ text-align: left;
+ background: var(--ui-surface-subtle);
+ border-color: var(--ui-border-subtle);
+ border-radius: var(--ui-radius-card);
- appearance: auto;
+ &[aria-checked="true"] {
+ background: var(--accent-light);
+ border-color: var(--ui-accent);
+ }
+ }
}
-.ui-card {
- @include ui-foundation.card;
-
- &--interactive {
- transition:
- box-shadow 0.2s,
- border-color 0.2s;
+@media screen and (max-width: 999px) {
+ .ui-field {
+ @include ui-foundation.control;
}
+}
- &--interactive:hover {
- border-color: var(--ui-accent);
- box-shadow: var(--ui-card-hover-shadow);
- }
+@media screen and (max-width: 999px) {
+ input.ui-choice.ui-choice {
+ min-height: 18px;
+ padding: 0;
+ background: transparent;
- &:focus-visible {
- outline: 2px solid var(--accent-dark);
- outline-offset: 3px;
- }
-}
+ @include ui-foundation.choice;
-.ui-form {
- min-width: 0;
+ appearance: auto;
+ }
}
-.ui-form label.field-label,
-label.field-label {
- margin-bottom: var(--ui-space-sm);
- font-size: var(--ui-font-small);
- line-height: 1.5;
- color: var(--ui-text);
+@media screen and (max-width: 999px) {
+ .ui-card {
+ @include ui-foundation.card;
+
+ &--interactive {
+ transition:
+ box-shadow 0.2s,
+ border-color 0.2s;
+ }
+
+ &--interactive:hover {
+ border-color: var(--ui-accent);
+ box-shadow: var(--ui-card-hover-shadow);
+ }
+
+ &:focus-visible {
+ outline: 2px solid var(--accent-dark);
+ outline-offset: 3px;
+ }
+ }
}
-.ui-form .error,
-.error {
- font-size: var(--ui-font-small);
- line-height: 1.5;
- color: var(--ui-danger);
+@media screen and (max-width: 999px) {
+ .ui-form {
+ min-width: 0;
+ }
}
-.ui-filters {
- display: flex;
- flex-direction: column;
- gap: var(--ui-space-md);
- min-width: 0;
+@media screen and (max-width: 999px) {
+ .ui-form label.field-label,
+ label.field-label {
+ margin-bottom: var(--ui-space-sm);
+ font-size: var(--ui-font-small);
+ line-height: 1.5;
+ color: var(--ui-text);
+ }
}
-.ui-filters__header {
- display: flex;
- flex-wrap: wrap;
- gap: var(--ui-space-xs);
- align-items: center;
- justify-content: space-between;
-
- > p,
- > .ui-button {
- flex-shrink: 0;
+@media screen and (max-width: 999px) {
+ .ui-form .error,
+ .error {
+ font-size: var(--ui-font-small);
+ line-height: 1.5;
+ color: var(--ui-danger);
}
}
-.ui-dialog-body {
- min-width: 0;
- font-size: var(--ui-font-body);
- line-height: 1.5;
- overflow-wrap: anywhere;
+@media screen and (max-width: 999px) {
+ .ui-filters {
+ display: flex;
+ flex-direction: column;
+ gap: var(--ui-space-md);
+ min-width: 0;
+ }
}
-.ui-dialog-footer {
- display: flex;
- flex-wrap: wrap;
- gap: var(--ui-space-sm);
- align-items: center;
- justify-content: flex-end;
- padding-top: var(--ui-space-md);
- margin-top: var(--ui-space-md);
+@media screen and (max-width: 999px) {
+ .ui-filters__header {
+ display: flex;
+ flex-wrap: wrap;
+ gap: var(--ui-space-xs);
+ align-items: center;
+ justify-content: space-between;
+
+ > p,
+ > .ui-button {
+ flex-shrink: 0;
+ }
+ }
}
-.ui-alert {
- padding: var(--ui-space-md);
- color: var(--ui-text);
- background: var(--accent-light);
- border-radius: var(--ui-radius-card);
+@media screen and (max-width: 999px) {
+ .ui-dialog-body {
+ min-width: 0;
+ font-size: var(--ui-font-body);
+ line-height: 1.5;
+ overflow-wrap: anywhere;
+ }
}
-.ui-alert--error {
- color: var(--red-dark);
- background: var(--red-light);
+@media screen and (max-width: 999px) {
+ .ui-dialog-footer {
+ display: flex;
+ flex-wrap: wrap;
+ gap: var(--ui-space-sm);
+ align-items: center;
+ justify-content: flex-end;
+ padding-top: var(--ui-space-md);
+ margin-top: var(--ui-space-md);
+ }
}
-.ui-alert--success {
- color: var(--green-dark);
- background: var(--green-light);
+@media screen and (max-width: 999px) {
+ .ui-alert {
+ padding: var(--ui-space-md);
+ color: var(--ui-text);
+ background: var(--accent-light);
+ border-radius: var(--ui-radius-card);
+ }
}
-.ui-alert--warning {
- color: var(--gold-dark);
- background: var(--gold-light);
+@media screen and (max-width: 999px) {
+ .ui-alert--error {
+ color: var(--red-dark);
+ background: var(--red-light);
+ }
}
-.ui-drawer {
- min-width: 0;
- max-width: 100vw;
- overscroll-behavior: contain;
+@media screen and (max-width: 999px) {
+ .ui-alert--success {
+ color: var(--green-dark);
+ background: var(--green-light);
+ }
}
-table.ui-table {
- width: 100%;
- font-size: var(--ui-font-small);
- line-height: 1.5;
- color: var(--ui-text);
- border-collapse: collapse;
-
- th {
- padding: 12px 16px;
- font-weight: 600;
- text-align: left;
- background: var(--ui-surface-subtle);
- border-bottom: 1px solid var(--ui-border);
+@media screen and (max-width: 999px) {
+ .ui-alert--warning {
+ color: var(--gold-dark);
+ background: var(--gold-light);
}
+}
- td {
- padding: 12px 16px;
- border-bottom: 1px solid var(--ui-border-subtle);
+@media screen and (max-width: 999px) {
+ .ui-drawer {
+ min-width: 0;
+ max-width: 100vw;
+ overscroll-behavior: contain;
}
+}
- tbody tr:hover {
- background: var(--accent-light);
+@media screen and (max-width: 999px) {
+ table.ui-table {
+ width: 100%;
+ font-size: var(--ui-font-small);
+ line-height: 1.5;
+ color: var(--ui-text);
+ border-collapse: collapse;
+
+ th {
+ padding: 12px 16px;
+ font-weight: 600;
+ text-align: left;
+ background: var(--ui-surface-subtle);
+ border-bottom: 1px solid var(--ui-border);
+ }
+
+ td {
+ padding: 12px 16px;
+ border-bottom: 1px solid var(--ui-border-subtle);
+ }
+
+ tbody tr:hover {
+ background: var(--accent-light);
+ }
}
}
-.ui-h1 {
- font-size: var(--ui-font-h1);
- font-weight: 600;
- line-height: 1.3;
+@media screen and (max-width: 999px) {
+ .ui-h1 {
+ font-size: var(--ui-font-h1);
+ font-weight: 600;
+ line-height: 1.3;
+ }
}
-.ui-h2 {
- font-size: var(--ui-font-h2);
- font-weight: 600;
- line-height: 1.4;
+@media screen and (max-width: 999px) {
+ .ui-h2 {
+ font-size: var(--ui-font-h2);
+ font-weight: 600;
+ line-height: 1.4;
+ }
}
-.ui-h3 {
- font-size: var(--ui-font-h3);
- font-weight: 600;
- line-height: 1.4;
+@media screen and (max-width: 999px) {
+ .ui-h3 {
+ font-size: var(--ui-font-h3);
+ font-weight: 600;
+ line-height: 1.4;
+ }
}
-.ui-body {
- font-size: var(--ui-font-body);
- line-height: 1.5;
+@media screen and (max-width: 999px) {
+ .ui-body {
+ font-size: var(--ui-font-body);
+ line-height: 1.5;
+ }
}
-.ui-small {
- font-size: var(--ui-font-small);
- line-height: 1.5;
+@media screen and (max-width: 999px) {
+ .ui-small {
+ font-size: var(--ui-font-small);
+ line-height: 1.5;
+ }
}
-.ui-caption {
- font-size: var(--ui-font-caption);
- line-height: 1.5;
- color: var(--ui-text-muted);
+@media screen and (max-width: 999px) {
+ .ui-caption {
+ font-size: var(--ui-font-caption);
+ line-height: 1.5;
+ color: var(--ui-text-muted);
+ }
}
diff --git a/projects/social_platform/src/styles/_ui-tokens.scss b/projects/social_platform/src/styles/_ui-tokens.scss
index 765fa3aae..e67559647 100644
--- a/projects/social_platform/src/styles/_ui-tokens.scss
+++ b/projects/social_platform/src/styles/_ui-tokens.scss
@@ -18,6 +18,7 @@
--ui-radius-dialog: var(--rounded-xl);
--ui-control-height: 44px;
--ui-compact-sidebar-width: 157px;
+ --ui-mobile-entity-card-width: 260px;
--ui-control-padding: 12px 16px;
--ui-card-padding: 16px;
--ui-dialog-padding: 24px;
diff --git a/projects/social_platform/src/styles/components/_vacancy-ui.scss b/projects/social_platform/src/styles/components/_vacancy-ui.scss
index 02d37e78f..185bdc471 100644
--- a/projects/social_platform/src/styles/components/_vacancy-ui.scss
+++ b/projects/social_platform/src/styles/components/_vacancy-ui.scss
@@ -3,15 +3,27 @@
@use "styles/ui-foundation";
@mixin surface {
- @include ui-foundation.card;
+ @media screen and (max-width: 999px) {
+ @include ui-foundation.card;
- min-width: 0;
- padding: var(--ui-card-padding);
- color: var(--black);
- overflow-wrap: anywhere;
- background: var(--white);
- border: 1px solid var(--medium-grey-for-outline);
- border-radius: var(--ui-radius-card);
+ min-width: 0;
+ padding: var(--ui-card-padding);
+ color: var(--black);
+ overflow-wrap: anywhere;
+ background: var(--white);
+ border: 1px solid var(--medium-grey-for-outline);
+ border-radius: var(--ui-radius-card);
+ }
+
+ @media screen and (min-width: 1000px) {
+ min-width: 0;
+ padding: 20px;
+ color: var(--black);
+ overflow-wrap: anywhere;
+ background: var(--white);
+ border: 1px solid var(--medium-grey-for-outline);
+ border-radius: var(--rounded-lg);
+ }
}
@mixin secondary {
@@ -38,7 +50,6 @@
}
}
-// Feature-адаптер Pattern / PageHeader; глобальный BackComponent не меняется.
@mixin page-header {
display: flex;
flex-direction: column;
@@ -71,12 +82,42 @@
}
@mixin actions {
- display: flex;
- flex-wrap: wrap;
- gap: 8px;
+ @media screen and (max-width: 999px) {
+ display: flex;
+ flex-wrap: wrap;
+ gap: 8px;
+
+ app-button {
+ flex: 1 1 140px;
+ min-width: 0;
+ }
+ }
- app-button {
- flex: 1 1 140px;
- min-width: 0;
+ @media screen and (min-width: 1000px) {
+ display: flex;
+ flex-wrap: wrap;
+ gap: 8px;
+
+ app-button {
+ flex: 1 1 140px;
+ min-width: 0;
+ }
+
+ ::ng-deep .button {
+ gap: 6px;
+ width: 100%;
+ min-height: 36px;
+ max-height: none;
+ padding: 8px 12px;
+ font-size: 12px;
+ line-height: 18px;
+
+ @include focus;
+
+ &.button--outline.button--red {
+ color: var(--black);
+ background: transparent;
+ }
+ }
}
}
diff --git a/projects/ui/src/lib/components/layout/page-header/page-header.component.scss b/projects/ui/src/lib/components/layout/page-header/page-header.component.scss
index 4fccfa53b..594c404d4 100644
--- a/projects/ui/src/lib/components/layout/page-header/page-header.component.scss
+++ b/projects/ui/src/lib/components/layout/page-header/page-header.component.scss
@@ -1,61 +1,78 @@
/** @format */
-:host {
- display: block;
- width: 100%;
- min-width: 0;
-}
+@media screen and (min-width: 1000px) {
+ :host,
+ .page-header,
+ .page-header__heading,
+ .page-header__title-row {
+ display: contents;
+ }
-.page-header {
- display: flex;
- flex-wrap: wrap;
- gap: var(--ui-space-md);
- align-items: center;
- justify-content: space-between;
- margin-bottom: var(--ui-space-lg);
+ .page-header__title {
+ display: none;
+ }
+}
- &__heading {
+@media screen and (max-width: 999px) {
+ :host {
+ display: block;
+ width: 100%;
min-width: 0;
}
+}
- &__title-row {
+@media screen and (max-width: 999px) {
+ .page-header {
display: flex;
- gap: var(--ui-space-sm);
+ flex-wrap: wrap;
+ gap: var(--ui-space-md);
align-items: center;
- }
+ justify-content: space-between;
+ margin-bottom: var(--ui-space-lg);
- &__title {
- font-size: var(--ui-font-h1);
- font-weight: 600;
- line-height: 1.3;
- color: var(--ui-text);
- overflow-wrap: anywhere;
- }
+ &__heading {
+ min-width: 0;
+ }
- &__description {
- margin-top: var(--ui-space-sm);
- font-size: var(--ui-font-body);
- line-height: 1.5;
- color: var(--ui-text-muted);
- }
+ &__title-row {
+ display: flex;
+ gap: var(--ui-space-sm);
+ align-items: center;
+ }
- &__breadcrumbs {
- display: flex;
- flex-wrap: wrap;
- gap: var(--ui-space-sm);
- margin-bottom: var(--ui-space-sm);
- font-size: var(--ui-font-caption);
- }
+ &__title {
+ font-size: var(--ui-font-h1);
+ font-weight: 600;
+ line-height: 1.3;
+ color: var(--ui-text);
+ overflow-wrap: anywhere;
+ }
- &__actions {
- display: flex;
- flex-wrap: wrap;
- gap: var(--ui-space-sm);
- align-items: center;
- max-width: 100%;
- }
+ &__description {
+ margin-top: var(--ui-space-sm);
+ font-size: var(--ui-font-body);
+ line-height: 1.5;
+ color: var(--ui-text-muted);
+ }
- &__actions:empty {
- display: none;
+ &__breadcrumbs {
+ display: flex;
+ flex-wrap: wrap;
+ gap: var(--ui-space-sm);
+ margin-bottom: var(--ui-space-sm);
+ font-size: var(--ui-font-caption);
+ }
+
+ &__actions {
+ display: flex;
+ flex-wrap: wrap;
+ gap: var(--ui-space-sm);
+ align-items: center;
+ max-width: 100%;
+ }
+
+ &__actions:empty {
+ display: none;
+ }
}
}
diff --git a/projects/ui/src/lib/components/layout/page-header/page-header.component.ts b/projects/ui/src/lib/components/layout/page-header/page-header.component.ts
index 00d1abb72..31d08a3dc 100644
--- a/projects/ui/src/lib/components/layout/page-header/page-header.component.ts
+++ b/projects/ui/src/lib/components/layout/page-header/page-header.component.ts
@@ -1,8 +1,9 @@
/** @format */
-import { ChangeDetectionStrategy, Component, input } from "@angular/core";
+import { ChangeDetectionStrategy, Component, inject, input } from "@angular/core";
import { RouterLink } from "@angular/router";
import { BackComponent } from "../../primitives/back/back.component";
+import { DesktopLayoutService } from "../../../services/desktop-layout.service";
export interface PageBreadcrumb {
label: string;
@@ -28,7 +29,11 @@ export interface PageBreadcrumb {
}
@if (backRoute()) {
- {{ title() }}
@@ -43,6 +48,7 @@ export interface PageBreadcrumb {
changeDetection: ChangeDetectionStrategy.OnPush,
})
export class PageHeaderComponent {
+ protected readonly desktopLayout = inject(DesktopLayoutService).desktop;
readonly title = input.required();
readonly description = input();
readonly breadcrumbs = input([]);
diff --git a/projects/ui/src/lib/components/layout/profile-control-panel/profile-control-panel.component.html b/projects/ui/src/lib/components/layout/profile-control-panel/profile-control-panel.component.html
index 7727bd3eb..5a5c47002 100644
--- a/projects/ui/src/lib/components/layout/profile-control-panel/profile-control-panel.component.html
+++ b/projects/ui/src/lib/components/layout/profile-control-panel/profile-control-panel.component.html
@@ -2,17 +2,39 @@
-
-
- @if (hasNotifications() || hasInvites) {
-
- }
-
- @if (invites().length) {
-
- }
+ @if (desktopLayout()) {
+
+
+ @if (hasNotifications() || hasInvites) {
+
+ }
+
+ @if (invites().length) {
+
+ }
+
-
+ } @else {
+
+ }
@if (showNotifications) {
@@ -30,7 +52,7 @@
}
-
+
diff --git a/projects/ui/src/lib/components/layout/profile-control-panel/profile-control-panel.component.scss b/projects/ui/src/lib/components/layout/profile-control-panel/profile-control-panel.component.scss
index d582e47ea..eeb01e411 100644
--- a/projects/ui/src/lib/components/layout/profile-control-panel/profile-control-panel.component.scss
+++ b/projects/ui/src/lib/components/layout/profile-control-panel/profile-control-panel.component.scss
@@ -64,7 +64,13 @@
}
i {
- color: var(--light-white);
+ @media screen and (max-width: 999px) {
+ color: var(--ui-text-muted);
+ }
+
+ @media screen and (min-width: 1000px) {
+ color: var(--light-white);
+ }
@include responsive.apply-desktop {
color: var(--dark-grey);
@@ -72,30 +78,44 @@
}
}
-@include responsive.apply-below-desktop {
- .control-panel {
- position: static;
- }
+@media screen and (max-width: 999px) {
+ @include responsive.apply-below-desktop {
+ .control-panel {
+ position: static;
+ }
- .control-panel__actions {
- gap: 0;
- margin-right: 4px;
- }
+ .control-panel__actions {
+ gap: 0;
+ margin-right: 0;
+ }
- .control-panel__action {
- display: flex;
- align-items: center;
- justify-content: center;
- min-width: 44px;
- min-height: 44px;
- }
+ .control-panel__action {
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ min-width: 44px;
+ min-height: 44px;
+ }
+
+ .control-panel__action--logout {
+ display: none;
+ }
+
+ .control-panel__profile {
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ width: 44px;
+ min-height: 44px;
+ }
- .control-panel__notifications {
- position: fixed;
- top: 64px;
- right: var(--page-gutter);
- left: var(--page-gutter);
- max-height: calc(var(--visual-viewport-height, 100dvh) - 80px);
- overflow-y: auto;
+ .control-panel__notifications {
+ position: fixed;
+ top: 64px;
+ right: var(--page-gutter);
+ left: var(--page-gutter);
+ max-height: calc(var(--visual-viewport-height, 100dvh) - 80px);
+ overflow-y: auto;
+ }
}
}
diff --git a/projects/ui/src/lib/components/layout/profile-control-panel/profile-control-panel.component.ts b/projects/ui/src/lib/components/layout/profile-control-panel/profile-control-panel.component.ts
index 80ecd205d..b6e9f1dbb 100644
--- a/projects/ui/src/lib/components/layout/profile-control-panel/profile-control-panel.component.ts
+++ b/projects/ui/src/lib/components/layout/profile-control-panel/profile-control-panel.component.ts
@@ -1,7 +1,11 @@
/** @format */
+import { DesktopLayoutService } from "../../../services/desktop-layout.service";
+/** @format */
+
import { CommonModule } from "@angular/common";
import {
+ inject,
ChangeDetectionStrategy,
Component,
Input,
@@ -18,6 +22,7 @@ import type { Invite } from "projects/social_platform/src/app/domain/invite/invi
import { RouterLink } from "@angular/router";
import { EmptyManageCardComponent } from "../empty-manage-card/empty-manage-card.component";
import { User } from "@domain/auth/user.model";
+import { ButtonDirective } from "../../primitives/button/button.directive";
/**
* Компонент панели управления профилем
@@ -48,12 +53,14 @@ import { User } from "@domain/auth/user.model";
ClickOutsideModule,
IconComponent,
EmptyManageCardComponent,
+ ButtonDirective,
],
templateUrl: "./profile-control-panel.component.html",
styleUrl: "./profile-control-panel.component.scss",
changeDetection: ChangeDetectionStrategy.OnPush,
})
export class ProfileControlPanelComponent {
+ protected readonly desktopLayout = inject(DesktopLayoutService).desktop;
/** Данные текущего пользователя */
readonly user = input.required();
diff --git a/projects/ui/src/lib/components/layout/profile-info/profile-info.component.html b/projects/ui/src/lib/components/layout/profile-info/profile-info.component.html
index c9885743e..57394a0d7 100644
--- a/projects/ui/src/lib/components/layout/profile-info/profile-info.component.html
+++ b/projects/ui/src/lib/components/layout/profile-info/profile-info.component.html
@@ -1,7 +1,7 @@
@if (user()) {
-
+
-
- @if (loader()) {
+
+ @if (loader() && desktopLayout()) {
+
-
-
- Фильтр
-
-
- @if (filterOpen()) {
-
-
- }
-
@for (filterItem of feedFilterOptions; track $index) {
diff --git a/projects/social_platform/src/app/ui/widgets/feed-filter/feed-filter.component.scss b/projects/social_platform/src/app/ui/widgets/feed-filter/feed-filter.component.scss
index c0502a6d8..16cb04fa0 100644
--- a/projects/social_platform/src/app/ui/widgets/feed-filter/feed-filter.component.scss
+++ b/projects/social_platform/src/app/ui/widgets/feed-filter/feed-filter.component.scss
@@ -1,150 +1,232 @@
/** @format */
-@use "styles/typography";
@use "styles/responsive";
+@use "styles/typography";
-.mobile {
- display: grid;
- grid-template-columns: 0.6fr 0.4fr;
- gap: 5px;
- margin-bottom: 20px;
+@media screen and (min-width: 1000px) {
+ .mobile {
+ display: grid;
+ grid-template-columns: 0.6fr 0.4fr;
+ gap: 5px;
+ margin-bottom: 20px;
- @include responsive.apply-desktop {
- display: none;
+ @include responsive.apply-desktop {
+ display: none;
+ }
+
+ app-button {
+ &::ng-deep .button--inline {
+ min-height: 38px;
+ padding: 0;
+ }
+ }
}
}
-.select {
- position: relative;
-
- &__input {
+@media screen and (min-width: 1000px) {
+ .select {
position: relative;
- z-index: 4;
- display: flex;
- align-items: center;
- width: 100%;
- height: 38px;
- padding: 13px 80px 13px 20px;
- background-color: var(--white);
- border: 1px solid var(--gray);
- border-radius: var(--rounded-lg);
- transition: all 0.2s;
-
- &::placeholder {
- color: var(--dark-grey);
- }
- &:hover,
- &--open {
- cursor: pointer;
- border-color: var(--accent);
- }
+ &__input {
+ position: relative;
+ z-index: 4;
+ display: flex;
+ align-items: center;
+ width: 100%;
+ height: 38px;
+ padding: 13px 80px 13px 20px;
+ background-color: var(--white);
+ border: 1px solid var(--gray);
+ border-radius: var(--rounded-lg);
+ transition: all 0.2s;
- @include typography.body-14;
- }
+ &::placeholder {
+ color: var(--dark-grey);
+ }
- &__dropdown {
- position: absolute;
- top: 80%;
- right: 0;
- left: 0;
- z-index: 3;
- padding: 20px 10px 10px;
- background-color: var(--white);
- border: 1px solid var(--gray);
- border-radius: var(--rounded-lg);
- box-shadow: 5px 5px 25px 0 var(--gray-for-shadow);
- transform-origin: center top;
- }
+ &:hover,
+ &--open {
+ cursor: pointer;
+ border-color: var(--accent);
+ }
- &__dropdown-icon {
- position: absolute;
- top: 50%;
- right: 15px;
- z-index: 4;
- color: var(--dark-grey);
- pointer-events: none;
- transform: translateY(-50%) rotate(180deg);
+ @include typography.body-14;
+ }
+
+ &__dropdown {
+ position: absolute;
+ top: 80%;
+ right: 0;
+ left: 0;
+ z-index: 3;
+ padding: 20px 10px 10px;
+ background-color: var(--white);
+ border: 1px solid var(--gray);
+ border-radius: var(--rounded-lg);
+ box-shadow: 5px 5px 25px 0 var(--gray-for-shadow);
+ transform-origin: center top;
+ }
+
+ &__dropdown-icon {
+ position: absolute;
+ top: 50%;
+ right: 15px;
+ z-index: 4;
+ color: var(--dark-grey);
+ pointer-events: none;
+ transform: translateY(-50%) rotate(180deg);
+ }
}
}
.filter {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
- gap: 30px 12px;
- padding-top: 25px;
+
+ @media screen and (max-width: 999px) {
+ gap: 8px;
+ }
+
+ @media screen and (min-width: 1000px) {
+ gap: 30px 12px;
+ }
+
+ @media screen and (min-width: 1000px) {
+ padding-top: 25px;
+ }
@include responsive.apply-desktop {
grid-template-columns: repeat(6, minmax(0, 1fr));
}
- &__option {
- position: relative;
- display: grid;
- grid-template-rows: 32px 18px;
- row-gap: 4px;
- align-items: center;
- justify-items: center;
- min-width: 0;
- height: 104px;
- padding: 36px 6px 12px;
- cursor: pointer;
- background-color: var(--light-white);
- border: 0.5px solid var(--medium-grey-for-outline);
- border-radius: var(--rounded-xl);
+ @media screen and (max-width: 999px) {
+ &__option.ui-button {
+ position: relative;
+ display: grid;
+ grid-template-columns: 20px minmax(0, 1fr);
+ gap: 4px 8px;
+ align-items: center;
+ min-width: 0;
+ height: auto;
+ min-height: 64px;
+ padding: 12px;
+ white-space: normal;
+ cursor: pointer;
+ background-color: var(--ui-surface);
+ border: 1px solid var(--ui-border-subtle);
+ border-radius: var(--rounded-lg);
- &--disable {
- cursor: not-allowed;
- opacity: 0.5;
+ &:focus-visible {
+ outline: 2px solid var(--accent-dark);
+ outline-offset: 3px;
+ }
}
+ }
- &--active {
+ @media screen and (max-width: 999px) {
+ &__option--active.ui-button {
+ background-color: var(--accent-light);
border-color: var(--accent);
+ }
+ }
- i {
- color: var(--light-white) !important;
- }
-
- .filter__option--icon {
- background-color: var(--accent);
- }
-
- .filter__title {
- color: var(--accent);
- }
+ @media screen and (max-width: 999px) {
+ &__option--disable.ui-button {
+ cursor: not-allowed;
+ opacity: 0.5;
}
+ }
- &--icon {
- position: absolute;
- bottom: 100%;
- left: 50%;
+ @media screen and (max-width: 999px) {
+ &__option--icon {
+ position: static;
display: flex;
+ grid-row: 1 / 3;
align-items: center;
justify-content: center;
- width: 50px;
- height: 50px;
+ width: 20px;
+ height: 20px;
+ color: var(--accent);
+ }
+ }
+
+ @media screen and (min-width: 1000px) {
+ &__option {
+ position: relative;
+ display: grid;
+ grid-template-rows: 32px 18px;
+ row-gap: 4px;
+ align-items: center;
+ justify-items: center;
+ min-width: 0;
+ height: 104px;
+ padding: 36px 6px 12px;
+ cursor: pointer;
background-color: var(--light-white);
border: 0.5px solid var(--medium-grey-for-outline);
- border-radius: 50%;
- transform: translate(-50%, 50%);
+ border-radius: var(--rounded-xl);
- i {
- color: var(--accent);
+ &--disable {
+ cursor: not-allowed;
+ opacity: 0.5;
}
- }
- &:focus-visible {
- outline: 2px solid var(--accent-dark);
- outline-offset: 3px;
+ &--active {
+ border-color: var(--accent);
+
+ i {
+ color: var(--light-white) !important;
+ }
+
+ .filter__option--icon {
+ background-color: var(--accent);
+ }
+
+ .filter__title {
+ color: var(--accent);
+ }
+ }
+
+ &--icon {
+ position: absolute;
+ bottom: 100%;
+ left: 50%;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ width: 50px;
+ height: 50px;
+ background-color: var(--light-white);
+ border: 0.5px solid var(--medium-grey-for-outline);
+ border-radius: 50%;
+ transform: translate(-50%, 50%);
+
+ i {
+ color: var(--accent);
+ }
+ }
+
+ &:focus-visible {
+ outline: 2px solid var(--accent-dark);
+ outline-offset: 3px;
+ }
}
}
- /* Одна двухстрочная область названия задаёт общую базовую линию всех счётчиков. */
&__title {
- font-size: var(--ui-font-caption);
line-height: 16px;
- color: var(--grey-for-text);
- text-align: center;
+ color: var(--ui-text-muted);
+
+ @media screen and (max-width: 999px) {
+ font-size: var(--ui-font-small);
+ text-align: left;
+ overflow-wrap: anywhere;
+ }
+
+ @media screen and (min-width: 1000px) {
+ font-size: 11px;
+ text-align: center;
+ }
}
&__count {
@@ -154,21 +236,30 @@
font-variant-numeric: tabular-nums;
line-height: 18px;
color: var(--accent);
+
+ @media screen and (max-width: 999px) {
+ grid-column: 2;
+ text-align: left;
+ }
}
- &__checkbox {
- display: flex;
- align-items: center;
- margin-bottom: 6px;
- color: var(--black);
- cursor: pointer;
+ @media screen and (min-width: 1000px) {
+ &__checkbox {
+ display: flex;
+ align-items: center;
+ margin-bottom: 6px;
+ color: var(--black);
+ cursor: pointer;
- app-checkbox {
- margin-right: 15px;
+ app-checkbox {
+ margin-right: 15px;
+ }
}
}
}
-a:hover {
- cursor: pointer;
+@media screen and (min-width: 1000px) {
+ a:hover {
+ cursor: pointer;
+ }
}
diff --git a/projects/social_platform/src/app/ui/widgets/feed-filter/feed-filter.component.ts b/projects/social_platform/src/app/ui/widgets/feed-filter/feed-filter.component.ts
index 3a8e8fc37..a57db3db7 100644
--- a/projects/social_platform/src/app/ui/widgets/feed-filter/feed-filter.component.ts
+++ b/projects/social_platform/src/app/ui/widgets/feed-filter/feed-filter.component.ts
@@ -3,11 +3,9 @@
import { ButtonDirective, FiltersDirective } from "@uilib";
/** @format */
-import { animate, style, transition, trigger } from "@angular/animations";
import { CommonModule } from "@angular/common";
import { ChangeDetectionStrategy, Component, inject, OnInit } from "@angular/core";
import { IconComponent } from "@ui/primitives";
-import { ClickOutsideModule } from "ng-click-outside";
import { feedFilter } from "@core/consts/filters/feed-filter.const";
import { FeedFilterInfoService } from "./service/feed-filter-info.service";
import { DetailProfileInfoService } from "../detail/services/profile/detail-profile-info.service";
@@ -18,28 +16,16 @@ import { FeedCategoryCounts } from "@domain/feed/feed-item.model";
/** Компонент фильтрации ленты по типам контента с мгновенной синхронизацией через URL. */
@Component({
selector: "app-feed-filter",
- imports: [FiltersDirective, ButtonDirective, CommonModule, ClickOutsideModule, IconComponent],
+ imports: [FiltersDirective, ButtonDirective, CommonModule, IconComponent],
templateUrl: "./feed-filter.component.html",
styleUrl: "./feed-filter.component.scss",
changeDetection: ChangeDetectionStrategy.OnPush,
- animations: [
- trigger("dropdownAnimation", [
- transition(":enter", [
- style({ opacity: 0, transform: "scaleY(0.8)" }),
- animate(".12s cubic-bezier(0, 0, 0.2, 1)"),
- ]),
- transition(":leave", [animate(".1s linear", style({ opacity: 0 }))]),
- ]),
- ],
providers: [FeedFilterInfoService, ProfileDetailUIInfoService, DetailProfileInfoService],
})
export class FeedFilterComponent implements OnInit {
private readonly feedFilterInfoService = inject(FeedFilterInfoService);
private readonly feedUIInfoService = inject(FeedUIInfoService);
- // Состояние выпадающего меню фильтров
- protected readonly filterOpen = this.feedFilterInfoService.filterOpen;
-
// Массив активных фильтров
protected readonly includedFilters = this.feedFilterInfoService.includedFilters;
@@ -57,12 +43,4 @@ export class FeedFilterComponent implements OnInit {
setFilter(keyword: string): void {
this.feedFilterInfoService.setFilter(keyword);
}
-
- resetFilter(): void {
- this.feedFilterInfoService.resetFilter();
- }
-
- onClickOutside(): void {
- this.feedFilterInfoService.onClickOutside();
- }
}
diff --git a/projects/social_platform/src/app/ui/widgets/info-card/info-card.component.html b/projects/social_platform/src/app/ui/widgets/info-card/info-card.component.html
index da10464c3..b30e41b1f 100644
--- a/projects/social_platform/src/app/ui/widgets/info-card/info-card.component.html
+++ b/projects/social_platform/src/app/ui/widgets/info-card/info-card.component.html
@@ -47,7 +47,7 @@
[routerLink]="AppRoutes.projects.detail(info()?.id)"
[attr.aria-label]="
'Открыть проект «' +
- info()?.name +
+ (info()?.name?.trim() || 'Проект без названия') +
'»' +
(programName() ? '. Программа: ' + programName() : '')
"
@@ -143,7 +143,11 @@
@if (isProjectCard()) {
- ();
readonly description = input();
readonly breadcrumbs = input([]);
diff --git a/projects/ui/src/lib/components/layout/profile-control-panel/profile-control-panel.component.html b/projects/ui/src/lib/components/layout/profile-control-panel/profile-control-panel.component.html
index 7727bd3eb..5a5c47002 100644
--- a/projects/ui/src/lib/components/layout/profile-control-panel/profile-control-panel.component.html
+++ b/projects/ui/src/lib/components/layout/profile-control-panel/profile-control-panel.component.html
@@ -2,17 +2,39 @@
{{ info().name }}
+ } @else if (type() === "projects" || type() === "invite") { @if (info().name) {{{ info().name }}
diff --git a/projects/social_platform/src/app/ui/widgets/info-card/info-card.component.scss b/projects/social_platform/src/app/ui/widgets/info-card/info-card.component.scss index aace0eabf..541dd8399 100644 --- a/projects/social_platform/src/app/ui/widgets/info-card/info-card.component.scss +++ b/projects/social_platform/src/app/ui/widgets/info-card/info-card.component.scss @@ -1,21 +1,46 @@ /** @format */ @use "styles/ui-foundation"; - -/** @format */ - @use "styles/responsive"; .card { &__body { - @include ui-foundation.card; + @media screen and (max-width: 999px) { + @include ui-foundation.card; + } position: relative; display: flex; flex-direction: column; width: 156px; - height: auto; - min-height: 180px; + + @media screen and (max-width: 999px) { + height: auto; + } + + @media screen and (min-width: 1000px) { + height: 180px; + } + + @media screen and (max-width: 999px) { + min-height: 180px; + } + + @media screen and (min-width: 1000px) { + padding: 15px 0 12px; + } + + @media screen and (min-width: 1000px) { + background-color: var(--light-white); + } + + @media screen and (min-width: 1000px) { + border: 0.5px solid var(--medium-grey-for-outline); + } + + @media screen and (min-width: 1000px) { + border-radius: var(--rounded-xl); + } &--empty { background: transparent; @@ -38,7 +63,6 @@ } } - /* Ссылка занимает прежнее место контента; CTA внутри не создаёт второй tab stop. */ &__project-link { display: flex; flex: 1; @@ -52,11 +76,55 @@ } } - /* CTA занимает ширину контента, сохраняя единственную ссылку на проект. */ &__project-action { - @include ui-foundation.button; + @media screen and (max-width: 999px) { + @include ui-foundation.button; + } + + @media screen and (min-width: 1000px) { + display: inline-flex; + } + + @media screen and (min-width: 1000px) { + align-items: center; + } + + @media screen and (min-width: 1000px) { + justify-content: center; + } width: 100%; + + @media screen and (min-width: 1000px) { + padding: 4px 24px; + } + + @media screen and (min-width: 1000px) { + color: var(--white); + } + + @media screen and (min-width: 1000px) { + background: var(--accent); + } + + @media screen and (min-width: 1000px) { + border: 0.5px solid transparent; + } + + @media screen and (min-width: 1000px) { + border-radius: var(--rounded-xxl); + } + + @media screen and (min-width: 1000px) { + transition: all 0.2s; + } + + @media screen and (min-width: 1000px) { + &:hover { + background-color: var(--accent-medium); + box-shadow: -2px 3px 3px rgb(51 51 51 / 20%); + } + } } &__subscription-action { @@ -237,7 +305,6 @@ width: 100px; } - /* Общая геометрия проектов не затрагивает приглашения, участников и пустые карточки. */ &--project { .card__content { padding: 27px 12px 0; @@ -245,8 +312,6 @@ .card__head { width: 100%; - - /* Короткое название не резервирует пустую вторую строку перед описанием. */ margin-bottom: 2px; > div { @@ -256,7 +321,7 @@ } .card__name { - /* stylelint-disable-next-line value-no-vendor-prefix -- Префикс нужен для двухстрочного ellipsis. */ + /* stylelint-disable-next-line value-no-vendor-prefix */ display: -webkit-box; max-height: 30px; margin: 0; @@ -270,28 +335,42 @@ } .card__description { - /* Место удалённой отрасли отдано описанию без увеличения внешней карточки. */ flex: 0 0 52px; width: 100%; height: 52px; min-height: 52px; p { - /* stylelint-disable-next-line value-no-vendor-prefix -- Префикс ограничивает описание четырьмя строками. */ + /* stylelint-disable-next-line value-no-vendor-prefix */ display: -webkit-box; overflow: hidden; - font-size: var(--ui-font-caption); line-height: 13px; -webkit-line-clamp: 4; -webkit-box-orient: vertical; + + @media screen and (max-width: 999px) { + font-size: var(--ui-font-caption); + } + + @media screen and (min-width: 1000px) { + font-size: 10px; + } } } .card__project-action-label { - font-size: var(--ui-font-caption); - font-weight: 600; line-height: 12px; white-space: nowrap; + + @media screen and (max-width: 999px) { + font-size: var(--ui-font-caption); + font-weight: 600; + } + + @media screen and (min-width: 1000px) { + font-size: 10px; + font-weight: 600; + } } .card__footer, @@ -301,7 +380,6 @@ } } - /* Нижний блок имеет постоянную высоту: длинный текст не сдвигает роль и CTA. */ &--my-project { .card__body { padding-bottom: 8px; @@ -321,9 +399,16 @@ .card__name { max-height: 28px; - font-size: var(--ui-font-caption); line-height: 14px; text-align: center; + + @media screen and (max-width: 999px) { + font-size: var(--ui-font-caption); + } + + @media screen and (min-width: 1000px) { + font-size: 11px; + } } .card__description { @@ -367,7 +452,6 @@ } } - /* Приглашения в списке и правой колонке используют одну компактную геометрию. */ &--invite { .card__body { padding-bottom: 6px; @@ -388,7 +472,7 @@ } .card__name { - /* stylelint-disable-next-line value-no-vendor-prefix -- Освободившаяся строка сохраняет длинное название. */ + /* stylelint-disable-next-line value-no-vendor-prefix */ display: -webkit-box; max-height: 30px; overflow: hidden; @@ -405,12 +489,19 @@ } .card__user { - font-size: var(--ui-font-caption); line-height: 13px; + + @media screen and (max-width: 999px) { + font-size: var(--ui-font-caption); + } + + @media screen and (min-width: 1000px) { + font-size: 10px; + } } .card__user--invite { - /* stylelint-disable-next-line value-no-vendor-prefix -- Две строки сохраняют место для действий. */ + /* stylelint-disable-next-line value-no-vendor-prefix */ display: -webkit-box; overflow: hidden; font-size: var(--ui-font-small); @@ -556,78 +647,93 @@ } } -@include responsive.apply-mobile { - :host { - display: block; - width: 100%; - min-width: 0; - } - - .card__body { - width: 100%; - height: auto; - min-height: 200px; - } +@media screen and (max-width: 999px) { + @include responsive.apply-below-desktop { + :host { + display: block; + width: min(100%, var(--ui-mobile-entity-card-width)); + min-width: 0; + } - .card__content { - padding-right: 16px; - padding-left: 16px; - overflow: visible; - } + .card__body { + width: 100%; + height: auto; + min-height: 244px; + } - .card__head { - width: 100%; - } + .card__content { + padding-right: 16px; + padding-left: 16px; + overflow: visible; + } - .card__name { - max-width: 100%; - overflow-wrap: anywhere; - white-space: normal; - } + .card__head { + width: 100%; + } - .card--project, - .card--my-project { .card__name { - display: block; - max-height: none; - font-size: var(--ui-font-body); - line-height: 20px; - -webkit-line-clamp: unset; + max-width: 100%; + overflow-wrap: anywhere; + white-space: normal; } - .card__description { + .card--project, + .card--my-project { + .card__name { + display: block; + max-height: none; + font-size: var(--ui-font-body); + line-height: 20px; + -webkit-line-clamp: unset; + } + + .card__description { + height: auto; + font-size: var(--ui-font-body); + line-height: 20px; + } + } + + .card__context { height: auto; - font-size: var(--ui-font-body); - line-height: 20px; + min-height: 24px; + overflow-wrap: anywhere; + white-space: normal; } - } - .card__context { - height: auto; - min-height: 24px; - overflow-wrap: anywhere; - white-space: normal; - } + .card__role, + .card__access-label { + font-size: var(--ui-font-small); + line-height: 16px; + } - .card__role, - .card__access-label { - font-size: var(--ui-font-small); - line-height: 16px; - } + .card__description { + flex-basis: auto; + width: 100%; + height: auto; + min-height: 24px; + } - .card__description { - flex-basis: auto; - width: 100%; - height: auto; - min-height: 24px; - } + .card__project-action { + align-self: center; + width: auto; + min-height: 44px; + } - .card__project-action { - min-height: 44px; - } + .card--my-project .card__program-name { + font-size: var(--ui-font-small); + line-height: 16px; + } - .card__subscription-action { - width: 44px; - height: 44px; + .card--project .card__description p, + .card--my-project .card__description p { + font-size: var(--ui-font-small); + line-height: 18px; + } + + .card__subscription-action { + width: 44px; + height: 44px; + } } } diff --git a/projects/social_platform/src/app/ui/widgets/news-card/feed-news-modal/feed-news-modal.component.scss b/projects/social_platform/src/app/ui/widgets/news-card/feed-news-modal/feed-news-modal.component.scss index 2c89b44b7..6ba478aee 100644 --- a/projects/social_platform/src/app/ui/widgets/news-card/feed-news-modal/feed-news-modal.component.scss +++ b/projects/social_platform/src/app/ui/widgets/news-card/feed-news-modal/feed-news-modal.component.scss @@ -1,6 +1,5 @@ /** @format */ -/* Overlay находится вне host. Все правила ограничены локальным классом окна чтения. */ .modal .modal__body.feed-news-modal-body { box-sizing: border-box; display: block; @@ -35,19 +34,35 @@ &__badge { padding: 4px 10px; - font-size: var(--ui-font-caption); - font-weight: 600; color: var(--accent-dark); background: var(--accent-light); border-radius: var(--rounded-xxl); + + @media screen and (max-width: 999px) { + font-size: var(--ui-font-caption); + font-weight: 600; + } + + @media screen and (min-width: 1000px) { + font-size: 11px; + font-weight: 600; + } } time { margin-left: auto; - font-size: var(--ui-font-caption); - font-variant-numeric: tabular-nums; color: var(--grey-for-text); white-space: nowrap; + + @media screen and (max-width: 999px) { + font-size: var(--ui-font-caption); + font-variant-numeric: tabular-nums; + } + + @media screen and (min-width: 1000px) { + font-size: 11px; + font-variant-numeric: tabular-nums; + } } button { @@ -69,7 +84,14 @@ padding: 0; font-size: 28px; line-height: 1; - border-radius: var(--ui-radius-dialog); + + @media screen and (max-width: 999px) { + border-radius: var(--ui-radius-dialog); + } + + @media screen and (min-width: 1000px) { + border-radius: var(--rounded-lg); + } } &__scroll { @@ -101,8 +123,15 @@ } &__source span { - font-size: var(--ui-font-caption); color: var(--grey-for-text); + + @media screen and (max-width: 999px) { + font-size: var(--ui-font-caption); + } + + @media screen and (min-width: 1000px) { + font-size: 11px; + } } &__source a { diff --git a/projects/social_platform/src/app/ui/widgets/news-card/feed-news-preview/feed-news-preview.component.scss b/projects/social_platform/src/app/ui/widgets/news-card/feed-news-preview/feed-news-preview.component.scss index 46b9097bf..d3e1c564e 100644 --- a/projects/social_platform/src/app/ui/widgets/news-card/feed-news-preview/feed-news-preview.component.scss +++ b/projects/social_platform/src/app/ui/widgets/news-card/feed-news-preview/feed-news-preview.component.scss @@ -1,9 +1,6 @@ /** @format */ @use "styles/ui-foundation"; - -/** @format */ - @use "styles/feed-card"; :host { @@ -12,7 +9,9 @@ } .feed-preview { - @include ui-foundation.card; + @media screen and (max-width: 999px) { + @include ui-foundation.card; + } cursor: pointer; @@ -23,7 +22,6 @@ outline-offset: 3px; } - /* Ссылки полного текста доступны в окне: скрытая часть clamp не создаёт невидимые tab-stop. */ .feed-card__description { white-space: pre-line; } @@ -98,10 +96,17 @@ right: 4px; bottom: 4px; padding: 2px 4px; - font-size: var(--ui-font-caption); color: var(--white); background: var(--ui-media-backdrop); border-radius: 4px; + + @media screen and (max-width: 999px) { + font-size: var(--ui-font-caption); + } + + @media screen and (min-width: 1000px) { + font-size: 10px; + } } button.feed-preview__more { @@ -112,9 +117,16 @@ } &__attachments { - font-size: var(--ui-font-caption); line-height: 16px; color: var(--grey-for-text); + + @media screen and (max-width: 999px) { + font-size: var(--ui-font-caption); + } + + @media screen and (min-width: 1000px) { + font-size: 11px; + } } &__actions { diff --git a/projects/social_platform/src/app/ui/widgets/news-card/news-card.component.scss b/projects/social_platform/src/app/ui/widgets/news-card/news-card.component.scss index d49de7666..6fe340394 100644 --- a/projects/social_platform/src/app/ui/widgets/news-card/news-card.component.scss +++ b/projects/social_platform/src/app/ui/widgets/news-card/news-card.component.scss @@ -1,9 +1,6 @@ /** @format */ @use "styles/ui-foundation"; - -/** @format */ - @use "styles/typography"; @use "styles/responsive"; @@ -101,12 +98,12 @@ align-items: center; } - /* stylelint-disable value-no-vendor-prefix */ &__text { color: var(--grey-for-text); white-space: break-spaces; p { + /* stylelint-disable-next-line value-no-vendor-prefix */ display: -webkit-box; overflow: hidden; color: var(--black); @@ -127,7 +124,6 @@ -webkit-line-clamp: 3; } } - /* stylelint-enable value-no-vendor-prefix */ &__edit-files { display: flex; @@ -256,6 +252,8 @@ } } -.news { - @include ui-foundation.card; +@media screen and (max-width: 999px) { + .news { + @include ui-foundation.card; + } } diff --git a/projects/social_platform/src/app/ui/widgets/news-form/news-form.component.scss b/projects/social_platform/src/app/ui/widgets/news-form/news-form.component.scss index 4d65c475d..f8b4d5e3f 100644 --- a/projects/social_platform/src/app/ui/widgets/news-form/news-form.component.scss +++ b/projects/social_platform/src/app/ui/widgets/news-form/news-form.component.scss @@ -83,23 +83,25 @@ } } -@include responsive.apply-mobile { - .form__input { - min-width: 0; - } +@media screen and (max-width: 999px) { + @include responsive.apply-mobile { + .form__input { + min-width: 0; + } - .form__send { - flex-shrink: 0; - min-width: 44px; - min-height: 44px; - margin-left: 8px; - } + .form__send { + flex-shrink: 0; + min-width: 44px; + min-height: 44px; + margin-left: 8px; + } - .footer__attach { - display: inline-flex; - align-items: center; - justify-content: center; - min-width: 44px; - min-height: 44px; + .footer__attach { + display: inline-flex; + align-items: center; + justify-content: center; + min-width: 44px; + min-height: 44px; + } } } diff --git a/projects/social_platform/src/app/ui/widgets/project-invite/project-invite-dialog.component.scss b/projects/social_platform/src/app/ui/widgets/project-invite/project-invite-dialog.component.scss index c61da7a54..a164e32c7 100644 --- a/projects/social_platform/src/app/ui/widgets/project-invite/project-invite-dialog.component.scss +++ b/projects/social_platform/src/app/ui/widgets/project-invite/project-invite-dialog.component.scss @@ -1,25 +1,43 @@ /** @format */ -/* Стили portal ограничены оболочкой приглашения и не меняют остальные app-modal. */ .modal .modal__body.project-invite-body { left: 50%; display: block; - width: min(var(--ui-dialog-md), calc(100% - 24px)); - max-width: calc(100% - 24px); - max-height: min(720px, calc(var(--visual-viewport-height, 100dvh) - 48px)); padding: 0; overflow: visible; - border-radius: var(--ui-radius-dialog); + + @media screen and (max-width: 999px) { + width: min(var(--ui-dialog-md), calc(100% - 24px)); + max-width: calc(100% - 24px); + max-height: min(720px, calc(var(--visual-viewport-height, 100dvh) - 48px)); + border-radius: var(--ui-radius-dialog); + } + + @media screen and (min-width: 1000px) { + width: min(552px, calc(100% - 24px)); + max-width: calc(100% - 24px); + max-height: min(720px, calc(100dvh - 48px)); + border-radius: var(--rounded-lg); + } } .project-invite { display: flex; flex-direction: column; - max-height: min(720px, calc(var(--visual-viewport-height, 100dvh) - 48px)); - padding: var(--ui-dialog-padding); color: var(--black); background: var(--white); - border-radius: var(--ui-radius-dialog); + + @media screen and (max-width: 999px) { + max-height: min(720px, calc(var(--visual-viewport-height, 100dvh) - 48px)); + padding: var(--ui-dialog-padding); + border-radius: var(--ui-radius-dialog); + } + + @media screen and (min-width: 1000px) { + max-height: min(720px, calc(100dvh - 48px)); + padding: 24px; + border-radius: var(--rounded-lg); + } &, * { @@ -78,7 +96,14 @@ height: 48px; color: var(--accent); background: color-mix(in srgb, var(--accent) 8%, white); - border-radius: var(--ui-radius-dialog); + + @media screen and (max-width: 999px) { + border-radius: var(--ui-radius-dialog); + } + + @media screen and (min-width: 1000px) { + border-radius: var(--rounded-lg); + } } &__close { @@ -144,13 +169,23 @@ justify-content: center; min-height: 44px; padding: 9px 12px; - font-size: var(--ui-font-body); - font-weight: 600; line-height: 1.4; color: var(--accent); background: var(--white); - border: 1px solid var(--accent); - border-radius: var(--ui-radius-dialog); + + @media screen and (max-width: 999px) { + font-size: var(--ui-font-body); + font-weight: 600; + border: 1px solid var(--accent); + border-radius: var(--ui-radius-dialog); + } + + @media screen and (min-width: 1000px) { + font-size: 13px; + font-weight: 600; + border: 1px solid var(--accent); + border-radius: var(--rounded-lg); + } } .invite-button--primary { @@ -169,8 +204,16 @@ min-height: 44px; padding: 0 12px; color: var(--grey-for-text); - border: 1px solid color-mix(in srgb, var(--accent) 45%, white); - border-radius: var(--ui-radius-dialog); + + @media screen and (max-width: 999px) { + border: 1px solid color-mix(in srgb, var(--accent) 45%, white); + border-radius: var(--ui-radius-dialog); + } + + @media screen and (min-width: 1000px) { + border: 1px solid color-mix(in srgb, var(--accent) 45%, white); + border-radius: var(--rounded-lg); + } } .invite-search:focus-within { @@ -196,9 +239,17 @@ .invite-label { display: block; margin-bottom: 8px; - font-size: var(--ui-font-body); - font-weight: 600; color: var(--accent); + + @media screen and (max-width: 999px) { + font-size: var(--ui-font-body); + font-weight: 600; + } + + @media screen and (min-width: 1000px) { + font-size: 13px; + font-weight: 600; + } } .invite-rows { @@ -216,8 +267,16 @@ padding: 10px 12px; text-align: left; background: var(--white); - border: 1px solid var(--medium-grey-for-outline); - border-radius: var(--ui-radius-dialog); + + @media screen and (max-width: 999px) { + border: 1px solid var(--medium-grey-for-outline); + border-radius: var(--ui-radius-dialog); + } + + @media screen and (min-width: 1000px) { + border: 1px solid var(--medium-grey-for-outline); + border-radius: var(--rounded-lg); + } } .invite-row--selected { @@ -260,19 +319,34 @@ .invite-copy strong { display: block; - font-size: var(--ui-font-body); - font-weight: 600; line-height: 1.5; overflow-wrap: anywhere; + + @media screen and (max-width: 999px) { + font-size: var(--ui-font-body); + font-weight: 600; + } + + @media screen and (min-width: 1000px) { + font-size: 13px; + font-weight: 600; + } } .invite-meta { display: block; margin-top: 3px; - font-size: var(--ui-font-caption); line-height: 1.4; color: var(--grey-for-text); overflow-wrap: anywhere; + + @media screen and (max-width: 999px) { + font-size: var(--ui-font-caption); + } + + @media screen and (min-width: 1000px) { + font-size: 11px; + } } .invite-avatar { @@ -286,7 +360,14 @@ font-weight: 600; color: var(--accent); background: color-mix(in srgb, var(--accent) 9%, white); - border-radius: var(--ui-radius-dialog); + + @media screen and (max-width: 999px) { + border-radius: var(--ui-radius-dialog); + } + + @media screen and (min-width: 1000px) { + border-radius: var(--rounded-lg); + } } .invite-avatar img { @@ -297,10 +378,17 @@ .invite-helper { padding: 22px 12px; - font-size: var(--ui-font-body); line-height: 1.6; color: var(--grey-for-text); text-align: center; + + @media screen and (max-width: 999px) { + font-size: var(--ui-font-body); + } + + @media screen and (min-width: 1000px) { + font-size: 13px; + } } .invite-error { @@ -391,7 +479,6 @@ } } -/* Opt-in для окон команды: приглашение из профиля сохраняет прежнюю композицию. */ .project-invite.project-invite--compact { .project-invite__symbol { display: none; diff --git a/projects/social_platform/src/app/ui/widgets/project-invite/project-invite-role-input.component.scss b/projects/social_platform/src/app/ui/widgets/project-invite/project-invite-role-input.component.scss index b4657998d..9a3df46ff 100644 --- a/projects/social_platform/src/app/ui/widgets/project-invite/project-invite-role-input.component.scss +++ b/projects/social_platform/src/app/ui/widgets/project-invite/project-invite-role-input.component.scss @@ -1,4 +1,5 @@ /** @format */ + :host { display: block; min-width: 0; @@ -10,9 +11,17 @@ label { display: block; margin-bottom: 8px; - font-size: var(--ui-font-body); - font-weight: 600; color: var(--accent); + + @media screen and (max-width: 999px) { + font-size: var(--ui-font-body); + font-weight: 600; + } + + @media screen and (min-width: 1000px) { + font-size: 13px; + font-weight: 600; + } } input { @@ -39,9 +48,16 @@ p { margin: 6px 0 0; - font-size: var(--ui-font-caption); line-height: 1.4; color: var(--grey-for-text); + + @media screen and (max-width: 999px) { + font-size: var(--ui-font-caption); + } + + @media screen and (min-width: 1000px) { + font-size: 11px; + } } p.invalid { @@ -68,14 +84,22 @@ width: 100%; min-height: 44px; padding: 10px; - font: inherit; - font-size: var(--ui-font-body); color: var(--black); text-align: left; cursor: pointer; background: transparent; border: 0; border-radius: var(--rounded-lg); + + @media screen and (max-width: 999px) { + font: inherit; + font-size: var(--ui-font-body); + } + + @media screen and (min-width: 1000px) { + font: inherit; + font-size: 13px; + } } button.active, diff --git a/projects/social_platform/src/app/ui/widgets/project-vacancy-card/project-vacancy-card.component.scss b/projects/social_platform/src/app/ui/widgets/project-vacancy-card/project-vacancy-card.component.scss index caaca621c..333a2f7a2 100644 --- a/projects/social_platform/src/app/ui/widgets/project-vacancy-card/project-vacancy-card.component.scss +++ b/projects/social_platform/src/app/ui/widgets/project-vacancy-card/project-vacancy-card.component.scss @@ -1,9 +1,6 @@ /** @format */ @use "styles/ui-foundation"; - -/** @format */ - @use "styles/components/vacancy-ui"; :host { @@ -13,7 +10,10 @@ } .vacancy { - @include ui-foundation.card; + @media screen and (max-width: 999px) { + @include ui-foundation.card; + } + @include vacancy-ui.surface; display: flex; @@ -83,9 +83,16 @@ } &__project-name { - font-size: var(--ui-font-body); line-height: 20px; color: var(--black); + + @media screen and (max-width: 999px) { + font-size: var(--ui-font-body); + } + + @media screen and (min-width: 1000px) { + font-size: 13px; + } } &__specialization { @@ -99,12 +106,13 @@ font-size: var(--ui-font-body); line-height: 21px; } - /* stylelint-disable value-no-vendor-prefix */ + &__role, &__project-name, &__specialization, &__salary, &__description p { + /* stylelint-disable-next-line value-no-vendor-prefix */ display: -webkit-box; overflow: hidden; overflow-wrap: anywhere; @@ -124,7 +132,7 @@ @include vacancy-ui.link; } } - /* stylelint-enable value-no-vendor-prefix */ + &__empty { @include vacancy-ui.secondary; } diff --git a/projects/social_platform/src/app/ui/widgets/projects-filter/projects-filter.component.scss b/projects/social_platform/src/app/ui/widgets/projects-filter/projects-filter.component.scss index 3f54ff98b..2cdf708cb 100644 --- a/projects/social_platform/src/app/ui/widgets/projects-filter/projects-filter.component.scss +++ b/projects/social_platform/src/app/ui/widgets/projects-filter/projects-filter.component.scss @@ -106,3 +106,14 @@ } } } + +@media screen and (min-width: 1000px) { + .filter__titles button.ui-button { + font-family: Mont, sans-serif; + font-size: 10px; + font-style: normal; + font-weight: 400; + line-height: 130%; + color: var(--accent); + } +} diff --git a/projects/social_platform/src/app/ui/widgets/region-select/region-select.component.scss b/projects/social_platform/src/app/ui/widgets/region-select/region-select.component.scss index 30cd0e0f2..d23d13459 100644 --- a/projects/social_platform/src/app/ui/widgets/region-select/region-select.component.scss +++ b/projects/social_platform/src/app/ui/widgets/region-select/region-select.component.scss @@ -24,7 +24,14 @@ &:focus { border-color: var(--accent); - box-shadow: var(--ui-focus-ring); + + @media screen and (max-width: 999px) { + box-shadow: var(--ui-focus-ring); + } + + @media screen and (min-width: 1000px) { + box-shadow: 0 0 6px rgb(109 40 255 / 30%); + } } } @@ -36,7 +43,6 @@ &__clear { position: absolute; top: 50%; - right: var(--ui-space-xs); display: grid; place-items: center; padding: 4px; @@ -45,6 +51,14 @@ background: transparent; border: 0; transform: translateY(-50%); + + @media screen and (max-width: 999px) { + right: var(--ui-space-xs); + } + + @media screen and (min-width: 1000px) { + right: 14px; + } } &__legacy { diff --git a/projects/social_platform/src/app/ui/widgets/vacancy-card/vacancy-card.component.scss b/projects/social_platform/src/app/ui/widgets/vacancy-card/vacancy-card.component.scss index bdd14a950..2235c0b71 100644 --- a/projects/social_platform/src/app/ui/widgets/vacancy-card/vacancy-card.component.scss +++ b/projects/social_platform/src/app/ui/widgets/vacancy-card/vacancy-card.component.scss @@ -1,9 +1,6 @@ /** @format */ @use "styles/ui-foundation"; - -/** @format */ - @use "styles/components/vacancy-ui"; :host { @@ -13,13 +10,19 @@ } .vacancy { - @include ui-foundation.card; + @media screen and (max-width: 999px) { + @include ui-foundation.card; + } display: flex; flex-direction: column; gap: 16px; height: 100%; + @media screen and (min-width: 1000px) { + padding: 16px; + } + @include vacancy-ui.surface; &__header { diff --git a/projects/social_platform/src/app/ui/widgets/vacancy-created-dialog/vacancy-created-dialog.component.scss b/projects/social_platform/src/app/ui/widgets/vacancy-created-dialog/vacancy-created-dialog.component.scss index 6823383d3..cf4495263 100644 --- a/projects/social_platform/src/app/ui/widgets/vacancy-created-dialog/vacancy-created-dialog.component.scss +++ b/projects/social_platform/src/app/ui/widgets/vacancy-created-dialog/vacancy-created-dialog.component.scss @@ -55,5 +55,11 @@ app-button { flex-basis: auto; } + + @media screen and (min-width: 1000px) { + ::ng-deep .button { + min-height: 40px; + } + } } } diff --git a/projects/social_platform/src/app/ui/widgets/vacancy-filter/vacancy-filter.component.scss b/projects/social_platform/src/app/ui/widgets/vacancy-filter/vacancy-filter.component.scss index 85928ae79..1747438ee 100644 --- a/projects/social_platform/src/app/ui/widgets/vacancy-filter/vacancy-filter.component.scss +++ b/projects/social_platform/src/app/ui/widgets/vacancy-filter/vacancy-filter.component.scss @@ -53,6 +53,10 @@ > a ::ng-deep .button { width: 100%; + + @media screen and (min-width: 1000px) { + height: 38px; + } } @include responsive.apply-desktop { @@ -166,3 +170,14 @@ a:hover { cursor: pointer; } + +@media screen and (min-width: 1000px) { + .desktop__header button.ui-button { + font-family: Mont, sans-serif; + font-size: 10px; + font-style: normal; + font-weight: 400; + line-height: 130%; + color: var(--accent); + } +} diff --git a/projects/social_platform/src/app/ui/widgets/vacancy-skills/vacancy-skills.component.scss b/projects/social_platform/src/app/ui/widgets/vacancy-skills/vacancy-skills.component.scss index b47228d1e..576d749ac 100644 --- a/projects/social_platform/src/app/ui/widgets/vacancy-skills/vacancy-skills.component.scss +++ b/projects/social_platform/src/app/ui/widgets/vacancy-skills/vacancy-skills.component.scss @@ -22,10 +22,25 @@ } &__toggle { - min-height: 28px; + @media screen and (max-width: 999px) { + min-height: 44px; + } + + @media screen and (min-width: 1000px) { + min-height: 28px; + } + padding: 4px 10px; font: inherit; - font-size: var(--ui-font-body); + + @media screen and (max-width: 999px) { + font-size: var(--ui-font-body); + } + + @media screen and (min-width: 1000px) { + font-size: 13px; + } + line-height: 18px; color: var(--black); cursor: pointer; diff --git a/projects/social_platform/src/app/ui/widgets/vacancy-status/vacancy-status.component.scss b/projects/social_platform/src/app/ui/widgets/vacancy-status/vacancy-status.component.scss index ac84ea190..793a7890e 100644 --- a/projects/social_platform/src/app/ui/widgets/vacancy-status/vacancy-status.component.scss +++ b/projects/social_platform/src/app/ui/widgets/vacancy-status/vacancy-status.component.scss @@ -5,3 +5,38 @@ flex-shrink: 0; max-width: 100%; } + +@media screen and (min-width: 1000px) { + .status { + display: inline-flex; + align-items: center; + min-height: 26px; + padding: 3px 10px; + font-size: 12px; + font-weight: 400; + line-height: 18px; + color: var(--black); + overflow-wrap: anywhere; + background: var(--light-gray); + border: 1px solid var(--gray); + border-radius: var(--rounded-xxl); + + &--success { + color: var(--green-dark); + background: var(--green-light); + border-color: var(--green); + } + + &--pending { + color: var(--black); + background: var(--accent-light); + border-color: var(--accent-light); + } + + &--declined { + color: var(--black); + background: var(--red-light); + border-color: var(--red-light); + } + } +} diff --git a/projects/social_platform/src/styles.scss b/projects/social_platform/src/styles.scss index 61133c798..de6d8b584 100644 --- a/projects/social_platform/src/styles.scss +++ b/projects/social_platform/src/styles.scss @@ -27,10 +27,13 @@ :root { --app-height: 100vh; - --page-gutter: 16px; - @supports (height: 100dvh) { - --app-height: 100dvh; + @media screen and (max-width: 999px) { + --page-gutter: 16px; + + @supports (height: 100dvh) { + --app-height: 100dvh; + } } } diff --git a/projects/social_platform/src/styles/_course-task.scss b/projects/social_platform/src/styles/_course-task.scss index c68503472..c5e36045d 100644 --- a/projects/social_platform/src/styles/_course-task.scss +++ b/projects/social_platform/src/styles/_course-task.scss @@ -13,14 +13,12 @@ max-width: 100%; overflow-wrap: anywhere; } - .#{$name}__header, .#{$name}__body, .#{$name}__content { min-height: 0; padding: 16px; } - .#{$name}__files, .#{$name}__content { ::ng-deep app-upload-file .control { diff --git a/projects/social_platform/src/styles/_feed-card.scss b/projects/social_platform/src/styles/_feed-card.scss index 9ab53c322..83a269b96 100644 --- a/projects/social_platform/src/styles/_feed-card.scss +++ b/projects/social_platform/src/styles/_feed-card.scss @@ -1,198 +1,392 @@ /** @format */ -// Высоту задаёт содержимое самого высокого соседа в строке grid, а не общий media slot. -// CTA остаётся снизу строки; detail/profile этот миксин не используют. @mixin layout { - box-sizing: border-box; - display: flex; - flex-direction: column; - gap: 10px; - width: 100%; - min-width: 0; - height: 100%; - padding: 20px; - color: var(--feed-text, var(--black)); - background: var(--feed-background, var(--light-white)); - border: 1px solid var(--medium-grey-for-outline); - border-radius: var(--rounded-xl); - - > * { - flex-shrink: 0; + @media screen and (max-width: 999px) { + box-sizing: border-box; + display: flex; + flex-direction: column; + gap: 10px; + width: 100%; min-width: 0; - min-height: 0; - } + height: 100%; + padding: 20px; + color: var(--feed-text, var(--black)); + background: var(--feed-background, var(--light-white)); + border: 1px solid var(--medium-grey-for-outline); + border-radius: var(--rounded-xl); - a:focus-visible, - button:focus-visible { - outline: 2px solid var(--feed-text, var(--accent-dark)); - outline-offset: 3px; - } + > * { + flex-shrink: 0; + min-width: 0; + min-height: 0; + } - .feed-card__meta { - display: flex; - gap: 8px; - align-items: center; - justify-content: space-between; - min-height: 26px; - } + a:focus-visible, + button:focus-visible { + outline: 2px solid var(--feed-text, var(--accent-dark)); + outline-offset: 3px; + } - .feed-card__type { - display: inline-flex; - align-items: center; - height: 26px; - padding: 0 10px; - overflow: hidden; - font-size: 11px; - font-weight: 600; - line-height: 16px; - color: var(--accent-dark); - text-overflow: ellipsis; - white-space: nowrap; - background: var(--accent-light); - border: 1px solid transparent; - border-radius: var(--rounded-xxl); - } + .feed-card__meta { + display: flex; + gap: 8px; + align-items: center; + justify-content: space-between; + min-height: 26px; + } - .feed-card__date { - flex-shrink: 0; - font-size: 10px; - font-variant-numeric: tabular-nums; - line-height: 14px; - color: var(--feed-secondary, var(--grey-for-text)); - } + .feed-card__type { + display: inline-flex; + align-items: center; + height: 26px; + padding: 0 10px; + overflow: hidden; + font-size: 11px; + font-weight: 600; + line-height: 16px; + color: var(--accent-dark); + text-overflow: ellipsis; + white-space: nowrap; + background: var(--accent-light); + border: 1px solid transparent; + border-radius: var(--rounded-xxl); + } - .feed-card__source { - display: flex; - gap: 10px; - align-items: center; - min-height: 40px; - } + .feed-card__date { + flex-shrink: 0; + font-size: 10px; + font-variant-numeric: tabular-nums; + line-height: 14px; + color: var(--feed-secondary, var(--grey-for-text)); + } - .feed-card__avatar { - flex: 0 0 40px; - width: 40px; - height: 40px; - border-radius: 50%; - object-fit: cover; - } + .feed-card__source { + display: flex; + gap: 10px; + align-items: center; + min-height: 40px; + } - .feed-card__source-text { - display: flex; - flex-direction: column; - gap: 3px; - min-width: 0; - } + .feed-card__avatar { + flex: 0 0 40px; + width: 40px; + height: 40px; + border-radius: 50%; + object-fit: cover; + } - .feed-card__eyebrow { - font-size: 10px; - line-height: 14px; - color: var(--feed-secondary, var(--grey-for-text)); - } + .feed-card__source-text { + display: flex; + flex-direction: column; + gap: 3px; + min-width: 0; + } - .feed-card__source-name { - overflow: hidden; - font-size: 13px; - font-weight: 600; - line-height: 17px; - color: inherit; - text-overflow: ellipsis; - white-space: nowrap; - } + .feed-card__eyebrow { + font-size: 10px; + line-height: 14px; + color: var(--feed-secondary, var(--grey-for-text)); + } - /* stylelint-disable value-no-vendor-prefix -- Line-clamp ограничивает текст, сохраняя полное значение в DOM. */ - .feed-card__title, - .feed-card__description { - display: -webkit-box; - margin: 0; - overflow: hidden; - overflow-wrap: anywhere; - -webkit-box-orient: vertical; - } - /* stylelint-enable value-no-vendor-prefix */ + .feed-card__source-name { + overflow: hidden; + font-size: 13px; + font-weight: 600; + line-height: 17px; + color: inherit; + text-overflow: ellipsis; + white-space: nowrap; + } - .feed-card__title { - font-size: 18px; - font-weight: 600; - line-height: 22px; - -webkit-line-clamp: 2; - } + .feed-card__title, + .feed-card__description { + /* stylelint-disable-next-line value-no-vendor-prefix */ + display: -webkit-box; + margin: 0; + overflow: hidden; + overflow-wrap: anywhere; + -webkit-box-orient: vertical; + } - .feed-card__description { - font-size: 12px; - font-weight: 400; - line-height: 18px; - color: var(--feed-secondary, var(--grey-for-text)); - -webkit-line-clamp: 3; - } + .feed-card__title { + font-size: 18px; + font-weight: 600; + line-height: 22px; + -webkit-line-clamp: 2; + } - .feed-card__metadata { - display: flex; - flex-direction: column; - gap: 8px; - align-items: flex-start; - min-width: 0; + .feed-card__description { + font-size: 12px; + font-weight: 400; + line-height: 18px; + color: var(--feed-secondary, var(--grey-for-text)); + -webkit-line-clamp: 3; + } + + .feed-card__metadata { + display: flex; + flex-direction: column; + gap: 8px; + align-items: flex-start; + min-width: 0; - &:empty { - display: none; + &:empty { + display: none; + } } - } - .feed-card__skills { - display: flex; - gap: 6px; - width: 100%; - padding: 0; - margin: 0; - list-style: none; - } + .feed-card__skills { + display: flex; + flex-wrap: wrap; + gap: 6px; + width: 100%; + padding: 0; + margin: 0; + list-style: none; + } - .feed-card__chip { - box-sizing: border-box; - flex-shrink: 0; - max-width: 100%; - height: 24px; - padding: 4px 8px; - overflow: hidden; - font-size: 10px; - font-weight: 400; - line-height: 16px; - color: var(--accent-dark); - text-overflow: ellipsis; - white-space: nowrap; - background: var(--accent-light); - border-radius: var(--rounded-lg); - - &--skill { - flex-shrink: 1; - max-width: calc((100% - 18px) / 4); - } - - &--industry { - color: var(--green-dark); - background: var(--green-light); + .feed-card__chip { + box-sizing: border-box; + flex-shrink: 0; + max-width: 100%; + min-height: 24px; + padding: 4px 8px; + font-size: 12px; + font-weight: 400; + line-height: 16px; + color: var(--accent-dark); + overflow-wrap: anywhere; + white-space: normal; + background: var(--accent-light); + border-radius: var(--rounded-lg); + + &--skill { + flex-shrink: 1; + max-width: 100%; + } + + &--industry { + color: var(--green-dark); + background: var(--green-light); + } + } + + .feed-card__cta { + box-sizing: border-box; + display: flex; + align-items: center; + align-self: flex-start; + justify-content: center; + max-width: 100%; + min-height: 44px; + padding: 10px 16px; + margin-top: auto; + font-size: 12px; + font-weight: 600; + line-height: 16px; + color: var(--feed-cta-text, var(--white)); + text-align: center; + background: var(--feed-cta-background, var(--accent)); + border: 1px solid transparent; + border-radius: var(--rounded-xxl); + + &:hover { + filter: brightness(0.95); + } } } - .feed-card__cta { + @media screen and (min-width: 1000px) { box-sizing: border-box; display: flex; - align-items: center; - justify-content: center; + flex-direction: column; + gap: 10px; width: 100%; - height: 36px; - padding: 0 12px; - margin-top: auto; - font-size: 12px; - font-weight: 600; - line-height: 16px; - color: var(--feed-cta-text, var(--white)); - text-align: center; - background: var(--feed-cta-background, var(--accent)); - border: 1px solid transparent; - border-radius: var(--rounded-xxl); - - &:hover { - filter: brightness(0.95); + min-width: 0; + height: 100%; + padding: 20px; + color: var(--feed-text, var(--black)); + background: var(--feed-background, var(--light-white)); + border: 1px solid var(--medium-grey-for-outline); + border-radius: var(--rounded-xl); + + > * { + flex-shrink: 0; + min-width: 0; + min-height: 0; + } + + a:focus-visible, + button:focus-visible { + outline: 2px solid var(--feed-text, var(--accent-dark)); + outline-offset: 3px; + } + + .feed-card__meta { + display: flex; + gap: 8px; + align-items: center; + justify-content: space-between; + min-height: 26px; + } + + .feed-card__type { + display: inline-flex; + align-items: center; + height: 26px; + padding: 0 10px; + overflow: hidden; + font-size: 11px; + font-weight: 600; + line-height: 16px; + color: var(--accent-dark); + text-overflow: ellipsis; + white-space: nowrap; + background: var(--accent-light); + border: 1px solid transparent; + border-radius: var(--rounded-xxl); + } + + .feed-card__date { + flex-shrink: 0; + font-size: 10px; + font-variant-numeric: tabular-nums; + line-height: 14px; + color: var(--feed-secondary, var(--grey-for-text)); + } + + .feed-card__source { + display: flex; + gap: 10px; + align-items: center; + min-height: 40px; + } + + .feed-card__avatar { + flex: 0 0 40px; + width: 40px; + height: 40px; + border-radius: 50%; + object-fit: cover; + } + + .feed-card__source-text { + display: flex; + flex-direction: column; + gap: 3px; + min-width: 0; + } + + .feed-card__eyebrow { + font-size: 10px; + line-height: 14px; + color: var(--feed-secondary, var(--grey-for-text)); + } + + .feed-card__source-name { + overflow: hidden; + font-size: 13px; + font-weight: 600; + line-height: 17px; + color: inherit; + text-overflow: ellipsis; + white-space: nowrap; + } + + .feed-card__title, + .feed-card__description { + /* stylelint-disable-next-line value-no-vendor-prefix */ + display: -webkit-box; + margin: 0; + overflow: hidden; + overflow-wrap: anywhere; + -webkit-box-orient: vertical; + } + + .feed-card__title { + font-size: 18px; + font-weight: 600; + line-height: 22px; + -webkit-line-clamp: 2; + } + + .feed-card__description { + font-size: 12px; + font-weight: 400; + line-height: 18px; + color: var(--feed-secondary, var(--grey-for-text)); + -webkit-line-clamp: 3; + } + + .feed-card__metadata { + display: flex; + flex-direction: column; + gap: 8px; + align-items: flex-start; + min-width: 0; + + &:empty { + display: none; + } + } + + .feed-card__skills { + display: flex; + gap: 6px; + width: 100%; + padding: 0; + margin: 0; + list-style: none; + } + + .feed-card__chip { + box-sizing: border-box; + flex-shrink: 0; + max-width: 100%; + height: 24px; + padding: 4px 8px; + overflow: hidden; + font-size: 10px; + font-weight: 400; + line-height: 16px; + color: var(--accent-dark); + text-overflow: ellipsis; + white-space: nowrap; + background: var(--accent-light); + border-radius: var(--rounded-lg); + + &--skill { + flex-shrink: 1; + max-width: calc((100% - 18px) / 4); + } + + &--industry { + color: var(--green-dark); + background: var(--green-light); + } + } + + .feed-card__cta { + box-sizing: border-box; + display: flex; + align-items: center; + justify-content: center; + width: 100%; + height: 36px; + padding: 0 12px; + margin-top: auto; + font-size: 12px; + font-weight: 600; + line-height: 16px; + color: var(--feed-cta-text, var(--white)); + text-align: center; + background: var(--feed-cta-background, var(--accent)); + border: 1px solid transparent; + border-radius: var(--rounded-xxl); + + &:hover { + filter: brightness(0.95); + } } } } diff --git a/projects/social_platform/src/styles/_platform-responsive.scss b/projects/social_platform/src/styles/_platform-responsive.scss index 26ca0420e..164404ec5 100644 --- a/projects/social_platform/src/styles/_platform-responsive.scss +++ b/projects/social_platform/src/styles/_platform-responsive.scss @@ -2,119 +2,138 @@ @use "responsive"; -// Intrinsic sizing is shared by every page and every projected control. -app-root, -app-input, -app-textarea, -app-select, -app-autocomplete-input, -app-search, -app-upload-file, -app-file-item, -app-file-upload-item, -app-button, -ui-button { - min-width: 0; - max-width: 100%; -} - -h1, -h2, -h3, -h4, -p, -label, -.error { - overflow-wrap: anywhere; -} - -video, -iframe, -canvas { - max-width: 100%; -} - -// Connected controls opened inside the shared modal must stay above its backdrop. -.cdk-overlay-container { - z-index: 10010; -} - -// Opt-in primitives for new screens; use the same boundaries as existing components. -.responsive-header, -.responsive-actions { - display: flex; - flex-wrap: wrap; - gap: 12px; - align-items: center; - justify-content: space-between; - min-width: 0; -} - -.responsive-table { - min-width: 0; - max-width: 100%; - overflow-x: auto; - overscroll-behavior-inline: contain; -} - -.responsive-dialog-header, -.responsive-dialog-actions { - position: sticky; - z-index: 2; - background: inherit; -} - -.responsive-dialog-header { - top: 0; +@media screen and (max-width: 999px) { + app-root, + app-input, + app-textarea, + app-select, + app-autocomplete-input, + app-search, + app-upload-file, + app-file-item, + app-file-upload-item, + app-button, + ui-button { + min-width: 0; + max-width: 100%; + } } -.responsive-dialog-actions { - bottom: 0; - padding-bottom: env(safe-area-inset-bottom, 0); +@media screen and (max-width: 999px) { + h1, + h2, + h3, + h4, + p, + label, + .error { + overflow-wrap: anywhere; + } } -@include responsive.apply-mobile { - html { - scrollbar-gutter: auto; +@media screen and (max-width: 999px) { + video, + iframe, + canvas { + max-width: 100%; } +} - .text-body-10 { - font-size: 12px; - line-height: 18px; +@media screen and (max-width: 999px) { + .cdk-overlay-container { + z-index: 10010; } +} - .text-body-12 { - font-size: 14px; - line-height: 20px; +@media screen and (max-width: 999px) { + .responsive-header, + .responsive-actions { + display: flex; + flex-wrap: wrap; + gap: 12px; + align-items: center; + justify-content: space-between; + min-width: 0; } +} - input:not([type="checkbox"], [type="radio"]), - textarea, - select { +@media screen and (max-width: 999px) { + .responsive-table { min-width: 0; max-width: 100%; - font-size: 16px; + overflow-x: auto; + overscroll-behavior-inline: contain; } +} - .responsive-header, - .responsive-actions { - flex-direction: column; - align-items: stretch; +@media screen and (max-width: 999px) { + .responsive-dialog-header, + .responsive-dialog-actions { + position: sticky; + z-index: 2; + background: inherit; + } +} + +@media screen and (max-width: 999px) { + .responsive-dialog-header { + top: 0; } +} - .cdk-overlay-pane { - max-width: calc(100vw - 24px); +@media screen and (max-width: 999px) { + .responsive-dialog-actions { + bottom: 0; + padding-bottom: env(safe-area-inset-bottom, 0); } +} - .mat-datepicker-content { - max-width: 100%; - max-height: calc(100dvh - 24px); - overflow: auto; +@media screen and (max-width: 999px) { + @include responsive.apply-mobile { + html { + scrollbar-gutter: auto; + } + + .text-body-10 { + font-size: 12px; + line-height: 18px; + } + + .text-body-12 { + font-size: 14px; + line-height: 20px; + } + + input:not([type="checkbox"], [type="radio"]), + textarea, + select { + min-width: 0; + max-width: 100%; + font-size: 16px; + } + + .responsive-header, + .responsive-actions { + flex-direction: column; + align-items: stretch; + } + + .cdk-overlay-pane { + max-width: calc(100vw - 24px); + } + + .mat-datepicker-content { + max-width: 100%; + max-height: calc(100dvh - 24px); + overflow: auto; + } } } -@media screen and (max-width: 359px) { - :root { - --page-gutter: 12px; +@media screen and (max-width: 999px) { + @media screen and (max-width: 359px) { + :root { + --page-gutter: 12px; + } } } diff --git a/projects/social_platform/src/styles/_typography.scss b/projects/social_platform/src/styles/_typography.scss index d2c957ca1..80483ed1e 100644 --- a/projects/social_platform/src/styles/_typography.scss +++ b/projects/social_platform/src/styles/_typography.scss @@ -1,5 +1,155 @@ /** @format */ +@mixin heading-1 { + font-family: Mont, sans-serif; + font-size: 18px; + font-style: normal; + font-weight: 400; + line-height: 150%; +} + +@mixin heading-1-bold { + font-family: Mont, sans-serif; + font-size: 18px; + font-style: normal; + font-weight: 600; + line-height: 150%; +} + +@mixin heading-2 { + font-family: Mont, sans-serif; + font-size: 16px; + font-style: normal; + font-weight: 400; + line-height: 150%; +} + +@mixin heading-2-bold { + font-family: Mont, sans-serif; + font-size: 16px; + font-style: normal; + font-weight: 600; + line-height: 150%; +} + +@mixin heading-3 { + font-family: Mont, sans-serif; + font-size: 24px; + font-style: normal; + font-weight: 700; + line-height: 150%; +} + +@mixin heading-4 { + font-family: Mont, sans-serif; + font-size: 18px; + font-style: normal; + font-weight: 700; + line-height: 150%; +} + +@mixin body-18 { + font-family: Mont, sans-serif; + font-size: 18px; + font-style: normal; + font-weight: 600; + line-height: 150%; +} + +@mixin body-bold-18 { + font-family: Mont, sans-serif; + font-size: 18px; + font-style: normal; + font-weight: 800; + line-height: 130%; +} + +@mixin bold-body-16 { + font-family: Mont, sans-serif; + font-size: 16px; + font-style: normal; + font-weight: 700; + line-height: 150%; +} + +@mixin body-16 { + font-family: Mont, sans-serif; + font-size: 16px; + font-style: normal; + font-weight: 600; + line-height: 150%; +} + +@mixin bold-body-14 { + font-family: Mont, sans-serif; + font-size: 14px; + font-style: normal; + font-weight: 700; + line-height: 150%; +} + +@mixin body-14 { + font-family: Mont, sans-serif; + font-size: 14px; + font-style: normal; + font-weight: 400; + line-height: 150%; +} + +@mixin body-12 { + font-family: Mont, sans-serif; + font-size: 12px; + font-style: normal; + font-weight: 400; + line-height: 130%; +} + +@mixin body-12-bold { + font-family: Mont, sans-serif; + font-size: 12px; + font-style: normal; + font-weight: 600; + line-height: 130%; +} + +@mixin body-10 { + @media screen and (max-width: 999px) { + font-family: Mont, sans-serif; + font-size: var(--ui-font-caption); + font-style: normal; + font-weight: 400; + line-height: 130%; + color: var(--ui-text-muted); + } + + @media screen and (min-width: 1000px) { + font-family: Mont, sans-serif; + font-size: 10px; + font-style: normal; + font-weight: 400; + line-height: 130%; + color: var(--grey-button); + } +} + +@mixin body-6 { + @media screen and (max-width: 999px) { + font-family: Mont, sans-serif; + font-size: var(--ui-font-caption); + font-style: normal; + font-weight: 400; + line-height: 130%; + } + + @media screen and (min-width: 1000px) { + font-family: Mont, sans-serif; + font-size: 6px; + font-style: normal; + font-weight: 400; + line-height: 130%; + } +} + @font-face { font-family: Mont; font-style: normal; @@ -64,195 +214,66 @@ url("../assets/font/Mont-Regular.ttf") format("truetype"); } -@mixin heading-1 { - font-family: Mont, sans-serif; - font-size: 18px; - font-style: normal; - font-weight: 400; - line-height: 150%; -} - .text-heading-1 { @include heading-1; } -@mixin heading-1-bold { - font-family: Mont, sans-serif; - font-size: 18px; - font-style: normal; - font-weight: 600; - line-height: 150%; -} - .text-heading-1-bold { @include heading-1-bold; } -@mixin heading-2 { - font-family: Mont, sans-serif; - font-size: 16px; - font-style: normal; - font-weight: 400; - line-height: 150%; -} - .text-heading-2 { @include heading-2; } -@mixin heading-2-bold { - font-family: Mont, sans-serif; - font-size: 16px; - font-style: normal; - font-weight: 600; - line-height: 150%; -} - .text-heading-2-bold { @include heading-2-bold; } -@mixin heading-3 { - font-family: Mont, sans-serif; - font-size: 24px; - font-style: normal; - font-weight: 700; - line-height: 150%; -} - .text-heading-3 { @include heading-3; } -@mixin heading-4 { - font-family: Mont, sans-serif; - font-size: 18px; - font-style: normal; - font-weight: 700; - line-height: 150%; -} - .text-heading-4 { @include heading-4; } -@mixin body-18 { - font-family: Mont, sans-serif; - font-size: 18px; - font-style: normal; - font-weight: 600; - line-height: 150%; -} - .text-body-18 { @include body-18; } -@mixin body-bold-18 { - font-family: Mont, sans-serif; - font-size: 18px; - font-style: normal; - font-weight: 800; - line-height: 130%; -} - .text-body-bold-18 { @include body-18; } -@mixin bold-body-16 { - font-family: Mont, sans-serif; - font-size: 16px; - font-style: normal; - font-weight: 700; - line-height: 150%; -} - .text-bold-body-16 { @include bold-body-16; } -@mixin body-16 { - font-family: Mont, sans-serif; - font-size: 16px; - font-style: normal; - font-weight: 600; - line-height: 150%; -} - .text-body-16 { @include body-16; } -@mixin bold-body-14 { - font-family: Mont, sans-serif; - font-size: 14px; - font-style: normal; - font-weight: 700; - line-height: 150%; -} - .text-bold-body-14 { @include bold-body-14; } -@mixin body-14 { - font-family: Mont, sans-serif; - font-size: 14px; - font-style: normal; - font-weight: 400; - line-height: 150%; -} - .text-body-14 { @include body-14; } -@mixin body-12 { - font-family: Mont, sans-serif; - font-size: 12px; - font-style: normal; - font-weight: 400; - line-height: 130%; -} - .text-body-12 { @include body-12; } -@mixin body-12-bold { - font-family: Mont, sans-serif; - font-size: 12px; - font-style: normal; - font-weight: 600; - line-height: 130%; -} - .text-body-12-bold { @include body-12-bold; } -@mixin body-10 { - font-family: Mont, sans-serif; - font-size: var(--ui-font-caption); - font-style: normal; - font-weight: 400; - line-height: 130%; - color: var(--ui-text-muted); -} - .text-body-10 { @include body-10; } -@mixin body-6 { - font-family: Mont, sans-serif; - font-size: var(--ui-font-caption); - font-style: normal; - font-weight: 400; - line-height: 130%; -} - .text-body-6 { @include body-6; } diff --git a/projects/social_platform/src/styles/_ui-system.scss b/projects/social_platform/src/styles/_ui-system.scss index 75abcc461..397f054b0 100644 --- a/projects/social_platform/src/styles/_ui-system.scss +++ b/projects/social_platform/src/styles/_ui-system.scss @@ -2,206 +2,268 @@ @use "ui-foundation"; -button.ui-button.ui-button { - @include ui-foundation.button($layout: false); -} - -.ui-button { - display: inline-flex; - gap: var(--ui-space-sm); - align-items: center; - justify-content: center; +@media screen and (min-width: 1000px) { + :where(button.ui-button) { + padding: 0; + font: inherit; + color: inherit; + text-align: inherit; + cursor: pointer; + background: transparent; + border: 0; + } } -button.ui-button[role="radio"] { - justify-content: space-between; - width: 100%; - padding: var(--ui-control-padding); - color: var(--ui-text); - text-align: left; - background: var(--ui-surface-subtle); - border-color: var(--ui-border-subtle); - border-radius: var(--ui-radius-card); - - &[aria-checked="true"] { - background: var(--accent-light); - border-color: var(--ui-accent); +@media screen and (max-width: 999px) { + button.ui-button.ui-button { + @include ui-foundation.button($layout: false); } } -.ui-field { - @include ui-foundation.control; +@media screen and (max-width: 999px) { + .ui-button { + display: inline-flex; + gap: var(--ui-space-sm); + align-items: center; + justify-content: center; + } } -input.ui-choice.ui-choice { - min-height: 18px; - padding: 0; - background: transparent; - - @include ui-foundation.choice; +@media screen and (max-width: 999px) { + button.ui-button[role="radio"] { + justify-content: space-between; + width: 100%; + padding: var(--ui-control-padding); + color: var(--ui-text); + text-align: left; + background: var(--ui-surface-subtle); + border-color: var(--ui-border-subtle); + border-radius: var(--ui-radius-card); - appearance: auto; + &[aria-checked="true"] { + background: var(--accent-light); + border-color: var(--ui-accent); + } + } } -.ui-card { - @include ui-foundation.card; - - &--interactive { - transition: - box-shadow 0.2s, - border-color 0.2s; +@media screen and (max-width: 999px) { + .ui-field { + @include ui-foundation.control; } +} - &--interactive:hover { - border-color: var(--ui-accent); - box-shadow: var(--ui-card-hover-shadow); - } +@media screen and (max-width: 999px) { + input.ui-choice.ui-choice { + min-height: 18px; + padding: 0; + background: transparent; - &:focus-visible { - outline: 2px solid var(--accent-dark); - outline-offset: 3px; - } -} + @include ui-foundation.choice; -.ui-form { - min-width: 0; + appearance: auto; + } } -.ui-form label.field-label, -label.field-label { - margin-bottom: var(--ui-space-sm); - font-size: var(--ui-font-small); - line-height: 1.5; - color: var(--ui-text); +@media screen and (max-width: 999px) { + .ui-card { + @include ui-foundation.card; + + &--interactive { + transition: + box-shadow 0.2s, + border-color 0.2s; + } + + &--interactive:hover { + border-color: var(--ui-accent); + box-shadow: var(--ui-card-hover-shadow); + } + + &:focus-visible { + outline: 2px solid var(--accent-dark); + outline-offset: 3px; + } + } } -.ui-form .error, -.error { - font-size: var(--ui-font-small); - line-height: 1.5; - color: var(--ui-danger); +@media screen and (max-width: 999px) { + .ui-form { + min-width: 0; + } } -.ui-filters { - display: flex; - flex-direction: column; - gap: var(--ui-space-md); - min-width: 0; +@media screen and (max-width: 999px) { + .ui-form label.field-label, + label.field-label { + margin-bottom: var(--ui-space-sm); + font-size: var(--ui-font-small); + line-height: 1.5; + color: var(--ui-text); + } } -.ui-filters__header { - display: flex; - flex-wrap: wrap; - gap: var(--ui-space-xs); - align-items: center; - justify-content: space-between; - - > p, - > .ui-button { - flex-shrink: 0; +@media screen and (max-width: 999px) { + .ui-form .error, + .error { + font-size: var(--ui-font-small); + line-height: 1.5; + color: var(--ui-danger); } } -.ui-dialog-body { - min-width: 0; - font-size: var(--ui-font-body); - line-height: 1.5; - overflow-wrap: anywhere; +@media screen and (max-width: 999px) { + .ui-filters { + display: flex; + flex-direction: column; + gap: var(--ui-space-md); + min-width: 0; + } } -.ui-dialog-footer { - display: flex; - flex-wrap: wrap; - gap: var(--ui-space-sm); - align-items: center; - justify-content: flex-end; - padding-top: var(--ui-space-md); - margin-top: var(--ui-space-md); +@media screen and (max-width: 999px) { + .ui-filters__header { + display: flex; + flex-wrap: wrap; + gap: var(--ui-space-xs); + align-items: center; + justify-content: space-between; + + > p, + > .ui-button { + flex-shrink: 0; + } + } } -.ui-alert { - padding: var(--ui-space-md); - color: var(--ui-text); - background: var(--accent-light); - border-radius: var(--ui-radius-card); +@media screen and (max-width: 999px) { + .ui-dialog-body { + min-width: 0; + font-size: var(--ui-font-body); + line-height: 1.5; + overflow-wrap: anywhere; + } } -.ui-alert--error { - color: var(--red-dark); - background: var(--red-light); +@media screen and (max-width: 999px) { + .ui-dialog-footer { + display: flex; + flex-wrap: wrap; + gap: var(--ui-space-sm); + align-items: center; + justify-content: flex-end; + padding-top: var(--ui-space-md); + margin-top: var(--ui-space-md); + } } -.ui-alert--success { - color: var(--green-dark); - background: var(--green-light); +@media screen and (max-width: 999px) { + .ui-alert { + padding: var(--ui-space-md); + color: var(--ui-text); + background: var(--accent-light); + border-radius: var(--ui-radius-card); + } } -.ui-alert--warning { - color: var(--gold-dark); - background: var(--gold-light); +@media screen and (max-width: 999px) { + .ui-alert--error { + color: var(--red-dark); + background: var(--red-light); + } } -.ui-drawer { - min-width: 0; - max-width: 100vw; - overscroll-behavior: contain; +@media screen and (max-width: 999px) { + .ui-alert--success { + color: var(--green-dark); + background: var(--green-light); + } } -table.ui-table { - width: 100%; - font-size: var(--ui-font-small); - line-height: 1.5; - color: var(--ui-text); - border-collapse: collapse; - - th { - padding: 12px 16px; - font-weight: 600; - text-align: left; - background: var(--ui-surface-subtle); - border-bottom: 1px solid var(--ui-border); +@media screen and (max-width: 999px) { + .ui-alert--warning { + color: var(--gold-dark); + background: var(--gold-light); } +} - td { - padding: 12px 16px; - border-bottom: 1px solid var(--ui-border-subtle); +@media screen and (max-width: 999px) { + .ui-drawer { + min-width: 0; + max-width: 100vw; + overscroll-behavior: contain; } +} - tbody tr:hover { - background: var(--accent-light); +@media screen and (max-width: 999px) { + table.ui-table { + width: 100%; + font-size: var(--ui-font-small); + line-height: 1.5; + color: var(--ui-text); + border-collapse: collapse; + + th { + padding: 12px 16px; + font-weight: 600; + text-align: left; + background: var(--ui-surface-subtle); + border-bottom: 1px solid var(--ui-border); + } + + td { + padding: 12px 16px; + border-bottom: 1px solid var(--ui-border-subtle); + } + + tbody tr:hover { + background: var(--accent-light); + } } } -.ui-h1 { - font-size: var(--ui-font-h1); - font-weight: 600; - line-height: 1.3; +@media screen and (max-width: 999px) { + .ui-h1 { + font-size: var(--ui-font-h1); + font-weight: 600; + line-height: 1.3; + } } -.ui-h2 { - font-size: var(--ui-font-h2); - font-weight: 600; - line-height: 1.4; +@media screen and (max-width: 999px) { + .ui-h2 { + font-size: var(--ui-font-h2); + font-weight: 600; + line-height: 1.4; + } } -.ui-h3 { - font-size: var(--ui-font-h3); - font-weight: 600; - line-height: 1.4; +@media screen and (max-width: 999px) { + .ui-h3 { + font-size: var(--ui-font-h3); + font-weight: 600; + line-height: 1.4; + } } -.ui-body { - font-size: var(--ui-font-body); - line-height: 1.5; +@media screen and (max-width: 999px) { + .ui-body { + font-size: var(--ui-font-body); + line-height: 1.5; + } } -.ui-small { - font-size: var(--ui-font-small); - line-height: 1.5; +@media screen and (max-width: 999px) { + .ui-small { + font-size: var(--ui-font-small); + line-height: 1.5; + } } -.ui-caption { - font-size: var(--ui-font-caption); - line-height: 1.5; - color: var(--ui-text-muted); +@media screen and (max-width: 999px) { + .ui-caption { + font-size: var(--ui-font-caption); + line-height: 1.5; + color: var(--ui-text-muted); + } } diff --git a/projects/social_platform/src/styles/_ui-tokens.scss b/projects/social_platform/src/styles/_ui-tokens.scss index 765fa3aae..e67559647 100644 --- a/projects/social_platform/src/styles/_ui-tokens.scss +++ b/projects/social_platform/src/styles/_ui-tokens.scss @@ -18,6 +18,7 @@ --ui-radius-dialog: var(--rounded-xl); --ui-control-height: 44px; --ui-compact-sidebar-width: 157px; + --ui-mobile-entity-card-width: 260px; --ui-control-padding: 12px 16px; --ui-card-padding: 16px; --ui-dialog-padding: 24px; diff --git a/projects/social_platform/src/styles/components/_vacancy-ui.scss b/projects/social_platform/src/styles/components/_vacancy-ui.scss index 02d37e78f..185bdc471 100644 --- a/projects/social_platform/src/styles/components/_vacancy-ui.scss +++ b/projects/social_platform/src/styles/components/_vacancy-ui.scss @@ -3,15 +3,27 @@ @use "styles/ui-foundation"; @mixin surface { - @include ui-foundation.card; + @media screen and (max-width: 999px) { + @include ui-foundation.card; - min-width: 0; - padding: var(--ui-card-padding); - color: var(--black); - overflow-wrap: anywhere; - background: var(--white); - border: 1px solid var(--medium-grey-for-outline); - border-radius: var(--ui-radius-card); + min-width: 0; + padding: var(--ui-card-padding); + color: var(--black); + overflow-wrap: anywhere; + background: var(--white); + border: 1px solid var(--medium-grey-for-outline); + border-radius: var(--ui-radius-card); + } + + @media screen and (min-width: 1000px) { + min-width: 0; + padding: 20px; + color: var(--black); + overflow-wrap: anywhere; + background: var(--white); + border: 1px solid var(--medium-grey-for-outline); + border-radius: var(--rounded-lg); + } } @mixin secondary { @@ -38,7 +50,6 @@ } } -// Feature-адаптер Pattern / PageHeader; глобальный BackComponent не меняется. @mixin page-header { display: flex; flex-direction: column; @@ -71,12 +82,42 @@ } @mixin actions { - display: flex; - flex-wrap: wrap; - gap: 8px; + @media screen and (max-width: 999px) { + display: flex; + flex-wrap: wrap; + gap: 8px; + + app-button { + flex: 1 1 140px; + min-width: 0; + } + } - app-button { - flex: 1 1 140px; - min-width: 0; + @media screen and (min-width: 1000px) { + display: flex; + flex-wrap: wrap; + gap: 8px; + + app-button { + flex: 1 1 140px; + min-width: 0; + } + + ::ng-deep .button { + gap: 6px; + width: 100%; + min-height: 36px; + max-height: none; + padding: 8px 12px; + font-size: 12px; + line-height: 18px; + + @include focus; + + &.button--outline.button--red { + color: var(--black); + background: transparent; + } + } } } diff --git a/projects/ui/src/lib/components/layout/page-header/page-header.component.scss b/projects/ui/src/lib/components/layout/page-header/page-header.component.scss index 4fccfa53b..594c404d4 100644 --- a/projects/ui/src/lib/components/layout/page-header/page-header.component.scss +++ b/projects/ui/src/lib/components/layout/page-header/page-header.component.scss @@ -1,61 +1,78 @@ /** @format */ -:host { - display: block; - width: 100%; - min-width: 0; -} +@media screen and (min-width: 1000px) { + :host, + .page-header, + .page-header__heading, + .page-header__title-row { + display: contents; + } -.page-header { - display: flex; - flex-wrap: wrap; - gap: var(--ui-space-md); - align-items: center; - justify-content: space-between; - margin-bottom: var(--ui-space-lg); + .page-header__title { + display: none; + } +} - &__heading { +@media screen and (max-width: 999px) { + :host { + display: block; + width: 100%; min-width: 0; } +} - &__title-row { +@media screen and (max-width: 999px) { + .page-header { display: flex; - gap: var(--ui-space-sm); + flex-wrap: wrap; + gap: var(--ui-space-md); align-items: center; - } + justify-content: space-between; + margin-bottom: var(--ui-space-lg); - &__title { - font-size: var(--ui-font-h1); - font-weight: 600; - line-height: 1.3; - color: var(--ui-text); - overflow-wrap: anywhere; - } + &__heading { + min-width: 0; + } - &__description { - margin-top: var(--ui-space-sm); - font-size: var(--ui-font-body); - line-height: 1.5; - color: var(--ui-text-muted); - } + &__title-row { + display: flex; + gap: var(--ui-space-sm); + align-items: center; + } - &__breadcrumbs { - display: flex; - flex-wrap: wrap; - gap: var(--ui-space-sm); - margin-bottom: var(--ui-space-sm); - font-size: var(--ui-font-caption); - } + &__title { + font-size: var(--ui-font-h1); + font-weight: 600; + line-height: 1.3; + color: var(--ui-text); + overflow-wrap: anywhere; + } - &__actions { - display: flex; - flex-wrap: wrap; - gap: var(--ui-space-sm); - align-items: center; - max-width: 100%; - } + &__description { + margin-top: var(--ui-space-sm); + font-size: var(--ui-font-body); + line-height: 1.5; + color: var(--ui-text-muted); + } - &__actions:empty { - display: none; + &__breadcrumbs { + display: flex; + flex-wrap: wrap; + gap: var(--ui-space-sm); + margin-bottom: var(--ui-space-sm); + font-size: var(--ui-font-caption); + } + + &__actions { + display: flex; + flex-wrap: wrap; + gap: var(--ui-space-sm); + align-items: center; + max-width: 100%; + } + + &__actions:empty { + display: none; + } } } diff --git a/projects/ui/src/lib/components/layout/page-header/page-header.component.ts b/projects/ui/src/lib/components/layout/page-header/page-header.component.ts index 00d1abb72..31d08a3dc 100644 --- a/projects/ui/src/lib/components/layout/page-header/page-header.component.ts +++ b/projects/ui/src/lib/components/layout/page-header/page-header.component.ts @@ -1,8 +1,9 @@ /** @format */ -import { ChangeDetectionStrategy, Component, input } from "@angular/core"; +import { ChangeDetectionStrategy, Component, inject, input } from "@angular/core"; import { RouterLink } from "@angular/router"; import { BackComponent } from "../../primitives/back/back.component"; +import { DesktopLayoutService } from "../../../services/desktop-layout.service"; export interface PageBreadcrumb { label: string; @@ -28,7 +29,11 @@ export interface PageBreadcrumb { }
@if (backRoute()) {
-
@@ -43,6 +48,7 @@ export interface PageBreadcrumb {
changeDetection: ChangeDetectionStrategy.OnPush,
})
export class PageHeaderComponent {
+ protected readonly desktopLayout = inject(DesktopLayoutService).desktop;
readonly title = input.required{{ title() }}
-
-
}
-
+
diff --git a/projects/ui/src/lib/components/layout/profile-control-panel/profile-control-panel.component.scss b/projects/ui/src/lib/components/layout/profile-control-panel/profile-control-panel.component.scss
index d582e47ea..eeb01e411 100644
--- a/projects/ui/src/lib/components/layout/profile-control-panel/profile-control-panel.component.scss
+++ b/projects/ui/src/lib/components/layout/profile-control-panel/profile-control-panel.component.scss
@@ -64,7 +64,13 @@
}
i {
- color: var(--light-white);
+ @media screen and (max-width: 999px) {
+ color: var(--ui-text-muted);
+ }
+
+ @media screen and (min-width: 1000px) {
+ color: var(--light-white);
+ }
@include responsive.apply-desktop {
color: var(--dark-grey);
@@ -72,30 +78,44 @@
}
}
-@include responsive.apply-below-desktop {
- .control-panel {
- position: static;
- }
+@media screen and (max-width: 999px) {
+ @include responsive.apply-below-desktop {
+ .control-panel {
+ position: static;
+ }
- .control-panel__actions {
- gap: 0;
- margin-right: 4px;
- }
+ .control-panel__actions {
+ gap: 0;
+ margin-right: 0;
+ }
- .control-panel__action {
- display: flex;
- align-items: center;
- justify-content: center;
- min-width: 44px;
- min-height: 44px;
- }
+ .control-panel__action {
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ min-width: 44px;
+ min-height: 44px;
+ }
+
+ .control-panel__action--logout {
+ display: none;
+ }
+
+ .control-panel__profile {
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ width: 44px;
+ min-height: 44px;
+ }
- .control-panel__notifications {
- position: fixed;
- top: 64px;
- right: var(--page-gutter);
- left: var(--page-gutter);
- max-height: calc(var(--visual-viewport-height, 100dvh) - 80px);
- overflow-y: auto;
+ .control-panel__notifications {
+ position: fixed;
+ top: 64px;
+ right: var(--page-gutter);
+ left: var(--page-gutter);
+ max-height: calc(var(--visual-viewport-height, 100dvh) - 80px);
+ overflow-y: auto;
+ }
}
}
diff --git a/projects/ui/src/lib/components/layout/profile-control-panel/profile-control-panel.component.ts b/projects/ui/src/lib/components/layout/profile-control-panel/profile-control-panel.component.ts
index 80ecd205d..b6e9f1dbb 100644
--- a/projects/ui/src/lib/components/layout/profile-control-panel/profile-control-panel.component.ts
+++ b/projects/ui/src/lib/components/layout/profile-control-panel/profile-control-panel.component.ts
@@ -1,7 +1,11 @@
/** @format */
+import { DesktopLayoutService } from "../../../services/desktop-layout.service";
+/** @format */
+
import { CommonModule } from "@angular/common";
import {
+ inject,
ChangeDetectionStrategy,
Component,
Input,
@@ -18,6 +22,7 @@ import type { Invite } from "projects/social_platform/src/app/domain/invite/invi
import { RouterLink } from "@angular/router";
import { EmptyManageCardComponent } from "../empty-manage-card/empty-manage-card.component";
import { User } from "@domain/auth/user.model";
+import { ButtonDirective } from "../../primitives/button/button.directive";
/**
* Компонент панели управления профилем
@@ -48,12 +53,14 @@ import { User } from "@domain/auth/user.model";
ClickOutsideModule,
IconComponent,
EmptyManageCardComponent,
+ ButtonDirective,
],
templateUrl: "./profile-control-panel.component.html",
styleUrl: "./profile-control-panel.component.scss",
changeDetection: ChangeDetectionStrategy.OnPush,
})
export class ProfileControlPanelComponent {
+ protected readonly desktopLayout = inject(DesktopLayoutService).desktop;
/** Данные текущего пользователя */
readonly user = input.required();
diff --git a/projects/ui/src/lib/components/layout/profile-info/profile-info.component.html b/projects/ui/src/lib/components/layout/profile-info/profile-info.component.html
index c9885743e..57394a0d7 100644
--- a/projects/ui/src/lib/components/layout/profile-info/profile-info.component.html
+++ b/projects/ui/src/lib/components/layout/profile-info/profile-info.component.html
@@ -1,7 +1,7 @@
@if (user()) {
-
+
-
- @if (loader()) {
+
+ @if (loader() && desktopLayout()) {
+
- @if (hasNotifications() || hasInvites) {
-
- }
-
- @if (invites().length) {
-
- }
+ @if (desktopLayout()) {
+
+ } @else {
+
+ }
@if (showNotifications) {
+
-
+ @if (hasNotifications() || hasInvites) {
+
+ }
+
+ @if (invites().length) {
+
+ }
+
-
@@ -30,7 +52,7 @@