Skip to content
Permalink
Browse files

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

* PNI - update minimum security standards section on product page
  • Loading branch information
mmmavis committed Jan 6, 2020
1 parent 44929a0 commit 740b4617cad4b6c60ec7f7e8b84a1cc5d2adb0df
@@ -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>
@@ -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>
@@ -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}}">
@@ -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">
@@ -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>
@@ -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 %}
@@ -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()
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
})


@@ -0,0 +1 @@
<svg width="16" height="16" xmlns="http://www.w3.org/2000/svg"><g stroke-width="2" stroke="#000" fill="none" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round"><path d="M14.667 1.333L1.333 14.667M1.334 1.333l13.333 13.334"/></g></svg>
@@ -0,0 +1 @@
<svg width="20" height="19" xmlns="http://www.w3.org/2000/svg"><path d="M10 15l-5.878 3.09 1.123-6.545L.489 6.91l6.572-.955L10 0l2.939 5.955 6.572.955-4.756 4.635 1.123 6.545z" fill="#595CF3" fill-rule="evenodd"/></svg>
@@ -0,0 +1 @@
<svg width="24" height="24" xmlns="http://www.w3.org/2000/svg"><text fill-rule="evenodd" font-family="NunitoSans-SemiBold, Nunito Sans" font-size="22" font-weight="500"><tspan x="7.05" y="20">?</tspan></text></svg>
@@ -0,0 +1 @@
<svg width="22" height="15" xmlns="http://www.w3.org/2000/svg"><g stroke-width="2" stroke="#000" fill="none" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round"><path d="M20.166 1.167L7.67 13.664M7.666 13.667L1.84 7.84"/></g></svg>

This file was deleted.

This file was deleted.

This file was deleted.

@@ -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 {

0 comments on commit 740b461

Please sign in to comment.
You can’t perform that action at this time.