Styling dashboard user tables

This commit is contained in:
Kris 2018-05-22 15:33:06 -04:00
parent 79d202a73c
commit d19d491d65
2 changed files with 24 additions and 8 deletions

View File

@ -79,11 +79,11 @@
</div> </div>
{{/conditional-loading-section}} {{/conditional-loading-section}}
</div> </div>
<div class="user-metrics">
{{dashboard-inline-table dataSourceNames="users_by_type" lastRefreshedAt=lastRefreshedAt}} {{dashboard-inline-table dataSourceNames="users_by_type" lastRefreshedAt=lastRefreshedAt}}
{{dashboard-inline-table dataSourceNames="users_by_trust_level" lastRefreshedAt=lastRefreshedAt}} {{dashboard-inline-table dataSourceNames="users_by_trust_level" lastRefreshedAt=lastRefreshedAt}}
</div>
{{#conditional-loading-section isLoading=isLoading title=(i18n "admin.dashboard.backups")}} {{#conditional-loading-section isLoading=isLoading title=(i18n "admin.dashboard.backups")}}
<div class="misc"> <div class="misc">
<div class="durability"> <div class="durability">

View File

@ -370,28 +370,44 @@
} }
} }
.user-metrics {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
margin-left: -5%;
margin: 2em 0 .75em -5%; // Negative margin allows for a margin when in 2-columns,
.dashboard-inline-table { // and "hides" margin when the item spans 100% width
flex: 1 0 auto;
max-width: 95%;
}
}
.dashboard-inline-table { .dashboard-inline-table {
margin-bottom: 1em; margin-left: 5%;
margin-bottom: 1.25em;
.table-title { .table-title {
border-bottom: 1px solid $primary-low; border-bottom: 1px solid $primary-low;
margin-bottom: 1em; margin-bottom: 1em;
padding-bottom: .5em;
} }
.table-container { .table-container {
display: flex; display: flex;
justify-content: space-between;
flex-wrap: wrap; flex-wrap: wrap;
flex: 1 1 auto;
} }
.table-cell { .table-cell {
margin-right: .5em;
display: flex; display: flex;
flex: 0 1 auto;
margin: 0 2em .5em 0;
.label { .label {
font-weight: 700; display: flex;
align-items: center;
margin-right: .5em; margin-right: .5em;
.d-icon {
margin-right: 5px;
}
} }
} }
} }