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

Add speech bubbles to citations in the user story page #84

Merged
merged 14 commits into from
Jan 25, 2025

Conversation

biru-codeastromer
Copy link
Contributor

@biru-codeastromer biru-codeastromer commented Jan 15, 2025

Fixes #8

Summary:

  • Implemented a speech bubble tail (caret) effect using CSS ::after pseudo-element.
  • Positioned the caret below the speech bubble box, creating a more authentic speech bubble shape.
  • Adjusted the bottom and border-width properties to achieve the desired effect.

Changes Made:

  • CSS .speechBubble class**: Added position: relative; for proper placement of the caret.
  • CSS .speechBubble::after pseudo-element**: Added a caret effect using borders to simulate the tail of the speech bubble.
  • Adjusted bottom to position the caret slightly below the speech bubble.
  • Set appropriate border-color to match the speech bubble’s background.

Issue Resolved:

  • The issue where the speech bubble lacked a proper tail was fixed.

Result:

  • The speech bubble now has a tail pointing downward, positioned just below the box for a complete speech bubble effect.

Before :

Screenshot 2025-01-15 at 10 43 31 AM

After :

Screenshot 2025-01-15 at 10 44 03 AM

Please review the changes and let me know if there are any questions or further adjustments needed.

@biru-codeastromer
Copy link
Contributor Author

biru-codeastromer commented Jan 15, 2025

Hi Sir @krisstern ,
I hope you're doing well .
I wanted to ask you about a thing I notice in my PR .

Screenshot 2025-01-15 at 5 13 20 PM Screenshot 2025-01-15 at 5 15 53 PM

There are 7 CI checks including deployment , but why are there been only 4 CI checks in this PR ; and also no deployment has been shown .

@krisstern
Copy link
Member

Hi, you do not have the permissions to deploy your PR to the preview, not unless there is some input on the maintainers' (such as mine) side.

@biru-codeastromer
Copy link
Contributor Author

Hi, you do not have the permissions to deploy your PR to the preview, not unless there is some input on the maintainers' (such as mine) side.

Hi Sir,

Thank you for clarifying! :)

@biru-codeastromer
Copy link
Contributor Author

I have resolved conflicts here too !

@krisstern
Copy link
Member

Hi, before I can review this one final time, could you please resolve the conflicts in this PR?

@biru-codeastromer
Copy link
Contributor Author

biru-codeastromer commented Jan 20, 2025

Hi, before I can review this one final time, could you please resolve the conflicts in this PR?

Sure Sir, doing it now and will update you soon !

@biru-codeastromer
Copy link
Contributor Author

Hi, before I can review this one final time, could you please resolve the conflicts in this PR?

Hi Sir , I want to point you out an important update, the PR #85 has only prettier changes and the PR #80 has the technical changes which excluded the prettier inclusion . Now since #85 got merged before #80 , the prettier inclusion got away from our main repo.

So I wanted to ask you should I again have to raise the prettier inclusion PR ? Please let me know how I can help it out . Thanks !

@biru-codeastromer
Copy link
Contributor Author

Hello Sir , I have resolved the conflicts .

@krisstern
Copy link
Member

Hi,
I am a bit worried about the changes you have made to the "package-lock.json" file. Could you please regenerate a new one by first deleting it and then run npm i to reintroduce this file then add, commit, and push here again?

@biru-codeastromer
Copy link
Contributor Author

Hi, I am a bit worried about the changes you have made to the "package-lock.json" file. Could you please regenerate a new one by first deleting it and then run npm i to reintroduce this file then add, commit, and push here again?

Sure Sir , will do it now . I tried to resolve in vs code "merge conflicts" feature which might be not as good as needed.

@biru-codeastromer
Copy link
Contributor Author

biru-codeastromer commented Jan 21, 2025

Hi, I am a bit worried about the changes you have made to the "package-lock.json" file. Could you please regenerate a new one by first deleting it and then run npm i to reintroduce this file then add, commit, and push here again?

Hello Sir, I have made it through removing first and then installing package.json again .
Please review the changes and let me know if it's good now !

@biru-codeastromer
Copy link
Contributor Author

Is there any more changes needed Sir for the PR ,please let me know about it too .

@krisstern
Copy link
Member

Hi @biru-codeastromer your package-lock.json file does not look right to me. Could you please delete both your node_modules directory as well as package-lock.json file with Node.js version 20 and re-install the dependencies as well as the package-lock.json file by running the following in the terminal?:

npm i

Then commit and push your changes again. Thanks!

@biru-codeastromer
Copy link
Contributor Author

Hi @biru-codeastromer your package-lock.json file does not look right to me. Could you please delete both your node_modules directory as well as package-lock.json file with Node.js version 20 and re-install the dependencies as well as the package-lock.json file by running the following in the terminal?:

npm i

Then commit and push your changes again. Thanks!

Sure Sir ! Will be doing it now and confirm you here about update .

@biru-codeastromer
Copy link
Contributor Author

Hi @biru-codeastromer your package-lock.json file does not look right to me. Could you please delete both your node_modules directory as well as package-lock.json file with Node.js version 20 and re-install the dependencies as well as the package-lock.json file by running the following in the terminal?:

npm i

Then commit and push your changes again. Thanks!

Hello Sir, I have reinstalled the dependencies with Node.js version 20 with your steps as requested. Please let me know if further changes are needed and also if the package-lock.json looks good to you . Thank you!

@krisstern krisstern changed the title Added speech bubble to citations in User Story Page Add speech bubbles to citations in the user story page Jan 25, 2025
package.json Outdated
@@ -16,6 +16,7 @@
"lint": "eslint ."
},
"dependencies": {
"@parcel/watcher": "^2.5.0",
Copy link
Member

Choose a reason for hiding this comment

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

Suggested change
"@parcel/watcher": "^2.5.0",

I am wondering why we need this new "@parcel/watcher" dependency?

Copy link
Member

Choose a reason for hiding this comment

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

Could you please update the package-lock.json file after the removal of this dependency locally as well before pushing to GitHub?

Copy link
Contributor Author

Choose a reason for hiding this comment

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

I am wondering why we need this new "@parcel/watcher" dependency?

Actually I didnt mean to include it but in my gatsby build i got error due to absence of this for which I included and got my error removed from build

Copy link
Contributor Author

Choose a reason for hiding this comment

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

Could you please update the package-lock.json file after the removal of this dependency locally as well before pushing to GitHub?

Okay Sir, doing it and inform you about the update

Copy link
Contributor Author

Choose a reason for hiding this comment

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

Hello Sir, I investigated the presence of @parcel/watcher in package-lock.json. It appears as a transitive dependency required by gatsby via @parcel/cache and @parcel/fs. Since it is not explicitly listed in package.json and is required for gatsby to function, it cannot be removed directly. Please let me know if any further action is needed. Thank you!

Copy link
Contributor Author

Choose a reason for hiding this comment

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

Screenshot 2025-01-25 at 11 38 53 PM

@biru-codeastromer
Copy link
Contributor Author

Screenshot 2025-01-25 at 11 48 42 PM

It is in the official main repo too ! it is not present in the package.json but present in package-lock.json.

@biru-codeastromer
Copy link
Contributor Author

Hello Sir,
I have removed the @parcel/watcher dependency from the package.json file as per your suggestion. After running npm install, the package-lock.json has been updated to reflect this change.

However, since @parcel/watcher is an indirect dependency required by gatsby (via @parcel/cache and @parcel/fs), it still appears in the package-lock.json under the transitive dependencies.

Please let me know if any further adjustments are needed! Thank you.

@krisstern
Copy link
Member

Yes, I have checked we do not need this package in the "package.json" file for the build to compile.

@krisstern krisstern self-requested a review January 25, 2025 18:31
Copy link
Member

@krisstern krisstern left a comment

Choose a reason for hiding this comment

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

LGTM

Thanks @biru-codeastromer for the PR!

@biru-codeastromer
Copy link
Contributor Author

biru-codeastromer commented Jan 25, 2025

LGTM

Thanks @biru-codeastromer for the PR!

Welcome Sir ! 😄

@krisstern krisstern merged commit cb99fb3 into jenkins-infra:main Jan 25, 2025
7 checks passed
@biru-codeastromer biru-codeastromer deleted the speech-bubble branch January 25, 2025 18:35
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.

Add a speech bubble in user story page
2 participants