LBRYCommunity/lbry-desktop

Fork 0

Styling Fixes - buttons / whitespace #1598

New issue

Closed

opened 2018-06-15 08:56:59 +02:00 by QuirkyRobots · 9 comments

QuirkyRobots commented

2018-06-15 08:56:59 +02:00

(Migrated from github.com)

Open File button is not inline with the other buttons creating unnecessary whitespace and looks broken.

Result

A few minor changes, including fixing the auto-play tick-box and subscribe button and you end up with:

**Open File** button is not `inline` with the other buttons creating unnecessary **whitespace** and looks broken. ![image](https://user-images.githubusercontent.com/29914179/41453172-05423cbe-70b8-11e8-8a6a-ad9afe613a78.png) ![image](https://user-images.githubusercontent.com/29914179/41453523-6c755b4a-70b9-11e8-8d38-75ee6658ba91.png) ![image](https://user-images.githubusercontent.com/29914179/41453532-712bc016-70b9-11e8-82d9-3ceee3a4eb6b.png) ## Result A few minor changes, including fixing the **auto-play tick-box** and **subscribe button** and you end up with: ![image](https://user-images.githubusercontent.com/29914179/41454342-645b2b6c-70bc-11e8-84d4-b96d7649f38d.png)

QuirkyRobots commented

2018-06-15 09:01:22 +02:00

(Migrated from github.com)

If I get time this weekend, I'll give it a go.

neb-b commented

2018-06-15 09:11:41 +02:00

(Migrated from github.com)

@Invariant-Change I'm a fan of this. A couple of thoughts:

We should keep the border-radius so we have a consistent button style.
I think the subscription button should still stay on the right side, it is related to the channel, not the file, so I don't think it should be grouped with the file actions
You can hold off the autoplay styling. It will be improved here https://github.com/lbryio/lbry-app/pull/1599

@Invariant-Change I'm a fan of this. A couple of thoughts: - We should keep the border-radius so we have a consistent button style. - I think the subscription button should still stay on the right side, it is related to the channel, not the file, so I don't think it should be grouped with the file actions - You can hold off the autoplay styling. It will be improved here https://github.com/lbryio/lbry-app/pull/1599

neb-b commented

2018-06-15 09:19:42 +02:00

(Migrated from github.com)

One of the main reasons for keeping the "Download/Open" button on it's own line was because it loses the button as it's being downloaded. It may look fine inline, but we might need to alter it's styling while the file is being downloaded. <img width="251" alt="screen shot 2018-06-15 at 3 15 53 am" src="https://user-images.githubusercontent.com/16882830/41455373-efa71068-704a-11e8-93bc-843457984be1.png">

QuirkyRobots commented

2018-06-15 09:26:49 +02:00

(Migrated from github.com)

For buttons/elements that disappear while downloading, maybe disable them, rather than hide and keep them inline?

<button type="button" disabled>Click Me!</button>

document.getElementById("myBtn").disabled = true;

For buttons/elements that **disappear** while downloading, maybe **disable** them, rather than hide and keep them inline? ```css <button type="button" disabled>Click Me!</button> ``` ```js document.getElementById("myBtn").disabled = true; ```

QuirkyRobots commented

2018-06-15 12:22:45 +02:00

(Migrated from github.com)

Q) We should keep the border-radius so we have a consistent button style.
A) Yes, consistency paramount. I was playing around with theme ideas. The app could do with some more. I've got some great ideas in this department, which I am working on in my secret basement at groom lake, hehe!
Q) I think the subscription button should still stay on the right side, it is related to the channel, not the file, so I don't think it should be grouped with the file actions
A) Yes. However, it currently looks like it's there because the code is broken. It needs some love so that it looks like it's meant to be there.
Q) You can hold off the autoplay styling. It will be improved here #1599
A) Sure. IMO, a nice toggle button would work well.

* **Q) We should keep the border-radius so we have a consistent button style.** * A) Yes, consistency paramount. I was playing around with theme ideas. The app could do with some more. I've got some great ideas in this department, which I am working on in my secret basement at groom lake, hehe! * **Q) I think the subscription button should still stay on the right side, it is related to the channel, not the file, so I don't think it should be grouped with the file actions** * A) Yes. However, it currently looks like it's there because the code is broken. It needs some love so that it looks like it's meant to be there. * **Q) You can hold off the autoplay styling. It will be improved here #1599** * A) Sure. IMO, a nice toggle button would work well. ![image](https://user-images.githubusercontent.com/29914179/41463429-c672513c-70d9-11e8-903a-3e541dcb4705.png)

👍 1

QuirkyRobots commented

2018-06-15 15:32:30 +02:00

(Migrated from github.com)

Just playing around with styling in this image, but I do think icons being on the same level as the channel name is cleaner. I know this idea was thrown out previously, but definitely should remain an idea, especially later on down the road if/when more meta data is added such as views. YouTube does this with their icons, such as music, verified, etc (see image).

Just playing around with styling in this image, but I do think **icons** being on the **same level** as the channel name is **cleaner**. I know this idea was thrown out previously, but definitely should remain an idea, especially later on down the road if/when more meta data is added such as views. **YouTube** does this with their icons, such as music, verified, etc (see image). ![image](https://user-images.githubusercontent.com/29914179/41470366-b81c7e0e-70f3-11e8-83f5-147b30b79a45.png) ![image](https://user-images.githubusercontent.com/29914179/41470472-05edc93a-70f4-11e8-83f5-b5824e6cb14e.png)

neb-b commented

2018-06-15 17:21:24 +02:00

(Migrated from github.com)

I am definitely a fan of keeping the links separate from the channel name. On Youtube they do it because those icons give meaning to the channel (verified, artist), ours are just for the file.

neb-b commented

2018-06-20 03:20:46 +02:00

(Migrated from github.com)

Will be addressed in https://github.com/lbryio/lbry-app/pull/1650