diff options
author | Julius Härtl <jus@bitgrid.net> | 2020-02-19 00:26:52 +0300 |
---|---|---|
committer | Julius Härtl <jus@bitgrid.net> | 2020-02-19 00:26:52 +0300 |
commit | 3be571cd0520537e154332a4508da4e2f98af5d7 (patch) | |
tree | 009a1b18fdc55d8411bd91ec6b0f62ed9fce3fed /apps | |
parent | 4766a5a4272f563b080c408f5b8519c0603f0799 (diff) |
Give columns a bit more space and fix overlaying issues
Signed-off-by: Julius Härtl <jus@bitgrid.net>
Diffstat (limited to 'apps')
-rw-r--r-- | apps/settings/css/settings.scss | 46 |
1 files changed, 30 insertions, 16 deletions
diff --git a/apps/settings/css/settings.scss b/apps/settings/css/settings.scss index 9ba3f01e5e3..a07072aa8f3 100644 --- a/apps/settings/css/settings.scss +++ b/apps/settings/css/settings.scss @@ -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 { + min-width: $grid-col-min-width; + .multiselect { - min-width: $grid-col-min-width; + 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; |