Person page first implementation

diff --git a/app/static/src/sass/modules/_page.scss b/app/static/src/sass/modules/_page.scss
index a7aed2aea1695085df63e0c30e6b58aa528fa59c..88950e0244913240417671fa3bc582fdccf1510e 100644 (file)
--- a/app/static/src/sass/modules/_page.scss
+++ b/app/static/src/sass/modules/_page.scss
@@ -55,6 +55,23 @@ $module: ".page";
 
     }
 
+    &__image-container {
+        background: $color-background;
+        @include transition(all 0.5s ease-in-out);
+        @include margin-bottom(3);
+
+        img {
+            display: block;
+            width: 100%;
+            max-width: 100%;
+            height: auto;
+
+            -webkit-filter: grayscale(1);
+            filter: grayscale(1);
+            mix-blend-mode: screen;
+        }
+    }
+
     &__meta-separator {
 
         height: 1px;

diff --git a/app/static/src/sass/modules/_section-title.scss b/app/static/src/sass/modules/_section-title.scss
index 2095fe5db8aa6e236f929539b9e1050abc800759..63593431edca6dd37bdde36909ef6b6706b87374 100644 (file)
--- a/app/static/src/sass/modules/_section-title.scss
+++ b/app/static/src/sass/modules/_section-title.scss
@@ -65,4 +65,17 @@ $module: ".section-title";
         @include margin-bottom(.5);
     }
 
+    &--big {
+
+        color: $color-main;
+        @include font-size(xxxl);
+        text-transform: none;
+        @include margin-bottom(1);
+
+        &:before {
+            display: none;
+        }
+
+    }
+
 }

diff --git a/app/templates/network/person_detail.html b/app/templates/network/person_detail.html
index 13f0ba3ce3960f92af4b2decb6d238672b9cfe99..fd918a622a603c8122e7ae6cca140e60fd659c8f 100644 (file)
--- a/app/templates/network/person_detail.html
+++ b/app/templates/network/person_detail.html
@@ -22,8 +22,16 @@
 
 {% block page_title %}
     {% editable person.title %}
-        <h1 class="dotted">{{ person.title }}</h1>
+        <h1 class="section-title section-title--big section-title--uppercase section-title--main">{{ person.title }}</h1>
     {% endeditable %}
+
+    {% with person.images.all|get_type:'page_featured' as card_images %}
+        {% if card_images %}
+            <div class="page__image-container">
+                <img style="width:100%;" class="lazyload" src="{{ MEDIA_URL }}{% thumbnail card_images.first 1030 400 top=0.5 %}" alt="person"/>
+            </div>
+        {% endif %}
+    {% endwith %}
 {% endblock %}
 
 {% block page_content %}
@@ -62,15 +70,9 @@
 {% endblock %}
 
 {% block page_sidebar %}
-    {% if person.images.all %}
-        {% with person.images.all|get_type:'page_featured' as images %}
-            {% if images.first %}
-                <figure class="person-list-box__image">
-                    <img src="{{ MEDIA_URL }}{% thumbnail images.first 135 135 top=0.5 %}" alt="person"/>
-                </figure>
-            {% endif %}
-        {% endwith %}
-    {% endif%}
+    <div class="" data-sticky data-sticky-parent="row" data-sticky-offset="100" data-sticky-detach-at="971">
+        {% include "includes/share_buttons.html" %}
+    </div>
 {% endblock %}
 
 {% block page_link %}

diff --git a/app/templates/pages/page.html b/app/templates/pages/page.html
index babe9714c637fafb40d248f828ad120e9e72db35..67d080ad29e7b8f607f2def7e003edb7295ed4a2 100644 (file)
--- a/app/templates/pages/page.html
+++ b/app/templates/pages/page.html
@@ -35,7 +35,7 @@
 
             <div class="row">
 
-                <div class="col-md-3 page__sidebar">
+                <div class="col-md-2 page__sidebar">
 
                     <div style="position: relative;">
                         {% block page_sidebar %}
@@ -44,7 +44,7 @@
 
                 </div>
 
-                <div class="mb2 col-sm-16 col-md-10 page__content" data-summary-content>
+                <div class="mb2 col-sm-16 col-md-12 page__content" data-summary-content>
                     {% block page_content %}
                         {{ page.content }}
                     {% endblock %}