From 0561c1647c4717e0d40b395c576d8335f019134b Mon Sep 17 00:00:00 2001 From: Giddh's Black Tiger Date: Wed, 1 Apr 2026 13:40:40 +0530 Subject: [PATCH 1/2] refactor: remove mat-card wrappers from tables and unused CSS variable - Remove mat-card and mat-card-content wrappers from billable metrics, plans, and taxes tables - Remove unused --custom-mat-form-field-height CSS variable from widget styles - Simplify table markup by using direct table-scroll divs instead of card containers --- apps/36-blocks-widget/src/styles.scss | 2 - .../create-feature.component.html | 445 ++++++++---------- .../features/feature/feature.component.html | 220 ++++----- .../src/app/logs/log/log.component.html | 213 +++++---- .../management/management.component.html | 299 ++++++------ .../src/app/users/user/user.component.html | 291 ++++++------ .../assets/scss/base/_default-variables.scss | 3 + apps/shared/scss/component/_table.scss | 4 + .../mat-paginator-goto.component.scss | 18 + .../src/lib/no-record-found.component.html | 2 +- 10 files changed, 723 insertions(+), 774 deletions(-) diff --git a/apps/36-blocks-widget/src/styles.scss b/apps/36-blocks-widget/src/styles.scss index 70347989..2efc3bc5 100644 --- a/apps/36-blocks-widget/src/styles.scss +++ b/apps/36-blocks-widget/src/styles.scss @@ -26,8 +26,6 @@ --font-size-28: 28px; --font-size-30: 30px; --font-size-36: 36px; - - --custom-mat-form-field-height: 48px; } /* You can add global styles to this file, and also import other style files */ diff --git a/apps/36-blocks/src/app/features/create-feature/create-feature.component.html b/apps/36-blocks/src/app/features/create-feature/create-feature.component.html index 0fc04aac..f5da9eea 100644 --- a/apps/36-blocks/src/app/features/create-feature/create-feature.component.html +++ b/apps/36-blocks/src/app/features/create-feature/create-feature.component.html @@ -1387,85 +1387,78 @@
Billable Metrics / Items
- - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
Name - {{ element.name }} - Code -
- {{ element.code }} - -
- 		Type - - {{ element.recurring ? 'Recurring' : 'Metered' }} - - Aggregation - - {{ getAggregationLabel(element?.aggregation_type) }} - - Action -
- - -
-
- -
-
- - +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Name + {{ element.name }} + Code +
+ {{ element.code }} + +
+ 		Type + + {{ element.recurring ? 'Recurring' : 'Metered' }} + + Aggregation + + {{ getAggregationLabel(element?.aggregation_type) }} + + Action +
+ + +
+
+ +
+
@@ -1622,113 +1615,96 @@
Created Plans
} - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
Name - {{ element.name }} - Code -
- {{ element.code }} - -
- 		Billing Period - - {{ element.interval }} - - Price - {{ element.amount_cents / 100 }} - Currency - - {{ element.amount_currency }} - - Status - - {{ getAggregationLabel(element?.aggregation_type) }} - - Action -
- - -
-
- -
-
- - +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Name + {{ element.name }} + Code +
+ {{ element.code }} + +
+ 		Billing Period + + {{ element.interval }} + + Price + {{ element.amount_cents / 100 }} + Currency + + {{ element.amount_currency }} + + Status + + {{ getAggregationLabel(element?.aggregation_type) }} + + Action +
+ + +
+
+ +
+
@@ -1741,59 +1717,50 @@
Taxes
- - -
- - - - - - - - - - - - - - - - - - - - - - -
Name - {{ tax.name }} - Code - {{ tax.code }} - Rate (%) - {{ tax.rate }}% - Action -
- -
-
- -
-
- - +
+ + + + + + + + + + + + + + + + + + + + + + +
Name + {{ tax.name }} + Code + {{ tax.code }} + Rate (%) + {{ tax.rate }}% + Action +
+ +
+
+ +
+
diff --git a/apps/36-blocks/src/app/features/feature/feature.component.html b/apps/36-blocks/src/app/features/feature/feature.component.html index f3f59f57..c46823c7 100644 --- a/apps/36-blocks/src/app/features/feature/feature.component.html +++ b/apps/36-blocks/src/app/features/feature/feature.component.html @@ -41,128 +41,116 @@

Blocks

resource allocation, and a user-friendly dashboard for easy configuration.

} @if ((hasSomeFeatures$ | async) === true) { - - -
- - - - - - +
+
Name - @if (!loading.dataLoading) { - {{ element.name }} - } @else { - - } -
+ + + + + - - - - - + + + + + - - - - - + + + + + - - - - - + + + + + - - - - - + + + + + - - + + - - - -
Name + @if (!loading.dataLoading) { + {{ element.name }} + } @else { + + } + Reference Id - @if (!loading.dataLoading) { -
- - {{ - element.reference_id?.length > 15 - ? (element.reference_id | slice: 0:10) + - '...' + - (element.reference_id | slice: -5) - : element.reference_id - }} - - -
- } @else { - - } - 		Reference Id + @if (!loading.dataLoading) { +
+ + {{ + element.reference_id?.length > 15 + ? (element.reference_id | slice: 0:10) + '...' + (element.reference_id | slice: -5) + : element.reference_id + }} + + +
+ } @else { + + } + 		Method - @if (!loading.dataLoading) { @if (element.method?.name) { - {{ element.method?.name }} - } } @else { - - } - Method + @if (!loading.dataLoading) { @if (element.method?.name) { + {{ element.method?.name }} + } } @else { + + } + Type - @if (!loading.dataLoading) { @if (element.feature?.name) { - {{ element.feature?.name }} - } } @else { - - } - Type + @if (!loading.dataLoading) { @if (element.feature?.name) { + {{ element.feature?.name }} + } } @else { + + } + - @if (!loading.dataLoading) { -
- -
- } - 		+ @if (!loading.dataLoading) { +
+ +
+ } +
- -
-
- - - + + + + + + + + } } diff --git a/apps/36-blocks/src/app/logs/log/log.component.html b/apps/36-blocks/src/app/logs/log/log.component.html index d484f343..0fb5be0b 100644 --- a/apps/36-blocks/src/app/logs/log/log.component.html +++ b/apps/36-blocks/src/app/logs/log/log.component.html @@ -181,120 +181,117 @@ - - -
- - - - - - - - - - - +
+
Date/Time -
- {{ element?.created_at | date: 'd MMM y' }} - {{ element?.created_at | date: 'shortTime' }} -
- 		Project -
- {{ element.project_name }} - {{ element.environment_name }} -
-
+ + + + + - - - - - + + + + + - - - - - + + + + + - - - - - + + + + + - - - - - + + + + + - - - - - + + + + + - - + + + + + - - - -
Date/Time +
+ {{ element?.created_at | date: 'd MMM y' }} + {{ element?.created_at | date: 'shortTime' }} +
+ 		User IP - {{ element.user_ip }} - Project +
+ {{ element.project_name }} + {{ element.environment_name }} +
+ 		Endpoint - {{ element.endpoint }} - User IP + {{ element.user_ip }} + Method - @if (element.request_type) { - {{ element.request_type }} - } - Endpoint + {{ element.endpoint }} + Status - @if (element.status_code) { - {{ element.status_code }} - } - Method + @if (element.request_type) { + {{ element.request_type }} + } + Response time - @if (element.response_time != null) { - {{ element.response_time }}ms - } - Status + @if (element.status_code) { + {{ element.status_code }} + } +
Response time + @if (element.response_time != null) { + {{ element.response_time }}ms + } +
- -
-
- - - + + + + + + + + + + + diff --git a/apps/36-blocks/src/app/users/management/management.component.html b/apps/36-blocks/src/app/users/management/management.component.html index 4b794a2a..049e4cf2 100644 --- a/apps/36-blocks/src/app/users/management/management.component.html +++ b/apps/36-blocks/src/app/users/management/management.component.html @@ -47,97 +47,92 @@ Add Role - - -
- - - - - - - - - - - +
+
Role - {{ element.role }} - Permissions -
- @for (permission of element.permissionsList; track permission.name) { - {{ permission.name }} - } -
-
+ + + + + + + + + + + - - - - + - + Delete + + + + + - - + + - - - -
Role + {{ element.role }} + Permissions +
+ @for (permission of element.permissionsList; track permission.name) { + {{ permission.name }} + } +
+ 		-
- + +
+
+ + - - + + + - -
-
- -
-
- - - + + + + + + + + } @@ -156,81 +151,71 @@ Add Permission - - -
- - - - - - - - - - - +
+
Permission -

{{ element.name }}

- @if (element.description) { -

- {{ element.description }} -

- } - 		-
- - -
-
+ + + + + + + + + + + - - + + - - - -
Permission +

{{ element.name }}

+ @if (element.description) { +

+ {{ element.description }} +

+ } + 		+
+ + +
+
- -
-
- - - + + + + + + + + } diff --git a/apps/36-blocks/src/app/users/user/user.component.html b/apps/36-blocks/src/app/users/user/user.component.html index fe2609c9..018fc47b 100644 --- a/apps/36-blocks/src/app/users/user/user.component.html +++ b/apps/36-blocks/src/app/users/user/user.component.html @@ -63,165 +63,154 @@ - - -
- - - - - - +
+
Name - @if (!loading.dataLoading) { - {{ element.name }} - } @else { - - } -
+ + + + + - - - - - + + + + + - - - - - + + + + + - - - - - + + + + + - - - - - + + + + + - - - - - + + + + + - - - - - + + + + + - - + + - - - -
Name + @if (!loading.dataLoading) { + {{ element.name }} + } @else { + + } + Email - @if (!loading.dataLoading) { - {{ element.email }} - } @else { - - } - Email + @if (!loading.dataLoading) { + {{ element.email }} + } @else { + + } + Phone Number - @if (!loading.dataLoading) { - {{ element.mobile ?? '-' }} - } @else { - - } - Phone Number + @if (!loading.dataLoading) { + {{ element.mobile ?? '-' }} + } @else { + + } + User ID - @if (!loading.dataLoading) { -
- - {{ - element?.id?.length > 15 - ? (element?.id | slice: 0:10) + '...' + (element?.id | slice: -5) - : element?.id - }} - - -
- } @else { - - } - 		User ID + @if (!loading.dataLoading) { +
+ + {{ + element?.id?.length > 15 + ? (element?.id | slice: 0:10) + '...' + (element?.id | slice: -5) + : element?.id + }} + + +
+ } @else { + + } + 		Block Name - @if (!loading.dataLoading) { @if (element?.feature_configuration?.name) { - {{ element.feature_configuration.name }} - } @else { - - - } } @else { - - } - Block Name + @if (!loading.dataLoading) { @if (element?.feature_configuration?.name) { + {{ element.feature_configuration.name }} + } @else { + - + } } @else { + + } + Last Login - @if (!loading.dataLoading) { @if (element?.last_login_at) { -
- {{ - element.last_login_at | date: 'd MMM y' - }} - {{ - element.last_login_at | date: 'mediumTime' - }} -
- } @else { - - - } } @else { - - } - 		Last Login + @if (!loading.dataLoading) { @if (element?.last_login_at) { +
+ {{ element.last_login_at | date: 'd MMM y' }} + {{ + element.last_login_at | date: 'mediumTime' + }} +
+ } @else { + - + } } @else { + + } + 		Created At - @if (!loading.dataLoading) { @if (element?.created_at) { -
- {{ - element.created_at | date: 'd MMM y' - }} - {{ - element.created_at | date: 'mediumTime' - }} -
- } @else { - - - } } @else { - - } - 		Created At + @if (!loading.dataLoading) { @if (element?.created_at) { +
+ {{ element.created_at | date: 'd MMM y' }} + {{ + element.created_at | date: 'mediumTime' + }} +
+ } @else { + - + } } @else { + + } +
- -
-
- - - + + + + + + + + diff --git a/apps/36-blocks/src/assets/scss/base/_default-variables.scss b/apps/36-blocks/src/assets/scss/base/_default-variables.scss index bcd4e63a..eb0bf4cb 100644 --- a/apps/36-blocks/src/assets/scss/base/_default-variables.scss +++ b/apps/36-blocks/src/assets/scss/base/_default-variables.scss @@ -2,6 +2,9 @@ // Border --border-common-radius-4: 4px; + // Form field + --custom-mat-form-field-height: 48px; + // Common color --color-common-green: #008000; --color-common-scrollbar: 0, 0, 0; diff --git a/apps/shared/scss/component/_table.scss b/apps/shared/scss/component/_table.scss index b05c403a..21990d9a 100644 --- a/apps/shared/scss/component/_table.scss +++ b/apps/shared/scss/component/_table.scss @@ -1,6 +1,10 @@ .table-scroll { overflow-x: auto; width: 100%; + @media screen and (min-width: 768px) { + border: 1px solid var(--color-common-border); + border-radius: var(--border-common-radius-4) var(--border-common-radius-4) 0 0; + } } .default-table { diff --git a/libs/ui/mat-paginator-goto/src/lib/mat-paginator-goto/mat-paginator-goto.component.scss b/libs/ui/mat-paginator-goto/src/lib/mat-paginator-goto/mat-paginator-goto.component.scss index e69de29b..17cadd92 100755 --- a/libs/ui/mat-paginator-goto/src/lib/mat-paginator-goto/mat-paginator-goto.component.scss +++ b/libs/ui/mat-paginator-goto/src/lib/mat-paginator-goto/mat-paginator-goto.component.scss @@ -0,0 +1,18 @@ +$border: 1px solid var(--color-common-border); +$border-radius: 0 0 var(--border-common-radius-4) var(--border-common-radius-4); + +:host ::ng-deep .go-to-pagination { + border-left: $border; + border-right: $border; + border-bottom: $border; + border-radius: $border-radius; + + @media screen and (max-width: 768px) { + border-top: $border; + padding-block: 10px; + } + + .mat-mdc-paginator { + border-radius: $border-radius; + } +} diff --git a/libs/ui/no-record-found/src/lib/no-record-found.component.html b/libs/ui/no-record-found/src/lib/no-record-found.component.html index 8d5fff6b..64d06562 100644 --- a/libs/ui/no-record-found/src/lib/no-record-found.component.html +++ b/libs/ui/no-record-found/src/lib/no-record-found.component.html @@ -1,4 +1,4 @@ - +
Date: Wed, 1 Apr 2026 16:27:37 +0530 Subject: [PATCH 2/2] refactor: improve sidebar layout and client switcher UI - Add height: 100% to host elements in feature, log, and user management components for proper layout - Simplify client switcher menu by removing virtual scroll for better performance - Increase client list page size from 25 to 200 items - Add "Active" badge to current client in switcher dropdown - Refactor user profile section to use ng-template for display picture reusability - Improve responsive behavior of sidebar elements with conditional class bindings - Update client switcher to only show dropdown when multiple --- .../create-feature.component.scss | 4 + .../features/feature/feature.component.html | 2 +- .../features/feature/feature.component.scss | 4 + .../src/app/layout/layout.component.html | 113 +++-- .../src/app/layout/layout.component.ts | 13 +- .../src/app/logs/log/log.component.html | 2 +- .../src/app/logs/log/log.component.scss | 4 + .../src/app/ngrx/effects/root/root.effect.ts | 10 + .../management/management.component.scss | 4 + .../src/app/users/user/user.component.html | 409 +++++++++--------- .../src/app/users/user/user.component.scss | 4 + apps/shared/scss/_imports.scss | 3 +- apps/shared/scss/component/_table.scss | 17 +- apps/shared/scss/component/_tabs.scss | 7 + apps/shared/scss/global.scss | 25 +- .../src/lib/mention-list.component.ts | 2 +- 16 files changed, 327 insertions(+), 296 deletions(-) create mode 100644 apps/shared/scss/component/_tabs.scss diff --git a/apps/36-blocks/src/app/features/create-feature/create-feature.component.scss b/apps/36-blocks/src/app/features/create-feature/create-feature.component.scss index ed0c21a1..13d7ee53 100644 --- a/apps/36-blocks/src/app/features/create-feature/create-feature.component.scss +++ b/apps/36-blocks/src/app/features/create-feature/create-feature.component.scss @@ -1,3 +1,7 @@ +:host { + display: block; + height: 100%; +} .code-snippet-view { transition: min-height 0.2s linear; min-width: 500px; diff --git a/apps/36-blocks/src/app/features/feature/feature.component.html b/apps/36-blocks/src/app/features/feature/feature.component.html index c46823c7..681353fb 100644 --- a/apps/36-blocks/src/app/features/feature/feature.component.html +++ b/apps/36-blocks/src/app/features/feature/feature.component.html @@ -1,5 +1,5 @@ @if (loading$ | async; as loading) { -
+
@if (loading.dataLoading && (hasSomeFeatures$ | async) === null) { } diff --git a/apps/36-blocks/src/app/features/feature/feature.component.scss b/apps/36-blocks/src/app/features/feature/feature.component.scss index e69de29b..42385324 100644 --- a/apps/36-blocks/src/app/features/feature/feature.component.scss +++ b/apps/36-blocks/src/app/features/feature/feature.component.scss @@ -0,0 +1,4 @@ +:host { + display: block; + height: 100%; +} diff --git a/apps/36-blocks/src/app/layout/layout.component.html b/apps/36-blocks/src/app/layout/layout.component.html index 67fee5f5..abca4e2b 100644 --- a/apps/36-blocks/src/app/layout/layout.component.html +++ b/apps/36-blocks/src/app/layout/layout.component.html @@ -4,67 +4,51 @@ [class.mat-drawer-toggle-btn-hover]="isSideNavOpen()" [class]="!isSideNavOpen() ? 'overflow-hidden !w-[56px] p-1.5' : 'w-[246px]'" > -
+ @let clientSettings = clientSettings$ | async; @let clientList = clients$ | async; @let isMultipleClients = + (clientList?.data?.length ?? 0) > 1; +
- @if (!isSideNavOpen()) { - apps - } -
- - {{ (clientSettings$ | async)?.client?.name }} + @if (isSideNavOpen()) { +
+ + {{ clientSettings?.client?.name }} - @if (isSideNavOpen()) { + @if (isMultipleClients){ {{ clientsMenuTrigger?.menuOpen ? 'keyboard_arrow_up' : 'keyboard_arrow_down' }} } - - @if (clients$ | async; as clientList) { - - @if (clientList.totalEntityCount > 25) { - - - @for (client of clientList?.data; track client.id) { - - } - - - } @else { @for (client of clientList?.data; track client.id) { - - } } - - } -
+ } @else { + apps + }
+ + @for (client of clientList?.data; track client.id) { + + } + + } @else { + + }

{{ user.displayName }}

@@ -134,3 +125,11 @@

{{ user.displayName }}

+ + + @if (user.photoURL) { + No Image + } @else { + account_circle + } + diff --git a/apps/36-blocks/src/app/layout/layout.component.ts b/apps/36-blocks/src/app/layout/layout.component.ts index e7c7b4fa..d6ac687b 100644 --- a/apps/36-blocks/src/app/layout/layout.component.ts +++ b/apps/36-blocks/src/app/layout/layout.component.ts @@ -52,7 +52,6 @@ import { AuthService } from '@proxy/services/proxy/auth'; MatExpansionModule, MatTooltipModule, MatSlideToggleModule, - CDKScrollComponent, ScrollingModule, MainLeftSideNavComponent, ], @@ -72,7 +71,7 @@ export class LayoutComponent extends BaseComponent implements OnInit, OnDestroy public toggleMenuSideBar: boolean; public showContainer = false; public clientsParams = { - itemsPerPage: 25, + itemsPerPage: 200, pageNo: 1, }; @@ -185,16 +184,6 @@ export class LayoutComponent extends BaseComponent implements OnInit, OnDestroy this.store.dispatch(rootActions.getClientSettings()); } - public fetchClientsNextPage() { - if (this.clientsParams.pageNo < this.getValueFromObservable(this.clients$)?.totalPageCount) { - this.clientsParams = { - ...this.clientsParams, - pageNo: this.clientsParams.pageNo + 1, - }; - this.getClients(); - } - } - public switchClient(clientId: number): void { this.store.dispatch(rootActions.switchClient({ request: { client_id: clientId } })); } diff --git a/apps/36-blocks/src/app/logs/log/log.component.html b/apps/36-blocks/src/app/logs/log/log.component.html index 0fb5be0b..4e147665 100644 --- a/apps/36-blocks/src/app/logs/log/log.component.html +++ b/apps/36-blocks/src/app/logs/log/log.component.html @@ -1,4 +1,4 @@ -
+
@if (isLoading$ | async) { } diff --git a/apps/36-blocks/src/app/logs/log/log.component.scss b/apps/36-blocks/src/app/logs/log/log.component.scss index e69de29b..42385324 100644 --- a/apps/36-blocks/src/app/logs/log/log.component.scss +++ b/apps/36-blocks/src/app/logs/log/log.component.scss @@ -0,0 +1,4 @@ +:host { + display: block; + height: 100%; +} diff --git a/apps/36-blocks/src/app/ngrx/effects/root/root.effect.ts b/apps/36-blocks/src/app/ngrx/effects/root/root.effect.ts index 46b2c325..66f19c7e 100755 --- a/apps/36-blocks/src/app/ngrx/effects/root/root.effect.ts +++ b/apps/36-blocks/src/app/ngrx/effects/root/root.effect.ts @@ -41,6 +41,16 @@ export class RootEffects { this.showError(res.errors); return rootActions.getAllClientsError(); } + console.log(res.data?.data); + const data = [ + ...(res.data?.data || []), + ...(res.data?.data || []), + ...(res.data?.data || []), + ...(res.data?.data || []), + ...(res.data?.data || []), + ...(res.data?.data || []), + ]; + res.data['data'] = data.map((i, indx) => ({ ...i, id: i.id + indx })); return rootActions.getAllClientsSuccess({ response: res.data }); }), catchError((err) => { diff --git a/apps/36-blocks/src/app/users/management/management.component.scss b/apps/36-blocks/src/app/users/management/management.component.scss index 3dbf9a00..6e4ba581 100644 --- a/apps/36-blocks/src/app/users/management/management.component.scss +++ b/apps/36-blocks/src/app/users/management/management.component.scss @@ -1,3 +1,7 @@ +:host { + display: block; + height: 100%; +} td[data-label='Actions'] { padding-right: 16px !important; } diff --git a/apps/36-blocks/src/app/users/user/user.component.html b/apps/36-blocks/src/app/users/user/user.component.html index 018fc47b..c517a61f 100644 --- a/apps/36-blocks/src/app/users/user/user.component.html +++ b/apps/36-blocks/src/app/users/user/user.component.html @@ -1,216 +1,229 @@ @if (loading$ | async; as loading) {
- + -
- -
- - - -
-
- - Company Name - - - - Block - - None - @for (feature of features; track feature.reference_id) { - {{ feature.name }} - } - - +
+
+ +
+ + + +
+
+ + Company Name + + + + Block + + None + @for (feature of features; track feature.reference_id) { + {{ feature.name }} + } + + +
+ +
+ + + +
- -
- - - -
-
- - + + +
-
-
- - - - - - +
+
Name - @if (!loading.dataLoading) { - {{ element.name }} - } @else { - - } -
+ + + + + - - - - - + + + + + - - - - - + + + + + - - - - - + + + + + - - - - - + + + + + - - - - - + + + + + - - - - - + + + + + - - + + - - - -
Name + @if (!loading.dataLoading) { + {{ element.name }} + } @else { + + } + Email - @if (!loading.dataLoading) { - {{ element.email }} - } @else { - - } - Email + @if (!loading.dataLoading) { + {{ element.email }} + } @else { + + } + Phone Number - @if (!loading.dataLoading) { - {{ element.mobile ?? '-' }} - } @else { - - } - Phone Number + @if (!loading.dataLoading) { + {{ element.mobile ?? '-' }} + } @else { + + } + User ID - @if (!loading.dataLoading) { -
- - {{ - element?.id?.length > 15 - ? (element?.id | slice: 0:10) + '...' + (element?.id | slice: -5) - : element?.id - }} - - -
- } @else { - - } - 		User ID + @if (!loading.dataLoading) { +
+ + {{ + element?.id?.length > 15 + ? (element?.id | slice: 0:10) + '...' + (element?.id | slice: -5) + : element?.id + }} + + +
+ } @else { + + } + 		Block Name - @if (!loading.dataLoading) { @if (element?.feature_configuration?.name) { - {{ element.feature_configuration.name }} - } @else { - - - } } @else { - - } - Block Name + @if (!loading.dataLoading) { @if (element?.feature_configuration?.name) { + {{ element.feature_configuration.name }} + } @else { + - + } } @else { + + } + Last Login - @if (!loading.dataLoading) { @if (element?.last_login_at) { -
- {{ element.last_login_at | date: 'd MMM y' }} - {{ - element.last_login_at | date: 'mediumTime' - }} -
- } @else { - - - } } @else { - - } - 		Last Login + @if (!loading.dataLoading) { @if (element?.last_login_at) { +
+ {{ + element.last_login_at | date: 'd MMM y' + }} + {{ + element.last_login_at | date: 'mediumTime' + }} +
+ } @else { + - + } } @else { + + } + 		Created At - @if (!loading.dataLoading) { @if (element?.created_at) { -
- {{ element.created_at | date: 'd MMM y' }} - {{ - element.created_at | date: 'mediumTime' - }} -
- } @else { - - - } } @else { - - } - 		Created At + @if (!loading.dataLoading) { @if (element?.created_at) { +
+ {{ element.created_at | date: 'd MMM y' }} + {{ + element.created_at | date: 'mediumTime' + }} +
+ } @else { + - + } } @else { + + } +
- -
+ + + + + + +
+
- diff --git a/apps/36-blocks/src/app/users/user/user.component.scss b/apps/36-blocks/src/app/users/user/user.component.scss index e69de29b..42385324 100644 --- a/apps/36-blocks/src/app/users/user/user.component.scss +++ b/apps/36-blocks/src/app/users/user/user.component.scss @@ -0,0 +1,4 @@ +:host { + display: block; + height: 100%; +} diff --git a/apps/shared/scss/_imports.scss b/apps/shared/scss/_imports.scss index 0ed7da5e..d8e95785 100644 --- a/apps/shared/scss/_imports.scss +++ b/apps/shared/scss/_imports.scss @@ -1,3 +1,4 @@ -@use './component/mat-form-field'; @use './fonts'; +@use './component/mat-form-field'; @use './component/table'; +@use './component/tabs'; diff --git a/apps/shared/scss/component/_table.scss b/apps/shared/scss/component/_table.scss index 21990d9a..bd276d20 100644 --- a/apps/shared/scss/component/_table.scss +++ b/apps/shared/scss/component/_table.scss @@ -1,15 +1,20 @@ +$border: 1px solid var(--color-common-border); +$border-radius: var(--border-common-radius-4); .table-scroll { - overflow-x: auto; - width: 100%; + @apply w-full overflow-x-auto grow; @media screen and (min-width: 768px) { - border: 1px solid var(--color-common-border); - border-radius: var(--border-common-radius-4) var(--border-common-radius-4) 0 0; + border: $border; + border-radius: $border-radius; + + &:has(+ mat-paginator-goto .go-to-pagination) { + border-radius: $border-radius $border-radius 0 0; + } } } .default-table { box-shadow: none; - width: 100%; + @apply w-full h-full; &:has(.mat-no-data-row) { height: 100%; @@ -82,7 +87,7 @@ border-radius: 8px; margin-bottom: 12px; // background-color: var(--color-common-bg); - border: 1px solid var(--color-common-border); + border: $border; box-shadow: 0 1px 4px rgb(0 0 0 / 6%); padding: 4px 0; } diff --git a/apps/shared/scss/component/_tabs.scss b/apps/shared/scss/component/_tabs.scss new file mode 100644 index 00000000..a858a1e4 --- /dev/null +++ b/apps/shared/scss/component/_tabs.scss @@ -0,0 +1,7 @@ +mat-tab-group { + &.h-full { + .mat-mdc-tab-body-wrapper { + height: 100%; + } + } +} diff --git a/apps/shared/scss/global.scss b/apps/shared/scss/global.scss index 6aa8ddc1..4bb5cc9e 100644 --- a/apps/shared/scss/global.scss +++ b/apps/shared/scss/global.scss @@ -78,20 +78,12 @@ pre { } } // Text size -.font-10 { - font-size: 10px !important; -} -.font-11 { - font-size: 11px !important; -} -.font-12 { - font-size: 12px !important; -} -.font-14 { - font-size: var(--font-size-common-14) !important; -} -.font-20 { - font-size: var(--font-size-common-20) !important; +$font-sizes: (10, 11, 12, 14, 16, 20); + +@each $size in $font-sizes { + .font-#{$size} { + font-size: #{$size}px !important; + } } .w-b-hyphens { @@ -105,11 +97,6 @@ pre { -webkit-hyphens: auto; hyphens: auto; } -.overflow-dotted { - white-space: nowrap; - overflow: hidden !important; - text-overflow: ellipsis; -} .box-shadow-none { box-shadow: none !important; diff --git a/libs/ui/angular-mentions/src/lib/mention-list.component.ts b/libs/ui/angular-mentions/src/lib/mention-list.component.ts index 6cc0441f..f30e6a56 100755 --- a/libs/ui/angular-mentions/src/lib/mention-list.component.ts +++ b/libs/ui/angular-mentions/src/lib/mention-list.component.ts @@ -98,7 +98,7 @@ import { getCaretCoordinates } from './caret-coords'; } @for (item of items; track item; let i = $index) {