Skip to content

Commit e25cc91

Browse files
cyrossignolcyrossignol
committed
Replace bootstrap JS bundle with bootstrap-vue
1 parent 4f83782 commit e25cc91

6 files changed

Lines changed: 239 additions & 82 deletions

File tree

‎app.vue‎

Lines changed: 5 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,7 @@
11
<template>
2-
<nuxt-layout>
3-
<nuxt-page />
4-
</nuxt-layout>
2+
<b-app>
3+
<nuxt-layout>
4+
<nuxt-page />
5+
</nuxt-layout>
6+
</b-app>
57
</template>

‎components/AppNavbar.vue‎

Lines changed: 14 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -29,18 +29,21 @@
2929
<span class="mx-auto" />
3030

3131
<nuxt-link v-show="!auth.ok" to="/signin" class="btn">Sign In</nuxt-link>
32-
<span v-show="auth.ok" class="nav-item dropdown">
33-
<a class="nav-link" href="#" id="navbarAccountMenuLink" role="button" data-bs-toggle="dropdown" aria-expanded="false">
32+
<b-dropdown
33+
v-show="auth.ok"
34+
class="nav-item"
35+
placement="bottom-end"
36+
:variant="null"
37+
is-nav
38+
no-caret
39+
>
40+
<template #button-content>
3441
<app-icon variant="account_circle" size="24" />{{ auth.displayName }}
35-
</a>
36-
<ul class="dropdown-menu dropdown-menu-end" aria-labelledby="navbarAccountMenuLink">
37-
<li>
38-
<nuxt-link class="dropdown-item" to="/" @click="auth.clear()">
39-
<app-icon variant="logout" class="me-3" />Logout
40-
</nuxt-link>
41-
</li>
42-
</ul>
43-
</span>
42+
</template>
43+
<b-dropdown-item to="/" @click="auth.clear()">
44+
<app-icon variant="logout" class="me-3" />Logout
45+
</b-dropdown-item>
46+
</b-dropdown>
4447
</div>
4548
</div>
4649
</nav>

‎components/review/FilterDropdown.vue‎

Lines changed: 59 additions & 60 deletions
Original file line numberDiff line numberDiff line change
@@ -1,73 +1,72 @@
11
<template>
2-
<div class="dropdown ms-auto">
3-
<button
4-
id="reviewSettingsBtn"
5-
type="button"
6-
class="btn btn-light btn-sm border"
7-
data-bs-toggle="dropdown"
8-
aria-haspopup="true"
9-
aria-expanded="false"
10-
>
2+
<b-dropdown
3+
class="ms-auto"
4+
toggle-class="border"
5+
variant="light"
6+
size="sm"
7+
placement="bottom-end"
8+
auto-close="outside"
9+
no-caret
10+
>
11+
<template #button-content>
1112
<app-icon variant="settings" no-margin />
1213
<span class="visually-hidden">Settings</span>
13-
</button>
14+
</template>
1415

15-
<div class="dropdown-menu dropdown-menu-end" aria-labelledby="reviewSettingsBtn">
16-
<div class="px-3 py-2">
17-
<div class="form-check form-switch">
18-
<label class="form-check-label">
19-
<input
20-
v-model="filter.includeChangesets"
21-
type="checkbox"
22-
class="form-check-input"
23-
/>
24-
Changesets
25-
</label>
26-
</div>
27-
<div class="form-check form-switch">
28-
<label class="form-check-label">
29-
<input
30-
v-model="filter.includeFeedback"
31-
type="checkbox"
32-
class="form-check-input"
33-
/>
34-
Feedback
35-
</label>
36-
</div>
37-
<div class="form-check form-switch">
38-
<label class="form-check-label">
39-
<input
40-
v-model="filter.includeNotes"
41-
type="checkbox"
42-
class="form-check-input"
43-
/>
44-
Notes
45-
</label>
46-
</div>
16+
<div class="px-3 py-2">
17+
<div class="form-check form-switch">
18+
<label class="form-check-label">
19+
<input
20+
v-model="filter.includeChangesets"
21+
type="checkbox"
22+
class="form-check-input"
23+
/>
24+
Changesets
25+
</label>
4726
</div>
27+
<div class="form-check form-switch">
28+
<label class="form-check-label">
29+
<input
30+
v-model="filter.includeFeedback"
31+
type="checkbox"
32+
class="form-check-input"
33+
/>
34+
Feedback
35+
</label>
36+
</div>
37+
<div class="form-check form-switch">
38+
<label class="form-check-label">
39+
<input
40+
v-model="filter.includeNotes"
41+
type="checkbox"
42+
class="form-check-input"
43+
/>
44+
Notes
45+
</label>
46+
</div>
47+
</div>
4848

49-
<div class="dropdown-divider" />
49+
<b-dropdown-divider />
5050

51-
<div class="px-3 py-2">
52-
<div class="form-check form-switch">
53-
<label class="form-check-label">
54-
<input
55-
v-model="filter.includeResolved"
56-
type="checkbox"
57-
class="form-check-input"
58-
/>
59-
Show Resolved
60-
</label>
61-
</div>
51+
<div class="px-3 py-2">
52+
<div class="form-check form-switch">
53+
<label class="form-check-label">
54+
<input
55+
v-model="filter.includeResolved"
56+
type="checkbox"
57+
class="form-check-input"
58+
/>
59+
Show Resolved
60+
</label>
6261
</div>
62+
</div>
6363

64-
<div class="dropdown-divider" />
64+
<div class="dropdown-divider" />
6565

66-
<div class="px-3 py-2">
67-
<button class="d-block btn btn-primary btn-sm" @click="apply">Apply</button>
68-
</div>
69-
</div><!-- .dropdown-menu -->
70-
</div><!-- .dropdown -->
66+
<div class="px-3 py-2">
67+
<button class="d-block btn btn-primary btn-sm" @click="apply">Apply</button>
68+
</div>
69+
</b-dropdown>
7170
</template>
7271

7372
<script setup lang="ts">

‎nuxt.config.ts‎

Lines changed: 5 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,11 @@ export default defineNuxtConfig({
33
ssr: false,
44
sourcemap: { client: 'hidden' },
55
devtools: { enabled: true },
6-
modules: ['@sentry/nuxt/module', '@nuxt/eslint'],
6+
modules: [
7+
'@bootstrap-vue-next/nuxt',
8+
'@nuxt/eslint',
9+
'@sentry/nuxt/module',
10+
],
711
nitro: {
812
// deal with CORS issues during development
913
devProxy: {
@@ -22,8 +26,6 @@ export default defineNuxtConfig({
2226
],
2327
script: [
2428
{ src: 'https://unpkg.com/leaflet@1.9.4/dist/leaflet.js' },
25-
{ src: "https://cdn.jsdelivr.net/npm/@popperjs/core@2.11.8/dist/umd/popper.min.js" },
26-
{ src: "https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.min.js" }
2729
]
2830
},
2931
pageTransition: { name: 'page', mode: 'out-in' }

0 commit comments

Comments
 (0)