style: changed modal dimensions and moved content layout to guest selection

Front/src/app/modules/Administrador/pages/calendar/calendar.component.ts

@@ -107,7 +107,8 @@ export class CalendarComponent implements OnInit {
 
   openDialog() {
     this.dialog.open(ModalEvent, {
-      autoFocus: false
+      autoFocus: false,
+      width: '1600px',
     });
   }
 }

Front/src/app/modules/Administrador/pages/calendar/modalEvent.component.html

@@ -14,109 +14,116 @@
 
     <!-- <form (ngSubmit)="crearNivelEducativo()" [formGroup]="form"> -->
     <form (ngSubmit)="crearEvento()" [formGroup]="form">
-        <div class="mt-20 responsive flex-col">
-            <label for="titulo">Título del Evento</label>
-            <mat-form-field style="width: 100%;">
-
-                <mat-label>Añade un Título</mat-label>
-                <input type="text" matInput name="titulo" formControlName="titulo" id="titulo">
-                <!-- <mat-icon matSuffix>search</mat-icon> -->
-            </mat-form-field>
-
-            <div class="fila-inputs">
-
-                <div class="flex-col w-40">
-                    <label for="fechaInicio">Fecha Inicio</label>
-                    <div>
-                        <mat-form-field style="width: 140px;">
-                            <mat-label>Desde</mat-label>
-                            <input matInput [matDatepicker]="pickerStart" name="fechaInicio" id="fechaInicio"
-                                formControlName="fechaInicio">
-                            <!-- <mat-hint>MM/DD/YYYY</mat-hint> -->
-                            <mat-datepicker-toggle matIconSuffix [for]="pickerStart"></mat-datepicker-toggle>
-                            <mat-datepicker #pickerStart></mat-datepicker>
-                        </mat-form-field>
+        <div style="display: flex; flex-direction: row; gap: 20px; width: 100%;">
+            <div class="mt-20 responsive flex-col" style="width: 65%;">
+                <label for="titulo">Título del Evento</label>
+                <mat-form-field style="width: 100%;">
+
+                    <mat-label>Añade un Título</mat-label>
+                    <input type="text" matInput name="titulo" formControlName="titulo" id="titulo">
+                    <!-- <mat-icon matSuffix>search</mat-icon> -->
+                </mat-form-field>
+
+                <div class="fila-inputs">
+
+                    <div class="flex-col w-40">
+                        <label for="fechaInicio">Fecha Inicio</label>
+                        <div>
+                            <mat-form-field style="width: 140px;">
+                                <mat-label>Desde</mat-label>
+                                <input matInput [matDatepicker]="pickerStart" name="fechaInicio" id="fechaInicio"
+                                    formControlName="fechaInicio">
+                                <!-- <mat-hint>MM/DD/YYYY</mat-hint> -->
+                                <mat-datepicker-toggle matIconSuffix [for]="pickerStart"></mat-datepicker-toggle>
+                                <mat-datepicker #pickerStart></mat-datepicker>
+                            </mat-form-field>
+
+                            <mat-form-field class="ml-10" style="width: 140px;">
+                                <mat-label>Hora</mat-label>
+                                <mat-select matNativeControl name="horaInicio" formControlName="horaInicio">
+                                    <mat-option *ngFor="let hora of horasDelDia" [value]="hora.hora24">{{hora.hora12}}
+                                    </mat-option>
+                                </mat-select>
+                            </mat-form-field>
+                        </div>
 
-                        <mat-form-field class="ml-10" style="width: 140px;">
-                            <mat-label>Hora</mat-label>
-                            <mat-select matNativeControl name="horaInicio" formControlName="horaInicio">
-                                <mat-option *ngFor="let hora of horasDelDia" [value]="hora.hora24">{{hora.hora12}}
-                                </mat-option>
-                            </mat-select>
-                        </mat-form-field>
                     </div>
+                    <strong class="items-center mx-15">a</strong>
+                    <div class="flex-col  w-40">
+                        <label for="fechaFin">Fecha Final</label>
+                        <div>
+                            <mat-form-field style="width: 140px;">
+                                <mat-label>Hasta</mat-label>
+                                <input matInput [matDatepicker]="pickerEnd" name="fechaFin" formControlName="fechaFin"
+                                    id="fechaFin">
+                                <!-- <mat-hint>MM/DD/YYYY</mat-hint> -->
+                                <mat-datepicker-toggle matIconSuffix [for]="pickerEnd"></mat-datepicker-toggle>
+                                <mat-datepicker #pickerEnd></mat-datepicker>
+                            </mat-form-field>
+
+                            <mat-form-field class="ml-10" style="width: 140px;">
+                                <mat-label>Hora</mat-label>
+                                <mat-select matNativeControl name="horaFinal" formControlName="horaFinal">
+                                    <mat-option *ngFor="let hora of horasDelDia" [value]="hora.hora24">{{hora.hora12}}
+                                    </mat-option>
+                                </mat-select>
+                            </mat-form-field>
+                        </div>
 
+                    </div>
                 </div>
-                <strong class="items-center mx-15">a</strong>
-                <div class="flex-col  w-40">
-                    <label for="fechaFin">Fecha Final</label>
-                    <div>
-                        <mat-form-field style="width: 140px;">
-                            <mat-label>Hasta</mat-label>
-                            <input matInput [matDatepicker]="pickerEnd" name="fechaFin" formControlName="fechaFin"
-                                id="fechaFin">
-                            <!-- <mat-hint>MM/DD/YYYY</mat-hint> -->
-                            <mat-datepicker-toggle matIconSuffix [for]="pickerEnd"></mat-datepicker-toggle>
-                            <mat-datepicker #pickerEnd></mat-datepicker>
-                        </mat-form-field>
 
-                        <mat-form-field class="ml-10" style="width: 140px;">
-                            <mat-label>Hora</mat-label>
-                            <mat-select matNativeControl name="horaFinal" formControlName="horaFinal">
-                                <mat-option *ngFor="let hora of horasDelDia" [value]="hora.hora24">{{hora.hora12}}
-                                </mat-option>
-                            </mat-select>
-                        </mat-form-field>
-                    </div>
 
-                </div>
-            </div>
+                <mat-checkbox class="example-margin" style="font-size: 16px;" name="todoDia" formControlName="todoDia"
+                    (change)="onTodoDiaChange($event)">
+                    Todo
+                    el día</mat-checkbox>
 
+                <mat-form-field class="w-49">
+                    <mat-label>Categoría</mat-label>
+                    <mat-select matNativeControl name="categoria" formControlName="categoria">
+                        <mat-option *ngFor="let categoria of catEventos" [value]="categoria.value">
+                            <mat-icon [style.color]="categoria.value">circle</mat-icon>
+                            {{categoria.text}}
+                        </mat-option>
+                    </mat-select>
+                </mat-form-field>
 
-            <mat-checkbox class="example-margin" style="font-size: 16px;" name="todoDia" formControlName="todoDia"
-                (change)="onTodoDiaChange($event)">
-                Todo
-                el día</mat-checkbox>
-
-            <mat-form-field class="w-49">
-                <mat-label>Categoría</mat-label>
-                <mat-select matNativeControl name="categoria" formControlName="categoria">
-                    <mat-option *ngFor="let categoria of catEventos" [value]="categoria.value">
-                        <mat-icon [style.color]="categoria.value">circle</mat-icon>
-                        {{categoria.text}}
-                    </mat-option>
-                </mat-select>
-            </mat-form-field>
-
-            <div class="flex-col">
-                <label for="audiencia">Invitados</label>
-                <div id="audiencia">
-                    <mat-form-field class="w-49">
-                        <mat-label>Audiencia</mat-label>
-                        <mat-select name="audiencia" formControlName="audiencia"
-                            (selectionChange)="onAudienciaChange($event.value)">
-                            <mat-option *ngFor="let option of audiencia"
-                                [value]="option.value">{{option.audiencia}}</mat-option>
-                        </mat-select>
-                    </mat-form-field>
-
-                    <mat-form-field class="w-49 ml-10">
-                        <mat-label>Destinos</mat-label>
-                        <mat-select name="destinos" formControlName="destinos">
-                            <mat-optgroup *ngFor="let opcion of opciones1" [label]="opcion.name">
-                                <mat-option *ngFor="let grupo of opcion.grupo"
-                                    [value]="grupo.value">{{grupo.viewValue}}</mat-option>
-                            </mat-optgroup>
-                        </mat-select>
-                    </mat-form-field>
+
+
+                <div class="NgxEditor__Wrapper" style="min-height: 200px; height: auto;">
+                    <ngx-editor-menu [editor]="editor" [toolbar]="toolbar" [colorPresets]="colorPresets">
+                    </ngx-editor-menu>
+                    <ngx-editor [editor]="editor" formControlName="contenido"> </ngx-editor>
                 </div>
-            </div>
 
-            <div class="NgxEditor__Wrapper" style="min-height: 200px; height: auto;">
-                <ngx-editor-menu [editor]="editor" [toolbar]="toolbar" [colorPresets]="colorPresets"> </ngx-editor-menu>
-                <ngx-editor [editor]="editor" formControlName="contenido"> </ngx-editor>
             </div>
+            <div>
+
+                <div class="flex-col mt-20 ">
+                    <label for="audiencia">Invitados</label>
+                    <div id="audiencia">
+                        <mat-form-field style="width: 100%;">
+                            <mat-label>Audiencia</mat-label>
+                            <mat-select name="audiencia" formControlName="audiencia"
+                                (selectionChange)="onAudienciaChange($event.value)">
+                                <mat-option *ngFor="let option of audiencia"
+                                    [value]="option.value">{{option.audiencia}}</mat-option>
+                            </mat-select>
+                        </mat-form-field>
 
+                        <mat-form-field style="width: 100%;">
+                            <mat-label>Destinos</mat-label>
+                            <mat-select name="destinos" formControlName="destinos">
+                                <mat-optgroup *ngFor="let opcion of opciones1" [label]="opcion.name">
+                                    <mat-option *ngFor="let grupo of opcion.grupo"
+                                        [value]="grupo.value">{{grupo.viewValue}}</mat-option>
+                                </mat-optgroup>
+                            </mat-select>
+                        </mat-form-field>
+                    </div>
+                </div>
+            </div>
         </div>