Skip to content

Commit 8d64310

Browse files
tamlandtamland
committed
update to bootstrap 5
1 parent 7f1132f commit 8d64310

38 files changed

+253
-254
lines changed

‎package.json

+1-1
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,7 @@
1010
"dependencies": {
1111
"@iconify-icons/bi": "^1.2.2",
1212
"@vueuse/core": "^11.1.0",
13-
"bootstrap": "^4.6.0",
13+
"bootstrap": "^5.3.3",
1414
"bootstrap-vue": "^2.23.1",
1515
"icecast-metadata-stats": "^0.1.1",
1616
"lodash-es": "^4.17.21",

‎public/index.html

+2-2
Original file line numberDiff line numberDiff line change
@@ -4,9 +4,9 @@
44
<meta charset="utf-8">
55
<meta http-equiv="X-UA-Compatible" content="IE=edge">
66
<% if (process.env.NODE_ENV === "production") { %>
7-
<meta http-equiv="Content-Security-Policy" content="default-src 'none'; connect-src *; img-src *; media-src *; manifest-src 'self'; style-src 'self' 'sha256-47DEQpj8HBSa+/TImW+5JCeuQeRkm5NMpJWZG3hSuFU=' 'sha256-624gmqlO23N0g1Ru4tkjuaPEoL/hXP4w7tUqel4WM98=' 'sha256-47DEQpj8HBSa+/TImW+5JCeuQeRkm5NMpJWZG3hSuFU=' 'sha256-5uOIRR03mYcVoiexgzGGALQ0p1Babe2XxbeIl9t1UpA=' 'sha256-lM8P08IzH0mbT5Tvlm1F5BY3h0gPsb0qNpnZW9YHc7A='; script-src 'self'; base-uri 'self';">
7+
<meta http-equiv="Content-Security-Policy" content="default-src 'none'; connect-src *; img-src data: *; media-src *; manifest-src 'self'; style-src 'self' 'sha256-47DEQpj8HBSa+/TImW+5JCeuQeRkm5NMpJWZG3hSuFU=' 'sha256-624gmqlO23N0g1Ru4tkjuaPEoL/hXP4w7tUqel4WM98=' 'sha256-47DEQpj8HBSa+/TImW+5JCeuQeRkm5NMpJWZG3hSuFU=' 'sha256-5uOIRR03mYcVoiexgzGGALQ0p1Babe2XxbeIl9t1UpA=' 'sha256-lM8P08IzH0mbT5Tvlm1F5BY3h0gPsb0qNpnZW9YHc7A='; script-src 'self'; base-uri 'self';">
88
<% } else { %>
9-
<meta http-equiv="Content-Security-Policy" content="default-src 'none'; connect-src *; img-src *; media-src *; manifest-src 'self'; style-src 'self' 'unsafe-inline'; script-src 'self' 'unsafe-eval'; base-uri 'self';">
9+
<meta http-equiv="Content-Security-Policy" content="default-src 'none'; connect-src *; img-src data: *; media-src *; manifest-src 'self'; style-src 'self' 'unsafe-inline'; script-src 'self' 'unsafe-eval'; base-uri 'self';">
1010
<% } %>
1111
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
1212
<meta name="theme-color" content="#000" />

‎src/app/Logo.vue

+2-2
Original file line numberDiff line numberDiff line change
@@ -18,15 +18,15 @@
1818
<rect width="5.994" height="22.372" x="119.04" y="230.78" rx="2.997" ry="2.997" />
1919
</g>
2020
</svg>
21-
<span class="text-body ml-2 text-nowrap">
21+
<span class="text-body ms-2 text-nowrap">
2222
<span>airsonic&nbsp;</span>
2323
<span class="text-muted">(refix)</span>
2424
</span>
2525
</div>
2626
</template>
2727
<style scoped>
2828
svg {
29-
fill: var(--primary);
29+
fill: var(--bs-primary);
3030
height: 32px;
3131
margin-bottom: 2px;
3232
}

‎src/app/Sidebar.vue

+16-19
Original file line numberDiff line numberDiff line change
@@ -3,30 +3,25 @@
33
<div class="sidebar-fixed d-none d-md-block">
44
<SidebarNav />
55
</div>
6-
<b-sidebar
7-
:visible="store.menuVisible"
8-
class="d-md-none"
9-
sidebar-class="elevated"
10-
bg-variant=""
11-
shadow="lg"
12-
no-header
13-
backdrop
14-
backdrop-variant=""
15-
@hidden="store.hideMenu"
6+
<div
7+
class="offcanvas offcanvas-start d-md-none"
8+
tabindex="-1"
9+
:class="store.menuVisible ? 'showing': 'hiding'"
10+
@click="store.hideMenu"
1611
>
17-
<SidebarNav />
18-
</b-sidebar>
12+
<div class="offcanvas-body p-0">
13+
<SidebarNav />
14+
</div>
15+
</div>
1916
</div>
2017
</template>
2118
<script lang="ts">
2219
import { defineComponent } from 'vue'
2320
import SidebarNav from './SidebarNav.vue'
2421
import { useMainStore } from '@/shared/store'
25-
import { BSidebar } from 'bootstrap-vue'
2622
2723
export default defineComponent({
2824
components: {
29-
BSidebar,
3025
SidebarNav,
3126
},
3227
setup() {
@@ -37,12 +32,14 @@
3732
})
3833
</script>
3934
<style>
40-
.sidebar-container .sidebar-fixed {
35+
.sidebar-container .nav {
4136
padding-left: 0.5rem;
4237
padding-right: 0.5rem;
38+
}
39+
40+
.sidebar-container .sidebar-fixed {
4341
padding-bottom: 100px;
4442
width: 250px;
45-
4643
position: sticky;
4744
top: 0;
4845
max-height: 100vh;
@@ -78,17 +75,17 @@
7875
}
7976
8077
.sidebar-container .nav-link:not(.router-link-active) .icon {
81-
color: var(--text-muted);
78+
color: var(--bs-secondary-color);
8279
}
8380
.sidebar-container .nav-link:hover {
8481
color: inherit;
8582
background-color: rgba(255, 255, 255, 0.045);
8683
}
8784
.sidebar-container .nav-link.router-link-active {
88-
color: var(--primary);
85+
color: var(--bs-primary);
8986
background-color: rgba(255, 255, 255, 0.045);
9087
}
9188
.sidebar-container .nav-link.router-link-active:hover {
92-
color: var(--primary);
89+
color: var(--bs-primary);
9390
}
9491
</style>

‎src/app/TopNav.vue

+6-6
Original file line numberDiff line numberDiff line change
@@ -1,23 +1,23 @@
11
<template>
22
<div class="d-flex align-items-center mb-2">
3-
<button class="navbar-toggler text-white d-md-none" @click="store.showMenu">
3+
<button class="btn navbar-toggler text-white d-md-none" @click="store.showMenu">
44
<Icon icon="nav" />
55
</button>
66

7-
<div class="ml-auto" />
7+
<div class="ms-auto" />
88

9-
<SearchForm />
9+
<SearchForm class="mx-2" />
1010

1111
<template v-if="store.username">
12-
<b-dropdown variant="link" right no-caret>
12+
<b-dropdown variant="link" right no-caret toggle-class="px-0">
1313
<template #button-content>
1414
<Avatar>
1515
<Icon icon="person" />
1616
</Avatar>
1717
</template>
18-
<b-dropdown-text>
18+
<div class="px-3 py-1">
1919
{{ store.username }}
20-
</b-dropdown-text>
20+
</div>
2121
<b-dropdown-divider />
2222
<b-dropdown-item :href="store.server" target="_blank" rel="noopener noreferrer">
2323
Server <Icon icon="link" />

‎src/app/layout/Default.vue

+1-1
Original file line numberDiff line numberDiff line change
@@ -24,7 +24,7 @@
2424
},
2525
})
2626
</script>
27-
<style lang="scss">
27+
<style scoped>
2828
main {
2929
margin-bottom: 80px;
3030
overflow-x: hidden;

‎src/auth/Login.vue

+8-8
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
<template>
2-
<div class="row align-items-center h-100 mt-5">
2+
<div class="d-flex align-items-center h-100 mt-5">
33
<div v-if="!displayForm" class="mx-auto">
44
<span class="spinner-border " />
55
</div>
@@ -10,25 +10,25 @@
1010
<div class="d-flex mb-2">
1111
<Logo class="mx-auto" />
1212
</div>
13-
<div v-if="!config.serverUrl" class="form-group">
14-
<label>Server</label>
13+
<div v-if="!config.serverUrl" class="mb-3">
14+
<label class="form-label">Server</label>
1515
<input v-model="server" name="server" type="text"
1616
class="form-control" :class="{'is-invalid': hasError}">
1717
</div>
18-
<div class="form-group">
19-
<label>Username</label>
18+
<div class="mb-3">
19+
<label class="form-label">Username</label>
2020
<input v-model="username" name="username" type="text"
2121
class="form-control" :class="{'is-invalid': hasError}">
2222
</div>
23-
<div class="form-group">
24-
<label>Password</label>
23+
<div class="mb-3">
24+
<label class="form-label">Password</label>
2525
<input v-model="password" name="password" type="password"
2626
class="form-control" :class="{'is-invalid': hasError}">
2727
</div>
2828
<div v-if="error != null" class="alert alert-danger">
2929
Could not log in. ({{ error.message }})
3030
</div>
31-
<button class="btn btn-primary btn-block" :disabled="busy" @click="login">
31+
<button class="btn btn-primary w-100" :disabled="busy" @click="login">
3232
<span v-show="false" class="spinner-border spinner-border-sm" /> Log in
3333
</button>
3434
</form>

‎src/library/album/AlbumDetails.vue

+5-5
Original file line numberDiff line numberDiff line change
@@ -18,12 +18,12 @@
1818
</span>
1919
</div>
2020
<span v-if="album.year" class="mx-1"> • {{ album.year }}</span>
21-
<span class="mr-3" />
21+
<span class="me-3" />
2222
<div class="d-flex flex-nowrap">
23-
<ExternalLink v-if="album.lastFmUrl" :href="album.lastFmUrl" class="btn btn-link p-0 mr-2" title="Last.fm">
23+
<ExternalLink v-if="album.lastFmUrl" :href="album.lastFmUrl" class="btn btn-link p-0 me-2" title="Last.fm">
2424
<IconLastFm />
2525
</ExternalLink>
26-
<ExternalLink v-if="album.musicBrainzUrl" :href="album.musicBrainzUrl" class="btn btn-link mr-2 p-0" title="MusicBrainz">
26+
<ExternalLink v-if="album.musicBrainzUrl" :href="album.musicBrainzUrl" class="btn btn-link me-2 p-0" title="MusicBrainz">
2727
<IconMusicBrainz />
2828
</ExternalLink>
2929
</div>
@@ -43,10 +43,10 @@
4343
</OverflowFade>
4444

4545
<div class="text-nowrap mt-3">
46-
<b-button variant="secondary" class="mr-2" @click="playNow">
46+
<b-button variant="secondary" class="me-2" @click="playNow">
4747
<Icon icon="play" /> Play
4848
</b-button>
49-
<b-button variant="secondary" class="mr-2" @click="shuffleNow">
49+
<b-button variant="secondary" class="me-2" @click="shuffleNow">
5050
<Icon icon="shuffle" /> Shuffle
5151
</b-button>
5252
<OverflowMenu class="px-1">

‎src/library/artist/ArtistDetails.vue

+4-4
Original file line numberDiff line numberDiff line change
@@ -12,14 +12,14 @@
1212
<strong>{{ item.albumCount }}</strong> albums
1313
</span>
1414
<span class="mx-1">•</span>
15-
<span class="text-nowrap mr-3">
15+
<span class="text-nowrap me-3">
1616
<strong>{{ item.trackCount }}</strong> tracks
1717
</span>
1818
<div class="d-flex flex-nowrap">
19-
<ExternalLink v-if="item.lastFmUrl" :href="item.lastFmUrl" class="btn btn-link p-0 mr-2" title="Last.fm">
19+
<ExternalLink v-if="item.lastFmUrl" :href="item.lastFmUrl" class="btn btn-link p-0 me-2" title="Last.fm">
2020
<IconLastFm />
2121
</ExternalLink>
22-
<ExternalLink v-if="item.musicBrainzUrl" :href="item.musicBrainzUrl" class="btn btn-link mr-2 p-0" title="MusicBrainz">
22+
<ExternalLink v-if="item.musicBrainzUrl" :href="item.musicBrainzUrl" class="btn btn-link me-2 p-0" title="MusicBrainz">
2323
<IconMusicBrainz />
2424
</ExternalLink>
2525
</div>
@@ -38,7 +38,7 @@
3838
</OverflowFade>
3939

4040
<div class="text-nowrap mt-3">
41-
<b-button variant="secondary" :disabled="item.topTracks.length === 0" class="mr-2" @click="playNow">
41+
<b-button variant="secondary" :disabled="item.topTracks.length === 0" class="me-2" @click="playNow">
4242
<Icon icon="play" /> Play
4343
</b-button>
4444
<b-button variant="secondary" :disabled="item.topTracks.length === 0" @click="shuffleNow">

‎src/library/file/Files.vue

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
<template>
22
<div>
33
<div class="d-flex justify-content-between align-items-center mb-2">
4-
<h1 class="mb-0 mr-2 text-truncate">
4+
<h1 class="mb-0 me-2 text-truncate">
55
Files
66
</h1>
77
</div>

‎src/library/playlist/CreatePlaylistModal.vue

+7-7
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,13 @@
11
<template>
22
<b-modal :visible="visible" @ok="confirm" @change="change">
3-
<template #modal-header-close>
4-
<Icon icon="x" />
3+
<template #modal-header>
4+
<h5 class="modal-title">
5+
New playlist
6+
</h5>
7+
<button class="btn-close" @click="change" />
58
</template>
6-
<template #modal-title>
7-
New playlist
8-
</template>
9-
<div class="form-group">
10-
<label>Name</label>
9+
<div class="mb-3">
10+
<label class="form-label">Name</label>
1111
<input v-model="name" class="form-control" type="text">
1212
</div>
1313
<template #modal-ok>

‎src/library/playlist/Playlist.vue

+16-16
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,10 @@
11
<template>
22
<ContentLoader v-slot :loading="playlist == null">
33
<div class="d-flex align-items-center mb-2">
4-
<h1 class="mb-0 mr-2 text-truncate">
4+
<h1 class="mb-0 me-2 text-truncate">
55
{{ playlist.name }}
66
</h1>
7-
<OverflowMenu class="ml-auto">
7+
<OverflowMenu class="ms-auto">
88
<ContextMenuItem icon="edit" :disabled="playlist.isReadOnly" @click="showEditModal = true">
99
Edit
1010
</ContextMenuItem>
@@ -23,23 +23,23 @@
2323
<strong>{{ formatDuration(playlist.duration) }}</strong>
2424
<template v-if="playlist.isPublic">
2525
<span class="mx-1">•</span>
26-
<span class="badge badge-secondary badge-pill">
26+
<span class="badge bg-secondary rounded-pill">
2727
Public
2828
</span>
2929
</template>
3030
</div>
3131

32-
<div v-if="playlist.comment" class="mt-3">
32+
<div v-if="playlist.comment" class="mt-3">
3333
{{ playlist.comment }}
3434
</div>
3535

3636
<div class="text-nowrap mt-3">
37-
<b-button variant="secondary" :disabled="playlist.tracks.length === 0" class="mr-2" @click="playNow">
38-
<Icon icon="play" /> Play
39-
</b-button>
40-
<b-button variant="secondary" :disabled="playlist.tracks.length === 0" @click="shuffleNow">
41-
<Icon icon="shuffle" /> Shuffle
42-
</b-button>
37+
<b-button variant="secondary" :disabled="playlist.tracks.length === 0" class="me-2" @click="playNow">
38+
<Icon icon="play" /> Play
39+
</b-button>
40+
<b-button variant="secondary" :disabled="playlist.tracks.length === 0" @click="shuffleNow">
41+
<Icon icon="shuffle" /> Shuffle
42+
</b-button>
4343
</div>
4444

4545
<TrackList v-if="playlist.tracks.length > 0" :tracks="playlist.tracks" class="mt-3">
@@ -56,16 +56,16 @@
5656
Edit playlist
5757
</template>
5858
<template #default="{ item }">
59-
<div class="form-group">
60-
<label>Name</label>
59+
<div class="mb-3">
60+
<label class="form-label">Name</label>
6161
<input v-model="item.name" class="form-control" type="text">
6262
</div>
63-
<div class="form-group">
64-
<label>Comment</label>
63+
<div class="mb-3">
64+
<label class="form-label">Comment</label>
6565
<textarea v-model="item.comment" class="form-control" />
6666
</div>
67-
<div class="form-group">
68-
<label class="mb-0">Public</label>
67+
<div class="mb-3">
68+
<label class="form-label">Public</label>
6969
<SwitchInput v-model="item.isPublic" />
7070
</div>
7171
</template>

‎src/library/playlist/PlaylistNav.vue

+3-3
Original file line numberDiff line numberDiff line change
@@ -2,14 +2,14 @@
22
<div class="mw-100">
33
<small class="sidebar-heading text-muted">
44
Playlists
5-
<button type="button" class="btn btn-link btn-sm p-0 float-right" @click="showAddModal = true">
5+
<button type="button" class="btn btn-link btn-sm p-0 float-end" @click="showAddModal = true">
66
<Icon icon="plus" />
77
</button>
88
<CreatePlaylistModal :visible.sync="showAddModal" />
99
</small>
1010

1111
<router-link class="nav-link" :to="{name: 'playlist', params: { id: 'random' }}">
12-
<Icon icon="playlist" class="mr-2" /> Random
12+
<Icon icon="playlist" class="me-2" /> Random
1313
</router-link>
1414

1515
<template v-if="playlists">
@@ -19,7 +19,7 @@
1919
class="nav-link"
2020
>
2121
<span @dragover="onDragover" @drop="onDrop(item.id, $event)">
22-
<Icon icon="playlist" class="mr-2" /> {{ item.name }}
22+
<Icon icon="playlist" class="me-2" /> {{ item.name }}
2323
</span>
2424
</router-link>
2525
</template>

‎src/library/podcast/AddPodcastModal.vue

+7-7
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,13 @@
11
<template>
22
<b-modal :visible="visible" @ok="confirm" @change="change">
3-
<template #modal-header-close>
4-
<Icon icon="x" />
3+
<template #modal-header>
4+
<h5 class="modal-title">
5+
Add podcast
6+
</h5>
7+
<button class="btn-close" @click="change" />
58
</template>
6-
<template #modal-title>
7-
Add podcast
8-
</template>
9-
<div class="form-group">
10-
<label>URL</label>
9+
<div class="mb-3">
10+
<label class="form-label">URL</label>
1111
<input v-model="url" class="form-control" type="text" :class="{'is-invalid': hasError}">
1212
<div class="invalid-feedback">
1313
Required

0 commit comments

Comments
 (0)