Implementando estilos en profile

Clase 32 de 63 • Curso de Angular 6 2018

Resumen

Cuando usamos inputs de tipo file, normalmente no podemos controlar de manera directa la apariencia en el navegador; incluso, la apariencia de este elemento es muy diferente para los diferentes navegadores. Para evitar esta inconsistencia visual podemos colocar el input dentro de una etiqueta <label> y ocultarlo con display: none, y aplicar al label una clase para que se ajuste mejor a la apariencia de los botones de nuestra UI.

Juan C Felizzola

student•

Podemos usar las clases de Bootstrap para agregarle el padding-top

pt-5 = padding-top: 48px

Carlos Uriel de Jesus Sánchez González

student•

styless.css

/* You can add global styles to this file, and also import other style files */
.avatarFrameOffline {
  background: #ffffff;
  background: -moz-linear-gradient(top, #ffffff 0%, #eae5e5 45%, #c1bdbd 47%, #bab6b6 100%);
  background: -webkit-linear-gradient(top, #ffffff 0%, #eae5e5 45%, #c1bdbd 47%, #bab6b6 100%);
  background: linear-gradient(to bottom, #ffffff 0%, #eae5e5 45%, #c1bdbd 47%, #bab6b6 100%);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#bab6b6', GradientType=0);
  text-align: center;
  padding: 5%;
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, 0.36);
  -webkit-box-shadow: 3px 3px 21px 1px rgba(0, 0, 0, 0.75);
  -moz-box-shadow: 3px 3px 21px 1px rgba(0, 0, 0, 0.75);
  box-shadow: 3px 3px 21px 1px rgba(0, 0, 0, 0.75);
  display: inline-block;
}

.avatarFrameOnLine {
  background: #d2ff6b;
  background: -moz-linear-gradient(top, #d2ff6b 0%, #81ff3d 50%, #0cff00 51%, #0dbc03 100%);
  background: -webkit-linear-gradient(top, #d2ff6b 0%, #81ff3d 50%, #0cff00 51%, #0dbc03 100%);
  background: linear-gradient(to bottom, #d2ff6b 0%, #81ff3d 50%, #0cff00 51%, #0dbc03 100%);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#d2ff6b', endColorstr='#0dbc03', GradientType=0);
  text-align: center;
  padding: 5%;
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, 0.36);
  -webkit-box-shadow: 3px 3px 21px 1px rgba(0, 0, 0, 0.75);
  -moz-box-shadow: 3px 3px 21px 1px rgba(0, 0, 0, 0.75);
  box-shadow: 3px 3px 21px 1px rgba(0, 0, 0, 0.75);
  display: inline-block;
}

.generalContent {
  margin-top: 56px;
}

input[type='file'] {
  display: none;
}

.custom-file-upload {
  background: #f2f6f8;
  background: -moz-linear-gradient(top, #f2f6f8 0%, #d8e1e7 50%, #b5c6d0 51%, #e0eff9 100%);
  background: -webkit-linear-gradient(top, #f2f6f8 0%, #d8e1e7 50%, #b5c6d0 51%, #e0eff9 100%);
  background: linear-gradient(to bottom, #f2f6f8 0%, #d8e1e7 50%, #b5c6d0 51%, #e0eff9 100%);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#f2f6f8', endColorstr='#e0eff9', GradientType=0);
  display: inline-block;
  padding: 6px 12px;
  cursor: pointer;
  border: 1px solid #8dd2f3;
}

profile.component.css

#profileContainer {
  background-image: url("/assets/img/msnbg.jpg");
  background-size: 100%;
  background-repeat: no-repeat;
}

profile.component.html

<div id="profileContainer">
  <div class="container pt-5">
    <div class="row">
      <div class="col-md-3">
        <div class="avatarFrameOnLine">
          <img src="assets/img/generic_avatar.png" alt="" class="avatarImage img-fluid">
        </div>
        <hr/>
        <div>
          <span>Cambiar Foto</span>
          <br/>
          <label class="custom-file-upload">
            <input type="file"/>
            Subir Avatar
          </label>
        </div>
      </div>
      <div class="col-md-9">
        <div>
          <label fixed>Nick</label>
          <input type="text" class="form-control"/>
        </div>
        <div>
          <label fixed>Subnick</label>
          <input type="text" class="form-control"/>
        </div>
        <div>
          <label fixed>Email</label>
          <input type="email" disabled class="form-control"/>
        </div>
        <div>
          <label fixed>Estatus</label>
          <select class="form-control">
            <option value="online">Conectado</option>
            <option value="away">Ausente</option>
            <option value="busy">Ocupado</option>
            <option value="appear_offline">Desconectado</option>
          </select>
        </div>
        <hr/>
        <a class="btn btn-primary btn-block">Guardar</a>
      </div>
    </div>
  </div>
</div>

Salvador Galliano

student•

Jeison Sneider Ruiz Zemanate

student•

profile.component.html ----->

<div id="profileContainer">
  <div class="container pato45">
    <div class="row">
      <div class="col-md-3">
        <div class="avatarFrameonline">
          <img src="assets/img/generic_avatar.png" class="avatarImage img-fluid">
        </div>
        <hr/>
        <div>
          <span>Cambiar Foto</span> <br />
          <label class="custom-file-upload">
            <input type="file">
            Subir Avatar wey
          </label>
        </div>
      </div>
      <div class="col-md-9">
        <div>
          <label fixed >Nick</label>
          <input type="text" class="form-control" />
        </div>
        <div>
          <label fixed >Subnick</label>
          <input type="text" class="form-control" />
        </div>
        <div>
          <label fixed >Email</label>
          <input type="email" disabled class="form-control" />
        </div>
        <div>
          <label fixed >Status</label>
          <select class="form-control">
            <option value="online">Conectado</option>
            <option value="awaye">Ausente</option>
            <option value="busy">Ocupado</option>
            <option value="appear_offline">Desconectado</option>

          </select>
        </div>
        <hr />
        <a class="btn btn-primary btn-block">Guardar</a>
      </div>
    </div>
  </div>
</div>

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;

}
.avatarFrameonline{
  background: rgba(210,255,82,1);
  background: -moz-linear-gradient(left, rgba(210,255,82,1) 0%, rgba(145,232,66,1) 100%);
  background: -webkit-gradient(left top, right top, color-stop(0%, rgba(210,255,82,1)), color-stop(100%, rgba(145,232,66,1)));
  background: -webkit-linear-gradient(left, rgba(210,255,82,1) 0%, rgba(145,232,66,1) 100%);
  background: -o-linear-gradient(left, rgba(210,255,82,1) 0%, rgba(145,232,66,1) 100%);
  background: -ms-linear-gradient(left, rgba(210,255,82,1) 0%, rgba(145,232,66,1) 100%);
  background: linear-gradient(to right, rgba(210,255,82,1) 0%, rgba(145,232,66,1) 100%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#d2ff52', endColorstr='#91e842', GradientType=1 );
  text-align: center;
  padding: 5%;
  border-radius: 10px;
  border: 1px solid lime;
  display: inline-block;
}

.center{
  text-align: center !important;

}

.marto15{
  margin-top: 15px;
}

.marbo15{
  margin-bottom: 5px;
}

.btn-primary{
  background-color: limegreen;

}

.generalContent{
  margin-top: 56px;
}

#homeAvatarPicture{
  max-width: 100px;
}

.disblo{
  display: block !important;
}

.marbo5{
  margin-bottom: 5px;
}

.pato45{
  padding-top: 45px;
}

input[type ="file"]{
  display: none;
}

.custom-file-upload{
  background: #f2f6f8;
  background: -moz-linear-gradient(top, #f2f6f8 0%, #d8e1e7 50%, #b5c6d0 51%, #e0eff9 100%);
  background: -webkit-linear-gradient(top, #f2f6f8 0%, #d8e1e7 50%, #b5c6d0 51%, #e0eff9 100%);
  background: linear-gradient(to bottom, #f2f6f8 0%, #d8e1e7 50%, #b5c6d0 51%, #e0eff9 100%);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#f2f6f8', endColorstr='#e0eff9', GradientType=0);
  display: inline-block;
  padding: 6px 12px;
  cursor: pointer;
  border: 1px solid #8dd2f3;
}

profile.component.css ---->

#profileContainer {
  background-image: url(/assets/img/msnbg.jpg);
  background-size: 100%;
  background-repeat: no-repeat;
}

Alexis Méndez Méndez

student•

para bootstrap 5 botón guardar

w-100

 <a class="btn btn-primary w-100 botonLogin">Guardar</a>

Alex Eugenio Gavidia Donayre

student•

Gracias

Juan Pablo Castro

student•

La clase avatatarImage no existe Esto no da problema, pero tampoco añade valor. La puedes quitar

Damian Spizzirri

student•

Que es ese fixed que le puso a la etiqueta label? No entendi.

Diego Forero

Team Platzi•

He investigado y no he encontrado nada al respecto, lo que si comprobé es que no cambia nada el tenerlo o no tenerlo a nivel visual.

Edith Hernández Navarrete

student•

Buena clase!

/* You can add global styles to this file, and also import other style files */
.avatarFrameOffline {
  background: #ffffff;
  background: -moz-linear-gradient(top, #ffffff 0%, #eae5e5 45%, #c1bdbd 47%, #bab6b6 100%);
  background: -webkit-linear-gradient(top, #ffffff 0%, #eae5e5 45%, #c1bdbd 47%, #bab6b6 100%);
  background: linear-gradient(to bottom, #ffffff 0%, #eae5e5 45%, #c1bdbd 47%, #bab6b6 100%);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#bab6b6', GradientType=0);
  text-align: center;
  padding: 5%;
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, 0.36);
  -webkit-box-shadow: 3px 3px 21px 1px rgba(0, 0, 0, 0.75);
  -moz-box-shadow: 3px 3px 21px 1px rgba(0, 0, 0, 0.75);
  box-shadow: 3px 3px 21px 1px rgba(0, 0, 0, 0.75);
  display: inline-block;
}

.avatarFrameOnLine {
  background: #d2ff6b;
  background: -moz-linear-gradient(top, #d2ff6b 0%, #81ff3d 50%, #0cff00 51%, #0dbc03 100%);
  background: -webkit-linear-gradient(top, #d2ff6b 0%, #81ff3d 50%, #0cff00 51%, #0dbc03 100%);
  background: linear-gradient(to bottom, #d2ff6b 0%, #81ff3d 50%, #0cff00 51%, #0dbc03 100%);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#d2ff6b', endColorstr='#0dbc03', GradientType=0);
  text-align: center;
  padding: 5%;
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, 0.36);
  -webkit-box-shadow: 3px 3px 21px 1px rgba(0, 0, 0, 0.75);
  -moz-box-shadow: 3px 3px 21px 1px rgba(0, 0, 0, 0.75);
  box-shadow: 3px 3px 21px 1px rgba(0, 0, 0, 0.75);
  display: inline-block;
}

.generalContent {
  margin-top: 56px;
}

input[type='file'] {
  display: none;
}

.custom-file-upload {
  background: #f2f6f8;
  background: -moz-linear-gradient(top, #f2f6f8 0%, #d8e1e7 50%, #b5c6d0 51%, #e0eff9 100%);
  background: -webkit-linear-gradient(top, #f2f6f8 0%, #d8e1e7 50%, #b5c6d0 51%, #e0eff9 100%);
  background: linear-gradient(to bottom, #f2f6f8 0%, #d8e1e7 50%, #b5c6d0 51%, #e0eff9 100%);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#f2f6f8', endColorstr='#e0eff9', GradientType=0);
  display: inline-block;
  padding: 6px 12px;
  cursor: pointer;
  border: 1px solid #8dd2f3;
}

<div id="profileContainer">
  <div class="container pt-5">
    <div class="row">
      <div class="col-md-3">
        <div class="avatarFrameOnLine">
          <img src="assets/img/generic_avatar.png" alt="" class="avatarImage img-fluid">
        </div>
        <hr/>
        <div>
          <span>Cambiar Foto</span>
          <br/>
          <label class="custom-file-upload">
            <input type="file"/>
            Subir Avatar
          </label>
        </div>
      </div>
      <div class="col-md-9">
        <div>
          <label fixed>Nick</label>
          <input type="text" class="form-control"/>
        </div>
        <div>
          <label fixed>Subnick</label>
          <input type="text" class="form-control"/>
        </div>
        <div>
          <label fixed>Email</label>
          <input type="email" disabled class="form-control"/>
        </div>
        <div>
          <label fixed>Estatus</label>
          <select class="form-control">
            <option value="online">Conectado</option>
            <option value="away">Ausente</option>
            <option value="busy">Ocupado</option>
            <option value="appear_offline">Desconectado</option>
          </select>
        </div>
        <hr/>
        <a class="btn btn-primary btn-block">Guardar</a>
      </div>
    </div>
  </div>
</div>

<div id="profileContainer">
  <div class="container pato45">
    <div class="row">
      <div class="col-md-3">
        <div class="avatarFrameonline">
          <img src="assets/img/generic_avatar.png" class="avatarImage img-fluid">
        </div>
        <hr/>
        <div>
          <span>Cambiar Foto</span> <br />
          <label class="custom-file-upload">
            <input type="file">
            Subir Avatar wey
          </label>
        </div>
      </div>
      <div class="col-md-9">
        <div>
          <label fixed >Nick</label>
          <input type="text" class="form-control" />
        </div>
        <div>
          <label fixed >Subnick</label>
          <input type="text" class="form-control" />
        </div>
        <div>
          <label fixed >Email</label>
          <input type="email" disabled class="form-control" />
        </div>
        <div>
          <label fixed >Status</label>
          <select class="form-control">
            <option value="online">Conectado</option>
            <option value="awaye">Ausente</option>
            <option value="busy">Ocupado</option>
            <option value="appear_offline">Desconectado</option>

          </select>
        </div>
        <hr />
        <a class="btn btn-primary btn-block">Guardar</a>
      </div>
    </div>
  </div>
</div>

/* 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;

}
.avatarFrameonline{
  background: rgba(210,255,82,1);
  background: -moz-linear-gradient(left, rgba(210,255,82,1) 0%, rgba(145,232,66,1) 100%);
  background: -webkit-gradient(left top, right top, color-stop(0%, rgba(210,255,82,1)), color-stop(100%, rgba(145,232,66,1)));
  background: -webkit-linear-gradient(left, rgba(210,255,82,1) 0%, rgba(145,232,66,1) 100%);
  background: -o-linear-gradient(left, rgba(210,255,82,1) 0%, rgba(145,232,66,1) 100%);
  background: -ms-linear-gradient(left, rgba(210,255,82,1) 0%, rgba(145,232,66,1) 100%);
  background: linear-gradient(to right, rgba(210,255,82,1) 0%, rgba(145,232,66,1) 100%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#d2ff52', endColorstr='#91e842', GradientType=1 );
  text-align: center;
  padding: 5%;
  border-radius: 10px;
  border: 1px solid lime;
  display: inline-block;
}

.center{
  text-align: center !important;

}

.marto15{
  margin-top: 15px;
}

.marbo15{
  margin-bottom: 5px;
}

.btn-primary{
  background-color: limegreen;

}

.generalContent{
  margin-top: 56px;
}

#homeAvatarPicture{
  max-width: 100px;
}

.disblo{
  display: block !important;
}

.marbo5{
  margin-bottom: 5px;
}

.pato45{
  padding-top: 45px;
}

input[type ="file"]{
  display: none;
}

.custom-file-upload{
  background: #f2f6f8;
  background: -moz-linear-gradient(top, #f2f6f8 0%, #d8e1e7 50%, #b5c6d0 51%, #e0eff9 100%);
  background: -webkit-linear-gradient(top, #f2f6f8 0%, #d8e1e7 50%, #b5c6d0 51%, #e0eff9 100%);
  background: linear-gradient(to bottom, #f2f6f8 0%, #d8e1e7 50%, #b5c6d0 51%, #e0eff9 100%);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#f2f6f8', endColorstr='#e0eff9', GradientType=0);
  display: inline-block;
  padding: 6px 12px;
  cursor: pointer;
  border: 1px solid #8dd2f3;
}

Implementando estilos en profile

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