Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Center and size officer profile pictures #974

Merged
merged 7 commits into from
Jul 17, 2023
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
32 changes: 32 additions & 0 deletions OpenOversight/app/static/css/openoversight.css
Original file line number Diff line number Diff line change
Expand Up @@ -585,10 +585,42 @@ tr:hover .row-actions {
}

.officer-face {
border: none;
Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Before:
Screenshot 2023-07-14 at 11 54 51 AM

After:
Screenshot 2023-07-14 at 11 32 15 AM

height: 300px;
margin: auto;
}

.officer-face.officer-profile {
display: block;
}
Comment on lines +593 to +595
Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Before:
Screenshot 2023-07-14 at 11 56 45 AM

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

this looks as a great way to show the problem in a way that the "before" screenshot didn't above.


@media (min-width: 992px) {
.officer-face.officer-profile {
height: 510px;
}
}
Comment on lines +597 to +601
Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Screenshot 2023-07-14 at 12 02 57 PM


@media (min-width: 768px) and (max-width: 991px) {
.officer-face.officer-profile {
height: 590px;
}
}
Comment on lines +603 to +607
Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Screenshot 2023-07-14 at 12 06 04 PM


@media (max-width: 767px) {
.officer-face.officer-profile {
height: 460px;
padding-bottom: 10px;
}
}
Comment on lines +609 to +614
Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Screenshot 2023-07-14 at 12 06 39 PM


#face-img {
border: none;
display: block;
margin: auto;
max-height: 500px;
padding-bottom: 10px;
}
Comment on lines +616 to +622
Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Before:
Screenshot 2023-07-14 at 11 54 40 AM

After:
Screenshot 2023-07-14 at 11 50 27 AM


.face-wrap {
margin: auto;
position: relative;
Expand Down
4 changes: 3 additions & 1 deletion OpenOversight/app/templates/partials/officer_faces.html
Original file line number Diff line number Diff line change
@@ -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 %}
2 changes: 1 addition & 1 deletion OpenOversight/app/templates/tag.html
Original file line number Diff line number Diff line change
Expand Up @@ -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">
Expand Down