Merge pull request #10085 from schu96/10011/design/sidebar-yearly-rea…

…ding-goals Move Yearly Reading Goal to sidebar
internetarchive · Dec 7, 2024 · e050ae6 · e050ae6
2 parents d1a4947 + aa7136d
commit e050ae6
Show file tree

Hide file tree

Showing 9 changed files with 71 additions and 91 deletions.
diff --git 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 <a href=\"/collections\">special collections</a>."
 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 ""
 "<span class=\"reading-goal-progress__books-"
 "read\">%(books_read)d</span>/<span class=\"reading-goal-"
-"progress__goal\">%(goal)d</span> books"
+"progress__goal\">%(goal)d</span> 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
@@ -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
@@ -10,26 +10,6 @@
 
 <div class="mybooks-details-specific">
 
-  $if owners_page:
-    $ year = current_year()
-    $ current_goal = get_reading_goals(year=year)
-    $ hidden = 'hidden' if current_goal else ''
-    <div class="yearly-goal-section">
-      $# Hide "Set reading goal" call to action with `hidden` class if a goal has already been set:
-      <div class="chip-group $hidden">
-        <span class="chip value-chip category-chip chip--selectable goal-chip">
-          $ 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">
-          $:render_template('check_ins/reading_goal_progress', [current_goal])
-        </span>
-    </div>
-
   $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
@@ -30,11 +30,6 @@
 $add_metatag(property="og:image", content=meta_photo_url)
 
 <div class="mybooks-list">
-  $ yearly_goal = get_reading_goals(year=checkin_year)
-  $if yearly_goal and owners_page and key in readlog_keys:
-    <div class="yearly-goal-section">
-      $:render_template('check_ins/reading_goal_progress', [yearly_goal])
-    </div>
 
   $# 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
@@ -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:
+      <span class="use-local-year" data-server-year="$year">$year</span>
+    $else:
+      <span>$year</span>
   $ component_times['Sidebar'] = time()
   <div class="mybooks-menu">
     $if owners_page:
@@ -14,6 +19,30 @@
 	<li><a data-ol-link-track="MyBooksSidebar|MyFeed" $('class=selected' if key=='feed' else '') href="/people/$username/books/feed">$_('My Feed')</a></li>
       </ul>
     </ul>
+    $if owners_page:
+      $ year = current_year()
+      $ current_goal = get_reading_goals(year=year)
+      $ hidden = 'hidden' if current_goal else ''
+      <ul class="sidebar-section">
+        <li class="section-header">$_("%(year)d Reading Goal", year=year)</li>
+        <li>
+          <div class="yearly-goal-section">
+            <div class="chip-group $hidden">
+              <span class="">
+                $ 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">
+              $:render_template('check_ins/reading_goal_progress', [current_goal])
+            </span>
+          </div>
+        </li>
+      </ul>
+
     $if public or owners_page:
       <ul class="sidebar-section">
         <li class="section-header">$_('Reading Log')</li>

diff --git a/openlibrary/templates/account/view.html b/openlibrary/templates/account/view.html
@@ -12,8 +12,6 @@
 
   $ css = 'no-padding' if mb.key == 'mybooks' else ''
   <div class="mybooks-details $css">
-    $if mb.key == 'mybooks' and mb.is_my_page:
-      $:render_template("account/yrg_banner", mb.component_times)
 
     $ mb.component_times['Details header'] = time()
     <header>

diff --git a/openlibrary/templates/check_ins/reading_goal_form.html b/openlibrary/templates/check_ins/reading_goal_form.html
@@ -12,4 +12,6 @@
   <button class="cta-btn cta-btn--shell reading-goal-submit-button" type="submit" data-ol-link-track="YearlyReadingGoals|SubmitGoal">$_("Submit")</button>
   $if goal:
     <div class="small">$_('Enter "0" to unset your reading goal. Your check-ins will be preserved.')</div>
+  $else:
+    <a class="small" href="https://blog.openlibrary.org/2022/12/31/reach-your-2023-reading-goals-with-open-library" target="_blank">$_('Learn More')</a>
 </form>
diff --git a/openlibrary/templates/check_ins/reading_goal_progress.html b/openlibrary/templates/check_ins/reading_goal_progress.html
@@ -10,23 +10,20 @@
 
 <div class="reading-goal-progress-container">
   $for goal in goals:
-    <div class="reading-goal-progress">
-      <div class="reading-goal-progress__heading">$_("%(year)d Reading Goal:", year=goal.year)</div>
-      <div class="reading-goal-progress__body">
-        <div class="reading-goal-progress__progress-bar">
-          $ completed = 100 if goal.progress > 100 else goal.progress
-          <span class="reading-goal-progress__completed" style="width: $(completed)%;"></span>
-        </div>
-        <div class="reading-goal-progress__details">
-          <a href="/account/books/already-read/year/$(goal.year)" data-ol-link-track="ReadingGoalProgress|AnnualSummaryLink">$:_('<span class="reading-goal-progress__books-read">%(books_read)d</span>/<span class="reading-goal-progress__goal">%(goal)d</span> books', books_read=goal.books_read, goal=goal.goal)</a>
-          <span class="reading-goal-progress__percentage">($goal.progress%)</span>
-          <a class="edit-reading-goal-link" href="javascript:;">$_('Edit')</a> or
-	  <a href="https://blog.openlibrary.org/2022/12/31/reach-your-2023-reading-goals-with-open-library">$_('Learn more')</a>
-        </div>
+  <div class="reading-goal-progress">
+    <div class="reading-goal-progress__body">
+      <div class="reading-goal-progress__progress-bar">
+        $ completed = 100 if goal.progress > 100 else goal.progress
+        <span class="reading-goal-progress__completed" style="width: $(completed)%;"></span>
+      </div>
+      <div class="reading-goal-progress__details">
+          <a href="/account/books/already-read/year/$(goal.year)" data-ol-link-track="ReadingGoalProgress|AnnualSummaryLink">$:_('<span class="reading-goal-progress__books-read">%(books_read)d</span>/<span class="reading-goal-progress__goal">%(goal)d</span> Books', books_read=goal.books_read, goal=goal.goal)</a>
+          <a class="edit-reading-goal-link" href="javascript:;">$_('Edit')</a>
       </div>
       $ 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)
     </div>
+  </div>
 </div>
diff --git 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;
   }
 }