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

design / mockups

Browse Source
This commit is contained in:
bkfox 2024-01-31 20:24:38 +01:00
parent 1475a80316
commit cab6cacd0b
12 changed files with 357 additions and 155 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -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;

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

@ -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;

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

@ -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,

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

@ -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;
}

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 %}
{% endwith %}
</section>
{% endif %}
{% endblock %}

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

@ -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 %}
<div class="card-content">
{% if cover %}
{% if url %}<a href="{{ url }}">{% endif %}
<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 %}

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

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

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

@ -23,12 +23,16 @@ Styling related context:
{% block headings-container %}
<header class="headings{% block headings-class %}{% endblock %}"{% block headings-tag-extra %}{% endblock %}>
{% block headings %}
<div>
<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>
<span class="heading subtitle {% block subtitle-class %}{% endblock %}">{% block subtitle %}{{ subtitle|default:"" }}{% endblock %}</span>
</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>
{% endblock %}
{% block subtitle-container %}
<span class="heading subtitle {% block subtitle-class %}{% endblock %}">
{% block subtitle %}{{ subtitle|default:"" }}{% endblock %}
</span>
{% endblock %}
{% endblock %}
</header>
{% endblock %}

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

@ -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;
}
}

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

@ -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;
}

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

@ -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";

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

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