Additional UX fixes #1661

2018-06-21T04:00:06+02:00

neb-b commented

2018-06-21 04:00:06 +02:00

(Migrated from github.com)

Changes

Some changes based on comments here

Brought back the sticky header. Based on @Invariant-Change's design
Send tip icon is now a present
Change the download icon color, purple looked on light mode.
- Green looks better, but doesn't stand out as much as black. Maybe we should just use black on light mode?
Slightly improve spacing on file page (you are right, there are some kinks to be worked out with form row/form elements that are causing inconsistent spacing)
- Will revist, but better than what we currently have

Images

#### Changes Some changes based on comments [here](https://github.com/lbryio/lbry-app/pull/1650#issuecomment-398911888) - Brought back the sticky header. Based on @Invariant-Change's design - Send tip icon is now a present - Change the download icon color, purple looked on light mode. - Green looks better, but doesn't stand out as much as black. Maybe we should just use black on light mode? - Slightly improve spacing on file page (you are right, there are some kinks to be worked out with form row/form elements that are causing inconsistent spacing) - Will revist, but better than what we currently have #### Images <img width="400" alt="screen shot 2018-06-25 at 2 21 11 am" src="https://user-images.githubusercontent.com/16882830/41833472-77205362-781e-11e8-96f9-6be8564b8fb8.png"> <img width="400" alt="screen shot 2018-06-25 at 2 24 16 am" src="https://user-images.githubusercontent.com/16882830/41833648-33978902-781f-11e8-9780-e7732723edb5.png"> <img width="400" alt="screen shot 2018-06-25 at 2 26 30 am" src="https://user-images.githubusercontent.com/16882830/41833652-34f9a91a-781f-11e8-9a3f-4a1ecd3ae965.png"> <img width="400" alt="screen shot 2018-06-25 at 2 48 53 am" src="https://user-images.githubusercontent.com/16882830/41834490-7a7c8270-7822-11e8-8620-1b60a4523a76.png"> <img width="400" alt="screen shot 2018-06-25 at 2 08 15 am" src="https://user-images.githubusercontent.com/16882830/41833068-cfbebe98-781c-11e8-9e27-39b69d2f6bb7.png"> <img width="400" alt="screen shot 2018-06-25 at 2 08 46 am" src="https://user-images.githubusercontent.com/16882830/41833073-d4ca4aba-781c-11e8-8057-685e4d3ce576.png">

kauffj (Migrated from github.com) approved these changes 2018-06-25 16:42:56 +02:00

kauffj (Migrated from github.com) left a comment

LGTM x2 (the code and the UI :)

src/renderer/scss/component/_header.scss

					
				@ -1,17 +1,37 @@

				.header {

				  position: fixed;

kauffj (Migrated from github.com) commented

2018-06-25 16:41:06 +02:00

Now that the header is fixed, should the address bar stretch to take the remaining space available?

src/renderer/scss/component/_header.scss

					
				@ -7,0 +21,4 @@

				  padding: 0 $spacing-width * 1/2;

				  @media only screen and (min-width: $medium-breakpoint) {

				    .btn {

kauffj (Migrated from github.com) commented

2018-06-25 16:41:37 +02:00

Is there a reason we set rules to only screen?

neb-b (Migrated from github.com) reviewed 2018-06-25 17:28:02 +02:00

src/renderer/scss/component/_header.scss

					
				@ -1,17 +1,37 @@

				.header {

				  position: fixed;

neb-b (Migrated from github.com) commented

2018-06-25 17:28:02 +02:00

yes

neb-b (Migrated from github.com) reviewed 2018-06-25 17:30:41 +02:00

src/renderer/scss/component/_header.scss

					
				@ -7,0 +21,4 @@

				  padding: 0 $spacing-width * 1/2;

				  @media only screen and (min-width: $medium-breakpoint) {

				    .btn {

neb-b (Migrated from github.com) commented

2018-06-25 17:30:41 +02:00

I guess not since screen will be the only one used.

QuirkyRobots (Migrated from github.com) reviewed 2018-06-25 17:38:25 +02:00

src/renderer/scss/component/_header.scss

					
				@ -7,0 +21,4 @@

				  padding: 0 $spacing-width * 1/2;

				  @media only screen and (min-width: $medium-breakpoint) {

				    .btn {

QuirkyRobots (Migrated from github.com) commented

2018-06-25 17:38:25 +02:00

Media Types are optional and if not used it defaults to All. Unless targeting a printer or screen reader, there is no need for them.

`Media Types` are **optional** and if **not** used it defaults to `All`. Unless targeting a **printer** or **screen reader**, there is no need for them.

Sign in to join this conversation.

No reviewers

kauffj