fx(css): reduce list height of mailboxes

Fixes #5145
pull/289/head
Francis Lachapelle 2020-11-16 12:15:08 -05:00
parent defd3c97a9
commit 0eae8296a3
3 changed files with 15 additions and 5 deletions

View File

@ -38,7 +38,7 @@
layout="column" layout="column"
ng-repeat="account in ::app.accounts track by account.id" ng-repeat="account in ::app.accounts track by account.id"
ng-class="{ 'md-flex': account.$expanded }"> ng-class="{ 'md-flex': account.$expanded }">
<md-list> <md-list class="md-dense">
<md-list-item ng-click="app.toggleAccountState(account)"> <md-list-item ng-click="app.toggleAccountState(account)">
<div class="sg-no-wrap" <div class="sg-no-wrap"
aria-label="{{ ::'Toggle visibility' | loc }}" aria-label="{{ ::'Toggle visibility' | loc }}"
@ -89,7 +89,7 @@
ng-class="{ 'md-warn': account.$quota.percent > 70 }">{{account.$quota.description}}</div> ng-class="{ 'md-warn': account.$quota.percent > 70 }">{{account.$quota.description}}</div>
</div> </div>
<md-virtual-repeat-container class="md-flex"> <md-virtual-repeat-container class="md-flex">
<md-list> <md-list class="md-dense">
<md-list-item <md-list-item
class="sg-mailbox-list-item md-clickable md-default-theme md-background md-hue-1" class="sg-mailbox-list-item md-clickable md-default-theme md-background md-hue-1"
ng-class="{'md-bg sg-selected': folder.id == app.service.selectedFolder.id}" ng-class="{'md-bg sg-selected': folder.id == app.service.selectedFolder.id}"

View File

@ -1,10 +1,22 @@
/// checkbox.scss -*- Mode: scss; indent-tabs-mode: nil; basic-offset: 2 -*- /// checkbox.scss -*- Mode: scss; indent-tabs-mode: nil; basic-offset: 2 -*-
$checkbox-min-height: 40px !default;
@import 'extends'; @import 'extends';
// Checkbox for the sidenav folders list // Checkbox for the sidenav folders list
// ------------------------------------- // -------------------------------------
md-sidenav md-checkbox { md-sidenav md-checkbox {
min-height: $checkbox-width;
.md-container {
top: 50%;
margin: 0; margin: 0;
}
}
// Dense mode
md-sidenav .md-dense :not(.md-dense-disabled) md-checkbox:not(.md-dense-disabled) {
min-height: $checkbox-width;
} }
// Checkbox in an inline form beside a select element // Checkbox in an inline form beside a select element

View File

@ -59,9 +59,6 @@ md-list-item {
text-overflow: ellipsis; text-overflow: ellipsis;
text-transform: initial; text-transform: initial;
white-space: nowrap; white-space: nowrap;
@include from(md) {
line-height: $list-item-height;
}
} }
.sg-inline-list-icon-label { .sg-inline-list-icon-label {
text-transform: uppercase; text-transform: uppercase;
@ -91,6 +88,7 @@ md-list-item {
// Gain some space on the right side of the folder icon // Gain some space on the right side of the folder icon
.md-list-item-inner > md-icon:first-child, .md-list-item-inner > md-icon:first-child,
.md-list-item-inner > md-checkbox:first-child { .md-list-item-inner > md-checkbox:first-child {
margin-top: auto;
margin-right: $bl * 2; margin-right: $bl * 2;
} }