Add person list circle and square

diff --git a/app/static/src/sass/modules/_all.scss b/app/static/src/sass/modules/_all.scss
index 626043b4f1a431ac8786cbb97373bf596b4e6f76..ba59dbaa28600ebedf4a34a6f9af5c8c5d1564f1 100755 (executable)
--- a/app/static/src/sass/modules/_all.scss
+++ b/app/static/src/sass/modules/_all.scss
@@ -12,6 +12,7 @@
 @import 'boxes/article-box';
 @import 'boxes/page-box';
 @import 'boxes/brief-box';
+@import 'boxes/person-list-box';
 
 // Sliders
 @import 'sliders/slider-page';

diff --git a/app/static/src/sass/modules/boxes/_article-box.scss b/app/static/src/sass/modules/boxes/_article-box.scss
index 9208b02a3b2ae88cba1cc3c3161203b203574615..ad217b8c34cce11ac745332379184b6f5bd7755e 100644 (file)
--- a/app/static/src/sass/modules/boxes/_article-box.scss
+++ b/app/static/src/sass/modules/boxes/_article-box.scss
@@ -144,4 +144,67 @@ $module: ".article-box";
         }
     }
 
+    &--person {
+
+        @include margin-top(2);
+        position: relative;
+
+        &:after {
+
+            content: "";
+            display: block;
+            height: 1px;
+            width: 100%;
+            background: #979797;
+            position: absolute;
+            bottom: -24px;
+            left: 0;
+            right: 0;
+
+        }
+
+        #{$module}__title {
+
+            @include font-size(xl);
+            @include line-height(1.25);
+            @include typeface(sans-serif);
+            @include margin(.25 0 .25 0);
+            font-weight: weight(heavy);
+
+        }
+
+        #{$module}__desc {
+            @include line-height(1);
+        }
+
+        #{$module}__content {
+
+            height: 350px;
+
+            @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%));
+            }
+
+        }
+
+    }
+
 }

diff --git a/app/static/src/sass/modules/boxes/_person-list-box.scss b/app/static/src/sass/modules/boxes/_person-list-box.scss
new file mode 100644 (file)
index 0000000..bb8f602
--- /dev/null
+++ b/app/static/src/sass/modules/boxes/_person-list-box.scss
@@ -0,0 +1,29 @@
+$module: ".person-list-box";
+
+#{$module} {
+
+    position: relative;
+    @include margin-top(2);
+    @include margin-bottom(1);
+
+    &__image {
+
+        @include mq($until: xs) {
+
+            margin: 0;
+            @include margin-bottom(1);
+
+        }
+
+        margin: 0 auto;
+        width: 135px;
+        height: 135px;
+        border-radius: 135px;
+
+        img {
+            border-radius: 135px;
+        }
+
+    }
+
+}

diff --git a/app/templates/network/inc/person/list_circle_style.html b/app/templates/network/inc/person/list_circle_style.html
index 12c5094008a4c02563574a2b64850744855e24df..5a4e7ee75d081541b5c659561824d05f3b9d0cfc 100644 (file)
--- a/app/templates/network/inc/person/list_circle_style.html
+++ b/app/templates/network/inc/person/list_circle_style.html
@@ -1,27 +1,84 @@
-{% load organization_tags mezzanine_tags %}
-<h3>{{ person_list_block.title }}</h3>
-{% if person_list_block.description %}
-<p>{{ person_list_block.description }}</p>
+{% load organization_tags mezzanine_tags i18n %}
+{% if person_list_block.title %}
+
+    <div class="white-bg pb2">
+
+        <hr class="mt0" />
+        <div class="container">
+
+            <div class="row">
+
+                <div class="col-sm-9 col-sm-push-3 col-lg-8 col-lg-push-2">
+
+                    <h2 class="dotted">{{ person_list_block.title }}</h2>
+                    {% if person_list_block.description %}
+                        <p>{{ person_list_block.description }}</p>
+                    {% endif %}
+
+                </div>
+
+            </div>
+
+        </div>
+
+        <div class="container">
+
+            <div class="row">
+
+                <div class="col-sm-9 col-sm-push-3 col-lg-8 col-lg-push-2">
+
+                    {% for person_list_block_inline in person_list_block.person_list_block_inlines.all %}
+                        {% with person_list_block_inline.person as person %}
+
+                            <div class="row">
+
+                                <div class="person-list-box">
+
+                                    <div class="col-lg-3 col-md-3 col-sm-3 col-xs-3 tac">
+
+                                        <a href="{{ person.get_absolute_url }}" title="{{ person }}">
+                                            <figure class="person-list-box__image">
+
+                                                {% with person.images.all|get_type:'card' as card_images %}
+                                                    {% if card_images %}
+                                                        <img src="{{ MEDIA_URL }}{% thumbnail card_images.first 135 135 top=0.5 %}" alt="person"/>
+                                                    {% endif %}
+                                                {% endwith %}
+
+                                            </figure>
+                                        </a>
+
+                                    </div>
+
+                                    <div class="col-lg-9 col-md-9 col-sm-9 col-xs-9">
+
+                                        <h3 class="mt0 fsxl">{{ person }}</h3>
+
+                                        {% if person.description %}
+                                            <p class="fss">{{ person.description|slice:":255" }}</p>
+                                        {% endif %}
+                                        <a href="{{ person.get_absolute_url }}" class="button button--small button--white">{% trans "resume" %}</a>
+                                        {% for link in person.links.all %}
+                                            {% if link %}
+                                                <a href="{{ link }}" title="Site Web" class="button button--small"><i class="fa fa-{{ link.link_type.name }}"></i> {{ link.link_type.name }}</a>
+                                            {% endif %}
+                                        {% endfor %}
+
+                                    </div>
+
+                                </div>
+
+                            </div>
+
+                        {% endwith %}
+                    {% endfor %}
+
+                </div>
+
+            </div>
+
+        </div>
+
+    </div>
+
 {% endif %}
-  {% for person_list_block_inline in person_list_block.person_list_block_inlines.all %}
-    {% with person_list_block_inline.person as person %}
-      <a href="{{ person.get_absolute_url }}" title="{{ person }}">
-        {% with person.images.all|get_type:'card' as card_images %}
-          {% if card_images %}
-          <img src="{{ MEDIA_URL }}{% thumbnail card_images.first 135 135 top=0.5 %}" alt="person"/>
-          {% endif %}
-        {% endwith %}
-      </a>
-      <a href="{{ person.get_absolute_url }}" title="{{ person }}">
-        <h4>{{ person }}</h4>
-      </a>
-      {% if person.description %}
-      <p>{{ person.description|slice:":255" }}</p>
-      {% endif %}
-      {% with person.links.first as link %}
-        {% if link %}
-          <a href="{{ link }}" title="Site Web" class="fa fa-{{ link.link_type.name }}">{{ link.link_type.name }}</a>
-        {% endif %}
-      {% endwith %}
-    {% endwith %}
-  {% endfor %}

diff --git a/app/templates/network/inc/person/list_square_style.html b/app/templates/network/inc/person/list_square_style.html
index 4c3df857adeeb3d97a14635d852749542d16ce3d..8b19168719cb065532b7e2e23baa138eea80ec4d 100644 (file)
--- a/app/templates/network/inc/person/list_square_style.html
+++ b/app/templates/network/inc/person/list_square_style.html
@@ -1,22 +1,68 @@
 {% load organization_tags mezzanine_tags %}
-<h3>{{ person_list_block.title }}</h3>
-{% if person_list_block.description %}
-<p>{{ person_list_block.description }}</p>
+{% if person_list_block.title %}
+
+    <div class="white-bg pb2">
+
+        <hr class="mt0" />
+        <div class="container">
+
+            <div class="row">
+
+                <div class="col-sm-9 col-sm-push-3 col-lg-8 col-lg-push-2">
+
+                    <h2 class="dotted">{{ person_list_block.title }}</h2>
+                    {% if person_list_block.description %}
+                        <p>{{ person_list_block.description }}</p>
+                    {% endif %}
+
+                </div>
+
+            </div>
+
+        </div>
+
+        <div class="container-fluid">
+
+            <div class="row tac">
+
+                {% for person_list_block_inline in person_list_block.person_list_block_inlines.all %}
+
+                    <div class="col-lg-2 col-md-3 col-sm-4 col-xs-6">
+
+                        <a href="{{ person.get_absolute_url }}" title="{{ person }}" class="article-box article-box--person" >
+                            {% with person_list_block_inline.person as person %}
+
+                                    {% with person.images.all|get_type:'card' as card_images %}
+                                        {% if card_images %}
+                                            <div class="article-box__header">
+                                                <figure class="article-box__image">
+                                                    <img class="lazyload" src="{{ MEDIA_URL }}{% thumbnail card_images.first 427 500 top=0.5 %}" alt="person"/>
+                                                </figure>
+                                            </div>
+                                        {% endif %}
+                                    {% endwith %}
+
+                                    <div class="article-box__content tal">
+
+                                        <h3 class="article-box__title">{{ person }}</h3>
+
+                                        {% if person.description %}
+                                            <div class="article-box__desc">{{ person.description|slice:":255" }}</div>
+                                        {% endif %}
+
+                                    </div>
+
+                            {% endwith %}
+                        </a>
+
+                    </div>
+
+                {% endfor %}
+
+            </div>
+
+        </div>
+
+    </div>
+
 {% endif %}
-  {% for person_list_block_inline in person_list_block.person_list_block_inlines.all %}
-    {% with person_list_block_inline.person as person %}
-      <a href="{{ person.get_absolute_url }}" title="{{ person }}">
-        {% with person.images.all|get_type:'card' as card_images %}
-          {% if card_images %}
-          <img src="{{ MEDIA_URL }}{% thumbnail card_images.first 323 380 top=0.5 %}" alt="person"/>
-          {% endif %}
-        {% endwith %}
-      </a>
-      <a href="{{ person.get_absolute_url }}" title="{{ person }}">
-        <h4>{{ person }}</h4>
-      </a>
-      {% if person.description %}
-      <p>{{ person.description|slice:":255" }}</p>
-      {% endif %}
-    {% endwith %}
-  {% endfor %}