Skip to content
This repository has been archived by the owner on Feb 4, 2025. It is now read-only.

Commit

Permalink
Merge pull request #193 from CampusDual/BFS42024-248
Browse files Browse the repository at this point in the history 
BFS42024-248
  • Loading branch information
@marcospaab
marcospaab authored Dec 11, 2024
2 parents b8cf23e + 00257e6 commit 20f63de
Show file tree
Hide file tree
Showing 2 changed files with 163 additions and 69 deletions.
148 changes: 120 additions & 28 deletions ...4bfs4g1-frontend/src/main/ngx/src/app/main/data/personal-info/personal-info.component.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,39 +3,141 @@
margin: 5px auto;
background-color: #f5f0f2;
border-radius: 15px;
gap: 10px;
padding: 10px;
display: grid;
grid-template-columns: 1fr 1fr 1fr;
gap: 10px;
grid-template-columns: 1fr 1fr 2fr 1fr;
}

.datosPersonales {
grid-column: 1 / -1;
grid-column: 1/3
}

.foto {
grid-column: 1 / 4;
justify-self: center;
align-self: center;
margin-bottom: 0;
display: flex;
align-items: center;
margin-top: -30px; /* Ajusta según sea necesario */
display: flex;
justify-content: center;
margin-bottom: 30px;
align-items: flex-start;
border-radius: 50%; /* Hace que la imagen sea circular */
transition: box-shadow 0.3s ease, transform 0.3s ease; /* Suaviza la transición */
width: 200px;
}

.foto:hover {
box-shadow: 0 0 20px 10px #1a3459; /* Crea el efecto de aura */
transform: scale(0.9); /* Agranda ligeramente la imagen al pasar el ratón */
background-color: #1a3459;
border-radius: 50%;
}


.separatorCol {
padding-top: 0; /* Elimina cualquier padding innecesario */
}


.datosPrincipales2{
height: 26%;
}

.fraseInfo{
color: gray;
padding-top: 20px;
font-size: 20px;
}

.personal-data-fields {
display: grid;
grid-template-columns: 1fr 1fr;
}

.nombre{
display: flex;
flex-wrap: wrap;
gap: 15px;
justify-content: space-evenly;
gap:10px
}

.apellido{
display: flex;
gap:10px
}

.apellido2{
display: flex;
gap:10px
}

.dni{
display:flex;
gap:10px;
}

.telefono{
display:flex;
gap:10px;
}

.fechaCumple{
display:flex;
gap:10px;
}

.location{
display:flex;
gap:10px;
}

.employmentStatus{
display: flex;
gap: 10px;
}

.emailCampus{
display:flex;
gap: 10px;
}

.email{
display:flex;
gap: 5px;
}

.fctSchool{
display:flex;
gap: 10px;
}

.tutor{
display:flex;
gap:10px;
}

.fctStart{
display: flex;
gap:10px;
}

.fctEnd{
display:flex;
gap:10px;
}

.udemy{
display:flex;
gap: 10px;
}

.githubUser{
display:flex;
gap:10px;
}

.separatorCol{
padding-top: -50%;
}

p {
color: black;
margin-top: 0;
margin-top: 0px;
}
p:last-child{
margin-bottom: 0;
Expand All @@ -47,21 +149,11 @@ fieldset {
border: solid 2px #1a3459;
border-radius: 15px;
}
.p_info_foto{
font-size: 12px;
grid-column: 1 / 4;
justify-self: center;
align-self: center;
display: flex;
align-items: center;
justify-content: center;
color: #1a3459;
}
.foto_centrada{
display: block;
}


@media (max-width: 1024px) {
.grid-container {
grid-template-columns: 1fr ;
}
}
}

84 changes: 43 additions & 41 deletions ...bfs4g1-frontend/src/main/ngx/src/app/main/data/personal-info/personal-info.component.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,96 +8,98 @@

<fieldset class="datosPersonales" title="{{'Personal Data' | oTranslate}}">
<legend>{{'Personal Data' | oTranslate}}</legend>
<div class="personal-data-grid">
<div class="foto">
<o-image class="foto_centrada" #UsrPhoto attr="usr_photo" empty-image="assets/images/no-image.png"
sql-type="OTHER" class="avatar" (onChange)="onImageChange($event)"
max-file-size="409600" accept-file-type="image/png,image/jpeg,image/gif,image/jpg"
label="PROFILE.EDIT_PHOTO" ></o-image>

</div>
<p class="p_info_foto">{{'Info_foto' | oTranslate}}</p>

<div class="personal-data-fields">
<div class="nombre">
<label for="name">{{'DNAME'|oTranslate}}</label>
<p class="pmydata">{{form.getDataValue('name').value}}</p>
</div>
<div class="apellido">
<label for="surname1">{{'DSURNAME1'|oTranslate}}</label>
<p class="pmydata">{{form.getDataValue('surname1').value}}</p>
</div>
<div class="apellido2">
<label for="surname2">{{'LSURNAME2' | oTranslate}}</label>
<p class="pmydata">{{form.getDataValue('surname2').value}}</p>
</div>
<div class="dni">
<label for="LDNI">{{'DDNI' | oTranslate}}</label>
<p class="pmydata">{{form.getDataValue('dni').value}}</p>
</div>
<div class="telefono">
<label for="LPHONE">{{'DPHONE' | oTranslate}}</label>
<p class="pmydata">{{form.getDataValue('phone').value}}</p>
<div class="separatorCol">
<div class="nombre">
<label for="name">{{'DNAME'|oTranslate}} :</label>
<p class="pmydata">{{form.getDataValue('name').value}}</p>
</div>
<div class="apellido">
<label for="surname1">{{'DSURNAME1'|oTranslate}} :</label>
<p class="pmydata">{{form.getDataValue('surname1').value}}</p>
</div>
<div class="apellido2">
<label for="surname2">{{'LSURNAME2' | oTranslate}} :</label>
<p class="pmydata">{{form.getDataValue('surname2').value}}</p>
</div>
<div class="dni">
<label for="LDNI">{{'DDNI' | oTranslate}} :</label>
<p class="pmydata">{{form.getDataValue('dni').value}}</p>
</div>
<div class="telefono">
<label for="LPHONE">{{'DPHONE' | oTranslate}} :</label>
<p class="pmydata">{{form.getDataValue('phone').value}}</p>
</div>
</div>
<div class="separatorCol">
<div class="foto">
<o-image class="foto_centrada" #UsrPhoto attr="usr_photo" empty-image="assets/images/no-image.png"
sql-type="OTHER" class="avatar" (onChange)="onImageChange($event)" max-file-size="409600"
accept-file-type="image/png,image/jpeg,image/gif,image/jpg" show-controls="No"></o-image>

</div>
</div>
</div>
</fieldset>

<fieldset class="datosPrincipales1" title="{{'Academic Data' | oTranslate}}">
<legend>{{'Academic Data' | oTranslate}}</legend>
<div class="employmentStatus">
<label for="employment_status">{{'DEMSTATUS' | oTranslate}}</label>
<label for="employment_status">{{'DEMSTATUS' | oTranslate}} :</label>
<p class="pmydata">{{form.getDataValue('employment_status').value}}</p>
</div>
<div class="fechaCumple">
<label for="LBIRTHDATE">{{'DBIRTHDATE' | oTranslate}}</label>
<label for="LBIRTHDATE">{{'DBIRTHDATE' | oTranslate}} :</label>
<p class="pmydata">{{form.getDataValue('birth_date').value | date:'dd/MM/yyyy'}}</p>
</div>
<div class="location">
<label for="location">{{'LLOCATION' | oTranslate}}</label>
<label for="location">{{'LLOCATION' | oTranslate}} :</label>
<p class="pmydata">{{form.getDataValue('location').value}}</p>
</div>
<div class="emailCampus">
<label for="LCAMPUS_EMAIL">{{'LCAMPUS_EMAIL' | oTranslate}}</label>
<label for="LCAMPUS_EMAIL">{{'LCAMPUS_EMAIL' | oTranslate}} :</label>
<p class="pmydata">{{form.getDataValue('campus_email').value}}</p>
</div>
<div class="email">
<label for="LEMAIL">{{'DEMAIL'|oTranslate}}</label>
<label for="LEMAIL">{{'DEMAIL'|oTranslate}} :</label>
<p class="pmydata">{{form.getDataValue('personal_email').value}}</p>
</div>
</fieldset>

<div class="AdditionalInformation">
<fieldset class="fct-container" title="{{'FCT Information' | oTranslate}}">
<legend>{{'FCT Information' | oTranslate}}</legend>
<div class="fctSchool">
<label for="fct_school">{{'LFCT_SCHOOL' | oTranslate}}</label>
<label for="fct_school">{{'LFCT_SCHOOL' | oTranslate}} :</label>
<p class="pmydata">{{form.getDataValue('fct_school').value}}</p>
</div>
<div class="tutor">
<label for="tutor">{{'LTUTOR' | oTranslate}}</label>
<label for="tutor">{{'LTUTOR' | oTranslate}} :</label>
<p class="pmydata">{{form.getDataValue('tutor').value}}</p>
</div>
<div class="fctStart">
<label for="LFCT_START">{{'LFCT_START' | oTranslate}}</label>
<label for="LFCT_START">{{'LFCT_START' | oTranslate}} :</label>
<p class="pmydata">{{form.getDataValue('fct_start').value | date:'dd/MM/yyyy'}}</p>
</div>
<div class="fctEnd">
<label for="LFCT_END">{{'LFCT_END' | oTranslate}}</label>
<label for="LFCT_END">{{'LFCT_END' | oTranslate}} :</label>
<p class="pmydata">{{form.getDataValue('fct_end').value | date:'dd/MM/yyyy'}}</p>
</div>
</fieldset>

<fieldset class="datosPrincipales2" title="{{'Additional Information' | oTranslate}}">
<legend>{{'Additional Information' | oTranslate}}</legend>
<div class="udemy">
<label for="LUDEMY">{{'LUDEMY' | oTranslate}}</label>
<label for="LUDEMY">{{'LUDEMY' | oTranslate}} :</label>
<p class="pmydata">{{form.getDataValue('udemy').value ? 'Yes' : 'No'}}</p>
</div>
<div class="githubUser">
<label for="LGITHUB_USER">{{ 'LGITHUB_USER' | oTranslate }}</label>
<label for="LGITHUB_USER">{{ 'LGITHUB_USER' | oTranslate }} :</label>
<p class="pmydata">{{form.getDataValue('github_user').value}}</p>
</div>
</fieldset>
</div>
</div>
</o-form>
</div>
</o-form-layout-manager>
</o-form-layout-manager>

0 comments on commit 20f63de

Please sign in to comment.