diff --git a/js/components/playlist/smart-playlist/create-form.vue b/js/components/playlist/smart-playlist/create-form.vue index 0ec4601..b406ca5 100644 --- a/js/components/playlist/smart-playlist/create-form.vue +++ b/js/components/playlist/smart-playlist/create-form.vue @@ -54,7 +54,7 @@ export default Vue.extend({ data: () => ({ name: '', - ruleGroups: [] as SmartPlaylistRuleGroup[], + ruleGroups: [playlistStore.createEmptySmartPlaylistRuleGroup()] as SmartPlaylistRuleGroup[], meta: { loading: false } diff --git a/js/components/playlist/smart-playlist/form-base.vue b/js/components/playlist/smart-playlist/form-base.vue index 1f8706d..8b78e41 100644 --- a/js/components/playlist/smart-playlist/form-base.vue +++ b/js/components/playlist/smart-playlist/form-base.vue @@ -17,8 +17,9 @@ form { .rules { background: rgba(0, 0, 0, .1); - padding: 12px; - border-radius: 5px; + border: 1px solid rgba(255, 255, 255, .1); + padding: .75rem; + border-radius: .3rem; input[type=text], input[type=number], input[type=datetime] { display: inline-block; diff --git a/js/components/playlist/smart-playlist/rule-group.vue b/js/components/playlist/smart-playlist/rule-group.vue index c5b9203..40089e7 100644 --- a/js/components/playlist/smart-playlist/rule-group.vue +++ b/js/components/playlist/smart-playlist/rule-group.vue @@ -76,7 +76,7 @@ export default Vue.extend({ .rule-group { margin-bottom: 1rem; padding-bottom: .5rem; - border-bottom: 1px solid rgba(0, 0, 0, .15); + border-bottom: 1px solid rgba(255, 255, 255, .1); > * + * { margin-bottom: .5rem; diff --git a/js/stores/playlist.ts b/js/stores/playlist.ts index a4111f2..195d85c 100644 --- a/js/stores/playlist.ts +++ b/js/stores/playlist.ts @@ -160,10 +160,12 @@ export const playlistStore = { value: [''] }), - createEmptySmartPlaylistRuleGroup: (): SmartPlaylistRuleGroup => ({ - id: (new Date()).getTime(), - rules: [] - }), + createEmptySmartPlaylistRuleGroup (): SmartPlaylistRuleGroup { + return { + id: (new Date()).getTime(), + rules: [this.createEmptySmartPlaylistRule()] + } + }, /** * Serialize the rule (groups) to be ready for database.