fix video length and tag cut off #3376

Closed
myungwoo-Y wants to merge 1 commit from master into master
myungwoo-Y commented 2019-12-15 07:36:08 +01:00 (Migrated from github.com)

PR Checklist

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 have checked that this PR does not introduce a breaking change
  • This PR introduces breaking changes and I have provided a detailed explanation below

PR Type

What kind of change does this PR introduce?

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

Fixes

Issue Number: #3374

What is the current behavior?

When the screen is reduced, the playing time is gone.
Containers with playing time have a width without considering the image next to it.

ezgif com-video-to-gif

What is the new behavior?

Container considered the image width for the maximum width.

ezgif com-video-to-gif (1)

Other information

The issue of tags has not yet been resolved. I'll try to solve it.

## PR Checklist <!-- For the checkbox formatting to work properly, make sure there are no spaces on either side of the "x" --> Please check all that apply to this PR using "x": - [x] I have checked that this PR is not a duplicate of an existing PR (open, closed or merged) - [x] I have checked that this PR does not introduce a breaking change - [x] This PR introduces breaking changes and I have provided a detailed explanation below ## PR Type What kind of change does this PR introduce? - [x] Bugfix - [ ] Feature - [ ] Code style update (formatting) - [ ] Refactoring (no functional changes) - [ ] Documentation changes - [ ] Other - Please describe: ## Fixes Issue Number: #3374 ## What is the current behavior? When the screen is reduced, the playing time is gone. Containers with playing time have a width without considering the image next to it. ![ezgif com-video-to-gif](https://user-images.githubusercontent.com/38170596/70858991-7a1fc000-1f4f-11ea-923b-acc891ae0fc5.gif) ## What is the new behavior? Container considered the image width for the maximum width. ![ezgif com-video-to-gif (1)](https://user-images.githubusercontent.com/38170596/70859017-0500ba80-1f50-11ea-8c48-0291449b15ff.gif) ## Other information The issue of tags has not yet been resolved. I'll try to solve it. <!-- If this PR contains a breaking change, please describe the impact and solution strategy for existing applications below. -->
neb-b (Migrated from github.com) reviewed 2019-12-16 04:42:01 +01:00
@ -649,3 +136,1 @@
position: relative;
display: flex;
text-align: left;
width: calc(100% - 12rem);
neb-b (Migrated from github.com) commented 2019-12-16 04:42:00 +01:00

Thanks for the PR! Where does the 12rem come from?

Thanks for the PR! Where does the 12rem come from?
myungwoo-Y (Migrated from github.com) reviewed 2019-12-16 05:14:37 +01:00
@ -649,3 +136,1 @@
position: relative;
display: flex;
text-align: left;
width: calc(100% - 12rem);
myungwoo-Y (Migrated from github.com) commented 2019-12-16 05:14:37 +01:00

Hi! 14rem is the fixed size of the thumbnail defined in _claim-list.scss.

b50ec8fab1/ui/scss/component/_claim-list.scss (L81-L83)

If I subtract 14 rem, the space was too big, so I subtract 12rem.

Hi! 14rem is the fixed size of the thumbnail defined in _claim-list.scss. https://github.com/lbryio/lbry-desktop/blob/b50ec8fab1ba0c3d7b09cb7fc8272bf41130b178/ui/scss/component/_claim-list.scss#L81-L83 If I subtract 14 rem, the space was too big, so I subtract 12rem.
neb-b (Migrated from github.com) reviewed 2019-12-16 17:42:12 +01:00
@ -649,3 +136,1 @@
position: relative;
display: flex;
text-align: left;
width: calc(100% - 12rem);
neb-b (Migrated from github.com) commented 2019-12-16 17:42:11 +01:00

I think this should be possible without hardcoding some limit. That could cause issues when we add a better mobile view, or for larger claim previews.

I think this should be possible without hardcoding some limit. That could cause issues when we add a better mobile view, or for larger claim previews.
myungwoo-Y (Migrated from github.com) reviewed 2019-12-16 20:45:37 +01:00
@ -649,3 +136,1 @@
position: relative;
display: flex;
text-align: left;
width: calc(100% - 12rem);
myungwoo-Y (Migrated from github.com) commented 2019-12-16 20:45:37 +01:00

I think I need to use javascript to avoid hardcoding. Do you think it is a good idea?

I think I need to use javascript to avoid hardcoding. Do you think it is a good idea?
neb-b (Migrated from github.com) reviewed 2019-12-16 21:00:02 +01:00
@ -649,3 +136,1 @@
position: relative;
display: flex;
text-align: left;
width: calc(100% - 12rem);
neb-b (Migrated from github.com) commented 2019-12-16 21:00:01 +01:00

Not necessarily. Maybe check how much space the tags take up and then see if we should only render 3 tags instead of 4? (Or something like that).

It might be too much for the homepage to handle when you scroll down a lot and have a ton of tags on the page, but I'm all for trying it!

Not necessarily. Maybe check how much space the tags take up and then see if we should only render 3 tags instead of 4? (Or something like that). It might be too much for the homepage to handle when you scroll down a lot and have a ton of tags on the page, but I'm all for trying it!
kauffj commented 2019-12-23 21:05:05 +01:00 (Migrated from github.com)

@myungwoo-Y please re-open if you decide to work on this

you can also join our chat to talk to other devs in real time

@myungwoo-Y please re-open if you decide to work on this you can also join our [chat](https://chat.lbry.com) to talk to other devs in real time

Pull request closed

Sign in to join this conversation.
No reviewers
No milestone
No project
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#3376
No description provided.