Improve style and example

Author: David-Desmaisons

docs/app.js

@@ -12,11 +12,62 @@
       />
     </a>
 
-    <div class="logo">
-      <img alt="Vue.draggable logo" src="./assets/logo.png" />
-    </div>
-
     <div class="container ">
+      <div class="jumbotron logo">
+        <img
+          class="draggable"
+          alt="Vue.draggable logo"
+          src="./assets/logo.svg"
+        />
+
+        <div id="badges">
+          <a
+            target="_blank"
+            href="https://circleci.com/gh/SortableJS/Vue.Draggable"
+            ><img
+              src="https://circleci.com/gh/SortableJS/Vue.Draggable.svg?style=shield"
+            />
+          </a>
+          <a
+            target="_blank"
+            href="https://codecov.io/gh/SortableJS/Vue.Draggable"
+            ><img
+              src="https://codecov.io/gh/SortableJS/Vue.Draggable/branch/master/graph/badge.svg"
+            />
+          </a>
+          <a
+            target="_blank"
+            href="https://codebeat.co/projects/github-com-sortablejs-vue-draggable-master"
+            ><img
+              src="https://codebeat.co/badges/7a6c27c8-2d0b-47b9-af55-c2eea966e713"
+            />
+          </a>
+          <a
+            target="_blank"
+            href="https://github.com/SortableJS/Vue.Draggable/issues?q=is%3Aopen+is%3Aissue"
+            ><img
+              src="https://img.shields.io/github/issues/SortableJS/Vue.Draggable.svg"
+            />
+          </a>
+          <a target="_blank" href="https://www.npmjs.com/package/vuedraggable"
+            ><img src="https://img.shields.io/npm/dt/vuedraggable.svg" />
+          </a>
+          <a target="_blank" href="https://www.npmjs.com/package/vuedraggable"
+            ><img src="https://img.shields.io/npm/dm/vuedraggable.svg" />
+          </a>
+          <a target="_blank" href="https://www.npmjs.com/package/vuedraggable"
+            ><img src="https://img.shields.io/npm/v/vuedraggable.svg" />
+          </a>
+          <a
+            target="_blank"
+            href="https://github.com/SortableJS/Vue.Draggable/blob/master/LICENSE"
+            ><img
+              src="https://img.shields.io/github/license/SortableJS/Vue.Draggable.svg"
+            />
+          </a>
+        </div>
+      </div>
+
       <ul class="nav nav-tabs" role="tablist">
         <li
           class="nav-item"
@@ -113,8 +164,14 @@ export default {
   width: 400px;
 }
 
-.logo {
+.jumbotron.logo {
   text-align: center;
+  padding-top: 32px;
+  padding-bottom: 16px;
+}
+
+.jumbotron.logo .draggable {
+  height: 200px;
 }
 
 >>> h3 {
@@ -128,4 +185,18 @@ export default {
 a {
   color: black;
 }
+
+#badges {
+  text-align: center;
+  padding: 10px;
+}
+
+#badges img {
+  padding-left: 2px;
+  padding-right: 2px;
+}
+
+#tab-content {
+  min-height: 500px;
+}
 </style>

docs/img/logo.6819dcc8.png

@@ -2,10 +2,10 @@ import Sortable from "sortablejs";
 import { insertNodeAt, camelize, console, removeNode } from "./util/helper";
 
 function buildAttribute(object, propName, value) {
-  if (value == undefined) {
+  if (value === undefined) {
     return object;
   }
-  object = object == null ? {} : object;
+  object = object || {};
   object[propName] = value;
   return object;
 }
@@ -154,7 +154,10 @@ const draggableComponent = {
   render(h) {
     const slots = this.$slots.default;
     this.transitionMode = isTransition(slots);
-    const { children, headerOffset, footerOffset } = computeChildrenAndOffsets(slots, this.$slots);
+    const { children, headerOffset, footerOffset } = computeChildrenAndOffsets(
+      slots,
+      this.$slots
+    );
     this.headerOffset = headerOffset;
     this.footerOffset = footerOffset;
     const attributes = getComponentAttributes(this.$attrs, this.componentData);
@@ -255,7 +258,7 @@ const draggableComponent = {
     updateOptions(newOptionValue) {
       for (var property in newOptionValue) {
         const value = camelize(property);
-        if (readonlyProperties.indexOf(value) == -1) {
+        if (readonlyProperties.indexOf(value) === -1) {
           this._sortable.option(value, newOptionValue[property]);
         }
       }
@@ -264,7 +267,7 @@ const draggableComponent = {
     getChildrenNodes() {
       if (!this.init) {
         this.noneFunctionalComponentMode =
-          this.noneFunctionalComponentMode && this.$children.length == 1;
+          this.noneFunctionalComponentMode && this.$children.length === 1;
         this.init = true;
       }
 
@@ -428,7 +431,7 @@ const draggableComponent = {
       );
       const currentDOMIndex = domChildren.indexOf(evt.related);
       const currentIndex = relatedContext.component.getVmIndex(currentDOMIndex);
-      const draggedInList = domChildren.indexOf(draggingElement) != -1;
+      const draggedInList = domChildren.indexOf(draggingElement) !== -1;
       return draggedInList || !evt.willInsertAfter
         ? currentIndex
         : currentIndex + 1;