Skip to content

Commit 691bb2c

Browse files
flibbertigibbetflibbertigibbet
committed
Merge branch 'release/2.6.17'
2 parents 33aab21 + a39494c commit 691bb2c

File tree

17 files changed

+2340
-2889
lines changed

17 files changed

+2340
-2889
lines changed

‎python/cac_tripplanner/templates/base.html

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -113,7 +113,7 @@
113113
<script src="{% static 'scripts/vendor/moment.js' %}"></script>
114114
<script src="{% static 'scripts/vendor/moment-duration-format.js' %}"></script>
115115
<script src="{% static 'scripts/vendor/route.js' %}"></script>
116-
<script src="{% static 'scripts/vendor/slick.js' %}"></script>
116+
<script src="{% static 'scripts/vendor/tiny-slider.js' %}"></script>
117117

118118
<script src="{% static 'scripts/main/cac/cac.js' %}"></script>
119119
<script src="{% static 'scripts/main/cac/utils.js' %}"></script>

‎python/cac_tripplanner/templates/event-detail.html

Lines changed: 12 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -53,15 +53,18 @@ <h3>More great events around Philly</h3>
5353
{%block jspage %}
5454
<script type="text/javascript">
5555
jQuery(document).ready(function ($) {
56-
$('.detail-image-carousel').slick({
57-
arrows: false,
58-
dots: true,
59-
autoplay: true,
60-
fade: true,
61-
cssEase: 'linear',
62-
mobileFirst: true,
63-
lazyLoad: 'ondemand',
64-
slidesToShow: 1,
56+
tns({
57+
container: '.detail-image-carousel',
58+
autoplayButton: false,
59+
autoplayButtonOutput: false,
60+
autoplayPosition: 'top',
61+
controls: false,
62+
controlPosition: 'bottom',
63+
items: 1,
64+
nav: true,
65+
navPosition: 'bottom',
66+
slideBy: 'page',
67+
autoplay: true
6568
});
6669
});
6770
</script>

‎python/cac_tripplanner/templates/partials/destination-detail.html

Lines changed: 7 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -3,11 +3,13 @@
33
<article class="info-article">
44
<header class="info-article-header">
55
{% if destination.extradestinationpicture_set.exists %}
6-
<div class="detail-image-carousel">
7-
<img data-lazy="{% cropped_thumbnail destination 'wide_image' %}">
8-
{% for extra_image in destination.extradestinationpicture_set.all %}
9-
<img data-lazy="{% cropped_thumbnail extra_image 'wide_image' %}">
10-
{% endfor %}
6+
<div class="detail-image-carousel-container">
7+
<div class="detail-image-carousel">
8+
<img src="{% cropped_thumbnail destination 'wide_image' %}">
9+
{% for extra_image in destination.extradestinationpicture_set.all %}
10+
<img src="{% cropped_thumbnail extra_image 'wide_image' %}">
11+
{% endfor %}
12+
</div>
1113
</div>
1214
{% else %}
1315
<div class="info-place-image-hero"

‎python/cac_tripplanner/templates/partials/event-detail.html

Lines changed: 7 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -5,11 +5,13 @@
55
<header class="info-article-header">
66

77
{% if event.extraeventpicture_set.exists %}
8-
<div class="detail-image-carousel">
9-
<img data-lazy="{% cropped_thumbnail event "wide_image" %}">
10-
{% for extra_image in event.extraeventpicture_set.all %}
11-
<img data-lazy="{% cropped_thumbnail extra_image 'wide_image' %}">
12-
{% endfor %}
8+
<div class="detail-image-carousel-container">
9+
<div class="detail-image-carousel">
10+
<img src="{% cropped_thumbnail event "wide_image" %}">
11+
{% for extra_image in event.extraeventpicture_set.all %}
12+
<img src="{% cropped_thumbnail extra_image 'wide_image' %}">
13+
{% endfor %}
14+
</div>
1315
</div>
1416
{% else %}
1517
<div class="info-place-image-hero"

‎python/cac_tripplanner/templates/place-detail.html

Lines changed: 12 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -53,15 +53,18 @@ <h3>More great, green places around Philly</h3>
5353
{%block jspage %}
5454
<script type="text/javascript">
5555
jQuery(document).ready(function ($) {
56-
$('.detail-image-carousel').slick({
57-
arrows: false,
58-
dots: true,
59-
autoplay: true,
60-
fade: true,
61-
cssEase: 'linear',
62-
mobileFirst: true,
63-
lazyLoad: 'ondemand',
64-
slidesToShow: 1,
56+
tns({
57+
container: '.detail-image-carousel',
58+
autoplayButton: false,
59+
autoplayButtonOutput: false,
60+
autoplayPosition: 'top',
61+
controls: false,
62+
controlPosition: 'bottom',
63+
items: 1,
64+
nav: true,
65+
navPosition: 'bottom',
66+
slideBy: 'page',
67+
autoplay: true
6568
});
6669
});
6770
</script>

‎python/cac_tripplanner/templates/service-worker.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
// Service Worker to support functioning as a PWA
22
// https://developer.mozilla.org/en-US/docs/Web/API/Service_Worker_API/Using_Service_Workers
33

4-
var CACHE_NAME = 'cac_tripplanner_v21';
4+
var CACHE_NAME = 'cac_tripplanner_v22';
55

66
var cacheFiles = {{ cache_files | safe }};
77

‎src/app/scripts/cac/control/cac-control-itinerary-list.js

Lines changed: 27 additions & 31 deletions
Original file line numberDiff line numberDiff line change
@@ -19,22 +19,6 @@ CAC.Control.ItineraryList = (function (_, $, MapTemplates) {
1919
hiddenClass: 'hidden',
2020
itineraryList: '.routes-list',
2121
itineraryItem: '.route-summary'
22-
},
23-
// Settings for 'slick' carousel for swiping itineraries on mobile and in detail views
24-
slick: {
25-
arrows: false,
26-
dots: true,
27-
infinite: false,
28-
mobileFirst: true,
29-
variableWidth: false,
30-
adaptiveHeight: true,
31-
responsive : [
32-
{
33-
// Breakpoint must match 'xxs' in _breakpoints.scss
34-
breakpoint: 480,
35-
settings: 'unslick'
36-
}
37-
]
3822
}
3923
};
4024
var options = {};
@@ -112,19 +96,40 @@ CAC.Control.ItineraryList = (function (_, $, MapTemplates) {
11296
}
11397

11498
/**
115-
* Enable 'slick' carousel for swiping itineraries on mobile
99+
* Enable carousel for swiping itineraries on mobile
116100
* @param {[object]} itineraries An open trip planner itinerary object, as returned from the plan endpoint
117101
*/
118102
function enableCarousel(itineraries) {
119103
if (itineraries.length < 2) {
120104
return;
121105
}
122106

123-
$(options.selectors.itineraryList)
124-
.slick(options.slick)
125-
.on('afterChange', function(event, slick, currentSlide) {
126-
$(options.selectors.itineraryItem).eq(currentSlide).triggerHandler('mouseenter');
127-
});
107+
var slider = tns({
108+
container: options.selectors.itineraryList,
109+
autoplayButton: false,
110+
autoplayButtonOutput: false,
111+
autoplayPosition: 'top',
112+
controls: false,
113+
controlPosition: 'bottom',
114+
items: 1,
115+
nav: true,
116+
navPosition: 'bottom',
117+
slideBy: 'page',
118+
autoplay: false,
119+
autoHeight: true,
120+
responsive: {
121+
320: {disable: false, controls: false, nav: true, autoHeight: true},
122+
481: {disable: true}
123+
}
124+
});
125+
126+
// Highlight route on map on itinerary carousel swipe
127+
slider.events.on('indexChanged', function(info) {
128+
var items = $(options.selectors.itineraryItem);
129+
if (items && items.length > info.displayIndex) {
130+
items.eq(info.displayIndex).triggerHandler('mouseenter');
131+
}
132+
});
128133
}
129134

130135
function getItineraryById(id) {
@@ -151,15 +156,6 @@ CAC.Control.ItineraryList = (function (_, $, MapTemplates) {
151156

152157
function show() {
153158
$container.removeClass(options.selectors.hiddenClass);
154-
layoutCarousel();
155-
}
156-
157-
function layoutCarousel() {
158-
// necessary hack for when first itinerary is single-mode
159-
// but subsequent itineraries are multi-modal (hence taller).
160-
if (itineraries.length > 1) {
161-
$(options.selectors.itineraryList).slick('setPosition');
162-
}
163159
}
164160

165161
/**

‎src/app/styles/components/_carousel-dots.scss

Lines changed: 33 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,33 @@
1+
.tns-nav {
2+
bottom: -16px;
3+
margin-bottom: 4px;
4+
margin-top: 4px;
5+
6+
text-align: center;
7+
8+
button {
9+
width: 18px;
10+
height: 18px;
11+
margin: 0;
12+
}
13+
14+
button {
15+
width: 18px;
16+
height: 18px;
17+
}
18+
19+
button:before {
20+
font-size: 18px;
21+
}
22+
}
23+
24+
.tns-nav > [aria-controls] {
25+
width: 8px;
26+
height: 8px;
27+
padding: 0;
28+
margin: 0 6px;
29+
border-radius: 50%;
30+
background: #ddd;
31+
border: 0;
32+
}
33+
.tns-nav > .tns-nav-active { background: #999; }

‎src/app/styles/components/_slick-dots.scss

Lines changed: 0 additions & 22 deletions
This file was deleted.

‎src/app/styles/layouts/_info.scss

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -80,7 +80,7 @@
8080
padding: 0 1rem;
8181
}
8282

83-
.detail-image-carousel {
83+
.detail-image-carousel-container {
8484
margin-left: -4rem;
8585
margin-right: -4rem;
8686
}

0 commit comments

Comments
 (0)