cambios

raulfb · Apr 12, 2019 · d197c17 · d197c17
1 parent 249be9b
commit d197c17
Show file tree

Hide file tree

Showing 7 changed files with 83 additions and 31 deletions.
diff --git a/README.md b/README.md
@@ -1,4 +1,4 @@
-# topartist
+# TopArtist
 
 > Visualizacion de las listas de existos de musica en distintos paises
 

diff --git a/index.html b/index.html
@@ -1,8 +1,9 @@
 <!DOCTYPE html>
-<html lang="en">
+<html lang="es">
   <head>
     <meta charset="utf-8">
-    <title>topartist</title>
+    <title>TopArtist</title>
+    <link rel="icon" type="image/png" href="logo.png">
   </head>
   <body>
     <div id="app"></div>

diff --git a/logo.png b/logo.png
diff --git a/package.json b/package.json
@@ -1,5 +1,5 @@
 {
-  "name": "TopArtist",
+  "name": "topartist",
   "description": "Visualizacion de las listas de existos de musica en distintos paises",
   "version": "1.0.0",
   "author": "Raul Franco",

diff --git a/src/App.vue b/src/App.vue
@@ -1,22 +1,19 @@
 <template>
-
   <div id="app">
      <h1 class="titulo">TopArtist.es</h1>
-     <p>Selecciona el pais del que quieres ver la lista de  los artistas más escuchados.</p>
-    <!-- <img src="./assets/logo.png"> -->
+     <br>
+     <p>Selecciona el pais del que quieres ver la lista de los artistas más escuchados.</p>
+     <br>
     <select class="selector" v-model="selectedCountry">
       <option v-for="country in countries" v-bind:value="country.value">{{ country.name }}</option>
     </select>
     <spinner v-show="loading"></spinner>
     <ul>
       <artist v-for="artist in artists" v-bind:artist="artist" v-bind:key="artist.mbid"></artist>
     </ul>
-    <p class="footer"> La fuente de todos estos datos es <a href="https://last.fm/">Last.fm</a></p>
-
+    <p class="footer"> Esta web usa como fuente de sus datos <a href="https://last.fm/">Last.fm</a></p>
   </div>
-
 </template>
-
 <script>
 import Artist from './components/Artist.vue'
 import Spinner from './components/Spinner.vue'
@@ -28,18 +25,18 @@ export default {
     return {
       artists: [],
       countries: [
+        {name: 'Alemania', value: 'germany'},
         {name: 'Argentina', value: 'argentina'},
+        {name: 'Bélgica', value: 'belgium'},
+        {name: 'Brasil', value: 'brazil'},
+        {name: 'Bolivia', value: 'bolivia'},
+        {name: 'Colombia', value: 'colombia'},
         {name: 'Chile', value: 'chile'},
-        {name: 'Ecuador', value: 'ecuador'},
+        {name: 'China', value: 'china'},
         {name: 'España', value: 'spain'},
-        {name: 'Bolivia', value: 'bolivia'},
+        {name: 'Ecuador', value: 'ecuador'},
         {name: 'Francia', value: 'france'},
-        {name: 'Portugal', value: 'portugal'},
-        {name: 'Alemania', value: 'germany'},
-        {name: 'Brasil', value: 'brazil'},
-        {name: 'Bélgica', value: 'belgium'},
-        {name: 'China', value: 'china'},
-        {name: 'Colombia', value: 'colombia'},
+        {name: 'Portugal', value: 'portugal'}   
         ],
         selectedCountry: 'spain',
         loading: true
@@ -79,27 +76,30 @@ export default {
   -moz-osx-font-smoothing: grayscale;
    color:seagreen;
    text-align: center;
- 
 }
 h1.titulo {
     margin: 0;
     font-size: 60px;
     color:seagreen;
     margin-top: 0;
     padding-top:0;
-    font-weight: bolder;
-  
+    font-weight: bolder;  
+}
+.titulo{
+  background: #201f1f;
+  margin-top:0;
+  padding-top:0;
+  height: 85px;
+
 }
 ul {
   list-style-type: none;
   padding-left: 2%;
   padding-right: 1%;
   overflow: hidden;
 }
-
 li {
-  float: left;
-  
+  float: left; 
 }
 li a {
   display: block;
@@ -108,12 +108,15 @@ li a {
   text-decoration: none;
   color: seagreen;
 }
-
 li:hover {
   background-color: #111111;
 }
 body{
   background:black;
+  margin-top:0;
+  padding-top: 0;
+  margin-left: 0;
+  margin-right: 0;
 }
 .footer{
   font-size: 0.7em;
@@ -124,8 +127,7 @@ body{
   color:gray;
 }
 .selector, p{
-  color: seagreen;
-  
+  color: seagreen; 
 }
 .selector{
   width: 15%;

diff --git a/src/components/Artist.vue b/src/components/Artist.vue
@@ -1,12 +1,10 @@
 <template>
 <li class="artist">
     <h2><a :href="artist.url" target="_blank">{{ artist.name }}</a></h2>
-    <img :src="artist.image[2]['#text']"></img>
+    <img :src="artist.image[2]['#text']">
 </li>
 </template>
-
 <script>
-
 export default {
     name: 'artist',
     props: [ 'artist' ]

diff --git a/src/components/Spinner.vue b/src/components/Spinner.vue
@@ -0,0 +1,51 @@
+<template>
+  <div class="loader">Loading...</div>
+</template>
+<script>
+export default {
+  name: 'spinner'
+}
+</script>
+<style>
+.loader,
+.loader:after {
+  border-radius: 50%;
+  width: 10em;
+  height: 10em;
+}
+.loader {
+  margin: 60px auto;
+  font-size: 10px;
+  position: relative;
+  text-indent: -9999em;
+  border-top: 1.1em solid rgba(0,187,128, 0.2);
+  border-right: 1.1em solid rgba(0,187,128, 0.2);
+  border-bottom: 1.1em solid rgba(0,187,128, 0.2);
+  border-left: 1.1em solid #00bb80;
+  -webkit-transform: translateZ(0);
+  -ms-transform: translateZ(0);
+  transform: translateZ(0);
+  -webkit-animation: load8 1.1s infinite linear;
+  animation: load8 1.1s infinite linear;
+}
+@-webkit-keyframes load8 {
+  0% {
+    -webkit-transform: rotate(0deg);
+    transform: rotate(0deg);
+  }
+  100% {
+    -webkit-transform: rotate(360deg);
+    transform: rotate(360deg);
+  }
+}
+@keyframes load8 {
+  0% {
+    -webkit-transform: rotate(0deg);
+    transform: rotate(0deg);
+  }
+  100% {
+    -webkit-transform: rotate(360deg);
+    transform: rotate(360deg);
+  }
+}
+</style>