small ui fixes for overlapping mat form field labels

This commit is contained in:
mchouliara 2024-10-01 17:28:33 +03:00
parent 28f883a9d0
commit c24fc09866
7 changed files with 11 additions and 7 deletions

View File

@ -41,7 +41,7 @@
</div> </div>
<div class="col-12 mt-1"> <div class="col-12 mt-1">
<div class="container-fluid"> <div class="container-fluid">
<div class="row"> <div class="row gap-1-rem">
<div class="col-12"> <div class="col-12">
<mat-form-field class="w-100"> <mat-form-field class="w-100">
<input matInput placeholder="{{'ANNOTATION-SERVICE.STATUS-EDITOR.FIELDS.LABEL' | translate}}" [formControl]="formGroup.get('label')" required> <input matInput placeholder="{{'ANNOTATION-SERVICE.STATUS-EDITOR.FIELDS.LABEL' | translate}}" [formControl]="formGroup.get('label')" required>
@ -52,7 +52,7 @@
<div class="col-12"> <div class="col-12">
<mat-form-field class="w-100"> <mat-form-field class="w-100">
<mat-label>{{'ANNOTATION-SERVICE.STATUS-EDITOR.FIELDS.INTERNAL-STATUS' | translate}}</mat-label> <mat-label>{{'ANNOTATION-SERVICE.STATUS-EDITOR.FIELDS.INTERNAL-STATUS' | translate}}</mat-label>
<mat-select [formControl]="formGroup.get('internalStatus')"> <mat-select [formControl]="formGroup.get('internalStatus')" required>
<mat-option *ngFor="let internalStatus of internalStatusEnum" [value]="internalStatus">{{enumUtils.toInternalStatusString(internalStatus)}}</mat-option> <mat-option *ngFor="let internalStatus of internalStatusEnum" [value]="internalStatus">{{enumUtils.toInternalStatusString(internalStatus)}}</mat-option>
<mat-option [value]="null">{{'ANNOTATION-SERVICE.STATUS-EDITOR.DEFAULT-VALUE.NONE' | translate}}</mat-option> <mat-option [value]="null">{{'ANNOTATION-SERVICE.STATUS-EDITOR.DEFAULT-VALUE.NONE' | translate}}</mat-option>
</mat-select> </mat-select>

View File

@ -3,7 +3,7 @@
[skipText]="'DASHBOARD.TOUR-GUIDE.LEAVE-TOUR'| translate" [skipText]="'DASHBOARD.TOUR-GUIDE.LEAVE-TOUR'| translate"
[nextText]="'DASHBOARD.TOUR-GUIDE.GOT-IT'| translate" [nextText]="'DASHBOARD.TOUR-GUIDE.GOT-IT'| translate"
></ngx-guided-tour> ></ngx-guided-tour>
<button class="skip-to-main-content" (click)="skipToMain()" tabindex="1">{{'ALT-TEXT.SKIP-TO-MAIN-CONTENT' | translate}}</button> <button class="skip-to-main-content" (click)="skipToMain()" tabindex="0">{{'ALT-TEXT.SKIP-TO-MAIN-CONTENT' | translate}}</button>
<div id="cookies-consent"></div> <div id="cookies-consent"></div>
<div class="wrapper" *ngIf="!showOnlyRouterOutlet"> <div class="wrapper" *ngIf="!showOnlyRouterOutlet">
<app-navbar (sidebarToggled)="sidenav.toggle(); toggleNavbar($event);"></app-navbar> <app-navbar (sidebarToggled)="sidenav.toggle(); toggleNavbar($event);"></app-navbar>

View File

@ -28,7 +28,7 @@
<div class="row"> <div class="row">
<div class="col-12"> <div class="col-12">
<div class="container-fluid"> <div class="container-fluid">
<div class="row"> <div class="row" style="row-gap: 0.5rem">
<div class="col-6" *ngIf="isNew"> <div class="col-6" *ngIf="isNew">
<mat-form-field class="w-100"> <mat-form-field class="w-100">
<mat-label>{{'LANGUAGE-EDITOR.FIELDS.CODE' | translate}}</mat-label> <mat-label>{{'LANGUAGE-EDITOR.FIELDS.CODE' | translate}}</mat-label>

View File

@ -76,7 +76,7 @@
<div class="col-12"> <div class="col-12">
<div *ngFor="let field of formGroup.get('definition').get('fields').controls; let fieldIndex=index;" class="row mb-3"> <div *ngFor="let field of formGroup.get('definition').get('fields').controls; let fieldIndex=index;" class="row mb-3">
<div class="col-12"> <div class="col-12">
<div class="row d-flex align-items-center"> <div class="row d-flex align-items-center" style="row-gap: 0.5rem">
<div class="col-auto pb-3 d-flex"> <div class="col-auto pb-3 d-flex">
<span>{{fieldIndex + 1}}</span> <span>{{fieldIndex + 1}}</span>
</div> </div>

View File

@ -25,7 +25,7 @@
<form *ngIf="formGroup" (ngSubmit)="formSubmit()"> <form *ngIf="formGroup" (ngSubmit)="formSubmit()">
<mat-card class="pt-3 pb-3" appearance="outlined"> <mat-card class="pt-3 pb-3" appearance="outlined">
<mat-card-content> <mat-card-content>
<div class="row"> <div class="row" style="row-gap: 0.5rem">
<div class="col-4"> <div class="col-4">
<mat-form-field class="w-100"> <mat-form-field class="w-100">
<mat-label>{{'REFERENCE-EDITOR.FIELDS.LABEL' | translate}}</mat-label> <mat-label>{{'REFERENCE-EDITOR.FIELDS.LABEL' | translate}}</mat-label>

View File

@ -1,5 +1,5 @@
<div class="row"> <div class="row" style="row-gap: 0.5rem">
<div class="col-3"> <div class="col-3">
<mat-form-field class="w-100"> <mat-form-field class="w-100">
<mat-label>{{'EXTERNAL-FETCHER-SOURCE-EDITOR.FIELDS.KEY' | translate}}</mat-label> <mat-label>{{'EXTERNAL-FETCHER-SOURCE-EDITOR.FIELDS.KEY' | translate}}</mat-label>

View File

@ -9,6 +9,10 @@
background-color: white; background-color: white;
color: #009700; //todo mchouliara color: #009700; //todo mchouliara
} }
.row {
row-gap: 0.5rem;
}
} }