From fba2273a67aa91f7ac4ff7427a905a0087969be6 Mon Sep 17 00:00:00 2001
From: =?utf8?q?Je=CC=81re=CC=81my=20Fabre?= <blackmagik88@gmail.com>
Date: Wed, 27 Jul 2016 16:43:43 +0200
Subject: [PATCH] Implement the page_block style

---
 app/static/src/sass/modules/_all.scss         |  5 +-
 .../modules/{ => boxes}/_article-box.scss     |  0
 .../src/sass/modules/boxes/_page-box.scss     | 66 +++++++++++++++++++
 app/static/src/sass/utils/_mixins.scss        | 14 ++++
 app/templates/pages/includes/page_card.html   | 15 ++++-
 5 files changed, 96 insertions(+), 4 deletions(-)
 rename app/static/src/sass/modules/{ => boxes}/_article-box.scss (100%)
 create mode 100644 app/static/src/sass/modules/boxes/_page-box.scss

diff --git a/app/static/src/sass/modules/_all.scss b/app/static/src/sass/modules/_all.scss
index cca25cef..b82ae6ad 100755
--- 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/boxes/_article-box.scss
similarity index 100%
rename from app/static/src/sass/modules/_article-box.scss
rename to app/static/src/sass/modules/boxes/_article-box.scss
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
index 00000000..81080e31
--- /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 e69de29b..3ad2773c 100755
--- 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 6f79fef7..40bbd8cc 100644
--- 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>
-- 
2.39.5