From fd7b504d012727bf10a8e834585aa77a569d6165 Mon Sep 17 00:00:00 2001
From: bkfox <thomas bkfox net>
Date: Sun, 20 Mar 2022 12:24:11 +0100
Subject: [PATCH] styling

---
 aircox/models/sound.py                                  | 2 +-
 aircox/static/aircox/js/chunk-common.js                 | 2 +-
 aircox/templates/aircox/base.html                       | 2 +-
 aircox/templates/aircox/page_detail.html                | 2 +-
 aircox_streamer/templates/aircox_streamer/streamer.html | 4 ++--
 assets/src/components/APlayer.vue                       | 2 +-
 6 files changed, 7 insertions(+), 7 deletions(-)

diff --git a/aircox/models/sound.py b/aircox/models/sound.py
index c1c1904..d1e655b 100644
--- a/aircox/models/sound.py
+++ b/aircox/models/sound.py
@@ -100,7 +100,7 @@ class Sound(models.Model):
     def _upload_to(self, filename):
         subdir = AIRCOX_SOUND_ARCHIVES_SUBDIR if self.type == self.TYPE_ARCHIVE else \
                  AIRCOX_SOUND_EXCERPTS_SUBDIR
-        return os.path.join(o.program.path, subdir, filename)
+        return os.path.join(self.program.path, subdir, filename)
 
     file = models.FileField(
         _('file'), upload_to=_upload_to
diff --git a/aircox/static/aircox/js/chunk-common.js b/aircox/static/aircox/js/chunk-common.js
index 9ab85ff..7099309 100644
--- a/aircox/static/aircox/js/chunk-common.js
+++ b/aircox/static/aircox/js/chunk-common.js
@@ -155,7 +155,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: \"player\"\n};\n\nconst _hoisted_2 = /*#__PURE__*/(0,vue__WEBPACK_IMPORTED_MODULE_0__.createElementVNode)(\"p\", {\n  class: \"menu-label\"\n}, [/*#__PURE__*/(0,vue__WEBPACK_IMPORTED_MODULE_0__.createElementVNode)(\"span\", {\n  class: \"icon\"\n}, [/*#__PURE__*/(0,vue__WEBPACK_IMPORTED_MODULE_0__.createElementVNode)(\"span\", {\n  class: \"fa fa-thumbtack\"\n})]), /*#__PURE__*/(0,vue__WEBPACK_IMPORTED_MODULE_0__.createTextVNode)(\" Pinned \")], -1\n/* HOISTED */\n);\n\nconst _hoisted_3 = /*#__PURE__*/(0,vue__WEBPACK_IMPORTED_MODULE_0__.createElementVNode)(\"p\", {\n  class: \"menu-label\"\n}, [/*#__PURE__*/(0,vue__WEBPACK_IMPORTED_MODULE_0__.createElementVNode)(\"span\", {\n  class: \"icon\"\n}, [/*#__PURE__*/(0,vue__WEBPACK_IMPORTED_MODULE_0__.createElementVNode)(\"span\", {\n  class: \"fa fa-list\"\n})]), /*#__PURE__*/(0,vue__WEBPACK_IMPORTED_MODULE_0__.createTextVNode)(\" Playlist \")], -1\n/* HOISTED */\n);\n\nconst _hoisted_4 = {\n  class: \"player-bar media\"\n};\nconst _hoisted_5 = {\n  class: \"media-left\"\n};\nconst _hoisted_6 = [\"title\", \"aria-label\"];\nconst _hoisted_7 = {\n  key: 0,\n  class: \"fas fa-pause\"\n};\nconst _hoisted_8 = {\n  key: 1,\n  class: \"fas fa-play\"\n};\nconst _hoisted_9 = {\n  key: 0,\n  class: \"media-left media-cover\"\n};\nconst _hoisted_10 = [\"src\"];\nconst _hoisted_11 = {\n  class: \"media-content\"\n};\nconst _hoisted_12 = {\n  class: \"media-right\"\n};\n\nconst _hoisted_13 = /*#__PURE__*/(0,vue__WEBPACK_IMPORTED_MODULE_0__.createElementVNode)(\"span\", {\n  class: \"icon is-size-6 has-text-danger\"\n}, [/*#__PURE__*/(0,vue__WEBPACK_IMPORTED_MODULE_0__.createElementVNode)(\"span\", {\n  class: \"fa fa-circle\"\n})], -1\n/* HOISTED */\n);\n\nconst _hoisted_14 = /*#__PURE__*/(0,vue__WEBPACK_IMPORTED_MODULE_0__.createElementVNode)(\"span\", null, \"Live\", -1\n/* HOISTED */\n);\n\nconst _hoisted_15 = [_hoisted_13, _hoisted_14];\nconst _hoisted_16 = {\n  key: 0,\n  class: \"mr-2 is-size-6\"\n};\n\nconst _hoisted_17 = /*#__PURE__*/(0,vue__WEBPACK_IMPORTED_MODULE_0__.createElementVNode)(\"span\", {\n  class: \"icon\"\n}, [/*#__PURE__*/(0,vue__WEBPACK_IMPORTED_MODULE_0__.createElementVNode)(\"span\", {\n  class: \"fa fa-thumbtack\"\n})], -1\n/* HOISTED */\n);\n\nconst _hoisted_18 = {\n  key: 0,\n  class: \"mr-2 is-size-6\"\n};\n\nconst _hoisted_19 = /*#__PURE__*/(0,vue__WEBPACK_IMPORTED_MODULE_0__.createElementVNode)(\"span\", {\n  class: \"icon\"\n}, [/*#__PURE__*/(0,vue__WEBPACK_IMPORTED_MODULE_0__.createElementVNode)(\"span\", {\n  class: \"fa fa-list\"\n})], -1\n/* HOISTED */\n);\n\nfunction render(_ctx, _cache, $props, $setup, $data, $options) {\n  const _component_APlaylist = (0,vue__WEBPACK_IMPORTED_MODULE_0__.resolveComponent)(\"APlaylist\");\n\n  const _component_AProgress = (0,vue__WEBPACK_IMPORTED_MODULE_0__.resolveComponent)(\"AProgress\");\n\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\", {\n    class: (0,vue__WEBPACK_IMPORTED_MODULE_0__.normalizeClass)(['player-panels', $data.panel ? 'is-open' : ''])\n  }, [(0,vue__WEBPACK_IMPORTED_MODULE_0__.withDirectives)((0,vue__WEBPACK_IMPORTED_MODULE_0__.createVNode)(_component_APlaylist, {\n    ref: \"pin\",\n    class: \"player-panel menu\",\n    name: \"Pinned\",\n    actions: ['page'],\n    editable: true,\n    player: $options.self,\n    set: $data.sets.pin,\n    onSelect: _cache[0] || (_cache[0] = $event => $options.togglePlay('pin', $event.index)),\n    listClass: \"menu-list\",\n    itemClass: \"menu-item\"\n  }, {\n    header: (0,vue__WEBPACK_IMPORTED_MODULE_0__.withCtx)(() => [_hoisted_2]),\n    _: 1\n    /* STABLE */\n\n  }, 8\n  /* PROPS */\n  , [\"player\", \"set\"]), [[vue__WEBPACK_IMPORTED_MODULE_0__.vShow, $data.panel == 'pin']]), (0,vue__WEBPACK_IMPORTED_MODULE_0__.withDirectives)((0,vue__WEBPACK_IMPORTED_MODULE_0__.createVNode)(_component_APlaylist, {\n    ref: \"queue\",\n    class: \"player-panel menu\",\n    actions: ['page'],\n    editable: true,\n    player: $options.self,\n    set: $data.sets.queue,\n    onSelect: _cache[1] || (_cache[1] = $event => $options.togglePlay('queue', $event.index)),\n    listClass: \"menu-list\",\n    itemClass: \"menu-item\"\n  }, {\n    header: (0,vue__WEBPACK_IMPORTED_MODULE_0__.withCtx)(() => [_hoisted_3]),\n    _: 1\n    /* STABLE */\n\n  }, 8\n  /* PROPS */\n  , [\"player\", \"set\"]), [[vue__WEBPACK_IMPORTED_MODULE_0__.vShow, $data.panel == 'queue']])], 2\n  /* CLASS */\n  ), (0,vue__WEBPACK_IMPORTED_MODULE_0__.createElementVNode)(\"div\", _hoisted_4, [(0,vue__WEBPACK_IMPORTED_MODULE_0__.createElementVNode)(\"div\", _hoisted_5, [(0,vue__WEBPACK_IMPORTED_MODULE_0__.createElementVNode)(\"button\", {\n    class: \"button\",\n    onClick: _cache[2] || (_cache[2] = $event => $options.togglePlay()),\n    title: $props.buttonTitle,\n    \"aria-label\": $props.buttonTitle\n  }, [$options.playing ? ((0,vue__WEBPACK_IMPORTED_MODULE_0__.openBlock)(), (0,vue__WEBPACK_IMPORTED_MODULE_0__.createElementBlock)(\"span\", _hoisted_7)) : ((0,vue__WEBPACK_IMPORTED_MODULE_0__.openBlock)(), (0,vue__WEBPACK_IMPORTED_MODULE_0__.createElementBlock)(\"span\", _hoisted_8))], 8\n  /* PROPS */\n  , _hoisted_6)]), $options.current && $options.current.data.cover ? ((0,vue__WEBPACK_IMPORTED_MODULE_0__.openBlock)(), (0,vue__WEBPACK_IMPORTED_MODULE_0__.createElementBlock)(\"div\", _hoisted_9, [(0,vue__WEBPACK_IMPORTED_MODULE_0__.createElementVNode)(\"img\", {\n    src: $options.current.data.cover,\n    class: \"cover\"\n  }, null, 8\n  /* PROPS */\n  , _hoisted_10)])) : (0,vue__WEBPACK_IMPORTED_MODULE_0__.createCommentVNode)(\"v-if\", true), (0,vue__WEBPACK_IMPORTED_MODULE_0__.createElementVNode)(\"div\", _hoisted_11, [(0,vue__WEBPACK_IMPORTED_MODULE_0__.renderSlot)(_ctx.$slots, \"content\", {\n    loaded: $data.loaded,\n    live: $data.live\n  }), $data.loaded && $data.duration ? ((0,vue__WEBPACK_IMPORTED_MODULE_0__.openBlock)(), (0,vue__WEBPACK_IMPORTED_MODULE_0__.createBlock)(_component_AProgress, {\n    key: 0,\n    value: $data.currentTime,\n    max: this.duration,\n    format: $options.displayTime,\n    onSelect: _cache[3] || (_cache[3] = $event => $data.audio.currentTime = $event)\n  }, null, 8\n  /* PROPS */\n  , [\"value\", \"max\", \"format\"])) : (0,vue__WEBPACK_IMPORTED_MODULE_0__.createCommentVNode)(\"v-if\", true)]), (0,vue__WEBPACK_IMPORTED_MODULE_0__.createElementVNode)(\"div\", _hoisted_12, [$data.loaded ? ((0,vue__WEBPACK_IMPORTED_MODULE_0__.openBlock)(), (0,vue__WEBPACK_IMPORTED_MODULE_0__.createElementBlock)(\"button\", {\n    key: 0,\n    class: \"button has-text-weight-bold\",\n    onClick: _cache[4] || (_cache[4] = $event => $options.play())\n  }, _hoisted_15)) : (0,vue__WEBPACK_IMPORTED_MODULE_0__.createCommentVNode)(\"v-if\", true), (0,vue__WEBPACK_IMPORTED_MODULE_0__.createElementVNode)(\"button\", {\n    ref: \"pinPlaylistButton\",\n    class: (0,vue__WEBPACK_IMPORTED_MODULE_0__.normalizeClass)($options.playlistButtonClass('pin')),\n    onClick: _cache[5] || (_cache[5] = $event => $options.togglePanel('pin'))\n  }, [$data.sets.pin.length ? ((0,vue__WEBPACK_IMPORTED_MODULE_0__.openBlock)(), (0,vue__WEBPACK_IMPORTED_MODULE_0__.createElementBlock)(\"span\", _hoisted_16, (0,vue__WEBPACK_IMPORTED_MODULE_0__.toDisplayString)($data.sets.pin.length), 1\n  /* TEXT */\n  )) : (0,vue__WEBPACK_IMPORTED_MODULE_0__.createCommentVNode)(\"v-if\", true), _hoisted_17], 2\n  /* CLASS */\n  ), (0,vue__WEBPACK_IMPORTED_MODULE_0__.createElementVNode)(\"button\", {\n    class: (0,vue__WEBPACK_IMPORTED_MODULE_0__.normalizeClass)($options.playlistButtonClass('queue')),\n    onClick: _cache[6] || (_cache[6] = $event => $options.togglePanel('queue'))\n  }, [$data.sets.queue.length ? ((0,vue__WEBPACK_IMPORTED_MODULE_0__.openBlock)(), (0,vue__WEBPACK_IMPORTED_MODULE_0__.createElementBlock)(\"span\", _hoisted_18, (0,vue__WEBPACK_IMPORTED_MODULE_0__.toDisplayString)($data.sets.queue.length), 1\n  /* TEXT */\n  )) : (0,vue__WEBPACK_IMPORTED_MODULE_0__.createCommentVNode)(\"v-if\", true), _hoisted_19], 2\n  /* CLASS */\n  )])])]);\n}\n\n//# sourceURL=webpack://aircox-assets/./src/components/APlayer.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: \"player\"\n};\n\nconst _hoisted_2 = /*#__PURE__*/(0,vue__WEBPACK_IMPORTED_MODULE_0__.createElementVNode)(\"p\", {\n  class: \"menu-label\"\n}, [/*#__PURE__*/(0,vue__WEBPACK_IMPORTED_MODULE_0__.createElementVNode)(\"span\", {\n  class: \"icon\"\n}, [/*#__PURE__*/(0,vue__WEBPACK_IMPORTED_MODULE_0__.createElementVNode)(\"span\", {\n  class: \"fa fa-thumbtack\"\n})]), /*#__PURE__*/(0,vue__WEBPACK_IMPORTED_MODULE_0__.createTextVNode)(\" Pinned \")], -1\n/* HOISTED */\n);\n\nconst _hoisted_3 = /*#__PURE__*/(0,vue__WEBPACK_IMPORTED_MODULE_0__.createElementVNode)(\"p\", {\n  class: \"menu-label\"\n}, [/*#__PURE__*/(0,vue__WEBPACK_IMPORTED_MODULE_0__.createElementVNode)(\"span\", {\n  class: \"icon\"\n}, [/*#__PURE__*/(0,vue__WEBPACK_IMPORTED_MODULE_0__.createElementVNode)(\"span\", {\n  class: \"fa fa-list\"\n})]), /*#__PURE__*/(0,vue__WEBPACK_IMPORTED_MODULE_0__.createTextVNode)(\" Playlist \")], -1\n/* HOISTED */\n);\n\nconst _hoisted_4 = {\n  class: \"player-bar media\"\n};\nconst _hoisted_5 = {\n  class: \"media-left\"\n};\nconst _hoisted_6 = [\"title\", \"aria-label\"];\nconst _hoisted_7 = {\n  key: 0,\n  class: \"fas fa-pause\"\n};\nconst _hoisted_8 = {\n  key: 1,\n  class: \"fas fa-play\"\n};\nconst _hoisted_9 = {\n  key: 0,\n  class: \"media-left media-cover\"\n};\nconst _hoisted_10 = [\"src\"];\nconst _hoisted_11 = {\n  class: \"media-content\"\n};\nconst _hoisted_12 = {\n  class: \"media-right\"\n};\n\nconst _hoisted_13 = /*#__PURE__*/(0,vue__WEBPACK_IMPORTED_MODULE_0__.createElementVNode)(\"span\", {\n  class: \"icon is-size-6 has-text-danger\"\n}, [/*#__PURE__*/(0,vue__WEBPACK_IMPORTED_MODULE_0__.createElementVNode)(\"span\", {\n  class: \"fa fa-circle\"\n})], -1\n/* HOISTED */\n);\n\nconst _hoisted_14 = /*#__PURE__*/(0,vue__WEBPACK_IMPORTED_MODULE_0__.createElementVNode)(\"span\", null, \"Live\", -1\n/* HOISTED */\n);\n\nconst _hoisted_15 = [_hoisted_13, _hoisted_14];\nconst _hoisted_16 = {\n  key: 0,\n  class: \"mr-2 is-size-6\"\n};\n\nconst _hoisted_17 = /*#__PURE__*/(0,vue__WEBPACK_IMPORTED_MODULE_0__.createElementVNode)(\"span\", {\n  class: \"icon\"\n}, [/*#__PURE__*/(0,vue__WEBPACK_IMPORTED_MODULE_0__.createElementVNode)(\"span\", {\n  class: \"fa fa-thumbtack\"\n})], -1\n/* HOISTED */\n);\n\nconst _hoisted_18 = {\n  key: 0,\n  class: \"mr-2 is-size-6\"\n};\n\nconst _hoisted_19 = /*#__PURE__*/(0,vue__WEBPACK_IMPORTED_MODULE_0__.createElementVNode)(\"span\", {\n  class: \"icon\"\n}, [/*#__PURE__*/(0,vue__WEBPACK_IMPORTED_MODULE_0__.createElementVNode)(\"span\", {\n  class: \"fa fa-list\"\n})], -1\n/* HOISTED */\n);\n\nfunction render(_ctx, _cache, $props, $setup, $data, $options) {\n  const _component_APlaylist = (0,vue__WEBPACK_IMPORTED_MODULE_0__.resolveComponent)(\"APlaylist\");\n\n  const _component_AProgress = (0,vue__WEBPACK_IMPORTED_MODULE_0__.resolveComponent)(\"AProgress\");\n\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\", {\n    class: (0,vue__WEBPACK_IMPORTED_MODULE_0__.normalizeClass)(['player-panels', $data.panel ? 'is-open' : ''])\n  }, [(0,vue__WEBPACK_IMPORTED_MODULE_0__.withDirectives)((0,vue__WEBPACK_IMPORTED_MODULE_0__.createVNode)(_component_APlaylist, {\n    ref: \"pin\",\n    class: \"player-panel menu\",\n    name: \"Pinned\",\n    actions: ['page'],\n    editable: true,\n    player: $options.self,\n    set: $data.sets.pin,\n    onSelect: _cache[0] || (_cache[0] = $event => $options.togglePlay('pin', $event.index)),\n    listClass: \"menu-list\",\n    itemClass: \"menu-item\"\n  }, {\n    header: (0,vue__WEBPACK_IMPORTED_MODULE_0__.withCtx)(() => [_hoisted_2]),\n    _: 1\n    /* STABLE */\n\n  }, 8\n  /* PROPS */\n  , [\"player\", \"set\"]), [[vue__WEBPACK_IMPORTED_MODULE_0__.vShow, $data.panel == 'pin']]), (0,vue__WEBPACK_IMPORTED_MODULE_0__.withDirectives)((0,vue__WEBPACK_IMPORTED_MODULE_0__.createVNode)(_component_APlaylist, {\n    ref: \"queue\",\n    class: \"player-panel menu\",\n    actions: ['page'],\n    editable: true,\n    player: $options.self,\n    set: $data.sets.queue,\n    onSelect: _cache[1] || (_cache[1] = $event => $options.togglePlay('queue', $event.index)),\n    listClass: \"menu-list\",\n    itemClass: \"menu-item\"\n  }, {\n    header: (0,vue__WEBPACK_IMPORTED_MODULE_0__.withCtx)(() => [_hoisted_3]),\n    _: 1\n    /* STABLE */\n\n  }, 8\n  /* PROPS */\n  , [\"player\", \"set\"]), [[vue__WEBPACK_IMPORTED_MODULE_0__.vShow, $data.panel == 'queue']])], 2\n  /* CLASS */\n  ), (0,vue__WEBPACK_IMPORTED_MODULE_0__.createElementVNode)(\"div\", _hoisted_4, [(0,vue__WEBPACK_IMPORTED_MODULE_0__.createElementVNode)(\"div\", _hoisted_5, [(0,vue__WEBPACK_IMPORTED_MODULE_0__.createElementVNode)(\"button\", {\n    class: \"button\",\n    onClick: _cache[2] || (_cache[2] = $event => $options.togglePlay()),\n    title: $props.buttonTitle,\n    \"aria-label\": $props.buttonTitle\n  }, [$options.playing ? ((0,vue__WEBPACK_IMPORTED_MODULE_0__.openBlock)(), (0,vue__WEBPACK_IMPORTED_MODULE_0__.createElementBlock)(\"span\", _hoisted_7)) : ((0,vue__WEBPACK_IMPORTED_MODULE_0__.openBlock)(), (0,vue__WEBPACK_IMPORTED_MODULE_0__.createElementBlock)(\"span\", _hoisted_8))], 8\n  /* PROPS */\n  , _hoisted_6)]), $options.current && $options.current.data.cover ? ((0,vue__WEBPACK_IMPORTED_MODULE_0__.openBlock)(), (0,vue__WEBPACK_IMPORTED_MODULE_0__.createElementBlock)(\"div\", _hoisted_9, [(0,vue__WEBPACK_IMPORTED_MODULE_0__.createElementVNode)(\"img\", {\n    src: $options.current.data.cover,\n    class: \"cover\"\n  }, null, 8\n  /* PROPS */\n  , _hoisted_10)])) : (0,vue__WEBPACK_IMPORTED_MODULE_0__.createCommentVNode)(\"v-if\", true), (0,vue__WEBPACK_IMPORTED_MODULE_0__.createElementVNode)(\"div\", _hoisted_11, [(0,vue__WEBPACK_IMPORTED_MODULE_0__.renderSlot)(_ctx.$slots, \"content\", {\n    loaded: $data.loaded,\n    live: $data.live\n  }), $data.loaded && $data.duration ? ((0,vue__WEBPACK_IMPORTED_MODULE_0__.openBlock)(), (0,vue__WEBPACK_IMPORTED_MODULE_0__.createBlock)(_component_AProgress, {\n    key: 0,\n    value: $data.currentTime,\n    max: this.duration,\n    format: $options.displayTime,\n    class: \"pt-1 is-size-7\",\n    onSelect: _cache[3] || (_cache[3] = $event => $data.audio.currentTime = $event)\n  }, null, 8\n  /* PROPS */\n  , [\"value\", \"max\", \"format\"])) : (0,vue__WEBPACK_IMPORTED_MODULE_0__.createCommentVNode)(\"v-if\", true)]), (0,vue__WEBPACK_IMPORTED_MODULE_0__.createElementVNode)(\"div\", _hoisted_12, [$data.loaded ? ((0,vue__WEBPACK_IMPORTED_MODULE_0__.openBlock)(), (0,vue__WEBPACK_IMPORTED_MODULE_0__.createElementBlock)(\"button\", {\n    key: 0,\n    class: \"button has-text-weight-bold\",\n    onClick: _cache[4] || (_cache[4] = $event => $options.play())\n  }, _hoisted_15)) : (0,vue__WEBPACK_IMPORTED_MODULE_0__.createCommentVNode)(\"v-if\", true), (0,vue__WEBPACK_IMPORTED_MODULE_0__.createElementVNode)(\"button\", {\n    ref: \"pinPlaylistButton\",\n    class: (0,vue__WEBPACK_IMPORTED_MODULE_0__.normalizeClass)($options.playlistButtonClass('pin')),\n    onClick: _cache[5] || (_cache[5] = $event => $options.togglePanel('pin'))\n  }, [$data.sets.pin.length ? ((0,vue__WEBPACK_IMPORTED_MODULE_0__.openBlock)(), (0,vue__WEBPACK_IMPORTED_MODULE_0__.createElementBlock)(\"span\", _hoisted_16, (0,vue__WEBPACK_IMPORTED_MODULE_0__.toDisplayString)($data.sets.pin.length), 1\n  /* TEXT */\n  )) : (0,vue__WEBPACK_IMPORTED_MODULE_0__.createCommentVNode)(\"v-if\", true), _hoisted_17], 2\n  /* CLASS */\n  ), (0,vue__WEBPACK_IMPORTED_MODULE_0__.createElementVNode)(\"button\", {\n    class: (0,vue__WEBPACK_IMPORTED_MODULE_0__.normalizeClass)($options.playlistButtonClass('queue')),\n    onClick: _cache[6] || (_cache[6] = $event => $options.togglePanel('queue'))\n  }, [$data.sets.queue.length ? ((0,vue__WEBPACK_IMPORTED_MODULE_0__.openBlock)(), (0,vue__WEBPACK_IMPORTED_MODULE_0__.createElementBlock)(\"span\", _hoisted_18, (0,vue__WEBPACK_IMPORTED_MODULE_0__.toDisplayString)($data.sets.queue.length), 1\n  /* TEXT */\n  )) : (0,vue__WEBPACK_IMPORTED_MODULE_0__.createCommentVNode)(\"v-if\", true), _hoisted_19], 2\n  /* CLASS */\n  )])])]);\n}\n\n//# sourceURL=webpack://aircox-assets/./src/components/APlayer.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");
 
 /***/ }),
 
diff --git a/aircox/templates/aircox/base.html b/aircox/templates/aircox/base.html
index 31f2943..6de32ef 100644
--- a/aircox/templates/aircox/base.html
+++ b/aircox/templates/aircox/base.html
@@ -107,7 +107,7 @@ Usefull context:
                         {% block main %}
                             {% block content %}
                             {% if page and page.content %}
-                            <section class="page-content">{{ page.content|safe }}</section>
+                            <section class="page-content mb-2">{{ page.content|safe }}</section>
                             {% endif %}
                             {% endblock %}
                         {% endblock main %}
diff --git a/aircox/templates/aircox/page_detail.html b/aircox/templates/aircox/page_detail.html
index 7857a70..64bd6cb 100644
--- a/aircox/templates/aircox/page_detail.html
+++ b/aircox/templates/aircox/page_detail.html
@@ -40,7 +40,7 @@ Context:
     <div class="media box">
         <div class="media-content">
             <p>
-                <strong>{{ comment.nickname }}</strong>
+                <strong class="mr-2">{{ comment.nickname }}</strong>
                 <time datetime="{{ comment.date }}" title="{{ comment.date }}">
                     <small>{{ comment.date|naturaltime }}</small>
                 </time>
diff --git a/aircox_streamer/templates/aircox_streamer/streamer.html b/aircox_streamer/templates/aircox_streamer/streamer.html
index a9899f2..85147d4 100644
--- a/aircox_streamer/templates/aircox_streamer/streamer.html
+++ b/aircox_streamer/templates/aircox_streamer/streamer.html
@@ -24,8 +24,8 @@ aircox.init({apiUrl: "{% url "admin:api:streamer-list" %}"},
                 </span>
             </div>
             <div class="navbar-end">
-                <div class="select navbar-item">
-                    <select onchange="selectStreamer" class="control"
+                <div class="control navbar-item">
+                    <select onchange="selectStreamer" class="select"
                             title="{% trans "Select a station" %}"
                             aria-label="{% trans "Select a station" %}">
                         <option v-for="streamer of streamers" :value="streamer.id">[[ streamer.data.name ]]</option>
diff --git a/assets/src/components/APlayer.vue b/assets/src/components/APlayer.vue
index 7a8a22f..a426062 100644
--- a/assets/src/components/APlayer.vue
+++ b/assets/src/components/APlayer.vue
@@ -40,7 +40,7 @@
             <div class="media-content">
                 <slot name="content" :loaded='loaded' :live='live'></slot>
                 <AProgress v-if="loaded && duration" :value="currentTime" :max="this.duration"
-                    :format="displayTime"
+                    :format="displayTime" class="pt-1 is-size-7"
                     @select="audio.currentTime = $event"></AProgress>
             </div>
             <div class="media-right">