style loading and no results messages

This commit is contained in:
Kyle Spearrin 2016-09-21 16:57:11 -04:00
parent 632525c636
commit 6e762729e0
3 changed files with 29 additions and 7 deletions

View File

@ -24,10 +24,10 @@
</div>
</div>
</div>
<div ng-if="loaded && !sites.length">
<p>No sites available for tab. <a href="" ng-click="addSite()">Add one</a></p>
<div class="no-results" ng-if="loaded && !sites.length">
<p>No sites available to auto-fill for the current browser tab. <a href="" ng-click="addSite()">Add one</a></p>
</div>
<div ng-if="!loaded">
<p><i class="fa fa-lg fa-spinner fa-spin"></i></p>
<div class="page-loading" ng-if="!loaded">
<i class="fa fa-lg fa-spinner fa-spin"></i>
</div>
</div>

View File

@ -35,10 +35,10 @@
</div>
</div>
</div>
<div ng-if="loaded && !vaultSites.length">
<div class="no-results" ng-if="loaded && !vaultSites.length">
<p>No sites to list. <a href="" ng-click="addSite()">Add one</a></p>
</div>
<div ng-if="!loaded">
<p><i class="fa fa-lg fa-spinner fa-spin"></i></p>
<div class="page-loading" ng-if="!loaded">
<i class="fa fa-lg fa-spinner fa-spin"></i>
</div>
</div>

View File

@ -398,3 +398,25 @@
.text-accent {
color: @brand-primary-accent;
}
.page-loading {
.fa-spinner {
position: fixed;
top: 50%;
left: 50%;
color: @gray-light;
margin-left: -5px;
margin-top: -15px;
}
}
.no-results {
p {
position: fixed;
top: 50%;
margin-top: -20px;
display: block;
width: 100%;
text-align: center;
}
}