From 294eff967cc038bd902540e08864f8004cb1b76a Mon Sep 17 00:00:00 2001
From: Paul Makles <paulmakles@gmail.com>
Date: Sat, 15 Dec 2018 12:28:07 +0000
Subject: [PATCH] Small fixes

---
 README.md    |  1 +
 demo.html    | 11 +++++------
 index.js     |  2 +-
 package.json |  2 +-
 4 files changed, 8 insertions(+), 8 deletions(-)

diff --git a/README.md b/README.md
index 834564e..2859c0f 100644
--- a/README.md
+++ b/README.md
@@ -15,6 +15,7 @@ Include the library:
 ```html
 <script src="https://unpkg.com/vue-dynamic-list@1.0.1/index.js"></script>
 ```
+You also need [Vue](https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js) and [jQuery](https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js).
 
 In your Vue.js application:
 ```html
diff --git a/demo.html b/demo.html
index 0afc9e5..a31eca4 100644
--- a/demo.html
+++ b/demo.html
@@ -7,7 +7,6 @@
 		<title>vdynamic-list demo</title>
 		<script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js"></script>
 		<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>
-		<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/skeleton/2.0.4/skeleton.min.css" integrity="sha256-2YQRJMXD7pIAPHiXr0s+vlRWA7GYJEK0ARns7k2sbHY=" crossorigin="anonymous" />
 		<link href="https://fonts.googleapis.com/css?family=Raleway" rel="stylesheet"> 
 	</head>
 	<body>
@@ -79,7 +78,7 @@
 			margin-left: 14px;
 			margin-top: 4px;
 		}
-		.section {
+		.section:not(.loaded) {
 			min-height: calc(50px * 100);
 		}
 		.entry {
@@ -105,17 +104,17 @@
 			flex: 4;
 		}
 		.entry > div div.filler {
-			flex: 4;
+			flex: 2;
 		}
-		.loaded div {
+		.entry .loaded div {
 			margin-top: 14px;
 			margin-left: 1em;
 		}
-		.loadbar div div {
+		.entry .loadbar div div {
 			display: relative;
 			margin-top: 19px;
 			margin-left: 1em;
-			max-width: 9em;
+			width: 50%;
 			height: 12px;
 			animation-name: color;
 			animation-duration: 2s;
diff --git a/index.js b/index.js
index 834ea6e..c12d927 100644
--- a/index.js
+++ b/index.js
@@ -74,7 +74,7 @@ Vue.component('dynamic-list', {
 		}
 	},
 	template: `<div class="dynamic-list">
-	<div v-for="section in sections" class="section">
+	<div v-for="section in sections" :class="{'section': true, 'loaded': !!section}">
 		<div v-if="section" v-for="entry in section" class="entry">
 			<div v-if="entry" class="loaded">
 				<slot name="entry" v-bind:entry="entry"></slot>
diff --git a/package.json b/package.json
index 3f16ed0..c504e74 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "vue-dynamic-list",
-  "version": "1.0.1",
+  "version": "1.0.2",
   "description": "Simple fixed size dynamically loading lists in Vue.js",
   "main": "index.js",
   "scripts": {
-- 
GitLab