Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

fix: now the repository insights pages header looks good on smaller screens #3687

Merged

Conversation

nickytonline
Copy link
Member

@nickytonline nickytonline commented Jul 4, 2024

Description

Now the repository insights pages look good on smaller screens. Note that the Add Repositories wizard modal is still not responsive. It will be addressed in a separate PR as the wizard modal is used in a for contributor insights as well as tracked repositories for a workspace.

Related Tickets & Documents

Fixes #3669

Mobile & Desktop Screenshots/Recordings

Before

CleanShot 2024-07-04 at 15 33 48

CleanShot 2024-07-04 at 15 29 35

After

CleanShot 2024-07-04 at 15 34 46

CleanShot 2024-07-04 at 15 28 54

Steps to QA

  1. Go to a repository insight page from any workspace on your phone
  2. Notice the dashboard, contributors and activity pages when navigated to, all look good on mobile.
  3. Edit or create a new repository insight.
  4. Notice it looks good on smaller screens.

Tier (staff will fill in)

  • Tier 1
  • Tier 2
  • Tier 3
  • Tier 4

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

Copy link

netlify bot commented Jul 4, 2024

Deploy Preview for oss-insights ready!

Name Link
🔨 Latest commit 2a44928
🔍 Latest deploy log https://app.netlify.com/sites/oss-insights/deploys/6688a79850957500085c3550
😎 Deploy Preview https://deploy-preview-3687--oss-insights.netlify.app
📱 Preview on mobile
Toggle QR Code...

QR Code

Use your smartphone camera to open QR code link.

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

Copy link

netlify bot commented Jul 4, 2024

Deploy Preview for design-insights ready!

Name Link
🔨 Latest commit 2a44928
🔍 Latest deploy log https://app.netlify.com/sites/design-insights/deploys/6688a79803bfdf0008315bc0
😎 Deploy Preview https://deploy-preview-3687--design-insights.netlify.app
📱 Preview on mobile
Toggle QR Code...

QR Code

Use your smartphone camera to open QR code link.

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

@nickytonline nickytonline marked this pull request as ready for review July 4, 2024 19:20
@nickytonline nickytonline requested review from isabensusan, BekahHW and a team July 4, 2024 19:35
Copy link
Member

@isabensusan isabensusan left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Looking much better! Can we add a tiny bit of padding to alerts and modals too?

ie. when successfully editing an insight I get this success alert
image

Or when adding more repositories I see this modal
image

and they both could use some very small padding to the sides, like so:
image

@nickytonline
Copy link
Member Author

Looking much better! Can we add a tiny bit of padding to alerts and modals too?

ie. when successfully editing an insight I get this success alert image

Or when adding more repositories I see this modal image

and they both could use some very small padding to the sides, like so: image

For the modals, they're going to be reworked into drawers in another PR, but I'll make the suggested changes.

@nickytonline
Copy link
Member Author

Made the updates @isabensusan.

Before

CleanShot 2024-07-04 at 19 43 46

CleanShot 2024-07-04 at 19 46 04

After

CleanShot 2024-07-04 at 19 44 37

CleanShot 2024-07-04 at 19 44 56

Copy link
Contributor

@brandonroberts brandonroberts left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Copy link
Member

@isabensusan isabensusan left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Thanks for this!! LGTM

@nickytonline nickytonline merged commit 8a47e17 into beta Jul 8, 2024
13 checks passed
@nickytonline nickytonline deleted the nickytonline/edit-repository-insights-mobile-fixes branch July 8, 2024 15:34
open-sauced bot pushed a commit that referenced this pull request Jul 8, 2024
## [2.42.1-beta.2](v2.42.1-beta.1...v2.42.1-beta.2) (2024-07-08)

### 🐛 Bug Fixes

* now the repository insights pages header looks good on smaller screens ([#3687](#3687)) ([8a47e17](8a47e17))
open-sauced bot pushed a commit that referenced this pull request Jul 9, 2024
## [2.43.0](v2.42.0...v2.43.0) (2024-07-09)

### 🍕 Features

* `YoloChart` in repo pages ([#3658](#3658)) ([9462519](9462519))

### 🐛 Bug Fixes

* now app sidebar menu items have the same font weight ([#3690](#3690)) ([3647252](3647252))
* now the repository insights pages header looks good on smaller screens ([#3687](#3687)) ([8a47e17](8a47e17))
* use explore page with typescript topic as fallback instead of feed page ([#3691](#3691)) ([a50e34a](a50e34a))
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

Bug: Repository insight page and Repository Insight new/edit pages spill out on mobile
4 participants