Summary

Fix the scaling units to make better sense.

Review Request #13827 — Created May 6, 2024 and submitted May 8, 2024, 10:56 p.m.

Information

Owner

chipx86

Repository

Ink

Branch

master

Bugs

Depends On

Reviewers

Groups

beanbag-misc

People

Description

The scaling units were set somewhat early in development to a base of
0.8em, which was a bit on the small size. The m (medium) size was
almost always too small, requiring use of the in-between ml
(medium-large) size. Similarly, l (large) was never large enough,
requiring xl or xl sizes. And those were still on the small size,
given their upper range on the scale.

The scale has now been redone to use 1em as the base, and to change
the l, xl, and xxl scales to better represent their names. This
gives us a slightly larger UI by default when using these units, which
works better on both touchscreens and modern desktop displays.

Mostly, this doesn't impact things too much until you get to the ml
size and higher. Any UI components making use of these will need updates
to choose more correct sizes.

Ink itself isn't really impacted much by these changes. Alerts required
small changes to the layout to reduce the distance to actions.

Testing Done

Tested this with all the Ink components, and with Review Board (which
does require updates).

Commits

Summary	ID
Fix the scaling units to make better sense. The scaling units were set somewhat early in development to a base of 0.8em, which was a bit on the small size. The `m` (medium) size was almost always too small, requiring use of the in-between `ml` (medium-large) size. Similarly, `l` (large) was never large enough, requiring `xl` or `xl` sizes. And those were still on the small size, given their upper range on the scale. The scale has now been redone to use `1em` as the base, and to change the `l`, `xl`, and `xxl` scales to better represent their names. This gives us a slightly larger UI by default when using these units, which works better on both touchscreens and modern desktop displays. Mostly, this doesn't impact things too much until you get to the `ml` size and higher. Any UI components making use of these will need updates to choose more correct sizes. Ink itself isn't really impacted by these changes, though there is a change to the button. The button now uses a larger size for the horizontal spacing for a button, giving it a wider hitbox and making the button feel less crowded.	4a290700635bfdf4411ea9b7bb6488dd8bfe731e

Summary

Fix the scaling units to make better sense.

The scaling units were set somewhat early in development to a base of 0.8em, which was a bit on the small size. The `m` (medium) size was almost always too small, requiring use of the in-between `ml` (medium-large) size. Similarly, `l` (large) was never large enough, requiring `xl` or `xl` sizes. And those were still on the small size, given their upper range on the scale. The scale has now been redone to use `1em` as the base, and to change the `l`, `xl`, and `xxl` scales to better represent their names. This gives us a slightly larger UI by default when using these units, which works better on both touchscreens and modern desktop displays. Mostly, this doesn't impact things too much until you get to the `ml` size and higher. Any UI components making use of these will need updates to choose more correct sizes. Ink itself isn't really impacted by these changes, though there is a change to the button. The button now uses a larger size for the horizontal spacing for a button, giving it a wider hitbox and making the button feel less crowded.

4a290700635bfdf4411ea9b7bb6488dd8bfe731e

Files

flake8 passed.

JSHint passed.

Change Summary:

Fixed the padding around the buttons. They were too big.

Commits:

	Summary	ID
	Fix the scaling units to make better sense. The scaling units were set somewhat early in development to a base of 0.8em, which was a bit on the small size. The `m` (medium) size was almost always too small, requiring use of the in-between `ml` (medium-large) size. Similarly, `l` (large) was never large enough, requiring `xl` or `xl` sizes. And those were still on the small size, given their upper range on the scale. The scale has now been redone to use `1em` as the base, and to change the `l`, `xl`, and `xxl` scales to better represent their names. This gives us a slightly larger UI by default when using these units, which works better on both touchscreens and modern desktop displays. Mostly, this doesn't impact things too much until you get to the `ml` size and higher. Any UI components making use of these will need updates to choose more correct sizes. Ink itself isn't really impacted by these changes, though there is a change to the button. The button now uses a larger size for the horizontal spacing for a button, giving it a wider hitbox and making the button feel less crowded.	4b440c2fa6332ecba2074ee761660dff0c023d6b
	Fix the scaling units to make better sense. The scaling units were set somewhat early in development to a base of 0.8em, which was a bit on the small size. The `m` (medium) size was almost always too small, requiring use of the in-between `ml` (medium-large) size. Similarly, `l` (large) was never large enough, requiring `xl` or `xl` sizes. And those were still on the small size, given their upper range on the scale. The scale has now been redone to use `1em` as the base, and to change the `l`, `xl`, and `xxl` scales to better represent their names. This gives us a slightly larger UI by default when using these units, which works better on both touchscreens and modern desktop displays. Mostly, this doesn't impact things too much until you get to the `ml` size and higher. Any UI components making use of these will need updates to choose more correct sizes. Ink itself isn't really impacted by these changes, though there is a change to the button. The button now uses a larger size for the horizontal spacing for a button, giving it a wider hitbox and making the button feel less crowded.	4a290700635bfdf4411ea9b7bb6488dd8bfe731e

Diff:

Revision 2 (+12 -12)

Show changes

	src/ink/less/themes/default/units.less
	src/ink/less/themes/default/components/alert.theme.less

Removed Files:

Added Files:

Checks run (2 succeeded)

flake8 passed.

JSHint passed.

Description:

		The scaling units were set somewhat early in development to a base of
		0.8em, which was a bit on the small size. The `m` (medium) size was
		almost always too small, requiring use of the in-between `ml`
		(medium-large) size. Similarly, `l` (large) was never large enough,
		requiring `xl` or `xl` sizes. And those were still on the small size,
		given their upper range on the scale.

		The scale has now been redone to use `1em` as the base, and to change
		the `l`, `xl`, and `xxl` scales to better represent their names. This
		gives us a slightly larger UI by default when using these units, which
		works better on both touchscreens and modern desktop displays.

		Mostly, this doesn't impact things too much until you get to the `ml`
		size and higher. Any UI components making use of these will need updates
		to choose more correct sizes.

~		Ink itself isn't really impacted much by these changes, though there is a
~		change to the button. The button now uses a larger size for the
	~	Ink itself isn't really impacted much by these changes. Alerts required
	~	small changes to the layout to reduce the distance to actions.
-		horizontal spacing for a button, giving it a wider hitbox and making the
-		button feel less crowded.

Ship it!

```
Ship It!
```

Ship it!

```
Ship It!
```

Status: Closed (submitted)

Change Summary:

Pushed to master (05539e1)