Implement the page_block style

diff --git a/app/static/src/sass/modules/_all.scss b/app/static/src/sass/modules/_all.scss
index cca25cef93985a244de083b133b0f316938c1e96..b82ae6ad03571055d5bf6fbe49f5d94344f28718 100755 (executable)
--- a/app/static/src/sass/modules/_all.scss
+++ b/app/static/src/sass/modules/_all.scss
@@ -4,6 +4,10 @@
 @import "navs/nav-footer";
 @import "navs/nav-tree";
 
+// Boxes
+@import 'boxes/article-box';
+@import 'boxes/page-box';
+
 // Page modules
 @import 'breadcrumb';
 @import 'pagination';
@@ -12,7 +16,6 @@
 @import 'lang-switcher';
 @import 'search';
 @import 'pattern';
-@import 'article-box';
 @import 'tag';
 
 // Typography modules

diff --git a/app/static/src/sass/modules/_article-box.scss b/app/static/src/sass/modules/_article-box.scss
deleted file mode 100644 (file)
index c6d494a..0000000
--- a/app/static/src/sass/modules/_article-box.scss
+++ /dev/null
@@ -1,137 +0,0 @@
-$module: ".article-box";
-
-#{$module} {
-
-    position: relative;
-    background: white;
-    display: block;
-    @include margin-bottom(1);
-    @include transition(all 0.25s ease-in-out);
-
-    &:hover {
-        box-shadow: 0px 0px 14px 0px rgba(0,0,0,0.17);
-        .article-box__image {
-            &:after {
-                border-width: 12px;
-            }
-        }
-    }
-
-    &__header {
-        position: relative;
-    }
-
-    &__image {
-        margin: 0;
-        padding: 0;
-        width: 100%;
-        position: relative;
-
-        img {
-            display: block;
-            width: 100%;
-            max-width: 100%;
-            height: auto;
-        }
-
-        &:after {
-            content: '';
-            display: block;
-            position: absolute;
-            top: 0;
-            left: 0;
-            width: 100%;
-            height: 100%;
-            border-width: 0px;
-            border-color: white;
-            border-style: solid;
-            @include transition(all 0.25s ease-in-out);
-        }
-    }
-
-    &__tags {
-        position: absolute;
-        bottom: 0;
-        left: 0;
-
-        @include margin-bottom(.55);
-    }
-
-    &__btn {
-        position: absolute;
-        bottom: 0;
-        right: 0;
-
-        @include margin-bottom(.5);
-        @include margin-right(.5);
-    }
-
-    &__content {
-        @include padding(.25 .25 1 .25);
-
-        position: relative;
-        height: 250px;
-        overflow: hidden;
-
-        @include mq($until: xs) {
-            height: auto;
-        }
-
-        &:after {
-
-            @include mq($until: xs) {
-                display: none;
-            }
-
-            content: "";
-            display: block;
-            position: absolute;
-            bottom: 0;
-            left: 0;
-            right: 0;
-            height: 100px;
-            background-color: rgba(255,255,255,0);
-            @include filter-gradient(#ffffff, #ffffff, vertical);
-            @include background-image(linear-gradient(top, rgba(255,255,255,0) 0%, rgba(255,255,255,1) 50%));
-        }
-    }
-
-    &__title {
-        @include font-size(xl);
-        @include line-height(1.25);
-        @include typeface(sans-serif);
-        @include margin(0 0 .25 0);
-    }
-
-    &__subtitle {
-        @include font-size(s);
-        @include line-height(.75);
-        @include typeface(serif);
-        @include margin-top(.25);
-        font-weight: weight(regular);
-    }
-
-    &__desc {
-        @include font-size(s);
-        @include line-height(.75);
-        @include typeface(serif);
-        @include margin(1 0 .25 0);
-        font-weight: weight(light);
-    }
-
-    &--small {
-
-        .article-box__content {
-            height: auto;
-            &:after {
-                display: none;
-            }
-        }
-
-        .article-box__btn {
-            display: none;
-        }
-
-    }
-
-}

diff --git a/app/static/src/sass/modules/boxes/_article-box.scss b/app/static/src/sass/modules/boxes/_article-box.scss
new file mode 100644 (file)
index 0000000..c6d494a
--- /dev/null
+++ b/app/static/src/sass/modules/boxes/_article-box.scss
@@ -0,0 +1,137 @@
+$module: ".article-box";
+
+#{$module} {
+
+    position: relative;
+    background: white;
+    display: block;
+    @include margin-bottom(1);
+    @include transition(all 0.25s ease-in-out);
+
+    &:hover {
+        box-shadow: 0px 0px 14px 0px rgba(0,0,0,0.17);
+        .article-box__image {
+            &:after {
+                border-width: 12px;
+            }
+        }
+    }
+
+    &__header {
+        position: relative;
+    }
+
+    &__image {
+        margin: 0;
+        padding: 0;
+        width: 100%;
+        position: relative;
+
+        img {
+            display: block;
+            width: 100%;
+            max-width: 100%;
+            height: auto;
+        }
+
+        &:after {
+            content: '';
+            display: block;
+            position: absolute;
+            top: 0;
+            left: 0;
+            width: 100%;
+            height: 100%;
+            border-width: 0px;
+            border-color: white;
+            border-style: solid;
+            @include transition(all 0.25s ease-in-out);
+        }
+    }
+
+    &__tags {
+        position: absolute;
+        bottom: 0;
+        left: 0;
+
+        @include margin-bottom(.55);
+    }
+
+    &__btn {
+        position: absolute;
+        bottom: 0;
+        right: 0;
+
+        @include margin-bottom(.5);
+        @include margin-right(.5);
+    }
+
+    &__content {
+        @include padding(.25 .25 1 .25);
+
+        position: relative;
+        height: 250px;
+        overflow: hidden;
+
+        @include mq($until: xs) {
+            height: auto;
+        }
+
+        &:after {
+
+            @include mq($until: xs) {
+                display: none;
+            }
+
+            content: "";
+            display: block;
+            position: absolute;
+            bottom: 0;
+            left: 0;
+            right: 0;
+            height: 100px;
+            background-color: rgba(255,255,255,0);
+            @include filter-gradient(#ffffff, #ffffff, vertical);
+            @include background-image(linear-gradient(top, rgba(255,255,255,0) 0%, rgba(255,255,255,1) 50%));
+        }
+    }
+
+    &__title {
+        @include font-size(xl);
+        @include line-height(1.25);
+        @include typeface(sans-serif);
+        @include margin(0 0 .25 0);
+    }
+
+    &__subtitle {
+        @include font-size(s);
+        @include line-height(.75);
+        @include typeface(serif);
+        @include margin-top(.25);
+        font-weight: weight(regular);
+    }
+
+    &__desc {
+        @include font-size(s);
+        @include line-height(.75);
+        @include typeface(serif);
+        @include margin(1 0 .25 0);
+        font-weight: weight(light);
+    }
+
+    &--small {
+
+        .article-box__content {
+            height: auto;
+            &:after {
+                display: none;
+            }
+        }
+
+        .article-box__btn {
+            display: none;
+        }
+
+    }
+
+}

diff --git a/app/static/src/sass/modules/boxes/_page-box.scss b/app/static/src/sass/modules/boxes/_page-box.scss
new file mode 100644 (file)
index 0000000..81080e3
--- /dev/null
+++ b/app/static/src/sass/modules/boxes/_page-box.scss
@@ -0,0 +1,66 @@
+$module: ".page-box";
+
+#{$module} {
+
+    position: relative;
+    width: 100%;
+    display: block;
+
+    @include margin-bottom(1);
+
+    &__image {
+
+        @include fluid-aspect(9 4, "img");
+
+        &:after {
+            content: '';
+            display: block;
+            position: absolute;
+            top: 0;
+            left: 0;
+            width: 100%;
+            height: 100%;
+
+            background: rgba(0, 0, 0, 0.4);
+            @include transition(all 0.25s ease-in-out);
+        }
+
+    }
+
+    &__content {
+
+        position: absolute;
+        top: 0;
+        left: 0;
+        width: 100%;
+        height: 100%;
+
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        text-align: center;
+
+        @include padding(1);
+
+    }
+
+    &__title {
+
+        color: $color-main;
+        font-weight: weight(heavy);
+
+        @include margin(0 0 1 0);
+
+    }
+
+    &__subtitle {
+
+        color: white;
+        font-weight: weight(bold);
+
+        @include font-size(m);
+        @include margin(0 0 1 0);
+
+    }
+
+}

diff --git a/app/static/src/sass/utils/_mixins.scss b/app/static/src/sass/utils/_mixins.scss
index e69de29bb2d1d6434b8b29ae775ad8c2e48c5391..3ad2773c93d1e502656c9922b97a74d85bb026ea 100755 (executable)
--- a/app/static/src/sass/utils/_mixins.scss
+++ b/app/static/src/sass/utils/_mixins.scss
@@ -0,0 +1,14 @@
+@mixin fluid-aspect($ratio: 1 1, $selector: "> :first-child") {
+       $selector: unquote($selector);
+
+       padding-bottom: percentage(nth($ratio, 2) / nth($ratio, 1));
+       position: relative;
+
+       #{$selector} {
+               left: 0;
+               height: 100%;
+               position: absolute;
+               top: 0;
+               width: 100%;
+       }
+}

diff --git a/app/templates/pages/includes/page_card.html b/app/templates/pages/includes/page_card.html
index 6f79fef73878482bad2ec381b60d17bcf9beb655..40bbd8ccc2fc1b6d2ca1844912f0566edbf9b2eb 100644 (file)
--- a/app/templates/pages/includes/page_card.html
+++ b/app/templates/pages/includes/page_card.html
@@ -1,4 +1,13 @@
-<a href="{{ object.get_absolute_url }}" title="{{ object.title }}">
-    {{ object.title }}
-    {{ object.basicpage.sub_title }}
+<a href="{{ object.get_absolute_url }}" title="{{ object.title }}" class="page-box">
+    <div class="page-box__image">
+        <img src="//placehold.it/900x400" />
+    </div>
+    <div class="page-box__content">
+        <div>
+            <h2 class="page-box__title">{{ object.title }}</h2>
+            <div class="page-box__subtitle">
+                {{ object.basicpage.sub_title }}
+            </div>
+        </div>
+    </div>
 </a>