- Новый проект
+
-
-
- {{ feedItem().name }}
+
diff --git a/projects/social_platform/src/app/ui/pages/feed/new-project/new-project.component.scss b/projects/social_platform/src/app/ui/pages/feed/new-project/new-project.component.scss
index 26c03819b..9dda78b6c 100644
--- a/projects/social_platform/src/app/ui/pages/feed/new-project/new-project.component.scss
+++ b/projects/social_platform/src/app/ui/pages/feed/new-project/new-project.component.scss
@@ -1,74 +1,11 @@
-.card {
- display: flex;
- flex-direction: column;
- gap: 18px;
- min-height: 100%;
- padding: 24px;
- color: var(--white);
- background: var(--accent);
- border-radius: var(--rounded-xl);
-
- &__meta {
- display: flex;
- flex-wrap: wrap;
- gap: 8px;
- align-items: center;
- justify-content: space-between;
- }
-
- &__type {
- padding: 7px 12px;
- font-size: 12px;
- font-weight: 600;
- color: var(--accent);
- background: var(--white);
- border-radius: var(--rounded-xxl);
- }
-
- &__date {
- font-size: 12px;
- }
+@use "styles/feed-card";
- &__heading {
- display: flex;
- gap: 16px;
- align-items: center;
- min-width: 0;
- }
-
- &__title {
- font-size: 20px;
- font-weight: 700;
- line-height: 1.3;
- overflow-wrap: anywhere;
- }
-
- /* stylelint-disable value-no-vendor-prefix */
- &__description {
- display: -webkit-box;
- overflow: hidden;
- font-size: 14px;
- line-height: 1.5;
- overflow-wrap: anywhere;
- -webkit-box-orient: vertical;
- -webkit-line-clamp: 3;
- }
- /* stylelint-enable value-no-vendor-prefix */
-
- &__industry {
- align-self: flex-start;
- min-height: 32px;
- padding: 7px 14px;
- font-size: 14px;
- font-weight: 600;
- line-height: 18px;
- color: var(--accent);
- background: var(--white);
- border-radius: var(--rounded-xxl);
- }
+.card {
+ --feed-background: var(--accent);
+ --feed-text: var(--white);
+ --feed-secondary: var(--white);
+ --feed-cta-text: var(--accent-dark);
+ --feed-cta-background: var(--white);
- &__cta {
- align-self: flex-start;
- margin-top: auto;
- }
+ @include feed-card.layout;
}
diff --git a/projects/social_platform/src/app/ui/pages/feed/new-project/new-project.component.spec.ts b/projects/social_platform/src/app/ui/pages/feed/new-project/new-project.component.spec.ts
index 7c542ea77..16e9c260d 100644
--- a/projects/social_platform/src/app/ui/pages/feed/new-project/new-project.component.spec.ts
+++ b/projects/social_platform/src/app/ui/pages/feed/new-project/new-project.component.spec.ts
@@ -36,5 +36,7 @@ describe("NewProjectComponent", () => {
);
expect(element.querySelector(".card__industry")?.textContent?.trim()).toBe("Инженерия");
expect(element.querySelector(".card__cta")?.textContent).toContain("Перейти в проект");
+ expect(element.querySelector("a.card__cta")?.getAttribute("href")).toBe("/office/projects/5");
+ expect(element.querySelector("time")?.getAttribute("datetime")).toBe("2026-09-23T12:00:00Z");
});
});
diff --git a/projects/social_platform/src/app/ui/pages/feed/new-project/new-project.component.ts b/projects/social_platform/src/app/ui/pages/feed/new-project/new-project.component.ts
index e0c979b23..46646eef0 100644
--- a/projects/social_platform/src/app/ui/pages/feed/new-project/new-project.component.ts
+++ b/projects/social_platform/src/app/ui/pages/feed/new-project/new-project.component.ts
@@ -7,12 +7,11 @@ import { FeedProject } from "@domain/feed/feed-item.model";
import { AppRoutes } from "@api/paths/app-routes";
import { IndustryRepositoryPort } from "@domain/industry/ports/industry.repository.port";
import { AvatarComponent } from "@ui/primitives/avatar/avatar.component";
-import { ButtonComponent } from "@ui/primitives";
/** Карточка нового проекта в общей ленте. */
@Component({
selector: "app-new-project",
- imports: [RouterLink, DayjsPipe, AvatarComponent, ButtonComponent],
+ imports: [RouterLink, DayjsPipe, AvatarComponent],
templateUrl: "./new-project.component.html",
styleUrl: "./new-project.component.scss",
changeDetection: ChangeDetectionStrategy.OnPush,
diff --git a/projects/social_platform/src/app/ui/pages/feed/open-vacancy/open-vacancy.component.html b/projects/social_platform/src/app/ui/pages/feed/open-vacancy/open-vacancy.component.html
index 1a52a730f..c4ee6e578 100644
--- a/projects/social_platform/src/app/ui/pages/feed/open-vacancy/open-vacancy.component.html
+++ b/projects/social_platform/src/app/ui/pages/feed/open-vacancy/open-vacancy.component.html
@@ -1,55 +1,61 @@
-
-
{{ feedItem().name }}
+
+
-
- @if (feedItem().shortDescription) {
-
+ Проект
+ {{ feedItem().name }}
+
{{ feedItem().shortDescription }}
- } - - @if (industryRepository.getOne(feedItem().industry); as industry) { - {{ industry.name }} - } - -{{ feedItem().shortDescription }}
+ + Перейти в проект - Перейти в проект -
- Новая вакансия
+
-
- @if (feedItem().project; as project) {
-
-
- Проект / компания
- {{ project.name }}
+
+
+ @if (feedItem().project; as project) {
+
- }
-
-
+ Проект / компания
+ {{ project.name }}
- {{ feedItem().role }}
- - @if (feedItem().description) { - - } - - @if (feedItem().requiredSkills.length) { --
- @for (skill of feedItem().requiredSkills.slice(0, 5); track skill.id) {
-
- {{ skill.name }} + } +
{{ feedItem().role }}
+ +
+ @if (feedItem().requiredSkills.length) {
+
+ Подробнее о вакансии
- Подробнее о вакансии
-
diff --git a/projects/social_platform/src/app/ui/pages/feed/open-vacancy/open-vacancy.component.scss b/projects/social_platform/src/app/ui/pages/feed/open-vacancy/open-vacancy.component.scss
index 8c1d7409f..69b26fc81 100644
--- a/projects/social_platform/src/app/ui/pages/feed/open-vacancy/open-vacancy.component.scss
+++ b/projects/social_platform/src/app/ui/pages/feed/open-vacancy/open-vacancy.component.scss
@@ -1,108 +1,5 @@
-.card {
- display: flex;
- flex-direction: column;
- gap: 14px;
- min-height: 100%;
- padding: 24px;
- background: var(--light-white);
- border: 1px solid var(--medium-grey-for-outline);
- border-radius: var(--rounded-xl);
-
- &__meta {
- display: flex;
- flex-wrap: wrap;
- gap: 8px;
- align-items: center;
- justify-content: space-between;
- }
-
- &__type {
- padding: 7px 12px;
- font-size: 12px;
- font-weight: 600;
- color: var(--accent);
- background: var(--white);
- border: 1px solid var(--accent);
- border-radius: var(--rounded-xxl);
- }
-
- &__date,
- &__eyebrow {
- font-size: 12px;
- color: var(--dark-grey);
- }
-
- &__source {
- display: flex;
- gap: 12px;
- align-items: center;
- min-width: 0;
- }
-
- &__source-text {
- display: flex;
- flex-direction: column;
- gap: 4px;
- min-width: 0;
-
- a {
- font-size: 14px;
- font-weight: 600;
- color: var(--black);
- overflow-wrap: anywhere;
- }
- }
+@use "styles/feed-card";
- &__title {
- font-size: 20px;
- font-weight: 700;
- line-height: 1.3;
- color: var(--black);
- overflow-wrap: anywhere;
- }
-
- /* stylelint-disable value-no-vendor-prefix */
- &__description {
- display: -webkit-box;
- overflow: hidden;
- font-size: 14px;
- line-height: 1.5;
- color: var(--grey-for-text);
- overflow-wrap: anywhere;
- -webkit-box-orient: vertical;
- -webkit-line-clamp: 3;
- }
- /* stylelint-enable value-no-vendor-prefix */
-
- &__skills {
- display: flex;
- flex-wrap: wrap;
- gap: 8px;
- }
-
- &__skill {
- padding: 6px 10px;
- font-size: 12px;
- color: var(--accent);
- background: var(--white);
- border: 1px solid var(--medium-grey-for-outline);
- border-radius: var(--rounded-xxl);
- }
-
- &__industry {
- align-self: flex-start;
- min-height: 32px;
- padding: 7px 14px;
- font-size: 14px;
- font-weight: 600;
- line-height: 18px;
- color: var(--white);
- background: var(--green);
- border-radius: var(--rounded-xxl);
- }
-
- &__cta {
- align-self: flex-start;
- margin-top: auto;
- }
+.card {
+ @include feed-card.layout;
}
diff --git a/projects/social_platform/src/app/ui/pages/feed/open-vacancy/open-vacancy.component.spec.ts b/projects/social_platform/src/app/ui/pages/feed/open-vacancy/open-vacancy.component.spec.ts
index 04cac7959..8c147c26e 100644
--- a/projects/social_platform/src/app/ui/pages/feed/open-vacancy/open-vacancy.component.spec.ts
+++ b/projects/social_platform/src/app/ui/pages/feed/open-vacancy/open-vacancy.component.spec.ts
@@ -41,5 +41,25 @@ describe("OpenVacancyComponent", () => {
).toEqual(["Angular", "TypeScript"]);
expect(element.querySelector(".card__industry")?.textContent?.trim()).toBe("IT");
expect(element.querySelector(".card__cta")?.textContent).toContain("Подробнее о вакансии");
+ expect(element.querySelector("a.card__cta")?.getAttribute("href")).toBe("/office/vacancies/7");
+ expect(element.querySelector("time")?.getAttribute("datetime")).toBe("2026-09-23T12:00:00Z");
+
+ fixture.componentRef.setInput("feedItem", {
+ ...fixture.componentInstance.feedItem(),
+ requiredSkills: ["QA", "Postman", "API", "SQL", "Git", "Аналитика"].map((name, id) => ({
+ id,
+ name,
+ })),
+ });
+ fixture.detectChanges();
+ expect(
+ Array.from(element.querySelectorAll(".card__skills li")).map(node =>
+ node.textContent?.trim(),
+ ),
+ ).toEqual(["QA", "Postman", "API", "+3"]);
+ expect(element.querySelector(".card__skills li:last-child")?.getAttribute("aria-label")).toBe(
+ "Ещё навыков: 3",
+ );
+ expect(fixture.componentInstance.feedItem().requiredSkills).toHaveLength(6);
});
});
diff --git a/projects/social_platform/src/app/ui/pages/feed/open-vacancy/open-vacancy.component.ts b/projects/social_platform/src/app/ui/pages/feed/open-vacancy/open-vacancy.component.ts
index d276f6367..512e4bb9d 100644
--- a/projects/social_platform/src/app/ui/pages/feed/open-vacancy/open-vacancy.component.ts
+++ b/projects/social_platform/src/app/ui/pages/feed/open-vacancy/open-vacancy.component.ts
@@ -7,19 +7,11 @@ import { Vacancy } from "@domain/vacancy/vacancy.model";
import { AppRoutes } from "@api/paths/app-routes";
import { IndustryRepositoryPort } from "@domain/industry/ports/industry.repository.port";
import { AvatarComponent } from "@ui/primitives/avatar/avatar.component";
-import { ButtonComponent } from "@ui/primitives";
/** Карточка вакансии в ленте: источник, роль, описание, навыки и переход к вакансии. */
@Component({
selector: "app-open-vacancy",
- imports: [
- RouterLink,
- DayjsPipe,
- ParseLinksPipe,
- ParseBreaksPipe,
- AvatarComponent,
- ButtonComponent,
- ],
+ imports: [RouterLink, DayjsPipe, ParseLinksPipe, ParseBreaksPipe, AvatarComponent],
templateUrl: "./open-vacancy.component.html",
styleUrl: "./open-vacancy.component.scss",
changeDetection: ChangeDetectionStrategy.OnPush,
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 2dfb9185a..9d6772d95 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
@@ -32,23 +32,26 @@
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 8a503fce5..ac06a6af0 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
@@ -75,19 +75,24 @@
.filter {
display: grid;
- grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
+ grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 30px 12px;
padding-top: 25px;
+ @include responsive.apply-desktop {
+ grid-template-columns: repeat(6, minmax(0, 1fr));
+ }
+
&__option {
position: relative;
- display: flex;
- flex-direction: column;
+ display: grid;
+ grid-template-rows: 32px 18px;
+ row-gap: 4px;
align-items: center;
- justify-content: center;
+ justify-items: center;
min-width: 0;
- min-height: 88px;
- padding: 36px 10px 12px;
+ height: 104px;
+ padding: 36px 6px 12px;
cursor: pointer;
background-color: var(--light-white);
border: 0.5px solid var(--medium-grey-for-outline);
@@ -109,7 +114,7 @@
background-color: var(--accent);
}
- p {
+ .filter__title {
color: var(--accent);
}
}
@@ -133,17 +138,26 @@
}
}
- p {
- color: var(--grey-for-text);
- text-align: center;
+ &:focus-visible {
+ outline: 2px solid var(--accent-dark);
+ outline-offset: 3px;
}
}
+ // Одна двухстрочная область названия задаёт общую базовую линию всех счётчиков.
+ &__title {
+ font-size: 11px;
+ line-height: 16px;
+ color: var(--grey-for-text);
+ text-align: center;
+ }
+
&__count {
display: block;
- margin-top: 4px;
font-size: 14px;
font-weight: 600;
+ font-variant-numeric: tabular-nums;
+ line-height: 18px;
color: var(--accent);
}
diff --git a/projects/social_platform/src/app/ui/widgets/feed-filter/feed-filter.component.spec.ts b/projects/social_platform/src/app/ui/widgets/feed-filter/feed-filter.component.spec.ts
index 9f89fcca4..eecc17119 100644
--- a/projects/social_platform/src/app/ui/widgets/feed-filter/feed-filter.component.spec.ts
+++ b/projects/social_platform/src/app/ui/widgets/feed-filter/feed-filter.component.spec.ts
@@ -43,5 +43,21 @@ describe("FeedComponent", () => {
expect(
options.map(option => option.querySelector(".filter__count")?.textContent?.trim()),
).toEqual(["12", "5", "3", "4", "0", "0"]);
+ for (const option of options) {
+ expect(option.tagName).toBe("BUTTON");
+ expect(Array.from(option.children).map(child => child.className)).toEqual([
+ "filter__option--icon",
+ "filter__title",
+ "filter__count",
+ ]);
+ expect(option.querySelector(".filter__option--icon")?.getAttribute("aria-hidden")).toBe(
+ "true",
+ );
+ }
+ expect((options[5] as HTMLButtonElement).disabled).toBe(true);
+ expect(options[0].getAttribute("aria-pressed")).toBe("true");
+ const setFilter = vi.spyOn(component, "setFilter");
+ options[1].click();
+ expect(setFilter).toHaveBeenCalledExactlyOnceWith("project");
});
});
diff --git a/projects/social_platform/src/app/ui/widgets/news-card/carousel/carousel.component.scss b/projects/social_platform/src/app/ui/widgets/news-card/carousel/carousel.component.scss
index 162f8bb53..cd3db50b1 100644
--- a/projects/social_platform/src/app/ui/widgets/news-card/carousel/carousel.component.scss
+++ b/projects/social_platform/src/app/ui/widgets/news-card/carousel/carousel.component.scss
@@ -6,6 +6,9 @@
align-items: center;
justify-content: center;
+ // Лента задаёт высоту preview; остальные страницы сохраняют естественный размер изображения.
+ height: var(--carousel-height, auto);
+
&__image-wrapper {
position: relative;
width: 100%;
@@ -15,6 +18,7 @@
img {
display: block;
width: 100%;
+ height: var(--carousel-height, auto);
border-radius: var(--rounded-xl);
object-fit: cover;
}
diff --git a/projects/social_platform/src/app/ui/widgets/news-card/news-card.component.html b/projects/social_platform/src/app/ui/widgets/news-card/news-card.component.html
index 2c7782c11..d346074b9 100644
--- a/projects/social_platform/src/app/ui/widgets/news-card/news-card.component.html
+++ b/projects/social_platform/src/app/ui/widgets/news-card/news-card.component.html
@@ -1,176 +1,301 @@
-
-
+ @for (skill of feedItem().requiredSkills.slice(0, 3); track skill.id) {
+
- + {{ skill.name }} + + } + @if (feedItem().requiredSkills.length > 3) { +
- + +{{ feedItem().requiredSkills.length - 3 }} + + } +
@for (filterItem of feedFilterOptions; track $index) {
-
-
-
+
}
{{ filterItem.name }}
+ + {{ filterItem.name }} {{ categoryCount(filterItem.value) }} -
- @if (feedType()) {
-
-
- {{ feedType() === "people" ? "Новости людей" : "Новости проекта" }}
-
-
+@if (feedType() && !editMode) {
+
+
- }
-
-
+
![]()
-
-
{{ feedItem().name | truncate: 30 }}
- @if (!feedType()) {
-
- {{ feedItem().datetimeCreated | dayjs: "format" : "DD.MM.YYYY" }}
-
- }
+
+ {{ feedType() === "people" ? "Автор" : "Проект" }}
+ {{
+ feedItem().name
+ }}
-
- @if (isOwner()) {
-
-
-
+ @if (isOwner()) {
+
- @if (menuOpen) {
-
+ }
+
+ + {{ feedText().headline }} +
+ + + {{ + feedType() === "people" ? "Перейти в профиль" : "Перейти в проект" + }} + +} @else { +
+ @if (feedType()) {
+
}
-
- @if (feedItem().text) {
-
- @if (!editMode) {
- @if (feedType()) {
-
- }
- @defer (when editMode) {
- {{ feedText().headline }}
- @if (feedText().summary) { +
+
+ ![]()
+
+ @if (feedItem().text) {
+
+
+
+ @if (isOwner()) {
+
+ }
+ {{ feedItem().name | truncate: 30 }}
+ @if (!feedType()) {
+
+ {{ feedItem().datetimeCreated | dayjs: "format" : "DD.MM.YYYY" }}
+
+ }
+
+ @if (!editMode) {
+ @if (feedType()) {
+
+ }
+ @defer (when editMode) {
+ {{ feedText().headline }}
+ @if (feedText().summary) { + + } + } @else { } } @else { - + @if (editForm.get("text"); as text) { +-
+ @for (f of imagesEditList; track f.id) {
+
-
+ @for (f of filesEditList; track f.id) {
+
+ {{ readFullDescription() ? "скрыть" : "подробнее" }}
+
+ }
+ @if (!editMode) {
+
+
+ }
+ @if (!editMode && filesViewList.length) {
+
+ @for (f of filesViewList; track $index) {
+
+ }
+ @if (feedType() && !editMode) {
+ @if (feedIndustryId(); as industryId) {
+ @if (industryRepository.getOne(industryId); as industry) {
+ {{ industry.name }}
}
}
- -
- @for (f of imagesEditList; track f.id) {
-
-
- @for (f of filesEditList; track f.id) {
-
- {{ readFullDescription() ? "скрыть" : "подробнее" }}
-
- }
- @if (!editMode) {
-
-
- }
- @if (!editMode && filesViewList.length) {
-
- @for (f of filesViewList; track $index) {
-
- }
- @if (feedType() && !editMode) {
- @if (feedIndustryId(); as industryId) {
- @if (industryRepository.getOne(industryId); as industry) {
- {{ industry.name }}
- }
+
+ {{ feedType() === "people" ? "Перейти в профиль" : "Перейти в проект" }}
+
}
-
- {{ feedType() === "people" ? "Перейти в профиль" : "Перейти в проект" }}
-
- }
- @if (!editMode) {
-