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.

Sign up for GitHub

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

PNI - update minimum security standards section on product page #4088

Merged
merged 11 commits into from
Jan 6, 2020
Merged

PNI - update minimum security standards section on product page #4088

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
11 commits
Select commit Hold shift + click to select a range
a2be846
PNI - update minimum security standards section on product page
mmmavis Dec 19, 2019
386c29f
Merge branch 'master' into issue-4041-pni-mms
mmmavis Dec 19, 2019
84a03fd
add icon for unknown
mmmavis Dec 19, 2019
45bbac6
remove extra code
mmmavis Dec 19, 2019
559f964
forgot to attach an image file
mmmavis Dec 19, 2019
477547a
svgo'ed image
mmmavis Dec 19, 2019
bddbf39
styling changes
mmmavis Dec 19, 2019
face3cd
code improvement
mmmavis Dec 20, 2019
b39923c
fix padding
mmmavis Dec 20, 2019
6cdd94c
Merge branch 'master' into issue-4041-pni-mms
mmmavis Jan 3, 2020
7ce3ea4
Merge branch 'master' into issue-4041-pni-mms
mmmavis Jan 6, 2020
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
2 changes: 1 addition & 1 deletion network-api/networkapi/buyersguide/templates/fragments/product_criterion.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
{% if value != hide_value %}
<div class="criterion value-{{value|lower}}">
{% include "./product_criterion_primary_info.html" with label=label value=value %}
{% include "./product_criterion_primary_info.html" with show_value_as_symbol=show_value_as_symbol label=label value=value %}

{% if help != None and help != "" %}
<div class="helptext">{{ help }}</div>
Expand Down
8 changes: 8 additions & 0 deletions network-api/networkapi/buyersguide/templates/fragments/product_criterion_primary_info.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,11 +6,19 @@
<div class="rating">
<span><strong>
{% if value == "U" %}
{% if show_value_as_symbol %}
<img src="/_images/buyers-guide/score/icon-unknown.svg" alt="{{value}}">
{% else %}
Unknown
{% endif %}
{% elif value == "NA" %}
N/A
{% else %}
{% if show_value_as_symbol %}
<img src="/_images/buyers-guide/score/icon-{{value|lower}}.svg" alt="{{value}}">
{% else %}
{{ value }}
{% endif %}
{% endif %}
</strong></span>
</div>
Expand Down
35 changes: 17 additions & 18 deletions network-api/networkapi/buyersguide/templates/product_page.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -31,7 +31,7 @@
</div>
</div>

{% with section_class="col-12 col-lg-10 offset-lg-1 product-section-padding-x" %}
{% with section_class="col-12 col-lg-10 offset-lg-1" %}
<div class="container">
<div class="row">
<div class="product-detail bg-white py-3 py-md-4 px-md-5 {{section_class}}">
Expand All @@ -47,20 +47,12 @@ <h2 class="h1-heading col-md-10">{{product.name}}</h2>
<div class="body-large mb-2 mb-md-4 col-12">{{product.blurb}}</div>
</div>

<div class="minimum-security">
<div class="criterion bottom-border-only">
<div class="minimum-security row py-5 px-3 px-md-5">
<div class="criterion bottom-border-only py-0 col-12">
<div class="d-block primary-info">
<div class="d-flex justify-content-between">
<div class="d-flex flex-column flex-md-row justify-content-md-between w-100">
<h3 class="h3-heading mb-0 mb-md-3">Minimum Security Standards</h3>

<div class="d-flex rating my-2">
<span class="star value-{{ product.uses_encryption|lower}}">&nbsp;</span>
<span class="star value-{{ product.security_updates|lower }}">&nbsp;</span>
<span class="star value-{{ product.strong_password|lower }}">&nbsp;</span>
<span class="star value-{{ product.manage_vulnerabilities|lower }}">&nbsp;</span>
<span class="star value-{{ product.privacy_policy|lower }}">&nbsp;</span>
</div>
<h3 class="h3-heading">Minimum Security Standards</h3>
</div>
</div>
<div class="primary-info-description mb-3">
Expand All @@ -72,11 +64,18 @@ <h3 class="h3-heading mb-0 mb-md-3">Minimum Security Standards</h3>
</div>

<div class="details mt-2">
{% include "fragments/product_criterion.html" with value=product.uses_encryption help=product.uses_encryption_helptext label="Encryption" %}
{% include "fragments/product_criterion.html" with value=product.security_updates help=product.security_updates_helptext label="Security updates" %}
{% include "fragments/product_criterion.html" with value=product.strong_password help=product.strong_password_helptext label="Strong password" %}
{% include "fragments/product_criterion.html" with value=product.manage_vulnerabilities help=product.manage_vulnerabilities_helptext label="Manages vulnerabilities" %}
{% include "fragments/product_criterion.html" with value=product.privacy_policy help=product.privacy_policy_helptext label="Privacy policy" %}
<div class="criterion rating">
{% include "fragments/product_criterion_primary_info.html" with label="Overall Security Rating" %}
<div>
<span class="security-score mb-0">{{security_score}}</span><span class="full-security-score mb-0">/{{full_security_score}}</span>
<img src="/_images/buyers-guide/score/icon-star.svg" width="20" height="20" alt="star">
</div>
</div>
{% include "fragments/product_criterion.html" with show_value_as_symbol=True value=product.uses_encryption help=product.uses_encryption_helptext label="Encryption" %}
{% include "fragments/product_criterion.html" with show_value_as_symbol=True value=product.security_updates help=product.security_updates_helptext label="Security updates" %}
{% include "fragments/product_criterion.html" with show_value_as_symbol=True value=product.strong_password help=product.strong_password_helptext label="Strong password" %}
{% include "fragments/product_criterion.html" with show_value_as_symbol=True value=product.manage_vulnerabilities help=product.manage_vulnerabilities_helptext label="Manages vulnerabilities" %}
{% include "fragments/product_criterion.html" with show_value_as_symbol=True value=product.privacy_policy help=product.privacy_policy_helptext label="Privacy policy" %}
</div>
</div>
</div>
Expand Down Expand Up @@ -133,7 +132,7 @@ <h3 class="body mb-2">How to contact the company</h3>
<div class="row dotted-section d-block d-sm-flex mx-0">
<div class="container">
<div class="row">
<div class="{{section_class}} mt-5 pt-3 bg-white">
<div class="{{section_class}} mt-5 pt-3 bg-white product-section-padding-x">
{% if product.updates|length > 0 or coralTalkServerUrl %}
<h3 class="h2-heading mb-4 mb-md-5">Updates</h3>
{% endif %}
Expand Down
22 changes: 21 additions & 1 deletion network-api/networkapi/buyersguide/views.py
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -117,12 +117,32 @@ def product_view(request, slug):
if product.draft and not request.user.is_authenticated:
raise Http404("Product does not exist")

product_dict = product.to_dict()
Copy link
Contributor

Choose a reason for hiding this comment

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

this has tripped me up so much in the past =D

criteria = [
'uses_encryption',
'security_updates',
'strong_password',
'manage_vulnerabilities',
'privacy_policy',
]
total_score = 0
num_criteria = len(criteria)

for i in range(num_criteria):
value = product_dict[criteria[i]]
if value == 'Yes':
total_score += 1
if value == 'NA':
total_score += 0.5

return render(request, 'product_page.html', {
'categories': BuyersGuideProductCategory.objects.all(),
'product': product.to_dict(),
'product': product_dict,
'mediaUrl': MEDIA_URL,
'coralTalkServerUrl': settings.CORAL_TALK_SERVER_URL,
'pageTitle': f'*privacy not included - {product.name}',
'security_score': total_score,
'full_security_score': num_criteria
})


Expand Down
1 change: 1 addition & 0 deletions source/images/buyers-guide/score/icon-no.svg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
1 change: 1 addition & 0 deletions source/images/buyers-guide/score/icon-star.svg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
1 change: 1 addition & 0 deletions source/images/buyers-guide/score/icon-unknown.svg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
1 change: 1 addition & 0 deletions source/images/buyers-guide/score/icon-yes.svg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
1 change: 0 additions & 1 deletion source/images/buyers-guide/stars/black.svg
View file
Open in desktop

This file was deleted.

1 change: 0 additions & 1 deletion source/images/buyers-guide/stars/empty.svg
View file
Open in desktop

This file was deleted.

1 change: 0 additions & 1 deletion source/images/buyers-guide/stars/half.svg
View file
Open in desktop

This file was deleted.

68 changes: 43 additions & 25 deletions source/sass/buyers-guide/views/product.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -164,45 +164,63 @@ $product-detail-padding-x: (
}

.minimum-security {
.rating {
.star {
display: inline-block;
width: 1em;
margin-right: 2px;
color: transparent;
background-size: contain;
background-repeat: no-repeat;

&.value-yes {
order: 1;
background-image: url(/_images/buyers-guide/stars/black.svg);
}
background: $gray-05;

&.value-na {
order: 2;
background-image: url(/_images/buyers-guide/stars/half.svg);
}
h3 {
$badge-width-mobile: 40px;
$badge-width: 30px;

position: relative;
padding-left: calc(#{$badge-width-mobile} + 8px);

&.value-no,
&.value-u {
order: 3;
background-image: url(/_images/buyers-guide/stars/empty.svg);
@media (min-width: $bp-md) {
padding-left: calc(#{$badge-width} + 6px);
}

&:before {
content: "";
position: absolute;
top: 0;
left: 0;
background: url("/_images/buyers-guide/badge-star-mini.svg") center /
contain no-repeat;
width: $badge-width-mobile;
height: 100%;

@media (min-width: $bp-md) {
width: $badge-width;
}
}
}

.criterion .criterion:last-child {
.criterion:last-child {
border-bottom: none;
}

.rating {
.security-score {
@include heading("Zilla Slab", 300, 0, $black, $white);
@include scaleText(40px, 46px);
}

.full-security-score {
@include heading("Zilla Slab", 300, 0, $black, $white);
@include scaleText(20px, 46px);
}
}
}

.criterion {
padding: 1rem 0;

&:not(.no-border) {
border-top: 1px solid $gray-20;
border-bottom: 1px solid $gray-20;
margin-top: -1px;
border-color: $gray-20;
border-style: solid;
border-width: 1px 0 0 0;

&:last-child {
border-bottom-width: 1px;
}
}

&.bottom-border-only {
Expand Down