Change "Loading remote data" formatRepo() markup.

Now fits the styles in docs/_sass/_s2-result-repository.

Author: Florian Kissling

docs/examples.html

@@ -1042,22 +1042,21 @@ <h2>Example code</h2>
   function formatRepo (repo) {
     if (repo.loading) return repo.text;
 
-    var markup = '<div class="clearfix">' +
-    '<div class="col-sm-1">' +
-    '<img src="' + repo.owner.avatar_url + '" style="max-width: 100%" />' +
-    '</div>' +
-    '<div clas="col-sm-10">' +
-    '<div class="clearfix">' +
-    '<div class="col-sm-6">' + repo.full_name + '</div>' +
-    '<div class="col-sm-3"><i class="fa fa-code-fork"></i> ' + repo.forks_count + '</div>' +
-    '<div class="col-sm-2"><i class="fa fa-star"></i> ' + repo.stargazers_count + '</div>' +
-    '</div>';
-
-    if (repo.description) {
-      markup += '<div>' + repo.description + '</div>';
-    }
-
-    markup += '</div></div>';
+      var markup = "<div class='select2-result-repository clearfix'>" +
+        "<div class='select2-result-repository__avatar'><img src='" + repo.owner.avatar_url + "' /></div>" +
+        "<div class='select2-result-repository__meta'>" +
+          "<div class='select2-result-repository__title'>" + repo.full_name + "</div>";
+
+      if (repo.description) {
+        markup += "<div class='select2-result-repository__description'>" + repo.description + "</div>";
+      }
+
+      markup += "<div class='select2-result-repository__statistics'>" +
+        "<div class='select2-result-repository__forks'><i class='fa fa-flash'></i> " + repo.forks_count + " Forks</div>" +
+        "<div class='select2-result-repository__stargazers'><i class='fa fa-star'></i> " + repo.stargazers_count + " Stars</div>" +
+        "<div class='select2-result-repository__watchers'><i class='fa fa-eye'></i> " + repo.watchers_count + " Watchers</div>" +
+      "</div>" +
+      "</div></div>";
 
     return markup;
   }