feat: Add mobile responsiveness to organisms and dashboard #81
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
✅ Deploy Preview for oss-insights ready!
To edit notification comments on pull requests, go to your Netlify site settings. |
…onsiveness for the avatar component specifically.
…veness for tool list for testing.
…d reduced the amount of available nav items.
… table when there's too large of a repo name as a single word.
…nd with displaying full name on hover.
|
Finished up everything. Only thing I think needs to be improved is that I currently truncate the names of repos for the table when the screen size is small. Was the only way I can think of to have the component continue to fit in the screen. I'm trying to figure out how to display the component's full name on hover or some other interaction though. |
I think we can take an approach similar to what I mentioned on issue #43: grouping information in a card, instead of a table-like look. It doesn't hide information, and doesn't require horizontal scrolling: |
bdougie
requested changes
Jul 19, 2022
|
The photos uploaded are comically large. Most likely because they were uploaded directly from your phone. Could you scale them down 🙏🏾 |
eryc-cc
suggested changes
Jul 19, 2022
Quick question, would you like me to crop them as well or just make them smaller? |
|
Also, I just realized that the avatar is not formatted right in mobile. I need to look into that more cause I couldn't get it to be sized correctly. |
Cropping won't make it better, just scale it down. |
![github-actions[bot]](https://avatars.githubusercontent.com/in/15368?s=60&v=4){kind=small}
There was a problem hiding this comment.
PR Compliance Checks
Thank you for your Pull Request! We have run several checks on this pull request in order to make sure it's suitable for merging into this project. The results are listed in the following section.
Watched Files
This pull request modifies specific files that require careful review by the maintainers.
Files Matched
- package-lock.json
- package.json
bdougie
reviewed
Jul 19, 2022
There was a problem hiding this comment.
@chadstewart needs a failure test case to complete coverage.
Test when it "shouldn't" truncate.
No problem, added the test case. |
github-actions bot
pushed a commit
that referenced
this pull request
Jul 19, 2022
* Starting work to add mobile responsiveness. * Some clean up of tailwind styles and minor mobile responsiveness updates. * Removed space-between on highlight card and replaced with margins. * Adjusted Highlight card width to be percentages as opposed to a fixed pixel width. * Added mobile responsiveness to Top Nav. Need to look into mobile responsiveness for the avatar component specifically. * Added mobile responsiveness for Header and added a temporary responsiveness for tool list for testing. * Updating mobile responsiveness for previously worked on components and reduced the amount of available nav items. * Added mobile responsiveness to tools display. Need to think about the table when there's too large of a repo name as a single word. * Made some adjustments to tools display to accomodate for tablet design. * Added truncation to row title when screen size is small. Playing around with displaying full name on hover. * Removed drop shadow from Card component. * Made nav scrollable on overflow. * Made minor change to replace padding in top nav after 768px width. * Added jest to project and added test for truncateString. * Adjusted card to fit two cards at a time in certain screen sizes. * Updated test case to show when truncateString shouldn't truncate a string. * Updated folder structure of test. f9e58ef
This was referenced Jul 19, 2022
github-actions bot
pushed a commit
that referenced
this pull request
Aug 10, 2022
## 1.0.0 (2022-08-10) ### ⚠ BREAKING CHANGES * Updated routing and removed references to portal in app (#99) * Updated Atoms to enforce parent props and be easier to use (#70) * Updating Storybook folder structure. (#41) ### 📝 Documentation * Add a to-do to create an Avatar component ([237a633](237a633)) * Add background to OnboardingButton story ([9e4972e](9e4972e)) * Add Button to storybook ([5926ea6](5926ea6)) * Add Button Types to storybook ([0e28aa6](0e28aa6)) * Add Button with Icons to storybook ([8ac670b](8ac670b)) * Add controls to Avatar storybook ([1fc1d54](1fc1d54)) * Add controls to select the FilterCard icon to Storybook ([e2e96a1](e2e96a1)) * Add FilterCards to Storybook ([041b6d0](041b6d0)) * Add HighlightCard to storybook ([ab11b8e](ab11b8e)) * Add OnboardingButton to storybook ([5517b5f](5517b5f)) * Add pre-defined icon options to storybook ([08acf12](08acf12)) * Add ProgressPie to storybook ([be8bab4](be8bab4)) * Document `metricIncreases` in storybook ([d12e828](d12e828)) * Document new previews for Avatar component ([182c055](182c055)) * Remove filterName attribute from storybook ([e851d03](e851d03)) * Update HighlightCard storybook documentation ([6ba8998](6ba8998)) * Update storybook deployment in the README.md ([#38](#38)) ([4240f40](4240f40)) ### 🎨 Styles * Add flexbox to ToolList Button child span and remove whitespace wrap ([2ce327e](2ce327e)) * Add gap when percentage is over than 0 ([fde77e2](fde77e2)) * Define `max-width` to the HighlightCard ([e23d670](e23d670)) * Orange border only shows when focusing with keyboard ([3fb9fd3](3fb9fd3)) * Remove `overflow-hidden` from ToolList tab ([182104b](182104b)) * Rename ToolList Item class ([95d3bf2](95d3bf2)) * Update card spacing and icon sizes ([903d947](903d947)) * Update OnboardingButton color and font styles ([6a8d785](6a8d785)) * Update ProgressPie orange tone ([210c3ad](210c3ad)) * Use `h1` as the main Heading ([a79ea32](a79ea32)) * Use Tailwind colors instead of hard-coded colors ([6e7aa3e](6e7aa3e)) * Vertically align the Button Icons ([1915aff](1915aff)) ### 🧑💻 Code Refactoring * Add text styles to the `Button` in Nav component ([bb189cc](bb189cc)) * Add typeof to Story ([3f32115](3f32115)) * Fix lint in `next.config.js` ([f27c959](f27c959)) * Fix lint issue ([e408f5e](e408f5e)) * Move `isRemovable` conditional only to the `x` icon ([b9c0ee5](b9c0ee5)) * Remove `<progress>` element ([cb88eef](cb88eef)) * Remove `color` and `metric` props from HighlightCard ([a48db58](a48db58)) * Remove disabled from button ([6c80098](6c80098)) * Remove div that wraps the Link component ([09790f1](09790f1)) * Rename `slate-a` to `slate-opacity` ([cddb37c](cddb37c)) * Reorganize AuthSection elements and add flex gap ([fced100](fced100)) * Update Avatar attributes in Auth Section ([5a22ff5](5a22ff5)) * Update FilterCard attributes in Header ([7c01131](7c01131)) * Update FilterCard to not be removable on Header component ([37f2277](37f2277)) * Update icon props ([4d7eb79](4d7eb79)) * Update ProgressPie size ([d97ee92](d97ee92)) * Update ProgressPie size in OnboardingButton ([3fd58e6](3fd58e6)) * Updated Atoms to enforce parent props and be easier to use ([#70](#70)) ([f54b41f](f54b41f)) * Updated routing and removed references to portal in app ([#99](#99)) ([47f6c78](47f6c78)) * Updating Storybook folder structure. ([#41](#41)) ([db231fd](db231fd)) * Use `Text` instead of `StrongText` ([8d2d657](8d2d657)) * Use Nav as a wrapper ([e7ff5bb](e7ff5bb)) * Use storybook documentation code ([401ba90](401ba90)) ### 🍕 Features * Add `isRemovable` attribute to FilterCard ([4463a87](4463a87)) * Add `metricIncreases` prop ([cc70b27](cc70b27)) * Add accessibility attributes to ToolList tab item ([54de569](54de569)) * Add Avatar Component to Storybook ([#30](#30)) ([7b662c7](7b662c7)) * Add border to Avatar component ([ce53adf](ce53adf)) * Add Context Filter component to Header ([#145](#145)) ([0bc29b4](0bc29b4)), closes [#138](#138) * Add HighlightCard icons ([c5c3477](c5c3477)) * Add icon prop to FilterCard with pre-defined icons ([04b727c](04b727c)) * Add icons to FilterCard component ([982e9c7](982e9c7)) * Add initials and pre-defined sizes to Avatar ([713c61a](713c61a)) * Add link to the `HighlightCard` component ([#130](#130)) ([a6db7d7](a6db7d7)) * Add metricArrow icon ([2058c23](2058c23)) * Add mobile responsiveness to organisms and dashboard ([#81](#81)) ([f9e58ef](f9e58ef)) * Add new props to the component ([b41d179](b41d179)) * Add newly created Storybook components to Tools Display ([#77](#77)) ([45f1a6e](45f1a6e)) * Add OnboardingButton to AuthSection ([58979ce](58979ce)) * Add orange, blue, red, and grass colors ([8d8eb52](8d8eb52)) * Add props to make component dynamic ([3704dcf](3704dcf)) * add release automation ([bd64682](bd64682)), closes [#16](#16) * Add Slate from Radix Colors ([d9156f4](d9156f4)) * Add top content ([d24dfdd](d24dfdd)) * Add user authentication to app ([#96](#96)) ([81f6208](81f6208)) * Added design updates to app based on a All-Hands discussions and feedback from Terrence ([#1](#1)) ([2db7553](2db7553)) * Added Selectable Table component ([#60](#60)) ([0b77189](0b77189)) * Adds compliance checks to PRs ([#32](#32)) ([7872532](7872532)) * adds template files ([e9b3ece](e9b3ece)) * Change all checkboxes in Selectable Table Component ([#123](#123)) ([b0719c3](b0719c3)) * Change icon color based on which option ([0101d18](0101d18)) * Create `<Button>` component ([9f3c77a](9f3c77a)) * Create `ProgressPie` component ([1cee615](1cee615)) * Create OnboardingButton component ([5056f6d](5056f6d)) * Create progress bar ([fa07ba6](fa07ba6)) * Create styles for button types ([c9a3766](c9a3766)) * create weekly top5 ([#46](#46)) ([41d10bf](41d10bf)) * Implement `<ContextFilter>` component ([#94](#94)) ([18b5707](18b5707)) * Implement ContextThumbnail component ([#35](#35)) ([600463f](600463f)) * Implement Dropdown Component and Auth dropdown list ([#95](#95)) ([ef8a4a7](ef8a4a7)) * Implement Onboarding Flow UI ([#117](#117)) ([9e4d8e4](9e4d8e4)) * Implemented first draft of eChart Scatter Chart ([#65](#65)) ([9f1bc3d](9f1bc3d)) * Set up the HighlightCard component ([597c938](597c938)) * Structure the component ([b765b61](b765b61)) * Structure the main information on HighlightCard ([60a1c56](60a1c56)) * Style removable FilterCards ([83b6c92](83b6c92)) * Update Tool List Nav to be more compatible with Storybook ([#51](#51)) ([745378b](745378b)) * working supabase auth ([#106](#106)) ([186dc84](186dc84)) ### 🐛 Bug Fixes * add link to video ([3b27a69](3b27a69)) * Cleaning up CSS alignment ([#91](#91)) ([b570898](b570898)) * correct missing state dependency ([f3a5e06](f3a5e06)) * Re-implemented disabled functionality on selected tool nav. ([#27](#27)) ([50e3401](50e3401)) * team name ([57530d5](57530d5)) * **storybook:** Update folder convention for storybook builds ([#37](#37)) ([6d819f0](6d819f0)) * Updated auth-section with the new avatar component. ([#47](#47)) ([5b1053c](5b1053c)) * Updated eslint formatter to fix problem of formatter not linting ever… ([#53](#53)) ([b8475ba](b8475ba)) * Updated secondary link to Avatar component to hacktoberfest for now. … ([#34](#34)) ([22671a6](22671a6)) ### 🔁 Continuous Integration * Added Storybook deployment automation script to project. ([#21](#21)) ([d3685d8](d3685d8)) * correct nextjs build location ([0b24025](0b24025)) * correct release workflow dependencies ([461dffd](461dffd)) * default environment to development ([a5c286e](a5c286e))
|
🎉 This PR is included in version 1.0.0 🎉 The release is available on GitHub release Your semantic-release bot 📦🚀 |
ElpisHelle
added a commit
to ElpisHelle/next.js-tailwindcss
that referenced
this pull request
Aug 17, 2023
## 1.0.0 (2022-08-10) ### ⚠ BREAKING CHANGES * Updated routing and removed references to portal in app (#99) * Updated Atoms to enforce parent props and be easier to use (#70) * Updating Storybook folder structure. (#41) ### 📝 Documentation * Add a to-do to create an Avatar component ([237a633](open-sauced/app@237a633)) * Add background to OnboardingButton story ([9e4972e](open-sauced/app@9e4972e)) * Add Button to storybook ([5926ea6](open-sauced/app@5926ea6)) * Add Button Types to storybook ([0e28aa6](open-sauced/app@0e28aa6)) * Add Button with Icons to storybook ([8ac670b](open-sauced/app@8ac670b)) * Add controls to Avatar storybook ([1fc1d54](open-sauced/app@1fc1d54)) * Add controls to select the FilterCard icon to Storybook ([e2e96a1](open-sauced/app@e2e96a1)) * Add FilterCards to Storybook ([041b6d0](open-sauced/app@041b6d0)) * Add HighlightCard to storybook ([ab11b8e](open-sauced/app@ab11b8e)) * Add OnboardingButton to storybook ([5517b5f](open-sauced/app@5517b5f)) * Add pre-defined icon options to storybook ([08acf12](open-sauced/app@08acf12)) * Add ProgressPie to storybook ([be8bab4](open-sauced/app@be8bab4)) * Document `metricIncreases` in storybook ([d12e828](open-sauced/app@d12e828)) * Document new previews for Avatar component ([182c055](open-sauced/app@182c055)) * Remove filterName attribute from storybook ([e851d03](open-sauced/app@e851d03)) * Update HighlightCard storybook documentation ([6ba8998](open-sauced/app@6ba8998)) * Update storybook deployment in the README.md ([#38](open-sauced/app#38)) ([4240f40](open-sauced/app@4240f40)) ### 🎨 Styles * Add flexbox to ToolList Button child span and remove whitespace wrap ([2ce327e](open-sauced/app@2ce327e)) * Add gap when percentage is over than 0 ([fde77e2](open-sauced/app@fde77e2)) * Define `max-width` to the HighlightCard ([e23d670](open-sauced/app@e23d670)) * Orange border only shows when focusing with keyboard ([3fb9fd3](open-sauced/app@3fb9fd3)) * Remove `overflow-hidden` from ToolList tab ([182104b](open-sauced/app@182104b)) * Rename ToolList Item class ([95d3bf2](open-sauced/app@95d3bf2)) * Update card spacing and icon sizes ([903d947](open-sauced/app@903d947)) * Update OnboardingButton color and font styles ([6a8d785](open-sauced/app@6a8d785)) * Update ProgressPie orange tone ([210c3ad](open-sauced/app@210c3ad)) * Use `h1` as the main Heading ([a79ea32](open-sauced/app@a79ea32)) * Use Tailwind colors instead of hard-coded colors ([6e7aa3e](open-sauced/app@6e7aa3e)) * Vertically align the Button Icons ([1915aff](open-sauced/app@1915aff)) ### 🧑💻 Code Refactoring * Add text styles to the `Button` in Nav component ([bb189cc](open-sauced/app@bb189cc)) * Add typeof to Story ([3f32115](open-sauced/app@3f32115)) * Fix lint in `next.config.js` ([f27c959](open-sauced/app@f27c959)) * Fix lint issue ([e408f5e](open-sauced/app@e408f5e)) * Move `isRemovable` conditional only to the `x` icon ([b9c0ee5](open-sauced/app@b9c0ee5)) * Remove `<progress>` element ([cb88eef](open-sauced/app@cb88eef)) * Remove `color` and `metric` props from HighlightCard ([a48db58](open-sauced/app@a48db58)) * Remove disabled from button ([6c80098](open-sauced/app@6c80098)) * Remove div that wraps the Link component ([09790f1](open-sauced/app@09790f1)) * Rename `slate-a` to `slate-opacity` ([cddb37c](open-sauced/app@cddb37c)) * Reorganize AuthSection elements and add flex gap ([fced100](open-sauced/app@fced100)) * Update Avatar attributes in Auth Section ([5a22ff5](open-sauced/app@5a22ff5)) * Update FilterCard attributes in Header ([7c01131](open-sauced/app@7c01131)) * Update FilterCard to not be removable on Header component ([37f2277](open-sauced/app@37f2277)) * Update icon props ([4d7eb79](open-sauced/app@4d7eb79)) * Update ProgressPie size ([d97ee92](open-sauced/app@d97ee92)) * Update ProgressPie size in OnboardingButton ([3fd58e6](open-sauced/app@3fd58e6)) * Updated Atoms to enforce parent props and be easier to use ([#70](open-sauced/app#70)) ([f54b41f](open-sauced/app@f54b41f)) * Updated routing and removed references to portal in app ([#99](open-sauced/app#99)) ([47f6c78](open-sauced/app@47f6c78)) * Updating Storybook folder structure. ([#41](open-sauced/app#41)) ([db231fd](open-sauced/app@db231fd)) * Use `Text` instead of `StrongText` ([8d2d657](open-sauced/app@8d2d657)) * Use Nav as a wrapper ([e7ff5bb](open-sauced/app@e7ff5bb)) * Use storybook documentation code ([401ba90](open-sauced/app@401ba90)) ### 🍕 Features * Add `isRemovable` attribute to FilterCard ([4463a87](open-sauced/app@4463a87)) * Add `metricIncreases` prop ([cc70b27](open-sauced/app@cc70b27)) * Add accessibility attributes to ToolList tab item ([54de569](open-sauced/app@54de569)) * Add Avatar Component to Storybook ([#30](open-sauced/app#30)) ([7b662c7](open-sauced/app@7b662c7)) * Add border to Avatar component ([ce53adf](open-sauced/app@ce53adf)) * Add Context Filter component to Header ([#145](open-sauced/app#145)) ([0bc29b4](open-sauced/app@0bc29b4)), closes [#138](open-sauced/app#138) * Add HighlightCard icons ([c5c3477](open-sauced/app@c5c3477)) * Add icon prop to FilterCard with pre-defined icons ([04b727c](open-sauced/app@04b727c)) * Add icons to FilterCard component ([982e9c7](open-sauced/app@982e9c7)) * Add initials and pre-defined sizes to Avatar ([713c61a](open-sauced/app@713c61a)) * Add link to the `HighlightCard` component ([#130](open-sauced/app#130)) ([a6db7d7](open-sauced/app@a6db7d7)) * Add metricArrow icon ([2058c23](open-sauced/app@2058c23)) * Add mobile responsiveness to organisms and dashboard ([#81](open-sauced/app#81)) ([f9e58ef](open-sauced/app@f9e58ef)) * Add new props to the component ([b41d179](open-sauced/app@b41d179)) * Add newly created Storybook components to Tools Display ([#77](open-sauced/app#77)) ([45f1a6e](open-sauced/app@45f1a6e)) * Add OnboardingButton to AuthSection ([58979ce](open-sauced/app@58979ce)) * Add orange, blue, red, and grass colors ([8d8eb52](open-sauced/app@8d8eb52)) * Add props to make component dynamic ([3704dcf](open-sauced/app@3704dcf)) * add release automation ([bd64682](open-sauced/app@bd64682)), closes [#16](open-sauced/app#16) * Add Slate from Radix Colors ([d9156f4](open-sauced/app@d9156f4)) * Add top content ([d24dfdd](open-sauced/app@d24dfdd)) * Add user authentication to app ([#96](open-sauced/app#96)) ([81f6208](open-sauced/app@81f6208)) * Added design updates to app based on a All-Hands discussions and feedback from Terrence ([#1](open-sauced/app#1)) ([2db7553](open-sauced/app@2db7553)) * Added Selectable Table component ([#60](open-sauced/app#60)) ([0b77189](open-sauced/app@0b77189)) * Adds compliance checks to PRs ([#32](open-sauced/app#32)) ([7872532](open-sauced/app@7872532)) * adds template files ([e9b3ece](open-sauced/app@e9b3ece)) * Change all checkboxes in Selectable Table Component ([#123](open-sauced/app#123)) ([b0719c3](open-sauced/app@b0719c3)) * Change icon color based on which option ([0101d18](open-sauced/app@0101d18)) * Create `<Button>` component ([9f3c77a](open-sauced/app@9f3c77a)) * Create `ProgressPie` component ([1cee615](open-sauced/app@1cee615)) * Create OnboardingButton component ([5056f6d](open-sauced/app@5056f6d)) * Create progress bar ([fa07ba6](open-sauced/app@fa07ba6)) * Create styles for button types ([c9a3766](open-sauced/app@c9a3766)) * create weekly top5 ([#46](open-sauced/app#46)) ([41d10bf](open-sauced/app@41d10bf)) * Implement `<ContextFilter>` component ([#94](open-sauced/app#94)) ([18b5707](open-sauced/app@18b5707)) * Implement ContextThumbnail component ([#35](open-sauced/app#35)) ([600463f](open-sauced/app@600463f)) * Implement Dropdown Component and Auth dropdown list ([#95](open-sauced/app#95)) ([ef8a4a7](open-sauced/app@ef8a4a7)) * Implement Onboarding Flow UI ([#117](open-sauced/app#117)) ([9e4d8e4](open-sauced/app@9e4d8e4)) * Implemented first draft of eChart Scatter Chart ([#65](open-sauced/app#65)) ([9f1bc3d](open-sauced/app@9f1bc3d)) * Set up the HighlightCard component ([597c938](open-sauced/app@597c938)) * Structure the component ([b765b61](open-sauced/app@b765b61)) * Structure the main information on HighlightCard ([60a1c56](open-sauced/app@60a1c56)) * Style removable FilterCards ([83b6c92](open-sauced/app@83b6c92)) * Update Tool List Nav to be more compatible with Storybook ([#51](open-sauced/app#51)) ([745378b](open-sauced/app@745378b)) * working supabase auth ([#106](open-sauced/app#106)) ([186dc84](open-sauced/app@186dc84)) ### 🐛 Bug Fixes * add link to video ([3b27a69](open-sauced/app@3b27a69)) * Cleaning up CSS alignment ([#91](open-sauced/app#91)) ([b570898](open-sauced/app@b570898)) * correct missing state dependency ([f3a5e06](open-sauced/app@f3a5e06)) * Re-implemented disabled functionality on selected tool nav. ([#27](open-sauced/app#27)) ([50e3401](open-sauced/app@50e3401)) * team name ([57530d5](open-sauced/app@57530d5)) * **storybook:** Update folder convention for storybook builds ([#37](open-sauced/app#37)) ([6d819f0](open-sauced/app@6d819f0)) * Updated auth-section with the new avatar component. ([#47](open-sauced/app#47)) ([5b1053c](open-sauced/app@5b1053c)) * Updated eslint formatter to fix problem of formatter not linting ever… ([#53](open-sauced/app#53)) ([b8475ba](open-sauced/app@b8475ba)) * Updated secondary link to Avatar component to hacktoberfest for now. … ([#34](open-sauced/app#34)) ([22671a6](open-sauced/app@22671a6)) ### 🔁 Continuous Integration * Added Storybook deployment automation script to project. ([#21](open-sauced/app#21)) ([d3685d8](open-sauced/app@d3685d8)) * correct nextjs build location ([0b24025](open-sauced/app@0b24025)) * correct release workflow dependencies ([461dffd](open-sauced/app@461dffd)) * default environment to development ([a5c286e](open-sauced/app@a5c286e))
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
What type of PR is this? (check all applicable)
Description
This PR adds the feature of mobile responsiveness to the project.
Related Tickets & Documents
Fixes #43 & #45 & #80 & #83
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?