Skip to content

Commit

Permalink
Merge pull request #47 from ProyectoIntegrador2018/style/user
Browse files Browse the repository at this point in the history 
Adds style to user pages
  • Loading branch information
@bmbrina
bmbrina authored Mar 30, 2019
2 parents f21aa45 + 77fc6bc commit 3007e94
Show file tree
Hide file tree
Showing 10 changed files with 435 additions and 188 deletions.
4 changes: 2 additions & 2 deletions src/app/components/home/home.component.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -270,7 +270,7 @@
letter-spacing: 0.76px;
}

input {
.custom-input {
border: none;
border-bottom: 1px solid $border-color;
display: block;
Expand Down Expand Up @@ -347,7 +347,7 @@

&__sponsors {
margin-top: 30px;

&__title {
justify-content: center;
margin-top: 30px;
Expand Down
31 changes: 11 additions & 20 deletions src/app/components/user/avisos/avisos.component.html
View file
Original file line number Diff line number Diff line change
@@ -1,24 +1,15 @@
<div class="container-fluid">
<div class="row">
<div class="col-md-12">
<h3>Avisos</h3>
<div class="card-columns" *ngIf="avisos.length > 0 && loading != null">
<mat-card *ngFor="let a of avisos">
<mat-card-header>
<mat-card-title>{{a.titulo}}</mat-card-title>
<mat-card-subtitle>{{a.taller}}</mat-card-subtitle>
</mat-card-header>
<mat-card-content>
<p>
{{a.mensaje}}
</p>
</mat-card-content>
</mat-card>
</div>
<div *ngIf="avisos.length < 1 && loading != null">
<h1>Sin Avisos</h1>
<p>Por el momento no hay avisos. Revisa nuevamente más tarde.</p>
<div class="container-fluid ad">
<div class="container">
<div *ngIf="avisos.length > 0 && loading != null">
<div class="ad__item" *ngFor="let a of avisos">
<h4 class="ad__title">{{a.titulo}} <span>{{a.taller}}</span></h4>
<p class="ad__desc">{{a.mensaje}}</p>
<hr>
</div>
</div>
<div *ngIf="avisos.length < 1 && loading != null">
<h4 class="ad__title">Sin Avisos</h4>
<p class="ad__desc">Por el momento no hay avisos. Revisa nuevamente más tarde.</p>
</div>
</div>
</div>
30 changes: 24 additions & 6 deletions src/app/components/user/avisos/avisos.component.scss
View file
Original file line number Diff line number Diff line change
@@ -1,7 +1,25 @@
mat-card {
margin-bottom: 16px;
display: inline-block;
width: 100%;
-webkit-column-break-inside: avoid;
column-break-inside: avoid;
@import '~styles-variables.scss';

.ad {
margin-top: 100px;

&__title {
color: $text-color;
font-size: 38px;
font-weight: bold;
letter-spacing: 1.28px;
margin-bottom: 25px;

span {
color: $color-blue;
font-size: 14px;
text-transform: uppercase;
}
}

&__desc {
font-size: 18px;
font-weight: 300;
letter-spacing: 0.76px;
}
}
57 changes: 23 additions & 34 deletions src/app/components/user/documentos-usuario/documentos-usuario.component.html
View file
Original file line number Diff line number Diff line change
@@ -1,64 +1,53 @@
<div class="container-fluid">
<h2><strong>Documentos Axt@Teen</strong></h2>
<hr>

<div class="row">
<div class="col-md-12">
<h5><strong>Documentos a Imprimir</strong></h5>
<p>Estos son los documentos que se deben de imprimir y subir a la plataforma de Axt@Teen.</p>
<div class="container-fluid documents">
<div class="container">
<div class="documents__section">
<h3 class="documents__section__title">Documentos a Imprimir</h3>
<p class="documents__section__subtitle">Estos son los documentos que se deben de imprimir y subir a la plataforma de Axt@Teen.</p>
<div class="list-group">
<div class="input-group mb-3" *ngFor="let archivo of listaArchivosImprimir">
<div class="input-group">
<input type="text" class="form-control" placeholder="{{archivo.nombre}}" disabled>
<div class="input-group-append">
<a href="{{archivo.url}}" class="btn btn-info">Abrir</a>
</div>
</div>
<a href="{{archivo.url}}" class="documents__item">{{archivo.nombre}}</a>
</div>
</div>
</div>
</div>
<hr>

<div class="row">
<div class="col-md-12">
<h5><strong>Subir Documento</strong></h5>
<div class="documents__section">
<h3 class="documents__section__title">Subir Documento</h3>
<form>
<div class="form-group">
<label for="nombreArchivoInput"><strong>Nombre Archivo:</strong></label>
<input type="text" class="form-control" id="nombreArchivoInput" placeholder="Ingresar Nombre del Archivo" [(ngModel)]="nombreArchivo" [ngModelOptions]="{standalone: true}">
<label for="nombreArchivoInput">Nombre del Archivo:</label>
<input type="text" class="form-control" id="nombreArchivoInput" placeholder="Nombre del Documento"
[(ngModel)]="nombreArchivo" [ngModelOptions]="{standalone: true}">
</div>
<div class="form-group">
<div class="input-group">
<div class="input-group">
<div class="custom-file">
<input type="file" class="custom-file-input" id="archivoInput" (change)="getArchivo($event)">\
<input type="file" id="archivoInput" (change)="getArchivo($event)" placeholder="Seleccionar Archivo">
<label class="custom-file-label" for="archivoInput">Seleccionar Archivo</label>
</div>
<div class="input-group-append">
<button class="btn btn-success" type="button" (click)="uploadDB()">Subir</button>
<button class="btn btn-primary" type="button" (click)="uploadDB()">Subir</button>
</div>
</div>
</div>
</div>
</form>

</div>

<div class="col-md-12">
<h6><strong>Mis Documentos Subidos:</strong></h6>
<div class="documents__section">
<h3 class="documents__section__title">Mis Documentos Subidos</h3>
<div class="list-group" *ngIf="listaArchivoUsuario.length > 0; else elseBlock">
<div class="input-group mb-3" *ngFor="let archivo of listaArchivoUsuario">
<input type="text" class="form-control" placeholder="{{archivo.nombre}}" disabled>
<div class="input-group-append">
<a href="{{archivo.url}}" class="btn btn-success">Abrir</a>
<button class="btn btn-danger" type="button" (click)= deleteArchivo(archivo.archivo_path)>Borrar</button>
<input type="text" class="documents__item" placeholder="{{archivo.nombre}}" disabled>
<div class="documents__actions">
<a href="{{archivo.url}}" class="btn btn-primary">Abrir</a>
<button class="btn btn-danger" type="button" (click)=deleteArchivo(archivo.archivo_path)>Borrar</button>
</div>
</div>
</div>

<ng-template #elseBlock><h5>No se han subido documentos.</h5></ng-template>
<ng-template #elseBlock>
<h3>No se ha subido ningún documento.</h3>
</ng-template>
</div>
</div>

</div>
</div>
118 changes: 118 additions & 0 deletions src/app/components/user/documentos-usuario/documentos-usuario.component.scss
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,118 @@
@import '~styles-variables.scss';
@import "~bootstrap/scss/bootstrap.scss";

.documents {
margin-top: 100px;

&__section {
& + & {
margin-top: 50px;
}

&__title {
color: $text-color;
font-size: 38px;
font-weight: bold;
letter-spacing: 1.28px;
margin-bottom: 25px;
}

&__subtitle {
color: $text-color;
font-size: 18px;
font-weight: 200;
letter-spacing: 0.76px;
margin-bottom: 25px;
}
}

&__item {
background: $color-blue;
color: $color-white;
font-size: 18px;
font-weight: bold;
letter-spacing: 0.61px;
padding: 10px 15px;
width: 650px;

&:hover {
text-decoration: none;
background: darken($color-blue, 10%);
}
}

&__actions {
align-items: center;
display: flex;
margin-left: 30px;

.btn + .btn {
margin-left: 15px;
}
}

.form-group {
width: 60%;
}

.form-control,
.custom-file-label {
color: $placeholder-color;
font-size: 18px;
font-weight: 300;

&::placeholder {
color: $placeholder-color;
}
}

.custom-file-label {
&::after {
background-color: $color-gray;
color: $color-white;
content: "Seleccionar";
}
}

.btn {
&:focus {
box-shadow: none;
}

&-primary {
background-color: $color-blue;
border: 0;
color: $color-white;
}

&-danger {
background-color: $color-red;
border-color: $color-red;
}
}

input {
&.documents__item {
background: $color-blue;
border: 0;
color: $color-white;

&::placeholder {
color: $color-white;
}
}
}
}

/* Phone */
@media only screen and (max-width: 600px) {
.documents {
.form-group {
width: 100%;
}

&__actions {
margin: 15px 0 0;
}
}
}
82 changes: 40 additions & 42 deletions src/app/components/user/inscripcion/inscripcion.component.html
View file
Original file line number Diff line number Diff line change
@@ -1,51 +1,49 @@
<div class="container-fluid">
<h3>Talleres</h3>
<div class="row justify-content-start" *ngIf="estatus">
<div class="col-md-3">
<div class="container-fluid register">
<div class="container">
<h3 class="register__title">Sede</h3>
<div class="register__actions" *ngIf="estatus">
<mat-form-field>
<mat-select [disabled]="sedes.length < 1" placeholder="Selecciona la sede" (selectionChange)="seleccionarSede($event)"
name="sedeselect">
<mat-select [disabled]="sedes.length < 1" placeholder="Selecciona la Sede"
(selectionChange)="seleccionarSede($event)" name="sedeselect">
<mat-option *ngFor="let sede of sedes" [value]="sede.id">{{sede.nombre}}</mat-option>
</mat-select>
</mat-form-field>
</div>
<div class="col-md-4 d-flex align-items-center">
<p style="margin: 0;"> Inscripción actual: <b>{{tallerActual? tallerActual: 'Sin inscripción'}}</b> </p>
</div>
</div>
<div class="card-columns" *ngIf="estatus">
<mat-card *ngFor="let taller of selectedSede.talleres">
<mat-card-header>
<mat-card-title>{{taller.nombre}}</mat-card-title>
</mat-card-header>
<mat-card-content>
<p>
{{taller.descripcion}}
</p>
</mat-card-content>
<mat-card-actions style="text-align:right;">
<button mat-button mat-stroked-button color="primary" *ngIf="!(taller.id == user.idtaller) && taller.inscritos < taller.cupo"
(click)="inscripcion(taller)">Inscribirme</button>
<button mat-button mat-raised-button color="primary" *ngIf="taller.id == user.idtaller && taller.inscritos < taller.cupo"
(click)="quitarInscripcion()">Inscrito
<mat-icon>done</mat-icon>
</button>
<button mat-button color="warn" *ngIf="taller.id != user.idtaller && taller.inscritos >= taller.cupo">Taller
lleno</button>
</mat-card-actions>
</mat-card>
</div>
<div *ngIf="selectedSede.id != 0 && selectedSede.talleres.length < 1 && estatus">
<h1>Sin talleres</h1>
<p>Por el momento no existen talleres de tu categoría en esta sede.</p>
<button mat-flat-button matTooltipPosition="after" matTooltip="La categoría es asignada de manera automática por el sistema según tu edad. Actualmente perteneces a la categoría {{user.categoria}}.">
Más información
</button>
</div>
<div class="items" *ngIf="estatus">
<div class="register__item" *ngFor="let taller of selectedSede.talleres">
<img src="../../../../assets/img/block-1.png">
<div class="text-container">
<h3 class="title">{{taller.nombre}}</h3>
<p class="desc">{{taller.descripcion}}</p>
<div>
<button mat-button mat-stroked-button class="btn-primary"
*ngIf="!(taller.id == user.idtaller) && taller.inscritos < taller.cupo"
(click)="inscripcion(taller)">Inscribirme</button>
<button mat-button mat-raised-button class="btn-primary"
*ngIf="taller.id == user.idtaller && taller.inscritos < taller.cupo"
(click)="quitarInscripcion()">Inscrito
<mat-icon>done</mat-icon>
</button>
<button mat-button color="warn" *ngIf="taller.id != user.idtaller && taller.inscritos >= taller.cupo">Taller
lleno</button>
</div>
</div>
</div>
</div>
<div *ngIf="selectedSede.id != 0 && selectedSede.talleres.length < 1 && estatus">
<h1>Sin talleres</h1>
<p>Por el momento no existen talleres de tu categoría en esta sede.</p>
<button class="btn-primary" mat-flat-button matTooltipPosition="after"
matTooltip="La categoría es asignada de manera automática por el sistema según tu edad. Actualmente perteneces a la categoría {{user.categoria}}.">
Más información
</button>
</div>

<div *ngIf="!estatus && estatus != null">
<h1>Convocatoria inhabilitada</h1>
<p>¡Ups! El período de inscripción a los talleres no ha comenzado o ya concluyó.</p>
<p>Puedes revisar las fechas de convocatoria en la página principal de ApportaTeen.</p>
<div *ngIf="!estatus && estatus != null">
<h1>Convocatoria inhabilitada</h1>
<p>¡Ups! El período de inscripción a los talleres no ha comenzado o ya concluyó.</p>
<p>Puedes revisar las fechas de convocatoria en la página principal de ApportaTeen.</p>
</div>
</div>
</div>
Loading

0 comments on commit 3007e94

Please sign in to comment.