Implementando estilos en la pantalla de home

Clase 30 de 63 • Curso de Angular 6 2018

Contenido del curso

Introducción

Definición de la estructura del App

Basics de Angular y TypeScript

Estilos

Acceso a datos remotos y login

Opciones y subida de imágenes

Conversación

Amigos

Deploy

Conclusión

Tomar examen

Resumen

En el directorio assets/ del proyecto se encuentran los archivos de imágenes que se usan para los backgrounds en los diferentes contenedores de la UI, así como otras imágenes del proyecto.

Comentarios

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;
}

home.component.css

.ico-estatus {
  width: 15px;
  height: 15px;
}

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

#whiteBorderGlassBox {
  border: 2px solid rgba(255, 255, 255, .75);
  padding: 8px;
}

.homeHeadContainer {
  background-color: rgba(255, 255, 255, .50);
}

#homeAvatarPicture {
  max-width: 100px;
}

home.component.html

<div id="homeContainer">
  <div class="whiteBorderGlassBox">
    <div class="homeHeadContainer">
      <div class="row">
        <div class="col-md-auto">
          <div class="avatarFrameOnLine">
            <img src="assets/img/generic_avatar.png" id="homeAvatarPicture"/>
          </div>
        </div>
        <div class="col">
          <b>Uriel</b>
          <div>
            <span>Online</span>
            <br/>
            <span>< Escribe un Mensaje Personal ></span>
          </div>
        </div>
      </div>
    </div>
  </div>
  <input type="text" placeholder="Buscar Amigo" [(ngModel)]="query"/>
  <br/>
  <b>Amigos</b>
  <ng-container *ngFor="let user of friends | search: query; let i = index">
    <div>
      <img class="ico-estatus" src="assets/img/logo_live_{{user.status}}.png" alt="Estatus de Contacto"/>
      <a routerLink="/conversation/{{user.uid}}">
        {{i + 1}}. {{user.nick}} - {{user.email}}
      </a>
    </div>
  </ng-container>
</div>

Gustavo Adolfo Ramírez Apache

student•

Evite usar ids para agregar estios, es una mala practica.

Javi Puc

student•

@Gustavo Ramírez Apache como debía ser?

Luis Miguel Ramos Hernández

student•

Hay un error ya que en el html whiteBorderGlassBox lo asignas como clase y en el css lo asignas como id

Manuel Alejandro Rivas Estrada

student•

Estimado Eduardo es recomendable usar archivos javascript para animaciones y otros fines (por ejemplo, librerias de graficos, terceros, otros) en Angular 6. Si fuera recomendable, cual seria la manera correcta de incluir los archivos?

johangel leon

student•

Para cualquier persona del futuro que tenga esta misma duda, hace unos capitulos nos enseñaron como importar estilos en nuestra app usando el archivos angular.json, así mismo existe una arreglo llamado scripts, en el cual podremos enseñarle a angular que librerarias terceras queremos tener en nuestra aplicacion, por ejemplo si quisiera utilizar jquery harias:

instalarlo usando npm
referenciarlo dentro de angular.json en el arreglo scripts (receurda que se instalara en node_modules)
vuelve a compilar la app usango ng serve y ya asi estarias importando scripts terceros en tu app.

Walter Lensinas

student•

Buenas tardes, dejo el código de las clase en este repositorio

Para ver el código:

git clone https://github.com/wlensinas/platzinger-wl.git
git checkout 21-create-service
npm install
ng serve --open

Saludos.

JUAN CARRANZA CULQUI

student•

buen curso

Juan Gabriel Pérez Guerra

student•

Asi es Excelente Curso....

Jeison Sneider Ruiz Zemanate

student•

style.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;
}

home.component.html ----->

<div id="homeContainer">

  <div class="whiteBorderClassBox">
    <div class="homeHeadContainer">
        <div class="row">
          <div class="col-md-auto">
            <div class="avatarFrameonline">
              <img src="assets/img/generic_avatar.png" id="homeAvatarPicture" />

            </div>
          </div>
          <div class="col">
            <b>Jeison Ruiz</b>
            <div>
              <span>Online</span>
              <br/>
              <span>Escribe un mensaje personal</span>
            </div>
          </div>
        </div>
    </div>
  </div>
  <input type="text" placeholder="Buscar amigo" [(ngModel)]="query" />
  <br/>
  <br/>
  <b>Amigos</b>
  <ng-container *ngFor="let user of friends | search: query; let i = index">

    <div >
      <a routerLink="/conversation/{{user.uid}}" >
        <img id="imgStatus"src="../../assets/img/logo_live_{{user.status}}.png"> {{i}}. {{user.nick}} - {{user.email}}
      </a>

    </div>

  </ng-container>

</div>

home.component.css ---->

#imgStatus{
  width: 50px;
}

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

#whiteBorderClassBox{
  border: 2px solid rgba(255,255,255, .75);
  padding: 8px;
}

.homeHeadContainer{
  background-color: rgba(255,255,255, .50);

}

#homeAvatarPicture{
  max-width: 100px;
}

Edward Hurtado Hurtado

student•

y la intro del video xd?

Daniel Vicente Vergara Suarez

student•

x2 jejejejej

Eduardo Rahn

student•

Por que algunos estilos los agregaste por intermedio de una clase y otros por el Id?

Alberto D. Sosa

student•

La respuesta más sencilla para eso es que algunos estilos se crean para ser reutilizables en muchos elementos como por ejemplo las clases y otros particulares o únicos para un elemento como por ejemplo el id.

Gustavo Adolfo Ramírez Apache

student•

De todas formas así sean unicos debe evitar usarse id, esto se da por algo llamado especificidad.

Alex Eugenio Gavidia Donayre

student•

Gracias

Damian Spizzirri

student•

Me gusta mucho que lo estes haciendo mientras lo explicas y muestres paso a paso como va cambiando.

Juan Pablo Castro

student•

En qué momento la página se volvió entera responsive?

Desarrollo Icesi

student•

El boostrap y las buenas prácticas te proporcionan eso. Cuando una página es modular Booststrap es muy útil porque te proporciona el responsive con sus atributos.

Juan Gabriel Pérez Guerra

student•

Tengo una duda porque algunas veces se utiliza CSS el '#' y otras '.'? Ejemplo .HomeContainer{} #HomeContainer{} Lo digo porque nome estaba funcionando con # y con . si.

Doapps Team

student•

Se usa :

"." : cuando el selector es un "class"
"#" : cuando el selector es un "id".

Vicente Daniel Zurita Salas

student•

son selectores, uno es para clases '.' y el otro para id '#'.

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

.ico-estatus {
  width: 15px;
  height: 15px;
}

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

#whiteBorderGlassBox {
  border: 2px solid rgba(255, 255, 255, .75);
  padding: 8px;
}

.homeHeadContainer {
  background-color: rgba(255, 255, 255, .50);
}

#homeAvatarPicture {
  max-width: 100px;
}

<div id="homeContainer">
  <div class="whiteBorderGlassBox">
    <div class="homeHeadContainer">
      <div class="row">
        <div class="col-md-auto">
          <div class="avatarFrameOnLine">
            <img src="assets/img/generic_avatar.png" id="homeAvatarPicture"/>
          </div>
        </div>
        <div class="col">
          <b>Uriel</b>
          <div>
            <span>Online</span>
            <br/>
            <span>< Escribe un Mensaje Personal ></span>
          </div>
        </div>
      </div>
    </div>
  </div>
  <input type="text" placeholder="Buscar Amigo" [(ngModel)]="query"/>
  <br/>
  <b>Amigos</b>
  <ng-container *ngFor="let user of friends | search: query; let i = index">
    <div>
      <img class="ico-estatus" src="assets/img/logo_live_{{user.status}}.png" alt="Estatus de Contacto"/>
      <a routerLink="/conversation/{{user.uid}}">
        {{i + 1}}. {{user.nick}} - {{user.email}}
      </a>
    </div>
  </ng-container>
</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;
}

<div id="homeContainer">

  <div class="whiteBorderClassBox">
    <div class="homeHeadContainer">
        <div class="row">
          <div class="col-md-auto">
            <div class="avatarFrameonline">
              <img src="assets/img/generic_avatar.png" id="homeAvatarPicture" />

            </div>
          </div>
          <div class="col">
            <b>Jeison Ruiz</b>
            <div>
              <span>Online</span>
              <br/>
              <span>Escribe un mensaje personal</span>
            </div>
          </div>
        </div>
    </div>
  </div>
  <input type="text" placeholder="Buscar amigo" [(ngModel)]="query" />
  <br/>
  <br/>
  <b>Amigos</b>
  <ng-container *ngFor="let user of friends | search: query; let i = index">

    <div >
      <a routerLink="/conversation/{{user.uid}}" >
        <img id="imgStatus"src="../../assets/img/logo_live_{{user.status}}.png"> {{i}}. {{user.nick}} - {{user.email}}
      </a>

    </div>

  </ng-container>

</div>

#imgStatus{
  width: 50px;
}

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

#whiteBorderClassBox{
  border: 2px solid rgba(255,255,255, .75);
  padding: 8px;
}

.homeHeadContainer{
  background-color: rgba(255,255,255, .50);

}

#homeAvatarPicture{
  max-width: 100px;
}

Implementando estilos en la pantalla de home

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