Fix jumping show all owners checkbox when files are loading
The checkbox is moved to the top and is placed on the same line with
progress text.
Change-Id: Ic5c5cc073fefc19ae50fbc5171e44f8196ee2afe
diff --git a/ui/suggest-owners.js b/ui/suggest-owners.js
index 2304523..f07003f 100644
--- a/ui/suggest-owners.js
+++ b/ui/suggest-owners.js
@@ -105,9 +105,6 @@
padding: 0 var(--spacing-m);
margin: var(--spacing-m) 0;
}
- p.loading {
- text-align: center;
- }
.loadingSpin {
display: inline-block;
}
@@ -130,12 +127,17 @@
}
.suggestion-row {
flex-wrap: wrap;
- border-bottom: 1px solid var(--border-color);
+ border-top: 1px solid var(--border-color);
padding: var(--spacing-s) 0;
}
.show-all-owners-row {
- padding: var(--spacing-m) var(--spacing-xl) var(--spacing-s);
- justify-content: flex-end;
+ padding: var(--spacing-m) var(--spacing-xl) var(--spacing-s) 0;
+ }
+ .show-all-owners-row .loading {
+ padding: 0;
+ }
+ .show-all-owners-row .show-all-label {
+ margin-left: auto; /* align label to the right */
}
.suggestion-row-indicator {
margin-right: var(--spacing-s);
@@ -247,10 +249,22 @@
margin-right: var(--spacing-m);
}
</style>
- <p class="loading" hidden="[[!isLoading]]">
- <span class="loadingSpin"></span>
- [[progressText]]
- </p>
+ <ul class="suggestion-container">
+ <li class="show-all-owners-row">
+ <p class="loading" hidden="[[!isLoading]]">
+ <span class="loadingSpin"></span>
+ [[progressText]]
+ </p>
+ <label class="show-all-label">
+ <input
+ id="showAllOwnersCheckbox"
+ type="checkbox"
+ checked="{{_showAllOwners::change}}"
+ />
+ Show all owners
+ </label>
+ </li>
+ </ul>
<ul class="suggestion-container">
<template
is="dom-repeat"
@@ -332,16 +346,6 @@
</template>
</li>
</template>
- <li class="show-all-owners-row">
- <label>
- <input
- id="showAllOwnersCheckbox"
- type="checkbox"
- checked="{{_showAllOwners::change}}"
- />
- Show all owners
- </label>
- </li>
</ul>
`;
}
