Skip to content

Commit 1394e2a

Browse files
BlariBlari
committed
Add changelog.md;
Add screenshots; User list: add buttons and search, fix table colors; Calendar: fix errors; Pagination: fix errors; Timeline: fix errors;
1 parent 0c09f7a commit 1394e2a

File tree

6 files changed

+77
-79
lines changed

6 files changed

+77
-79
lines changed

‎src/assets/img/screenshots/1.png

58.6 KB
Loading

‎src/assets/img/screenshots/2.png

52.9 KB
Loading

‎src/assets/img/screenshots/3.png

131 KB
Loading

‎src/pages/Extra/Calendar/Calendar.vue

-2
Original file line numberDiff line numberDiff line change
@@ -11,13 +11,11 @@
1111
<v-sheet height="686">
1212
<v-calendar
1313
ref="calendar"
14-
v-model="value"
1514
color="primary"
1615
type="4day"
1716
:events="events"
1817
:event-color="getEventColor"
1918
:event-ripple="false"
20-
@change="getEvents"
2119
@mousedown:event="startDrag"
2220
@mousedown:time="startTime"
2321
@mousemove:time="mouseMove"

‎src/pages/Extra/TimeLine/TemeLine.vue

+1-1
Original file line numberDiff line numberDiff line change
@@ -64,7 +64,7 @@
6464
:key="index"
6565
></v-divider>
6666
<v-list-item
67-
:key="item.title"
67+
:key="(index + 1) * 2"
6868
>
6969
<v-list-item-avatar>
7070
<v-img :src="item.avatar"></v-img>

‎src/pages/UI/Pagination/Pagination.vue

+76-76
Original file line numberDiff line numberDiff line change
@@ -1,94 +1,94 @@
11
<template>
22
<v-container fluid class="pagination-pages mt-3">
33
<v-row>
4-
<v-col lg=6 cols=12>
5-
<v-card class="overflow-hidden mx-1">
4+
<v-col lg=6 cols=12>
5+
<v-card class="overflow-hidden mx-1">
6+
<v-card-title class="pa-5 pb-3">
7+
<p>Pagination Example</p>
8+
<v-spacer></v-spacer>
9+
<v-menu>
10+
<template v-slot:activator="{ on, attrs }">
11+
<v-btn
12+
icon
13+
v-bind="attrs"
14+
v-on="on"
15+
>
16+
<v-icon color="greyTint">mdi-dots-vertical</v-icon>
17+
</v-btn>
18+
</template>
19+
<v-list>
20+
<v-list-item
21+
v-for="(item, i) in menu"
22+
:key="i"
23+
@click="() => {}"
24+
>
25+
<v-list-item-title >{{ item }}</v-list-item-title>
26+
</v-list-item>
27+
</v-list>
28+
</v-menu>
29+
</v-card-title>
30+
<v-card-text class="pa-5 pt-0">
31+
<p class="fs-normal greyBold--text mb-5">The <code>v-pagination</code> component is used to separate
32+
long sets of data so that it is easier for a user to consume information.</p>
33+
<div class="text-center">
34+
<v-pagination
35+
class="pagination-example"
36+
v-model="page"
37+
:length="6"
38+
></v-pagination>
39+
</div>
40+
</v-card-text>
41+
</v-card>
42+
</v-col>
43+
<v-col lg=6 cols=12>
44+
<v-card class="overflow-hidden mx-1">
645
<v-card-title class="pa-5 pb-3">
7-
<p>Pagination Example</p>
46+
<p>Pagination Length</p>
847
<v-spacer></v-spacer>
948
<v-menu>
1049
<template v-slot:activator="{ on, attrs }">
11-
<v-btn
12-
icon
13-
v-bind="attrs"
14-
v-on="on"
15-
>
16-
<v-icon color="greyTint">mdi-dots-vertical</v-icon>
17-
</v-btn>
18-
</template>
19-
<v-list>
20-
<v-list-item
21-
v-for="(item, i) in menu"
22-
:key="i"
23-
@click="() => {}"
50+
<v-btn
51+
icon
52+
v-bind="attrs"
53+
v-on="on"
2454
>
25-
<v-list-item-title >{{ item }}</v-list-item-title>
55+
<v-icon color="greyTint">mdi-dots-vertical</v-icon>
56+
</v-btn>
57+
</template>
58+
<v-list>
59+
<v-list-item
60+
v-for="(item, i) in menu"
61+
:key="i"
62+
@click="() => {}"
63+
>
64+
<v-list-item-title >{{ item }}</v-list-item-title>
2665
</v-list-item>
27-
</v-list>
66+
</v-list>
2867
</v-menu>
2968
</v-card-title>
3069
<v-card-text class="pa-5 pt-0">
31-
<p class="fs-normal greyBold--text mb-5">The <code>v-pagination</code> component is used to separate
32-
long sets of data so that it is easier for a user to consume information.</p>
70+
<p class="fs-normal greyBold--text mb-5">Using the <code>length</code> prop you can set the length of <code>v-pagination</code>, if the number of
71+
page buttons exceeds the parent container, it will truncate the list.</p>
3372
<div class="text-center">
34-
<v-pagination
35-
class="pagination-example"
36-
v-model="page"
37-
:length="6"
38-
></v-pagination>
73+
<v-container>
74+
<v-row no-gutters justify="center">
75+
<v-col cols="8">
76+
<v-container class="max-width">
77+
<v-pagination
78+
class="pagination-length"
79+
v-model="pageLong"
80+
:length="15"
81+
color="secondary"
82+
></v-pagination>
83+
</v-container>
84+
</v-col>
85+
</v-row>
86+
</v-container>
3987
</div>
4088
</v-card-text>
4189
</v-card>
42-
</v-col>
43-
<v-col lg=6 cols=12>
44-
<v-card class="overflow-hidden mx-1">
45-
<v-card-title class="pa-5 pb-3">
46-
<p>Pagination Length</p>
47-
<v-spacer></v-spacer>
48-
<v-menu>
49-
<template v-slot:activator="{ on, attrs }">
50-
<v-btn
51-
icon
52-
v-bind="attrs"
53-
v-on="on"
54-
>
55-
<v-icon color="greyTint">mdi-dots-vertical</v-icon>
56-
</v-btn>
57-
</template>
58-
<v-list>
59-
<v-list-item
60-
v-for="(item, i) in menu"
61-
:key="i"
62-
@click="() => {}"
63-
>
64-
<v-list-item-title >{{ item }}</v-list-item-title>
65-
</v-list-item>
66-
</v-list>
67-
</v-menu>
68-
</v-card-title>
69-
<v-card-text class="pa-5 pt-0">
70-
<p class="fs-normal greyBold--text mb-5">Using the <code>length</code> prop you can set the length of <code>v-pagination</code>, if the number of
71-
page buttons exceeds the parent container, it will truncate the list.</p>
72-
<div class="text-center">
73-
<v-container>
74-
<v-row no-gutters justify="center">
75-
<v-col cols="8">
76-
<v-container class="max-width">
77-
<v-pagination
78-
class="pagination-length"
79-
v-model="pageLong"
80-
:length="15"
81-
color="secondary"
82-
></v-pagination>
83-
</v-container>
84-
</v-col>
85-
</v-row>
86-
</v-container>
87-
</div>
88-
</v-card-text>
89-
</v-card>
90-
</v-col>
91-
</v-row>
90+
</v-col>
91+
</v-row>
9292
<v-row>
9393
<v-col lg=6 cols=12>
9494
<v-card class="overflow-hidden mx-1 mb-1">
@@ -160,7 +160,7 @@
160160
<p class="fs-normal greyBold--text mb-5">Pagination items can be manually deactivated using the <code>disabled</code> prop.</p>
161161
<div class="text-center">
162162
<v-pagination
163-
length="3"
163+
:length="3"
164164
disabled
165165
class="pagination-disabled"
166166
></v-pagination>

0 commit comments

Comments
 (0)