Bug 1574161 - Monitor columns in about:protections have different heights r=johannh

Differential Revision: https://phabricator.services.mozilla.com/D42326

--HG--
extra : moz-landing-system : lando
This commit is contained in:
Micah Tigley 2019-08-19 16:37:35 +00:00
parent 36de0b4930
commit 062ce0a62b
2 changed files with 34 additions and 27 deletions

View File

@ -550,7 +550,6 @@ label[for="tab-cryptominer"]:hover ~ #highlight-hover {
#monitor-body-content .monitor-breached-passwords {
grid: 1fr / minmax(70px, auto) 1fr;
grid-row: 3;
grid-column: span 3;
display: grid;
align-items: center;
font-size: 0.85em;
@ -561,6 +560,12 @@ label[for="tab-cryptominer"]:hover ~ #highlight-hover {
margin-bottom: 20px;
}
.monitor-info-wrapper {
display: grid;
grid: 1fr / 1fr 1fr 1fr;
grid-gap: 10px;
}
.monitor-scanned-text {
background-image: url("chrome://browser/skin/reload.svg");
font-size: 0.85em;
@ -574,7 +579,7 @@ label[for="tab-cryptominer"]:hover ~ #highlight-hover {
.monitor-card.has-logins #monitor-body-content {
display: grid;
grid: 2fr 1fr auto / repeat(3, 160px);
grid: 1fr 50px auto / 1fr 100px;
grid-column-gap: 12px;
align-items: center;
}

View File

@ -112,32 +112,34 @@
<div class="card-body hidden">
<div class="body-wrapper">
<div id="monitor-body-content">
<div class="monitor-block email">
<span class="monitor-stat">
<span class="monitor-icon"></span>
<span data-type="stored-emails">
<!-- Display number of stored emails here. -->
</span>
</span>
<span id="info-monitored-addresses" class="info-text"></span>
</div>
<div class="monitor-block breaches">
<span class="monitor-stat">
<span class="monitor-icon"></span>
<span data-type="known-breaches">
<!-- Display number of known breaches here. -->
</span>
</span>
<span id="info-known-breaches" class="info-text"></span>
</div>
<div class="monitor-block passwords">
<span class="monitor-stat">
<span class="monitor-icon"></span>
<span data-type="exposed-passwords">
<!-- Display number of exposed passwords here. -->
<div class="monitor-info-wrapper">
<div class="monitor-block email">
<span class="monitor-stat">
<span class="monitor-icon"></span>
<span data-type="stored-emails">
<!-- Display number of stored emails here. -->
</span>
</span>
</span>
<span id="info-exposed-passwords" class="info-text"></span>
<span id="info-monitored-addresses" class="info-text"></span>
</div>
<div class="monitor-block breaches">
<span class="monitor-stat">
<span class="monitor-icon"></span>
<span data-type="known-breaches">
<!-- Display number of known breaches here. -->
</span>
</span>
<span id="info-known-breaches" class="info-text"></span>
</div>
<div class="monitor-block passwords">
<span class="monitor-stat">
<span class="monitor-icon"></span>
<span data-type="exposed-passwords">
<!-- Display number of exposed passwords here. -->
</span>
</span>
<span id="info-exposed-passwords" class="info-text"></span>
</div>
</div>
<div id="full-report-link" class="monitor-view-full-report" data-l10n-id="full-report-link">
<a target="_blank" id="monitor-inline-link" data-l10n-name="monitor-inline-link" href=""></a>