rc/aircox
13
1
Fork 1
Code Issues 15 Pull Requests Projects Releases Wiki Activity

player link; page rendering

Browse Source
This commit is contained in:
bkfox
2024-01-05 19:17:10 +01:00
parent c52e87acd2
commit ccea2a5ea6
13 changed files with 119 additions and 278 deletions
Download Patch File Download Diff File Expand all files Collapse all files

50
aircox/static/aircox/css/admin.css
View File

@ -2,14 +2,19 @@
!*** css ./node_modules/css-loader/dist/cjs.js??clonedRuleSet-24.use[1]!./node_modules/postcss-loader/dist/cjs.js??clonedRuleSet-24.use[2]!./node_modules/sass-loader/dist/cjs.js??clonedRuleSet-24.use[3]!./src/assets/admin.scss ***! !*** css ./node_modules/css-loader/dist/cjs.js??clonedRuleSet-24.use[1]!./node_modules/postcss-loader/dist/cjs.js??clonedRuleSet-24.use[2]!./node_modules/sass-loader/dist/cjs.js??clonedRuleSet-24.use[3]!./src/assets/admin.scss ***!
\*************************************************************************************************************************************************************************************************************************************/ \*************************************************************************************************************************************************************************************************************************************/
:root { :root {
--heading-height: 30rem; --title-1-sz: 2rem;
--title-2-sz: 1.6rem;
--title-3-sz: 1.4rem;
--subtitle-1-sz: 1.8rem;
--subtitle-2-sz: 1.6rem;
--subtitle-3-sz: 1.4rem;
--heading-title-bg-color: rgba(255, 255, 0, 1); --heading-title-bg-color: rgba(255, 255, 0, 1);
--heading-bg-color: var(--highlight-color); --heading-bg-color: var(--highlight-color);
--heading-bg-highlight-color: var(--highlight-color-2); --heading-bg-highlight-color: var(--highlight-color-2);
--heading-font-family: default; --heading-font-family: default;
--preview-title-sz: 1.6rem; --preview-title-sz: 1.4rem;
--preview-subtitle-sz: 1.4rem; --preview-subtitle-sz: 1rem;
--preview-cover-size: 24rem; --preview-cover-size: 14rem;
--preview-cover-small-size: 10rem; --preview-cover-small-size: 10rem;
--preview-cover-tiny-size: 4rem; --preview-cover-tiny-size: 4rem;
--preview-wide-content-sz: 1.6rem; --preview-wide-content-sz: 1.6rem;
@ -30,11 +35,11 @@
--a-sound-hv-bg: var(--highlight-color); --a-sound-hv-bg: var(--highlight-color);
--a-sound-playing-fg: var(--highlight-color-alpha); --a-sound-playing-fg: var(--highlight-color-alpha);
--a-sound-hv-fg: var(--highlight-color-2); --a-sound-hv-fg: var(--highlight-color-2);
--a-sound-text-sz: 1.4rem; --a-sound-text-sz: 1rem;
--a-player-url-fg: var(--highlight-color-2); --a-player-url-fg: var(--highlight-color-2);
--a-player-panel-bg: var(--highlight-color); --a-player-panel-bg: var(--highlight-color);
--a-player-bar-bg: var(--highlight-color); --a-player-bar-bg: var(--highlight-color);
--a-player-bar-title-alone-sz: 1.6rem; --a-player-bar-title-alone-sz: 1.4rem;
--button-fg: var(--highlight-color-2); --button-fg: var(--highlight-color-2);
--button-bg: var(--highlight-color); --button-bg: var(--highlight-color);
--button-sec-bg: var(--highlight-color-alpha); --button-sec-bg: var(--highlight-color-alpha);
@ -48,31 +53,31 @@
:root { :root {
--section-content-sz: 1rem; --section-content-sz: 1rem;
--preview-title-sz: 1rem; --preview-title-sz: 1rem;
--preview-subtitle-sz: 1rem; --preview-subtitle-sz: 0.8rem;
--preview-cover-size: 14rem; --preview-cover-size: 10rem;
--preview-cover-small-size: 10rem; --preview-cover-small-size: 6rem;
--preview-cover-tiny-size: 4rem; --preview-cover-tiny-size: 4rem;
--preview-wide-content-sz: 1rem; --preview-wide-content-sz: 1rem;
} }
} }
.title.is-1 { .title.is-1, .header.preview .title.is-1 {
font-size: var(--title-1-sz); font-size: var(--title-1-sz);
} }
.title.is-2 { .title.is-2, .header.preview .title.is-2 {
font-size: var(--title-2-sz); font-size: var(--title-2-sz);
} }
.title.is-3 { .title.is-3, .header.preview .title.is-3 {
font-size: var(--title-3-sz); font-size: var(--title-3-sz);
} }
.subtitle.is-1 { .subtitle.is-1, .header.preview .subtitle.is-1 {
font-size: var(--title-1-sz); font-size: var(--subtitle-1-sz);
} }
.subtitle.is-2 { .subtitle.is-2, .header.preview .subtitle.is-2 {
font-size: var(--title-2-sz); font-size: var(--subtitle-2-sz);
} }
.subtitle.is-3 { .subtitle.is-3, .header.preview .subtitle.is-3 {
font-size: var(--title-3-sz); font-size: var(--subtitle-3-sz);
} }
.heading { .heading {
@ -192,6 +197,7 @@
flex-grow: 1; flex-grow: 1;
} }
.list-item .subtitle { .list-item .subtitle {
font-size: var(--preview-title-sz);
text-align: right; text-align: right;
} }
.list-item .media-content { .list-item .media-content {
@ -213,6 +219,7 @@
.preview-wide { .preview-wide {
height: var(--preview-cover-size); height: var(--preview-cover-size);
display: flex;
} }
.preview-wide .headings { .preview-wide .headings {
height: var(--preview-cover-size); height: var(--preview-cover-size);
@ -247,6 +254,10 @@
.preview-card:not(.header) { .preview-card:not(.header) {
box-shadow: 0em 0em 1em rgba(0, 0, 0, 0.2); box-shadow: 0em 0em 1em rgba(0, 0, 0, 0.2);
} }
.preview-card .title {
max-height: calc(var(--preview-cover-size) / 2);
overflow: hidden;
}
.card-grid .preview-card { .card-grid .preview-card {
min-width: unset; min-width: unset;
} }
@ -2691,11 +2702,10 @@ a.navbar-item:focus, a.navbar-item:focus-within, a.navbar-item:hover, a.navbar-i
#player .button, #player a.button, #player button.button, #player .nav-urls a, .ax .button, .ax a.button, .ax button.button, .ax .nav-urls a { #player .button, #player a.button, #player button.button, #player .nav-urls a, .ax .button, .ax a.button, .ax button.button, .ax .nav-urls a {
display: inline-block; display: inline-block;
padding: 0.4em; padding: 0.4rem;
border: 1px var(--highlight-color-2-alpha) solid; border: 1px var(--highlight-color-2-alpha) solid;
justify-content: center; justify-content: center;
text-align: center; text-align: center;
font-size: 1.4rem;
color: var(--button-fg); color: var(--button-fg);
background-color: var(--button-bg); background-color: var(--button-bg);
} }

96
aircox/static/aircox/css/chunk-common.css
View File

@ -81,8 +81,7 @@ fieldset[disabled] .file-name, fieldset[disabled] .select select, .select fields
width: 0.625em; width: 0.625em;
} }
.title:not(:last-child), .table-container:not(:last-child), .table:not(:last-child), .content:not(:last-child), .box:not(:last-child), .message:not(:last-child) {
.subtitle:not(:last-child), .table-container:not(:last-child), .table:not(:last-child), .content:not(:last-child), .box:not(:last-child), .message:not(:last-child) {
margin-bottom: 1.5rem; margin-bottom: 1.5rem;
} }
@ -6796,99 +6795,6 @@ a.tag:hover {
text-decoration: underline; text-decoration: underline;
} }
.title,
.subtitle {
word-break: break-word;
}
.title em,
.title span,
.subtitle em,
.subtitle span {
font-weight: inherit;
}
.title sub,
.subtitle sub {
font-size: 0.75em;
}
.title sup,
.subtitle sup {
font-size: 0.75em;
}
.title .tag,
.subtitle .tag {
vertical-align: middle;
}
.title {
color: #000;
font-size: 2rem;
font-weight: 600;
line-height: 1.125;
}
.title strong {
color: inherit;
font-weight: inherit;
}
.title:not(.is-spaced) + .subtitle {
margin-top: -1.25rem;
}
.title.is-1 {
font-size: 3rem;
}
.title.is-2 {
font-size: 2.5rem;
}
.title.is-3 {
font-size: 2rem;
}
.title.is-4 {
font-size: 1.5rem;
}
.title.is-5 {
font-size: 1.25rem;
}
.title.is-6 {
font-size: 1rem;
}
.title.is-7 {
font-size: 0.75rem;
}
.subtitle {
color: hsl(0deg, 0%, 29%);
font-size: 1.25rem;
font-weight: 400;
line-height: 1.25;
}
.subtitle strong {
color: hsl(0deg, 0%, 21%);
font-weight: 600;
}
.subtitle:not(.is-spaced) + .title {
margin-top: -1.25rem;
}
.subtitle.is-1 {
font-size: 3rem;
}
.subtitle.is-2 {
font-size: 2.5rem;
}
.subtitle.is-3 {
font-size: 2rem;
}
.subtitle.is-4 {
font-size: 1.5rem;
}
.subtitle.is-5 {
font-size: 1.25rem;
}
.subtitle.is-6 {
font-size: 1rem;
}
.subtitle.is-7 {
font-size: 0.75rem;
}
.align-left { .align-left {
text-align: left; text-align: left;
justify-content: left; justify-content: left;

159
aircox/static/aircox/css/public.css
View File

@ -2,14 +2,19 @@
!*** css ./node_modules/css-loader/dist/cjs.js??clonedRuleSet-24.use[1]!./node_modules/postcss-loader/dist/cjs.js??clonedRuleSet-24.use[2]!./node_modules/sass-loader/dist/cjs.js??clonedRuleSet-24.use[3]!./src/assets/public.scss ***! !*** css ./node_modules/css-loader/dist/cjs.js??clonedRuleSet-24.use[1]!./node_modules/postcss-loader/dist/cjs.js??clonedRuleSet-24.use[2]!./node_modules/sass-loader/dist/cjs.js??clonedRuleSet-24.use[3]!./src/assets/public.scss ***!
\**************************************************************************************************************************************************************************************************************************************/ \**************************************************************************************************************************************************************************************************************************************/
:root { :root {
--heading-height: 30rem; --title-1-sz: 2rem;
--title-2-sz: 1.6rem;
--title-3-sz: 1.4rem;
--subtitle-1-sz: 1.8rem;
--subtitle-2-sz: 1.6rem;
--subtitle-3-sz: 1.4rem;
--heading-title-bg-color: rgba(255, 255, 0, 1); --heading-title-bg-color: rgba(255, 255, 0, 1);
--heading-bg-color: var(--highlight-color); --heading-bg-color: var(--highlight-color);
--heading-bg-highlight-color: var(--highlight-color-2); --heading-bg-highlight-color: var(--highlight-color-2);
--heading-font-family: default; --heading-font-family: default;
--preview-title-sz: 1.6rem; --preview-title-sz: 1.4rem;
--preview-subtitle-sz: 1.4rem; --preview-subtitle-sz: 1rem;
--preview-cover-size: 24rem; --preview-cover-size: 14rem;
--preview-cover-small-size: 10rem; --preview-cover-small-size: 10rem;
--preview-cover-tiny-size: 4rem; --preview-cover-tiny-size: 4rem;
--preview-wide-content-sz: 1.6rem; --preview-wide-content-sz: 1.6rem;
@ -30,11 +35,11 @@
--a-sound-hv-bg: var(--highlight-color); --a-sound-hv-bg: var(--highlight-color);
--a-sound-playing-fg: var(--highlight-color-alpha); --a-sound-playing-fg: var(--highlight-color-alpha);
--a-sound-hv-fg: var(--highlight-color-2); --a-sound-hv-fg: var(--highlight-color-2);
--a-sound-text-sz: 1.4rem; --a-sound-text-sz: 1rem;
--a-player-url-fg: var(--highlight-color-2); --a-player-url-fg: var(--highlight-color-2);
--a-player-panel-bg: var(--highlight-color); --a-player-panel-bg: var(--highlight-color);
--a-player-bar-bg: var(--highlight-color); --a-player-bar-bg: var(--highlight-color);
--a-player-bar-title-alone-sz: 1.6rem; --a-player-bar-title-alone-sz: 1.4rem;
--button-fg: var(--highlight-color-2); --button-fg: var(--highlight-color-2);
--button-bg: var(--highlight-color); --button-bg: var(--highlight-color);
--button-sec-bg: var(--highlight-color-alpha); --button-sec-bg: var(--highlight-color-alpha);
@ -48,31 +53,31 @@
:root { :root {
--section-content-sz: 1rem; --section-content-sz: 1rem;
--preview-title-sz: 1rem; --preview-title-sz: 1rem;
--preview-subtitle-sz: 1rem; --preview-subtitle-sz: 0.8rem;
--preview-cover-size: 14rem; --preview-cover-size: 10rem;
--preview-cover-small-size: 10rem; --preview-cover-small-size: 6rem;
--preview-cover-tiny-size: 4rem; --preview-cover-tiny-size: 4rem;
--preview-wide-content-sz: 1rem; --preview-wide-content-sz: 1rem;
} }
} }
.title.is-1 { .title.is-1, .header.preview .title.is-1 {
font-size: var(--title-1-sz); font-size: var(--title-1-sz);
} }
.title.is-2 { .title.is-2, .header.preview .title.is-2 {
font-size: var(--title-2-sz); font-size: var(--title-2-sz);
} }
.title.is-3 { .title.is-3, .header.preview .title.is-3 {
font-size: var(--title-3-sz); font-size: var(--title-3-sz);
} }
.subtitle.is-1 { .subtitle.is-1, .header.preview .subtitle.is-1 {
font-size: var(--title-1-sz); font-size: var(--subtitle-1-sz);
} }
.subtitle.is-2 { .subtitle.is-2, .header.preview .subtitle.is-2 {
font-size: var(--title-2-sz); font-size: var(--subtitle-2-sz);
} }
.subtitle.is-3 { .subtitle.is-3, .header.preview .subtitle.is-3 {
font-size: var(--title-3-sz); font-size: var(--subtitle-3-sz);
} }
.heading { .heading {
@ -192,6 +197,7 @@
flex-grow: 1; flex-grow: 1;
} }
.list-item .subtitle { .list-item .subtitle {
font-size: var(--preview-title-sz);
text-align: right; text-align: right;
} }
.list-item .media-content { .list-item .media-content {
@ -213,6 +219,7 @@
.preview-wide { .preview-wide {
height: var(--preview-cover-size); height: var(--preview-cover-size);
display: flex;
} }
.preview-wide .headings { .preview-wide .headings {
height: var(--preview-cover-size); height: var(--preview-cover-size);
@ -247,6 +254,10 @@
.preview-card:not(.header) { .preview-card:not(.header) {
box-shadow: 0em 0em 1em rgba(0, 0, 0, 0.2); box-shadow: 0em 0em 1em rgba(0, 0, 0, 0.2);
} }
.preview-card .title {
max-height: calc(var(--preview-cover-size) / 2);
overflow: hidden;
}
.card-grid .preview-card { .card-grid .preview-card {
min-width: unset; min-width: unset;
} }
@ -536,8 +547,7 @@ fieldset[disabled] .file-name, fieldset[disabled] .select select, .select fields
width: 0.625em; width: 0.625em;
} }
.title:not(:last-child), .table-container:not(:last-child), .table:not(:last-child), .content:not(:last-child), .box:not(:last-child), .message:not(:last-child) {
.subtitle:not(:last-child), .table-container:not(:last-child), .table:not(:last-child), .content:not(:last-child), .box:not(:last-child), .message:not(:last-child) {
margin-bottom: 1.5rem; margin-bottom: 1.5rem;
} }
@ -7251,99 +7261,6 @@ a.tag:hover {
text-decoration: underline; text-decoration: underline;
} }
.title,
.subtitle {
word-break: break-word;
}
.title em,
.title span,
.subtitle em,
.subtitle span {
font-weight: inherit;
}
.title sub,
.subtitle sub {
font-size: 0.75em;
}
.title sup,
.subtitle sup {
font-size: 0.75em;
}
.title .tag,
.subtitle .tag {
vertical-align: middle;
}
.title {
color: #000;
font-size: 2rem;
font-weight: 600;
line-height: 1.125;
}
.title strong {
color: inherit;
font-weight: inherit;
}
.title:not(.is-spaced) + .subtitle {
margin-top: -1.25rem;
}
.title.is-1 {
font-size: 3rem;
}
.title.is-2 {
font-size: 2.5rem;
}
.title.is-3 {
font-size: 2rem;
}
.title.is-4 {
font-size: 1.5rem;
}
.title.is-5 {
font-size: 1.25rem;
}
.title.is-6 {
font-size: 1rem;
}
.title.is-7 {
font-size: 0.75rem;
}
.subtitle {
color: hsl(0deg, 0%, 29%);
font-size: 1.25rem;
font-weight: 400;
line-height: 1.25;
}
.subtitle strong {
color: hsl(0deg, 0%, 21%);
font-weight: 600;
}
.subtitle:not(.is-spaced) + .title {
margin-top: -1.25rem;
}
.subtitle.is-1 {
font-size: 3rem;
}
.subtitle.is-2 {
font-size: 2.5rem;
}
.subtitle.is-3 {
font-size: 2rem;
}
.subtitle.is-4 {
font-size: 1.5rem;
}
.subtitle.is-5 {
font-size: 1.25rem;
}
.subtitle.is-6 {
font-size: 1rem;
}
.subtitle.is-7 {
font-size: 0.75rem;
}
.page { .page {
padding-bottom: 5rem; padding-bottom: 5rem;
} }
@ -7394,11 +7311,10 @@ a.tag:hover {
.button, a.button, button.button, .nav-urls a { .button, a.button, button.button, .nav-urls a {
display: inline-block; display: inline-block;
padding: 0.4em; padding: 0.4rem;
border: 1px var(--highlight-color-2-alpha) solid; border: 1px var(--highlight-color-2-alpha) solid;
justify-content: center; justify-content: center;
text-align: center; text-align: center;
font-size: 1.4rem;
color: var(--button-fg); color: var(--button-fg);
background-color: var(--button-bg); background-color: var(--button-bg);
} }
@ -7478,9 +7394,14 @@ a.tag:hover {
} }
.label, .textarea, .input, .select { .label, .textarea, .input, .select {
font-size: 1.4rem; font-size: 1rem;
} }
@media screen and (min-width: 600px) {
textarea {
height: 10rem !important;
}
}
.navbar-item.active, .table tr.is-selected { .navbar-item.active, .table tr.is-selected {
color: var(--highlight-color-2); color: var(--highlight-color-2);
background-color: var(--highlight-color); background-color: var(--highlight-color);
@ -7684,12 +7605,6 @@ nav li a, nav li .button {
.header.has-cover { .header.has-cover {
min-height: calc(var(--header-height) / 3); min-height: calc(var(--header-height) / 3);
} }
.header .title {
font-size: 40px;
}
.header .subtitle {
font-size: 32px;
}
.header-cover:not(:only-child) { .header-cover:not(:only-child) {
float: right; float: right;

2
aircox/static/aircox/js/chunk-common.js
View File

@ -455,7 +455,7 @@ eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpac
\**************************/ \**************************/
/***/ (function(__unused_webpack_module, __webpack_exports__, __webpack_require__) { /***/ (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 */ \"default\": function() { return /* binding */ VueLoader; }\n/* harmony export */ });\n/* harmony import */ var vue__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! vue */ \"./node_modules/vue/dist/vue.esm-bundler.js\");\n/* harmony import */ var _pageLoad__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./pageLoad */ \"./src/pageLoad.js\");\n\n\n\n/**\n * Handles loading Vue js app on page load.\n */\nclass VueLoader {\n constructor({\n el = null,\n props = {},\n ...appConfig\n } = {}, loaderOptions = {}) {\n this.appConfig = appConfig;\n this.appConfig.el = el;\n this.props = props;\n this.pageLoad = new _pageLoad__WEBPACK_IMPORTED_MODULE_1__[\"default\"](el, loaderOptions);\n this.pageLoad.onPreMount = event => this.onPreMount(event);\n this.pageLoad.onMount = event => this.onMount(event);\n }\n enable(hotReload = true) {\n hotReload && this.pageLoad.enable();\n this.mount();\n }\n mount() {\n if (this.app) this.unmount();\n const app = (0,vue__WEBPACK_IMPORTED_MODULE_0__.createApp)(this.appConfig, this.props);\n app.config.globalProperties.window = window;\n this.vm = app.mount(this.pageLoad.el);\n this.app = app;\n }\n unmount() {\n if (!this.app) return;\n try {\n this.app.unmount();\n } catch (_) {\n null;\n }\n this.app = null;\n this.vm = null;\n this.pageLoad.reset();\n }\n onPreMount() {\n this.unmount();\n }\n onMount() {\n this.mount();\n }\n}\n\n//# sourceURL=webpack://aircox-assets/./src/vueLoader.js?"); eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */ \"default\": function() { return /* binding */ VueLoader; }\n/* harmony export */ });\n/* harmony import */ var vue__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! vue */ \"./node_modules/vue/dist/vue.esm-bundler.js\");\n/* harmony import */ var _pageLoad__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./pageLoad */ \"./src/pageLoad.js\");\n\n\n\n/**\n * Handles loading Vue js app on page load.\n */\nclass VueLoader {\n constructor({\n el = null,\n props = {},\n ...appConfig\n } = {}, loaderOptions = {}) {\n this.appConfig = appConfig;\n this.appConfig.el = el;\n this.props = props;\n this.pageLoad = new _pageLoad__WEBPACK_IMPORTED_MODULE_1__[\"default\"](el, loaderOptions);\n this.pageLoad.onPreMount = event => this.onPreMount(event);\n this.pageLoad.onMount = event => this.onMount(event);\n }\n enable(hotReload = true) {\n hotReload && this.pageLoad.enable(document.body);\n this.mount();\n }\n mount() {\n if (this.app) this.unmount();\n const app = (0,vue__WEBPACK_IMPORTED_MODULE_0__.createApp)(this.appConfig, this.props);\n app.config.globalProperties.window = window;\n this.vm = app.mount(this.pageLoad.el);\n this.app = app;\n }\n unmount() {\n if (!this.app) return;\n try {\n this.app.unmount();\n } catch (_) {\n null;\n }\n this.app = null;\n this.vm = null;\n this.pageLoad.reset();\n }\n onPreMount() {\n this.unmount();\n }\n onMount() {\n this.mount();\n }\n}\n\n//# sourceURL=webpack://aircox-assets/./src/vueLoader.js?");
/***/ }), /***/ }),

4
aircox/templates/aircox/base.html
View File

@ -100,11 +100,11 @@ Usefull context:
<div class="headings preview-card-headings"> <div class="headings preview-card-headings">
{% block headings %} {% block headings %}
<div> <div>
<h1 class="heading title {% block title-class %}{% endblock %}">{% block title %}{{ title|default:"" }}{% endblock %}</h1> <h1 class="heading title is-1 {% block title-class %}{% endblock %}">{% block title %}{{ title|default:"" }}{% endblock %}</h1>
</div> </div>
<div> <div>
{% spaceless %} {% spaceless %}
<span class="heading subtitle is-3"> <span class="heading subtitle is-2">
{% block subtitle %} {% block subtitle %}
{% if subtitle %} {% if subtitle %}
{{ subtitle }} {{ subtitle }}

10
aircox/templates/aircox/page_list.html
View File

@ -58,12 +58,4 @@
{% endif %} {% endif %}
{% endblock %} {% endblock %}
{% block content-container %} {% block content-container %}{% endblock %}
{% if page and page.content %}
{{ block.super }}
{% elif parent and parent.content %}
{% with parent as page %}
{{ block.super }}
{% endwith %}
{% endif %}
{% endblock %}

2
aircox/templates/aircox/widgets/preview.html
View File

@ -24,7 +24,7 @@ Styling related context:
<header class="headings{% block headings-class %}{% endblock %}"{% block headings-tag-extra %}{% endblock %}> <header class="headings{% block headings-class %}{% endblock %}"{% block headings-tag-extra %}{% endblock %}>
{% block headings %} {% block headings %}
<div> <div>
<a href="{{ url|escape }}" class="heading title {% block title-class %}{% endblock %}">{% block title %}{{ title|default:"" }}{% endblock %}</a> <a href="{{ url|escape }}" class="heading title {% block title-class %}{% endblock %}"{% if title %} title="{{ title|escape }}"{% endif %}>{% block title %}{{ title|default:"" }}{% endblock %}</a>
</div> </div>
<div> <div>
<span class="heading subtitle {% block subtitle-class %}{% endblock %}">{% block subtitle %}{{ subtitle|default:"" }}{% endblock %}</span> <span class="heading subtitle {% block subtitle-class %}{% endblock %}">{% block subtitle %}{{ subtitle|default:"" }}{% endblock %}</span>

2
aircox/templates/aircox/widgets/wide.html
View File

@ -1,7 +1,7 @@
{% extends "./preview.html" %} {% extends "./preview.html" %}
{% load i18n %} {% load i18n %}
{% block tag-class %}{{ block.super }} preview-wide columns{% endblock %} {% block tag-class %}{{ block.super }} preview-wide{% endblock %}
{% block headings-class %}{{ block.super }} preview-card-headings{% endblock %} {% block headings-class %}{{ block.super }} preview-card-headings{% endblock %}
{% block headings-tag-extra %} {% block headings-tag-extra %}
{{ block.super }} {{ block.super }}

46
assets/src/assets/components.scss
View File

@ -1,15 +1,21 @@
@use "vars" as v; @use "vars" as v;
:root { :root {
--heading-height: 30rem; --title-1-sz: 2rem;
--title-2-sz: 1.6rem;
--title-3-sz: 1.4rem;
--subtitle-1-sz: 1.8rem;
--subtitle-2-sz: 1.6rem;
--subtitle-3-sz: 1.4rem;
--heading-title-bg-color: rgba(255, 255, 0, 1); --heading-title-bg-color: rgba(255, 255, 0, 1);
--heading-bg-color: var(--highlight-color); --heading-bg-color: var(--highlight-color);
--heading-bg-highlight-color: var(--highlight-color-2); --heading-bg-highlight-color: var(--highlight-color-2);
--heading-font-family: default; --heading-font-family: default;
--preview-title-sz: #{v.$text-size-bigger}; --preview-title-sz: #{v.$text-size-medium};
--preview-subtitle-sz: #{v.$text-size-medium}; --preview-subtitle-sz: #{v.$text-size};
--preview-cover-size: 24rem; --preview-cover-size: 14rem;
--preview-cover-small-size: 10rem; --preview-cover-small-size: 10rem;
--preview-cover-tiny-size: 4rem; --preview-cover-tiny-size: 4rem;
--preview-wide-content-sz: #{v.$text-size-bigger}; --preview-wide-content-sz: #{v.$text-size-bigger};
@ -34,12 +40,12 @@
--a-sound-hv-bg: var(--highlight-color); --a-sound-hv-bg: var(--highlight-color);
--a-sound-playing-fg: var(--highlight-color-alpha); --a-sound-playing-fg: var(--highlight-color-alpha);
--a-sound-hv-fg: var(--highlight-color-2); --a-sound-hv-fg: var(--highlight-color-2);
--a-sound-text-sz: #{v.$text-size-medium}; --a-sound-text-sz: #{v.$text-size};
--a-player-url-fg: var(--highlight-color-2); --a-player-url-fg: var(--highlight-color-2);
--a-player-panel-bg: var(--highlight-color); --a-player-panel-bg: var(--highlight-color);
--a-player-bar-bg: var(--highlight-color); --a-player-bar-bg: var(--highlight-color);
--a-player-bar-title-alone-sz: #{v.$text-size-bigger}; --a-player-bar-title-alone-sz: #{v.$text-size-medium};
--button-fg: var(--highlight-color-2); --button-fg: var(--highlight-color-2);
--button-bg: var(--highlight-color); --button-bg: var(--highlight-color);
@ -56,26 +62,25 @@
--section-content-sz: 1rem; --section-content-sz: 1rem;
--preview-title-sz: #{v.$text-size}; --preview-title-sz: #{v.$text-size};
--preview-subtitle-sz: #{v.$text-size}; --preview-subtitle-sz: #{v.$text-size-smaller};
--preview-cover-size: 14rem; --preview-cover-size: 10rem;
--preview-cover-small-size: 10rem; --preview-cover-small-size: 6rem;
--preview-cover-tiny-size: 4rem; --preview-cover-tiny-size: 4rem;
--preview-wide-content-sz: #{v.$text-size}; --preview-wide-content-sz: #{v.$text-size};
} }
} }
// ---- ---- Preview & items
// ---- headings // ---- headings
.title { .title, .header.preview .title {
&.is-1 { font-size: var(--title-1-sz); } &.is-1 { font-size: var(--title-1-sz); }
&.is-2 { font-size: var(--title-2-sz); } &.is-2 { font-size: var(--title-2-sz); }
&.is-3 { font-size: var(--title-3-sz); } &.is-3 { font-size: var(--title-3-sz); }
} }
.subtitle { .subtitle, .header.preview .subtitle {
&.is-1 { font-size: var(--title-1-sz); } &.is-1 { font-size: var(--subtitle-1-sz); }
&.is-2 { font-size: var(--title-2-sz); } &.is-2 { font-size: var(--subtitle-2-sz); }
&.is-3 { font-size: var(--title-3-sz); } &.is-3 { font-size: var(--subtitle-3-sz); }
} }
.heading { .heading {
@ -105,11 +110,11 @@
@mixin button { @mixin button {
.button, a.button, button.button, .nav-urls a { .button, a.button, button.button, .nav-urls a {
display: inline-block; display: inline-block;
padding: v.$mp-2e; padding: v.$mp-2;
border: 1px var(--highlight-color-2-alpha) solid; border: 1px var(--highlight-color-2-alpha) solid;
justify-content: center; justify-content: center;
text-align: center; text-align: center;
font-size: v.$text-size-medium; // font-size: v.$text-size-medium;
color: var(--button-fg); color: var(--button-fg);
background-color: var(--button-bg); background-color: var(--button-bg);
@ -300,6 +305,7 @@
} }
.subtitle { .subtitle {
font-size: var(--preview-title-sz);
text-align: right; text-align: right;
} }
@ -328,6 +334,7 @@
// ---- wide // ---- wide
.preview-wide { .preview-wide {
height: var(--preview-cover-size); height: var(--preview-cover-size);
display: flex;
.headings { .headings {
height: var(--preview-cover-size) height: var(--preview-cover-size)
@ -372,6 +379,11 @@
box-shadow: 0em 0em 1em rgba(0,0,0,0.2); box-shadow: 0em 0em 1em rgba(0,0,0,0.2);
} }
.title {
max-height: calc( var(--preview-cover-size) / 2 );
overflow: hidden;
}
.card-grid & { .card-grid & {
min-width: unset; min-width: unset;
} }

15
assets/src/assets/public.scss
View File

@ -90,7 +90,13 @@
} }
.label, .textarea, .input, .select { .label, .textarea, .input, .select {
font-size: v.$text-size-medium; font-size: v.$text-size;
}
@media screen and (min-width: v.$screen-small) {
textarea {
height: calc( v.$text-size * 10 ) !important;
}
} }
.navbar-item.active, .table tr.is-selected { .navbar-item.active, .table tr.is-selected {
@ -355,13 +361,6 @@ nav li {
&.has-cover { &.has-cover {
min-height: calc( var(--header-height) / 3 ); min-height: calc( var(--header-height) / 3 );
} }
.title {
font-size: v.$h1-size;
}
.subtitle {
font-size: v.$h2-size;
}
} }

2
assets/src/assets/vendor.scss
View File

@ -29,4 +29,4 @@ $title-color: #000;
// @import "~bulma/sass/elements/progress"; // @import "~bulma/sass/elements/progress";
@import "~bulma/sass/elements/table"; @import "~bulma/sass/elements/table";
@import "~bulma/sass/elements/tag"; @import "~bulma/sass/elements/tag";
@import "~bulma/sass/elements/title"; //@import "~bulma/sass/elements/title";

2
assets/src/vueLoader.js
View File

@ -18,7 +18,7 @@ export default class VueLoader {
} }
enable(hotReload=true) { enable(hotReload=true) {
hotReload && this.pageLoad.enable() hotReload && this.pageLoad.enable(document.body)
this.mount() this.mount()
} }

7
radiocampus/templates/aircox/base.html
View File

@ -14,3 +14,10 @@
} }
</style> </style>
{% endblock %} {% endblock %}
{% block header-container %}
{% if not page.attach_to %}
{{ block.super }}
{% endif %}
{% endblock %}