More css fixes #1608
More css fixes #1608
Conversation
neb-b
force-pushed
the
css-fixes
branch
2 times, most recently
from
1e907f0
to
1e18a26
Compare
| @@ -68,6 +71,8 @@ export class FormField extends React.PureComponent<Props> { | |||
| ); | |||
| } else if (type === 'textarea') { | |||
| input = <textarea type={type} id={name} {...inputProps} />; | |||
| } else if (type === 'checkbox' && useToggle) { | |||
| input = <Toggle id={name} {...inputProps} />; | |||
There was a problem hiding this comment.
There are only 11 checkboxes in the entire app. Is it worth making this all of them?
Also, does Toggle maintain the keyboard usability of native inputs? If we're replacing native form inputs with custom ones, I'd prefer they function the same as native inputs for accessibility and keyboard use.
In this case, that'd probably mean that you can still tab to them and that space toggles the value.
There was a problem hiding this comment.
It was just one checkbox on the settings page that was messed up due to the postfix overlflowing onto a second line. Didn't spend much time on it but yes, all of the checkboxes will use this style (which supports nice usability)
| @@ -8,6 +8,7 @@ type Props = { | |||
| children: ?React.Node, | |||
| icon: ?boolean, | |||
| direction: string, | |||
| noPadding?: boolean, | |||
There was a problem hiding this comment.
Is there a name for this property that would describe the type of tooltip this is rather than the styling of it?
| @@ -29,6 +30,7 @@ class ToolTip extends React.PureComponent<Props> { | |||
| 'tooltip--right': direction === 'right', | |||
| 'tooltip--bottom': direction === 'bottom', | |||
| 'tooltip--left': direction === 'left', | |||
| 'tooltip--no-padding': noPadding | |||
There was a problem hiding this comment.
Same for this class as the above comment.
| padding-left: $spacing-vertical * 1/3; | ||
|
|
||
| .tooltip__body { | ||
| margin-top: 5px; | ||
| } | ||
| } | ||
|
|
||
| .tooltip.tooltip--no-padding { |
There was a problem hiding this comment.
These .tooltip rules can be nested since it's SCSS
Very minor CSS changes, mostly dealing with thumbnail placeholders in different parts of the app.
Also added
react-toggleto style the autoplay switch. In the future, we will move all checkboxes over to this but there were some alignment issues so I didn't want to bother with it right now.#1539