From ccea2a5ea6045a67db3d4fff83797af26694a9c0 Mon Sep 17 00:00:00 2001 From: bkfox Date: Fri, 5 Jan 2024 19:17:10 +0100 Subject: [PATCH] player link; page rendering --- aircox/static/aircox/css/admin.css | 50 +++--- aircox/static/aircox/css/chunk-common.css | 96 +---------- aircox/static/aircox/css/public.css | 159 +++++-------------- aircox/static/aircox/js/chunk-common.js | 2 +- aircox/templates/aircox/base.html | 4 +- aircox/templates/aircox/page_list.html | 10 +- aircox/templates/aircox/widgets/preview.html | 2 +- aircox/templates/aircox/widgets/wide.html | 2 +- assets/src/assets/components.scss | 46 ++++-- assets/src/assets/public.scss | 15 +- assets/src/assets/vendor.scss | 2 +- assets/src/vueLoader.js | 2 +- radiocampus/templates/aircox/base.html | 7 + 13 files changed, 119 insertions(+), 278 deletions(-) diff --git a/aircox/static/aircox/css/admin.css b/aircox/static/aircox/css/admin.css index db0fcfb..1d29be6 100644 --- a/aircox/static/aircox/css/admin.css +++ b/aircox/static/aircox/css/admin.css @@ -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 ***! \*************************************************************************************************************************************************************************************************************************************/ :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-bg-color: var(--highlight-color); --heading-bg-highlight-color: var(--highlight-color-2); --heading-font-family: default; - --preview-title-sz: 1.6rem; - --preview-subtitle-sz: 1.4rem; - --preview-cover-size: 24rem; + --preview-title-sz: 1.4rem; + --preview-subtitle-sz: 1rem; + --preview-cover-size: 14rem; --preview-cover-small-size: 10rem; --preview-cover-tiny-size: 4rem; --preview-wide-content-sz: 1.6rem; @@ -30,11 +35,11 @@ --a-sound-hv-bg: var(--highlight-color); --a-sound-playing-fg: var(--highlight-color-alpha); --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-panel-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-bg: var(--highlight-color); --button-sec-bg: var(--highlight-color-alpha); @@ -48,31 +53,31 @@ :root { --section-content-sz: 1rem; --preview-title-sz: 1rem; - --preview-subtitle-sz: 1rem; - --preview-cover-size: 14rem; - --preview-cover-small-size: 10rem; + --preview-subtitle-sz: 0.8rem; + --preview-cover-size: 10rem; + --preview-cover-small-size: 6rem; --preview-cover-tiny-size: 4rem; --preview-wide-content-sz: 1rem; } } -.title.is-1 { +.title.is-1, .header.preview .title.is-1 { font-size: var(--title-1-sz); } -.title.is-2 { +.title.is-2, .header.preview .title.is-2 { font-size: var(--title-2-sz); } -.title.is-3 { +.title.is-3, .header.preview .title.is-3 { font-size: var(--title-3-sz); } -.subtitle.is-1 { - font-size: var(--title-1-sz); +.subtitle.is-1, .header.preview .subtitle.is-1 { + font-size: var(--subtitle-1-sz); } -.subtitle.is-2 { - font-size: var(--title-2-sz); +.subtitle.is-2, .header.preview .subtitle.is-2 { + font-size: var(--subtitle-2-sz); } -.subtitle.is-3 { - font-size: var(--title-3-sz); +.subtitle.is-3, .header.preview .subtitle.is-3 { + font-size: var(--subtitle-3-sz); } .heading { @@ -192,6 +197,7 @@ flex-grow: 1; } .list-item .subtitle { + font-size: var(--preview-title-sz); text-align: right; } .list-item .media-content { @@ -213,6 +219,7 @@ .preview-wide { height: var(--preview-cover-size); + display: flex; } .preview-wide .headings { height: var(--preview-cover-size); @@ -247,6 +254,10 @@ .preview-card:not(.header) { 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 { 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 { display: inline-block; - padding: 0.4em; + padding: 0.4rem; border: 1px var(--highlight-color-2-alpha) solid; justify-content: center; text-align: center; - font-size: 1.4rem; color: var(--button-fg); background-color: var(--button-bg); } diff --git a/aircox/static/aircox/css/chunk-common.css b/aircox/static/aircox/css/chunk-common.css index ac3d3f2..db7fea6 100644 --- a/aircox/static/aircox/css/chunk-common.css +++ b/aircox/static/aircox/css/chunk-common.css @@ -81,8 +81,7 @@ fieldset[disabled] .file-name, fieldset[disabled] .select select, .select fields width: 0.625em; } -.title: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) { +.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; } @@ -6796,99 +6795,6 @@ a.tag:hover { 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 { text-align: left; justify-content: left; diff --git a/aircox/static/aircox/css/public.css b/aircox/static/aircox/css/public.css index 0782576..f889315 100644 --- a/aircox/static/aircox/css/public.css +++ b/aircox/static/aircox/css/public.css @@ -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 ***! \**************************************************************************************************************************************************************************************************************************************/ :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-bg-color: var(--highlight-color); --heading-bg-highlight-color: var(--highlight-color-2); --heading-font-family: default; - --preview-title-sz: 1.6rem; - --preview-subtitle-sz: 1.4rem; - --preview-cover-size: 24rem; + --preview-title-sz: 1.4rem; + --preview-subtitle-sz: 1rem; + --preview-cover-size: 14rem; --preview-cover-small-size: 10rem; --preview-cover-tiny-size: 4rem; --preview-wide-content-sz: 1.6rem; @@ -30,11 +35,11 @@ --a-sound-hv-bg: var(--highlight-color); --a-sound-playing-fg: var(--highlight-color-alpha); --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-panel-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-bg: var(--highlight-color); --button-sec-bg: var(--highlight-color-alpha); @@ -48,31 +53,31 @@ :root { --section-content-sz: 1rem; --preview-title-sz: 1rem; - --preview-subtitle-sz: 1rem; - --preview-cover-size: 14rem; - --preview-cover-small-size: 10rem; + --preview-subtitle-sz: 0.8rem; + --preview-cover-size: 10rem; + --preview-cover-small-size: 6rem; --preview-cover-tiny-size: 4rem; --preview-wide-content-sz: 1rem; } } -.title.is-1 { +.title.is-1, .header.preview .title.is-1 { font-size: var(--title-1-sz); } -.title.is-2 { +.title.is-2, .header.preview .title.is-2 { font-size: var(--title-2-sz); } -.title.is-3 { +.title.is-3, .header.preview .title.is-3 { font-size: var(--title-3-sz); } -.subtitle.is-1 { - font-size: var(--title-1-sz); +.subtitle.is-1, .header.preview .subtitle.is-1 { + font-size: var(--subtitle-1-sz); } -.subtitle.is-2 { - font-size: var(--title-2-sz); +.subtitle.is-2, .header.preview .subtitle.is-2 { + font-size: var(--subtitle-2-sz); } -.subtitle.is-3 { - font-size: var(--title-3-sz); +.subtitle.is-3, .header.preview .subtitle.is-3 { + font-size: var(--subtitle-3-sz); } .heading { @@ -192,6 +197,7 @@ flex-grow: 1; } .list-item .subtitle { + font-size: var(--preview-title-sz); text-align: right; } .list-item .media-content { @@ -213,6 +219,7 @@ .preview-wide { height: var(--preview-cover-size); + display: flex; } .preview-wide .headings { height: var(--preview-cover-size); @@ -247,6 +254,10 @@ .preview-card:not(.header) { 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 { min-width: unset; } @@ -536,8 +547,7 @@ fieldset[disabled] .file-name, fieldset[disabled] .select select, .select fields width: 0.625em; } -.title: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) { +.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; } @@ -7251,99 +7261,6 @@ a.tag:hover { 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 { padding-bottom: 5rem; } @@ -7394,11 +7311,10 @@ a.tag:hover { .button, a.button, button.button, .nav-urls a { display: inline-block; - padding: 0.4em; + padding: 0.4rem; border: 1px var(--highlight-color-2-alpha) solid; justify-content: center; text-align: center; - font-size: 1.4rem; color: var(--button-fg); background-color: var(--button-bg); } @@ -7478,9 +7394,14 @@ a.tag:hover { } .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 { color: var(--highlight-color-2); background-color: var(--highlight-color); @@ -7684,12 +7605,6 @@ nav li a, nav li .button { .header.has-cover { min-height: calc(var(--header-height) / 3); } -.header .title { - font-size: 40px; -} -.header .subtitle { - font-size: 32px; -} .header-cover:not(:only-child) { float: right; diff --git a/aircox/static/aircox/js/chunk-common.js b/aircox/static/aircox/js/chunk-common.js index c5f970b..176c75a 100644 --- a/aircox/static/aircox/js/chunk-common.js +++ b/aircox/static/aircox/js/chunk-common.js @@ -455,7 +455,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 */ \"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?"); /***/ }), diff --git a/aircox/templates/aircox/base.html b/aircox/templates/aircox/base.html index d21f8ac..eb23a02 100644 --- a/aircox/templates/aircox/base.html +++ b/aircox/templates/aircox/base.html @@ -100,11 +100,11 @@ Usefull context:
{% block headings %}
-

{% block title %}{{ title|default:"" }}{% endblock %}

+

{% block title %}{{ title|default:"" }}{% endblock %}

{% spaceless %} - + {% block subtitle %} {% if subtitle %} {{ subtitle }} diff --git a/aircox/templates/aircox/page_list.html b/aircox/templates/aircox/page_list.html index d34f4cf..aed42dc 100644 --- a/aircox/templates/aircox/page_list.html +++ b/aircox/templates/aircox/page_list.html @@ -58,12 +58,4 @@ {% endif %} {% endblock %} -{% block content-container %} - {% if page and page.content %} - {{ block.super }} - {% elif parent and parent.content %} - {% with parent as page %} - {{ block.super }} - {% endwith %} - {% endif %} -{% endblock %} +{% block content-container %}{% endblock %} diff --git a/aircox/templates/aircox/widgets/preview.html b/aircox/templates/aircox/widgets/preview.html index bdf5a9b..190e755 100644 --- a/aircox/templates/aircox/widgets/preview.html +++ b/aircox/templates/aircox/widgets/preview.html @@ -24,7 +24,7 @@ Styling related context:
{% block headings %}
{% block subtitle %}{{ subtitle|default:"" }}{% endblock %} diff --git a/aircox/templates/aircox/widgets/wide.html b/aircox/templates/aircox/widgets/wide.html index df42bdc..378cda0 100644 --- a/aircox/templates/aircox/widgets/wide.html +++ b/aircox/templates/aircox/widgets/wide.html @@ -1,7 +1,7 @@ {% extends "./preview.html" %} {% 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-tag-extra %} {{ block.super }} diff --git a/assets/src/assets/components.scss b/assets/src/assets/components.scss index f9ae0ea..f3b0b32 100644 --- a/assets/src/assets/components.scss +++ b/assets/src/assets/components.scss @@ -1,15 +1,21 @@ @use "vars" as v; :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-bg-color: var(--highlight-color); --heading-bg-highlight-color: var(--highlight-color-2); --heading-font-family: default; - --preview-title-sz: #{v.$text-size-bigger}; - --preview-subtitle-sz: #{v.$text-size-medium}; - --preview-cover-size: 24rem; + --preview-title-sz: #{v.$text-size-medium}; + --preview-subtitle-sz: #{v.$text-size}; + --preview-cover-size: 14rem; --preview-cover-small-size: 10rem; --preview-cover-tiny-size: 4rem; --preview-wide-content-sz: #{v.$text-size-bigger}; @@ -34,12 +40,12 @@ --a-sound-hv-bg: var(--highlight-color); --a-sound-playing-fg: var(--highlight-color-alpha); --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-panel-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-bg: var(--highlight-color); @@ -56,26 +62,25 @@ --section-content-sz: 1rem; --preview-title-sz: #{v.$text-size}; - --preview-subtitle-sz: #{v.$text-size}; - --preview-cover-size: 14rem; - --preview-cover-small-size: 10rem; + --preview-subtitle-sz: #{v.$text-size-smaller}; + --preview-cover-size: 10rem; + --preview-cover-small-size: 6rem; --preview-cover-tiny-size: 4rem; --preview-wide-content-sz: #{v.$text-size}; } } -// ---- ---- Preview & items // ---- headings -.title { +.title, .header.preview .title { &.is-1 { font-size: var(--title-1-sz); } &.is-2 { font-size: var(--title-2-sz); } &.is-3 { font-size: var(--title-3-sz); } } -.subtitle { - &.is-1 { font-size: var(--title-1-sz); } - &.is-2 { font-size: var(--title-2-sz); } - &.is-3 { font-size: var(--title-3-sz); } +.subtitle, .header.preview .subtitle { + &.is-1 { font-size: var(--subtitle-1-sz); } + &.is-2 { font-size: var(--subtitle-2-sz); } + &.is-3 { font-size: var(--subtitle-3-sz); } } .heading { @@ -105,11 +110,11 @@ @mixin button { .button, a.button, button.button, .nav-urls a { display: inline-block; - padding: v.$mp-2e; + padding: v.$mp-2; border: 1px var(--highlight-color-2-alpha) solid; justify-content: center; text-align: center; - font-size: v.$text-size-medium; + // font-size: v.$text-size-medium; color: var(--button-fg); background-color: var(--button-bg); @@ -300,6 +305,7 @@ } .subtitle { + font-size: var(--preview-title-sz); text-align: right; } @@ -328,6 +334,7 @@ // ---- wide .preview-wide { height: var(--preview-cover-size); + display: flex; .headings { height: var(--preview-cover-size) @@ -372,6 +379,11 @@ box-shadow: 0em 0em 1em rgba(0,0,0,0.2); } + .title { + max-height: calc( var(--preview-cover-size) / 2 ); + overflow: hidden; + } + .card-grid & { min-width: unset; } diff --git a/assets/src/assets/public.scss b/assets/src/assets/public.scss index 00b692e..4b7ac0f 100644 --- a/assets/src/assets/public.scss +++ b/assets/src/assets/public.scss @@ -90,7 +90,13 @@ } .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 { @@ -355,13 +361,6 @@ nav li { &.has-cover { min-height: calc( var(--header-height) / 3 ); } - - .title { - font-size: v.$h1-size; - } - .subtitle { - font-size: v.$h2-size; - } } diff --git a/assets/src/assets/vendor.scss b/assets/src/assets/vendor.scss index fa75e86..f5dd018 100644 --- a/assets/src/assets/vendor.scss +++ b/assets/src/assets/vendor.scss @@ -29,4 +29,4 @@ $title-color: #000; // @import "~bulma/sass/elements/progress"; @import "~bulma/sass/elements/table"; @import "~bulma/sass/elements/tag"; -@import "~bulma/sass/elements/title"; +//@import "~bulma/sass/elements/title"; diff --git a/assets/src/vueLoader.js b/assets/src/vueLoader.js index 397d608..0556c17 100644 --- a/assets/src/vueLoader.js +++ b/assets/src/vueLoader.js @@ -18,7 +18,7 @@ export default class VueLoader { } enable(hotReload=true) { - hotReload && this.pageLoad.enable() + hotReload && this.pageLoad.enable(document.body) this.mount() } diff --git a/radiocampus/templates/aircox/base.html b/radiocampus/templates/aircox/base.html index d583434..bff270d 100644 --- a/radiocampus/templates/aircox/base.html +++ b/radiocampus/templates/aircox/base.html @@ -14,3 +14,10 @@ } {% endblock %} + + +{% block header-container %} +{% if not page.attach_to %} +{{ block.super }} +{% endif %} +{% endblock %}