From 9aa3903d4b9e2a5b32ff9ac4e6a6274b66faf945 Mon Sep 17 00:00:00 2001 From: Bugclerk Date: Thu, 26 Sep 2024 10:23:13 +0000 Subject: [PATCH 1/2] Empty commit to create PR on github. You should reset it From dc050e537f29c9910e9a729534da7d0643912fd3 Mon Sep 17 00:00:00 2001 From: Alex Karpov Date: Thu, 26 Sep 2024 13:22:55 +0300 Subject: [PATCH 2/2] NAS-131272: PR Update --- .../global-search-results.component.scss | 10 ++-------- .../components/ix-table/ix-table.component.scss | 11 +++-------- .../topbar/user-menu/user-menu.component.scss | 10 ++-------- .../available-apps/app-card/app-card.component.scss | 11 +++-------- .../app-info-card/app-info-card.component.html | 2 +- .../app-info-card/app-info-card.component.scss | 5 +++++ .../installed-apps/app-row/app-row.component.scss | 5 +++++ .../components/dashboard/dashboard.component.scss | 10 ++-------- src/assets/styles/mixins/text.scss | 10 ++++++++++ src/assets/styles/other/_material-reduction.scss | 11 ++--------- 10 files changed, 35 insertions(+), 50 deletions(-) create mode 100644 src/assets/styles/mixins/text.scss diff --git a/src/app/modules/global-search/components/global-search-results/global-search-results.component.scss b/src/app/modules/global-search/components/global-search-results/global-search-results.component.scss index 8c3b11b9ff0..47a77277d55 100644 --- a/src/app/modules/global-search/components/global-search-results/global-search-results.component.scss +++ b/src/app/modules/global-search/components/global-search-results/global-search-results.component.scss @@ -1,4 +1,5 @@ @import 'scss-imports/cssvars'; +@import 'mixins/text'; :host { background-color: var(--bg2); @@ -110,16 +111,9 @@ } .title { - -webkit-box-orient: vertical; + @include line-clamp(2); color: var(--fg1); - /* stylelint-disable-next-line */ - display: -webkit-inline-box; font-size: 16px; - -webkit-line-clamp: 2; - line-clamp: 2; - overflow: hidden; - white-space: normal; - word-break: break-word; } } } diff --git a/src/app/modules/ix-table/components/ix-table/ix-table.component.scss b/src/app/modules/ix-table/components/ix-table/ix-table.component.scss index 04fdc193463..31c8a1f45c5 100644 --- a/src/app/modules/ix-table/components/ix-table/ix-table.component.scss +++ b/src/app/modules/ix-table/components/ix-table/ix-table.component.scss @@ -1,3 +1,5 @@ +@import 'mixins/text'; + :host { display: block; max-width: 100%; @@ -16,14 +18,7 @@ table { tr > th ng-component, tr > td span.mat-mdc-tooltip-trigger, tr > td div.mat-mdc-tooltip-trigger span { - -webkit-box-orient: vertical; - /* stylelint-disable-next-line */ - display: -webkit-inline-box; - -webkit-line-clamp: 2; - line-clamp: 2; + @include line-clamp(2); margin: 0 0 -5px; - overflow: hidden; - white-space: normal; - word-break: break-word; } } diff --git a/src/app/modules/layout/components/topbar/user-menu/user-menu.component.scss b/src/app/modules/layout/components/topbar/user-menu/user-menu.component.scss index 8725fd36554..07d91182634 100644 --- a/src/app/modules/layout/components/topbar/user-menu/user-menu.component.scss +++ b/src/app/modules/layout/components/topbar/user-menu/user-menu.component.scss @@ -1,4 +1,5 @@ @import 'scss-imports/cssvars'; +@import 'mixins/text'; .user-menu-wrapper { align-items: center; @@ -11,18 +12,11 @@ } .username { - -webkit-box-orient: vertical; + @include line-clamp(2); cursor: pointer; - /* stylelint-disable-next-line */ - display: -webkit-inline-box; font-size: 14px; - -webkit-line-clamp: 2; - line-clamp: 2; margin-right: 0.5rem; max-width: 200px; - overflow: hidden; - white-space: normal; - word-break: break-all; @media(max-width: $breakpoint-md) { display: none; diff --git a/src/app/pages/apps/components/available-apps/app-card/app-card.component.scss b/src/app/pages/apps/components/available-apps/app-card/app-card.component.scss index 607391bebdb..138ee26f3f9 100644 --- a/src/app/pages/apps/components/available-apps/app-card/app-card.component.scss +++ b/src/app/pages/apps/components/available-apps/app-card/app-card.component.scss @@ -1,3 +1,5 @@ +@import 'mixins/text'; + :host { background-color: var(--bg2); color: var(--fg2); @@ -71,17 +73,10 @@ } .description { - -webkit-box-orient: vertical; - /* stylelint-disable-next-line */ - display: -webkit-inline-box; + @include line-clamp(4); font-size: 1.2em; - -webkit-line-clamp: 4; - line-clamp: 4; line-height: 1.2em; margin-bottom: 0; - overflow: hidden; - white-space: normal; - word-break: break-word; } .meta { diff --git a/src/app/pages/apps/components/installed-apps/app-info-card/app-info-card.component.html b/src/app/pages/apps/components/installed-apps/app-info-card/app-info-card.component.html index e2278aa13b6..00836876737 100644 --- a/src/app/pages/apps/components/installed-apps/app-info-card/app-info-card.component.html +++ b/src/app/pages/apps/components/installed-apps/app-info-card/app-info-card.component.html @@ -34,7 +34,7 @@

{{ 'Name' | translate }}:
- + {{ app()?.name | orNotAvailable }}
diff --git a/src/app/pages/apps/components/installed-apps/app-info-card/app-info-card.component.scss b/src/app/pages/apps/components/installed-apps/app-info-card/app-info-card.component.scss index c17c6a83457..1c407e22170 100644 --- a/src/app/pages/apps/components/installed-apps/app-info-card/app-info-card.component.scss +++ b/src/app/pages/apps/components/installed-apps/app-info-card/app-info-card.component.scss @@ -33,6 +33,11 @@ .details-item { a.value { margin-left: 0; + + &.app-name { + white-space: normal; + word-break: break-word; + } } &.sources { diff --git a/src/app/pages/apps/components/installed-apps/app-row/app-row.component.scss b/src/app/pages/apps/components/installed-apps/app-row/app-row.component.scss index cc57a3a4518..98e1c4221c0 100644 --- a/src/app/pages/apps/components/installed-apps/app-row/app-row.component.scss +++ b/src/app/pages/apps/components/installed-apps/app-row/app-row.component.scss @@ -1,4 +1,5 @@ @import 'scss-imports/variables'; +@import 'mixins/text'; :host { align-items: center; @@ -103,6 +104,10 @@ margin: 1px; padding-right: 15px; } + + .app-name { + @include line-clamp(2); + } } .cell-update { diff --git a/src/app/pages/dashboard/components/dashboard/dashboard.component.scss b/src/app/pages/dashboard/components/dashboard/dashboard.component.scss index 57f771d06a3..fbb253d728d 100644 --- a/src/app/pages/dashboard/components/dashboard/dashboard.component.scss +++ b/src/app/pages/dashboard/components/dashboard/dashboard.component.scss @@ -1,4 +1,5 @@ @import 'scss-imports/cssvars'; +@import 'mixins/text'; @import '../../dashboard-variables'; :host ::ng-deep { @@ -92,15 +93,8 @@ mat-card-content .header h3, .slot .wrapper h3 { @media(max-width: 767px) { - -webkit-box-orient: vertical; - /* stylelint-disable-next-line */ - display: -webkit-inline-box; + @include line-clamp(1); font-size: 20px; - -webkit-line-clamp: 1; - line-clamp: 1; - overflow: hidden; - white-space: normal; - word-break: break-word; } } diff --git a/src/assets/styles/mixins/text.scss b/src/assets/styles/mixins/text.scss new file mode 100644 index 00000000000..f0d04919723 --- /dev/null +++ b/src/assets/styles/mixins/text.scss @@ -0,0 +1,10 @@ +@mixin line-clamp($lines: 2) { + -webkit-box-orient: vertical; + /* stylelint-disable-next-line */ + display: -webkit-inline-box; + -webkit-line-clamp: #{$lines}; + line-clamp: #{$lines}; + overflow: hidden; + white-space: normal; + word-break: break-word; +} diff --git a/src/assets/styles/other/_material-reduction.scss b/src/assets/styles/other/_material-reduction.scss index a10f8a8df0f..cb287337d76 100644 --- a/src/assets/styles/other/_material-reduction.scss +++ b/src/assets/styles/other/_material-reduction.scss @@ -1,4 +1,5 @@ @import 'scss-imports/cssvars'; +@import 'mixins/text'; @import 'mixins/animations'; /* TYPOGRAPHY */ @@ -395,16 +396,8 @@ body .mdc-card__actions, display: flex; > a { - -webkit-box-orient: vertical; - /* stylelint-disable-next-line */ - display: -webkit-inline-box; - -webkit-line-clamp: 2; - line-clamp: 2; + @include line-clamp(2); max-width: 75%; - overflow: hidden; - text-overflow: ellipsis; - white-space: normal; - word-break: break-word; } }