create account

Fixed squeezed replies issue and large area of focus for reading time issue by sirrius

View this thread on: hive.blog |  peakd.com |  ecency.com
utopian-io · @sirrius ·
$36.19
Fixed squeezed replies issue and large area of focus for reading time issue
In this development contribution I want to report two issues I fixed for the amazing [Busy.org](https://busy.org) website.

<center>
![contribution10.png](https://res.cloudinary.com/hpiynhbhq/image/upload/v1512930803/ny5ttgnvzkwjpy1h25nm.png)
</center>

### The first issue
was that when there were a lot of replies, the comments would get squeezed on the right side and eventually would look bad or could not be readable anymore.

Here is how that looked like:
![busy-issue-1088.png](https://res.cloudinary.com/hpiynhbhq/image/upload/v1512930609/arf09lsxa3gz3ye7r7us.png)

The changes I made:
- added CSS class `Comment__replies--never-indent`
- put that class in comments starting with 5th level
- removed `@media @small` from `.Comment__text` so that comment avatars would show up after 5th level
- updated the hardcoded `.Comment__replies--no-indent` margin to use the `@comment-text-offset-small` var

What this does is that the comment replies will not indent anymore after the 5th level of replies.

The pull request: https://github.com/busyorg/busy/pull/1090
The issue it fixes: https://github.com/busyorg/busy/issues/1088

Here is also a screenshot of the merged pull request:
![busy-pull-1090.png](https://res.cloudinary.com/hpiynhbhq/image/upload/v1512930789/zljacgrwl8lpkzl3gbxt.png)

### The second issue
was that the "post reading time" tooltip had a large area of focus, so that it would appear even if you were having the cursor over the left separating dot.

Here is a gif to illustrate the issue:
![busy-issue-1107.gif](https://res.cloudinary.com/hpiynhbhq/image/upload/v1512931082/kq3lrukp4rx0tr3oslsp.gif)
<center>Thanks @espoem for this gif and for reporting both issues.</center>

The changes I made:
- moved the `CommentFooter__bullet` outside of the Tooltip
- made small CSS changes to keep the existing style given the above change

With the above changes, the "reading time" tooltip would appear when expected.

The pull request: https://github.com/busyorg/busy/pull/1111
The issue it fixes: https://github.com/busyorg/busy/issues/1107

Here is also a screenshot of the merged pull request:
![busy-pull-1111.png](https://res.cloudinary.com/hpiynhbhq/image/upload/v1512931357/gsi7piu4z6orbdpg65go.png)

<br /><hr/><em>Posted on <a href="https://utopian.io/utopian-io/@sirrius/fixed-squeezed-replies-issue-and-large-area-of-focus-for-reading-time-issue">Utopian.io -  Rewarding Open Source Contributors</a></em><hr/>
👍  , , , , , , , , , , , , ,
properties (23)
authorsirrius
permlinkfixed-squeezed-replies-issue-and-large-area-of-focus-for-reading-time-issue
categoryutopian-io
json_metadata"{"community":"utopian","app":"utopian/1.0.0","format":"markdown","repository":{"id":64382195,"name":"busy","full_name":"busyorg/busy","owner":{"login":"busyorg","id":25360286,"avatar_url":"https://avatars0.githubusercontent.com/u/25360286?v=4","gravatar_id":"","url":"https://api.github.com/users/busyorg","html_url":"https://github.com/busyorg","followers_url":"https://api.github.com/users/busyorg/followers","following_url":"https://api.github.com/users/busyorg/following{/other_user}","gists_url":"https://api.github.com/users/busyorg/gists{/gist_id}","starred_url":"https://api.github.com/users/busyorg/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/busyorg/subscriptions","organizations_url":"https://api.github.com/users/busyorg/orgs","repos_url":"https://api.github.com/users/busyorg/repos","events_url":"https://api.github.com/users/busyorg/events{/privacy}","received_events_url":"https://api.github.com/users/busyorg/received_events","type":"Organization","site_admin":false},"private":false,"html_url":"https://github.com/busyorg/busy","description":"Blockchain-based social network where anyone can earn rewards 🚀","fork":false,"url":"https://api.github.com/repos/busyorg/busy","forks_url":"https://api.github.com/repos/busyorg/busy/forks","keys_url":"https://api.github.com/repos/busyorg/busy/keys{/key_id}","collaborators_url":"https://api.github.com/repos/busyorg/busy/collaborators{/collaborator}","teams_url":"https://api.github.com/repos/busyorg/busy/teams","hooks_url":"https://api.github.com/repos/busyorg/busy/hooks","issue_events_url":"https://api.github.com/repos/busyorg/busy/issues/events{/number}","events_url":"https://api.github.com/repos/busyorg/busy/events","assignees_url":"https://api.github.com/repos/busyorg/busy/assignees{/user}","branches_url":"https://api.github.com/repos/busyorg/busy/branches{/branch}","tags_url":"https://api.github.com/repos/busyorg/busy/tags","blobs_url":"https://api.github.com/repos/busyorg/busy/git/blobs{/sha}","git_tags_url":"https://api.github.com/repos/busyorg/busy/git/tags{/sha}","git_refs_url":"https://api.github.com/repos/busyorg/busy/git/refs{/sha}","trees_url":"https://api.github.com/repos/busyorg/busy/git/trees{/sha}","statuses_url":"https://api.github.com/repos/busyorg/busy/statuses/{sha}","languages_url":"https://api.github.com/repos/busyorg/busy/languages","stargazers_url":"https://api.github.com/repos/busyorg/busy/stargazers","contributors_url":"https://api.github.com/repos/busyorg/busy/contributors","subscribers_url":"https://api.github.com/repos/busyorg/busy/subscribers","subscription_url":"https://api.github.com/repos/busyorg/busy/subscription","commits_url":"https://api.github.com/repos/busyorg/busy/commits{/sha}","git_commits_url":"https://api.github.com/repos/busyorg/busy/git/commits{/sha}","comments_url":"https://api.github.com/repos/busyorg/busy/comments{/number}","issue_comment_url":"https://api.github.com/repos/busyorg/busy/issues/comments{/number}","contents_url":"https://api.github.com/repos/busyorg/busy/contents/{+path}","compare_url":"https://api.github.com/repos/busyorg/busy/compare/{base}...{head}","merges_url":"https://api.github.com/repos/busyorg/busy/merges","archive_url":"https://api.github.com/repos/busyorg/busy/{archive_format}{/ref}","downloads_url":"https://api.github.com/repos/busyorg/busy/downloads","issues_url":"https://api.github.com/repos/busyorg/busy/issues{/number}","pulls_url":"https://api.github.com/repos/busyorg/busy/pulls{/number}","milestones_url":"https://api.github.com/repos/busyorg/busy/milestones{/number}","notifications_url":"https://api.github.com/repos/busyorg/busy/notifications{?since,all,participating}","labels_url":"https://api.github.com/repos/busyorg/busy/labels{/name}","releases_url":"https://api.github.com/repos/busyorg/busy/releases{/id}","deployments_url":"https://api.github.com/repos/busyorg/busy/deployments","created_at":"2016-07-28T09:27:04Z","updated_at":"2017-12-06T00:16:52Z","pushed_at":"2017-12-10T16:34:46Z","git_url":"git://github.com/busyorg/busy.git","ssh_url":"git@github.com:busyorg/busy.git","clone_url":"https://github.com/busyorg/busy.git","svn_url":"https://github.com/busyorg/busy","homepage":"https://busy.org/","size":60171,"stargazers_count":137,"watchers_count":137,"language":"JavaScript","has_issues":true,"has_projects":true,"has_downloads":true,"has_wiki":true,"has_pages":false,"forks_count":55,"mirror_url":null,"archived":false,"open_issues_count":72,"license":{"key":"mit","name":"MIT License","spdx_id":"MIT","url":"https://api.github.com/licenses/mit"},"forks":55,"open_issues":72,"watchers":137,"default_branch":"master","score":105.29807},"pullRequests":[],"platform":"github","type":"development","tags":["utopian-io","open-source","contribution","web-dev","github"],"users":["media","small","comment-text-offset-small","espoem"],"links":["https://busy.org","https://res.cloudinary.com/hpiynhbhq/image/upload/v1512930803/ny5ttgnvzkwjpy1h25nm.png","https://res.cloudinary.com/hpiynhbhq/image/upload/v1512930609/arf09lsxa3gz3ye7r7us.png","https://res.cloudinary.com/hpiynhbhq/image/upload/v1512930789/zljacgrwl8lpkzl3gbxt.png","https://res.cloudinary.com/hpiynhbhq/image/upload/v1512931082/kq3lrukp4rx0tr3oslsp.gif","https://res.cloudinary.com/hpiynhbhq/image/upload/v1512931357/gsi7piu4z6orbdpg65go.png"],"image":["https://res.cloudinary.com/hpiynhbhq/image/upload/v1512930803/ny5ttgnvzkwjpy1h25nm.png","https://res.cloudinary.com/hpiynhbhq/image/upload/v1512930609/arf09lsxa3gz3ye7r7us.png","https://res.cloudinary.com/hpiynhbhq/image/upload/v1512930789/zljacgrwl8lpkzl3gbxt.png","https://res.cloudinary.com/hpiynhbhq/image/upload/v1512931082/kq3lrukp4rx0tr3oslsp.gif","https://res.cloudinary.com/hpiynhbhq/image/upload/v1512931357/gsi7piu4z6orbdpg65go.png"]}"
created2017-12-10 18:51:45
last_update2017-12-10 18:51:45
depth0
children7
last_payout2017-12-17 18:51:45
cashout_time1969-12-31 23:59:59
total_payout_value26.736 HBD
curator_payout_value9.458 HBD
pending_payout_value0.000 HBD
promoted0.000 HBD
body_length2,440
author_reputation7,408,536,867,118
root_title"Fixed squeezed replies issue and large area of focus for reading time issue"
beneficiaries
0.
accountcnts
weight10
1.
accountfreedom
weight658
2.
accountknowledges
weight47
3.
accountnetuoso
weight6
4.
accountsimnrodrguez
weight22
5.
accounttransisto
weight70
6.
accountutopian-io
weight536
7.
accountxeldal
weight27
max_accepted_payout1,000,000.000 HBD
percent_hbd10,000
post_id23,027,139
net_rshares9,583,692,050,524
author_curate_reward""
vote details (14)
@espoem ·
$0.09
Thank you for contributing to Busy.
👍  
properties (23)
authorespoem
permlinkre-sirrius-fixed-squeezed-replies-issue-and-large-area-of-focus-for-reading-time-issue-20171210t232058457z
categoryutopian-io
json_metadata{"tags":["utopian-io"],"community":"busy","app":"busy/1.0.0"}
created2017-12-10 23:21:00
last_update2017-12-10 23:21:00
depth1
children1
last_payout2017-12-17 23:21:00
cashout_time1969-12-31 23:59:59
total_payout_value0.078 HBD
curator_payout_value0.012 HBD
pending_payout_value0.000 HBD
promoted0.000 HBD
body_length35
author_reputation59,289,149,412,912
root_title"Fixed squeezed replies issue and large area of focus for reading time issue"
beneficiaries[]
max_accepted_payout1,000,000.000 HBD
percent_hbd10,000
post_id23,048,393
net_rshares21,813,348,661
author_curate_reward""
vote details (1)
@sirrius · 
With pleasure, I also learn a lot doing it :)
properties (22)
authorsirrius
permlinkre-espoem-re-sirrius-fixed-squeezed-replies-issue-and-large-area-of-focus-for-reading-time-issue-20171210t234040035z
categoryutopian-io
json_metadata{"tags":["utopian-io"],"app":"steemit/0.1"}
created2017-12-10 23:40:39
last_update2017-12-10 23:40:39
depth2
children0
last_payout2017-12-17 23:40:39
cashout_time1969-12-31 23:59:59
total_payout_value0.000 HBD
curator_payout_value0.000 HBD
pending_payout_value0.000 HBD
promoted0.000 HBD
body_length45
author_reputation7,408,536,867,118
root_title"Fixed squeezed replies issue and large area of focus for reading time issue"
beneficiaries[]
max_accepted_payout1,000,000.000 HBD
percent_hbd10,000
post_id23,049,683
net_rshares0
@justyy ·
$0.09
Thank you for the contribution. It has been approved.

Simply well done. 

You can contact us on [Discord](https://discord.gg/UCvqCsx).
**[[utopian-moderator]](https://utopian.io/moderators)**
👍  
properties (23)
authorjustyy
permlinkre-sirrius-fixed-squeezed-replies-issue-and-large-area-of-focus-for-reading-time-issue-20171210t210441502z
categoryutopian-io
json_metadata{"tags":["utopian-io"],"community":"busy","app":"busy/1.0.0"}
created2017-12-10 21:04:48
last_update2017-12-10 21:04:48
depth1
children1
last_payout2017-12-17 21:04:48
cashout_time1969-12-31 23:59:59
total_payout_value0.070 HBD
curator_payout_value0.022 HBD
pending_payout_value0.000 HBD
promoted0.000 HBD
body_length192
author_reputation280,616,224,641,976
root_title"Fixed squeezed replies issue and large area of focus for reading time issue"
beneficiaries[]
max_accepted_payout1,000,000.000 HBD
percent_hbd10,000
post_id23,038,427
net_rshares22,258,519,042
author_curate_reward""
vote details (1)
@sirrius · 
Thanks a lot @justyy.
properties (22)
authorsirrius
permlinkre-justyy-re-sirrius-fixed-squeezed-replies-issue-and-large-area-of-focus-for-reading-time-issue-20171210t220839445z
categoryutopian-io
json_metadata{"tags":["utopian-io"],"community":"busy","app":"busy/2.1.0"}
created2017-12-10 22:08:39
last_update2017-12-10 22:08:39
depth2
children0
last_payout2017-12-17 22:08:39
cashout_time1969-12-31 23:59:59
total_payout_value0.000 HBD
curator_payout_value0.000 HBD
pending_payout_value0.000 HBD
promoted0.000 HBD
body_length21
author_reputation7,408,536,867,118
root_title"Fixed squeezed replies issue and large area of focus for reading time issue"
beneficiaries[]
max_accepted_payout1,000,000.000 HBD
percent_hbd10,000
post_id23,043,259
net_rshares0
@leveuf · 
I send you a big Hug @Sirrius!! May the New Year bring you only satisfactions in projects and life!! My best regards always for you!!
Cheers!!! ;D
properties (22)
authorleveuf
permlinkre-sirrius-fixed-squeezed-replies-issue-and-large-area-of-focus-for-reading-time-issue-20171225t032742507z
categoryutopian-io
json_metadata{"tags":["utopian-io"],"users":["sirrius"],"app":"steemit/0.1"}
created2017-12-25 03:27:42
last_update2017-12-25 03:27:42
depth1
children0
last_payout2018-01-01 03:27:42
cashout_time1969-12-31 23:59:59
total_payout_value0.000 HBD
curator_payout_value0.000 HBD
pending_payout_value0.000 HBD
promoted0.000 HBD
body_length146
author_reputation21,244,435,866,169
root_title"Fixed squeezed replies issue and large area of focus for reading time issue"
beneficiaries[]
max_accepted_payout1,000,000.000 HBD
percent_hbd10,000
post_id25,107,566
net_rshares0
@steemitboard · 
Congratulations @sirrius! You received a personal award!

<table><tr><td>https://steemitimages.com/70x70/http://steemitboard.com/@sirrius/birthday2.png</td><td>Happy Birthday! - You are on the Steem blockchain for 2 years!</td></tr></table>

<sub>_You can view [your badges on your Steem Board](https://steemitboard.com/@sirrius) and compare to others on the [Steem Ranking](https://steemitboard.com/ranking/index.php?name=sirrius)_</sub>


###### [Vote for @Steemitboard as a witness](https://v2.steemconnect.com/sign/account-witness-vote?witness=steemitboard&approve=1) to get one more award and increased upvotes!
properties (22)
authorsteemitboard
permlinksteemitboard-notify-sirrius-20190726t014656000z
categoryutopian-io
json_metadata{"image":["https://steemitboard.com/img/notify.png"]}
created2019-07-26 01:46:57
last_update2019-07-26 01:46:57
depth1
children0
last_payout2019-08-02 01:47:00
cashout_time1969-12-31 23:59:59
total_payout_value0.000 HBD
curator_payout_value0.000 HBD
pending_payout_value0.000 HBD
promoted0.000 HBD
body_length616
author_reputation38,975,615,169,260
root_title"Fixed squeezed replies issue and large area of focus for reading time issue"
beneficiaries[]
max_accepted_payout1,000,000.000 HBD
percent_hbd10,000
post_id88,749,860
net_rshares0
@utopian-io · 
### Hey @sirrius I am @utopian-io. I have just upvoted you!
#### Achievements
- You have less than 500 followers. Just gave you a gift to help you succeed!
- Seems like you contribute quite often. AMAZING!
#### Community-Driven Witness!
I am the first and only Steem Community-Driven Witness. <a href="https://discord.gg/zTrEMqB">Participate on Discord</a>. Lets GROW TOGETHER!
- <a href="https://v2.steemconnect.com/sign/account-witness-vote?witness=utopian-io&approve=1">Vote for my Witness With SteemConnect</a>
- <a href="https://v2.steemconnect.com/sign/account-witness-proxy?proxy=utopian-io&approve=1">Proxy vote to Utopian Witness with SteemConnect</a>
- Or vote/proxy on <a href="https://steemit.com/~witnesses">Steemit Witnesses</a>

[![mooncryption-utopian-witness-gif](https://steemitimages.com/DQmYPUuQRptAqNBCQRwQjKWAqWU3zJkL3RXVUtEKVury8up/mooncryption-s-utopian-io-witness-gif.gif)](https://steemit.com/~witnesses)

**Up-vote this comment to grow my power and help Open Source contributions like this one. Want to chat? Join me on Discord https://discord.gg/Pc8HG9x**
properties (22)
authorutopian-io
permlinkre-sirrius-fixed-squeezed-replies-issue-and-large-area-of-focus-for-reading-time-issue-20171211t233306449z
categoryutopian-io
json_metadata{"tags":["utopian-io"],"community":"utopian","app":"utopian/1.0.0"}
created2017-12-11 23:33:06
last_update2017-12-11 23:33:06
depth1
children0
last_payout2017-12-18 23:33:06
cashout_time1969-12-31 23:59:59
total_payout_value0.000 HBD
curator_payout_value0.000 HBD
pending_payout_value0.000 HBD
promoted0.000 HBD
body_length1,083
author_reputation152,955,367,999,756
root_title"Fixed squeezed replies issue and large area of focus for reading time issue"
beneficiaries[]
max_accepted_payout1,000,000.000 HBD
percent_hbd10,000
post_id23,170,899
net_rshares0
Help/Feedback