Added yearly goal affordances to mobile view in my books page

[sumana-2705]

Closes #10168

Fix

At present the UI does not have the option to set the yearly goals in Mobile view (as it is present in the side bar which is not included in the mobile view). This PR adds the option to set the yearly goals in the main body in mobile view.

Testing

1. Deploy the branch locally.
2. Go to my books page.
3. Look on the "set yearly goals" section.
4. Observe the responsiveness in mobile and laptop view.

Screenshot

After setting a particular goal

In laptop view

Stakeholders

@jimchamp @mekarpeles

[accesslint]

There are accessibility issues in these changes.

[accesslint]

This image is missing a text alternative. This is a problem for people using screen readers.

[sumana-2705]

@mekarpeles @jimchamp

I have done the changes and the set yearly goals options functions well on smaller screens too. But when we click on the set yearly goals in mobile, the dialog box does not appear in smaller screen and reappears as soon as we increase the screen size. I am working to figure out and correct this. Can anyone please help how to resolve this issue.

[jimchamp]

Part of the problem is that there should only be one dialog with id yearly-goal-modal on the page at a single time. Whenever this link is clicked in mobile views, the desktop dialog is opening. The desktop dialog cannot be seen as it is nested within a div that has display: none for small screen sizes.

To ensure that there is only one #yearly-goal-modal dialog on the screen, you can add the following code here:

  $if mb.is_my_page:
    $ reading_goal_form = render_template('check_ins/reading_goal_form', year=current_year())
    $:render_template('native_dialog', 'yearly-goal-modal', reading_goal_form, title=_('Yearly Reading Goal'))

Then, remove the other reading goal form native dialogs from sidebar.html and mybooks.html.

---

You will run into a similar issue when a new goal is submitted. The view is updated by the fetchProgressAndUpdateView function, which updates a given yearlyGoalElem element with HTML fetched from the server. Since there will now be multiple progress bars on the page, multiple yearlyGoalElem elements will need to be updated (even though only one will be visible at a time, depending on screen size).

To fix this, you'll likely want to update this line to use document.querySelectorAll('.yearly-goal-section') to get all references to these elements, then update fetchProgressAndUpdateView such that it updates multiple elements with the progress bar. Don't forget to pluralize variable and parameter names where appropriate.

[jimchamp]

@sumana-2705, how is this progressing? Do you have any questions?

[ananyakaligal]

@jimchamp Can i work on this if @sumana-2705 isnt?

[sumana-2705]

Hello @jimchamp thanks for your help, It has worked well and now it is working perfectly. I was busy with my semester exams and not able to see the replies.

I added the reading goal form native dialog in view.html and removed it from mybooks.html and sidebar.html. I also modified the fetchProgressAndUpdateView to include multiple elements and pluralized variables accordingly. The yearly reading goal is working perfectly fine in my computer, for all screen sizes.