Skip to content

GitLab

Commit 5f58ea7c authored by PradaDIMXLIII's avatar PradaDIMXLIII
Browse files

"modificacion interfaz de usuario fix #14"

parent 30c6b671
Hide whitespace changes
Inline Side-by-side
Showing with 141 additions and 124 deletions
frontend/src/app/core/core.module.ts
View file @ 5f58ea7c
......@@ -4,7 +4,6 @@ import { CommonModule } from '@angular/common';
import { ShellComponent } from './shell/shell.component';
import { HeaderComponent } from './shell/header/header.component';
import { MainComponent } from './shell/main/main.component';
import { FooterComponent } from './shell/footer/footer.component';
import { NotFoundComponent } from './not-found/not-found.component';
import { RouterModule } from '@angular/router';
import { FontAwesomeModule } from '@fortawesome/angular-fontawesome';
......@@ -13,7 +12,7 @@ import { MenuComponent } from './shell/menu/menu.component';
import { AutenticacionService } from '../service/autenticacion.service';
@NgModule({
declarations: [ShellComponent, HeaderComponent, MainComponent, FooterComponent, NotFoundComponent, MenuComponent],
declarations: [ShellComponent, HeaderComponent, MainComponent, NotFoundComponent, MenuComponent],
imports: [
CommonModule,
RouterModule,
......
frontend/src/app/core/shell/footer/footer.component.html deleted 100644 → 0
View file @ 30c6b671
<footer class="pie text-muted bg-light"> <!-- fixed-bottom-->
<div class="container">
<div class="row justify-content-around align-content-center">
<a
class="mx-5 btn btn-link"
href="https://es-es.facebook.com/"
aria-hidden="true"
target="_blank"
>
<fa-icon class="fa-3x" [icon]='faFacebook'></fa-icon>
</a>
<a
class="mx-5 btn btn-link"
href="https://web.whatsapp.com/"
aria-hidden="true"
target="_blank"
>
<fa-icon class="fa-3x" [icon]='faWhatsapp'></fa-icon>
</a>
<a
class="mx-5 btn btn-link"
href="https://www.instagram.com/"
aria-hidden="true"
target="_blank"
>
<fa-icon class="fa-3x" [icon]='faInstagram'></fa-icon>
</a>
<a
class="mx-5 btn btn-link"
href="mailto:direcciondeemail@prueba.org?subject=Tema&cc=otroemail@pruebas.org&body=Cuerpo del mensaje"
aria-hidden="true"
target="_blank">
<fa-icon class="fa-3x" [icon]='faCorreo'></fa-icon>
</a>
</div>
</div>
</footer>
frontend/src/app/core/shell/footer/footer.component.ts deleted 100644 → 0
View file @ 30c6b671
import { Component, OnInit } from '@angular/core';
import { faFacebook, faInstagram, faWhatsapp } from '@fortawesome/free-brands-svg-icons';
import { faEnvelope } from '@fortawesome/free-solid-svg-icons';
@Component({
selector: 'app-footer',
templateUrl: './footer.component.html',
styles: []
})
export class FooterComponent implements OnInit {
faCorreo = faEnvelope;
faWhatsapp = faWhatsapp;
faInstagram = faInstagram;
faFacebook = faFacebook;
constructor() { }
ngOnInit() {
}
}
frontend/src/app/core/shell/header/header.component.html
View file @ 5f58ea7c
......@@ -6,8 +6,14 @@
<div class="col col-sm-3 text-center ml-0">
<h2 class="display-3 text-primary">GESCAZA</h2>
<p class="lead">Gestión de Eventos de Caza</p>
<p class="text-secondary">{{ fecha }}</p>
</div>
<div class="col col-sm-7 text-center">
<!-- weather widget start -->
<a target="_blank" href="https://hotelmix.es/weather/zaragoza-8372"><img id="widget" src="https://w.bookcdn.com/weather/picture/3_8372_1_4_137AE9_430_ffffff_333333_08488D_1_ffffff_333333_0_6.png?scode=124&domid=582&anc_id=91744" alt="booked.net"/></a>
<!-- weather widget end -->
</div>
</div>
</div>
frontend/src/app/core/shell/header/header.component.ts
View file @ 5f58ea7c
......@@ -20,12 +20,17 @@ import { environment } from 'src/environments/environment';
display: block;
margin-left: auto;
margin-right: auto;
width: 50%;
height: 50%;
width: 35%;
height: 35%;
border-radius: 20px;
}
img:hover {
#widget {
width: 30%;
height: 30%;
}
img.logo:hover {
transform: scaleX(-1);
}
......
frontend/src/app/core/shell/menu/menu.component.html
View file @ 5f58ea7c
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<a class="navbar-brand" routerLink="/"><fa-icon class="fa-2x" [icon]='faHome'></fa-icon></a>
<!-- <a class="navbar-brand" routerLink="/"><fa-icon class="fa-2x" [icon]='faHome'></fa-icon></a> -->
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="menu collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav mr-auto">
<div class="dropdown">
<button class="btn btn-info dropdown-toggle" [ngClass]= "{'disabled': isAutenticado}"
type="button" id="dropdownMenu1" data-toggle="dropdown"
aria-haspopup="true" aria-expanded="false">
Enlaces
</button>
<div class="dropdown-menu" aria-labelledby="dropdownMenu1">
<a class="dropdown-item" target="_blank" href="https://www.fecaza.com">Federación</a>
<a class="dropdown-item" target="_blank" href="http://laadministracionaldia.inap.es">Normativa</a>
<a class="dropdown-item" target="_blank" href="https://revistajaraysedal.es">Jara y Sedal</a>
<a class="dropdown-item" target="_blank" href="https://www.trofeocaza.com">Trofeo caza</a>
<a class="dropdown-item" target="_blank" href="https://aemet.es">Meteorología</a>
</div>
</div>
<div class="dropdown ml-2">
<button class="btn btn-info dropdown-toggle" [ngClass]= "{'disabled': isAutenticado}"
<!-- class="dropdown-toggle" -->
<button class="btn btn-info" [ngClass]= "{'disabled': isAutenticado}"
type="button" id="dropdownMenu1" data-toggle="dropdown"
aria-haspopup="true" aria-expanded="false">
aria-haspopup="true" aria-expanded="false" routerLink="cazadores" routerLinkActive="router-link-active">
Gestión del Cazador
</button>
<div class="dropdown-menu" aria-labelledby="dropdownMenu1">
<a class="dropdown-item" routerLink="cazadores" routerLinkActive="router-link-active">Cazador</a>
<a class="dropdown-item" routerLink="#!">Armas</a>
<!-- <div class="dropdown-menu" aria-labelledby="dropdownMenu1">
<a class="dropdown-item" routerLink="cazadores" routerLinkActive="router-link-active">Cazador</a> -->
<!-- <a class="dropdown-item" routerLink="#!">Armas</a>
<a class="dropdown-item" routerLink="#!">Seguro</a>
<a class="dropdown-item" routerLink="#!">Vehículo</a>
<a class="dropdown-item" routerLink="#!">Tarjeta de Invitación</a>
</div>
</div>
<div class="dropdown ml-2">
<button class="btn btn-info dropdown-toggle" [ngClass]= "{'disabled': isAutenticado}"
type="button" id="dropdownMenu1" data-toggle="dropdown"
aria-haspopup="true" aria-expanded="false">
Gestión Núcleo Cinológico
</button>
<div class="dropdown-menu" aria-labelledby="dropdownMenu1">
<a class="dropdown-item" routerLink="#" routerLinkActive="router-link-active">Núcleo Cinológico</a>
<a class="dropdown-item" routerLink="#" routerLinkActive="router-link-active">Perro</a>
</div>
<a class="dropdown-item" routerLink="#!">Tarjeta de Invitación</a> -->
<!-- </div> -->
</div>
<div class="dropdown ml-2">
<button class="btn btn-info dropdown-toggle" [ngClass]= "{'disabled': isAutenticado}"
<button class="btn btn-info" [ngClass]= "{'disabled': isAutenticado}"
type="button" id="dropdownMenu1" data-toggle="dropdown"
aria-haspopup="true" aria-expanded="false">
aria-haspopup="true" aria-expanded="false" routerLink="/" routerLinkActive="router-link-active">
Gestión de Notificaciones
</button>
<div class="dropdown-menu" aria-labelledby="dropdownMenu1">
<a class="dropdown-item" routerLink="#" routerLinkActive="router-link-active">Notificaciones</a>
</div>
</div>
<div class="dropdown ml-2">
<button class="btn btn-info dropdown-toggle" [ngClass]= "{'disabled': isAutenticado}"
type="button" id="dropdownMenu1" data-toggle="dropdown"
......@@ -61,29 +36,15 @@
Gestión de Eventos
</button>
<div class="dropdown-menu" aria-labelledby="dropdownMenu1">
<a class="dropdown-item" routerLink="#" routerLinkActive="router-link-active">Caza</a>
<a class="dropdown-item" routerLink="eventoscaza" routerLinkActive="router-link-active">Caza</a>
<a class="dropdown-item" routerLink="#" routerLinkActive="router-link-active">Competición</a>
<a class="dropdown-item" routerLink="#" routerLinkActive="router-link-active">Ocio-Cultural</a>
</div>
</div>
<div class="dropdown ml-2">
<button class="btn btn-info dropdown-toggle" [ngClass]= "{'disabled': isAutenticado}"
type="button" id="dropdownMenu1" data-toggle="dropdown"
aria-haspopup="true" aria-expanded="false">
Acerca de
</button>
<div class="dropdown-menu" aria-labelledby="dropdownMenu1">
<a class="dropdown-item" routerLink="#" routerLinkActive="router-link-active">Info</a>
<a class="dropdown-item" routerLink="#" routerLinkActive="router-link-active">Condiciones de Uso</a>
<a class="dropdown-item" routerLink="#" routerLinkActive="router-link-active">Protección de Datos</a>
</div>
</div>
<li class="nav-item">
<!-- <a class="nav-link disabled" routerLink="#">Disabled</a> -->
</li>
</ul>
<!-- Button trigger modal -->
<button type="button" class="btn btn-success btn-lg" data-toggle="modal" data-target="#modalAutenticacion">
<button type="button" class="btn btn-success btn-lg disabled" data-toggle="modal"> <!--data-target="#modalAutenticacion"> -->
Login
</button>
</div>
......@@ -120,3 +81,33 @@
</div>
</div>
</nav>
<aside class="sidebar">
<nav class="nav">
<p class="ml-5 text-white"><fa-icon class="fa-3x" [icon]='faLink'></fa-icon></p>
<h5 class="ml-4 text-success font-weight-bold">ENLACES</h5>
<ul>
<li class="active"><a target="_blank" href="https://aemet.es">Meteorología</a></li>
<li><a target="_blank" href="https://www.fecaza.com">Federación</a></li>
<li><a target="_blank" href="http://laadministracionaldia.inap.es">Normativa</a></li>
<li><a target="_blank" href="https://revistajaraysedal.es">Jara y Sedal</a></li>
<li><a target="_blank" href="https://www.trofeocaza.com">Trofeo caza</a></li>
</ul>
<div class="row justify-content-around align-content-center fixed-botton mt-5">
<a class="mx-5 btn btn-link" href="https://es-es.facebook.com/"
aria-hidden="true" target="_blank">
<fa-icon class="fa-2x" [icon]='faFacebook'></fa-icon></a>
<a class="mx-5 btn btn-link" href="https://web.whatsapp.com/"
aria-hidden="true" target="_blank">
<fa-icon class="fa-2x" [icon]='faWhatsapp'></fa-icon></a>
<a class="mx-5 btn btn-link" href="https://www.instagram.com/"
aria-hidden="true" target="_blank">
<fa-icon class="fa-2x" [icon]='faInstagram'></fa-icon></a>
<a class="mx-5 btn btn-link" href="mailto:direcciondeemail@prueba.org?subject=Tema&cc=otroemail@pruebas.org&body=Cuerpo del mensaje"
aria-hidden="true" target="_blank">
<fa-icon class="fa-2x" [icon]='faCorreo'></fa-icon></a>
</div>
</nav>
</aside>
frontend/src/app/core/shell/menu/menu.component.ts
View file @ 5f58ea7c
import { Component, OnInit } from '@angular/core';
import { faHome } from '@fortawesome/free-solid-svg-icons';
import { faFacebook, faInstagram, faWhatsapp } from '@fortawesome/free-brands-svg-icons';
import { faEnvelope, faHome, faLandmark, faLink } from '@fortawesome/free-solid-svg-icons';
import { AutenticacionService } from 'src/app/service/autenticacion.service';
import { environment } from 'src/environments/environment';
@Component({
selector: 'app-menu',
templateUrl: './menu.component.html',
styles: ['.menu a { color: #0000ff; font-family: Verdana, Geneva, Tahoma, sans-serif; }']
styles: [`
.menu a {
color: #0000ff;
font-family: Verdana, Geneva, Tahoma, sans-serif;
}
.sidebar {
position: fixed;
width: 9%;
height: 100vh;
background: #422f6a;
margin: 20px;
font-size: 0.90em;
}
.nav {
position: relative;
margin: 0 10%;
text-align: left;
top: 40%;
transform: translateY(-50%);
}
hr {
color: red;
background-image: linear-gradient(0.25turn, #3f87a6, #ebf8e1, #f69d3c);
}
.nav ul {
line-height: 3;
font-family: Verdana, Geneva, Tahoma, sans-serif;
li {
position: left;
a {
list-style-type: circle;
line-height: 5em;
font-size: 18px;
text-transform: uppercase;
text-decoration: none;
letter-spacing: 0.4em;
color: rgba(#FFF, 0.35);
display: block;
transition: all ease-out 300ms;
}
&.active a {
color: white;
}
&:not(.active)::after {
opacity: 0.2;
}
&:not(.active):hover a {
color: rgba(#FFF, 0.75);
}
&::after {
content: '';
position: absolute;
width: 100%;
height: 0.2em;
background: black;
left: 0;
bottom: 0;
}
}
}
`]
})
export class MenuComponent implements OnInit {
......@@ -14,6 +86,11 @@ export class MenuComponent implements OnInit {
passwd: string = '';
faHome = faHome;
isAutenticado: boolean = environment.autenticacion;
faLink = faLandmark;
faCorreo = faEnvelope;
faWhatsapp = faWhatsapp;
faInstagram = faInstagram;
faFacebook = faFacebook;
constructor(private servicioAutenticacion: AutenticacionService) { }
......
frontend/src/app/core/shell/shell.component.html
View file @ 5f58ea7c
<app-header></app-header>
<app-menu></app-menu>
<app-main></app-main>
<app-footer></app-footer>
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment