people cards look similar to course cards - CREATED BUG, DO NOT MERGE…

… YET
ProjectTIER · Sep 19, 2018 · 6495b2c · 6495b2c
1 parent 6e75ea4
commit 6495b2c
Show file tree

Hide file tree

Showing 2 changed files with 41 additions and 21 deletions.
diff --git a/project_tier/network/templates/network/includes/person_list.html b/project_tier/network/templates/network/includes/person_list.html
@@ -2,38 +2,42 @@
 
 <section class="block-section">
    <div class="row">
+
     <div class="section-intro small-12">
       <h2 class="section-title">{{group}}</h2>
     </div>
-    <div class="small-12">
-      <ul class="item-list person-list row small-up-1 medium-up-2 large-up-3" data-equalizer>
 
-      {% for person in list %}
-         <li class="column">
-          <a href="/person/{{person.slug}}">
-            <article class="person list-item" data-equalizer-watch>
 
-            {% if person.image %}
-              {% image person.image fill-280x280-c100 as photo %}
-              <img src="{{ photo.url }}" width="{{ photo.width }}" height="{{ photo.height }}" alt="{{ photo.alt }}" class="img-thumbnail" />
+    <div class="course-materials-list row">
+      <div class="body-content">
+      <div class="materials cards">
+
+        {% for person in list %}
 
-            {% else %}
-              <img class="placeholder img-thumbnail" />
+          <div class="card">
+            <a href="/person/{{person.slug}}">
+              {% if person.image %}
+                {% image person.image fill-280x280-c100 as photo %}
+                <img src="{{ photo.url }}" width="{{ photo.width }}" height="{{ photo.height }}" alt="{{ photo.alt }}" class="img-thumbnail" />
 
-            {% endif %}
+              {% else %}
+                <img class="placeholder img-thumbnail" />
 
-            <div class="title text-center">
-              <h2>{{ person.first_name }} {{ person.last_name }}{% if person.academic_title %},<span class="academic-title"> {{ person.academic_title }}</span>{% endif %}</h2>
-              <h4>{{ person.main_job_title }}</h4>
-              <h4>{{ person.affiliation }}</h4>
+              {% endif %}
+            </a>
+
+            <div class="card-divider">
+                <h2>{{ person.first_name }} {{ person.last_name }}{% if person.academic_title %},<span class="academic-title"> {{ person.academic_title }}</span>{% endif %}</h2>
+            </div>
+            <div class="card-section">
+              <p><strong>{{ person.main_job_title }}</strong></p>
+              <p>{{ person.affiliation }}<p>
             </div>
-          </article>
-          </a>
-        </li>
+          </div>
 
-      {% endfor %}
+        {% endfor %}
 
-       </ul>
+      </div>
     </div>
   </div>
 </section>
diff --git a/project_tier/static/css/_people.scss b/project_tier/static/css/_people.scss
@@ -134,3 +134,19 @@ ul.accordion .accordion-content ul li.column::before {
 .people .section-intro {
   margin-top: 20px;
 }
+
+
+.card .img-thumbnail {
+    background-color: $grey;
+    margin: 0 0 20px 0;
+    width: 100%;
+    height: auto;
+    float: none;
+
+    @include breakpoint(medium) {
+        float: left;
+        width: auto;
+        min-width: 280px;
+        min-height: 280px;
+    }
+}