From f9ee8ecf16f35979910deecd5ffde029d4033e9c Mon Sep 17 00:00:00 2001
From: Zak Timson <zaktimson@gmail.com>
Date: Tue, 24 Oct 2017 00:11:16 -0400
Subject: [PATCH] Mobile friendly expert viewer

---
 expert_witnesses/templates/expertViewer.html | 25 +++++++++++++-------
 1 file changed, 17 insertions(+), 8 deletions(-)

diff --git a/expert_witnesses/templates/expertViewer.html b/expert_witnesses/templates/expertViewer.html
index ea6ea1d..3c59570 100644
--- a/expert_witnesses/templates/expertViewer.html
+++ b/expert_witnesses/templates/expertViewer.html
@@ -2,12 +2,12 @@
 
 {% block head %}
     <script>
-    $(function() {
-        $('tr').click(function(e) {
-            var url = $(e.target).parent().attr('href');
-            if(url) window.open(url, '_blank');
+        $(function () {
+            $('tr').click(function (e) {
+                var url = $(e.target).parent().attr('href');
+                if (url) window.open(url, '_blank');
+            });
         });
-    });
     </script>
 {% endblock %}
 
@@ -15,7 +15,7 @@
     <div class="container-fluid bg-light-blue">
         <div class="container">
             <div class="row">
-                <div class="col-9 py-3">
+                <div class="col-xs-12 col-md-9 py-3">
                     <div>
                         <h3>{{ expert.name }}</h3>
                         {% if expert.institute %}
@@ -24,6 +24,14 @@
                             <span class="text-muted"><i class="fa fa-institution"></i> No Institute</span>
                         {% endif %}
                     </div>
+                    <div class="d-md-none mt-5">
+                        <h5 class="ml-1">Expertise</h5>
+                        <ul class="pl-0" style="list-style: none">
+                            {% for e in expert.expertise.all %}
+                                <li><i class="fa fa-graduation-cap" aria-hidden="true"></i> {{ e.field }}</li>
+                            {% endfor %}
+                        </ul>
+                    </div>
                     <div class="mt-5">
                         <h5 class="ml-1">Cases</h5>
                         <table class="table {% if perms.case_law.view_pdf %}table-hover{% endif %} bg-white">
@@ -35,7 +43,8 @@
                             </thead>
                             <tbody>
                             {% for case in expert.cases.all %}
-                                <tr {% if perms.case_law.view_pdf %}class="curs-pointer" href="/media/{{ case.pdf }}"{% endif %}>
+                                <tr {% if perms.case_law.view_pdf %}class="curs-pointer"
+                                    href="/media/{{ case.pdf }}"{% endif %}>
                                     <td class="p-2">{{ case.synopsis }}</td>
                                     <td class="p-2" width="150px">{{ case.published }}</td>
                                 </tr>
@@ -49,7 +58,7 @@
                         </table>
                     </div>
                 </div>
-                <div class="col-3 bg-dark-primary text-white py-3">
+                <div class="d-none d-md-block col-3 bg-dark-primary text-white py-3">
                     <h5>Areas of Expertise</h5>
                     <ul class="pl-0" style="list-style: none">
                         {% for e in expert.expertise.all %}