sxhundred/ISA-Frontend
1
0
Fork 0
mirror of https://dev.azure.com/hugendubel/ISA/_git/ISA-Frontend synced 2025-12-31 09:37:15 +01:00
Code Issues Packages Projects Releases Wiki Activity

Tailwindcss anpassung splitscreen werte

Browse Source
This commit is contained in:
Lorenz Hilpert
2023-07-14 14:41:18 +02:00
parent 4187e13861
commit 6ade77d458
10 changed files with 114 additions and 93 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
apps/page/customer-rd/src/lib/components/split-screen/split-screen.component.css
View File

@@ -1,3 +1,3 @@
:host {
@apply grid grid-cols-[27.5rem_auto] gap-6;
@apply grid grid-cols-split-screen gap-split-screen h-split-screen-tablet max-h-split-screen-tablet desktop-small:h-split-screen-desktop desktop-small:max-h-split-screen-desktop;
}

2
apps/page/customer-rd/src/lib/create-customer/create-customer.component.html
View File

@@ -1,4 +1,4 @@
<page-split-screen class="max-h-[calc(100vh-13.875rem)] h-[calc(100vh-13.875rem)]">
<page-split-screen>
<page-customer-create-side-view [processId]="processId$ | async" *sideTemplate></page-customer-create-side-view>
<router-outlet></router-outlet>
</page-split-screen>

2
apps/page/customer-rd/src/lib/customer-page.component.html
View File

@@ -1,3 +1,3 @@
<shared-breadcrumb [key]="processId$ | async" [tags]="['customer']" class="mb-6"></shared-breadcrumb>
<shared-breadcrumb [key]="processId$ | async" [tags]="['customer']" class="mb-5 desktop-small:mb-9"></shared-breadcrumb>
<router-outlet></router-outlet>

2
apps/page/customer-rd/src/lib/customer-search/customer-search.component.html
View File

@@ -1,4 +1,4 @@
<page-split-screen class="max-h-[calc(100vh-13.875rem)] h-[calc(100vh-13.875rem)]" [side]="side$ | async">
<page-split-screen [side]="side$ | async">
<page-customer-results-side-view *sideTemplate="'results'"></page-customer-results-side-view>
<page-customer-main-side-view [processId]="processId$ | async" *sideTemplate="'main'"></page-customer-main-side-view>
<page-customer-order-details-side-view *sideTemplate="'order-details'"></page-customer-order-details-side-view>

79
apps/page/customer-rd/src/lib/customer-search/details-main-view/details-main-view.component.ts
View File

@@ -12,6 +12,7 @@ import { ComponentStore } from '@ngrx/component-store';
import { ApplicationService } from '@core/application';
import { CheckoutNavigationService, ProductCatalogNavigationService } from '@shared/services';
import { Router } from '@angular/router';
import { log, logAsync } from '@utils/common';
const GENDER_MAP = {
2: 'Herr',
@@ -25,84 +26,6 @@ export interface CustomerDetailsViewMainState {
payer: PayerDTO;
}
const log = (target: any, propertyKey: string, descriptor: PropertyDescriptor) => {
// log the function name the input and return value
// get the function that is being decorated
const originalMethod = descriptor.value;
// replace the function being decorated with a new function
descriptor.value = function (...args: any[]) {
const now = Date.now();
let result;
console.group(`Method: ${propertyKey}`);
// log the input
console.log(`args: ${JSON.stringify(args)}`);
try {
// call the original function
result = originalMethod.apply(this, args);
// log the output
console.log(`returned: ${JSON.stringify(result)}`);
// return the result of calling the original method
} catch (error) {
console.error(`error: ${error}`);
throw error;
}
console.log(`execution time: ${Date.now() - now}ms`);
console.groupEnd();
return result;
};
// return the descriptor
return descriptor;
};
const logAsync = (target: any, propertyKey: string, descriptor: PropertyDescriptor) => {
// log the function name the input and return value
// get the function that is being decorated
const originalMethod = descriptor.value;
// replace the function being decorated with a new function
descriptor.value = async function (...args: any[]) {
const now = Date.now();
let result;
console.group(`Method: ${propertyKey}`);
// log the input
console.log(`args: ${JSON.stringify(args)}`);
try {
// call the original function
result = await originalMethod.apply(this, args);
// log the output
console.log(`returned: ${JSON.stringify(result)}`);
// return the result of calling the original method
} catch (error) {
console.error(`error: ${error}`);
throw error;
}
console.log(`execution time: ${Date.now() - now}ms`);
console.groupEnd();
return result;
};
// return the descriptor
return descriptor;
};
@Component({
selector: 'page-customer-details-main-view',
templateUrl: 'details-main-view.component.html',

2
apps/page/customer-rd/src/lib/customer-search/filter-main-view/filter-main-view.component.css
View File

@@ -1,5 +1,5 @@
:host {
@apply block bg-surface text-surface-content rounded-[0.313rem] mb-3 h-full;
@apply block bg-surface text-surface-content rounded-[0.313rem] h-full;
}
::ng-deep .page-customer-filter-main-view shared-filter shared-filter-input-group-main {

2
apps/shared/shell/src/lib/shell.component.html
View File

@@ -14,7 +14,7 @@
</div>
<main
class="ml-0 desktop-small:ml-[10.5rem] desktop-x-large:ml-[16.5rem] px-4 py-2 desktop-small:px-6 desktop-large:px-10 remove-padding"
class="ml-0 desktop-small:ml-[10.5rem] desktop-x-large:ml-[16.5rem] px-4 pt-[0.1875rem] pb-2 desktop-small:px-6 desktop-large:px-10 remove-padding"
(click)="closeSideMenu()"
>
<div class="mx-auto w-full">

9
apps/utils/common/src/lib/index.ts
View File

@@ -1,11 +1,10 @@
// start:ng42.barrel
export * from './contains-element';
export * from './geo-distance';
export * from './is-array';
export * from './is-boolean';
export * from './is-null-or-undefined';
export * from './is-number';
export * from './is-string';
export * from './is-string-empty';
export * from './is-string';
export * from './log.decorator';
export * from './memorize.decorator';
export * from './geo-distance';
export * from './contains-element';
// end:ng42.barrel

87
apps/utils/common/src/lib/log.decorator.ts Normal file
View File

@@ -0,0 +1,87 @@
import { isDevMode } from '@angular/core';
export const log = (target: any, propertyKey: string, descriptor: PropertyDescriptor) => {
if (!isDevMode()) {
return descriptor;
}
// log the function name the input and return value
// get the function that is being decorated
const originalMethod = descriptor.value;
// replace the function being decorated with a new function
descriptor.value = function (...args: any[]) {
const now = Date.now();
let result;
console.groupCollapsed(`Method: ${propertyKey}`);
// log the input
console.log(`args:`, args);
try {
// call the original function
result = originalMethod.apply(this, args);
// log the output
console.log(`returned:`, result);
// return the result of calling the original method
} catch (error) {
console.error(`error:`, error);
throw error;
}
console.log(`execution time in ms:`, Date.now() - now);
console.groupEnd();
return result;
};
// return the descriptor
return descriptor;
};
export const logAsync = (target: any, propertyKey: string, descriptor: PropertyDescriptor) => {
if (!isDevMode()) {
return descriptor;
}
// log the function name the input and return value
// get the function that is being decorated
const originalMethod = descriptor.value;
// replace the function being decorated with a new function
descriptor.value = async function (...args: any[]) {
const now = Date.now();
let result;
console.groupCollapsed(`Method: ${propertyKey}`);
// log the input
console.log(`args:`, args);
try {
// call the original function
result = await originalMethod.apply(this, args);
// log the output
console.log(`returned:`, result);
// return the result of calling the original method
} catch (error) {
console.error(`error: ${error}`);
throw error;
}
console.log(`execution time in ms:`, Date.now() - now);
console.groupEnd();
return result;
};
// return the descriptor
return descriptor;
};

20
tailwind.config.js
View File

@@ -30,6 +30,22 @@ module.exports = {
'desktop-x-large': '1920px',
'desktop-xx-large': '2736px',
},
height: {
'split-screen-tablet': 'calc(100vh - 15.5rem)',
'split-screen-desktop': 'calc(100vh - 14rem)',
},
maxHeight: {
'split-screen-tablet': 'calc(100vh - 15.5rem)',
'split-screen-desktop': 'calc(100vh - 14rem)',
},
gridTemplateColumns: {
'split-screen': '31rem 1fr',
},
gap: {
'px-1': '1px',
'px-2': '2px',
'split-screen': '1.5rem',
},
maxWidth: {
content: '120rem',
},
@@ -52,10 +68,6 @@ module.exports = {
'px-100': '100px',
'px-150': '150px',
},
gap: {
'px-1': '1px',
'px-2': '2px',
},
padding: {
card: '20px',
},