Merge pull request #13314 from Sadashii/13308/fix/move-preview-options-above-read-for-open-access

Fix: Render Search Inside above Read button for open-access books (#13308)

Author: Sadashii

openlibrary/i18n/messages.pot

@@ -7119,6 +7119,10 @@ msgstr ""
 msgid "Checked Out"
 msgstr ""
 
+#: LoanStatus.html
+msgid "Only a preview is available."
+msgstr ""
+
 #: LocateButton.html
 msgid "Locate"
 msgstr ""

openlibrary/macros/LoanStatus.html

@@ -59,6 +59,8 @@
     data-ol-link-track="CTAClick|$action"
 
 $if lending_state == 'borrowed':
+  $if secondary_action:
+    $:macros.PreviewSearchInside(ocaid)
   $:macros.ReadButton(ocaid, analytics_attr, loan=user_loan, listen=listen, edition_key=edition_key, book_title=book_title)
   $if secondary_action:
     $:macros.ReturnForm(ocaid, user_loan['expiry'], analytics_track="LoanStatus|ReturnClick")
@@ -69,9 +71,9 @@
 
 $elif lending_state == 'open':
   $# Open / Publicly Readable (Unrestricted)
-  $:macros.ReadButton(ocaid, analytics_attr, listen=listen, edition_key=edition_key, book_title=book_title)
   $if secondary_action:
     $:macros.PreviewSearchInside(ocaid)
+  $:macros.ReadButton(ocaid, analytics_attr, listen=listen, edition_key=edition_key, book_title=book_title)
 
 $elif lending_state == 'printdisabled':
   $# Exemptions for patrons with Print Disabilities
@@ -149,9 +151,13 @@
   </div>
 
 $elif lending_state == 'preview_only':
-  $:macros.BookPreview(ocaid, show_only=True)
   $if secondary_action:
     $:macros.PreviewSearchInside(ocaid)
+  <div class="cta-button-group">
+    <p class="waitinglist-message">
+      <span>$_("Only a preview is available.")</span>
+    </p>
+  </div>
 
 $else:
   $# Only render LocateButton instead of NotInLibrary when not on an edition's page, for that specific edition.

static/css/components/read-panel.css

@@ -8,6 +8,7 @@
   white-space: nowrap;
   margin: 0 0 10px;
   font-size: var(--font-size-label-medium);
+  width: 100%;
 }
 
 .mobile-vendor {
@@ -42,7 +43,6 @@
   text-decoration: none;
   position: relative;
   margin: 0 auto;
-  margin-top: -15px; /* offsets Illustration margin-bottom: 10px */
   background-color: transparent;
   transition: background-color 0.2s;
 
@@ -80,7 +80,6 @@
 .btn-notice .waitinglist-message {
   margin: 0 0 10px;
   font-size: var(--font-size-label-medium);
-  text-wrap: auto;
 }
 
 .read-options .cta-section,