-
Notifications
You must be signed in to change notification settings - Fork 0
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
Window popup #15
Window popup #15
Conversation
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Status: Required Changes β»οΈ
Hi @team,
Good job so far!
There are some issues that you still need to work on to go to the next project but you are almost there!
Highlights
- No linter errors. βοΈ
- Good README file. βοΈ
- Correct GitHub Flow. βοΈ
Required Changes β»οΈ
Check the comments under the review.
Optional suggestions
Every comment with the [OPTIONAL] prefix is not crucial enough to stop the approval of this PR. However, I strongly recommend you to take them into account as they can make your code better.
Cheers and Happy coding!πππ
Feel free to leave any questions or comments in the PR thread if something is not 100% clear.
Please, remember to tag me in your question so I can receive the notification.
Please, do not open a new Pull Request for re-reviews. You should use the same Pull Request submitted for the first review, either valid or invalid unless it is requested otherwise.
As described in the Code reviews limits policy you have a limited number of reviews per project (check the exact number in your Dashboard). If you think that the code review was not fair, you can request a second opinion using this form.
styling.css
Outdated
justify-content: space-between; | ||
align-items: center; | ||
width: 100%; | ||
height: auto; | ||
} | ||
|
||
.modalImage { | ||
margin-top: 20px; | ||
margin-bottom: 20px; | ||
width: 360px; | ||
height: 214px; | ||
} | ||
|
||
.modalImageOther { | ||
margin-top: 20px; | ||
margin-bottom: 20px; | ||
width: 360px; | ||
height: 214px; | ||
} | ||
|
||
.restArticle { | ||
width: 100%; | ||
display: flex; | ||
flex-direction: column; | ||
justify-content: space-between; | ||
align-items: center; | ||
padding: 20px; | ||
padding-top: 0px; | ||
} | ||
|
||
.modalDescription { | ||
font-family: 'Inter', sans-serif; | ||
font-weight: 900; | ||
font-size: 1.188rem; | ||
color: #091e42; | ||
column-gap: 10px; | ||
width: 360px; | ||
height: fit-content; | ||
padding-bottom: 10px; | ||
} | ||
|
||
.modalbuttonsholder { | ||
width: 100%; | ||
display: flex; | ||
flex-direction: row; | ||
justify-content: center; | ||
column-gap: 60px; | ||
margin-top: 10px; | ||
} | ||
|
||
.modalbutton1 { | ||
background-color: #c46710; | ||
width: 150px; | ||
border: 0; | ||
padding-top: 15px; | ||
padding-bottom: 15px; | ||
margin-left: 20px; | ||
} | ||
|
||
.modalbutton1:hover { | ||
background-color: #ceb49d; | ||
} | ||
|
||
.modalbutton1:active { | ||
background-color: #973a04; | ||
} | ||
|
||
.modalbutton1 > a { | ||
color: white; | ||
font-family: 'Inter', sans-serif; | ||
display: flex; | ||
column-gap: 10px; | ||
justify-content: center; | ||
} | ||
|
||
.modalbutton2 { | ||
background-color: #c46710; | ||
width: 165px; | ||
border: 0; | ||
padding-top: 15px; | ||
padding-bottom: 15px; | ||
margin-right: 33px; | ||
} | ||
|
||
.modalbutton2:hover { | ||
background-color: #ceb49d; | ||
} | ||
|
||
.modalbutton2:active { | ||
background-color: #973a04; | ||
} | ||
|
||
.modalbutton2 > a { | ||
width: fit-content; | ||
color: white; | ||
font-family: 'Inter', sans-serif; | ||
display: flex; | ||
column-gap: 10px; | ||
justify-content: center; | ||
} |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
- Great job so far. However, there're few things to work on before you move to the next milestone.
- The window popup on the mobile version does not appear as we have it on the figma design.
- The
X
icon to close the modal is not showing on the popup window. - The arrangement of the list of tools used to build the project are not properly layout as we have them on the figma design.
- There's a small horizontal scroll bar at the bottom of the page.
kindly attend to all these observations and fix them.
You Design
Screen Recording
app-behave.webm
Figma Design
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
As per my previous CR π i was requested β»οΈ to make some changes like :
-make better design for mobile view to fit figma designπ¨
-Remove the horizontal scroll bar π to improve ux.
as per my last commit π’ to the pull request i have fixed π§βπ§ all the issues above. π
I hope to hear from you my CR π€Ί soon!.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Hi @gisachris,
STATUS: APPROVED π
Your project is complete! There is nothing else to say other than... it's time to merge it
Congratulations! π
Highlights
- No linter errors βοΈ
- Descriptive PR βοΈ
- Correct Github flow βοΈ
- Good UI β β β
Optional suggestions
Every comment with the [OPTIONAL] prefix won't stop the approval of this PR. However, I strongly recommend you to take them into account as they can make your code better. Some of them were simply missed by the previous reviewer and addressing them will really improve your application.
Cheers and Happy coding!πππ
Feel free to leave any questions or comments in the PR thread if something is not 100% clear.
Please, remember to tag me in your question so I can receive the notification.
As described in the Code reviews limits policy you have a limited number of reviews per project (check the exact number in your Dashboard). If you think that the code review was not fair, you can request a second opinion using this form.
IN This PR I have done the following π¨βπ» :
-Refactor project section to load dynamically with javascript file (app.js) π‘
-Add pop up modals for there corresponding projects π₯
-add some styling to better fit figma design π¨ and overall website functionality π§βπ§
-implement the following actions π₯ :
When the user clicks (or taps) the button to check project details, the popup with details about the project appears.β
When the user clicks (or taps) the close (X) button, the popup disappears. β
I am looking forward to your comments on the work I have done so far π . thankyou π