diff --git a/openlibrary/i18n/messages.pot b/openlibrary/i18n/messages.pot index ee9aa5a69a5..e696842ebe7 100644 --- a/openlibrary/i18n/messages.pot +++ b/openlibrary/i18n/messages.pot @@ -898,7 +898,7 @@ msgstr "" msgid "Learn more about \"%(title)s\" at OpenLibrary" msgstr "" -#: widget.html +#: check_ins/reading_goal_form.html widget.html msgid "Learn More" msgstr "" @@ -1311,15 +1311,6 @@ msgstr "" msgid "Or, check out our special collections." msgstr "" -#: account/mybooks.html -#, python-format -msgid "Set %(year_span)s reading goal" -msgstr "" - -#: account/mybooks.html -msgid "Yearly Reading Goal" -msgstr "" - #: account/mybooks.html msgid "No books are on this shelf" msgstr "" @@ -1710,6 +1701,20 @@ msgstr "" msgid "My Feed" msgstr "" +#: account/sidebar.html +#, python-format +msgid "%(year)d Reading Goal" +msgstr "" + +#: account/sidebar.html +#, python-format +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 "" @@ -2880,7 +2885,6 @@ msgstr "" #: book_providers/openstax_read_button.html #: book_providers/standard_ebooks_read_button.html #: book_providers/wikisource_read_button.html -#: check_ins/reading_goal_progress.html msgid "Learn more" msgstr "" @@ -4246,17 +4250,12 @@ msgstr "" msgid "Enter \"0\" to unset your reading goal. Your check-ins will be preserved." msgstr "" -#: check_ins/reading_goal_progress.html -#, python-format -msgid "%(year)d Reading Goal:" -msgstr "" - #: check_ins/reading_goal_progress.html #, python-format msgid "" "%(books_read)d/%(goal)d books" +"progress__goal\">%(goal)d Books" msgstr "" #: check_ins/reading_goal_progress.html diff --git a/openlibrary/plugins/openlibrary/js/check-ins/index.js b/openlibrary/plugins/openlibrary/js/check-ins/index.js index 838c0e545fe..f38ac6ada94 100644 --- a/openlibrary/plugins/openlibrary/js/check-ins/index.js +++ b/openlibrary/plugins/openlibrary/js/check-ins/index.js @@ -530,8 +530,12 @@ function addGoalSubmissionListener(submitButton) { if (isDeleted) { const chipGroup = yearlyGoalSection.querySelector('.chip-group') const goalContainer = yearlyGoalSection.querySelector('#reading-goal-container') - goalContainer.remove() - chipGroup.classList.remove('hidden') + if (chipGroup) { + chipGroup.classList.remove('hidden') + } + if (goalContainer) { + goalContainer.remove() + } } else { const progressComponent = modal.closest('.reading-goal-progress') updateProgressComponent(progressComponent, Number(formData.get('goal'))) @@ -563,10 +567,8 @@ function updateProgressComponent(elem, goal) { // Update view: const goalSpan = elem.querySelector('.reading-goal-progress__goal') - const percentageSpan = elem.querySelector('.reading-goal-progress__percentage') const completedBar = elem.querySelector('.reading-goal-progress__completed') goalSpan.textContent = goal - percentageSpan.textContent = `(${percentComplete}%)` completedBar.style.width = `${Math.min(100, percentComplete)}%` } diff --git a/openlibrary/templates/account/mybooks.html b/openlibrary/templates/account/mybooks.html index 26d17190a16..e88cfc0af86 100644 --- a/openlibrary/templates/account/mybooks.html +++ b/openlibrary/templates/account/mybooks.html @@ -10,26 +10,6 @@
- $if owners_page: - $ 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) - $:_('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: - - $:render_template('check_ins/reading_goal_progress', [current_goal]) - -
- $code: def compact_carousel(data): key, title, url = data diff --git a/openlibrary/templates/account/reading_log.html b/openlibrary/templates/account/reading_log.html index 17627dbe00e..9a58b281ad5 100644 --- a/openlibrary/templates/account/reading_log.html +++ b/openlibrary/templates/account/reading_log.html @@ -30,11 +30,6 @@ $add_metatag(property="og:image", content=meta_photo_url)
- $ yearly_goal = get_reading_goals(year=checkin_year) - $if yearly_goal and owners_page and key in readlog_keys: -
- $:render_template('check_ins/reading_goal_progress', [yearly_goal]) -
$# The reading log search is only displayed on non-empty shelves because some patrons were confused and searching empty reading lists, perhaps thinking they could add books that way. See #7143. diff --git a/openlibrary/templates/account/sidebar.html b/openlibrary/templates/account/sidebar.html index 8831f6fd6ad..12a4db97196 100644 --- a/openlibrary/templates/account/sidebar.html +++ b/openlibrary/templates/account/sidebar.html @@ -1,5 +1,10 @@ $def with (username, key=None, owners_page=False, public=False, counts=None, lists=None, component_times={}) + $def year_span(year, use_local_year=False): + $if use_local_year: + $year + $else: + $year $ component_times['Sidebar'] = time()
$if owners_page: @@ -14,6 +19,30 @@
  • $_('My Feed')
    • + $if owners_page: + $ year = current_year() + $ current_goal = get_reading_goals(year=year) + $ hidden = 'hidden' if current_goal else '' +
      +
    • $_("%(year)d Reading Goal", year=year)
      • +
    • +
      +
      + + $ 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: + + $:render_template('check_ins/reading_goal_progress', [current_goal]) + +
      +
      • +
    + $if public or owners_page:
    • $_('Reading Log')
      • diff --git a/openlibrary/templates/account/view.html b/openlibrary/templates/account/view.html index d707a0e16e9..d4101bd7a1b 100644 --- a/openlibrary/templates/account/view.html +++ b/openlibrary/templates/account/view.html @@ -12,8 +12,6 @@ $ css = 'no-padding' if mb.key == 'mybooks' else ''
      - $if mb.key == 'mybooks' and mb.is_my_page: - $:render_template("account/yrg_banner", mb.component_times) $ mb.component_times['Details header'] = time()
      diff --git a/openlibrary/templates/check_ins/reading_goal_form.html b/openlibrary/templates/check_ins/reading_goal_form.html index 80a5416c559..0db3c51f122 100644 --- a/openlibrary/templates/check_ins/reading_goal_form.html +++ b/openlibrary/templates/check_ins/reading_goal_form.html @@ -12,4 +12,6 @@ $if goal:
      $_('Enter "0" to unset your reading goal. Your check-ins will be preserved.')
      + $else: + $_('Learn More') diff --git a/openlibrary/templates/check_ins/reading_goal_progress.html b/openlibrary/templates/check_ins/reading_goal_progress.html index 485a3563420..d80c2747eaa 100644 --- a/openlibrary/templates/check_ins/reading_goal_progress.html +++ b/openlibrary/templates/check_ins/reading_goal_progress.html @@ -10,23 +10,20 @@
      $for goal in goals: -
      -
      $_("%(year)d Reading Goal:", year=goal.year)
      -
      -
      - $ completed = 100 if goal.progress > 100 else goal.progress - -
      -
      - $:_('%(books_read)d/%(goal)d books', books_read=goal.books_read, goal=goal.goal) - ($goal.progress%) - $_('Edit') or - $_('Learn more') -
      +
      +
      +
      + $ completed = 100 if goal.progress > 100 else goal.progress + +
      +
      + $:_('%(books_read)d/%(goal)d Books', books_read=goal.books_read, goal=goal.goal) + $_('Edit')
      $ reading_goal_form = render_template('check_ins/reading_goal_form', goal=goal.goal, year=goal.year, update=True) $ id = 'yearly-goal-modal-%d' % loop.index $ title = _('Edit %(year)d Reading Goal', year=goal.year) $:render_template('native_dialog', id, reading_goal_form, title=title)
      +
      diff --git a/static/css/components/check-in.less b/static/css/components/check-in.less index 5b57039e834..dacf9488554 100644 --- a/static/css/components/check-in.less +++ b/static/css/components/check-in.less @@ -149,27 +149,17 @@ color: @dark-grey; padding: 5px 0; - &__heading, - &__details { - width: fit-content; - } - - &__heading { - font-weight: 900; - } - &__body { - display: flex; - flex-direction: column; - justify-content: flex-start; + justify-content: center; } &__progress-bar { background-color: @light-grey; border-radius: 5px; height: 20px; - margin: 5px 5px 0 0; - width: 50%; + margin: auto; + width: 85%; + margin-bottom: 10px; } &__completed { @@ -180,21 +170,9 @@ } &__details { - align-self: unset; - margin-left: 5px; - } -} - -@media only screen and (min-width: @width-breakpoint-tablet) { - .reading-goal-progress { - &__body { - flex-direction: row; - } - &__progress-bar { - width: 33%; - } - &__details { - align-self: center; - } + display: flex; + justify-content: space-between; + width: 97%; + margin: auto; } }