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

#132 | #121: backoffice / dev-1.0-121 #131

Merged
thomas merged 151 commits from dev-1.0-121 into develop-1.0 2024-04-28 20:02:14 +00:00
Conversation 2 Commits 151 Files Changed 348 +357 -155
12 changed files with 357 additions and 155 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files
Showing only changes of commit cab6cacd0b - Show all commits

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

@ -13,20 +13,27 @@
--heading-fg: var(--text-color); --heading-fg: var(--text-color);
--heading-hg-fg: var(--text-color); --heading-hg-fg: var(--text-color);
--heading-hg-bg: var(--hg-color-2); --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-bg: var(--body-bg);
--preview-title-sz: 1.4rem; --preview-title-sz: var(--title-3-sz);
--preview-subtitle-sz: 1rem; --preview-subtitle-sz: var(--title-3-sz);
--preview-cover-size: 14rem; --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;
--preview-heading-bg-color: var(--hg-color); --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-p: 1.4rem;
--a-carousel-ml: calc(1.2rem - 0.5rem); --a-carousel-ml: calc(1.2rem - 0.5rem);
--a-carousel-gap: 1.2rem; --a-carousel-gap: 1.2rem;
--a-carousel-nav-x: -0.6em; --a-carousel-nav-x: -0.6em;
--a-carousel-bg: var(--secondary-color-light); --a-carousel-bg: none;
--a-progress-bg: transparent; --a-progress-bg: transparent;
--a-progress-bar-bg: var(--secondary-color); --a-progress-bar-bg: var(--secondary-color);
--a-progress-bar-color: var(--text-color); --a-progress-bar-color: var(--text-color);
@ -62,12 +69,15 @@
@media screen and (max-width: 1380px) { @media screen and (max-width: 1380px) {
:root { :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; --section-content-sz: 1rem;
--preview-title-sz: 1rem; --preview-title-sz: 1rem;
--preview-subtitle-sz: 0.8rem; --preview-subtitle-sz: 0.8rem;
--preview-cover-size: 10rem;
--preview-cover-small-size: 6rem;
--preview-cover-tiny-size: 4rem;
--preview-wide-content-sz: 1rem; --preview-wide-content-sz: 1rem;
} }
} }
@ -150,10 +160,21 @@
} }
.preview-cover { .preview-cover {
background-color: var(--preview-bg);
background-size: cover; background-size: cover;
height: var(--preview-cover-size); background-repeat: no-repeat;
width: var(--preview-cover-size); height: var(--cover-h);
min-width: var(--preview-cover-size); 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 { .preview-cover.small, .preview.small .preview-cover {
min-width: unset; min-width: unset;
@ -207,7 +228,7 @@
.list-item .subtitle { .list-item .subtitle {
font-size: var(--preview-title-sz); font-size: var(--preview-title-sz);
text-align: right; text-align: right;
min-width: 8rem; min-width: 9rem;
} }
.list-item .media { .list-item .media {
flex-grow: 1; flex-grow: 1;
@ -249,49 +270,87 @@
flex-grow: 1; flex-grow: 1;
} }
.preview-card { :root {
padding: 0rem !important; --preview-card-width: 20rem;
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;
} }
.card-headings, .preview-card-headings { .preview-card {
padding-top: 0.6rem; 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 { .preview-card:hover figure {
margin-bottom: 0.6rem; 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 { .preview-card .headings {
margin-bottom: 0.6rem; 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 { .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); box-shadow: inset 0em 0em 20rem var(--a-carousel-bg);
margin-bottom: var(--a-carousel-p); margin-bottom: var(--a-carousel-p);
padding: var(--a-carousel-p) 0; padding: var(--a-carousel-p) 0;
padding-left: var(--a-carousel-ml); margin-top: calc(0rem - var(--a-carousel-p));
} }
.a-carousel-container { .a-carousel-container {
@ -331,6 +390,9 @@ preview-header:not(.no-cover) .card-headings .heading, preview-header:not(.no-co
.a-carousel-bullets-container { .a-carousel-bullets-container {
padding-left: var(--a-carousel-ml); padding-left: var(--a-carousel-ml);
} }
.a-carousel-bullets-container .bullet {
margin: 0.2rem;
}
.a-progress { .a-progress {
display: flex; display: flex;

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

@ -8,7 +8,7 @@
} }
.a-carousel-viewport[data-v-b79f173e] { .a-carousel-viewport[data-v-b79f173e] {
width: 100%; width: 100%;
overflow: hidden; overflow-x: hidden;
} }
.a-carousel-container[data-v-b79f173e] { .a-carousel-container[data-v-b79f173e] {
display: flex; display: flex;

2
aircox/static/aircox/css/chunk-vendors.css
View File

@ -1211,7 +1211,7 @@
background-color: var(--vc-bg); background-color: var(--vc-bg);
-webkit-font-smoothing: antialiased; -webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale; -moz-osx-font-smoothing: grayscale;
-webkit-tap-highlight-color: transparent; -webkit-tap-hg-color: transparent;
} }
.vc-container, .vc-container,

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

@ -13,20 +13,27 @@
--heading-fg: var(--text-color); --heading-fg: var(--text-color);
--heading-hg-fg: var(--text-color); --heading-hg-fg: var(--text-color);
--heading-hg-bg: var(--hg-color-2); --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-bg: var(--body-bg);
--preview-title-sz: 1.4rem; --preview-title-sz: var(--title-3-sz);
--preview-subtitle-sz: 1rem; --preview-subtitle-sz: var(--title-3-sz);
--preview-cover-size: 14rem; --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;
--preview-heading-bg-color: var(--hg-color); --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-p: 1.4rem;
--a-carousel-ml: calc(1.2rem - 0.5rem); --a-carousel-ml: calc(1.2rem - 0.5rem);
--a-carousel-gap: 1.2rem; --a-carousel-gap: 1.2rem;
--a-carousel-nav-x: -0.6em; --a-carousel-nav-x: -0.6em;
--a-carousel-bg: var(--secondary-color-light); --a-carousel-bg: none;
--a-progress-bg: transparent; --a-progress-bg: transparent;
--a-progress-bar-bg: var(--secondary-color); --a-progress-bar-bg: var(--secondary-color);
--a-progress-bar-color: var(--text-color); --a-progress-bar-color: var(--text-color);
@ -62,12 +69,15 @@
@media screen and (max-width: 1380px) { @media screen and (max-width: 1380px) {
:root { :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; --section-content-sz: 1rem;
--preview-title-sz: 1rem; --preview-title-sz: 1rem;
--preview-subtitle-sz: 0.8rem; --preview-subtitle-sz: 0.8rem;
--preview-cover-size: 10rem;
--preview-cover-small-size: 6rem;
--preview-cover-tiny-size: 4rem;
--preview-wide-content-sz: 1rem; --preview-wide-content-sz: 1rem;
} }
} }
@ -150,10 +160,21 @@
} }
.preview-cover { .preview-cover {
background-color: var(--preview-bg);
background-size: cover; background-size: cover;
height: var(--preview-cover-size); background-repeat: no-repeat;
width: var(--preview-cover-size); height: var(--cover-h);
min-width: var(--preview-cover-size); 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 { .preview-cover.small, .preview.small .preview-cover {
min-width: unset; min-width: unset;
@ -207,7 +228,7 @@
.list-item .subtitle { .list-item .subtitle {
font-size: var(--preview-title-sz); font-size: var(--preview-title-sz);
text-align: right; text-align: right;
min-width: 8rem; min-width: 9rem;
} }
.list-item .media { .list-item .media {
flex-grow: 1; flex-grow: 1;
@ -249,49 +270,87 @@
flex-grow: 1; flex-grow: 1;
} }
.preview-card { :root {
padding: 0rem !important; --preview-card-width: 20rem;
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;
} }
.card-headings, .preview-card-headings { .preview-card {
padding-top: 0.6rem; 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 { .preview-card:hover figure {
margin-bottom: 0.6rem; 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 { .preview-card .headings {
margin-bottom: 0.6rem; 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 { .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); box-shadow: inset 0em 0em 20rem var(--a-carousel-bg);
margin-bottom: var(--a-carousel-p); margin-bottom: var(--a-carousel-p);
padding: var(--a-carousel-p) 0; padding: var(--a-carousel-p) 0;
padding-left: var(--a-carousel-ml); margin-top: calc(0rem - var(--a-carousel-p));
} }
.a-carousel-container { .a-carousel-container {
@ -331,6 +390,9 @@ preview-header:not(.no-cover) .card-headings .heading, preview-header:not(.no-co
.a-carousel-bullets-container { .a-carousel-bullets-container {
padding-left: var(--a-carousel-ml); padding-left: var(--a-carousel-ml);
} }
.a-carousel-bullets-container .bullet {
margin: 0.2rem;
}
.a-progress { .a-progress {
display: flex; display: flex;
@ -7302,7 +7364,7 @@ a.tag:hover {
margin-top: 0.6rem; margin-top: 0.6rem;
} }
.page section.container > .title { .page section.container > .title {
font-size: 1.4rem; font-size: var(--title-2-sz);
clear: both; clear: both;
margin-bottom: 1.2rem; margin-bottom: 1.2rem;
} }

1
aircox/templates/aircox/page_detail.html
View File

@ -50,6 +50,7 @@ Context:
{% include "./widgets/carousel.html" with objects=related_objects url_name=object.list_url_name url_category=object.category %} {% include "./widgets/carousel.html" with objects=related_objects url_name=object.list_url_name url_category=object.category %}
{% endwith %} {% endwith %}
</section>
{% endif %} {% endif %}
{% endblock %} {% endblock %}

28
aircox/templates/aircox/widgets/card.html
View File

@ -2,18 +2,22 @@
{% load i18n %} {% load i18n %}
{% block tag-class %}{{ block.super }} preview-card{% endblock %} {% 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 inner %}
{% block headings-container %} <div class="card-content">
{{ block.super }} {% if cover %}
{% block actions-container %}{{ block.super }}{% endblock %} {% if url %}<a href="{{ url }}">{% endif %}
{% endblock %} <figure style="background-image: url({{ cover }});" class="preview-cover">
<img src="{{ cover }}" class="hide">
</figure>
{% if url %}</a>{% endif %}
{% endif %}
<footer class="actions">
{% block actions %}{{ block.super }}{% endblock %}
</footer>
</div>
{% block headings-container %}{{ block.super }}{% endblock %}
{% endblock %} {% endblock %}

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

@ -37,5 +37,3 @@
<a href="{{ url }}" class="ml-2">{% translate "Show" %}</a> <a href="{{ url }}" class="ml-2">{% translate "Show" %}</a>
{% endif %} {% endif %}
{% endblock %} {% endblock %}
{% block actions %}{% endblock %}

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

@ -23,12 +23,16 @@ Styling related context:
{% block headings-container %} {% block headings-container %}
<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> {% block title-container %}
<a href="{{ url|escape }}" class="heading title {% block title-class %}{% endblock %}"{% if title %} title="{{ title|escape }}"{% endif %}>{% block title %}{{ title|default:"" }}{% endblock %}</a> <a href="{{ url|escape }}" class="heading title {% block title-class %}{% endblock %}"{% if title %} title="{{ title|escape }}"{% endif %}>
</div> {% block title %}{{ title|default:"" }}{% endblock %}
<div> </a>
<span class="heading subtitle {% block subtitle-class %}{% endblock %}">{% block subtitle %}{{ subtitle|default:"" }}{% endblock %}</span> {% endblock %}
</div> {% block subtitle-container %}
<span class="heading subtitle {% block subtitle-class %}{% endblock %}">
{% block subtitle %}{{ subtitle|default:"" }}{% endblock %}
</span>
{% endblock %}
{% endblock %} {% endblock %}
</header> </header>
{% endblock %} {% endblock %}

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

@ -14,21 +14,31 @@
--heading-hg-fg: var(--text-color); --heading-hg-fg: var(--text-color);
--heading-hg-bg: var(--hg-color-2); --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-bg: var(--body-bg);
--preview-title-sz: #{v.$text-size-medium}; --preview-title-sz: var(--title-3-sz);
--preview-subtitle-sz: #{v.$text-size}; --preview-subtitle-sz: var(--title-3-sz);
--preview-cover-size: 14rem; --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};
--preview-heading-bg-color: var(--hg-color); --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-p: #{v.$text-size-medium};
--a-carousel-ml: calc(#{v.$mp-4} - 0.5rem); --a-carousel-ml: calc(#{v.$mp-4} - 0.5rem);
--a-carousel-gap: #{v.$mp-4}; --a-carousel-gap: #{v.$mp-4};
--a-carousel-nav-x: -#{v.$mp-3e}; --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-bg: transparent;
--a-progress-bar-bg: var(--secondary-color); --a-progress-bar-bg: var(--secondary-color);
@ -70,13 +80,17 @@
@media screen and (max-width: v.$screen-wide) { @media screen and (max-width: v.$screen-wide) {
:root { :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; --section-content-sz: 1rem;
--preview-title-sz: #{v.$text-size}; --preview-title-sz: #{v.$text-size};
--preview-subtitle-sz: #{v.$text-size-smaller}; --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-wide-content-sz: #{v.$text-size};
} }
} }
@ -246,10 +260,21 @@
.preview-cover { .preview-cover {
background-color: var(--preview-bg);
background-size: cover; background-size: cover;
height: var(--preview-cover-size); background-repeat: no-repeat;
width: var(--preview-cover-size); height: var(--cover-h);
min-width: var(--preview-cover-size); 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 & { &.small, .preview.small & {
min-width: unset; min-width: unset;
@ -316,7 +341,7 @@
font-size: var(--preview-title-sz); font-size: var(--preview-title-sz);
// background-color: var(--preview-heading-bg-color); // background-color: var(--preview-heading-bg-color);
text-align: right; text-align: right;
min-width: 8rem; min-width: 9rem;
} }
.media { .media {
@ -375,8 +400,64 @@
// ---- card // ---- card
:root {
--preview-card-width: 20rem;
}
.preview-card { .preview-card {
display: flex;
flex-direction: column;
width: var(--card-w);
padding: 0rem !important; 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); height: var(--preview-cover-size);
width: var(--preview-cover-size); width: var(--preview-cover-size);
@ -414,22 +495,7 @@
label { label {
display: none; 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); // background-color: var(--a-carousel-bg);
margin-bottom: var(--a-carousel-p); margin-bottom: var(--a-carousel-p);
padding: var(--a-carousel-p) 0; 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 { .a-carousel-bullets-container {
// due to a-carousel margin-left // due to a-carousel margin-left
padding-left: var(--a-carousel-ml); padding-left: var(--a-carousel-ml);
.bullet {
margin: v.$mp-1;
}
} }

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

@ -22,7 +22,7 @@
margin-top: v.$mp-3; margin-top: v.$mp-3;
> .title { > .title {
font-size: v.$text-size-medium; font-size: var(--title-2-sz);
clear: both; clear: both;
margin-bottom: v.$mp-4; margin-bottom: v.$mp-4;
} }

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

@ -10,6 +10,7 @@ $title-color: #000;
@import "~bulma/sass/base/_all"; @import "~bulma/sass/base/_all";
@import "~bulma/sass/components/dropdown"; @import "~bulma/sass/components/dropdown";
// @import "~bulma/sass/components/card";
@import "~bulma/sass/components/media"; @import "~bulma/sass/components/media";
@import "~bulma/sass/components/message"; @import "~bulma/sass/components/message";
@import "~bulma/sass/components/modal"; @import "~bulma/sass/components/modal";

2
assets/src/components/ACarousel.vue
View File

@ -32,7 +32,7 @@
.a-carousel-viewport { .a-carousel-viewport {
width: 100%; width: 100%;
overflow: hidden; overflow-x: hidden;
} }
.a-carousel-container { .a-carousel-container {