|
4 | 4 | <header class="bd-content pb-4"> |
5 | 5 | <h1>Custom themes and dashboards</h1> |
6 | 6 | <p class="lead"> |
7 | | - With the below themes and dashboards built by our partners, you can build eye-catching |
| 7 | + With the themes and dashboards built by our partners, you can build eye-catching |
8 | 8 | apps and pages — all using BootstrapVue! The following items have been curated by |
9 | 9 | the BootstrapVue team. |
10 | 10 | </p> |
|
26 | 26 | > |
27 | 27 | <b-card no-body bg-variant="light"> |
28 | 28 | <b-row no-gutters> |
29 | | - <b-col md="6" lg="4" xl="4" aria-hidden="true"> |
30 | | - <b-aspect aspect="4:3"> |
| 29 | + <b-col |
| 30 | + md="6" |
| 31 | + lg="4" |
| 32 | + xl="4" |
| 33 | + class="bg-dark" |
| 34 | + aria-hidden="true" |
| 35 | + > |
| 36 | + <b-aspect aspect="4:3" class="h-100 align-items-center"> |
31 | 37 | <b-card-img-lazy |
32 | 38 | :src="theme.img" |
33 | 39 | alt="Image" |
|
39 | 45 | </b-col> |
40 | 46 | <b-col class="d-flex flex-column p-4"> |
41 | 47 | <!-- We use `<h2>` for correct semantics, but `.h5` style --> |
42 | | - <h2 :id="`theme-label-${idx}`" class="h5">{{ theme.title }}</h2> |
43 | | - <b-card-text class="flex-grow-1"> |
44 | | - {{ theme.description }} |
45 | | - </b-card-text> |
| 48 | + <h2 :id="`theme-label-${idx}`" class="h5 mb-3">{{ theme.title }}</h2> |
| 49 | + <b-card-text class="flex-grow-1">{{ theme.description }}</b-card-text> |
46 | 50 | <b-card-text class="text-muted small"> |
47 | | - <span class="d-block d-lg-inline-block mb-2 mb-lg-0">Category: {{ theme.category }}</span> |
48 | | - <span class="d-block d-lg-inline-block ml-lg-3"><i>Provided by: {{ theme.provider }}</i></span> |
| 51 | + <span class="d-block d-lg-inline-block mb-2 mb-lg-0"><strong>Category:</strong> {{ theme.category }}</span> |
| 52 | + <span class="d-block d-lg-inline-block ml-lg-3"><i><strong>Provided by:</strong> {{ theme.provider }}</i></span> |
49 | 53 | </b-card-text> |
50 | 54 | <b-card-text class="d-flex align-items-center"> |
51 | 55 | <b-button :href="theme.href" target="_blank" variant="bd-primary"> |
52 | 56 | Get {{ theme.type || 'theme' }} |
53 | 57 | </b-button> |
54 | | - <small v-if="theme.price" class="text-muted position-relative ml-3"> |
55 | | - Price: {{ theme.price }} |
56 | | - <b-link href="#theme-notes" title="See notes" class="stretched-link"> |
57 | | - <b>*</b> |
58 | | - </b-link> |
59 | | - </small> |
| 58 | + <span v-if="theme.price" class="text-muted position-relative ml-3"> |
| 59 | + <strong>Price:</strong> {{ theme.price }}<b-link href="#theme-notes" title="See notes">*</b-link> |
| 60 | + </span> |
60 | 61 | </b-card-text> |
61 | 62 | </b-col> |
62 | 63 | </b-row> |
|
75 | 76 | site documentation for licensing information. |
76 | 77 | </li> |
77 | 78 | <li> |
78 | | - BootstrapVue does not guarantee that all coustom components provided by a theme are |
| 79 | + BootstrapVue does not guarantee that all custom components provided by a theme are |
79 | 80 | WIA-ARIA compliant. Refer to the provider documentation for details. |
80 | 81 | </li> |
81 | 82 | <li> |
@@ -146,56 +147,22 @@ import BvLogo from '~/components/bv-logo' |
146 | 147 |
|
147 | 148 | export default { |
148 | 149 | components: { BvLogo }, |
149 | | - data() { |
| 150 | + async asyncData({ $content }) { |
| 151 | + // Themes are stored as YAML files in `docs/content/themes` |
| 152 | + // The theme preview image should be 800x400px (and 4:3 aspect ratio) |
| 153 | + // Data structure: |
| 154 | + // title: 'Superduper Dashboard - PRO' |
| 155 | + // type: 'dashboard' |
| 156 | + // category: 'Admin & Dashboard' |
| 157 | + // img: 'https://picsum.photos/800/600/?image=84' |
| 158 | + // href: '#' |
| 159 | + // description: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.' |
| 160 | + // provider: 'Innovative Ivan' |
| 161 | + // price: '$100.00' |
| 162 | + const themes = await $content('themes').fetch() |
| 163 | +
|
150 | 164 | return { |
151 | | - // This could be async data that comes from a JSON file |
152 | | - // Theme image preview should be 800x400px (and 4:3 aspect ratio) |
153 | | - themes: [ |
154 | | - /* |
155 | | - { |
156 | | - title: 'Superduper Dashboard - PRO', |
157 | | - type: 'dashboard', |
158 | | - category: 'Admin & Dashboard', |
159 | | - img: 'https://picsum.photos/800/600/?image=84', |
160 | | - href: '#', |
161 | | - description: |
162 | | - 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.', |
163 | | - provider: 'Innovative Ivan', |
164 | | - price: '$500.00' |
165 | | - }, |
166 | | - { |
167 | | - title: 'Funky dashboard extreme', |
168 | | - type: 'dashboard', |
169 | | - category: 'Admin & Dashboard', |
170 | | - img: 'https://picsum.photos/800/600/?image=82', |
171 | | - href: '#', |
172 | | - description: |
173 | | - 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.', |
174 | | - provider: 'Dashboards-R-Us', |
175 | | - price: 'Free' |
176 | | - }, |
177 | | - { |
178 | | - title: 'Some mystery theme theatre', |
179 | | - img: 'https://picsum.photos/800/600/?image=54', |
180 | | - category: 'Landing & Corporate', |
181 | | - href: '#', |
182 | | - description: |
183 | | - 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.', |
184 | | - provider: 'Cyberdyne Terminators', |
185 | | - price: '$75.00' |
186 | | - }, |
187 | | - { |
188 | | - title: 'Shopper Style Galore', |
189 | | - img: 'https://picsum.photos/800/600/?image=90', |
190 | | - category: 'E-Commerce & Retail', |
191 | | - href: '#', |
192 | | - description: |
193 | | - 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.', |
194 | | - provider: 'Cyberdyne Terminators', |
195 | | - price: '$75.00' |
196 | | - } |
197 | | - */ |
198 | | - ] |
| 165 | + themes |
199 | 166 | } |
200 | 167 | }, |
201 | 168 | computed: { |
|
0 commit comments