Skip to content
Snippets Groups Projects
Commit 294eff96 authored by insert's avatar insert
Browse files

Small fixes

parent 8ce454c1
No related merge requests found
Hide whitespace changes
Inline Side-by-side
README.md
+ 1
− 0
View file @ 294eff96
...@@ -15,6 +15,7 @@ Include the library: ...@@ -15,6 +15,7 @@ Include the library:
```html ```html
<script src="https://unpkg.com/vue-dynamic-list@1.0.1/index.js"></script> <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: In your Vue.js application:
```html ```html
......
demo.html
+ 5
− 6
View file @ 294eff96
...@@ -7,7 +7,6 @@ ...@@ -7,7 +7,6 @@
<title>vdynamic-list demo</title> <title>vdynamic-list demo</title>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js"></script> <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> <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"> <link href="https://fonts.googleapis.com/css?family=Raleway" rel="stylesheet">
</head> </head>
<body> <body>
...@@ -79,7 +78,7 @@ ...@@ -79,7 +78,7 @@
margin-left: 14px; margin-left: 14px;
margin-top: 4px; margin-top: 4px;
} }
.section { .section:not(.loaded) {
min-height: calc(50px * 100); min-height: calc(50px * 100);
} }
.entry { .entry {
...@@ -105,17 +104,17 @@ ...@@ -105,17 +104,17 @@
flex: 4; flex: 4;
} }
.entry > div div.filler { .entry > div div.filler {
flex: 4; flex: 2;
} }
.loaded div { .entry .loaded div {
margin-top: 14px; margin-top: 14px;
margin-left: 1em; margin-left: 1em;
} }
.loadbar div div { .entry .loadbar div div {
display: relative; display: relative;
margin-top: 19px; margin-top: 19px;
margin-left: 1em; margin-left: 1em;
max-width: 9em; width: 50%;
height: 12px; height: 12px;
animation-name: color; animation-name: color;
animation-duration: 2s; animation-duration: 2s;
......
index.js
+ 1
− 1
View file @ 294eff96
...@@ -74,7 +74,7 @@ Vue.component('dynamic-list', { ...@@ -74,7 +74,7 @@ Vue.component('dynamic-list', {
} }
}, },
template: `<div class="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="section" v-for="entry in section" class="entry">
<div v-if="entry" class="loaded"> <div v-if="entry" class="loaded">
<slot name="entry" v-bind:entry="entry"></slot> <slot name="entry" v-bind:entry="entry"></slot>
......
package.json
+ 1
− 1
View file @ 294eff96
{ {
"name": "vue-dynamic-list", "name": "vue-dynamic-list",
"version": "1.0.1", "version": "1.0.2",
"description": "Simple fixed size dynamically loading lists in Vue.js", "description": "Simple fixed size dynamically loading lists in Vue.js",
"main": "index.js", "main": "index.js",
"scripts": { "scripts": {
......
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment