Permalink
Browse files

Merge pull request #1179 from jdlrobson/carouselReflowingPainting

Carousel reflowing painting
  • Loading branch information...
mekarpeles committed Sep 26, 2018
2 parents a5a1862 + 3baebc3 commit e9a946c9cd81c2a125a5c736c66515359b3f2fbd
@@ -10,15 +10,17 @@ <h2 class="home-h2"><a href="$url">$title</a></h2>
$for book in (books or []):
$ byline = (' by ' + ', '.join([author.name for author in book.authors])) if book.get('authors') else ''
$ byline_links = (' by ' + ', '.join(['<a href="%s">%s</a>' % (author.key, author.name) for author in book.authors])) if book.get('authors') else ''
<div class="book">
<div class="book carousel__item">
<div class="book-cover">
<a href="$(book.get('key') or book.url)">
<img class="bookcover" title="$book.title$(byline)" src="$book.get('cover_url', '')"/>
<img class="bookcover"
width="130" height="200"
title="$book.title$(byline)" src="$book.get('cover_url', '')"/>
</a>
</div>
$ cta_url = book.get('read_url') or '/borrow/ia/%s' % book.ocaid
$ cta = 'Read' if book.get('read_url') else 'Borrow'
<div class="book-cta"><a href="$cta_url" data-ol-link-track="$key" title="$cta $book.title">$cta</a></div>
<div class="book-cta"><a class="btn primary" href="$cta_url" data-ol-link-track="$key" title="$cta $book.title">$cta</a></div>
</div>
</div>
<script type="text/javascript">
@@ -12,12 +12,13 @@ <h2 class="home-h2"><a href="/subjects">Browse by Subject</a></h2>
$for subject_name in subjects:
$ subject = subjects[subject_name]
$ presentable_subject_name = subject_name.replace('_', ' ').title()
<div class="category-item">
<div class="category-item carousel__item">
<a class="category-nostyle" data-ol-link-track="CarouselCategories"
href="/subjects/$(subject_name)#sort=date_published&ebooks=true">
<div class="category-icon">
<img class="category-img" src="/static/images/categories/$(subject_name).svg"
alt="browse $(presentable_subject_name) books"/>
width="30" height="30"
alt="browse $(presentable_subject_name) books"/>
</div>
<p class="category-title">$presentable_subject_name</p>
$if subject:
@@ -3,7 +3,7 @@
<header id="header-bar">
<div class="hamburger-component">
<button type="button" class="hamburger-button"><img src="/static/images/menu.png" alt="additional options menu"/></button>
<div class="hamburger-dropdown-component">
<div class="hamburger-dropdown-component navigation-dropdown-component">
<ul class="dropdown-menu hamburger-dropdown-menu">
$if not ctx.user:
<li><a href="/account/login">$_("Log in")</a></li>
View
@@ -26,6 +26,12 @@ td {
margin: 0;
padding: 0;
}
button {
color: transparent;
border: none;
outline: none;
background: transparent;
}
body {
font-size: 100%;
line-height: normal;
@@ -2,16 +2,25 @@
.book {
.book-cta {
margin: 5px auto 0;
font-size: .9em;
padding: 5px 0;
a {
display: block;
color: @white;
text-decoration: none;
}
}
.book-cover {
img,
a {
display: block;
}
}
img.bookcover {
margin: 0 auto;
box-shadow: 1px 2px 5px 0 @book-cover-shadow-color;
border-radius: 3px;
}
}
@@ -0,0 +1,34 @@
// slick font is used by Carousel arrow icons
// (this is a lot of bytes for just an icon so should be revisited asap)
@import (less) '../lib/font-awesome.min.css';
@import (less) '../lib/slick.css';
@import (less) '../lib/slick-theme.css';
.carousel-container {
.slick-slider {
// disable the horizontal scroll bar and compensate for the lost pixels..
overflow: visible;
margin-bottom: 15px;
}
}
.carousel {
.slick-prev,
.slick-next {
width: auto;
height: auto;
&:before,
&:before {
color: @primary-blue;
font-size: 35px;
}
}
.slick-prev:before {
margin-left: 15px;
}
.slick-next {
margin-right: 11px;
}
}
@@ -15,56 +15,34 @@
.carousel-container {
margin: 0 -20px;
padding: 3px 15px;
.slick-slider {
overflow: visible;
margin-bottom: 0;
}
}
.carousel {
.display-flex();
overflow-x: scroll;
padding: 10px 20px;
> div {
min-width: 130px;
&__item {
float: left;
height: 100%;
margin: 0 10px;
min-height: 1px;
}
.slick-prev,
.slick-next {
width: auto;
height: auto;
&:before,
&:before {
color: @primary-blue;
font-size: 35px;
}
}
.slick-prev:before {
margin-left: 15px;
> div {
min-width: 130px;
}
.slick-next {
margin-right: 11px;
// JavaScript only, but needed to avoid reflows
button {
position: absolute;
}
.book {
&:last-child {
margin-right: 0;
}
img.bookcover {
margin: 0 auto;
width: 130px;
height: 200px;
box-shadow: 1px 2px 5px 0 @book-cover-shadow-color;
border-radius: 3px;
}
.book-metadata {
width: 130px;
margin: 0 auto;
@@ -82,18 +60,6 @@
}
}
}
.book-cta {
background: @primary-blue;
border-radius: 3px;
font-family: "Lucida Grande", Verdana, Geneva, Helvetica, Arial, sans-serif;
width: 130px;
margin: 0 auto;
margin-top: 5px;
text-align: center;
font-size: .9em;
padding: 5px 0;
}
}
/**
@@ -13,7 +13,7 @@ a {
img {
&.category-img {
width: 30px;
display: block;
margin-top: 5px;
// stylelint-disable declaration-block-no-duplicate-properties
-webkit-filter: grayscale(100%);
@@ -28,10 +28,6 @@ header#header-bar {
.logo-component {
/* border-right: 1px solid @dark-beige; */
padding-right: 15px;
.logo-icon {
display: inherit;
}
}
.navigation-component {
@@ -119,7 +119,6 @@ header#header-bar {
.hamburger-dropdown-component {
position: absolute;
display: none;
z-index: 999;
}
@@ -150,11 +149,6 @@ header#header-bar {
-ms-flex-order: 1;
order: 1;
a {
display: inline-block;
text-align: center;
}
.logo-icon {
position: relative;
top: -1px;
@@ -490,6 +484,7 @@ header#header-bar {
}
}
.hamburger-component,
.navigation-component li,
.account-component {
.navigation-dropdown-component {
@@ -502,8 +497,11 @@ header#header-bar {
.logo-component {
margin: 0 0 5px 0;
img,
a {
display: block;
}
a {
.display-flex();
color: @black;
text-decoration: none !important;
}
View
@@ -7,11 +7,7 @@
*/
@import (less) "less/colors.less";
// slick font is used by Carousel arrow icons
// (this is a lot of bytes for just an icon so should be revisited asap)
@import (less) 'lib/font-awesome.min.css';
@import (less) 'lib/slick.css';
@import (less) 'lib/slick-theme.css';
@import (less) 'components/carousel--js.less';
// Not clear if these are needed. please review.
.tools a {
@@ -115,10 +115,6 @@
}
/* Dots */
.slick-slider
{
margin-bottom: 30px;
}
.slick-dots
{
View
@@ -75,9 +75,6 @@
.slick-slide
{
display: none;
float: left;
height: 100%;
min-height: 1px;
}
[dir='rtl'] .slick-slide

0 comments on commit e9a946c

Please sign in to comment.