Display vendor beneath omnibar on mobile book page views

[ztjhz]

Closes #7009

Feature: Display vendor beneath omnibar on mobile book page views

Technical

Tried this method suggested in the issue:

It's probably best to pass an optional string to the template containing any additional classes that will be needed to display the correct vendor section. You can add the new classes the the ul element in AffiliateLinks.html.

Inside AffiliateLinks.html

$def with (page, opts, classes='')
...
<ul class="buy-options-table $_(classes)">

Inside view.html

$:macros.AffiliateLinks(page, {'isbn': isbn_13, 'asin': asin, 'prices': prices}, 'mobile-vendor')

Inside read-panel.less

.mobile-vendor {
  display: none;
}
...
@media only screen and (max-width: @width-breakpoint-desktop){
  .mobile-vendor {
    display: inline;
  }
  .desktop-vendor {
    display: none;
  }
}

Result:

Only the ul is hidden but the Buy this book and its container is still visible.

So, instead of applying it to the AffliateLinks.html template, I applied it to its container in view.html and databarWork.html.

<div class="panel mobile-vendor">   <!-- view.html -->
<div class="panel desktop-vendor"> <!-- databarWork.html -->

The result is shown in the screenshots below.

Testing

1. Go to one of the book pages (e.g. http://localhost:8080/works/OL118420W/Flatland)
2. View the page in desktop view (only the vendor on the side should be visible)
3. View the page in mobile view (only the vendor below the omibar should be visible)

Screenshot

Stakeholders

@jimchamp

[mekarpeles]

Thank you @ztjhz for making this contribution!

[jimchamp]

Lgtm! Thanks @ztjhz!