Skip to content

Commit 5cabc32

Browse files
hawkeye64hawkeye64
committed
chore: update demo pages
1 parent 8fe5bc8 commit 5cabc32

File tree

5 files changed

+121
-189
lines changed

5 files changed

+121
-189
lines changed

‎demo/src/components/EssentialLinks.vue‎

Lines changed: 109 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,109 @@
1+
<template>
2+
<q-list>
3+
<q-item clickable to="/docs">
4+
<q-item-section avatar>
5+
<q-icon name="bolt" />
6+
</q-item-section>
7+
<q-item-section>
8+
<q-item-label>QIconPicker docs</q-item-label>
9+
<q-item-label caption>Documentation</q-item-label>
10+
</q-item-section>
11+
</q-item>
12+
<q-item clickable to="/demo">
13+
<q-item-section avatar>
14+
<q-icon name="bolt" />
15+
</q-item-section>
16+
<q-item-section>
17+
<q-item-label>QIconPicker demo</q-item-label>
18+
<q-item-label caption>Interactively play with properties</q-item-label>
19+
</q-item-section>
20+
</q-item>
21+
<q-item clickable to="/examples">
22+
<q-item-section avatar>
23+
<q-icon name="bolt" />
24+
</q-item-section>
25+
<q-item-section>
26+
<q-item-label>QIconPicker examples</q-item-label>
27+
<q-item-label caption>Examples of how to do it</q-item-label>
28+
</q-item-section>
29+
</q-item>
30+
<q-separator />
31+
<q-item clickable tag="a" target="_blank" href="https://github.com/quasarframework/app-extension-qiconpicker">
32+
<q-item-section avatar>
33+
<q-icon name="extension" />
34+
</q-item-section>
35+
<q-item-section>
36+
<q-item-label>QIconPicker home</q-item-label>
37+
<q-item-label caption>@quasar/qiconpicker</q-item-label>
38+
</q-item-section>
39+
</q-item>
40+
<q-item clickable tag="a" target="_blank" href="https://github.com/quasarframework/app-extension-qmarkdown">
41+
<q-item-section avatar>
42+
<q-icon name="extension" />
43+
</q-item-section>
44+
<q-item-section>
45+
<q-item-label>QMarkdown home</q-item-label>
46+
<q-item-label caption>@quasar/qmarkdown</q-item-label>
47+
</q-item-section>
48+
</q-item>
49+
<q-separator />
50+
<q-item clickable tag="a" target="_blank" href="http://quasar.dev">
51+
<q-item-section avatar>
52+
<q-icon name="school" />
53+
</q-item-section>
54+
<q-item-section>
55+
<q-item-label>Docs</q-item-label>
56+
<q-item-label caption>quasar.dev</q-item-label>
57+
</q-item-section>
58+
</q-item>
59+
<q-item clickable tag="a" target="_blank" href="https://github.com/quasarframework/">
60+
<q-item-section avatar>
61+
<q-icon name="code" />
62+
</q-item-section>
63+
<q-item-section>
64+
<q-item-label>Github</q-item-label>
65+
<q-item-label caption>github.com/quasarframework</q-item-label>
66+
</q-item-section>
67+
</q-item>
68+
<q-item clickable tag="a" target="_blank" href="http://chat.quasar.dev">
69+
<q-item-section avatar>
70+
<q-icon name="chat" />
71+
</q-item-section>
72+
<q-item-section>
73+
<q-item-label>Discord Chat Channel</q-item-label>
74+
<q-item-label caption>chat.quasar.dev</q-item-label>
75+
</q-item-section>
76+
</q-item>
77+
<q-item clickable tag="a" target="_blank" href="https://forum.quasar.dev">
78+
<q-item-section avatar>
79+
<q-icon name="record_voice_over" />
80+
</q-item-section>
81+
<q-item-section>
82+
<q-item-label>Forum</q-item-label>
83+
<q-item-label caption>forum.quasar.dev</q-item-label>
84+
</q-item-section>
85+
</q-item>
86+
<q-item clickable tag="a" target="_blank" href="https://twitter.com/quasarframework">
87+
<q-item-section avatar>
88+
<q-icon name="rss_feed" />
89+
</q-item-section>
90+
<q-item-section>
91+
<q-item-label>Twitter</q-item-label>
92+
<q-item-label caption>@quasarframework</q-item-label>
93+
</q-item-section>
94+
</q-item>
95+
</q-list>
96+
97+
</template>
98+
99+
<script>
100+
export default {
101+
// name: 'ComponentName',
102+
data () {
103+
return {}
104+
}
105+
}
106+
</script>
107+
108+
<style>
109+
</style>

‎demo/src/css/app.styl‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -93,8 +93,8 @@ a {
9393
.page-header {
9494
color: #fff;
9595
text-align: center;
96-
background-color: #159957;
97-
background-image: linear-gradient(120deg, #155799, #159957); }
96+
background-color: #9932CC;
97+
background-image: linear-gradient(120deg, #155799, #9932CC); }
9898

9999
@media screen and (min-width: 64em) {
100100
.page-header {

‎demo/src/layouts/IconPickerLayout.vue‎

Lines changed: 3 additions & 95 deletions
Original file line numberDiff line numberDiff line change
@@ -50,100 +50,7 @@
5050
icon="fas fa-link"
5151
label="Essential Links"
5252
>
53-
<q-list>
54-
<q-item clickable tag="a" target="_blank" href="http://quasar.dev">
55-
<q-item-section avatar>
56-
<q-icon name="school" />
57-
</q-item-section>
58-
<q-item-section>
59-
<q-item-label>Docs</q-item-label>
60-
<q-item-label caption>quasar.dev</q-item-label>
61-
</q-item-section>
62-
</q-item>
63-
<q-item clickable tag="a" target="_blank" href="https://github.com/quasarframework/">
64-
<q-item-section avatar>
65-
<q-icon name="code" />
66-
</q-item-section>
67-
<q-item-section>
68-
<q-item-label>Github</q-item-label>
69-
<q-item-label caption>github.com/quasarframework</q-item-label>
70-
</q-item-section>
71-
</q-item>
72-
<q-item clickable tag="a" target="_blank" href="http://chat.quasar.dev">
73-
<q-item-section avatar>
74-
<q-icon name="chat" />
75-
</q-item-section>
76-
<q-item-section>
77-
<q-item-label>Discord Chat Channel</q-item-label>
78-
<q-item-label caption>chat.quasar.dev</q-item-label>
79-
</q-item-section>
80-
</q-item>
81-
<q-item clickable tag="a" target="_blank" href="https://forum.quasar.dev">
82-
<q-item-section avatar>
83-
<q-icon name="record_voice_over" />
84-
</q-item-section>
85-
<q-item-section>
86-
<q-item-label>Forum</q-item-label>
87-
<q-item-label caption>forum.quasar.dev</q-item-label>
88-
</q-item-section>
89-
</q-item>
90-
<q-item clickable tag="a" target="_blank" href="https://twitter.com/quasarframework">
91-
<q-item-section avatar>
92-
<q-icon name="rss_feed" />
93-
</q-item-section>
94-
<q-item-section>
95-
<q-item-label>Twitter</q-item-label>
96-
<q-item-label caption>@quasarframework</q-item-label>
97-
</q-item-section>
98-
</q-item>
99-
<q-separator />
100-
<q-item clickable tag="a" target="_blank" href="https://github.com/quasarframework/app-extension-qiconpicker">
101-
<q-item-section avatar>
102-
<q-icon name="extension" />
103-
</q-item-section>
104-
<q-item-section>
105-
<q-item-label>QIconPicker home</q-item-label>
106-
<q-item-label caption>@quasar/qiconpicker</q-item-label>
107-
</q-item-section>
108-
</q-item>
109-
<q-item clickable tag="a" target="_blank" href="https://github.com/quasarframework/app-extension-qmarkdown">
110-
<q-item-section avatar>
111-
<q-icon name="extension" />
112-
</q-item-section>
113-
<q-item-section>
114-
<q-item-label>QMarkdown home</q-item-label>
115-
<q-item-label caption>@quasar/qmarkdown</q-item-label>
116-
</q-item-section>
117-
</q-item>
118-
<q-separator />
119-
<q-item clickable to="/docs">
120-
<q-item-section avatar>
121-
<q-icon name="calendar_today" />
122-
</q-item-section>
123-
<q-item-section>
124-
<q-item-label>QIconPicker docs</q-item-label>
125-
<q-item-label caption>Documentation</q-item-label>
126-
</q-item-section>
127-
</q-item>
128-
<q-item clickable to="/demo">
129-
<q-item-section avatar>
130-
<q-icon name="calendar_today" />
131-
</q-item-section>
132-
<q-item-section>
133-
<q-item-label>QIconPicker demo</q-item-label>
134-
<q-item-label caption>Interactively play with properties</q-item-label>
135-
</q-item-section>
136-
</q-item>
137-
<q-item clickable to="/examples">
138-
<q-item-section avatar>
139-
<q-icon name="calendar_today" />
140-
</q-item-section>
141-
<q-item-section>
142-
<q-item-label>QIconPicker examples</q-item-label>
143-
<q-item-label caption>Examples of how to do it</q-item-label>
144-
</q-item-section>
145-
</q-item>
146-
</q-list>
53+
<essential-links />
14754
</q-expansion-item>
14855
</div>
14956
</q-drawer>
@@ -160,7 +67,8 @@ import { openURL } from 'quasar'
16067
export default {
16168
name: 'IconPickerLayout',
16269
components: {
163-
'playground': () => import('../components/Playground')
70+
'playground': () => import('../components/Playground'),
71+
'essential-links': () => import('../components/EssentialLinks')
16472
},
16573
data () {
16674
return {

‎demo/src/layouts/MainLayout.vue‎

Lines changed: 4 additions & 92 deletions
Original file line numberDiff line numberDiff line change
@@ -41,99 +41,8 @@
4141
>
4242
<q-list>
4343
<q-item-label header>Essential Links</q-item-label>
44-
<q-item clickable tag="a" target="_blank" href="http://quasar.dev">
45-
<q-item-section avatar>
46-
<q-icon name="school" />
47-
</q-item-section>
48-
<q-item-section>
49-
<q-item-label>Docs</q-item-label>
50-
<q-item-label caption>quasar.dev</q-item-label>
51-
</q-item-section>
52-
</q-item>
53-
<q-item clickable tag="a" target="_blank" href="https://github.com/quasarframework/">
54-
<q-item-section avatar>
55-
<q-icon name="code" />
56-
</q-item-section>
57-
<q-item-section>
58-
<q-item-label>Github</q-item-label>
59-
<q-item-label caption>github.com/quasarframework</q-item-label>
60-
</q-item-section>
61-
</q-item>
62-
<q-item clickable tag="a" target="_blank" href="http://chat.quasar.dev">
63-
<q-item-section avatar>
64-
<q-icon name="chat" />
65-
</q-item-section>
66-
<q-item-section>
67-
<q-item-label>Discord Chat Channel</q-item-label>
68-
<q-item-label caption>chat.quasar.dev</q-item-label>
69-
</q-item-section>
70-
</q-item>
71-
<q-item clickable tag="a" target="_blank" href="https://forum.quasar.dev">
72-
<q-item-section avatar>
73-
<q-icon name="record_voice_over" />
74-
</q-item-section>
75-
<q-item-section>
76-
<q-item-label>Forum</q-item-label>
77-
<q-item-label caption>forum.quasar.dev</q-item-label>
78-
</q-item-section>
79-
</q-item>
80-
<q-item clickable tag="a" target="_blank" href="https://twitter.com/quasarframework">
81-
<q-item-section avatar>
82-
<q-icon name="rss_feed" />
83-
</q-item-section>
84-
<q-item-section>
85-
<q-item-label>Twitter</q-item-label>
86-
<q-item-label caption>@quasarframework</q-item-label>
87-
</q-item-section>
88-
</q-item>
89-
<q-separator />
90-
<q-item clickable tag="a" target="_blank" href="https://github.com/quasarframework/app-extension-qiconpicker">
91-
<q-item-section avatar>
92-
<q-icon name="extension" />
93-
</q-item-section>
94-
<q-item-section>
95-
<q-item-label>QIconPicker home</q-item-label>
96-
<q-item-label caption>@quasar/qiconpicker</q-item-label>
97-
</q-item-section>
98-
</q-item>
99-
<q-item clickable tag="a" target="_blank" href="https://github.com/quasarframework/app-extension-qmarkdown">
100-
<q-item-section avatar>
101-
<q-icon name="extension" />
102-
</q-item-section>
103-
<q-item-section>
104-
<q-item-label>QMarkdown home</q-item-label>
105-
<q-item-label caption>@quasar/qmarkdown</q-item-label>
106-
</q-item-section>
107-
</q-item>
108-
<q-separator />
109-
<q-item clickable to="/docs">
110-
<q-item-section avatar>
111-
<q-icon name="calendar_today" />
112-
</q-item-section>
113-
<q-item-section>
114-
<q-item-label>QIconPicker docs</q-item-label>
115-
<q-item-label caption>Documentation</q-item-label>
116-
</q-item-section>
117-
</q-item>
118-
<q-item clickable to="/demo">
119-
<q-item-section avatar>
120-
<q-icon name="calendar_today" />
121-
</q-item-section>
122-
<q-item-section>
123-
<q-item-label>QIconPicker demo</q-item-label>
124-
<q-item-label caption>Interactively play with properties</q-item-label>
125-
</q-item-section>
126-
</q-item>
127-
<q-item clickable to="/examples">
128-
<q-item-section avatar>
129-
<q-icon name="calendar_today" />
130-
</q-item-section>
131-
<q-item-section>
132-
<q-item-label>QIconPicker examples</q-item-label>
133-
<q-item-label caption>Examples of how to do it</q-item-label>
134-
</q-item-section>
135-
</q-item>
13644
</q-list>
45+
<essential-links />
13746
</q-drawer>
13847

13948
<q-drawer
@@ -174,6 +83,9 @@ import { scroll } from 'quasar'
17483
17584
export default {
17685
name: 'MyLayout',
86+
components: {
87+
'essential-links': () => import('../components/EssentialLinks')
88+
},
17789
data () {
17890
return {
17991
leftDrawerOpen: this.$q.platform.is.desktop,

‎demo/src/pages/Examples.vue‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -23,6 +23,9 @@
2323
<example-card title="Pagination" name="Pagination" />
2424
<example-card title="Pagination Color" name="PaginationColor" />
2525
</div>
26+
<q-page-scroller position="bottom-right" :scroll-offset="150" :offset="[18, 18]">
27+
<q-btn fab icon="keyboard_arrow_up" color="primary" />
28+
</q-page-scroller>
2629
</hero>
2730
</template>
2831

0 commit comments

Comments
 (0)