fix: Add background to selectable tr table #252

OgDev-01 · 2022-08-22T12:09:04Z

What type of PR is this? (check all applicable)

Description

This PR fixes the background of selectable tr elements

Details:

This element was originally a table but was converted to a collection of divs and spans that act in a similar way.
There was already a function that selects a particular element and so functionality was added to change the background color depending on the checkbox attribute.
Replaced truncation function in table with CSS truncation (didn't even know CSS had truncation... What a time to be alive!)

Related Tickets & Documents

Fixes #183
Fixes #289

Mobile & Desktop Screenshots/Recordings

Added tests?

👍 yes
🙅 no, because they aren't needed
🙋 no, because I need help

Added to documentation?

[optional] Are there any post-deployment tasks we need to perform?

[optional] What gif best describes this PR or how it makes you feel?

netlify · 2022-08-22T12:09:09Z

✅ Deploy Preview for oss-insights ready!

Name	Link
🔨 Latest commit	`7046bba`
🔍 Latest deploy log	https://app.netlify.com/sites/oss-insights/deploys/6314dfa11c525900086b0257
😎 Deploy Preview	https://deploy-preview-252--oss-insights.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify site settings.

netlify · 2022-08-22T12:09:10Z

✅ Deploy Preview for design-insights ready!

Name	Link
🔨 Latest commit	`7046bba`
🔍 Latest deploy log	https://app.netlify.com/sites/design-insights/deploys/6314dfa1b02a910009a22cb4
😎 Deploy Preview	https://deploy-preview-252--design-insights.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify site settings.

OgDev-01 · 2022-08-22T16:36:08Z

I've tried several tricks on overriding the default style of the select component, by none seems to work out... would need some help from @pixelsbyeryc or @chadstewart

chadstewart · 2022-08-22T20:08:42Z

I've tried several tricks on overriding the default style of the select component, by none seems to work out... would need some help from @pixelsbyeryc or @chadstewart

Quick question, are you speaking of the components in the Select folder or the Selectable-Table component? Just wanted to clarify.

eryc-cc · 2022-08-22T20:47:49Z

I've tried several tricks on overriding the default style of the select component, by none seems to work out... would need some help from @pixelsbyeryc or @chadstewart

Quick question, are you speaking of the components in the Select folder or the Selectable-Table component? Just wanted to clarify.

@chadstewart the Selectable-Table component, from this: #177 (comment)

Should we turn this <table> into a <div>, like @sungoldtech suggested on #183?

chadstewart · 2022-08-22T21:21:50Z

I've tried several tricks on overriding the default style of the select component, by none seems to work out... would need some help from @pixelsbyeryc or @chadstewart

Quick question, are you speaking of the components in the Select folder or the Selectable-Table component? Just wanted to clarify.

@chadstewart the Selectable-Table component, from this: #177 (comment)

Should we turn this <table> into a <div>, like @sungoldtech suggested on #183?

If it's not too difficult of a conversion, I'd say this is probably the best thing we could do right now.

OgDev-01 · 2022-08-23T00:12:24Z

I've tried several tricks on overriding the default style of the select component, by none seems to work out... would need some help from @pixelsbyeryc or @chadstewart

Quick question, are you speaking of the components in the Select folder or the Selectable-Table component? Just wanted to clarify.

@chadstewart the Selectable-Table component, from this: #177 (comment)
Should we turn this <table> into a <div>, like @sungoldtech suggested on #183?

If it's not too difficult of a conversion, I'd say this is probably the best thing we could do right now.

Totally Agree with this approach 🙌

OgDev-01 · 2022-08-23T15:55:49Z

I've replaced the table with a div and also used span in a replacement for the tr. but I'm still trying to wrap my head around the logic of making the whole row have a background color when a checkbox is checked... @chadstewart I think I need assistance here 🙌🙌

chadstewart · 2022-08-24T14:09:53Z

I've replaced the table with a div and also used span in a replacement for the tr. but I'm still trying to wrap my head around the logic of making the whole row have a background color when a checkbox is checked... @chadstewart I think I need assistance here raised_handsraised_hands

Sorry for taking so long to get back to you @sungoldtech. Do you have a particular problem you are having or just the general understanding of the logic to complete this that you're having a problem with?

eryc-cc · 2022-08-24T16:47:14Z

I've replaced the table with a div and also used span in a replacement for the tr. but I'm still trying to wrap my head around the logic of making the whole row have a background color when a checkbox is checked... @chadstewart I think I need assistance here 🙌🙌

It's to visually indicate that the entire row is selected... When you have so much visual information on the screen, it can be hard to keep track of the checkbox only.

It also indicates where the clickable section is, so it's easier for people to know what will happen when they click something.

That's why it'd be good to have a hover state (light bg) + a selected state (slightly darker bg).

OgDev-01 · 2022-08-26T06:20:25Z

I've replaced the table with a div and also used span in a replacement for the tr. but I'm still trying to wrap my head around the logic of making the whole row have a background color when a checkbox is checked... @chadstewart I think I need assistance here raised_handsraised_hands

Sorry for taking so long to get back to you @sungoldtech. Do you have a particular problem you are having or just the general understanding of the logic to complete this that you're having a problem with?

It's the general understanding of the logic to complete the task based on the current implementation 🙌
Sorry for the late response @chadstewart

chadstewart · 2022-08-26T17:59:18Z

I've replaced the table with a div and also used span in a replacement for the tr. but I'm still trying to wrap my head around the logic of making the whole row have a background color when a checkbox is checked... @chadstewart I think I need assistance here raised_handsraised_hands

Sorry for taking so long to get back to you @sungoldtech. Do you have a particular problem you are having or just the general understanding of the logic to complete this that you're having a problem with?

It's the general understanding of the logic to complete the task based on the current implementation raised_hands Sorry for the late response @chadstewart

No problem at all. It's async so we catch up whenever we can. If you'd like I can talk to you over a Google Meet to talk to you about what you need and unblock you. Let me know.

chadstewart · 2022-09-04T14:23:39Z

Hey @sungoldtech. Sorry for doing this but I'm going to take over this PR and finish it so that you can focus on other activities.

Sorry about this.

OgDev-01 · 2022-09-04T15:07:01Z

Hey @sungoldtech. Sorry for doing this but I'm going to take over this PR and finish it so that you can focus on other activities.

Sorry about this.

It's all fine @chadstewart thanks for the help 🤝

bdougie · 2022-09-04T15:49:01Z

Some noticeable inconsistencies.

…runcation function with CSS truncation.

…se the definitions are repeated multiple times in the code.

bdougie

LGTM

## [1.4.0-beta.6](v1.4.0-beta.5...v1.4.0-beta.6) (2022-09-06) ### 🐛 Bug Fixes * Add background to selectable tr table ([#252](#252)) ([7d6ae16](7d6ae16)), closes [#183](#183) [#289](#289) * Contributor card overlap on smaller devices ([#298](#298)) ([777f6ba](777f6ba)), closes [#290](#290)

github-actions · 2022-09-06T16:54:10Z

🎉 This PR is included in version 1.4.0-beta.6 🎉

The release is available on GitHub release

Your semantic-release bot 📦🚀

## [1.4.0](v1.3.0...v1.4.0) (2022-09-06) ### 🧑‍💻 Code Refactoring * Add types to useRepositoriesList hook ([#277](#277)) ([4f1a771](4f1a771)) ### 🍕 Features * Add download CSV funtionality to Reports page ([#286](#286)) ([ada79d3](ada79d3)) * **footer:** swap out footer text ([#296](#296)) ([737df5b](737df5b)) * Update Scatter Chart Legend ([#260](#260)) ([309ef62](309ef62)) ### 🐛 Bug Fixes * Add background to selectable tr table ([#252](#252)) ([7d6ae16](7d6ae16)), closes [#183](#183) [#289](#289) * Contributor card overlap on smaller devices ([#298](#298)) ([777f6ba](777f6ba)), closes [#290](#290) * correct netlify build supabase redirect url ([#283](#283)) ([0b2b80a](0b2b80a)) * Filter dropdown can only be closed by clicking on the filter button ([#299](#299)) ([bce1f8e](bce1f8e)), closes [#292](#292) * Fixing issues with TopNav and Highlight Card ([#294](#294)) ([218f30d](218f30d)), closes [#287](#287) [#291](#291) * grammar for header description ([#279](#279)) ([a019912](a019912))

## [1.4.0-beta.6](open-sauced/app@v1.4.0-beta.5...v1.4.0-beta.6) (2022-09-06) ### 🐛 Bug Fixes * Add background to selectable tr table ([#252](open-sauced/app#252)) ([7d6ae16](open-sauced/app@7d6ae16)), closes [#183](open-sauced/app#183) [#289](open-sauced/app#289) * Contributor card overlap on smaller devices ([#298](open-sauced/app#298)) ([777f6ba](open-sauced/app@777f6ba)), closes [#290](open-sauced/app#290)

## [1.4.0](open-sauced/app@v1.3.0...v1.4.0) (2022-09-06) ### 🧑‍💻 Code Refactoring * Add types to useRepositoriesList hook ([#277](open-sauced/app#277)) ([4f1a771](open-sauced/app@4f1a771)) ### 🍕 Features * Add download CSV funtionality to Reports page ([#286](open-sauced/app#286)) ([ada79d3](open-sauced/app@ada79d3)) * **footer:** swap out footer text ([#296](open-sauced/app#296)) ([737df5b](open-sauced/app@737df5b)) * Update Scatter Chart Legend ([#260](open-sauced/app#260)) ([309ef62](open-sauced/app@309ef62)) ### 🐛 Bug Fixes * Add background to selectable tr table ([#252](open-sauced/app#252)) ([7d6ae16](open-sauced/app@7d6ae16)), closes [#183](open-sauced/app#183) [#289](open-sauced/app#289) * Contributor card overlap on smaller devices ([#298](open-sauced/app#298)) ([777f6ba](open-sauced/app@777f6ba)), closes [#290](open-sauced/app#290) * correct netlify build supabase redirect url ([#283](open-sauced/app#283)) ([0b2b80a](open-sauced/app@0b2b80a)) * Filter dropdown can only be closed by clicking on the filter button ([#299](open-sauced/app#299)) ([bce1f8e](open-sauced/app@bce1f8e)), closes [#292](open-sauced/app#292) * Fixing issues with TopNav and Highlight Card ([#294](open-sauced/app#294)) ([218f30d](open-sauced/app@218f30d)), closes [#287](open-sauced/app#287) [#291](open-sauced/app#291) * grammar for header description ([#279](open-sauced/app#279)) ([a019912](open-sauced/app@a019912))

initial commit on this task

0c7703d

fix exlint errors

94cffed

OgDev-01 changed the base branch from main to beta August 22, 2022 12:16

OgDev-01 added the help wanted Extra attention is needed label Aug 22, 2022

replaced all table related element to spans and divs

92f58ab

chadstewart mentioned this pull request Aug 30, 2022

TOP 5 Week 35 August 29th #276

Closed

remove all traces of table elements on selectable-table

e895bca

chadstewart self-assigned this Sep 4, 2022

Updated selectable table to highlight div on checked.

fc0167f

chadstewart added 2 commits September 4, 2022 10:16

Merge branch 'beta' into add-background-to-selectable-tr-table

d608eec

Fixing issue with alignment in table.

71a4de7

chadstewart added needs review PRs that need review from core engineering team and removed help wanted Extra attention is needed labels Sep 4, 2022

chadstewart requested review from 0-vortex, bdougie and eryc-cc September 4, 2022 15:38

chadstewart marked this pull request as ready for review September 4, 2022 15:38

chadstewart added 4 commits September 4, 2022 11:40

Forgot to make check all checkbox highlight all divs.

b875cbf

Fixed inconsistency with repository table in mobile.

b466045

Fixed issue with table design being broken in mobile view. Replaces t…

77e09f2

…runcation function with CSS truncation.

Moving class definitions for div whose background color changes becau…

7046bba

…se the definitions are repeated multiple times in the code.

bdougie approved these changes Sep 5, 2022

View reviewed changes

bdougie merged commit 7d6ae16 into beta Sep 6, 2022

bdougie deleted the add-background-to-selectable-tr-table branch September 6, 2022 16:50

github-actions bot added the released on @beta label Sep 6, 2022

bdougie unassigned chadstewart Sep 29, 2022

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

fix: Add background to selectable tr table #252

fix: Add background to selectable tr table #252

OgDev-01 commented Aug 22, 2022 •

edited by chadstewart

Loading

netlify bot commented Aug 22, 2022 •

edited

Loading

netlify bot commented Aug 22, 2022 •

edited

Loading

OgDev-01 commented Aug 22, 2022

chadstewart commented Aug 22, 2022

eryc-cc commented Aug 22, 2022

chadstewart commented Aug 22, 2022

OgDev-01 commented Aug 23, 2022

OgDev-01 commented Aug 23, 2022

chadstewart commented Aug 24, 2022

eryc-cc commented Aug 24, 2022

OgDev-01 commented Aug 26, 2022

chadstewart commented Aug 26, 2022

chadstewart commented Sep 4, 2022

OgDev-01 commented Sep 4, 2022

bdougie commented Sep 4, 2022

bdougie left a comment

github-actions bot commented Sep 6, 2022

fix: Add background to selectable tr table #252

fix: Add background to selectable tr table #252

Conversation

OgDev-01 commented Aug 22, 2022 • edited by chadstewart Loading

What type of PR is this? (check all applicable)

Description

Related Tickets & Documents

Mobile & Desktop Screenshots/Recordings

Added tests?

Added to documentation?

[optional] Are there any post-deployment tasks we need to perform?

[optional] What gif best describes this PR or how it makes you feel?

netlify bot commented Aug 22, 2022 • edited Loading

✅ Deploy Preview for oss-insights ready!

netlify bot commented Aug 22, 2022 • edited Loading

✅ Deploy Preview for design-insights ready!

OgDev-01 commented Aug 22, 2022

chadstewart commented Aug 22, 2022

eryc-cc commented Aug 22, 2022

chadstewart commented Aug 22, 2022

OgDev-01 commented Aug 23, 2022

OgDev-01 commented Aug 23, 2022

chadstewart commented Aug 24, 2022

eryc-cc commented Aug 24, 2022

OgDev-01 commented Aug 26, 2022

chadstewart commented Aug 26, 2022

chadstewart commented Sep 4, 2022

OgDev-01 commented Sep 4, 2022

bdougie commented Sep 4, 2022

bdougie left a comment

Choose a reason for hiding this comment

github-actions bot commented Sep 6, 2022

OgDev-01 commented Aug 22, 2022 •

edited by chadstewart

Loading

netlify bot commented Aug 22, 2022 •

edited

Loading

netlify bot commented Aug 22, 2022 •

edited

Loading