From 3bbe65974da64a9eaf0329a6e08d01a9bbc0de8f Mon Sep 17 00:00:00 2001
From: "Michael E. Karpeles (Mek)" <michael.karpeles@gmail.com>
Date: Tue, 8 Mar 2022 22:06:51 +0000
Subject: [PATCH 1/3] Moving subjects up, show more, nojs - show + to denote
 expandable sections - visual accents on omnibar - adjust editions table
 padding - move some options below table (better packing)

---
 openlibrary/macros/SubjectTags.html           | 23 +++++++---------
 .../plugins/openlibrary/js/readmore.js        | 10 +++++++
 openlibrary/templates/site/head.html          |  5 +++-
 openlibrary/templates/type/edition/view.html  | 26 +++++++------------
 .../type/work/editions_datatable.html         |  5 +++-
 static/css/components/work.less               | 15 +++++++++--
 6 files changed, 50 insertions(+), 34 deletions(-)

diff --git a/openlibrary/macros/SubjectTags.html b/openlibrary/macros/SubjectTags.html
index 371a4a947cd..0868a3fbd65 100644
--- a/openlibrary/macros/SubjectTags.html
+++ b/openlibrary/macros/SubjectTags.html
@@ -1,10 +1,10 @@
-$def with(work,location,tags=[])
+$def with(work, tags=[])
 
 $def render_subjects(label, subjects, track_value, prefix=""):
   $if subjects:
     <div class="section link-box">
-      <h6>$label</h6>
-      <span>
+      <span class="clamp">
+	<h6>$label</h6>
         $for subject in subjects:
           <a href="/subjects/$prefix$utf8(subject.lower().replace(' ', '_').replace(',', '').replace('/', ''))" data-ol-link-track="$track_value">$subject</a>$cond(not loop.last, ",", "")
       </span>
@@ -13,13 +13,10 @@ <h6>$label</h6>
 $if work:
   $for tag in tags:
     $if tag=="Subjects":
-      $if location=="work":
-        $:render_subjects(_("Subjects"), work.get_subjects(),"WorkSection|SubjectClick")
-      $else:
-        $:render_subjects(_("Subjects"), work.get_subjects(),"BookOverview|SubjectClick")
-    $elif tag=="People":
-      $:render_subjects(_("People"), work.subject_people,"WorkSection|SubjectPeopleClick", prefix="person:")
-    $elif tag=="Places":
-      $:render_subjects(_("Places"), work.subject_places,"WorkSection|SubjectPlacesClick", prefix="place:")
-    $elif tag=="Times":
-      $:render_subjects(_("Times"), work.subject_times,"WorkSection|SubjectTimesClick", prefix="time:")
+      $:render_subjects(_("Subjects"), work.get_subjects(),"BookOverview|SubjectClick")
+    $if tag=="People":
+      $:render_subjects(_("People"), work.subject_people,"BookOverview|SubjectPeopleClick", prefix="person:")
+    $if tag=="Places":
+      $:render_subjects(_("Places"), work.subject_places,"BookOverview|SubjectPlacesClick", prefix="place:")
+    $if tag=="Times":
+      $:render_subjects(_("Times"), work.subject_times,"BookOverview|SubjectTimesClick", prefix="time:")
diff --git a/openlibrary/plugins/openlibrary/js/readmore.js b/openlibrary/plugins/openlibrary/js/readmore.js
index ce5ee8d579c..3e96d0c101c 100644
--- a/openlibrary/plugins/openlibrary/js/readmore.js
+++ b/openlibrary/plugins/openlibrary/js/readmore.js
@@ -1,4 +1,14 @@
 export function initReadMoreButton() {
+    /*
+      Clamper shows used to show more/less by toggling `hidden`
+      style on parent .clamp tag
+     */
+    $('.clamp').on('click', function(){
+	const up = $(this);
+	if (up.hasClass('clamp')) {
+            up.css({"display": up.css("display") === "-webkit-box" ? "unset" : "-webkit-box"});
+	}
+    });
     $('.read-more-button').on('click',function(){
         const up = $(this).parent().parent();
         $(`.${up.attr('class')}-content`).removeClass('restricted-height', 300);
diff --git a/openlibrary/templates/site/head.html b/openlibrary/templates/site/head.html
index cd2adc29772..8e50e06b8db 100644
--- a/openlibrary/templates/site/head.html
+++ b/openlibrary/templates/site/head.html
@@ -31,7 +31,10 @@
     $ style = 'build/page-%s.css'%ctx.get('cssfile', 'user')
     <link href="$static_url(style)" rel="stylesheet" type="text/css" />
 
-
+    <!-- Don't hide content with clamp if no js to show more/less -->
+    <noscript>
+      <style>.clamp { -webkit-line-clamp: unset !important; }</style>
+    </noscript>
  <script>
 
 /* @licstart  The following is the entire license notice for the
diff --git a/openlibrary/templates/type/edition/view.html b/openlibrary/templates/type/edition/view.html
index aed0209502d..6d28ca03ed8 100644
--- a/openlibrary/templates/type/edition/view.html
+++ b/openlibrary/templates/type/edition/view.html
@@ -235,17 +235,16 @@ <h4 class="year">&mdash;
         </div>
 
     <div class="subjects">
-        <div class="subjects-content restricted-view">
-        $:macros.SubjectTags(work,"overview", ["Subjects"])
-        </div>
-        $:macros.ReadMore("subjects")
+      <div class="subjects-content">
+	$ component_times['SubjectsTags'] = time()
+        $:macros.SubjectTags(work, ["Subjects", "People", "Places", "Times"])
+        $ component_times['SubjectsTags'] = time() - component_times['SubjectsTags']
+      </div>
     </div>
 
-      $if editions_limit and len(editions) and len(editions) < work.edition_count:
-        <p>
-          $_("Showing %(count)d featured editions", count=len(editions)).
-          <a href="?mode=all">$_("View all %(count)d editions?", count=work.edition_count)</a>
-        </p>
+    <hr/>
+
+    <a id="editions-list" name="editions-list" class="section-anchor"></a>
 
       <p class="preview-languages">
         $ seen = set()
@@ -257,9 +256,8 @@ <h4 class="year">&mdash;
               <a href="$work.key?edition=$(e.ocaid)">$e.languages[0].name</a>
       </p>
 
-      <a id="editions-list" name="editions-list" class="section-anchor"></a>
       $ component_times['EditionsTable'] = time()
-      $:render_template("type/work/editions_datatable", work, editions=editions, edition=edition)
+      $:render_template("type/work/editions_datatable", work, editions=editions, edition=edition, editions_limit=editions_limit)
       $ component_times['EditionsTable'] = time() - component_times['EditionsTable']
 
       <div class="tab-section work-info">
@@ -274,12 +272,6 @@ <h3>
             </p>
         <hr>
 
-        $ component_times['SubjectsTags'] = time()
-        $:macros.SubjectTags(work,"work", ["Subjects", "People", "Places", "Times"])
-        $ component_times['SubjectsTags'] = time() - component_times['SubjectsTags']
-
-        <hr>
-
         $if not work.excerpts and work.first_sentence:
           <h4>$_("First Sentence")</h4>
           <p class="largest" title=$_("First Sentence")><em>"$work.first_sentence"</em></p>
diff --git a/openlibrary/templates/type/work/editions_datatable.html b/openlibrary/templates/type/work/editions_datatable.html
index 1fa218d2868..5ee56fb1f40 100644
--- a/openlibrary/templates/type/work/editions_datatable.html
+++ b/openlibrary/templates/type/work/editions_datatable.html
@@ -1,4 +1,4 @@
-$def with (work, editions=None, edition=None)
+$def with (work, editions=None, edition=None, editions_limit=None)
 
 $ book_keys = []
 $ edition_list_start = time()
@@ -34,6 +34,9 @@
 $ edition_list_secs = time() - edition_list_start
 
 <p class="small sansserif edition-adder">
+  $if editions_limit and len(editions) and len(editions) < work.edition_count:
+    $_("Showing %(count)d featured editions", count=len(editions)).
+    <a href="?mode=all">$_("View all %(count)d editions?", count=work.edition_count)</a>
   <a href="/books/add?work=$work.key" title="$_('Add another edition of %(work)s', work=work.title)">$_("Add another edition?")</a>
 </p>
 
diff --git a/static/css/components/work.less b/static/css/components/work.less
index fb63f7db361..683d02852a5 100644
--- a/static/css/components/work.less
+++ b/static/css/components/work.less
@@ -83,6 +83,17 @@ div.editionAbout {
   vertical-align: middle;
 }
 
+.clamp {
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: 1;
+  overflow: hidden;
+}
+
+.clamp::before {
+  content: "+ ";
+}
+
 .restricted-view{
   display: block;
   z-index: @z-index-level-1;
@@ -170,7 +181,7 @@ h2.edition-byline {
 }
 
 a.section-anchor {
-  height: 45px;
+  height: 20px;
   display: block;
 }
 
@@ -249,6 +260,7 @@ div.editionTools {
   display: flex;
   border-bottom: 1px solid @lighter-grey;
   margin-bottom: 10px;
+  background: @grey-fafafa;
 
   h4 {
     padding-right: 5px;
@@ -267,7 +279,6 @@ div.editionTools {
 }
 
 .preview-languages {
-  margin-bottom: -30px !important;
   font-size: .8em;
   color: @grey;
 }

From 2d8dfb8c3020c8ae725aa0813d3121624979ba3b Mon Sep 17 00:00:00 2001
From: Mek <michael.karpeles@gmail.com>
Date: Tue, 8 Mar 2022 18:51:48 -0500
Subject: [PATCH 2/3] js fixes

---
 openlibrary/plugins/openlibrary/js/readmore.js | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/openlibrary/plugins/openlibrary/js/readmore.js b/openlibrary/plugins/openlibrary/js/readmore.js
index 3e96d0c101c..34bae50cc30 100644
--- a/openlibrary/plugins/openlibrary/js/readmore.js
+++ b/openlibrary/plugins/openlibrary/js/readmore.js
@@ -4,10 +4,10 @@ export function initReadMoreButton() {
       style on parent .clamp tag
      */
     $('.clamp').on('click', function(){
-	const up = $(this);
-	if (up.hasClass('clamp')) {
-            up.css({"display": up.css("display") === "-webkit-box" ? "unset" : "-webkit-box"});
-	}
+        const up = $(this);
+        if (up.hasClass('clamp')) {
+            up.css({display: up.css('display') === '-webkit-box' ? 'unset' : '-webkit-box'});
+        }
     });
     $('.read-more-button').on('click',function(){
         const up = $(this).parent().parent();

From 92ae7f11b4a1458e5b3b444bc4f7d1e2c6bbbd34 Mon Sep 17 00:00:00 2001
From: jimchamp <jameschamp@acm.org>
Date: Wed, 9 Mar 2022 16:49:20 -0500
Subject: [PATCH 3/3] Swap tabs with spaces

---
 openlibrary/macros/SubjectTags.html          | 2 +-
 openlibrary/templates/type/edition/view.html | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/openlibrary/macros/SubjectTags.html b/openlibrary/macros/SubjectTags.html
index 0868a3fbd65..2fa722b7046 100644
--- a/openlibrary/macros/SubjectTags.html
+++ b/openlibrary/macros/SubjectTags.html
@@ -4,7 +4,7 @@
   $if subjects:
     <div class="section link-box">
       <span class="clamp">
-	<h6>$label</h6>
+      <h6>$label</h6>
         $for subject in subjects:
           <a href="/subjects/$prefix$utf8(subject.lower().replace(' ', '_').replace(',', '').replace('/', ''))" data-ol-link-track="$track_value">$subject</a>$cond(not loop.last, ",", "")
       </span>
diff --git a/openlibrary/templates/type/edition/view.html b/openlibrary/templates/type/edition/view.html
index 6d28ca03ed8..c7d99a2ef44 100644
--- a/openlibrary/templates/type/edition/view.html
+++ b/openlibrary/templates/type/edition/view.html
@@ -236,7 +236,7 @@ <h4 class="year">&mdash;
 
     <div class="subjects">
       <div class="subjects-content">
-	$ component_times['SubjectsTags'] = time()
+        $ component_times['SubjectsTags'] = time()
         $:macros.SubjectTags(work, ["Subjects", "People", "Places", "Times"])
         $ component_times['SubjectsTags'] = time() - component_times['SubjectsTags']
       </div>