diff --git a/openlibrary/i18n/messages.pot b/openlibrary/i18n/messages.pot index 5738c7553d3..7ba8be41543 100644 --- a/openlibrary/i18n/messages.pot +++ b/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 "" diff --git a/openlibrary/plugins/openlibrary/js/check-ins/index.js b/openlibrary/plugins/openlibrary/js/check-ins/index.js index f38ac6ada94..fea35d7cc0d 100644 --- a/openlibrary/plugins/openlibrary/js/check-ins/index.js +++ b/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) + }) }) } diff --git a/openlibrary/templates/account/mybooks.html b/openlibrary/templates/account/mybooks.html index e88cfc0af86..6531a58af1d 100644 --- a/openlibrary/templates/account/mybooks.html +++ b/openlibrary/templates/account/mybooks.html @@ -82,6 +82,27 @@

$title

$# Render carousel $:(mobile_carousel(loans) or empty_mobile_carousel(loans)) +
  • + $ year = current_year() + $ current_goal = get_reading_goals(year=year) + $ hidden = 'hidden' if current_goal else '' +
    + $# Hide "Set reading goal" call to action with hidden class if a goal has already been set: +
    + + $ year_markup = year_span(year) + + $:_('%(year_span)s reading goal', year_span=year_markup) + + + +
    + $if current_goal: + + $:render_template('check_ins/reading_goal_progress', [current_goal]) + +
    +
    • $if public or owners_page:
  • $# Render carousel diff --git a/openlibrary/templates/account/sidebar.html b/openlibrary/templates/account/sidebar.html index 12a4db97196..8e8276c6527 100644 --- a/openlibrary/templates/account/sidebar.html +++ b/openlibrary/templates/account/sidebar.html @@ -32,8 +32,6 @@ $ year_markup = year_span(year) $:_('Set %(year_span)s reading goal', year_span=year_markup) - $ 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')) $if current_goal: diff --git a/openlibrary/templates/account/view.html b/openlibrary/templates/account/view.html index d4101bd7a1b..3d7559ea1b9 100644 --- a/openlibrary/templates/account/view.html +++ b/openlibrary/templates/account/view.html @@ -7,7 +7,9 @@ $var title: $header_title
    - + $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 '' diff --git a/static/css/components/check-in.less b/static/css/components/check-in.less index dacf9488554..2ba3f6113bc 100644 --- a/static/css/components/check-in.less +++ b/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; + } + } +}