LBRYCommunity/lbry-desktop

Fork

You've already forked lbry-desktop

Code Issues 596 Pull requests 6 Projects Releases 238 Packages Wiki Activity

Minor layout fixes depending on window size #7709

Merged

jm-morani merged 1 commit from minor-dynamic-layout-fixes into master

2022-10-25 16:03:20 +02:00

Conversation 2 Commits 1 Files changed 11 +36 -26

jm-morani commented

2022-10-25 04:33:56 +02:00

(Migrated from github.com)

Copy link

Disable theatre mode styles for medium screen (or lower)

The theatre mode icon only shows up when window is greater than 1150px ($breakpoint-medium).
Users had to increase the window width to toggle it, then shrink the window back.
Now, the use of theatre mode styles is consistent with the display of the icon.
Moreover, those styles didn't compound well with small screen (900px or less).

Fix the width of the cover in theatre mode

The CSS "100vw" is the width of the window not reduced of the scroll bar.
Therefor, the right-hand side of the cover was hidden under the scroll bar.
As well, the slightly bigger width used to trigger a slightly bigger height.
This height is used as a the reference for the player's height.
So the extra height could lead to black margins on top and bottom of the video.
(Reproducible in theatre mode, when window width slightly more than 1150px and height big enough)
Now, I removed it, so it rather inherits "100%".

Fix oddities when screen width is exactly 1150px

According to useIsMediumScreen(), the screen is medium when width is up to 1150px.
This media query is equivalent (max-width: $breakpoint-medium).
But, (min-width: $breakpoint-medium) is a wrong opposite as it includes 1150px.
When the width is exactly at the limit, medium and large styles overlap.
(Eg. Check the width of covers in the list of the main page, when window width is 1150px)
Same problem for other $breakpoint, but I haven't fixed those.

Remove duplicate from the changelog

Question: Is it possible to lower the minWidth of the window?

I regularly use the application at width 670px (thank to a tiling window manager).
(Including this PR), the small screen mode seems fine. So, why not to make it available to all users?
(It may even possible to shrink further, but I haven't test enough to recommend that).

Other information

PR Checklist

Toggle...

What kind of change does this PR introduce?

Bugfix
Feature
Code style update (formatting)
Refactoring (no functional changes)
Documentation changes
Other - Please describe:

Please check all that apply to this PR using "x":

I have checked that this PR is not a duplicate of an existing PR (open, closed or merged)
I added a line describing my change to CHANGELOG.md
I have checked that this PR does not introduce a breaking change
This PR introduces breaking changes and I have provided a detailed explanation below

## Disable theatre mode styles for medium screen (or lower) The theatre mode icon only shows up when window is greater than 1150px ($breakpoint-medium). Users had to increase the window width to toggle it, then shrink the window back. Now, the use of theatre mode styles is consistent with the display of the icon. Moreover, those styles didn't compound well with small screen (900px or less). ## Fix the width of the cover in theatre mode The CSS "100vw" is the width of the window not reduced of the scroll bar. Therefor, the right-hand side of the cover was hidden under the scroll bar. As well, the slightly bigger width used to trigger a slightly bigger height. This height is used as a the reference for the player's height. So the extra height could lead to black margins on top and bottom of the video. (Reproducible in theatre mode, when window width slightly more than 1150px and height big enough) Now, I removed it, so it rather inherits "100%". ## Fix oddities when screen width is exactly 1150px According to useIsMediumScreen(), the screen is medium when width is up to 1150px. This media query is equivalent `(max-width: $breakpoint-medium)`. But, `(min-width: $breakpoint-medium)` is a wrong opposite as it includes 1150px. When the width is exactly at the limit, medium and large styles overlap. (Eg. Check the width of covers in the list of the main page, when window width is 1150px) Same problem for other $breakpoint, but I haven't fixed those. ## Remove duplicate from the changelog ## Question: Is it possible to lower the minWidth of the window? I regularly use the application at width 670px (thank to a tiling window manager). (Including this PR), the small screen mode seems fine. So, why not to make it available to all users? (It may even possible to shrink further, but I haven't test enough to recommend that). ## Other information  ## PR Checklist  <details><summary>Toggle...</summary> What kind of change does this PR introduce? - [x] Bugfix - [ ] Feature - [ ] Code style update (formatting) - [ ] Refactoring (no functional changes) - [ ] Documentation changes - [ ] Other - Please describe: Please check all that apply to this PR using "x": - [ ] I have checked that this PR is not a duplicate of an existing PR (open, closed or merged) - [ ] I added a line describing my change to CHANGELOG.md - [x] I have checked that this PR does not introduce a breaking change - [ ] This PR introduces breaking changes and I have provided a detailed explanation below </details>

jessopb commented

2022-10-25 15:40:35 +02:00

(Migrated from github.com)

Copy link

Thanks for the well thought-out PR. I will test it today.
For your question, the minimum size is set here if you would like to continue to test it. As a window tiler myself, I would support this.
7ad66b99e7/electron/createWindow.js (L39)
We're also interested in improving the header/hamburger display on smaller screens if so.
There are probably a lot of things like this in smaller windows and the general issue of breakpoint consistency you mentioned.

Thanks for the well thought-out PR. I will test it today. For your question, the minimum size is set here if you would like to continue to test it. As a window tiler myself, I would support this. https://github.com/lbryio/lbry-desktop/blob/7ad66b99e78c8c6ac89e905fd4aaa18ce7b56e33/electron/createWindow.js#L39 We're also interested in improving the header/hamburger display on smaller screens if so. There are probably a lot of things like this in smaller windows and the general issue of breakpoint consistency you mentioned. ![image](https://user-images.githubusercontent.com/36554050/197792465-6d641771-f8cb-485a-9be0-db535acfdd4d.png)

jessopb commented

2022-10-26 18:00:46 +02:00

(Migrated from github.com)

Copy link

Thanks for this @jm-morani , can we show you some appreciation?

Thanks for this @jm-morani , can we show you some [appreciation](https://lbry.com/faq/appreciation)?

Reviewers

No reviewers

Labels

Clear labels

Work is part of a proposal

Beamer is waiting on you!

Discuss this issue at the next planning meeting, then remove this label

Welcome to Hacktoberfest

No knowledge of the existing code required

level: 2

Some knowledge of the existing code is recommended

level: 3

Significant knowledge of the existing code is recommended

level: 4

Intimate knowledge of the existing code is recommended

merge when green

needs: exploration

Solution unclear, needs research

needs: grooming

Issue needs to be groomed before work can start

needs: priority

Priority level needs to be defined

needs: repro

Issue needs step-by-step instructions on how to reproduce in latest code

needs: tech design

Needs technical design signoff before implementation can begin

Issue is blocking release, do ASAP

priority: high

Work needs to be moved into sprint ASAP

priority: low

Work should be done but can stay in the backlog for now

priority: medium

Work needs to be done within 2-3 sprints

protocol dependent

recsys

redesign

general redesign not prioritize for anyone release

regression

resilience

sdk dependent

Requires work on lbry-sdk repo

Tom's Wishlist

trending

type: bug

Existing functionality is wrong or broken

type: discussion

A conversation. No specific changes requested

type: improvement

Existing (or partially existing) functionality needs to be changed

type: new feature

New functionality that does not exist yet

type: refactor

Minimal user-visible changes, but significant internal work

type: task

Either work that's not related to the code, or a small chore that does not fit into other categories

type: testing

Solution needs additional user testing

unplanned

Work that was not planned into the spirnt, took priority over planned work

No labels

Milestone

Clear milestone

No items

No milestone

Projects

Clear projects

No items

No project

Assignees

Clear assignees

No assignees

1 participant

Notifications

Due date

The due date is invalid or out of range. Please use the format "yyyy-mm-dd".

No due date set.

Dependencies

No dependencies set.

Reference: LBRYCommunity/lbry-desktop#7709

Reference in a new issue

Repository

LBRYCommunity/lbry-desktop

Title

Body

No description provided.

Delete branch "minor-dynamic-layout-fixes"

Deleting a branch is permanent. Although the deleted branch may continue to exist for a short time before it actually gets removed, it CANNOT be undone in most cases. Continue?