Terminando de implementar los estilos de nuestra pantalla de login

Clase 28 de 63 • Curso de Angular 6 2018

Resumen

Cuando queremos que las clases que estamos definiendo estén disponibles en todo el proyecto y no sólo en la pantalla del componente actual, tendremos que definirlas en el archivo styles.css en la raíz del proyecto y no sólo en el css del componente.

Jesús Auriol Villamarín Ortiz

student•

Bueno veo innecesario crear .marto15 y .marbo15. Ya que si estaremos usando bootstrap podemos usar clases que ya están definidas tales como:

mt = margin top
mb = margin bottom
ml = margin left
mr = margin right
my = es margen para top y bottom
mx = es margen para left y right

En mi caso hice uso de my-3

Pueden encontrar mas en esta liga Bootstrap

Jenniffer Helena Alvarez Puello

student•

gracias

Luis Abdel Rangel Castro

student•

spacing - bootstrap

Christian Michelle Torres Martínez

student•

Wilson Fabian Pérez Sucuzhañay

student•

Algo así de verde era el de msn jaja no lo recuerdo bien.

Ricardo Celis

teacher•

Excelente!

Juan C Felizzola

student•

Nos faltó cambiar el título:

<div class="text-center">
	<h3 *ngIf="operation == 'login'">Iniciar sesión</h3>
	<h3 *ngIf="operation == 'register'">Registrarte</h3>
</div>

Y en vez de usar la clase center que estamos creando, podemos usar la clase text-center de Bootstrap.
También en vez de usar marto15 y marbo15, podemos usar las clases mt-3 y mb-3 que sería iguall a margin-top: 16px y margin-bottom: 16px

Gonzalo Muñoz

student•

Bootstrap ya trae clases como esas auxiliares:

center-text

Y la de los márgenes mt-x : margin top de 1 a 5 mb-x: margin bottom de 1 a 5 ml-x: margin left mr-x margin right

Carlos Alfonso Montoya Cruz

student•

Si, las clases que están implementadas por bootstrap son:

text-center (text-left, text-justify, text-right)
Margin: m-x (mt-x, mb-x, mr-x, ml-x)
Padding: p-x (pt-x, pb-x, pr-x, pl-x)

Yojan Antonio Pardo Zabala

student•

mx-x: margen en el eje x (horizontal) my-x: margen en el eje y (vertical) tambien van de 1-5

Carlos Enrique Ramírez Flores

student•

he aquí el resultado!!!

Luis Rodolfo Lara Espinoza

student•

Luis Miguel Ramos Hernández

student•

Jeffry Davila

student•

El azul se ve bien.

Adrian Camilo Caminos

student•

la hice mientras ya la volvemos de nosotros

Miguel Castillo Cortes

student•

Jeison Sneider Ruiz Zemanate

student•

styles.css ---->

/* You can add global styles to this file, and also import other style files */

.avatarFrameOffline{
  background: rgba(242,246,248,1);
  background: -moz-linear-gradient(left, rgba(242,246,248,1) 0%, rgba(216,225,231,1) 50%, rgba(181,198,208,1) 51%, rgba(224,239,249,1) 100%);
  background: -webkit-gradient(left top, right top, color-stop(0%, rgba(242,246,248,1)), color-stop(50%, rgba(216,225,231,1)), color-stop(51%, rgba(181,198,208,1)), color-stop(100%, rgba(224,239,249,1)));
  background: -webkit-linear-gradient(left, rgba(242,246,248,1) 0%, rgba(216,225,231,1) 50%, rgba(181,198,208,1) 51%, rgba(224,239,249,1) 100%);
  background: -o-linear-gradient(left, rgba(242,246,248,1) 0%, rgba(216,225,231,1) 50%, rgba(181,198,208,1) 51%, rgba(224,239,249,1) 100%);
  background: -ms-linear-gradient(left, rgba(242,246,248,1) 0%, rgba(216,225,231,1) 50%, rgba(181,198,208,1) 51%, rgba(224,239,249,1) 100%);
  background: linear-gradient(to right, rgba(242,246,248,1) 0%, rgba(216,225,231,1) 50%, rgba(181,198,208,1) 51%, rgba(224,239,249,1) 100%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f2f6f8', endColorstr='#e0eff9', GradientType=1 );
  text-align: center;
  padding: 5%;
  border-radius: 10px;
  border: 1px solid white;
  display: inline-block;

}

.center{
  text-align: center !important;

}

.marto15{
  margin-top: 15px;
}

.marbo15{
  margin-bottom: 5px;
}

.btn-primary{
  background-color: limegreen;
}

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-login',
  templateUrl: './login.component.html',
  styleUrls: ['./login.component.css']
})
export class LoginComponent implements OnInit {

  operation: string = 'login';
  constructor() { }

  ngOnInit() {
  }

}

<div class="loginContainer">

  <div class="container">

    <div class="row justify-content-md-center">

      <div class="col-md-3">

        <div class="avatarFrameOffline marto15 marbo15">

          <img src="assets/img/generic_avatar.png"class="avatarImage img-fluid" />

        </div>

      </div>

    </div>

    <div class="row justify-content-md-center">

      <div class="col-md-6">
        <div class="center">

          <h3>Iniciar Sesión</h3>

        </div>
        <p *ngIf="operation == 'register'">Ya tienes cuenta? Has <a (click)="operation = 'login'" >Login</a></p>
        <p *ngIf="operation == 'login'"> No tienes cuenta? <a (click)="operation = 'register'" >Registrate</a></p>

        <div class="borderedContainer">

          <input class="form-control marbo15" type="email" placeholder="Ingrese su Email">
          <input class="form-control marbo15" type="password" placeholder="Ingrese su contraseña">
          <input *ngIf="operation == 'register'" class="form-control marbo15" type="text" placeholder="Ingrese su Nick">

        </div>

        <div class="center marto15">

          <a *ngIf="operation == 'login'" class="btn btn-primary">Iniciar Sesión</a>
          <a *ngIf="operation == 'register'" class="btn btn-primary">Registrarme</a>

        </div>

      </div>

    </div>

  </div>

</div>

Ricardo Portillo

student•

Más que agregar nuevo código css hice ajustes al nivel html

Jehison Orostegui

student•

Javier Andres Leguízamo Mora

student•

Amigo me gusto el estilo que le pusiste al boton, podrias compartir el css?

Juan Manuel Martínez Ortiz

student•

.btn {
    background: rgb(207,207,207);
    background: linear-gradient(0deg, rgba(207,207,207,1) 0%, rgba(255,255,255,1) 100%);
    text-align: center;
    border: 1px solid gray;
    display: inline-block;
}

Erik Ricardo Sánchez Pérez

student•

Mi aporte :D

Daniel Felipe Contreras López

student•

Duvan Carvajal

student•

cuanta nostalgia con este curso…

Carlos Uriel de Jesus Sánchez González

student•

<div class="loginContainer">
  <div class="container">
    <div class="row justify-content-md-center">
      <div class="col-md-3">
        <div class="avatarFrameOffline mt-3 mb-3">
          <img src="assets/img/generic_avatar.png" class="avatarImage img-fluid"/>
        </div>
      </div>
    </div>
    <div class="row justify-content-md-center">
      <div class="col-md-6">
        <div class="text-center">
          <h3>Iniciar sesi&oacute;n</h3>
        </div>
        <p *ngIf="operation == 'register'">Ya tienes cuenta? Has <a class="text-primary" (click)="operation= 'login'">Login</a>
        </p>
        <p *ngIf="operation == 'login'">No tienes cuenta? <a class="text-primary" (click)="operation='register'">Registrarse</a>
        </p>
        <div class="border">
          <div class="mr-2 ml-2 mt-2 mb-2">
            <input type="email" placeholder="Ingresa tu E-mail" class="form-control"/>
            <br/>
            <input type="password" placeholder="Ingresa tu Contrase&ntilde;a" class="form-control"/>
            <br/>
            <input *ngIf="operation == 'register'" type="text" placeholder="Ingresa tu Nick" class="form-control"/>
          </div>
        </div>
        <div class="text-center mt-2">
          <a *ngIf="operation == 'login'" class="btn btn-success">Iniciar Sesi&oacute;n</a>
          <a *ngIf="operation == 'register'" class="btn btn-success">Registrarme</a>
        </div>
      </div>
    </div>
  </div>
</div>

import {Component, OnInit} from '@angular/core';

@Component({
  selector: 'app-login',
  templateUrl: './login.component.html',
  styleUrls: ['./login.component.css']
})
export class LoginComponent implements OnInit {
  operation: string;

  constructor() {
    this.operation = 'login';
  }

  ngOnInit() {
  }

}

.loginContainer{
  background-image: url('/assets/img/msnbg.jpg');
  -webkit-background-size: cover;
  background-size: cover;
  background-repeat: no-repeat;
}

styless.css

/* You can add global styles to this file, and also import other style files */
.avatarFrameOffline{
  background: rgba(235,233,249,1);
  background: -moz-linear-gradient(left, rgba(235,233,249,1) 0%, rgba(216,208,239,1) 50%, rgba(206,199,236,1) 51%, rgba(193,191,234,1) 100%);
  background: -webkit-gradient(left top, right top, color-stop(0%, rgba(235,233,249,1)), color-stop(50%, rgba(216,208,239,1)), color-stop(51%, rgba(206,199,236,1)), color-stop(100%, rgba(193,191,234,1)));
  background: -webkit-linear-gradient(left, rgba(235,233,249,1) 0%, rgba(216,208,239,1) 50%, rgba(206,199,236,1) 51%, rgba(193,191,234,1) 100%);
  background: -o-linear-gradient(left, rgba(235,233,249,1) 0%, rgba(216,208,239,1) 50%, rgba(206,199,236,1) 51%, rgba(193,191,234,1) 100%);
  background: -ms-linear-gradient(left, rgba(235,233,249,1) 0%, rgba(216,208,239,1) 50%, rgba(206,199,236,1) 51%, rgba(193,191,234,1) 100%);
  background: linear-gradient(to right, rgba(235,233,249,1) 0%, rgba(216,208,239,1) 50%, rgba(206,199,236,1) 51%, rgba(193,191,234,1) 100%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ebe9f9', endColorstr='#c1bfea', GradientType=1 );
  text-align: center;
  padding: 5%;
  border-radius: 10px;
  -webkit-border-radius: 10px;
  border: 1px solid white;
  display: inline-block;
}

Carlos Alberto García Rosales

student•

tu si que lo quieres replicar exacto esta muy bueno!!! 😮

Anthony Gonzalez

student•

Bootstrap 4 trae consigo clases auxiliares para ayudarnos, la utilidades de Espaciado que nos permiten manipular fácilmente margin y padding , y la utilidades de texto

Dany Ladino

student•

/* You can add global styles to this file, and also import other style files */

.avatarFrameOffline{
  background: rgba(242,246,248,1);
  background: -moz-linear-gradient(left, rgba(242,246,248,1) 0%, rgba(216,225,231,1) 50%, rgba(181,198,208,1) 51%, rgba(224,239,249,1) 100%);
  background: -webkit-gradient(left top, right top, color-stop(0%, rgba(242,246,248,1)), color-stop(50%, rgba(216,225,231,1)), color-stop(51%, rgba(181,198,208,1)), color-stop(100%, rgba(224,239,249,1)));
  background: -webkit-linear-gradient(left, rgba(242,246,248,1) 0%, rgba(216,225,231,1) 50%, rgba(181,198,208,1) 51%, rgba(224,239,249,1) 100%);
  background: -o-linear-gradient(left, rgba(242,246,248,1) 0%, rgba(216,225,231,1) 50%, rgba(181,198,208,1) 51%, rgba(224,239,249,1) 100%);
  background: -ms-linear-gradient(left, rgba(242,246,248,1) 0%, rgba(216,225,231,1) 50%, rgba(181,198,208,1) 51%, rgba(224,239,249,1) 100%);
  background: linear-gradient(to right, rgba(242,246,248,1) 0%, rgba(216,225,231,1) 50%, rgba(181,198,208,1) 51%, rgba(224,239,249,1) 100%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f2f6f8', endColorstr='#e0eff9', GradientType=1 );
  text-align: center;
  padding: 5%;
  border-radius: 10px;
  border: 1px solid white;
  display: inline-block;

}

.center{
  text-align: center !important;

}

.marto15{
  margin-top: 15px;
}

.marbo15{
  margin-bottom: 5px;
}

.btn-primary{
  background-color: limegreen;
}

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-login',
  templateUrl: './login.component.html',
  styleUrls: ['./login.component.css']
})
export class LoginComponent implements OnInit {

  operation: string = 'login';
  constructor() { }

  ngOnInit() {
  }

}

<div class="loginContainer">

  <div class="container">

    <div class="row justify-content-md-center">

      <div class="col-md-3">

        <div class="avatarFrameOffline marto15 marbo15">

          <img src="assets/img/generic_avatar.png"class="avatarImage img-fluid" />

        </div>

      </div>

    </div>

    <div class="row justify-content-md-center">

      <div class="col-md-6">
        <div class="center">

          <h3>Iniciar Sesión</h3>

        </div>
        <p *ngIf="operation == 'register'">Ya tienes cuenta? Has <a (click)="operation = 'login'" >Login</a></p>
        <p *ngIf="operation == 'login'"> No tienes cuenta? <a (click)="operation = 'register'" >Registrate</a></p>

        <div class="borderedContainer">

          <input class="form-control marbo15" type="email" placeholder="Ingrese su Email">
          <input class="form-control marbo15" type="password" placeholder="Ingrese su contraseña">
          <input *ngIf="operation == 'register'" class="form-control marbo15" type="text" placeholder="Ingrese su Nick">

        </div>

        <div class="center marto15">

          <a *ngIf="operation == 'login'" class="btn btn-primary">Iniciar Sesión</a>
          <a *ngIf="operation == 'register'" class="btn btn-primary">Registrarme</a>

        </div>

      </div>

    </div>

  </div>

</div>

.btn {
    background: rgb(207,207,207);
    background: linear-gradient(0deg, rgba(207,207,207,1) 0%, rgba(255,255,255,1) 100%);
    text-align: center;
    border: 1px solid gray;
    display: inline-block;
}

<div class="loginContainer">
  <div class="container">
    <div class="row justify-content-md-center">
      <div class="col-md-3">
        <div class="avatarFrameOffline mt-3 mb-3">
          <img src="assets/img/generic_avatar.png" class="avatarImage img-fluid"/>
        </div>
      </div>
    </div>
    <div class="row justify-content-md-center">
      <div class="col-md-6">
        <div class="text-center">
          <h3>Iniciar sesi&oacute;n</h3>
        </div>
        <p *ngIf="operation == 'register'">Ya tienes cuenta? Has <a class="text-primary" (click)="operation= 'login'">Login</a>
        </p>
        <p *ngIf="operation == 'login'">No tienes cuenta? <a class="text-primary" (click)="operation='register'">Registrarse</a>
        </p>
        <div class="border">
          <div class="mr-2 ml-2 mt-2 mb-2">
            <input type="email" placeholder="Ingresa tu E-mail" class="form-control"/>
            <br/>
            <input type="password" placeholder="Ingresa tu Contrase&ntilde;a" class="form-control"/>
            <br/>
            <input *ngIf="operation == 'register'" type="text" placeholder="Ingresa tu Nick" class="form-control"/>
          </div>
        </div>
        <div class="text-center mt-2">
          <a *ngIf="operation == 'login'" class="btn btn-success">Iniciar Sesi&oacute;n</a>
          <a *ngIf="operation == 'register'" class="btn btn-success">Registrarme</a>
        </div>
      </div>
    </div>
  </div>
</div>

import {Component, OnInit} from '@angular/core';

@Component({
  selector: 'app-login',
  templateUrl: './login.component.html',
  styleUrls: ['./login.component.css']
})
export class LoginComponent implements OnInit {
  operation: string;

  constructor() {
    this.operation = 'login';
  }

  ngOnInit() {
  }

}

/* You can add global styles to this file, and also import other style files */
.avatarFrameOffline{
  background: rgba(235,233,249,1);
  background: -moz-linear-gradient(left, rgba(235,233,249,1) 0%, rgba(216,208,239,1) 50%, rgba(206,199,236,1) 51%, rgba(193,191,234,1) 100%);
  background: -webkit-gradient(left top, right top, color-stop(0%, rgba(235,233,249,1)), color-stop(50%, rgba(216,208,239,1)), color-stop(51%, rgba(206,199,236,1)), color-stop(100%, rgba(193,191,234,1)));
  background: -webkit-linear-gradient(left, rgba(235,233,249,1) 0%, rgba(216,208,239,1) 50%, rgba(206,199,236,1) 51%, rgba(193,191,234,1) 100%);
  background: -o-linear-gradient(left, rgba(235,233,249,1) 0%, rgba(216,208,239,1) 50%, rgba(206,199,236,1) 51%, rgba(193,191,234,1) 100%);
  background: -ms-linear-gradient(left, rgba(235,233,249,1) 0%, rgba(216,208,239,1) 50%, rgba(206,199,236,1) 51%, rgba(193,191,234,1) 100%);
  background: linear-gradient(to right, rgba(235,233,249,1) 0%, rgba(216,208,239,1) 50%, rgba(206,199,236,1) 51%, rgba(193,191,234,1) 100%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ebe9f9', endColorstr='#c1bfea', GradientType=1 );
  text-align: center;
  padding: 5%;
  border-radius: 10px;
  -webkit-border-radius: 10px;
  border: 1px solid white;
  display: inline-block;
}

Terminando de implementar los estilos de nuestra pantalla de login

Introducción

Qué aprenderás sobre Angular 6

Introducción a Angular

Configurando nuestro proyecto en Git y Github

Introducción a Angular CLI y al proyecto de Platzinger

Instalación del entorno de desarrollo en Mac OS

Instalación del entorno de desarrollo en Windows e información acerca del editor que usaré (WebStorm) y alternativas

Corriendo nuestra app en el navegador

Reto: Desarrolla un tutorial escrito comparando Angular con otro Framework (Vue, React)

Definición de la estructura del App

¿Qué hará nuestra app? ¿Cuál es su arquitectura? ¿De qué pantallas se compondrá? ¿Cuál será su look?

Explorando el sistema de archivos

¿Qué son y cómo generar los primeros componentes de nuestra app?

Navegación básica entre componentes

Componentes anidados: Creando un componente con nuestras rutas de navegación que funcione como menú

Reto: Varias conversaciones a la vez

Basics de Angular y TypeScript

¿Cómo usar tipos de datos con TypeScript?

Qué son las interfaces de TypeScript y su implementación

NgFor aplicado en la lista de usuarios

NgIf aplicado en la lista de usuarios

Navegación con parámetros

Accediendo a nuestros usuarios desde Conversation.ts

Creando un servicio de usuarios e Inyectando el servicio en nuestros componentes

Pipes en Angular (date, number, json)

Creando nuestro propio pipe para buscar entre nuestros contactos

Estilos

¿Cómo usar estilos CSS y referenciar recursos?

Instalando librerías usando npm (bootstrap y font-awesome) y Referenciando CSS en el angular.json

Reto: Cambiar ícono según estatus

Implementando estilos en la pantalla de login

Terminando de implementar los estilos de nuestra pantalla de login

Implementando estilos en el navbar

Implementando estilos en la pantalla de home

Implementando estilos en home, lista de contactos

Implementando estilos en profile

Reto: Estilos en la pantalla de conversación

Usando ngClass para añadir estilos dinámicos

Reto: Mejorar estilos en la pantalla de conversación

Acceso a datos remotos y login

¿Qué es Firebase? Creando nuestro proyecto

Diferencia entre conexión por sockets y HTTP

Instalación y setup de la librería AngularFire a través de npm

Login/Registro de usuarios con email y password

Reemplazo del servicio de usuarios por un servicio dinámico con conexión a Firebase

Guards para verificar Firebase auth

Creando un CRUD implementando un API REST HTTP (con diversos backends)

Reto: Implementar API HTTP

Opciones y subida de imágenes

Perfil de usuario

Seleccionar fotos usando una librería para image cropping

Guardando las imágenes de perfil en nuestra base de datos de firebase

Conversación

¿Cómo resolver el problema de comunicación en tiempo real?

Enviando un mensaje (con reproducción de sonido)

Mostrando conversación

Enviando un zumbido (con reproducción de sonido y animación)

Reto: Envía una foto

Amigos

Planeación previa para la característica, ¿cómo generaremos las solicitudes?

Enviando una solicitud de amistad

Generando el modal de solicitud de amistad

Aceptando solicitudes de amistad

Mostrando sólo contactos que son amigos

Componentes anidados (con paso de parámetros)

Reto: Mensaje personal en Solicitud de Amistad

Deploy

Creando un wrapper para desktop, usando Electron

Reto: Dándole Características PWA a nuestra App

Exportando app para web, complementando con Firebase Hosting

Conclusión

Conclusión

Cuéntanos