Use breach card everywhere.
This commit is contained in:
Lesley Norton
Родитель
5323e5670b
Коммит
ab6a7e6b96
|
|
@ -505,3 +505,5 @@ remove-fxm-blurb= Turn off {-product-name} alerts. Your {-brand-fxa} will remain
|
|||
|
||||
|
||||
manage-email-addresses= Manage Email Addresses
|
||||
|
||||
latest-breach-link= See if you were in this breach
|
||||
|
|
|
|||
|
|
@ -18,34 +18,10 @@
|
|||
margin: auto auto var(--margin) 0;
|
||||
}
|
||||
|
||||
.breach-card {
|
||||
display: flex;
|
||||
border-radius: var(--radius);
|
||||
color: var(--color);
|
||||
overflow: hidden;
|
||||
margin: 0.5rem;
|
||||
box-shadow: 0 0 10px 1px rgba(0, 0, 0, 0);
|
||||
transform: scale(1);
|
||||
}
|
||||
|
||||
.breach-card:hover {
|
||||
box-shadow: 0 0 10px 1px rgba(144, 140, 167, 0.349);
|
||||
transform: scale(1.01);
|
||||
}
|
||||
|
||||
.breach-card,
|
||||
.breach-card:hover {
|
||||
transition: all 0.1s ease-in-out;
|
||||
}
|
||||
|
||||
.breach-filter span {
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
a.breach-card:hover {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
/* fixed-filters */
|
||||
.fixed-filters {
|
||||
display: flex;
|
||||
|
|
@ -202,41 +178,10 @@ svg.plus-sign path,
|
|||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.breach-card-title-wrapper {
|
||||
padding: var(--margin) var(--padding);
|
||||
justify-content: space-between;
|
||||
align-content: center;
|
||||
}
|
||||
|
||||
.breach-info-wrapper {
|
||||
height: 100%;
|
||||
justify-content: space-between;
|
||||
padding: var(--margin) var(--padding) var(--padding) var(--padding);
|
||||
background-color: rgba(255, 255, 255, 1);
|
||||
}
|
||||
|
||||
img.breach-logo {
|
||||
max-height: 1.15rem;
|
||||
max-width: 3rem;
|
||||
}
|
||||
|
||||
.demi.key {
|
||||
color: var(--color);
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
|
||||
.breach-title {
|
||||
color: rgba(255, 255, 255, 1);
|
||||
margin: auto auto auto 0;
|
||||
}
|
||||
|
||||
.breach-card-link-wrap {
|
||||
padding-top: 1rem;
|
||||
}
|
||||
|
||||
/* breach-card colors */
|
||||
|
||||
.all-breaches-wrapper {
|
||||
.all-breaches-wrapper,
|
||||
.found-breaches {
|
||||
--website: var(--blue);
|
||||
--websiteDark: #4439dd;
|
||||
--dataAggregator: goldenrod;
|
||||
|
|
@ -345,13 +290,6 @@ img.breach-logo {
|
|||
background-color: var(--unverifiedDark) !important;
|
||||
}
|
||||
|
||||
/* three-up */
|
||||
|
||||
.three-up {
|
||||
flex: 1 1 30%;
|
||||
min-width: 260px;
|
||||
}
|
||||
|
||||
.breach-card.hide {
|
||||
width: 0;
|
||||
max-width: 0;
|
||||
|
|
@ -362,19 +300,7 @@ img.breach-logo {
|
|||
animation: hide 0.15s ease-in-out forwards;
|
||||
}
|
||||
|
||||
@media screen and (max-width: 1000px) {
|
||||
.three-up {
|
||||
max-width: 48%;
|
||||
flex: 1 1 48%;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 800px) {
|
||||
.three-up {
|
||||
max-width: 100%;
|
||||
flex: 1 1 100%;
|
||||
}
|
||||
|
||||
.fixed-filters {
|
||||
flex-direction: column;
|
||||
padding: var(--padding);
|
||||
|
|
|
|||
|
|
@ -103,7 +103,7 @@ h3 {
|
|||
|
||||
.big-headline {
|
||||
font-size: var(--bigHeadline);
|
||||
font-weight: 500;
|
||||
font-weight: 700;
|
||||
margin: auto;
|
||||
}
|
||||
|
||||
|
|
@ -356,6 +356,18 @@ ul li {
|
|||
color: rgba(255, 255, 255, 1);
|
||||
}
|
||||
|
||||
.drop-shadow {
|
||||
transform: scale(1);
|
||||
box-shadow: 1px 1px 10px #4444440e;
|
||||
transition: box-shadow 0.15s ease-in-out, transform 0.15s ease-in-out;
|
||||
}
|
||||
|
||||
.drop-shadow:hover {
|
||||
transform: scale(1.01);
|
||||
box-shadow: 1px 1px 10px rgba(0, 0, 0, 0.2);
|
||||
transition: box-shadow 0.15s ease-in-out, transform 0.15s ease-in-out;
|
||||
}
|
||||
|
||||
/* SPRITES */
|
||||
div.sprite {
|
||||
background-repeat: no-repeat !important;
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
.article-list-container {
|
||||
padding: 1rem 0 2rem;
|
||||
padding: calc(var(--padding) * 2) 0 calc(var(--padding) * 3) 0;
|
||||
color: rgba(255, 255, 255, 1);
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -1,3 +1,73 @@
|
|||
.breach-card {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
border-radius: var(--radius);
|
||||
color: var(--color);
|
||||
overflow: hidden;
|
||||
margin: 0.5rem;
|
||||
transform: scale(1);
|
||||
}
|
||||
|
||||
a.breach-card:focus,
|
||||
a.latest-breach-link {
|
||||
border: none;
|
||||
outline: none;
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
.breach-card-title-wrapper {
|
||||
padding: var(--margin) var(--padding);
|
||||
justify-content: space-between;
|
||||
align-content: center;
|
||||
}
|
||||
|
||||
.breach-info-wrapper {
|
||||
height: 100%;
|
||||
justify-content: space-between;
|
||||
padding: var(--margin) var(--padding) var(--padding) var(--padding);
|
||||
background-color: rgba(255, 255, 255, 1);
|
||||
}
|
||||
|
||||
.breach-logo {
|
||||
max-height: 1.15rem;
|
||||
max-width: 3rem;
|
||||
}
|
||||
|
||||
.demi.key {
|
||||
color: var(--color);
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
|
||||
.breach-title {
|
||||
color: rgba(255, 255, 255, 1);
|
||||
margin: auto auto auto 0;
|
||||
}
|
||||
|
||||
.breach-card-link-wrap {
|
||||
padding-top: 1rem;
|
||||
}
|
||||
|
||||
.breach-title.demi,
|
||||
.breach-info {
|
||||
display: block;
|
||||
font-size: 0.85rem;
|
||||
}
|
||||
|
||||
.breach-info {
|
||||
line-height: 150%;
|
||||
font-weight: 300;
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
|
||||
.breach-title,
|
||||
.breach-info .key {
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.breach-info .key {
|
||||
margin-right: 0.5rem;
|
||||
}
|
||||
|
||||
/* breach card inside email card */
|
||||
.email-card-breach-wrapper {
|
||||
border-radius: var(--radius);
|
||||
|
|
@ -12,3 +82,36 @@
|
|||
.breach-title.demi.ec {
|
||||
color: var(--color);
|
||||
}
|
||||
|
||||
a.breach-card:hover {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.two-up {
|
||||
flex: 0 1 47%;
|
||||
margin: 1rem 0.5rem;
|
||||
}
|
||||
|
||||
.three-up {
|
||||
flex: 1 1 30%;
|
||||
min-width: 260px;
|
||||
}
|
||||
|
||||
@media screen and (max-width: 1000px) {
|
||||
.three-up {
|
||||
max-width: 48%;
|
||||
flex: 1 1 48%;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 800px) {
|
||||
.breach-card {
|
||||
margin: 1rem auto;
|
||||
}
|
||||
|
||||
.two-up,
|
||||
.three-up {
|
||||
max-width: 100%;
|
||||
flex: 1 1 100%;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,80 +0,0 @@
|
|||
.breach-listing {
|
||||
border: 1px solid rgba(238, 238, 238, 1);
|
||||
background-color: rgba(255, 255, 255, 0);
|
||||
overflow: hidden;
|
||||
border-radius: var(--radius);
|
||||
flex: 1 1 40%;
|
||||
margin: var(--margin);
|
||||
max-width: calc(50% - var(--padding));
|
||||
transition: all 0.2s ease;
|
||||
}
|
||||
|
||||
.breach-listing:hover {
|
||||
border: 1px solid rgba(255, 255, 255, 1);
|
||||
background-color: rgba(255, 255, 255, 1);
|
||||
transition: all 0.2s ease;
|
||||
}
|
||||
|
||||
.breach-listing .breach-logo-title {
|
||||
width: 100%;
|
||||
padding: 1rem 2rem;
|
||||
border-bottom: 1px solid rgba(238, 238, 238, 1);
|
||||
background-color: var(--color);
|
||||
color: rgba(255, 255, 255, 0.95);
|
||||
}
|
||||
|
||||
.breach-info-wrap {
|
||||
padding: 1rem 2rem;
|
||||
}
|
||||
|
||||
.breach-listing .logo-wrapper {
|
||||
display: inline-block;
|
||||
min-width: 1rem;
|
||||
max-width: 1rem;
|
||||
width: 1rem;
|
||||
height: 1rem;
|
||||
margin-right: 0.25rem;
|
||||
}
|
||||
|
||||
img.breach-listing-logo {
|
||||
max-height: 1rem;
|
||||
max-width: 1rem;
|
||||
}
|
||||
|
||||
.breach-title.key,
|
||||
.breach-listing a,
|
||||
.breach-info {
|
||||
display: block;
|
||||
font-size: 0.85rem;
|
||||
}
|
||||
|
||||
.breach-info {
|
||||
line-height: 150%;
|
||||
font-weight: 300;
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
|
||||
.breach-title,
|
||||
.breach-info .key {
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.breach-info .key {
|
||||
margin-right: 0.5rem;
|
||||
}
|
||||
|
||||
.breach-listing a {
|
||||
padding: 0 var(--padding) var(--padding) var(--padding);
|
||||
margin: auto auto 0 0;
|
||||
}
|
||||
|
||||
@media screen and (max-width: 500px) {
|
||||
.breach-info-wrap,
|
||||
.breach-logo-title.logo-title-wrapper {
|
||||
padding: var(--padding);
|
||||
}
|
||||
|
||||
.breach-listing a {
|
||||
padding-bottom: 1.5rem;
|
||||
}
|
||||
}
|
||||
|
|
@ -1,30 +1,16 @@
|
|||
.latest-breach {
|
||||
margin: auto;
|
||||
}
|
||||
|
||||
.latest-breach-wrapper {
|
||||
background-color: rgba(255, 255, 255, 1);
|
||||
overflow: hidden;
|
||||
flex-direction: column;
|
||||
margin: auto;
|
||||
box-shadow: 1px 1px 10px #4444440e;
|
||||
border-radius: 1rem;
|
||||
padding: 0;
|
||||
transform: scale(1);
|
||||
transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
|
||||
}
|
||||
|
||||
.latest-breach-wrapper:hover {
|
||||
transform: scale(1.01);
|
||||
box-shadow: 1px 1px 10px #818181;
|
||||
transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
|
||||
}
|
||||
|
||||
.latest-breach {
|
||||
.latest-breach-container {
|
||||
background: linear-gradient(to top, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0) 50%, rgba(255, 255, 255, 0) 50%, rgba(249, 249, 250, 1) 50%, rgba(249, 249, 250, 1) 100%); /* W3C */
|
||||
}
|
||||
|
||||
.latest-breach .breach-title {
|
||||
color: var(--color);
|
||||
}
|
||||
|
||||
.latest-breach-headline {
|
||||
font-size: 1rem;
|
||||
text-align: center;
|
||||
|
|
@ -35,65 +21,42 @@
|
|||
letter-spacing: 2px;
|
||||
}
|
||||
|
||||
.latest-breach .logo-wrapper {
|
||||
margin-right: 0.25rem;
|
||||
.latest-breach .breach-card-title-wrapper {
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
|
||||
.latest-breach .breach-info-wrap {
|
||||
.latest-breach .breach-card-link-wrap {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.latest-breach .breach-info-wrapper,
|
||||
.latest-breach .breach-card-title-wrapper {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.latest-breach .breach-title.key,
|
||||
.latest-breach a,
|
||||
.latest-breach .breach-info {
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
|
||||
.latest-breach a.button {
|
||||
margin-top: 1rem;
|
||||
font-weight: 400;
|
||||
width: 100%;
|
||||
padding: 1.5rem 1rem;
|
||||
border: 1px solid #ffc0cb4d;
|
||||
border-radius: 0.5rem;
|
||||
}
|
||||
|
||||
.latest-breach a.button:hover {
|
||||
border: 1px solid transparent;
|
||||
background-color: rgba(255, 255, 255, 0);
|
||||
color: rgba(255, 255, 255, 1);
|
||||
}
|
||||
|
||||
.latest-breach-info {
|
||||
padding: calc(var(--padding) + 1rem) calc(var(--padding) * 2) calc(var(--padding) * 2) calc(var(--padding) * 2);
|
||||
background-color: rgba(249, 249, 250, 0.15);
|
||||
background-color: rgba(249, 249, 250, 0.07);
|
||||
border-top: 1px solid #7cdfff0d;
|
||||
}
|
||||
|
||||
.latest-breach .logo-title-wrapper,
|
||||
.latest-breach .breach-info {
|
||||
margin-bottom: 1rem;
|
||||
.latest-breach-container,
|
||||
.latest-breach-link,
|
||||
.latest-breach .breach-title,
|
||||
.latest-breach .breach-info,
|
||||
.latest-breach .demi.key {
|
||||
font-size: 1rem;
|
||||
color: rgba(255, 255, 255, 1);
|
||||
}
|
||||
|
||||
.latest-breach .more-about-this-breach {
|
||||
display: none;
|
||||
}
|
||||
|
||||
@media screen and (max-width: 800px) {
|
||||
.latest-breach-wrapper {
|
||||
margin: auto 2rem auto;
|
||||
}
|
||||
|
||||
.latest-breach .breach-title.key,
|
||||
.latest-breach a,
|
||||
.latest-breach .breach-info {
|
||||
font-size: 0.85rem;
|
||||
}
|
||||
.latest-breach-link {
|
||||
margin-top: var(--padding);
|
||||
display: block;
|
||||
}
|
||||
|
||||
@media screen and (max-width: 600px) {
|
||||
.latest-breach .row {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.latest-breach-headline {
|
||||
margin-bottom: 0;
|
||||
padding: 1rem;
|
||||
|
|
@ -101,25 +64,18 @@
|
|||
line-height: 150%;
|
||||
}
|
||||
|
||||
.latest-breach .fxm {
|
||||
.fxm {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 500px) {
|
||||
.latest-breach .logo-title-wrapper {
|
||||
padding: 0.5rem 0;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.latest-breach-wrapper {
|
||||
margin: 0;
|
||||
border-radius: 0;
|
||||
box-shadow: none;
|
||||
margin: auto;
|
||||
}
|
||||
|
||||
.latest-breach-headline {
|
||||
padding: 1rem 1rem 1rem 1rem;
|
||||
padding: 1rem;
|
||||
border-bottom: none;
|
||||
border-top-right-radius: 1rem;
|
||||
border-top-left-radius: 1rem;
|
||||
|
|
@ -127,18 +83,8 @@
|
|||
|
||||
.latest-breach-info {
|
||||
border-top: none;
|
||||
padding-bottom: 2rem;
|
||||
padding-left: 2rem;
|
||||
padding-right: 2rem;
|
||||
padding: 1.5rem 2rem 2rem 2rem;
|
||||
border-bottom-right-radius: 1rem;
|
||||
border-bottom-left-radius: 1rem;
|
||||
}
|
||||
|
||||
.latest-breach.container {
|
||||
padding: 1rem 0;
|
||||
}
|
||||
|
||||
.latest-breach .breach-info {
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,49 +1,10 @@
|
|||
.scan-results.container {
|
||||
padding-top: 0;
|
||||
}
|
||||
|
||||
.found-breaches {
|
||||
display: inline-flex;
|
||||
justify-content: space-between;
|
||||
flex-wrap: wrap;
|
||||
flex-direction: row;
|
||||
padding: 0;
|
||||
padding: 0 var(--padding);
|
||||
}
|
||||
|
||||
.found-breaches,
|
||||
.show-additional-breaches {
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.scan-results-headline {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.found-breaches .breach-logo-title.logo-title-wrapper.flx {
|
||||
flex-direction: row-reverse;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.found-breaches .breach-listing .logo-wrapper {
|
||||
width: auto;
|
||||
max-width: 3rem;
|
||||
max-height: 1.25rem;
|
||||
margin: auto 0 auto auto;
|
||||
}
|
||||
|
||||
.found-breaches img.breach-listing-logo {
|
||||
max-width: 4rem;
|
||||
max-width: 3rem;
|
||||
max-height: 1.25rem;
|
||||
}
|
||||
|
||||
@media screen and (max-width: 800px) {
|
||||
.breach-listing {
|
||||
margin: 1.5rem 1rem;
|
||||
flex: 1 1 100%;
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
.found-breaches {
|
||||
padding: 0 var(--padding);
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,3 +1,4 @@
|
|||
<a class="breach-card {{ cardClass }}" href="/?breach={{ Name }}">
|
||||
<div class="breach-card-title-wrapper flx {{ Category }}">
|
||||
<span class="breach-title demi {{ addClass }}">{{ Title }}</span>
|
||||
<div class="breach-logo-wrapper">
|
||||
|
|
@ -20,3 +21,4 @@
|
|||
<span class="more-about-this-breach">{{ String.MoreInfoLink }}<span class="arrow">→</span></span>
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
|
|
|
|||
|
|
@ -1,20 +0,0 @@
|
|||
<div class="breach-logo-title logo-title-wrapper flx">
|
||||
<div class="logo-wrapper">
|
||||
<img alt="" class="breach-logo breach-listing-logo" src="/img/logos/{{ LogoPath }}" />
|
||||
</div>
|
||||
<div class="title-wrapper">
|
||||
<span class="breach-title key">{{ Title }}</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="breach-info-wrap">
|
||||
{{!-- <span class="breach-info"><span class="key">{{getString "breach-added"}}</span>{{prettyDate AddedDate}}</span>
|
||||
<span class="breach-info"><span class="key">{{getString "compromised-accounts" }}</span>{{localeString PwnCount}}</span> --}}
|
||||
<span class="breach-info">{{ String.AddedDate }}<span class="key">{{ AddedDate }}</span></span>
|
||||
<span class="breach-info">{{ String.CompromisedAccounts }}<span class="key">{{ PwnCount }}</span></span>
|
||||
{{#if DataClasses }}
|
||||
{{!-- <span class="breach-info"><span class="key">{{getString "compromised-data"}}</span>{{localizedBreachDataClasses DataClasses}}</span> --}}
|
||||
<span class="breach-info"> {{ String.CompromisedData }}<span class="key">{{ DataClasses }}</span></span>
|
||||
{{/if}}
|
||||
</div>
|
||||
<a href="/?breach={{this.Name}}" class="more-about-this-breach">{{getString "more-about-this-breach"}}<span class="arrow">→</span></a>
|
||||
|
||||
|
|
@ -5,7 +5,6 @@
|
|||
<link rel="stylesheet" href="/css/articles.css">
|
||||
<link rel="stylesheet" href="/css/breach-cards.css">
|
||||
<link rel="stylesheet" href="/css/breach-detail.css">
|
||||
<link rel="stylesheet" href="/css/breach-listing.css">
|
||||
<link rel="stylesheet" href="/css/breach-stats.css">
|
||||
<link rel="stylesheet" href="/css/dashboard.css">
|
||||
<link rel="stylesheet" href="/css/feature-tip-group.css">
|
||||
|
|
|
|||
|
|
@ -1,15 +1,15 @@
|
|||
<section class="latest-breach">
|
||||
<section class="row">
|
||||
<div class="col-8 latest-breach-wrapper">
|
||||
<h3 class="latest-breach-headline">{{{getString "latest-breach" brandName="<span class='fxm'>Firefox Monitor</span>"}}}</h3>
|
||||
<section class="latest-breach-container">
|
||||
<section class="row jst-cntr">
|
||||
<div class="col-8">
|
||||
<div class="gradient-background latest-breach-wrapper drop-shadow">
|
||||
<h3 class="latest-breach-headline">{{{getString "latest-breach" brandName="<span class='fxm'>Firefox Monitor</span>"}}}</h3>
|
||||
<div class="latest-breach-info">
|
||||
{{#each (lastAddedBreach)}}
|
||||
{{> breach_listing}}
|
||||
<div class="find-out-if flx txt-cntr">
|
||||
<a href="/?breach={{this.Name}}" class="latest-breach-link">See if you were in this breach</a>
|
||||
</div>
|
||||
{{> breach-card cardClass="latest-breach"}}
|
||||
<a href="/?breach={{ this.Name }}" class="latest-breach-link">{{getString "latest-breach-link"}}<span class="arrow">→</span></a>
|
||||
{{/each}}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</section>
|
||||
|
|
|
|||
|
|
@ -28,9 +28,7 @@
|
|||
<!-- breach cards -->
|
||||
<div id="all-breaches" class="all-breaches flx">
|
||||
{{#each this.breachCards}}
|
||||
<a href="/?breach={{Name}}" class="breach-card three-up flx flx-col {{ Category }}" data-breach-category="{{ Category }}">
|
||||
{{> breach-card lazyLoad=true}}
|
||||
</a>
|
||||
{{> breach-card lazyLoad=true cardClass="three-up drop-shadow"}}
|
||||
{{/each}}
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -9,31 +9,29 @@
|
|||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row found-breaches">
|
||||
<!-- foundBreaches 1-4 -->
|
||||
{{#eachFromTo (getFoundBreaches) 0 4}}
|
||||
<div class="breach-listing flx flx-col">
|
||||
{{> breach_listing }}
|
||||
</div>
|
||||
{{/eachFromTo}}
|
||||
<div class="row">
|
||||
<div class="found-breaches">
|
||||
<!-- foundBreaches 1-4 -->
|
||||
{{#eachFromTo (getFoundBreaches) 0 4}}
|
||||
{{> breach-card cardClass="two-up drop-shadow"}}
|
||||
{{/eachFromTo}}
|
||||
|
||||
{{#ifCompare foundBreaches.length ">" 4}}
|
||||
<!-- show all breaches button -->
|
||||
<div id="show-all-breaches-wrapper" class="col-12 show">
|
||||
<p class="txt-cntr">Currently showing <span class="bold">4</span> of <span class="bold">{{ foundBreaches.length }}</span> breaches.</p>
|
||||
<button id="show-all-breaches" class="util-btn light-btn" data-event-category="Show All Breaches">{{getString "show-all-breaches"}}</button>
|
||||
</div>
|
||||
{{#ifCompare foundBreaches.length ">" 4}}
|
||||
<!-- show all breaches button -->
|
||||
<div id="show-all-breaches-wrapper" class="col-12 show">
|
||||
<p class="txt-cntr">Currently showing <span class="bold">4</span> of <span class="bold">{{ foundBreaches.length }}</span> breaches.</p>
|
||||
<button id="show-all-breaches" class="util-btn light-btn" data-event-category="Show All Breaches">{{getString "show-all-breaches"}}</button>
|
||||
</div>
|
||||
|
||||
<!-- foundBreaches 4-foundBreaches.length -->
|
||||
<div id="additional-breaches" class="show-additional-breaches hide flx">
|
||||
{{#eachFromTo (getFoundBreaches) 4 foundBreaches.length}}
|
||||
<div class="breach-listing flx flx-col">
|
||||
{{> breach_listing }}
|
||||
</div>
|
||||
{{/eachFromTo}}
|
||||
</div>
|
||||
<!-- foundBreaches 4-foundBreaches.length -->
|
||||
<div id="additional-breaches" class="show-additional-breaches hide flx">
|
||||
{{#eachFromTo (getFoundBreaches) 4 foundBreaches.length}}
|
||||
{{> breach-card cardClass="two-up drop-shadow"}}
|
||||
{{/eachFromTo}}
|
||||
</div>
|
||||
|
||||
{{/ifCompare}}
|
||||
{{/ifCompare}}
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
|
||||
|
|
|
|||
Загрузка…
Ссылка в новой задаче