From b462294fdc8dc249e7ec20570641467eed79e266 Mon Sep 17 00:00:00 2001
From: Michael Plunkett <5885605+michplunkett@users.noreply.github.com>
Date: Mon, 17 Jul 2023 13:41:13 -0500
Subject: [PATCH] Center and size officer profile pictures (#974)

## Fixes issue
https://github.com/lucyparsons/OpenOversight/issues/931

## Description of Changes
I centered and addressed sizing issues with the officer profile pictures
in the profile page, officer list page, and officer image page.

## Screenshots (if appropriate)
Located in the comments.

## Tests and linting
 - [x] This branch is up-to-date with the `develop` branch.
 - [x] `pytest` passes on my local development environment.
 - [x] `pre-commit` passes on my local development environment.
---
 .../app/static/css/openoversight.css          | 32 +++++++++++++++++++
 .../app/templates/partials/officer_faces.html |  4 ++-
 OpenOversight/app/templates/tag.html          |  2 +-
 3 files changed, 36 insertions(+), 2 deletions(-)

diff --git a/OpenOversight/app/static/css/openoversight.css b/OpenOversight/app/static/css/openoversight.css
index 91fd01e0d..637f32e29 100644
--- a/OpenOversight/app/static/css/openoversight.css
+++ b/OpenOversight/app/static/css/openoversight.css
@@ -585,10 +585,42 @@ tr:hover .row-actions {
 }
 
 .officer-face {
+    border: none;
     height: 300px;
     margin: auto;
 }
 
+.officer-face.officer-profile {
+    display: block;
+}
+
+@media (min-width: 992px) {
+    .officer-face.officer-profile {
+        height: 510px;
+    }
+}
+
+@media (min-width: 768px) and (max-width: 991px) {
+    .officer-face.officer-profile {
+        height: 590px;
+    }
+}
+
+@media (max-width: 767px) {
+    .officer-face.officer-profile {
+        height: 460px;
+        padding-bottom: 10px;
+    }
+}
+
+#face-img {
+    border: none;
+    display: block;
+    margin: auto;
+    max-height: 500px;
+    padding-bottom: 10px;
+}
+
 .face-wrap {
     margin: auto;
     position: relative;
diff --git a/OpenOversight/app/templates/partials/officer_faces.html b/OpenOversight/app/templates/partials/officer_faces.html
index 130d4d7c7..6e2010609 100644
--- a/OpenOversight/app/templates/partials/officer_faces.html
+++ b/OpenOversight/app/templates/partials/officer_faces.html
@@ -1,6 +1,8 @@
 {% for path in paths %}
   {# Don't try to link if only image is the placeholder #}
   {% if faces %}<a href="{{ url_for('main.display_tag', tag_id=faces[loop.index - 1].id) }}">{% endif %}
-    <img class="officer-face" src="{{ path }}" alt="Submission">
+    <img class="officer-face officer-profile"
+         src="{{ path }}"
+         alt="Submission">
     {% if faces %}</a>{% endif %}
 {% endfor %}
diff --git a/OpenOversight/app/templates/tag.html b/OpenOversight/app/templates/tag.html
index 59304812b..75ed6cf81 100644
--- a/OpenOversight/app/templates/tag.html
+++ b/OpenOversight/app/templates/tag.html
@@ -16,7 +16,7 @@ <h1>Tag {{ face.id }} Detail</h1>
   </div>
   <div class="container">
     <div class="row">
-      <div class="col-sm-12">You can download the full officer photo by clicking the image below:</div>
+      <div class="col-sm-12 text-center">You can download the full officer photo by clicking the image below.</div>
     </div>
     <br>
     <div class="row">