wbrawner/server
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Give columns a bit more space and fix overlaying issues

Browse source 
Signed-off-by: Julius Härtl <jus@bitgrid.net>
This commit is contained in:
Julius Härtl 2020-02-18 22:26:52 +01:00
parent 4766a5a427
commit 3be571cd05
No known key found for this signature in database
GPG key ID: 4C614C6ED2CDE6DF
1 changed files with 30 additions and 16 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

46
apps/settings/css/settings.scss
View file

@ -1412,12 +1412,11 @@ doesnotexist:-o-prefocus, .strengthify-wrapper {
/* USERS LIST -------------------------------------------------------------- */
#body-settings {
$grid-row-height: 60px;
$grid-col-min-width: 150px;
$grid-col-min-width: 160px;
overflow-x: scroll;
#app-content.user-list-grid {
display: grid;
grid-auto-columns: 1fr;
grid-auto-rows: $grid-row-height;
grid-column-gap: 20px;
.row {
@ -1425,13 +1424,20 @@ doesnotexist:-o-prefocus, .strengthify-wrapper {
// fallback for ie11 no grid
display: flex;
display: grid;
min-height: $grid-row-height;
grid-row-start: span 1;
grid-gap: 3px;
align-items: center;
z-index: 0;
/* let's define the column until storage path,
what follows will be manually defined */
grid-template-columns: 44px minmax($grid-col-min-width + 30px, 1fr) repeat(auto-fit, minmax($grid-col-min-width, 1fr));
grid-template-columns:
44px
minmax($grid-col-min-width + 30px, 1fr) // username, displayname
minmax($grid-col-min-width, 1fr) // password
minmax($grid-col-min-width, 1fr) // email
minmax(1.5*$grid-col-min-width, 1fr) // groups
minmax(1.5*$grid-col-min-width, 1fr) // group admins
repeat(auto-fit, minmax($grid-col-min-width, 1fr));
border-bottom: var(--color-border) 1px solid;
&.disabled {
@ -1447,16 +1453,20 @@ doesnotexist:-o-prefocus, .strengthify-wrapper {
.userBackend,
.lastLogin {
min-width: $grid-col-min-width;
display: flex;
color: var(--color-text-dark);
vertical-align: baseline;
text-overflow: ellipsis;
overflow: hidden;
}
.groups,
.subadmins,
.quota {
.multiselect {
min-width: $grid-col-min-width;
.multiselect {
width: 100%;
color: var(--color-text-dark);
vertical-align: baseline;
}
@ -1468,10 +1478,12 @@ doesnotexist:-o-prefocus, .strengthify-wrapper {
}
.userActions {
min-width: 44px;
display: flex;
justify-content: flex-end;
position: sticky;
right: 40px;
z-index: 109;
right: 0px;
min-width: 88px;
background-color: var(--color-main-background);
}
.subtitle {
@ -1544,12 +1556,15 @@ doesnotexist:-o-prefocus, .strengthify-wrapper {
}
}
> form {
width: 100%;
}
> div,
> form {
grid-row: 1;
display: inline-flex;
color: var(--color-text-lighter);
position: relative;
> input:not(:focus):not(:active) {
border-color: transparent;
@ -1627,9 +1642,8 @@ doesnotexist:-o-prefocus, .strengthify-wrapper {
}
&.userActions {
.action-item {
position: absolute;
}
display: flex;
justify-content: flex-end;
#newsubmit {
width: 100%;
@ -1637,15 +1651,15 @@ doesnotexist:-o-prefocus, .strengthify-wrapper {
.toggleUserActions {
position: relative;
display: block;
display: flex;
align-items: center;
background-color: var(--color-main-background);
.icon-more {
width: 44px;
height: 44px;
opacity: .5;
cursor: pointer;
margin-left: 40px;
&:hover {
opacity: .7;