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