Skip to content

Commit

Permalink
feat: improve responsive design
Browse files Browse the repository at this point in the history
  • Loading branch information
@HenryT-CG
HenryT-CG committed Jan 15, 2024
1 parent 50c076a commit a012b9f
Show file tree
Hide file tree
Showing 9 changed files with 296 additions and 131 deletions.
26 changes: 24 additions & 2 deletions src/_mixins.scss
View file
Original file line number Diff line number Diff line change
@@ -1,15 +1,37 @@
// disable preset opacity: not readable
// disable preset of opacity in form: not readable
@mixin make-disabled-form-readable-input {
:host {
:host ::ng-deep {
.p-inputtext.p-component:disabled {
opacity: unset;
}
}
}

@mixin make-disabled-form-readable-dropdown {
:host ::ng-deep {
.p-dropdown.p-component.p-disabled {
opacity: unset;
}
}
}

@mixin prepare-inputgroup {
:host ::ng-deep {
.inputgroup-dropdown-with-link {
border-right: none;
border-top-right-radius: 0;
border-bottom-right-radius: 0;
}
.input-field-correction .p-inputtext {
padding-top: 1rem !important;
padding-bottom: 0.5rem !important;
}
.pseudo-button:hover {
background: var(--button-hover-bg) !important;
cursor: pointer;
* {
background: var(--button-hover-bg) !important;
}
}
}
}
79 changes: 77 additions & 2 deletions src/app/product-store/product-detail/product-intern/product-intern.component.html
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,72 @@
<div class="surface-section grid grid-nogutter m-3">
<div class="surface-section flex flex-column row-gap-4 m-3 w-6">
<div class="flex flex-wrap row-gap-3 column-gap-4">
<span class="p-float-label">
<input
pInputText
type="text"
readonly
id="portal_detail_item_creationDate"
class="w-full pt-3 pb-2"
[value]="product?.creationDate | date : dateFormat"
[pTooltip]="'INTERNAL.TOOLTIPS.CREATION_DATE' | translate"
tooltipPosition="top"
tooltipEvent="focus"
/>
<label for="portal_detail_item_creationDate">{{ 'INTERNAL.CREATION_DATE' | translate }}</label>
</span>
<span class="p-float-label">
<input
pInputText
type="text"
readonly
id="portal_detail_item_creationUser"
class="w-full pt-3 pb-2"
[value]="product?.creationUser"
[pTooltip]="'INTERNAL.TOOLTIPS.CREATION_USER' | translate"
tooltipPosition="top"
tooltipEvent="focus"
/>
<label for="portal_detail_item_creationUser">{{ 'INTERNAL.CREATION_USER' | translate }}</label>
</span>
</div>

<div class="flex flex-wrap row-gap-3 column-gap-4">
<span class="p-float-label">
<input
pInputText
type="text"
readonly
id="portal_detail_item_modificationDate"
class="w-full pt-3 pb-2"
[value]="product?.modificationDate | date : dateFormat"
[pTooltip]="'INTERNAL.TOOLTIPS.MODIFICATION_DATE' | translate"
tooltipPosition="top"
tooltipEvent="focus"
/>
<label for="portal_detail_item_modificationDate">{{ 'INTERNAL.MODIFICATION_DATE' | translate }}</label>
</span>

<span class="p-float-label">
<input
pInputText
type="text"
readonly
id="portal_detail_item_modificationUser"
class="w-full pt-3 pb-2"
[value]="product?.modificationUser"
[pTooltip]="'INTERNAL.TOOLTIPS.MODIFICATION_USER' | translate"
tooltipPosition="top"
tooltipEvent="focus"
/>
<label for="portal_detail_item_modificationUser">{{ 'INTERNAL.MODIFICATION_USER' | translate }}</label>
</span>
</div>
</div>

<!--
<div class="surface-section grid grid-nogutter">
<div class="col-12 md:col-6">
<div class="flex flex-wrap flex-column gap-4 justify-content-between">
<div class="col-12 md:col-6 p-3">
<span class="p-float-label">
<input
pInputText
Expand All @@ -15,7 +81,9 @@
/>
<label for="portal_detail_item_creationDate">{{ 'INTERNAL.CREATION_DATE' | translate }}</label>
</span>
</div>
<div class="col-12 md:col-6 p-3">
<span class="p-float-label">
<input
pInputText
Expand All @@ -30,7 +98,11 @@
/>
<label for="portal_detail_item_creationUser">{{ 'INTERNAL.CREATION_USER' | translate }}</label>
</span>
</div>
</div>
<div class="col-12 md:col-6">
<div class="col-12 md:col-3 p-3">
<span class="p-float-label">
<input
pInputText
Expand All @@ -45,7 +117,9 @@
/>
<label for="portal_detail_item_modificationDate">{{ 'INTERNAL.MODIFICATION_DATE' | translate }}</label>
</span>
</div>
<div class="col-12 md:col-3 p-3">
<span class="p-float-label">
<input
pInputText
Expand All @@ -63,3 +137,4 @@
</div>
</div>
</div>
-->
230 changes: 137 additions & 93 deletions src/app/product-store/product-detail/product-props/product-props.component.html
View file
Original file line number Diff line number Diff line change
@@ -1,99 +1,143 @@
<form [formGroup]="formGroup" (ngSubmit)="onSubmit()">
<div class="surface-section grid grid-nogutter m-3">
<div class="col-12 md:col-6">
<div class="flex flex-wrap flex-column gap-4 justify-content-between">
<div>
<span class="p-float-label" [title]="'PRODUCT.TOOLTIPS.NAME' | translate" controlErrorAnchor>
<input pInputText type="text" class="w-full" id="product_detail_item_name" formControlName="name" />
<label class="ocx-required-label" for="product_detail_item_name">{{ 'PRODUCT.NAME' | translate }}</label>
</span>
</div>
<div>
<span class="p-float-label" [title]="'PRODUCT.TOOLTIPS.DISPLAY_NAME' | translate" controlErrorAnchor>
<input
pInputText
type="text"
class="w-full"
id="product_detail_item_display_name"
formControlName="displayName"
/>
<label class="ocx-required-label" for="product_detail_item_display_name">
{{ 'PRODUCT.DISPLAY_NAME' | translate }}</label
>
</span>
</div>
<div>
<span class="p-float-label" [title]="'PRODUCT.TOOLTIPS.VERSION' | translate" controlErrorAnchor>
<input pInputText type="text" class="w-full" id="product_detail_item_version" formControlName="version" />
<label for="product_detail_item_version">{{ 'PRODUCT.VERSION' | translate }}</label>
</span>
</div>
<div>
<span class="p-float-label" [title]="'PRODUCT.TOOLTIPS.BASE_PATH' | translate" controlErrorAnchor>
<input pInputText type="text" class="w-full" id="product_detail_item_basePath" formControlName="basePath" />
<label class="ocx-required-label" for="product_detail_item_basePath">
{{ 'PRODUCT.BASE_PATH' | translate }}</label
>
</span>
</div>
<div>
<span class="p-float-label" [title]="'PRODUCT.TOOLTIPS.IMAGE_URL' | translate" controlErrorAnchor>
<input pInputText type="text" class="w-full" id="product_detail_item_imageUrl" formControlName="imageUrl" />
<label for="product_detail_item_imageUrl">{{ 'PRODUCT.IMAGE_URL' | translate }}</label>
</span>
</div>
<div class="flex justify-content-start align-items-center gap-4">
<div class="width: 5rem">
<span *ngIf="product?.iconName" class="pi pi-{{ product?.iconName }}"> </span>
<span *ngIf="!product?.iconName" class="pi text-bold text-xl">?</span>
</div>
<div class="w-full">
<span class="p-float-label" [title]="'PRODUCT.TOOLTIPS.ICON_NAME' | translate" controlErrorAnchor>
<input
pInputText
type="text"
class="w-full"
id="product_detail_item_iconName"
formControlName="iconName"
/>
<label for="product_detail_item_iconName">{{ 'PRODUCT.ICON_NAME' | translate }}</label>
</span>
<div class="surface-section flex flex-column row-gap-4 m-3">
<div class="flex flex-wrap row-gap-3 column-gap-5">
<div class="w-full sm:w-9 md:w-7 lg:w-5">
<span class="p-float-label" [title]="'PRODUCT.TOOLTIPS.NAME' | translate" controlErrorAnchor>
<input pInputText type="text" class="w-full" id="product_detail_item_name" formControlName="name" />
<label class="ocx-required-label" for="product_detail_item_name">{{ 'PRODUCT.NAME' | translate }}</label>
</span>
</div>
<div class="w-full sm:w-9 md:w-7 lg:w-5">
<span class="p-float-label" [title]="'PRODUCT.TOOLTIPS.VERSION' | translate" controlErrorAnchor>
<input pInputText type="text" class="w-full" id="product_detail_item_version" formControlName="version" />
<label for="product_detail_item_version">{{ 'PRODUCT.VERSION' | translate }}</label>
</span>
</div>
</div>

<div class="flex flex-wrap row-gap-3 column-gap-5">
<div class="w-full sm:w-9 md:w-7 lg:w-5">
<span class="p-float-label" [title]="'PRODUCT.TOOLTIPS.DISPLAY_NAME' | translate" controlErrorAnchor>
<input
pInputText
type="text"
class="w-full"
id="product_detail_item_display_name"
formControlName="displayName"
/>
<label class="ocx-required-label" for="product_detail_item_display_name">
{{ 'PRODUCT.DISPLAY_NAME' | translate }}</label
>
</span>
</div>
<div class="w-full sm:w-9 md:w-7 lg:w-5">
<span class="p-float-label" [title]="'PRODUCT.TOOLTIPS.BASE_PATH' | translate" controlErrorAnchor>
<input pInputText type="text" class="w-full" id="product_detail_item_basePath" formControlName="basePath" />
<label class="ocx-required-label" for="product_detail_item_basePath">
{{ 'PRODUCT.BASE_PATH' | translate }}</label
>
</span>
</div>
</div>

<div class="flex flex-wrap row-gap-3 column-gap-5">
<div class="w-full sm:w-9 md:w-7 lg:w-5">
<div class="flex flex-wrap sm:flex-nowrap align-items-center row-gap-2 column-gap-4">
<input hidden type="file" accept="image/*" #selectedFileInputLogo (change)="onFileUpload($event, 'logo')" />
<ps-image-container
[id]="'product_detail_item_logo_image'"
[imageUrl]="fetchingLogoUrl"
[small]="true"
[title]="'LOGO.TOOLTIPS.' + (fetchingLogoUrl ? 'IMAGE' : 'PLACEHOLDER') | translate"
></ps-image-container>
<div class="flex flex-column w-full">
<div class="p-inputgroup mb-1" controlErrorAnchor>
<span class="p-float-label" [title]="'PRODUCT.TOOLTIPS.IMAGE_URL' | translate">
<input pInputText type="text" id="product_detail_item_imageUrl" formControlName="imageUrl" />
<label for="product_detail_item_imageUrl">{{ 'PRODUCT.IMAGE_URL' | translate }}</label>
</span>
<span
id="product_detail_item_upload_logo2"
class="p-inputgroup-addon bg-primary pseudo-button"
[ngClass]="changeMode !== 'VIEW' ? 'cursor-pointer' : 'p-disabled'"
[title]="'LOGO.TOOLTIPS.UPLOAD' | translate"
(click)="changeMode !== 'VIEW' ? selectedFileInputLogo.click() : null"
>
<span class="pi pi-upload"></span>
</span>
</div>
</div>
</div>
<div>
<span class="p-float-label" [title]="'PRODUCT.TOOLTIPS.CLASSIFICATIONS' | translate">
<input
pInputText
type="text"
class="w-full"
id="product_detail_item_classifications"
formControlName="classifications"
/>
<label for="product_detail_item_classifications">{{ 'PRODUCT.CLASSIFICATIONS' | translate }}</label>
</span>
</div>
<div>
<span class="p-float-label" [title]="'PRODUCT.TOOLTIPS.OPERATOR' | translate" controlErrorAnchor>
<input pInputText type="text" class="w-full" id="product_detail_item_operator" formControlName="operator" />
<label for="product_detail_item_operator">{{ 'PRODUCT.OPERATOR' | translate }}</label>
</span>
</div>
<div>
<span class="p-float-label" [title]="'PRODUCT.TOOLTIPS.DESCRIPTION' | translate">
<textarea
pInputTextarea
class="w-full"
autoresize="true"
rows="3"
id="product_detail_item_description"
[pTooltip]="'PRODUCT.DESCRIPTION' | translate"
tooltipPosition="top"
tooltipEvent="focus"
formControlName="description"
></textarea>
<label for="product_detail_item_description">{{ 'PRODUCT.DESCRIPTION' | translate }}</label>
</span>
</div>
</div>
<div class="w-full sm:w-9 md:w-7 lg:w-5">
<span class="p-float-label" [title]="'PRODUCT.TOOLTIPS.CLASSIFICATIONS' | translate">
<input
pInputText
type="text"
class="w-full"
id="product_detail_item_classifications"
formControlName="classifications"
/>
<label for="product_detail_item_classifications">{{ 'PRODUCT.CLASSIFICATIONS' | translate }}</label>
</span>
</div>
</div>

<div class="flex flex-wrap row-gap-3 column-gap-5">
<div class="w-full sm:w-9 md:w-7 lg:w-5">
<span class="p-float-label" controlErrorAnchor>
<p-dropdown
id="product_detail_item_iconName"
styleClass="w-full min-w-min input-field-correction"
formControlName="iconName"
[options]="iconItems"
>
<ng-template let-ico pTemplate="selectedItem">
<div class="flex">
<span class="pi pi-{{ ico.value }} mr-3"> </span>
<span>{{ ico.label || 'dummy-for-renderer' }}</span>
</div>
</ng-template>
<ng-template let-ico pTemplate="item">
<div class="flex">
<span class="pi pi-{{ ico.value }} mr-3"> </span>
<span>{{ ico.label }}</span>
</div>
</ng-template>
</p-dropdown>
<label for="product_detail_item_iconName">{{ 'PRODUCT.ICON_NAME' | translate }}</label>
</span>
</div>
<div class="w-full sm:w-9 md:w-7 lg:w-5">
<span class="p-float-label" [title]="'PRODUCT.TOOLTIPS.OPERATOR' | translate" controlErrorAnchor>
<input
readonly
pInputText
type="text"
class="w-full"
id="product_detail_item_operator"
[value]="'PRODUCT.OPERATOR.' + (product?.operator ? 'DEPLOYMENT' : 'MANUAL') | translate"
/>
<label for="product_detail_item_operator">{{ 'PRODUCT.OPERATOR' | translate }}</label>
</span>
</div>
</div>
<div class="flex flex-wrap row-gap-3 column-gap-5">
<div class="w-10">
<span class="p-float-label" [title]="'PRODUCT.TOOLTIPS.DESCRIPTION' | translate">
<textarea
pInputTextarea
class="w-full"
autoresize="true"
rows="3"
id="product_detail_item_description"
[pTooltip]="'PRODUCT.DESCRIPTION' | translate"
tooltipPosition="top"
tooltipEvent="focus"
formControlName="description"
></textarea>
<label for="product_detail_item_description">{{ 'PRODUCT.DESCRIPTION' | translate }}</label>
</span>
</div>
</div>
</div>
Expand Down
Loading

0 comments on commit a012b9f

Please sign in to comment.