Document Preview (PDF,HTML) should also be responsive

Hi All,

Till now we have responsiveness covered for Candidate view pages for iPads, and iPad Pro.

Following attachment contains the screenshot for the same.

For making the pages Mobile responsive we need UX to be created for that. Ticket DMS-1466 is created for UX task.

cc - Samir, Robert Malony

Thanks

Samir : Can you please confirm what all pages I need to consider?

CC: Narendra Kumar Kristen

Hi Aruna Raheja,

The pages that needs new ui for mobile responsiveness for Candidate portal are:

• Candidate Profile page (covered in DMS-1466) 
• Review and Sign page(Complete work flow including PDF and HTML pages)

cc - Samir, Kristen

Thanks

Hi Robert Malony, Kindly review the attached screens.

CC: Kristen Samir Narendra Kumar Mohd Belal

Look good Aruna Raheja!

Hi Narendra Kumar,

Can you please let me know the small devices(mobile) resolution which are target for responsive html?

Regards,
Namrata

Samir Satya

Hi Aruna Raheja

Can you please answer for Namrata?

Hi Namrata Kakade

Resolution will be 375px in which we need to adjust content in 335px, kindly check the screenshot attached. If you still have any questions, kindly call me.

Hi Narendra Kumar, 

I have few more queries:
1. Can you please share the open view of hamburger menu.
2. Please confirm the color and alignment of save button (In Esign Decline popup we are added blue color of button and in Esign Types popup(mock-up), the button background color is white(Is any reason behind the color change of button?)).
2. In the mobile mock-up, the some note are aligned center of the page and we are align all the text at left side. Are we keeping the in middle alignment or align to left?
3. How to show left side menus and top menus in the mobile?
4. Are we taken page title end to end as per mock-up?

Regards,
Namrata
Samir Satya 

Hi Namrata Kakade,

Here are your answers.

1. We have not finalized it yet. 
2. Keep the same color and the same alignment as we have right now in the web component.
3. Keep on the left aligned.
4. We have not finalized it yet. 
5. not getting your question. please explain.

Thanks

Narendra

Hi Narendra Kumar,

Please find the attachment of responsive HTML and CSS of Review and Sign Popup.src.zip
Following are list of updated pages(component):
1. esignature-draw: html and css
2. esignature-library: html and css
3. esignature-type: html and css
4. esignature-upload: html and css
5. esign-decline-page: html and css

Still working on Review and Sign comment  page, I will share it tomorrow.
Please check updated html and css structure and let me know if you have any query.
Once you finalized with the left and top menu(open view of hamburger menu)

Regards,
Namrata

Samir Satya

Hi Namrata Kakade,

Please update the latest code changes which you have worked so far, so that I can start integration of same in Angular side.

cc - Samir

Thanks

Hi Samir,

Please find attachment for Review and Sign: New UI & Mobile Responsive html status.
DMS-ReviewSign-MobileResponsive-Estimation.ods
Thanks and Regards,
Namrata

Narendra Kumar Mohd Belal

Hi Namrata Kakade,

Please update the latest code base for pages which you have worked so far. I am awaiting for the changes to start the same in Angular side.

cc - Samir

Thanks

Hi Narendra Kumar

Please find attachment of HTML and CSS Review and Sign Page Comments and Review and Sign Page Decline. Still pending card view part of Review and Sign Page Decline. I will update you once completed.
Please check and let me know if changes needed. src.zip

Thanks and Regards,
Namrata

Mohd Belal Samir

Hi Namrata Kakade,

I have attached screenshot Screenshot 2019-06-24 at 10.43.33 AM.png for Mobile view of Review and Sign page.

The Header part is not aligned proper, please check the header as well while making UI responsive.

For any query, contact me.

cc - Samir

Thanks

Hi Mohd Belal,

I have updated classes in review and sign page but we need to move that classes in common CSS file. For right-top menu and left side-panel position and alignment are not finalized it yet. Please Let me know the convenient time to fix it and need discussion for responsiveness of PDF view.

Samir Narendra Kumar

Hi Namrata Kakade,

For the header part, the right side contents including the Welcome and icons will go into Hamburger part.

And we will show icon for Hamburger in the mobile view along with logo and CareerBuilder in the left.

cc - Samir

Thanks

Hi Namrata Kakade,

The file upload modal needs to be responsive as well when viewed in the mobile space.

Attached screenshot for File Modal: Screenshot 2019-06-24 at 2.49.44 PM.png for your ref.

Also need to work on Modals popups which are coming in case of success / fail of form submission and in case of session timeout.

So, Overall UI that needs to be made responsive apart from above screenshot mentioned are:

1. Header part
2. Loader 
3. File Upload Modal
4. Modal popups for different success / fail messages.

cc - Samir

Thanks

Hi Mohd Belal,

Please find the attachment of Review and Sign Page, Header, Review and Sign Page PDF with responsive UI.
Following are list of updated files:
1. header.component.html
2. header.component.css
3. review-sign-page-post-comment.component.html
4. review-sign-page-post-comment.component.scss
5. review-signpage-pdf.component.html
6. review-signpage-pdf.component.scss

I have updated header (with hamburger menu) of page and please check the updated classes in modal components because I have already updated responsive classes in HTML and CSS. Please check and let me know if you have any query.

Thanks and Regards,
Namrata
Samir

Hi Namrata Kakade,

Please look into header part, its still not correct after making your changes.

Attached screenshot: Screenshot 2019-06-26 at 1.21.13 PM.png

Also the zip src.zip which you have provided does not contains any folder/files for Modal Popups.

cc - Samir

Thanks

Hi Mohd Belal,

You need to update the common header component which came from header component and I have updated header component html and css. All modal component and css changes are shared in last week, please check last week folder. Please check and let me know if you have any query about html and css.

Regards,
Namrata

Samir

Hi Namrata Kakade,
Please confirm that you have the latest code from the develop branch. As of now when trying to merge the code following issues are coming:

1. Header not proper aligned for Review and Sign page.
2. Header issue for review-sign-page-post-comment page, in case of document review and sign page.
3. Iframe left alignment issue.
4. Loader left aligned issue.
5. Buttons and Left page icon in review-sign-page-post-comment page not proper.

cc- Samir

Thanks

Hi Mohd Belal

I have taken latest code from Akash and updated html and css.
Please find the attachment for responsive UI. src.zip
Following are the list of updated files:
1. header.component.html
2. header.component.css
3. style.scss
4. document-review.component.html
5. document-review.component.scss
6. forms-preview.component.html
7. forms-preview.component.scss
8. review-and-sign.component.html
9. review-and-sign.component.scss
10. Hide left side panel in mobile view.
11. Header not proper aligned for Review and Sign page: Done
12. Header issue for review-sign-page-post-comment page, in case of document review and sign page: Done
13. Iframe left alignment issue: Done
14. Loader left aligned issue: Done
15. Buttons and Left page icon in review-sign-page-post-comment page not proper: Done
16. For modal components, I have already added responsive classes for modal which is shared with you previously, due to non-responsive structure it not reflected in some pages.

Please check the updated html and css and let me know if you have any query.

Thanks and Regards,
Namrata

Samir

HI Namrata Kakade,

As discussed please provide the single component for File upload instead of separate individual components.

Also, the static html provided in zip is not according to the updates design.
Please consider the updated design while making a common component for File Upload Single component.

cc - Samir

Thanks

Hi Mohd Belal

I have already mentioned that, you can pickup the required HTML from separate files, it is same as copying components from single file.
In any way, you need to copy the particular HTML, whether it is in single file or in different.
Hence requesting you, to start with integration and let me know if you need any help to understand the structure.

Regards,
Namrata
Samir

Hi Mohd Belal

Below are the UI observations on Stage: https://dmsstage.workterra.net/
1. White space from top side of signed buttons in Action documents.
2. Drop-down arrow of actions is if aligned right, need to add padding-right.
3. Left and right padding is not equal.
4. Top-bottom padding needs to increase as per mock-up.
5. Mail id and title not aligned from left side as well ass post comment and attach file.
6. Documents and Review and Signed button not aligned in single row in iPad view.
7. Top-bottom padding is not consistent in review and sign pdf view etc.
Please check and let me know if you have query.

Regards,
Namrata

Samir Priya Dhamande

Namrata Kakade, Can you pelase verify issues reported from your end.

Sachin Hingole Hrishikesh Deshpande Rohan J Khandave Samir

Hi Priya Dhamande,

I have created seperate jira for above issues DMS-1642 and yesterday me and Belal are worked on above issues. And I have verified changes on Belal machine.

Regards,
Namrata

Mohd Belal Samir Rohan J Khandave

No action required from QA end, as this veified from Namrata Kakade.

So, marking thi sdone.

Sachin Hingole Rohan J Khandave Hrishikesh Deshpande Samir