various fixes

This commit is contained in:
bkfox 2024-02-02 19:36:02 +01:00
parent 2a75608701
commit df41885cca
11 changed files with 149 additions and 102 deletions

View File

@ -45,15 +45,14 @@
--a-playlist-title-pd: 0.6rem;
--a-playlist-item-border: 1px var(--secondary-color) solid;
--a-sound-bg: var(--main-color);
--a-sound-hv-bg: var(--main-color-light);
--a-sound-btn-hv-fg: var(--secondary-color);
--a-sound-playing-fg: var(--secondary-color-dark);
--a-sound-hv-bg: var(--main-color);
--a-sound-hv-fg: var(--secondary-color);
--a-sound-playing-fg: var(--secondary-color-dark);
--a-sound-text-sz: 1rem;
--a-player-url-fg: var(--text-color);
--a-player-panel-bg: var(--hg-color);
--a-player-panel-bg: var(--main-color);
--a-player-bar-height: var(--nav-primary-height);
--a-player-bar-bg: var(--hg-color);
--a-player-bar-bg: var(--main-color);
--a-player-bar-title-alone-sz: 1.4rem;
--a-player-bar-button-fg: var(--button-fg);
--a-player-bar-button-fg: var(--button-bg);
@ -239,6 +238,8 @@
.list-item .subtitle {
font-size: var(--preview-title-sz);
text-align: right;
}
.list-item .subtitle:not(:empty) {
min-width: 9rem;
}
.list-item .media-content {
@ -334,7 +335,8 @@
}
.a-carousel .a-carousel-viewport {
box-shadow: inset 0em 0em 20rem var(--a-carousel-bg);
padding: var(--a-carousel-p) 0;
padding: 0rem;
padding-top: var(--a-carousel-p);
margin-top: calc(0rem - var(--a-carousel-p));
}
@ -352,6 +354,10 @@
}
.a-carousel-bullets-container .bullet {
margin: 0.2rem;
cursor: pointer;
}
.a-carousel-bullets-container .bullet:hover {
color: var(--link-fg);
}
.a-progress {
@ -437,7 +443,7 @@
font-size: var(--a-sound-text-sz);
}
.a-sound-item .button:hover {
color: var(--a-sound-btn-hv-fg) !important;
color: var(--a-sound-hv-fg) !important;
background-color: unset;
}

View File

@ -19,13 +19,17 @@
flex-shrink: 0;
}
.a-carousel-bullets-container[data-v-b79f173e] {
justify-content: center;
flex-grow: 1;
}
.a-carousel-bullets-container .bullet[data-v-b79f173e] {
cursor: pointer;
}
.a-carousel-bullets-container .bullet-right[data-v-b79f173e] {
.a-carousel-bullets-container .left[data-v-b79f173e] {
min-width: 2rem;
margin-right: auto;
}
.a-carousel-bullets-container .right[data-v-b79f173e] {
min-width: 2rem;
margin-left: auto;
}
.a-carousel-bullets-container[data-v-b79f173e] {
@ -7045,12 +7049,6 @@ body {
--header-height: 20rem;
}
}
section > .toolbar {
background-color: rgba(0, 0, 0, 0.05);
padding: 1em;
margin-bottom: 1.5em;
}
h1, h2, h3, h4, h5, h6, .heading, .title, .subtitle {
font-family: var(--heading-font-family);
}

View File

@ -45,15 +45,14 @@
--a-playlist-title-pd: 0.6rem;
--a-playlist-item-border: 1px var(--secondary-color) solid;
--a-sound-bg: var(--main-color);
--a-sound-hv-bg: var(--main-color-light);
--a-sound-btn-hv-fg: var(--secondary-color);
--a-sound-playing-fg: var(--secondary-color-dark);
--a-sound-hv-bg: var(--main-color);
--a-sound-hv-fg: var(--secondary-color);
--a-sound-playing-fg: var(--secondary-color-dark);
--a-sound-text-sz: 1rem;
--a-player-url-fg: var(--text-color);
--a-player-panel-bg: var(--hg-color);
--a-player-panel-bg: var(--main-color);
--a-player-bar-height: var(--nav-primary-height);
--a-player-bar-bg: var(--hg-color);
--a-player-bar-bg: var(--main-color);
--a-player-bar-title-alone-sz: 1.4rem;
--a-player-bar-button-fg: var(--button-fg);
--a-player-bar-button-fg: var(--button-bg);
@ -239,6 +238,8 @@
.list-item .subtitle {
font-size: var(--preview-title-sz);
text-align: right;
}
.list-item .subtitle:not(:empty) {
min-width: 9rem;
}
.list-item .media-content {
@ -334,7 +335,8 @@
}
.a-carousel .a-carousel-viewport {
box-shadow: inset 0em 0em 20rem var(--a-carousel-bg);
padding: var(--a-carousel-p) 0;
padding: 0rem;
padding-top: var(--a-carousel-p);
margin-top: calc(0rem - var(--a-carousel-p));
}
@ -352,6 +354,10 @@
}
.a-carousel-bullets-container .bullet {
margin: 0.2rem;
cursor: pointer;
}
.a-carousel-bullets-container .bullet:hover {
color: var(--link-fg);
}
.a-progress {
@ -437,7 +443,7 @@
font-size: var(--a-sound-text-sz);
}
.a-sound-item .button:hover {
color: var(--a-sound-btn-hv-fg) !important;
color: var(--a-sound-hv-fg) !important;
background-color: unset;
}
@ -7333,6 +7339,9 @@ a.tag:hover {
clear: both;
margin: 0.6rem 0;
}
.page *[data-oembed-url] {
clear: both;
}
.dropdown-item {
font-size: unset !important;
@ -7351,6 +7360,8 @@ a.tag:hover {
display: inline-block;
margin: 0.6rem;
margin-left: 0rem;
padding: 0.4rem;
border-bottom: 1px var(--main-color) solid;
}
.schedule .heading {
padding: 0em;
@ -7680,19 +7691,37 @@ nav li a, nav li .button {
position: relative;
z-index: 1000;
background-color: var(--body-bg);
height: var(--header-height);
max-width: calc(var(--header-height) * 2);
margin: 0 0 1.2rem 1.2rem;
}
.header-cover:not(:only-child) img {
width: 100%;
height: 100%;
.header-cover:not(:only-child) .cover {
max-width: calc(var(--header-height) * 2);
height: var(--header-height);
}
.header-cover:only-child {
with: 100%;
}
@media screen and (max-width: 600px) {
.container.header {
width: calc(100% - 0.4rem);
}
.container.header .headings {
width: 100%;
clear: both;
}
.container.header .header-cover {
float: none;
margin: 0;
text-align: center;
}
.container.header .cover {
margin-left: auto;
margin-right: auto;
max-height: calc(var(--cover-h) * 1);
max-width: calc(var(--cover-w) * 2);
}
}
.page-content {
margin-top: 2rem;
}
@ -7734,19 +7763,4 @@ body {
margin-left: 0.4rem;
margin-right: 0.4rem;
}
.container.header {
width: calc(100% - 0.4rem);
}
.container.header .headings {
width: 100%;
clear: both;
}
.container.header .header-cover {
float: none;
width: 100%;
max-width: unset;
height: unset;
margin-left: 0rem;
margin-right: 0rem;
}
}

View File

@ -35,7 +35,7 @@ eval("__webpack_require__.r(__webpack_exports__);\n/* harmony import */ var _mod
\*******************************************************************************************************************************************************************************************/
/***/ (function(__unused_webpack_module, __webpack_exports__, __webpack_require__) {
eval("__webpack_require__.r(__webpack_exports__);\n/* harmony import */ var core_js_modules_es_array_push_js__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! core-js/modules/es.array.push.js */ \"./node_modules/core-js/modules/es.array.push.js\");\n/* harmony import */ var core_js_modules_es_array_push_js__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(core_js_modules_es_array_push_js__WEBPACK_IMPORTED_MODULE_0__);\n/* harmony import */ var vue__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! vue */ \"./node_modules/vue/dist/vue.esm-bundler.js\");\n\n\nclass Offset {\n constructor(el, min = null, max = null) {\n this.el = el;\n this.rect = el.getBoundingClientRect();\n ({\n min,\n max\n } = this.minmax(min, max));\n this.min = min;\n this.max = max;\n this.size = max - min;\n }\n minmax(min = null, max = null) {\n min = min === null ? this.rect.left : min;\n max = max === null ? this.rect.right : max;\n return {\n min,\n max\n };\n }\n relative(to) {\n return new Offset(this.el, this.min - to.min, this.max - to.min);\n }\n}\nclass Card extends Offset {\n constructor(el, index) {\n super(el);\n this.index = index;\n }\n visible(viewportOffset) {\n return viewportOffset.min <= this.min && viewportOffset.max >= this.max;\n }\n}\n/* harmony default export */ __webpack_exports__[\"default\"] = ({\n setup() {\n return {\n viewport: (0,vue__WEBPACK_IMPORTED_MODULE_1__.ref)(null),\n container: (0,vue__WEBPACK_IMPORTED_MODULE_1__.ref)(null)\n };\n },\n data() {\n return {\n cards: [],\n index: 0,\n refresh_: 0\n };\n },\n props: {\n cardSelector: {\n type: String,\n default: ''\n },\n containerClass: {\n type: String,\n default: ''\n },\n buttonClass: {\n type: String,\n default: 'button'\n },\n leftButtonIcon: {\n type: String,\n default: \"fas fa-chevron-left\"\n },\n rightButtonIcon: {\n type: String,\n default: \"fas fa-chevron-right\"\n }\n },\n computed: {\n card() {\n return this.cards()[this.index];\n },\n /*showPrevButton() {\n return this.index > 0\n },\n showNextButton() {\n if(!this.cards || this.cards.length <= 1)\n return false\n let { count } = this.visibility\n return (this.index + count) < this.cards.length\n },*/\n\n bullets() {\n if (!this.cards || !this.$refs.viewport) return [];\n let contOff = new Offset(this.$refs.container);\n let viewMax = new Offset(this.$refs.viewport).size;\n let bullets = [];\n let i = 0;\n let max = viewMax;\n bullets.push(i);\n while (i < this.cards.length) {\n // skip until next view\n for (; i < this.cards.length; i++) {\n let card = this.cards[i].relative(contOff);\n if (card.max > max) {\n max = card.min + viewMax;\n bullets.push(i);\n i++;\n break;\n }\n }\n }\n return bullets;\n }\n },\n methods: {\n getCards() {\n if (!this.$refs.container) return [];\n let nodes = !this.cardSelector ? [...this.$refs.container.children] : [...this.$refs.container.querySelectorAll(this.cardSelector)];\n return nodes.map((el, index) => new Card(el, index));\n },\n select(index, relative = false) {\n if (relative) index = this.index + index;\n index = Math.min(index, this.cards.length);\n index = Math.max(index, 0);\n let card = this.cards[index];\n if (!card) return null;\n card = new Card(card.el);\n const cont = new Offset(this.$refs.container);\n const rel = card.relative(cont);\n this.$refs.container.style.marginLeft = `-${rel.min}px`;\n this.index = index;\n return card.el;\n },\n refresh() {\n this.cards = this.getCards();\n this.select(this.index);\n this.refresh_++;\n }\n },\n mounted() {\n this.observers = [new MutationObserver(() => this.refresh()), new ResizeObserver(() => this.refresh())];\n this.observers[0].observe(this.$refs.container, {\n \"childList\": true\n });\n this.observers[1].observe(this.$refs.container);\n this.refresh();\n },\n unmounted() {\n for (var observer of this.observers) observer.disconnect();\n }\n});\n\n//# sourceURL=webpack://aircox-assets/./src/components/ACarousel.vue?./node_modules/babel-loader/lib/index.js??clonedRuleSet-40.use%5B0%5D!./node_modules/vue-loader/dist/index.js??ruleSet%5B0%5D.use%5B0%5D");
eval("__webpack_require__.r(__webpack_exports__);\n/* harmony import */ var core_js_modules_es_array_push_js__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! core-js/modules/es.array.push.js */ \"./node_modules/core-js/modules/es.array.push.js\");\n/* harmony import */ var core_js_modules_es_array_push_js__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(core_js_modules_es_array_push_js__WEBPACK_IMPORTED_MODULE_0__);\n/* harmony import */ var vue__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! vue */ \"./node_modules/vue/dist/vue.esm-bundler.js\");\n\n\nclass Offset {\n constructor(el, min = null, max = null) {\n this.el = el;\n this.rect = el.getBoundingClientRect();\n ({\n min,\n max\n } = this.minmax(min, max));\n this.min = min;\n this.max = max;\n this.size = max - min;\n }\n minmax(min = null, max = null) {\n min = min === null ? this.rect.left : min;\n max = max === null ? this.rect.right : max;\n return {\n min,\n max\n };\n }\n relative(to) {\n return new Offset(this.el, this.min - to.min, this.max - to.min);\n }\n}\nclass Card extends Offset {\n constructor(el, index) {\n super(el);\n this.index = index;\n }\n visible(viewportOffset) {\n return viewportOffset.min <= this.min && viewportOffset.max >= this.max;\n }\n}\n/* harmony default export */ __webpack_exports__[\"default\"] = ({\n setup() {\n return {\n viewport: (0,vue__WEBPACK_IMPORTED_MODULE_1__.ref)(null),\n container: (0,vue__WEBPACK_IMPORTED_MODULE_1__.ref)(null)\n };\n },\n data() {\n return {\n cards: [],\n index: 0,\n refresh_: 0\n };\n },\n props: {\n cardSelector: {\n type: String,\n default: ''\n },\n containerClass: {\n type: String,\n default: ''\n },\n buttonClass: {\n type: String,\n default: 'button'\n },\n leftButtonIcon: {\n type: String,\n default: \"fas fa-chevron-left\"\n },\n rightButtonIcon: {\n type: String,\n default: \"fas fa-chevron-right\"\n }\n },\n computed: {\n card() {\n return this.cards()[this.index];\n },\n showPrev() {\n return this.index > 0;\n },\n showNext() {\n if (!this.cards || this.cards.length <= 1) return false;\n let last = this.bullets[this.bullets.length - 1];\n return this.index != last;\n },\n bullets() {\n if (!this.cards || !this.$refs.viewport) return [];\n let contOff = new Offset(this.$refs.container);\n let viewMax = new Offset(this.$refs.viewport).size;\n let bullets = [];\n let i = 0;\n let max = viewMax;\n bullets.push(i);\n while (i < this.cards.length) {\n // skip until next view\n for (; i < this.cards.length; i++) {\n let card = this.cards[i].relative(contOff);\n if (card.max > max) {\n max = card.min + viewMax;\n bullets.push(i);\n i++;\n break;\n }\n }\n }\n return bullets;\n }\n },\n methods: {\n getCards() {\n if (!this.$refs.container) return [];\n let nodes = !this.cardSelector ? [...this.$refs.container.children] : [...this.$refs.container.querySelectorAll(this.cardSelector)];\n return nodes.map((el, index) => new Card(el, index));\n },\n select(index, relative = false) {\n if (relative) index = this.index + index;\n index = Math.min(index, this.cards.length);\n index = Math.max(index, 0);\n let card = this.cards[index];\n if (!card) return null;\n card = new Card(card.el);\n const cont = new Offset(this.$refs.container);\n const rel = card.relative(cont);\n this.$refs.container.style.marginLeft = `-${rel.min}px`;\n this.index = index;\n return card.el;\n },\n next() {\n let n = this.bullets.indexOf(this.index);\n let index = this.bullets[n + 1];\n this.select(index);\n },\n prev() {\n let n = this.bullets.indexOf(this.index);\n let index = this.bullets[n - 1];\n this.select(index);\n },\n refresh() {\n this.cards = this.getCards();\n this.select(this.index);\n this.refresh_++;\n }\n },\n mounted() {\n this.observers = [new MutationObserver(() => this.refresh()), new ResizeObserver(() => this.refresh())];\n this.observers[0].observe(this.$refs.container, {\n \"childList\": true\n });\n this.observers[1].observe(this.$refs.container);\n this.refresh();\n },\n unmounted() {\n for (var observer of this.observers) observer.disconnect();\n }\n});\n\n//# sourceURL=webpack://aircox-assets/./src/components/ACarousel.vue?./node_modules/babel-loader/lib/index.js??clonedRuleSet-40.use%5B0%5D!./node_modules/vue-loader/dist/index.js??ruleSet%5B0%5D.use%5B0%5D");
/***/ }),
@ -205,7 +205,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 _withScopeId = n => ((0,vue__WEBPACK_IMPORTED_MODULE_0__.pushScopeId)(\"data-v-b79f173e\"), n = n(), (0,vue__WEBPACK_IMPORTED_MODULE_0__.popScopeId)(), n);\nconst _hoisted_1 = {\n class: \"a-carousel\"\n};\nconst _hoisted_2 = {\n ref: \"viewport\",\n class: \"a-carousel-viewport\"\n};\nconst _hoisted_3 = {\n class: \"a-carousel-bullets-container\"\n};\nconst _hoisted_4 = [\"onClick\"];\nconst _hoisted_5 = {\n key: 0,\n class: \"fa fa-circle\"\n};\nconst _hoisted_6 = {\n key: 1,\n class: \"far fa-circle\"\n};\nfunction render(_ctx, _cache, $props, $setup, $data, $options) {\n return (0,vue__WEBPACK_IMPORTED_MODULE_0__.openBlock)(), (0,vue__WEBPACK_IMPORTED_MODULE_0__.createElementBlock)(\"section\", _hoisted_1, [(0,vue__WEBPACK_IMPORTED_MODULE_0__.createElementVNode)(\"nav\", _hoisted_2, [(0,vue__WEBPACK_IMPORTED_MODULE_0__.createElementVNode)(\"section\", {\n ref: \"container\",\n class: (0,vue__WEBPACK_IMPORTED_MODULE_0__.normalizeClass)(['a-carousel-container', $props.containerClass])\n }, [(0,vue__WEBPACK_IMPORTED_MODULE_0__.renderSlot)(_ctx.$slots, \"default\", {}, undefined, true)], 2 /* CLASS */)], 512 /* NEED_PATCH */), (0,vue__WEBPACK_IMPORTED_MODULE_0__.createElementVNode)(\"nav\", _hoisted_3, [(0,vue__WEBPACK_IMPORTED_MODULE_0__.createCommentVNode)(\" <span class=\\\"icon bullet\\\" @click=\\\"prev\\\" v-if=\\\"showPrevButton\\\">\\n <i :class=\\\"leftButtonIcon\\\"></i>\\n </span> \"), $options.bullets.length > 1 ? ((0,vue__WEBPACK_IMPORTED_MODULE_0__.openBlock)(true), (0,vue__WEBPACK_IMPORTED_MODULE_0__.createElementBlock)(vue__WEBPACK_IMPORTED_MODULE_0__.Fragment, {\n key: 0\n }, (0,vue__WEBPACK_IMPORTED_MODULE_0__.renderList)($options.bullets, bullet => {\n return (0,vue__WEBPACK_IMPORTED_MODULE_0__.openBlock)(), (0,vue__WEBPACK_IMPORTED_MODULE_0__.createElementBlock)(\"span\", {\n class: \"icon bullet\",\n key: bullet,\n onClick: $event => $options.select(bullet)\n }, [bullet == $data.index ? ((0,vue__WEBPACK_IMPORTED_MODULE_0__.openBlock)(), (0,vue__WEBPACK_IMPORTED_MODULE_0__.createElementBlock)(\"i\", _hoisted_5)) : ((0,vue__WEBPACK_IMPORTED_MODULE_0__.openBlock)(), (0,vue__WEBPACK_IMPORTED_MODULE_0__.createElementBlock)(\"i\", _hoisted_6))], 8 /* PROPS */, _hoisted_4);\n }), 128 /* KEYED_FRAGMENT */)) : (0,vue__WEBPACK_IMPORTED_MODULE_0__.createCommentVNode)(\"v-if\", true), (0,vue__WEBPACK_IMPORTED_MODULE_0__.createCommentVNode)(\" <span class=\\\"icon bullet\\\" @click=\\\"next\\\" v-if=\\\"showNextButton\\\">\\n <i :class=\\\"rightButtonIcon\\\"></i>\\n </span> \"), (0,vue__WEBPACK_IMPORTED_MODULE_0__.renderSlot)(_ctx.$slots, \"bullets-right\", {\n vBind: this\n }, undefined, true)])]);\n}\n\n//# sourceURL=webpack://aircox-assets/./src/components/ACarousel.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 _withScopeId = n => ((0,vue__WEBPACK_IMPORTED_MODULE_0__.pushScopeId)(\"data-v-b79f173e\"), n = n(), (0,vue__WEBPACK_IMPORTED_MODULE_0__.popScopeId)(), n);\nconst _hoisted_1 = {\n class: \"a-carousel\"\n};\nconst _hoisted_2 = {\n ref: \"viewport\",\n class: \"a-carousel-viewport\"\n};\nconst _hoisted_3 = {\n class: \"a-carousel-bullets-container\"\n};\nconst _hoisted_4 = {\n class: \"left\"\n};\nconst _hoisted_5 = [\"onClick\"];\nconst _hoisted_6 = {\n key: 0,\n class: \"fa fa-circle\"\n};\nconst _hoisted_7 = {\n key: 1,\n class: \"far fa-circle\"\n};\nconst _hoisted_8 = {\n class: \"right\"\n};\nfunction render(_ctx, _cache, $props, $setup, $data, $options) {\n return (0,vue__WEBPACK_IMPORTED_MODULE_0__.openBlock)(), (0,vue__WEBPACK_IMPORTED_MODULE_0__.createElementBlock)(\"section\", _hoisted_1, [(0,vue__WEBPACK_IMPORTED_MODULE_0__.createElementVNode)(\"nav\", _hoisted_2, [(0,vue__WEBPACK_IMPORTED_MODULE_0__.createElementVNode)(\"section\", {\n ref: \"container\",\n class: (0,vue__WEBPACK_IMPORTED_MODULE_0__.normalizeClass)(['a-carousel-container', $props.containerClass])\n }, [(0,vue__WEBPACK_IMPORTED_MODULE_0__.renderSlot)(_ctx.$slots, \"default\", {}, undefined, true)], 2 /* CLASS */)], 512 /* NEED_PATCH */), (0,vue__WEBPACK_IMPORTED_MODULE_0__.createElementVNode)(\"nav\", _hoisted_3, [(0,vue__WEBPACK_IMPORTED_MODULE_0__.createElementVNode)(\"span\", _hoisted_4, [$options.showPrev ? ((0,vue__WEBPACK_IMPORTED_MODULE_0__.openBlock)(), (0,vue__WEBPACK_IMPORTED_MODULE_0__.createElementBlock)(\"span\", {\n key: 0,\n class: \"icon bullet\",\n onClick: _cache[0] || (_cache[0] = $event => $options.prev())\n }, [(0,vue__WEBPACK_IMPORTED_MODULE_0__.createElementVNode)(\"i\", {\n class: (0,vue__WEBPACK_IMPORTED_MODULE_0__.normalizeClass)($props.leftButtonIcon)\n }, null, 2 /* CLASS */)])) : (0,vue__WEBPACK_IMPORTED_MODULE_0__.createCommentVNode)(\"v-if\", true)]), $options.bullets.length > 1 ? ((0,vue__WEBPACK_IMPORTED_MODULE_0__.openBlock)(true), (0,vue__WEBPACK_IMPORTED_MODULE_0__.createElementBlock)(vue__WEBPACK_IMPORTED_MODULE_0__.Fragment, {\n key: 0\n }, (0,vue__WEBPACK_IMPORTED_MODULE_0__.renderList)($options.bullets, bullet => {\n return (0,vue__WEBPACK_IMPORTED_MODULE_0__.openBlock)(), (0,vue__WEBPACK_IMPORTED_MODULE_0__.createElementBlock)(\"span\", {\n class: \"icon bullet\",\n key: bullet,\n onClick: $event => $options.select(bullet)\n }, [bullet == $data.index ? ((0,vue__WEBPACK_IMPORTED_MODULE_0__.openBlock)(), (0,vue__WEBPACK_IMPORTED_MODULE_0__.createElementBlock)(\"i\", _hoisted_6)) : ((0,vue__WEBPACK_IMPORTED_MODULE_0__.openBlock)(), (0,vue__WEBPACK_IMPORTED_MODULE_0__.createElementBlock)(\"i\", _hoisted_7))], 8 /* PROPS */, _hoisted_5);\n }), 128 /* KEYED_FRAGMENT */)) : (0,vue__WEBPACK_IMPORTED_MODULE_0__.createCommentVNode)(\"v-if\", true), (0,vue__WEBPACK_IMPORTED_MODULE_0__.createElementVNode)(\"span\", _hoisted_8, [$options.showNext ? ((0,vue__WEBPACK_IMPORTED_MODULE_0__.openBlock)(), (0,vue__WEBPACK_IMPORTED_MODULE_0__.createElementBlock)(\"span\", {\n key: 0,\n class: \"icon bullet\",\n onClick: _cache[1] || (_cache[1] = $event => $options.next())\n }, [(0,vue__WEBPACK_IMPORTED_MODULE_0__.createElementVNode)(\"i\", {\n class: (0,vue__WEBPACK_IMPORTED_MODULE_0__.normalizeClass)($props.rightButtonIcon)\n }, null, 2 /* CLASS */)])) : (0,vue__WEBPACK_IMPORTED_MODULE_0__.createCommentVNode)(\"v-if\", true)]), (0,vue__WEBPACK_IMPORTED_MODULE_0__.renderSlot)(_ctx.$slots, \"bullets-right\", {\n vBind: this\n }, undefined, true)])]);\n}\n\n//# sourceURL=webpack://aircox-assets/./src/components/ACarousel.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");
/***/ }),

View File

@ -95,9 +95,9 @@ Usefull context:
<header class="container header preview preview-header {% if cover %}has-cover{% endif %}">
{% block header %}
{% if cover %}
<div class="header-cover">
<img src="{{ cover }}" class="header-cover">
</div>
<figure class="header-cover">
<img src="{{ cover }}" class="cover">
</figure>
{% endif %}
<div class="headings preview-card-headings">
{% block headings %}

View File

@ -60,9 +60,7 @@ Context:
<h2 class="title">{% translate "Comments" %}</h2>
{% for object in comments %}
<div id="comment-{{ object.pk }}">
{% page_widget "item" object %}
</div>
{% page_widget "item" object %}
{% endfor %}
</section>
{% endif %}

View File

@ -2,17 +2,18 @@
{% load i18n humanize aircox %}
{% block tag-class %}{{ block.super }} comment{% endblock %}
{% block tag-extra %} id="comment-{{ object.pk }}"{% endblock %}
{% block outer %}
{% with url=object.get_absolute_url %}
{% if with_title %}
{% with url=object.get_absolute_url %}
{{ block.super }}
{{ block.super }}
{% endwith %}
{% else %}
{{ block.super }}
{{ block.super }}
{% endif %}
{% endwith %}
{% endblock %}

View File

@ -69,13 +69,6 @@ body {
}
}
section > .toolbar {
background-color: rgba(0,0,0,0.05);
padding: 1em;
margin-bottom: 1.5em;
}
h1, h2, h3, h4, h5, h6, .heading, .title, .subtitle {
font-family: var(--heading-font-family);
}

View File

@ -53,16 +53,15 @@
--a-playlist-item-border: 1px var(--secondary-color) solid;
--a-sound-bg: var(--main-color);
--a-sound-hv-bg: var(--main-color-light);
--a-sound-btn-hv-fg: var(--secondary-color);
--a-sound-playing-fg: var(--secondary-color-dark);
--a-sound-hv-bg: var(--main-color);
--a-sound-hv-fg: var(--secondary-color);
--a-sound-playing-fg: var(--secondary-color-dark);
--a-sound-text-sz: #{v.$text-size};
--a-player-url-fg: var(--text-color);
--a-player-panel-bg: var(--hg-color);
--a-player-panel-bg: var(--main-color);
--a-player-bar-height: var(--nav-primary-height);
--a-player-bar-bg: var(--hg-color);
--a-player-bar-bg: var(--main-color);
--a-player-bar-title-alone-sz: #{v.$text-size-medium};
--a-player-bar-button-fg: var(--button-fg);
--a-player-bar-button-fg: var(--button-bg);
@ -348,7 +347,8 @@
font-size: var(--preview-title-sz);
// background-color: var(--preview-heading-bg-color);
text-align: right;
min-width: 9rem;
&:not(:empty) { min-width: 9rem; }
}
.media-content {
@ -483,7 +483,8 @@
.a-carousel-viewport {
box-shadow: inset 0em 0em 20rem var(--a-carousel-bg);
// background-color: var(--a-carousel-bg);
padding: var(--a-carousel-p) 0;
padding: 0rem;
padding-top: var(--a-carousel-p);
margin-top: calc( 0rem - var(--a-carousel-p) );
}
}
@ -504,6 +505,9 @@
.bullet {
margin: v.$mp-1;
cursor: pointer;
&:hover { color: var(--link-fg); }
}
}
@ -618,7 +622,7 @@
font-size: var(--a-sound-text-sz);
&:hover {
color: var(--a-sound-btn-hv-fg) !important;
color: var(--a-sound-hv-fg) !important;
background-color: unset;
}
}

View File

@ -33,6 +33,10 @@
}
}
*[data-oembed-url] {
clear: both;
}
}
@ -56,6 +60,8 @@
display: inline-block;
margin: v.$mp-3;
margin-left: 0rem;
padding: v.$mp-2;
border-bottom: 1px var(--main-color) solid;
.heading {
padding: 0em;
@ -389,17 +395,41 @@ nav li {
position: relative;
z-index: 1000;
background-color: var(--body-bg);
height: var(--header-height);
max-width: calc(var(--header-height) * 2);
margin: 0 0 v.$mp-4 v.$mp-4;
img { width: 100%; height: 100%; }
.cover {
max-width: calc(var(--header-height) * 2);
height: var(--header-height);
}
}
.header-cover:only-child {
with: 100%;
}
@media screen and (max-width: v.$screen-small) {
.container.header {
width: calc( 100% - v.$mp-2 );
.headings {
width: 100%;
clear: both;
}
.header-cover {
float: none;
margin: 0;
text-align: center;
}
.cover {
margin-left: auto;
margin-right: auto;
max-height: calc(var(--cover-h) * 1);
max-width: calc(var(--cover-w) * 2);
}
}
}
// ---- ---- detail
.page-content {
@ -456,22 +486,4 @@ body { font-size: 1.4em; }
margin-right: v.$mp-2;
}
.container.header {
width: calc( 100% - v.$mp-2 );
.headings {
width: 100%;
clear: both;
}
.header-cover {
float: none;
width: 100%;
max-width: unset;
height: unset;
margin-left: 0rem;
margin-right: 0rem;
}
}
}

View File

@ -7,18 +7,22 @@
</nav>
<nav class="a-carousel-bullets-container">
<!-- <span class="icon bullet" @click="prev" v-if="showPrevButton">
<i :class="leftButtonIcon"></i>
</span> -->
<span class="left">
<span class="icon bullet" @click="prev()" v-if="showPrev">
<i :class="leftButtonIcon"></i>
</span>
</span>
<template v-if="bullets.length > 1">
<span class="icon bullet" v-bind:key="bullet" v-for="bullet of bullets" @click="select(bullet)">
<i v-if="bullet == index" class="fa fa-circle"></i>
<i v-else class="far fa-circle"></i>
</span>
</template>
<!-- <span class="icon bullet" @click="next" v-if="showNextButton">
<i :class="rightButtonIcon"></i>
</span> -->
<span class="right">
<span class="icon bullet" @click="next()" v-if="showNext">
<i :class="rightButtonIcon"></i>
</span>
</span>
<slot name="bullets-right" :v-bind="this"></slot>
</nav>
@ -46,7 +50,6 @@
}
.a-carousel-bullets-container {
justify-content: center;
flex-grow: 1;
}
@ -54,7 +57,13 @@
cursor: pointer;
}
.a-carousel-bullets-container .bullet-right {
.a-carousel-bullets-container .left {
min-width: 2rem;
margin-right: auto;
}
.a-carousel-bullets-container .right {
min-width: 2rem;
margin-left: auto;
}
@ -128,17 +137,17 @@ export default {
computed: {
card() { return this.cards()[this.index] },
/*showPrevButton() {
showPrev() {
return this.index > 0
},
showNextButton() {
showNext() {
if(!this.cards || this.cards.length <= 1)
return false
let { count } = this.visibility
return (this.index + count) < this.cards.length
},*/
let last = this.bullets[this.bullets.length-1]
return this.index != last
},
bullets() {
if(!this.cards || !this.$refs.viewport)
@ -195,6 +204,18 @@ export default {
return card.el
},
next() {
let n = this.bullets.indexOf(this.index)
let index = this.bullets[n+1]
this.select(index)
},
prev() {
let n = this.bullets.indexOf(this.index)
let index = this.bullets[n-1]
this.select(index)
},
refresh() {
this.cards = this.getCards()
this.select(this.index)