diff --git a/aircox/static/aircox/css/admin.css b/aircox/static/aircox/css/admin.css index 51fc66b..dbb269b 100644 --- a/aircox/static/aircox/css/admin.css +++ b/aircox/static/aircox/css/admin.css @@ -13,20 +13,27 @@ --heading-fg: var(--text-color); --heading-hg-fg: var(--text-color); --heading-hg-bg: var(--hg-color-2); + --cover-w: 14rem; + --cover-h: 14rem; + --cover-small-w: 10rem; + --cover-small-h: 10rem; + --cover-tiny-w: 10rem; + --cover-tiny-h: 10rem; + --card-w: var(--cover-w); --preview-bg: var(--body-bg); - --preview-title-sz: 1.4rem; - --preview-subtitle-sz: 1rem; + --preview-title-sz: var(--title-3-sz); + --preview-subtitle-sz: var(--title-3-sz); --preview-cover-size: 14rem; --preview-cover-small-size: 10rem; --preview-cover-tiny-size: 4rem; --preview-wide-content-sz: 1.6rem; --preview-heading-bg-color: var(--hg-color); - --header-height: var(--preview-cover-size); + --header-height: var(--cover-h); --a-carousel-p: 1.4rem; --a-carousel-ml: calc(1.2rem - 0.5rem); --a-carousel-gap: 1.2rem; --a-carousel-nav-x: -0.6em; - --a-carousel-bg: var(--secondary-color-light); + --a-carousel-bg: none; --a-progress-bg: transparent; --a-progress-bar-bg: var(--secondary-color); --a-progress-bar-color: var(--text-color); @@ -62,12 +69,15 @@ @media screen and (max-width: 1380px) { :root { + --cover-w: 10rem; + --cover-h: 10rem; + --cover-small-w: 6rem; + --cover-small-h: 6rem; + --cover-tiny-w: 4rem; + --cover-tiny-h: 4rem; --section-content-sz: 1rem; --preview-title-sz: 1rem; --preview-subtitle-sz: 0.8rem; - --preview-cover-size: 10rem; - --preview-cover-small-size: 6rem; - --preview-cover-tiny-size: 4rem; --preview-wide-content-sz: 1rem; } } @@ -150,10 +160,21 @@ } .preview-cover { + background-color: var(--preview-bg); background-size: cover; - height: var(--preview-cover-size); - width: var(--preview-cover-size); - min-width: var(--preview-cover-size); + background-repeat: no-repeat; + height: var(--cover-h); + max-width: calc(var(--cover-w) * 1.5); + min-width: var(--cover-w); + overflow: hidden; +} +.preview-cover img { + height: var(--cover-h); + max-width: calc(var(--cover-w) * 1.5); + min-width: var(--cover-w); +} +.preview-cover img.hide { + visibility: hidden; } .preview-cover.small, .preview.small .preview-cover { min-width: unset; @@ -207,7 +228,7 @@ .list-item .subtitle { font-size: var(--preview-title-sz); text-align: right; - min-width: 8rem; + min-width: 9rem; } .list-item .media { flex-grow: 1; @@ -249,49 +270,87 @@ flex-grow: 1; } -.preview-card { - padding: 0rem !important; - height: var(--preview-cover-size); - width: var(--preview-cover-size); -} -.preview-card.small { - height: var(--preview-cover-small-size); - width: var(--preview-cover-small-size); -} -.preview-card.tiny { - height: var(--preview-cover-tiny-size); - width: var(--preview-cover-tiny-size); -} -.preview-card:not(.header) { - box-shadow: 0em 0em 1em rgba(0, 0, 0, 0.2); -} -.preview-card .heading { - background-color: var(--preview-heading-bg-color); -} -.preview-card .title { - max-height: calc(var(--preview-cover-size) / 2); - overflow: hidden; -} -.card-grid .preview-card { - min-width: unset; -} -.preview-card .actions { - position: absolute; - bottom: 0.6rem; - right: 0.6rem; -} -.preview-card .actions label { - display: none; +:root { + --preview-card-width: 20rem; } -.card-headings, .preview-card-headings { - padding-top: 0.6rem; +.preview-card { + display: flex; + flex-direction: column; + width: var(--card-w); + padding: 0rem !important; + margin-bottom: auto; + background-color: var(--preview-bg) !important; + transition: box-shadow 0.2s; + /* + height: var(--preview-cover-size); + width: var(--preview-cover-size); + + &.small { + height: var(--preview-cover-small-size); + width: var(--preview-cover-small-size); + } + &.tiny { + height: var(--preview-cover-tiny-size); + width: var(--preview-cover-tiny-size); + } + + &:not(.header) { + box-shadow: 0em 0em 1em rgba(0,0,0,0.2); + } + + .heading { + background-color: var(--preview-heading-bg-color); + } + + .title { + max-height: calc( var(--preview-cover-size) / 2 ); + overflow: hidden; + } + + .card-grid & { + min-width: unset; + } + + .actions { + position: absolute; + bottom: v.$mp-3; + right: v.$mp-3; + + label { + display: none; + } + }*/ } -.card-headings > div:not(:last-child), .card-headings .column > div, .preview-card-headings > div:not(:last-child), .preview-card-headings .column > div { - margin-bottom: 0.6rem; +.preview-card:hover figure { + box-shadow: 0em 0em 1.2em rgba(0, 0, 0, 0.4) !important; } -preview-header:not(.no-cover) .card-headings .heading, preview-header:not(.no-cover) .preview-card-headings .heading { - margin-bottom: 0.6rem; +.preview-card .headings { + margin-top: 0.4rem; +} +.preview-card .headings .heading { + display: block !important; +} +.preview-card .headings .title { + overflow: hidden; +} +.preview-card .headings .subtitle { + font-size: 1.4rem; +} +.preview-card .card-content { + flex-grow: 1; + position: relative; +} +.preview-card .card-content figure { + box-shadow: 0em 0em 1em rgba(0, 0, 0, 0.2); + height: var(--cover-h); + width: var(--cover-w); +} +.preview-card .card-content .actions { + position: absolute; + padding: 0.4rem; + bottom: 0rem; + right: 0rem; } .card-grid { @@ -316,7 +375,7 @@ preview-header:not(.no-cover) .card-headings .heading, preview-header:not(.no-co box-shadow: inset 0em 0em 20rem var(--a-carousel-bg); margin-bottom: var(--a-carousel-p); padding: var(--a-carousel-p) 0; - padding-left: var(--a-carousel-ml); + margin-top: calc(0rem - var(--a-carousel-p)); } .a-carousel-container { @@ -331,6 +390,9 @@ preview-header:not(.no-cover) .card-headings .heading, preview-header:not(.no-co .a-carousel-bullets-container { padding-left: var(--a-carousel-ml); } +.a-carousel-bullets-container .bullet { + margin: 0.2rem; +} .a-progress { display: flex; diff --git a/aircox/static/aircox/css/chunk-common.css b/aircox/static/aircox/css/chunk-common.css index 5e1d2cf..7b1af2f 100644 --- a/aircox/static/aircox/css/chunk-common.css +++ b/aircox/static/aircox/css/chunk-common.css @@ -8,7 +8,7 @@ } .a-carousel-viewport[data-v-b79f173e] { width: 100%; - overflow: hidden; + overflow-x: hidden; } .a-carousel-container[data-v-b79f173e] { display: flex; diff --git a/aircox/static/aircox/css/chunk-vendors.css b/aircox/static/aircox/css/chunk-vendors.css index b89f7dd..9560e9f 100644 --- a/aircox/static/aircox/css/chunk-vendors.css +++ b/aircox/static/aircox/css/chunk-vendors.css @@ -1211,7 +1211,7 @@ background-color: var(--vc-bg); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; - -webkit-tap-highlight-color: transparent; + -webkit-tap-hg-color: transparent; } .vc-container, diff --git a/aircox/static/aircox/css/public.css b/aircox/static/aircox/css/public.css index 593489a..794d585 100644 --- a/aircox/static/aircox/css/public.css +++ b/aircox/static/aircox/css/public.css @@ -13,20 +13,27 @@ --heading-fg: var(--text-color); --heading-hg-fg: var(--text-color); --heading-hg-bg: var(--hg-color-2); + --cover-w: 14rem; + --cover-h: 14rem; + --cover-small-w: 10rem; + --cover-small-h: 10rem; + --cover-tiny-w: 10rem; + --cover-tiny-h: 10rem; + --card-w: var(--cover-w); --preview-bg: var(--body-bg); - --preview-title-sz: 1.4rem; - --preview-subtitle-sz: 1rem; + --preview-title-sz: var(--title-3-sz); + --preview-subtitle-sz: var(--title-3-sz); --preview-cover-size: 14rem; --preview-cover-small-size: 10rem; --preview-cover-tiny-size: 4rem; --preview-wide-content-sz: 1.6rem; --preview-heading-bg-color: var(--hg-color); - --header-height: var(--preview-cover-size); + --header-height: var(--cover-h); --a-carousel-p: 1.4rem; --a-carousel-ml: calc(1.2rem - 0.5rem); --a-carousel-gap: 1.2rem; --a-carousel-nav-x: -0.6em; - --a-carousel-bg: var(--secondary-color-light); + --a-carousel-bg: none; --a-progress-bg: transparent; --a-progress-bar-bg: var(--secondary-color); --a-progress-bar-color: var(--text-color); @@ -62,12 +69,15 @@ @media screen and (max-width: 1380px) { :root { + --cover-w: 10rem; + --cover-h: 10rem; + --cover-small-w: 6rem; + --cover-small-h: 6rem; + --cover-tiny-w: 4rem; + --cover-tiny-h: 4rem; --section-content-sz: 1rem; --preview-title-sz: 1rem; --preview-subtitle-sz: 0.8rem; - --preview-cover-size: 10rem; - --preview-cover-small-size: 6rem; - --preview-cover-tiny-size: 4rem; --preview-wide-content-sz: 1rem; } } @@ -150,10 +160,21 @@ } .preview-cover { + background-color: var(--preview-bg); background-size: cover; - height: var(--preview-cover-size); - width: var(--preview-cover-size); - min-width: var(--preview-cover-size); + background-repeat: no-repeat; + height: var(--cover-h); + max-width: calc(var(--cover-w) * 1.5); + min-width: var(--cover-w); + overflow: hidden; +} +.preview-cover img { + height: var(--cover-h); + max-width: calc(var(--cover-w) * 1.5); + min-width: var(--cover-w); +} +.preview-cover img.hide { + visibility: hidden; } .preview-cover.small, .preview.small .preview-cover { min-width: unset; @@ -207,7 +228,7 @@ .list-item .subtitle { font-size: var(--preview-title-sz); text-align: right; - min-width: 8rem; + min-width: 9rem; } .list-item .media { flex-grow: 1; @@ -249,49 +270,87 @@ flex-grow: 1; } -.preview-card { - padding: 0rem !important; - height: var(--preview-cover-size); - width: var(--preview-cover-size); -} -.preview-card.small { - height: var(--preview-cover-small-size); - width: var(--preview-cover-small-size); -} -.preview-card.tiny { - height: var(--preview-cover-tiny-size); - width: var(--preview-cover-tiny-size); -} -.preview-card:not(.header) { - box-shadow: 0em 0em 1em rgba(0, 0, 0, 0.2); -} -.preview-card .heading { - background-color: var(--preview-heading-bg-color); -} -.preview-card .title { - max-height: calc(var(--preview-cover-size) / 2); - overflow: hidden; -} -.card-grid .preview-card { - min-width: unset; -} -.preview-card .actions { - position: absolute; - bottom: 0.6rem; - right: 0.6rem; -} -.preview-card .actions label { - display: none; +:root { + --preview-card-width: 20rem; } -.card-headings, .preview-card-headings { - padding-top: 0.6rem; +.preview-card { + display: flex; + flex-direction: column; + width: var(--card-w); + padding: 0rem !important; + margin-bottom: auto; + background-color: var(--preview-bg) !important; + transition: box-shadow 0.2s; + /* + height: var(--preview-cover-size); + width: var(--preview-cover-size); + + &.small { + height: var(--preview-cover-small-size); + width: var(--preview-cover-small-size); + } + &.tiny { + height: var(--preview-cover-tiny-size); + width: var(--preview-cover-tiny-size); + } + + &:not(.header) { + box-shadow: 0em 0em 1em rgba(0,0,0,0.2); + } + + .heading { + background-color: var(--preview-heading-bg-color); + } + + .title { + max-height: calc( var(--preview-cover-size) / 2 ); + overflow: hidden; + } + + .card-grid & { + min-width: unset; + } + + .actions { + position: absolute; + bottom: v.$mp-3; + right: v.$mp-3; + + label { + display: none; + } + }*/ } -.card-headings > div:not(:last-child), .card-headings .column > div, .preview-card-headings > div:not(:last-child), .preview-card-headings .column > div { - margin-bottom: 0.6rem; +.preview-card:hover figure { + box-shadow: 0em 0em 1.2em rgba(0, 0, 0, 0.4) !important; } -preview-header:not(.no-cover) .card-headings .heading, preview-header:not(.no-cover) .preview-card-headings .heading { - margin-bottom: 0.6rem; +.preview-card .headings { + margin-top: 0.4rem; +} +.preview-card .headings .heading { + display: block !important; +} +.preview-card .headings .title { + overflow: hidden; +} +.preview-card .headings .subtitle { + font-size: 1.4rem; +} +.preview-card .card-content { + flex-grow: 1; + position: relative; +} +.preview-card .card-content figure { + box-shadow: 0em 0em 1em rgba(0, 0, 0, 0.2); + height: var(--cover-h); + width: var(--cover-w); +} +.preview-card .card-content .actions { + position: absolute; + padding: 0.4rem; + bottom: 0rem; + right: 0rem; } .card-grid { @@ -316,7 +375,7 @@ preview-header:not(.no-cover) .card-headings .heading, preview-header:not(.no-co box-shadow: inset 0em 0em 20rem var(--a-carousel-bg); margin-bottom: var(--a-carousel-p); padding: var(--a-carousel-p) 0; - padding-left: var(--a-carousel-ml); + margin-top: calc(0rem - var(--a-carousel-p)); } .a-carousel-container { @@ -331,6 +390,9 @@ preview-header:not(.no-cover) .card-headings .heading, preview-header:not(.no-co .a-carousel-bullets-container { padding-left: var(--a-carousel-ml); } +.a-carousel-bullets-container .bullet { + margin: 0.2rem; +} .a-progress { display: flex; @@ -7302,7 +7364,7 @@ a.tag:hover { margin-top: 0.6rem; } .page section.container > .title { - font-size: 1.4rem; + font-size: var(--title-2-sz); clear: both; margin-bottom: 1.2rem; } diff --git a/aircox/templates/aircox/page_detail.html b/aircox/templates/aircox/page_detail.html index 34857ea..53a2118 100644 --- a/aircox/templates/aircox/page_detail.html +++ b/aircox/templates/aircox/page_detail.html @@ -50,6 +50,7 @@ Context: {% include "./widgets/carousel.html" with objects=related_objects url_name=object.list_url_name url_category=object.category %} {% endwith %} + {% endif %} {% endblock %} diff --git a/aircox/templates/aircox/widgets/card.html b/aircox/templates/aircox/widgets/card.html index 127c29f..b4f0b5a 100644 --- a/aircox/templates/aircox/widgets/card.html +++ b/aircox/templates/aircox/widgets/card.html @@ -2,18 +2,22 @@ {% load i18n %} {% block tag-class %}{{ block.super }} preview-card{% endblock %} -{% block tag-extra %} - {{ block.super }} - {% if cover %} - style="background-image: url({{ cover }});" - {% endif %} -{% endblock %} -{% block headings-class %}{{ block.super }} preview-card-headings{% endblock %} - {% block inner %} -{% block headings-container %} - {{ block.super }} - {% block actions-container %}{{ block.super }}{% endblock %} -{% endblock %} +
+ {% if cover %} + {% if url %}{% endif %} +
+ +
+ {% if url %}
{% endif %} + {% endif %} + + +
+ + {% block headings-container %}{{ block.super }}{% endblock %} + {% endblock %} diff --git a/aircox/templates/aircox/widgets/page.html b/aircox/templates/aircox/widgets/page.html index 206b984..99d1db9 100644 --- a/aircox/templates/aircox/widgets/page.html +++ b/aircox/templates/aircox/widgets/page.html @@ -37,5 +37,3 @@ {% translate "Show" %} {% endif %} {% endblock %} - -{% block actions %}{% endblock %} diff --git a/aircox/templates/aircox/widgets/preview.html b/aircox/templates/aircox/widgets/preview.html index 190e755..0a82879 100644 --- a/aircox/templates/aircox/widgets/preview.html +++ b/aircox/templates/aircox/widgets/preview.html @@ -23,12 +23,16 @@ Styling related context: {% block headings-container %}
{% block headings %} -
- {% block title %}{{ title|default:"" }}{% endblock %} -
-
- {% block subtitle %}{{ subtitle|default:"" }}{% endblock %} -
+ {% block title-container %} + + {% block title %}{{ title|default:"" }}{% endblock %} + + {% endblock %} + {% block subtitle-container %} + + {% block subtitle %}{{ subtitle|default:"" }}{% endblock %} + + {% endblock %} {% endblock %}
{% endblock %} diff --git a/assets/src/assets/components.scss b/assets/src/assets/components.scss index 71226ed..3230b88 100644 --- a/assets/src/assets/components.scss +++ b/assets/src/assets/components.scss @@ -14,21 +14,31 @@ --heading-hg-fg: var(--text-color); --heading-hg-bg: var(--hg-color-2); + --cover-w: 14rem; + --cover-h: 14rem; + --cover-small-w: 10rem; + --cover-small-h: 10rem; + --cover-tiny-w: 10rem; + --cover-tiny-h: 10rem; + + --card-w: var(--cover-w); + + --preview-bg: var(--body-bg); - --preview-title-sz: #{v.$text-size-medium}; - --preview-subtitle-sz: #{v.$text-size}; + --preview-title-sz: var(--title-3-sz); + --preview-subtitle-sz: var(--title-3-sz); --preview-cover-size: 14rem; --preview-cover-small-size: 10rem; --preview-cover-tiny-size: 4rem; --preview-wide-content-sz: #{v.$text-size-bigger}; --preview-heading-bg-color: var(--hg-color); - --header-height: var(--preview-cover-size); + --header-height: var(--cover-h); --a-carousel-p: #{v.$text-size-medium}; --a-carousel-ml: calc(#{v.$mp-4} - 0.5rem); --a-carousel-gap: #{v.$mp-4}; --a-carousel-nav-x: -#{v.$mp-3e}; - --a-carousel-bg: var(--secondary-color-light); + --a-carousel-bg: none; // var(--secondary-color-light); --a-progress-bg: transparent; --a-progress-bar-bg: var(--secondary-color); @@ -70,13 +80,17 @@ @media screen and (max-width: v.$screen-wide) { :root { + --cover-w: 10rem; + --cover-h: 10rem; + --cover-small-w: 6rem; + --cover-small-h: 6rem; + --cover-tiny-w: 4rem; + --cover-tiny-h: 4rem; + --section-content-sz: 1rem; --preview-title-sz: #{v.$text-size}; --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}; } } @@ -246,10 +260,21 @@ .preview-cover { + background-color: var(--preview-bg); background-size: cover; - height: var(--preview-cover-size); - width: var(--preview-cover-size); - min-width: var(--preview-cover-size); + background-repeat: no-repeat; + height: var(--cover-h); + max-width: calc( var(--cover-w) * 1.5 ); + min-width: var(--cover-w); + overflow: hidden; + + img { + height: var(--cover-h); + max-width: calc( var(--cover-w) * 1.5 ); + min-width: var(--cover-w); + } + img.hide { visibility: hidden; } + &.small, .preview.small & { min-width: unset; @@ -316,7 +341,7 @@ font-size: var(--preview-title-sz); // background-color: var(--preview-heading-bg-color); text-align: right; - min-width: 8rem; + min-width: 9rem; } .media { @@ -375,8 +400,64 @@ // ---- card +:root { + --preview-card-width: 20rem; +} + .preview-card { + display: flex; + flex-direction: column; + width: var(--card-w); padding: 0rem !important; + margin-bottom: auto; + + background-color: var(--preview-bg) !important; + + transition: box-shadow 0.2s; + + &:hover figure { + box-shadow: 0em 0em 1.2em rgba(0, 0, 0, 0.4) !important; + } + + .headings { + margin-top: v.$mp-2; + + .heading { + display: block !important; + } + + .title { +// background-color: var(--preview-heading-bg-color); +// max-height: 5rem; + overflow: hidden; + } + + .subtitle { +// background-color: var(--main-color-light); + font-size: v.$text-size-medium; + } + } + + .card-content { + flex-grow: 1; + position: relative; + + figure { + box-shadow: 0em 0em 1em rgba(0, 0, 0, 0.2); + height: var(--cover-h); + width: var(--cover-w); + } + + .actions { + position: absolute; + padding: v.$mp-2; + bottom: 0rem; + right: 0rem; + } + + } + + /* height: var(--preview-cover-size); width: var(--preview-cover-size); @@ -414,22 +495,7 @@ label { display: none; } - } -} - - -.card-headings, .preview-card-headings { - padding-top: v.$mp-3; - - & > div:not(:last-child), - & .column > div { - margin-bottom: v.$mp-3; - } - - preview-header:not(.no-cover) & .heading { - margin-bottom: v.$mp-3; - } - + }*/ } @@ -465,7 +531,7 @@ // background-color: var(--a-carousel-bg); margin-bottom: var(--a-carousel-p); padding: var(--a-carousel-p) 0; - padding-left: var(--a-carousel-ml); + margin-top: calc( 0rem - var(--a-carousel-p) ); } } @@ -482,6 +548,10 @@ .a-carousel-bullets-container { // due to a-carousel margin-left padding-left: var(--a-carousel-ml); + + .bullet { + margin: v.$mp-1; + } } diff --git a/assets/src/assets/public.scss b/assets/src/assets/public.scss index 63f3108..56d464c 100644 --- a/assets/src/assets/public.scss +++ b/assets/src/assets/public.scss @@ -22,7 +22,7 @@ margin-top: v.$mp-3; > .title { - font-size: v.$text-size-medium; + font-size: var(--title-2-sz); clear: both; margin-bottom: v.$mp-4; } diff --git a/assets/src/assets/vendor.scss b/assets/src/assets/vendor.scss index f5dd018..70f56ff 100644 --- a/assets/src/assets/vendor.scss +++ b/assets/src/assets/vendor.scss @@ -10,6 +10,7 @@ $title-color: #000; @import "~bulma/sass/base/_all"; @import "~bulma/sass/components/dropdown"; +// @import "~bulma/sass/components/card"; @import "~bulma/sass/components/media"; @import "~bulma/sass/components/message"; @import "~bulma/sass/components/modal"; diff --git a/assets/src/components/ACarousel.vue b/assets/src/components/ACarousel.vue index 1af22bb..f588094 100644 --- a/assets/src/components/ACarousel.vue +++ b/assets/src/components/ACarousel.vue @@ -32,7 +32,7 @@ .a-carousel-viewport { width: 100%; - overflow: hidden; + overflow-x: hidden; } .a-carousel-container {