Skip to content

Test modules are not visible when screen is magnified or in mobile view #712

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
sofyakurilova merged 1 commit into from
Aug 23, 2024
Merged

Test modules are not visible when screen is magnified or in mobile view #712

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
244 changes: 123 additions & 121 deletions ...ges/devices/components/device-qualification-from/device-qualification-from.component.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -40,114 +40,116 @@ <h2 class="device-qualification-form-header-title">{{ data.title }}</h2>
(selectionChange)="onStepChange($event)">
{{ selectedIndex }}
<cdk-step [editable]="true" formGroupName="0" [stepControl]="getStep(0)">
<mat-form-field appearance="outline" class="manufacturer-field">
<mat-label>Device Manufacturer</mat-label>
<input
class="device-qualification-form-manufacturer"
formControlName="manufacturer"
matInput />
<mat-hint>Please enter device manufacturer name</mat-hint>
<mat-error
*ngIf="manufacturer.hasError('invalid_format')"
role="alert"
aria-live="assertive">
<span
>Please, check. The manufacturer name must be a maximum of 28
characters. Only letters, numbers, and accented letters are
permitted.</span
>
</mat-error>
<mat-error *ngIf="manufacturer.errors?.['required']">
<span>Device Manufacturer is <strong>required</strong></span>
</mat-error>
</mat-form-field>
<mat-form-field appearance="outline" class="model-field">
<mat-label>Device Model</mat-label>
<input
class="device-qualification-form-model"
formControlName="model"
matInput />
<mat-hint>Please enter device name</mat-hint>
<mat-error
*ngIf="model.hasError('invalid_format')"
role="alert"
aria-live="assertive">
<span
>Please, check. The device model name must be a maximum of 28
characters. Only letters, numbers, and accented letters are
permitted.</span
>
</mat-error>
<mat-error *ngIf="model.errors?.['required']">
<span>Device Model is <strong>required</strong></span>
</mat-error>
</mat-form-field>
<mat-form-field appearance="outline">
<mat-label>MAC address</mat-label>
<input
class="device-qualification-form-mac-address"
formControlName="mac_addr"
matInput
[dropSpecialCharacters]="false"
[showMaskTyped]="true"
[specialCharacters]="[':']"
mask="AA:AA:AA:AA:AA:AA"
shownMaskExpression="__:__:__:__:__:__"
type="text" />
<mat-hint>Please enter MAC address</mat-hint>
<mat-error
*ngIf="
mac_addr.errors?.['required'] && !mac_addr.errors?.['pattern']
">
<span>MAC address is <strong>required</strong></span>
</mat-error>
<mat-error
*ngIf="mac_addr.errors?.['pattern']"
class="device-form-mac-address-error">
<span
>Please, check. A MAC address consists of 12 hexadecimal digits (0
to 9, a to f, or A to F).</span
>
</mat-error>
<mat-error *ngIf="mac_addr.errors?.['has_same_mac_address']">
<span
>This MAC address is already used for another device in the
repository.</span
>
</mat-error>
</mat-form-field>
<section class="device-qualification-form-page">
<mat-form-field appearance="outline" class="manufacturer-field">
<mat-label>Device Manufacturer</mat-label>
<input
class="device-qualification-form-manufacturer"
formControlName="manufacturer"
matInput />
<mat-hint>Please enter device manufacturer name</mat-hint>
<mat-error
*ngIf="manufacturer.hasError('invalid_format')"
role="alert"
aria-live="assertive">
<span
>Please, check. The manufacturer name must be a maximum of 28
characters. Only letters, numbers, and accented letters are
permitted.</span
>
</mat-error>
<mat-error *ngIf="manufacturer.errors?.['required']">
<span>Device Manufacturer is <strong>required</strong></span>
</mat-error>
</mat-form-field>
<mat-form-field appearance="outline" class="model-field">
<mat-label>Device Model</mat-label>
<input
class="device-qualification-form-model"
formControlName="model"
matInput />
<mat-hint>Please enter device name</mat-hint>
<mat-error
*ngIf="model.hasError('invalid_format')"
role="alert"
aria-live="assertive">
<span
>Please, check. The device model name must be a maximum of 28
characters. Only letters, numbers, and accented letters are
permitted.</span
>
</mat-error>
<mat-error *ngIf="model.errors?.['required']">
<span>Device Model is <strong>required</strong></span>
</mat-error>
</mat-form-field>
<mat-form-field appearance="outline">
<mat-label>MAC address</mat-label>
<input
class="device-qualification-form-mac-address"
formControlName="mac_addr"
matInput
[dropSpecialCharacters]="false"
[showMaskTyped]="true"
[specialCharacters]="[':']"
mask="AA:AA:AA:AA:AA:AA"
shownMaskExpression="__:__:__:__:__:__"
type="text" />
<mat-hint>Please enter MAC address</mat-hint>
<mat-error
*ngIf="
mac_addr.errors?.['required'] && !mac_addr.errors?.['pattern']
">
<span>MAC address is <strong>required</strong></span>
</mat-error>
<mat-error
*ngIf="mac_addr.errors?.['pattern']"
class="device-form-mac-address-error">
<span
>Please, check. A MAC address consists of 12 hexadecimal digits (0
to 9, a to f, or A to F).</span
>
</mat-error>
<mat-error *ngIf="mac_addr.errors?.['has_same_mac_address']">
<span
>This MAC address is already used for another device in the
repository.</span
>
</mat-error>
</mat-form-field>

<mat-label class="device-qualification-form-journey-label"
>Please, select the testing journey for device</mat-label
>
<input matInput style="display: none" />
<mat-label class="device-qualification-form-journey-label"
>Please, select the testing journey for device</mat-label
>
<input matInput style="display: none" />

<mat-radio-group formControlName="test_pack">
<mat-radio-button
[value]="TestingType.Qualification"
class="device-qualification-form-journey-button">
<span>
<app-qualification-icon></app-qualification-icon
><span class="device-qualification-form-journey-button-label-text"
>Device Qualification</span
>
</span>
</mat-radio-button>
<mat-radio-button
[value]="TestingType.Pilot"
class="device-qualification-form-journey-button">
<span class="device-qualification-form-journey-button-label">
<app-pilot-icon></app-pilot-icon><span>Pilot Assessment</span>
</span>
</mat-radio-button>
</mat-radio-group>
<mat-radio-group formControlName="test_pack">
<mat-radio-button
[value]="TestingType.Qualification"
class="device-qualification-form-journey-button">
<span>
<app-qualification-icon></app-qualification-icon
><span class="device-qualification-form-journey-button-label-text"
>Device Qualification</span
>
</span>
</mat-radio-button>
<mat-radio-button
[value]="TestingType.Pilot"
class="device-qualification-form-journey-button">
<span class="device-qualification-form-journey-button-label">
<app-pilot-icon></app-pilot-icon><span>Pilot Assessment</span>
</span>
</mat-radio-button>
</mat-radio-group>

<app-device-tests
class="device-qualification-form-test-modules-container"
[deviceForm]="getStep(0)"
[deviceTestModules]="data.device?.test_modules"
[testModules]="testModules">
</app-device-tests>
<app-device-tests
class="device-qualification-form-test-modules-container"
[deviceForm]="getStep(0)"
[deviceTestModules]="data.device?.test_modules"
[testModules]="testModules">
</app-device-tests>
</section>
</cdk-step>

<ng-container *ngFor="let step of format">
Expand Down Expand Up @@ -253,23 +255,23 @@ <h3 class="device-qualification-form-summary-info-title">
</div>
</section>
</section>
<div class="device-qualification-form-actions">
<button
mat-button
color="primary"
class="close-button"
(click)="closeForm()">
Cancel
</button>
<button
mat-flat-button
color="primary"
class="save-button"
[disabled]="formPristine || !formValid">
Save
</button>
</div>
</section>
<div class="device-qualification-form-actions">
<button
mat-button
color="primary"
class="close-button"
(click)="closeForm()">
Cancel
</button>
<button
mat-flat-button
color="primary"
class="save-button"
[disabled]="formPristine || !formValid">
Save
</button>
</div>
</cdk-step>
</app-stepper>
</form>
23 changes: 23 additions & 0 deletions ...ges/devices/components/device-qualification-from/device-qualification-from.component.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -22,10 +22,15 @@ $form-min-width: 732px;
$form-height: 993px;

:host {
container-type: size;
container-name: qualification-form;

display: grid;
grid-template-rows: 1fr;
overflow: auto;
grid-template-columns: minmax(285px, $form-max-width);
height: 100vh;
max-height: 978px;
}

.device-qualification-form {
Expand Down Expand Up @@ -277,3 +282,21 @@ $form-height: 993px;
::ng-deep mat-error {
background: $white;
}

@container qualification-form (height < 870px) {
.device-qualification-form-page {
overflow: scroll;
::ng-deep app-device-tests {
overflow: visible;
}
}
}
@container qualification-form (height < 580px) {
.device-qualification-form-page {
overflow: scroll;
.device-qualification-form-step-content,
.device-qualification-form-summary-container {
overflow: visible;
}
}
}