Added yearly goal affordances to mobile view in my books page

openlibrary/i18n/messages.pot

@@ -1351,6 +1351,11 @@ msgstr ""
 msgid "This reader has chosen to make their Reading Log private."
 msgstr ""
 
+#: account/mybooks.html
+#, python-format
+msgid "%(year_span)s reading goal"
+msgstr ""
+
 #: account/mybooks.html account/sidebar.html
 msgid "Untitled list"
 msgstr ""
@@ -1733,10 +1738,6 @@ msgstr ""
 msgid "Set %(year_span)s reading goal"
 msgstr ""
 
-#: account/sidebar.html
-msgid "Yearly Reading Goal"
-msgstr ""
-
 #: account/sidebar.html search/sort_options.html type/user/view.html
 msgid "Reading Log"
 msgstr ""
@@ -1792,6 +1793,10 @@ msgstr ""
 msgid "Then, come back to Open Library and find some great books!"
 msgstr ""
 
+#: account/view.html
+msgid "Yearly Reading Goal"
+msgstr ""
+
 #: account/view.html books/mybooks_breadcrumb_select.html
 msgid "Following"
 msgstr ""

openlibrary/plugins/openlibrary/js/check-ins/index.js

@@ -522,27 +522,29 @@ function addGoalSubmissionListener(submitButton) {
                     modal.close()
                 }
 
-                const yearlyGoalSection = modal.closest('.yearly-goal-section')
+                const yearlyGoalSections = document.querySelectorAll('.yearly-goal-section')
                 if (formData.get('is_update')) {  // Progress component exists on page
-                    const goalInput = form.querySelector('input[name=goal]')
-                    const isDeleted = Number(goalInput.value) === 0
-
-                    if (isDeleted) {
-                        const chipGroup = yearlyGoalSection.querySelector('.chip-group')
-                        const goalContainer = yearlyGoalSection.querySelector('#reading-goal-container')
-                        if (chipGroup) {
-                            chipGroup.classList.remove('hidden')
+                    yearlyGoalSections.forEach((yearlyGoalSection) => {
+                        const goalInput = form.querySelector('input[name=goal]')
+                        const isDeleted = Number(goalInput.value) === 0
+
+                        if (isDeleted) {
+                            const chipGroup = yearlyGoalSection.querySelector('.chip-group')
+                            const goalContainer = yearlyGoalSection.querySelector('#reading-goal-container')
+                            if (chipGroup) {
+                                chipGroup.classList.remove('hidden')
+                            }
+                            if (goalContainer) {
+                                goalContainer.remove()
+                            }
+                        } else {
+                            const progressComponent = modal.closest('.reading-goal-progress')
+                            updateProgressComponent(progressComponent, Number(formData.get('goal')))
                         }
-                        if (goalContainer) {
-                            goalContainer.remove()
-                        }
-                    } else {
-                        const progressComponent = modal.closest('.reading-goal-progress')
-                        updateProgressComponent(progressComponent, Number(formData.get('goal')))
-                    }
+                    })
                 } else {
                     const goalYear = formData.get('year')
-                    fetchProgressAndUpdateView(yearlyGoalSection, goalYear)
+                    fetchProgressAndUpdateViews(yearlyGoalSections, goalYear)
                     const banner = document.querySelector('.page-banner-mybooks')
                     if (banner) {
                         banner.remove()
@@ -578,10 +580,10 @@ function updateProgressComponent(elem, goal) {
  * Adds listeners to the progress component, and hides
  * link for setting reading goal.
  *
- * @param {HTMLElement} yearlyGoalElem Container for progress component and reading goal link.
+ * @param {NodeList} yearlyGoalElems Containers for progress components and reading goal links.
  * @param {string} goalYear Year that the goal is set for.
  */
-function fetchProgressAndUpdateView(yearlyGoalElem, goalYear) {
+function fetchProgressAndUpdateViews(yearlyGoalElems, goalYear) {
     fetch(`/reading-goal/partials.json?year=${goalYear}`)
         .then((response) => {
             if (!response.ok) {
@@ -591,19 +593,24 @@ function fetchProgressAndUpdateView(yearlyGoalElem, goalYear) {
         })
         .then(function(data) {
             const html = data['partials']
-            const progress = document.createElement('SPAN')
-            progress.id = 'reading-goal-container'
-            progress.innerHTML = html
-            yearlyGoalElem.appendChild(progress)
-
-            // Hide the "Set 20XX reading goal" link:
-            yearlyGoalElem.children[0].classList.add('hidden')
-
-            const progressEditLink = progress.querySelector('.edit-reading-goal-link')
-            const updateModal = progress.querySelector('dialog')
-            initDialogs([updateModal])
-            addGoalEditClickListener(progressEditLink, updateModal)
-            const submitButton = updateModal.querySelector('.reading-goal-submit-button')
-            addGoalSubmissionListener(submitButton)
+            yearlyGoalElems.forEach((yearlyGoalElem) => {
+                const progress = document.createElement('SPAN')
+                progress.id = 'reading-goal-container'
+                progress.innerHTML = html
+                yearlyGoalElem.appendChild(progress)
+
+                // Hide the "Set 20XX reading goal" link:
+                const link = yearlyGoalElem.querySelector('.set-reading-goal-link');
+                if (link) {
+                    link.classList.add('hidden'); // To handle the specific link element
+                }
+
+                const progressEditLink = progress.querySelector('.edit-reading-goal-link')
+                const updateModal = progress.querySelector('dialog')
+                initDialogs([updateModal])
+                addGoalEditClickListener(progressEditLink, updateModal)
+                const submitButton = updateModal.querySelector('.reading-goal-submit-button')
+                addGoalSubmissionListener(submitButton)
+            })
         })
 }

openlibrary/templates/account/mybooks.html

@@ -82,6 +82,27 @@ <h2 class="home-h2"><a name="$key" href="$url">$title</a></h2>
           $# Render carousel
           $:(mobile_carousel(loans) or empty_mobile_carousel(loans))
         </li>
+        <li>
+          $ year = current_year()
+          $ current_goal = get_reading_goals(year=year)
+          $ hidden = 'hidden' if current_goal else ''
+          <div class="yearly-goal-section carousel-section-header">
+            $# Hide "Set reading goal" call to action with hidden class if a goal has already been set:
+            <div class="">
+              <span class="">
+                $ year_markup = year_span(year)
+                <a class="set-reading-goal-link li-title-desktop" data-ol-link-track="MyBooksLandingPage|SetReadingGoal"href="javascript:;">
+                  $:_('%(year_span)s reading goal', year_span=year_markup)
+                  <img class="icon-link__image li-count" src="/static/images/icons/right-chevron.svg">
+                </a>
+              </span>
+            </div>
+            $if current_goal:
+              <span id="reading-goal-container">
+                $:render_template('check_ins/reading_goal_progress', [current_goal])
+              </span>
+          </div>
+        </li>
     $if public or owners_page:
         <li>
           $# Render carousel

openlibrary/templates/account/sidebar.html

@@ -32,8 +32,6 @@
                 $ year_markup = year_span(year)
                 <a class="set-reading-goal-link" data-ol-link-track="MyBooksLandingPage|SetReadingGoal"href="javascript:;">$:_('Set %(year_span)s reading goal', year_span=year_markup)</a>
               </span>
-              $ reading_goal_form = render_template('check_ins/reading_goal_form', year=year)
-              $:render_template('native_dialog', 'yearly-goal-modal', reading_goal_form, title=_('Yearly Reading Goal'))
             </div>
             $if current_goal:
             <span id="reading-goal-container">

openlibrary/templates/account/view.html

@@ -7,7 +7,9 @@
 $var title: $header_title
 
 <div class="mybooks">
-
+  $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'))
   $:mb.render_sidebar()
 
   $ css = 'no-padding' if mb.key == 'mybooks' else ''

static/css/components/check-in.less

@@ -176,3 +176,16 @@
     margin: auto;
   }
 }
+
+@media only screen and (max-width: @width-breakpoint-tablet) {
+  .reading-goal-progress {
+    padding: 15px 0 0;
+
+    &__details {
+      display: flex;
+      justify-content: space-between;
+      width: 85%;
+      margin: auto;
+    }
+  }
+}