diff --git a/README.md b/README.md
index 834564e71d7bc557e96a84054492fa6dde19431e..2859c0f2bef3126af24ace49596ff28e40f4dc88 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 0afc9e58c8d817aa080ce06740efe20995b1c928..a31eca4fc2815e81c31d241376e64edff144e1a9 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 834ea6edf80d393860ccbaaf9ba94c0a92b8e5b8..c12d9271490abd6314230739836a91985c541ff0 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 3f16ed0543b3d801b4dc9b9631f78775da11ceba..c504e749c2221a20aba83d23ce08d2f40d3cc6d3 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": {