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

@@ -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:")

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);

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

openlibrary/templates/type/edition/view.html

@@ -234,17 +234,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()
@@ -256,9 +255,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">
@@ -273,12 +271,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>

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>
 

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;
 }