Commit 3289eea5 authored by Robert Lyon's avatar Robert Lyon Committed by Gerrit Code Review
Browse files

Merge changes I105728bd,I145a81fd,If377cc50 into 15.10_STABLE

* changes:
  bug 1555407 - Fixed overlapping carousel in collapsible block
  bug 1570667 - Fixed carousel styles - chevrons are now on the sides of the image - caption is below the image instead of on top
  Bug 1530606 - Styled First and last button on carousel block
parents 05292dcd ee506f2a
......@@ -91,7 +91,7 @@ jQuery(function($) {
function carouselHeight() {
var carousel = $('.carousel'),
i, j,
image,
carouselItem,
height;
carousel.removeClass('carousel-ready');
......@@ -101,11 +101,11 @@ jQuery(function($) {
$(carousel[i]).find('.item').addClass('inline');
height = 0;
image = $(carousel[i]).find('.item img');
carouselItem = $(carousel[i]).find('.item');
for (j = 0; j < image.length; j = j + 1){
if($(image[j]).height() > height){
height = $(image[j]).height();
for (j = 0; j < carouselItem.length; j = j + 1) {
if ($(carouselItem[j]).height() > height) {
height = $(carouselItem[j]).height();
}
}
......@@ -177,7 +177,15 @@ jQuery(function($) {
initThumbnailMasonry();
});
$('.modal-docked-right').on('click',function(e) {
$(window).on('load', function() {
carouselHeight();
});
$('.block.collapse').on('shown.bs.collapse', function() {
carouselHeight();
});
$('.block.collapse').on('click',function(e) {
var dialog = $('.modal-dialog'),
dialogParent = $(e.target).closest('.modal-dialog').length;
......@@ -186,7 +194,6 @@ jQuery(function($) {
}
});
carouselHeight();
affixSize();
siteMessages();
focusOnOpen();
......
......@@ -16,27 +16,28 @@
{/foreach}
</div>
<a class="left carousel-control" href="#slideshow{$instanceid}" role="button" data-slide="prev">
<span class="icon icon-chevron-left icon-lg" role="presentation" aria-hidden="true" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<div class="left carousel-control">
<a class="carousel-control-prev" href="#slideshow{$instanceid}" role="button" data-slide="prev" title="{str tag=previous}">
<span class="icon icon-angle-left icon-lg" role="presentation" aria-hidden="true" aria-hidden="true"></span>
<span class="sr-only">{str tag=previous}</span>
</a>
<a class="left carousel-control carousel-control-first" href="#slideshow{$instanceid}" role="button" data-slide-to="0">
<span class="icon icon-chevron-left icon-lg" role="presentation" aria-hidden="true" aria-hidden="true"></span>
<span class="icon icon-chevron-left icon-lg" role="presentation" aria-hidden="true" aria-hidden="true"></span>
<span class="sr-only">First</span>
</a>
<a class="right carousel-control carousel-control-last" href="#slideshow{$instanceid}" role="button" data-slide-to="{$k}">
<span class="icon icon-chevron-right icon-lg" role="presentation" aria-hidden="true" aria-hidden="true"></span>
<span class="icon icon-chevron-right icon-lg" role="presentation" aria-hidden="true" aria-hidden="true"></span>
<span class="sr-only">Last</span>
</a>
<a class="carousel-control-first" href="#slideshow{$instanceid}" role="button" data-slide-to="0" title="{str tag=first}">
<span class="icon icon-angle-double-left icon-lg" role="presentation" aria-hidden="true" aria-hidden="true"></span>
<span class="sr-only">{str tag=first}</span>
</a>
</div>
<a class="right carousel-control" href="#slideshow{$instanceid}" role="button" data-slide="next">
<span class="icon icon-chevron-right icon-lg" role="presentation" aria-hidden="true" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
<div class="right carousel-control">
<a class="carousel-control-next" href="#slideshow{$instanceid}" role="button" data-slide="next" title="{str tag=next}">
<span class="icon icon-angle-right icon-lg" role="presentation" aria-hidden="true" aria-hidden="true"></span>
<span class="sr-only">{str tag=next}</span>
</a>
<a class="carousel-control-last" href="#slideshow{$instanceid}" role="button" data-slide-to="{$k}" title="{str tag=last}">
<span class="icon icon-angle-double-right icon-lg" role="presentation" aria-hidden="true" aria-hidden="true"></span>
<span class="sr-only">{str tag=last}</span>
</a>
</div>
</div>
{else}
{str tag=noimagesfound section=artefact.file}
......
......@@ -358,19 +358,3 @@
.moodle-login.icon {
margin: 10px;
}
// Styles for the first and last buttons on the image gallery block
.carousel-control {
&.carousel-control-first {
margin-left: 40px;
span:first-of-type {
margin-right: -10px;
}
}
&.carousel-control-last {
margin-right: 40px;
span:first-of-type {
margin-right: -10px;
}
}
}
.carousel {
width: 82%;
margin: 0 auto;
.item {
display: block;
// &.inline {
// display: block;
// }
}
&.carousel-ready {
......@@ -10,23 +15,55 @@
&.next {
display: block;
}
img {
vertical-align: middle;
}
}
}
// Overriding bootstrap carousel styles
.carousel-caption {
text-align: left;
background-color:rgba(0,0,0,0.6);
position: relative;
color: $text-color;
background-color: transparent;
text-shadow: none;
left: 0;
right: 0;
bottom: 0;
padding: 10px;
padding: 10px 0 0 0;
}
.carousel-control {
color: #000;
top: 50%;
bottom: 50%;
width: 8%;
opacity: 1;
top: 0;
bottom: 100%;
~ .icon {
vertical-align: middle;
}
&.left {
left: -10%;
}
&.right {
right: -10%;
}
&:hover,
&:focus {
opacity: 1;
}
.icon-lg {
font-size: 1.5em;
}
a {
display: block;
padding: 3px;
color: #000;
opacity: .5;
&:hover,
&:focus {
outline: 0;
text-decoration: none;
opacity: .9;
}
}
}
}
......@@ -2,7 +2,7 @@
{if $title}
<h3 class="title panel-heading js-heading">
{if $retractable}
<a data-toggle="collapse" href="#blockinstance_{$id}_target" aria-expanded="true" aria-controls="blockinstance_{$id}_target" class="outer-link{if $retractedonload} collapsed{/if}"></a>
<a data-toggle="collapse" href="#blockinstance_{$id}_target" aria-expanded="{if $retractedonload}false{else}true{/if}" aria-controls="blockinstance_{$id}_target" class="outer-link{if $retractedonload} collapsed{/if}"></a>
{/if}
{$title}
......
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment