Fix dropdown caret spacing #7096

Merged

arschrier merged 2 commits from fix-dropdown-caret-spacing into master

2021-09-15 21:18:18 +02:00

Conversation 1 Commits 2 Files changed 3 +6 -3

arschrier commented

2021-09-14 23:54:22 +02:00

(Migrated from github.com)

Copy link

Fixes

Fixes #6927

What is the current behavior?

Dropdown caret has no space to the right

What is the new behavior?

Dropdown caret has space on either side

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

## Fixes Fixes #6927 ## What is the current behavior? Dropdown caret has no space to the right <img width="704" alt="Screen Shot 2021-09-14 at 10 59 58 AM" src="https://user-images.githubusercontent.com/64950861/130342618-1b84d970-3a82-4224-a822-4d59be401bff.png"> <img width="299" alt="Screen Shot 2021-09-14 at 10 57 06 AM" src="https://user-images.githubusercontent.com/64950861/130342731-cf24fbce-ca89-4c0c-9c1e-b05a26addf3f.png"> ## What is the new behavior? Dropdown caret has space on either side <img width="704" alt="Screen Shot 2021-09-14 at 10 59 58 AM" src="https://user-images.githubusercontent.com/31634995/133338306-fe623de5-0611-489a-811b-c663bc7de14f.png"> <img width="344" alt="Screen Shot 2021-09-14 at 12 33 38 PM" src="https://user-images.githubusercontent.com/31634995/133338272-671a2d69-44df-49ea-a3c0-8d04b6b0924f.png"> <img width="299" alt="Screen Shot 2021-09-14 at 10 57 06 AM" src="https://user-images.githubusercontent.com/31634995/133338320-8904466a-0696-4c22-b15b-0953654371d2.png"> ## 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": - [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 (Migrated from github.com) reviewed 2021-09-15 17:57:45 +02:00

ui/scss/component/_claim-search.scss

jessopb (Migrated from github.com) commented

2021-09-15 17:57:35 +02:00

Copy link

This 2.75 is pretty specific, none of the spacing vars worked? Is it because of the inherent size of the icon? Can that be calculated?

arschrier (Migrated from github.com) reviewed 2021-09-15 18:56:03 +02:00

ui/scss/component/_claim-search.scss

arschrier (Migrated from github.com) commented

2021-09-15 18:56:02 +02:00

Copy link

I tried going the spacing vars route. Those could work, but the spacing isn't even. I think the ideal spacing lies somewhere between spacing-l and spacing-xl.

spacing-l:
Screen Shot 2021-09-13 at 10 30 44 PM

spacing-xl:
Screen Shot 2021-09-13 at 10 31 36 PM

The width of the caret itself is roughly 0.875. Here's what the spacing would look like at 2.875 (1 + 0.875 + 1):

I went with 2.75 because the text takes up a little extra space to the right (which makes the space to the left of the caret a bit bigger).

Interested to know what you think!

I tried going the spacing vars route. Those could work, but the spacing isn't even. I think the ideal spacing lies somewhere between `spacing-l` and `spacing-xl`. `spacing-l`: <img width="656" alt="Screen Shot 2021-09-13 at 10 30 44 PM" src="https://user-images.githubusercontent.com/31634995/133468394-b8d9dafe-e8eb-4d4d-abeb-7dab2c5cfe12.png"> `spacing-xl`: <img width="717" alt="Screen Shot 2021-09-13 at 10 31 36 PM" src="https://user-images.githubusercontent.com/31634995/133468376-de35b916-af63-4807-af88-e44e2c015277.png"> The width of the caret itself is roughly 0.875. Here's what the spacing would look like at 2.875 (1 + 0.875 + 1): <img width="162" alt="Screen Shot 2021-09-15 at 11 36 51 AM" src="https://user-images.githubusercontent.com/31634995/133473818-5f2bb015-0d48-4749-a334-ba96ceb8d306.png"> I went with 2.75 because the text takes up a little extra space to the right (which makes the space to the left of the caret a bit bigger). <img width="162" alt="Screen Shot 2021-09-15 at 11 51 05 AM" src="https://user-images.githubusercontent.com/31634995/133475914-6e3e492c-ee25-41bc-abee-345748762d03.png"> Interested to know what you think!

jessopb (Migrated from github.com) reviewed 2021-09-15 20:36:03 +02:00

ui/scss/component/_claim-search.scss

jessopb (Migrated from github.com) commented

2021-09-15 20:36:03 +02:00

Copy link

I actually like -xl

jessopb commented

2021-09-15 21:18:26 +02:00

(Migrated from github.com)

Copy link

Nice, thanks!

🎉 1

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#7096

Reference in a new issue

Repository

LBRYCommunity/lbry-desktop

Title

Body

No description provided.

Delete branch "fix-dropdown-caret-spacing"

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?

Rows
Columns