From 8803c6d6450a062cad4e110c1d92fbc01256ccfb Mon Sep 17 00:00:00 2001 From: Carlota Date: Thu, 4 Apr 2024 12:34:41 +0200 Subject: [PATCH] botones mediaqueris --- git checkout eventos3 | 7 ++ .../add-event/add-event.component.css | 12 +++- .../detail-event/detail-event.component.ts | 72 ++++++++++++++----- .../edit-event/edit-event.component.css | 13 ++-- .../components/header/header.component.css | 25 +++++-- .../components/header/header.component.html | 4 +- src/app/pages/evento/evento.component.css | 55 ++++++++++++-- src/app/pages/evento/evento.component.html | 16 ++--- src/app/pages/evento/evento.component.ts | 45 ++++++++---- src/app/shared/eventos.service.ts | 12 ++-- 10 files changed, 197 insertions(+), 64 deletions(-) create mode 100644 git checkout eventos3 diff --git a/git checkout eventos3 b/git checkout eventos3 new file mode 100644 index 0000000..497a2b6 --- /dev/null +++ b/git checkout eventos3 @@ -0,0 +1,7 @@ + comp_carta + eventos + eventos2 + eventos3 + footer + header +* master diff --git a/src/app/components/add-event/add-event.component.css b/src/app/components/add-event/add-event.component.css index 33b77d8..2d094fe 100644 --- a/src/app/components/add-event/add-event.component.css +++ b/src/app/components/add-event/add-event.component.css @@ -1,7 +1,7 @@ section{ position: absolute; - top: 300px; - left: 700px; + top: 20%; + left: 35%; z-index: 30; } .modalEdit{ @@ -83,4 +83,10 @@ input::placeholder, textarea::placeholder{ .buttonEditar:hover, .saveButton:hover{ background-color: var(--blanco); -} \ No newline at end of file +} + +@media (max-width: 1200px) { + section{ + left: 27%; + } +} diff --git a/src/app/components/detail-event/detail-event.component.ts b/src/app/components/detail-event/detail-event.component.ts index 1fdc7f7..990b998 100644 --- a/src/app/components/detail-event/detail-event.component.ts +++ b/src/app/components/detail-event/detail-event.component.ts @@ -24,24 +24,60 @@ export class DetailEventComponent implements OnInit{ ngOnInit() { - this.getparticipantes(); + this.getParticipantes(); } - getparticipantes(){ - this.eventoService.getParticipantes(this.evento.id_event).subscribe((res:any) => { - if(!res.error){ - this.evento.participants = []; - res.data.forEach(evento => { - console.log(res.data); - - if(evento.creatorEvent == 1){ - this.evento.creator = evento.nameUser - } else { - this.evento.participants.push(new User(evento.id_user, evento.nameUser)) - } - }); - } - }) + getParticipantes() { + this.eventoService.getParticipantes(this.evento.id_event).subscribe((res: any) => { + if (!res.error) { + this.evento.participants = []; + res.data.forEach(evento => { + if (evento.creatorEvent === 1) { + this.evento.creator = evento.nameUser; + } else { + this.evento.participants.push(new User(evento.id_user, evento.nameUser)); + } + }); + // Call comprobarParticipacion() here after participants are populated + this.comprobarParticipacion(); + } else { + // Handle errors appropriately (e.g., console.error(res.error)) + } + }); +} + + comprobarParticipacion(){ + + let encontrado = false; + + if(this.evento != null && this.evento.participants != null && this.evento.participants.length > 0){ + + for(let i = 0; i < this.evento.participants.length; i++){ + console.log(this.evento.participants[i].id_user); + console.log(this.user.id_user); + + + if(this.evento.participants[i].id_user == this.user.id_user){ + + encontrado = true; + break; + } + } + } + + + if(encontrado){ + this.type = 1; + }else{ + if(this.evento.id_user == this.user.id_user) + { + console.log("SOY EL CREADOR"); + this.type = 3; + }else{ + this.type = 2; + } + } + } closeDetail(){ @@ -53,7 +89,7 @@ export class DetailEventComponent implements OnInit{ if(!res.error){ this.toastr.success(res.mensaje, '¡Bienvenido al evento!'); this.evento.participants = []; - this.getparticipantes(); + this.getParticipantes(); } else{ this.toastr.error(res.mensaje, '¡Ups!' ) } @@ -65,7 +101,7 @@ export class DetailEventComponent implements OnInit{ this.eventoService.deleteParticipacion(this.user.id_user, this.evento.id_event).subscribe((res:any) =>{ if(!res.error){ this.toastr.error(res.mensaje, 'Éxito') - this.getparticipantes(); + this.getParticipantes(); } }) } diff --git a/src/app/components/edit-event/edit-event.component.css b/src/app/components/edit-event/edit-event.component.css index f4ed7e8..62e6248 100644 --- a/src/app/components/edit-event/edit-event.component.css +++ b/src/app/components/edit-event/edit-event.component.css @@ -1,7 +1,8 @@ main{ position: absolute; - top: 300px; - left: 700px; + top: 20%; + left: 35%; + /* z-index: 30; */ } .modalEdit{ width: 500px; @@ -10,7 +11,6 @@ main{ background-size: cover; border-radius: var(--borde-cuadrado); border: solid var(--amarillo) 1px; - display: flex; flex-direction: column; align-items: center; @@ -18,7 +18,6 @@ main{ gap: 30px; } - .titulo{ color: var(--amarillo); font-family: var(--antiqua); @@ -84,4 +83,10 @@ input::placeholder, textarea::placeholder{ .buttonEditar:hover, .saveButton:hover{ background-color: var(--blanco); +} + +@media (max-width: 1200px) { + main{ + left: 27%; + } } \ No newline at end of file diff --git a/src/app/components/header/header.component.css b/src/app/components/header/header.component.css index fed951c..935a890 100644 --- a/src/app/components/header/header.component.css +++ b/src/app/components/header/header.component.css @@ -1,7 +1,5 @@ header{ font-family: var(--antiqua)!important; -} -header{ background-color: black; text-align: center; height: 200px; @@ -53,7 +51,6 @@ img{ } /* CSS ANIMACION */ - .icono { width: 50px; height: 50px; @@ -95,11 +92,11 @@ header nav ul li:hover .children { display:block; } header nav ul li .children { - display: none; + display: none; background:#000000; position: absolute; - left: 20px; - width: 150px; + left: 15%; + width: 200px; z-index:1000; } header nav ul li .children li { @@ -142,4 +139,20 @@ header nav ul li .children li a { } .dropdown-child span:hover { background-color: rgba(132, 133, 133, 0.096); +} + + +@media (max-width: 1200px) { + header nav ul li .children { + left: 13%; + width: 150px; + + } +} + +@media (max-width: 900px) { + header nav ul li .children { + left: 13%; + width: 120px; + } } \ No newline at end of file diff --git a/src/app/components/header/header.component.html b/src/app/components/header/header.component.html index c61bf37..ee28775 100644 --- a/src/app/components/header/header.component.html +++ b/src/app/components/header/header.component.html @@ -45,8 +45,8 @@

Eventos

diff --git a/src/app/pages/evento/evento.component.css b/src/app/pages/evento/evento.component.css index 2a0c16e..c0d3994 100644 --- a/src/app/pages/evento/evento.component.css +++ b/src/app/pages/evento/evento.component.css @@ -65,7 +65,7 @@ text-align: center; padding-top: 27px; padding-bottom: 10px; - size: 20px; + font-size: 20px; } #contenedor_info{ display: flex; @@ -78,7 +78,6 @@ position: relative; /*padre de marco-container*/ } .marco-container{ - position:absolute; bottom: 13px; position: relative; width: 192px; /* mismo como marco*/ @@ -95,6 +94,7 @@ .marco { width: 100%; height: auto; + margin-top: 30px; } .nameuser { position: absolute; @@ -145,7 +145,7 @@ font-size: 18px; } #button_sabermas{ - position: absolute; /*!hijo de #div_info_evento*/ + /* position: absolute; !hijo de #div_info_evento */ bottom: -38px; right: 40px; height: 40px; @@ -192,6 +192,7 @@ #img_superior{ margin-top: 15px; } + /* fin iconos */ /* pagination */ @@ -230,6 +231,15 @@ z-index: 999; } +@media (max-width: 1200px) { + #img_evento { + width: 70%; /* Ajusta el tamaño según tu diseño */ + } + #img_superior, #img_inferior{ + width:30px + } +} + @media (max-width: 768px) { #img_evento { width: 80%; /* Ajusta el tamaño según tu diseño */ @@ -237,14 +247,51 @@ #img_superior, #img_inferior{ width:5px } + h1{ + font-size: 15px; + } } -@media (max-width: 1200px) { +@media (max-width: 1328px) { #img_evento { width: 70%; /* Ajusta el tamaño según tu diseño */ } #img_superior, #img_inferior{ width:30px } + h1{ + font-size: 30px; + } + h2{ + font-size: 20px; + } + #button_sabermas, .p_pagiantion{ + font-size: 15px; + } +} + +@media (max-width: 1140px) { + h1{ + font-size: 27px; + } + h2{ + font-size: 18px; + } + #button_sabermas, .p_pagiantion, .paginationSpan{ + font-size: 12px; + } + .icono_evento{ + width: 20px; + margin-left: 20px; + } + .marco{ + margin-top: 20px; + margin-left: 10px; + } + .btnBuscador { + + background-size: 40px; + + } } diff --git a/src/app/pages/evento/evento.component.html b/src/app/pages/evento/evento.component.html index c20a224..35499b9 100644 --- a/src/app/pages/evento/evento.component.html +++ b/src/app/pages/evento/evento.component.html @@ -5,7 +5,7 @@ @@ -41,27 +41,27 @@

{{ item.creator.nameUser }}

-->

  {{ item.place }} , {{ item.direction }}

+
-
+
-
- -
+
- + +
- - + +