Better CSS and linter compliant

build/webpack.base.conf.js

@@ -35,6 +35,16 @@ module.exports = {
   },
   module: {
     rules: [
+      { // eslint
+        enforce: 'pre',
+        test: /\.(vue|js)$/,
+        loader: 'eslint-loader',
+        include: projectRoot,
+        exclude: /node_modules/,
+        options: {
+          formatter: require('eslint-friendly-formatter')
+        }
+      },
       {
         test: /\.js$/,
         loader: 'babel-loader',

src/App.vue

@@ -40,9 +40,6 @@
  * Root component
  */
   export default {}
-
-var foo = "bar" + 'baz';
-
 </script>
 
 <style>

src/components/EPFLTopics.vue

@@ -11,7 +11,7 @@
 <script>
 import EPFLTopic from './partials/EPFLTopic'
 export default {
-  components: {"epfl-topic": EPFLTopic},
+  components: {'epfl-topic': EPFLTopic},
   data () {
     return {
       topics: []
@@ -21,9 +21,10 @@ export default {
     this.$http.get('https://api.github.com/search/repositories?q=topic:epfl')
     .then((response) => {
       this.topics = response.data.items.sort((a, b) => {
-        if (a.stargazers_count == 0 && b.stargazers_count == 0) {
+        if (a.stargazers_count === 0 && b.stargazers_count === 0) {
           return b.stargazers_count - a.stargazers_count
-        } else {
+        }
+        else {
           return b.forks_count - b.forks_count
         }
       })

src/components/partials/Avatar.vue

@@ -1,7 +1,7 @@
 <template lang="html">
-  <div class="avatar">
+  <span class="avatar">
     <a :href="dude.html_url"><img class="avatarimg" :src="dude.avatar_url" alt="" :width="size + 'px'" :title="dude.login" /><span v-if="login"> @{{ dude.login }}</span></a>
-  </div>
+  </span>
 </template>
 
 <script>

src/components/partials/EPFLTopic.vue

@@ -20,9 +20,10 @@ export default {
 </script>
 <style>
 div.topic {
-  border: 1px solid lightgreen;
+  border-left: 1px solid lightgreen;
   border-radius: 4px;
-  margin: 20px;
+  padding: 5px;
+  margin: 15px;
   line-height: 2em;
 }
 </style>