player: progress bar position
This commit is contained in:
bkfox
parent
69d77e1d0c
commit
9661e98a70
|
|
@ -9851,6 +9851,8 @@ preview-header:not(.no-cover) .preview-card-headings .heading {
|
|||
flex-direction: row;
|
||||
margin: 0em;
|
||||
padding: 0em;
|
||||
}
|
||||
.a-progress:hover {
|
||||
background-color: var(--progress-bg);
|
||||
}
|
||||
.a-progress .a-progress-bar-container {
|
||||
|
|
@ -9913,7 +9915,6 @@ preview-header:not(.no-cover) .preview-card-headings .heading {
|
|||
|
||||
.a-player {
|
||||
z-index: 10000;
|
||||
box-shadow: 0em 1.5em 2.5em rgba(0, 0, 0, 0.6);
|
||||
}
|
||||
.a-player a {
|
||||
color: var(--highlight-color-2);
|
||||
|
|
@ -9939,27 +9940,28 @@ preview-header:not(.no-cover) .preview-card-headings .heading {
|
|||
}
|
||||
|
||||
.a-player-progress {
|
||||
background: var(--player-bar-bg);
|
||||
height: 0.4em;
|
||||
overflow: hidden;
|
||||
}
|
||||
.a-player-progress time {
|
||||
display: none;
|
||||
}
|
||||
.a-player-progress:hover {
|
||||
.a-player-progress:hover, .a-player-panels.is-open + .a-player-progress {
|
||||
background: var(--player-bar-bg);
|
||||
height: 2em;
|
||||
}
|
||||
.a-player-progress:hover time {
|
||||
.a-player-progress:hover time, .a-player-panels.is-open + .a-player-progress time {
|
||||
display: unset;
|
||||
}
|
||||
|
||||
.a-player-bar {
|
||||
display: flex;
|
||||
background: var(--player-bar-bg);
|
||||
flex-direction: row;
|
||||
justify-content: center;
|
||||
border-top: 1px hsl(0deg, 0%, 71%) solid;
|
||||
height: 3.75em !important;
|
||||
border-top: 1px hsl(0deg, 0%, 71%) solid;
|
||||
background: var(--player-bar-bg);
|
||||
box-shadow: 0em 1.5em 2.5em rgba(0, 0, 0, 0.6);
|
||||
}
|
||||
.a-player-bar > * {
|
||||
height: 100%;
|
||||
|
|
|
|||
|
|
@ -235,7 +235,7 @@ eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpac
|
|||
\***********************************************************************************************************************************************************************************************************************************************************************/
|
||||
/***/ (function(__unused_webpack_module, __webpack_exports__, __webpack_require__) {
|
||||
|
||||
eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */ render: function() { return /* binding */ render; }\n/* harmony export */ });\n/* harmony import */ var vue__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! vue */ \"./node_modules/vue/dist/vue.esm-bundler.js\");\n\nconst _hoisted_1 = {\n class: \"a-playlist\"\n};\nconst _hoisted_2 = {\n class: \"header\"\n};\nconst _hoisted_3 = [\"onClick\"];\nconst _hoisted_4 = [\"onClick\"];\nconst _hoisted_5 = /*#__PURE__*/(0,vue__WEBPACK_IMPORTED_MODULE_0__.createElementVNode)(\"span\", {\n class: \"icon is-small\"\n}, [/*#__PURE__*/(0,vue__WEBPACK_IMPORTED_MODULE_0__.createElementVNode)(\"span\", {\n class: \"fa fa-close\"\n})], -1 /* HOISTED */);\nconst _hoisted_6 = [_hoisted_5];\nfunction render(_ctx, _cache, $props, $setup, $data, $options) {\n const _component_ASoundItem = (0,vue__WEBPACK_IMPORTED_MODULE_0__.resolveComponent)(\"ASoundItem\");\n return (0,vue__WEBPACK_IMPORTED_MODULE_0__.openBlock)(), (0,vue__WEBPACK_IMPORTED_MODULE_0__.createElementBlock)(\"div\", _hoisted_1, [(0,vue__WEBPACK_IMPORTED_MODULE_0__.createElementVNode)(\"div\", _hoisted_2, [(0,vue__WEBPACK_IMPORTED_MODULE_0__.renderSlot)(_ctx.$slots, \"header\")]), (0,vue__WEBPACK_IMPORTED_MODULE_0__.createElementVNode)(\"ul\", {\n class: (0,vue__WEBPACK_IMPORTED_MODULE_0__.normalizeClass)(_ctx.listClass)\n }, [((0,vue__WEBPACK_IMPORTED_MODULE_0__.openBlock)(true), (0,vue__WEBPACK_IMPORTED_MODULE_0__.createElementBlock)(vue__WEBPACK_IMPORTED_MODULE_0__.Fragment, null, (0,vue__WEBPACK_IMPORTED_MODULE_0__.renderList)(_ctx.items, (item, index) => {\n return (0,vue__WEBPACK_IMPORTED_MODULE_0__.openBlock)(), (0,vue__WEBPACK_IMPORTED_MODULE_0__.createElementBlock)(\"li\", {\n class: (0,vue__WEBPACK_IMPORTED_MODULE_0__.normalizeClass)(_ctx.itemClass),\n onClick: $event => !$options.hasAction('play') && _ctx.select(index),\n key: index\n }, [(0,vue__WEBPACK_IMPORTED_MODULE_0__.createElementVNode)(\"a\", {\n class: (0,vue__WEBPACK_IMPORTED_MODULE_0__.normalizeClass)($props.player.isPlaying(item) ? 'is-active' : '')\n }, [(0,vue__WEBPACK_IMPORTED_MODULE_0__.createVNode)(_component_ASoundItem, {\n data: item,\n index: index,\n set: _ctx.set,\n player: $options.player_,\n onTogglePlay: $event => $options.togglePlay(index),\n actions: $props.actions\n }, {\n actions: (0,vue__WEBPACK_IMPORTED_MODULE_0__.withCtx)(({}) => [$props.editable ? ((0,vue__WEBPACK_IMPORTED_MODULE_0__.openBlock)(), (0,vue__WEBPACK_IMPORTED_MODULE_0__.createElementBlock)(\"button\", {\n key: 0,\n class: \"button\",\n onClick: (0,vue__WEBPACK_IMPORTED_MODULE_0__.withModifiers)($event => _ctx.remove(index, true), [\"stop\"])\n }, _hoisted_6, 8 /* PROPS */, _hoisted_4)) : (0,vue__WEBPACK_IMPORTED_MODULE_0__.createCommentVNode)(\"v-if\", true)]),\n _: 2 /* DYNAMIC */\n }, 1032 /* PROPS, DYNAMIC_SLOTS */, [\"data\", \"index\", \"set\", \"player\", \"onTogglePlay\", \"actions\"])], 2 /* CLASS */)], 10 /* CLASS, PROPS */, _hoisted_3);\n }), 128 /* KEYED_FRAGMENT */))], 2 /* CLASS */), (0,vue__WEBPACK_IMPORTED_MODULE_0__.renderSlot)(_ctx.$slots, \"footer\")]);\n}\n\n//# sourceURL=webpack://aircox-assets/./src/components/APlaylist.vue?./node_modules/babel-loader/lib/index.js??clonedRuleSet-40.use%5B0%5D!./node_modules/vue-loader/dist/templateLoader.js??ruleSet%5B1%5D.rules%5B3%5D!./node_modules/vue-loader/dist/index.js??ruleSet%5B0%5D.use%5B0%5D");
|
||||
eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */ render: function() { return /* binding */ render; }\n/* harmony export */ });\n/* harmony import */ var vue__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! vue */ \"./node_modules/vue/dist/vue.esm-bundler.js\");\n\nconst _hoisted_1 = {\n class: \"a-playlist\"\n};\nconst _hoisted_2 = {\n class: \"header\"\n};\nconst _hoisted_3 = [\"onClick\"];\nconst _hoisted_4 = [\"onClick\"];\nconst _hoisted_5 = /*#__PURE__*/(0,vue__WEBPACK_IMPORTED_MODULE_0__.createElementVNode)(\"span\", {\n class: \"icon is-small\"\n}, [/*#__PURE__*/(0,vue__WEBPACK_IMPORTED_MODULE_0__.createElementVNode)(\"span\", {\n class: \"fa fa-close\"\n})], -1 /* HOISTED */);\nconst _hoisted_6 = [_hoisted_5];\nfunction render(_ctx, _cache, $props, $setup, $data, $options) {\n const _component_ASoundItem = (0,vue__WEBPACK_IMPORTED_MODULE_0__.resolveComponent)(\"ASoundItem\");\n return (0,vue__WEBPACK_IMPORTED_MODULE_0__.openBlock)(), (0,vue__WEBPACK_IMPORTED_MODULE_0__.createElementBlock)(\"div\", _hoisted_1, [(0,vue__WEBPACK_IMPORTED_MODULE_0__.createElementVNode)(\"div\", _hoisted_2, [(0,vue__WEBPACK_IMPORTED_MODULE_0__.renderSlot)(_ctx.$slots, \"header\")]), (0,vue__WEBPACK_IMPORTED_MODULE_0__.createElementVNode)(\"ul\", {\n class: (0,vue__WEBPACK_IMPORTED_MODULE_0__.normalizeClass)(_ctx.listClass)\n }, [((0,vue__WEBPACK_IMPORTED_MODULE_0__.openBlock)(true), (0,vue__WEBPACK_IMPORTED_MODULE_0__.createElementBlock)(vue__WEBPACK_IMPORTED_MODULE_0__.Fragment, null, (0,vue__WEBPACK_IMPORTED_MODULE_0__.renderList)(_ctx.items, (item, index) => {\n return (0,vue__WEBPACK_IMPORTED_MODULE_0__.openBlock)(), (0,vue__WEBPACK_IMPORTED_MODULE_0__.createElementBlock)(\"li\", {\n class: (0,vue__WEBPACK_IMPORTED_MODULE_0__.normalizeClass)([_ctx.itemClass, $props.player.isPlaying(item) ? 'is-active' : '']),\n onClick: $event => !$options.hasAction('play') && _ctx.select(index),\n key: index\n }, [(0,vue__WEBPACK_IMPORTED_MODULE_0__.createVNode)(_component_ASoundItem, {\n data: item,\n index: index,\n set: _ctx.set,\n player: $options.player_,\n onTogglePlay: $event => $options.togglePlay(index),\n actions: $props.actions\n }, {\n actions: (0,vue__WEBPACK_IMPORTED_MODULE_0__.withCtx)(({}) => [$props.editable ? ((0,vue__WEBPACK_IMPORTED_MODULE_0__.openBlock)(), (0,vue__WEBPACK_IMPORTED_MODULE_0__.createElementBlock)(\"button\", {\n key: 0,\n class: \"button\",\n onClick: (0,vue__WEBPACK_IMPORTED_MODULE_0__.withModifiers)($event => _ctx.remove(index, true), [\"stop\"])\n }, _hoisted_6, 8 /* PROPS */, _hoisted_4)) : (0,vue__WEBPACK_IMPORTED_MODULE_0__.createCommentVNode)(\"v-if\", true)]),\n _: 2 /* DYNAMIC */\n }, 1032 /* PROPS, DYNAMIC_SLOTS */, [\"data\", \"index\", \"set\", \"player\", \"onTogglePlay\", \"actions\"])], 10 /* CLASS, PROPS */, _hoisted_3);\n }), 128 /* KEYED_FRAGMENT */))], 2 /* CLASS */), (0,vue__WEBPACK_IMPORTED_MODULE_0__.renderSlot)(_ctx.$slots, \"footer\")]);\n}\n\n//# sourceURL=webpack://aircox-assets/./src/components/APlaylist.vue?./node_modules/babel-loader/lib/index.js??clonedRuleSet-40.use%5B0%5D!./node_modules/vue-loader/dist/templateLoader.js??ruleSet%5B1%5D.rules%5B3%5D!./node_modules/vue-loader/dist/index.js??ruleSet%5B0%5D.use%5B0%5D");
|
||||
|
||||
/***/ }),
|
||||
|
||||
|
|
|
|||
|
|
@ -16,6 +16,7 @@
|
|||
{{ block.super }}
|
||||
|
||||
{% if object.podcasts %}
|
||||
{% spaceless %}
|
||||
<section class="container no-border">
|
||||
<h3 class="title is-3">{% translate "Podcasts" %}</h3>
|
||||
<a-playlist v-if="page" :set="podcasts"
|
||||
|
|
@ -25,12 +26,20 @@
|
|||
@select="player.playItems('queue', $event.item)">
|
||||
</a-playlist>
|
||||
</section>
|
||||
{% endspaceless %}
|
||||
{% endif %}
|
||||
|
||||
{% if tracks %}
|
||||
<section class="container">
|
||||
<h3 class="title is-3">{% translate "Playlist" %}</h3>
|
||||
<table class="table is-hoverable is-fullwidth">
|
||||
<thead>
|
||||
<tr>
|
||||
<th></th>
|
||||
<th>{% translate "Artist" %}</th>
|
||||
<th>{% translate "Title" %}</th>
|
||||
<th></th>
|
||||
</thead>
|
||||
<tbody>
|
||||
{% for track in tracks %}
|
||||
<tr>
|
||||
|
|
|
|||
|
|
@ -679,7 +679,10 @@ nav li {
|
|||
flex-direction: row;
|
||||
margin: 0em;
|
||||
padding: 0em;
|
||||
background-color: var(--progress-bg);
|
||||
|
||||
&:hover {
|
||||
background-color: var(--progress-bg);
|
||||
}
|
||||
|
||||
.a-progress-bar-container {
|
||||
flex-grow: 1;
|
||||
|
|
@ -761,7 +764,6 @@ nav li {
|
|||
//-- player
|
||||
.a-player {
|
||||
z-index: 10000;
|
||||
box-shadow: 0em 1.5em 2.5em rgba(0, 0, 0, 0.6);
|
||||
|
||||
a { color: var(--highlight-color-2); }
|
||||
}
|
||||
|
|
@ -786,13 +788,13 @@ nav li {
|
|||
}
|
||||
|
||||
.a-player-progress {
|
||||
background: var(--player-bar-bg);
|
||||
height: 0.4em;
|
||||
overflow: hidden;
|
||||
|
||||
time { display: none; }
|
||||
|
||||
&:hover {
|
||||
&:hover, .a-player-panels.is-open + & {
|
||||
background: var(--player-bar-bg);
|
||||
height: 2em;
|
||||
time { display: unset; }
|
||||
}
|
||||
|
|
@ -800,12 +802,13 @@ nav li {
|
|||
|
||||
.a-player-bar {
|
||||
display: flex;
|
||||
background: var(--player-bar-bg);
|
||||
flex-direction: row;
|
||||
justify-content: center;
|
||||
height: 3.75em !important;
|
||||
|
||||
border-top: 1px $grey-light solid;
|
||||
height: 3.75em !important;
|
||||
background: var(--player-bar-bg);
|
||||
box-shadow: 0em 1.5em 2.5em rgba(0, 0, 0, 0.6);
|
||||
|
||||
> * { height: 100%; }
|
||||
|
||||
|
|
|
|||
|
|
@ -2,20 +2,18 @@
|
|||
<div class="a-playlist">
|
||||
<div class="header"><slot name="header"></slot></div>
|
||||
<ul :class="listClass">
|
||||
<li v-for="(item,index) in items" :class="itemClass" @click="!hasAction('play') && select(index)"
|
||||
<li v-for="(item,index) in items" :class="[itemClass, player.isPlaying(item) ? 'is-active' : '']" @click="!hasAction('play') && select(index)"
|
||||
:key="index">
|
||||
<a :class="player.isPlaying(item) ? 'is-active' : ''">
|
||||
<ASoundItem
|
||||
:data="item" :index="index" :set="set" :player="player_"
|
||||
@togglePlay="togglePlay(index)"
|
||||
:actions="actions">
|
||||
<template v-slot:actions="{}">
|
||||
<button class="button" v-if="editable" @click.stop="remove(index,true)">
|
||||
<span class="icon is-small"><span class="fa fa-close"></span></span>
|
||||
</button>
|
||||
</template>
|
||||
</ASoundItem>
|
||||
</a>
|
||||
<ASoundItem
|
||||
:data="item" :index="index" :set="set" :player="player_"
|
||||
@togglePlay="togglePlay(index)"
|
||||
:actions="actions">
|
||||
<template v-slot:actions="{}">
|
||||
<button class="button" v-if="editable" @click.stop="remove(index,true)">
|
||||
<span class="icon is-small"><span class="fa fa-close"></span></span>
|
||||
</button>
|
||||
</template>
|
||||
</ASoundItem>
|
||||
</li>
|
||||
</ul>
|
||||
<slot name="footer"></slot>
|
||||
|
|
|
|||
Loading…
Reference in New Issue
Block a user