imterah/element-portable
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Touch up settings: alignment, spacing, error states

Browse source 
Fixes https://github.com/vector-im/riot-web/issues/10554

Issues fixed:
* Fields were not ~30px from the avatar (too much right margin)
* Tooltips overflowed the dialog on some resolutions
* SetIdServer didn't have an error state for making the field red
* Spacing between sections in Discovery was wrong (fixed by just removing the problematic n+2 selector - it didn't help anything)
This commit is contained in:
Travis Ralston 2019-08-20 13:20:07 -06:00
parent 3c1adf62af
commit f55a40001c
8 changed files with 24 additions and 18 deletions
Download patch file Download diff file Expand all files Collapse all files

7
res/css/_common.scss
View file

@ -561,5 +561,10 @@ input[type=text]:focus, input[type=password]:focus, textarea:focus {
}
@define-mixin mx_Settings_fullWidthField {
margin-right: 200px;
margin-right: 100px;
}
@define-mixin mx_Settings_tooltip {
// So it fits in the space provided by the page
max-width: 120px;
}

4
res/css/views/settings/_ProfileSettings.scss
View file

@ -26,10 +26,6 @@ limitations under the License.
height: 4em;
}
.mx_ProfileSettings_controls .mx_Field {
margin-right: 100px;
}
.mx_ProfileSettings_controls .mx_Field:first-child {
margin-top: 0;
}

4
res/css/views/settings/_SetIdServer.scss
View file

@ -17,3 +17,7 @@ limitations under the License.
.mx_SetIdServer .mx_Field_input {
@mixin mx_Settings_fullWidthField;
}
.mx_SetIdServer_tooltip {
@mixin mx_Settings_tooltip;
}

4
res/css/views/settings/_SetIntegrationManager.scss
View file

@ -31,3 +31,7 @@ limitations under the License.
display: inline-block;
padding-left: 5px;
}
.mx_SetIntegrationManager_tooltip {
@mixin mx_Settings_tooltip;
}

11
res/css/views/settings/tabs/_SettingsTab.scss
View file

@ -70,17 +70,6 @@ limitations under the License.
word-break: break-all;
}
.mx_SettingsTab .mx_SettingsTab_subheading:nth-child(n + 2) {
// TODO: This `nth-child(n + 2)` isn't working very well since many sections
// add intermediate elements (mostly because our version of React requires
// them) which throws off the numbering and results in many subheading
// missing margins.
// See also https://github.com/vector-im/riot-web/issues/10554
// These views have a lot of the same repetitive information on it, so
// give them more visual distinction between the sections.
margin-top: 25px;
}
.mx_SettingsTab a {
color: $accent-color-alt;
}