design / mockups

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-title-sz: var(--title-3-sz);
-  --preview-subtitle-sz: 1rem;
+  --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);
+  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 {
   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;
 }
 
+: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;
+  /*
   height: var(--preview-cover-size);
   width: var(--preview-cover-size);
-}
+
-.preview-card.small {
+  &.small {
       height: var(--preview-cover-small-size);
       width: var(--preview-cover-small-size);
   }
-.preview-card.tiny {
+  &.tiny {
       height: var(--preview-cover-tiny-size);
       width: var(--preview-cover-tiny-size);
   }
-.preview-card:not(.header) {
+
+  &:not(.header) {
       box-shadow: 0em 0em 1em rgba(0,0,0,0.2);
   }
-.preview-card .heading {
+
+  .heading {
       background-color: var(--preview-heading-bg-color);
   }
-.preview-card .title {
+
+  .title {
       max-height: calc( var(--preview-cover-size) / 2 );
       overflow: hidden;
   }
-.card-grid .preview-card {
+
+  .card-grid & {
       min-width: unset;
   }
-.preview-card .actions {
+
+  .actions {
       position: absolute;
-  bottom: 0.6rem;
+      bottom: v.$mp-3;
-  right: 0.6rem;
+      right: v.$mp-3;
-}
+
-.preview-card .actions label {
+      label {
           display: none;
       }
-
+  }*/
-.card-headings, .preview-card-headings {
-  padding-top: 0.6rem;
 }
-.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 {
@@ -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;

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;

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,

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-title-sz: var(--title-3-sz);
-  --preview-subtitle-sz: 1rem;
+  --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);
+  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 {
   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;
 }
 
+: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;
+  /*
   height: var(--preview-cover-size);
   width: var(--preview-cover-size);
-}
+
-.preview-card.small {
+  &.small {
       height: var(--preview-cover-small-size);
       width: var(--preview-cover-small-size);
   }
-.preview-card.tiny {
+  &.tiny {
       height: var(--preview-cover-tiny-size);
       width: var(--preview-cover-tiny-size);
   }
-.preview-card:not(.header) {
+
+  &:not(.header) {
       box-shadow: 0em 0em 1em rgba(0,0,0,0.2);
   }
-.preview-card .heading {
+
+  .heading {
       background-color: var(--preview-heading-bg-color);
   }
-.preview-card .title {
+
+  .title {
       max-height: calc( var(--preview-cover-size) / 2 );
       overflow: hidden;
   }
-.card-grid .preview-card {
+
+  .card-grid & {
       min-width: unset;
   }
-.preview-card .actions {
+
+  .actions {
       position: absolute;
-  bottom: 0.6rem;
+      bottom: v.$mp-3;
-  right: 0.6rem;
+      right: v.$mp-3;
-}
+
-.preview-card .actions label {
+      label {
           display: none;
       }
-
+  }*/
-.card-headings, .preview-card-headings {
-  padding-top: 0.6rem;
 }
-.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 {
@@ -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;
 }

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

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 %}
+    <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 %}

aircox/templates/aircox/widgets/page.html

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

aircox/templates/aircox/widgets/preview.html

@@ -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>
+        {% 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 %}
     </header>
     {% endblock %}

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-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-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);
+    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 & {
         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;
+    }
 }
 
 

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

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

assets/src/components/ACarousel.vue

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