diff --git a/front/src/components/Sidebar.vue b/front/src/components/Sidebar.vue index 5fc0458c9e44c70dd19fba1d50a8674c1e89bbe3..10f10f91bacb748e05d116eb7505441eda0ed6f8 100644 --- a/front/src/components/Sidebar.vue +++ b/front/src/components/Sidebar.vue @@ -16,8 +16,8 @@ <div class="menu-area"> <div class="ui compact fluid two item inverted menu"> - <a class="active item" role="button" @click.prevent.stop="selectedTab = 'library'" data-tab="library"><translate>Browse</translate></a> - <a class="item" role="button" @click.prevent.stop="selectedTab = 'queue'" data-tab="queue"> + <a :class="[{active: selectedTab === 'library'}, 'item']" role="button" @click.prevent.stop="selectedTab = 'library'" data-tab="library"><translate>Browse</translate></a> + <a :class="[{active: selectedTab === 'queue'}, 'item']" role="button" @click.prevent.stop="selectedTab = 'queue'" data-tab="queue"> <translate>Queue</translate> <template v-if="queue.tracks.length === 0"> <translate>(empty)</translate> @@ -29,7 +29,7 @@ </div> </div> <div class="tabs"> - <section class="ui bottom attached active tab" data-tab="library" :aria-label="labels.mainMenu"> + <section :class="['ui', 'bottom', 'attached', {active: selectedTab === 'library'}, 'tab']" :aria-label="labels.mainMenu"> <nav class="ui inverted vertical large fluid menu" role="navigation" :aria-label="labels.mainMenu"> <div class="item"> <header class="header"><translate>My account</translate></header> @@ -113,7 +113,7 @@ </div> </div> </div> - <section class="ui bottom attached tab" data-tab="queue"> + <section :class="['ui', 'bottom', 'attached', {active: selectedTab === 'queue'}, 'tab']"> <table class="ui compact inverted very basic fixed single line unstackable table"> <draggable v-model="tracks" element="tbody" @update="reorder"> <tr @@ -188,11 +188,6 @@ export default { fetchInterval: null } }, - mounted() { - $(this.$el) - .find(".menu .item") - .tab() - }, destroy() { if (this.fetchInterval) { clearInterval(this.fetchInterval) diff --git a/front/src/semantic.js b/front/src/semantic.js index 5267ba770a692df33b8f0ba8c2c9e5d403565063..f5dad819256c1d08940c9dd304b4a1888ae1e6c0 100644 --- a/front/src/semantic.js +++ b/front/src/semantic.js @@ -8,16 +8,16 @@ require('semantic-ui-css/components/dropdown.min.js') // require('semantic-ui-css/components/form.min.js') require('semantic-ui-css/components/modal.min.js') // require('semantic-ui-css/components/nag.min.js') -require('semantic-ui-css/components/popup.min.js') +// require('semantic-ui-css/components/popup.min.js') require('semantic-ui-css/components/progress.min.js') // require('semantic-ui-css/components/rating.min.js') require('semantic-ui-css/components/search.min.js') -require('semantic-ui-css/components/shape.min.js') -require('semantic-ui-css/components/sidebar.min.js') +// require('semantic-ui-css/components/shape.min.js') +// require('semantic-ui-css/components/sidebar.min.js') require('semantic-ui-css/components/site.min.js') require('semantic-ui-css/components/state.min.js') require('semantic-ui-css/components/sticky.min.js') -require('semantic-ui-css/components/tab.min.js') +// require('semantic-ui-css/components/tab.min.js') require('semantic-ui-css/components/transition.min.js') // require('semantic-ui-css/components/video.min.js') require('semantic-ui-css/components/visibility.min.js') diff --git a/front/src/style/_main.scss b/front/src/style/_main.scss index 1aa074756934d8be64f73ed3b87d8a400f8e14b5..e8f5333ce5e5f943d50a5b75175c0ccb05e5bd65 100644 --- a/front/src/style/_main.scss +++ b/front/src/style/_main.scss @@ -27,14 +27,14 @@ @import "~semantic-ui-css/components/label.css"; @import "~semantic-ui-css/components/list.css"; @import "~semantic-ui-css/components/loader.css"; -@import "~semantic-ui-css/components/placeholder.css"; +// @import "~semantic-ui-css/components/placeholder.css"; // @import "~semantic-ui-css/components/rail.css"; // @import "~semantic-ui-css/components/reveal.css"; @import "~semantic-ui-css/components/segment.css"; @import "~semantic-ui-css/components/step.css"; /* Collections */ -@import "~semantic-ui-css/components/breadcrumb.css"; +// @import "~semantic-ui-css/components/breadcrumb.css"; @import "~semantic-ui-css/components/form.css"; @import "~semantic-ui-css/components/grid.css"; @import "~semantic-ui-css/components/menu.css"; @@ -42,10 +42,10 @@ @import "~semantic-ui-css/components/table.css"; /* Views */ -@import "~semantic-ui-css/components/ad.css"; +// @import "~semantic-ui-css/components/ad.css"; @import "~semantic-ui-css/components/card.css"; -@import "~semantic-ui-css/components/comment.css"; -@import "~semantic-ui-css/components/feed.css"; +// @import "~semantic-ui-css/components/comment.css"; +// @import "~semantic-ui-css/components/feed.css"; @import "~semantic-ui-css/components/item.css"; @import "~semantic-ui-css/components/statistic.css";