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($) { ...@@ -91,7 +91,7 @@ jQuery(function($) {
function carouselHeight() { function carouselHeight() {
var carousel = $('.carousel'), var carousel = $('.carousel'),
i, j, i, j,
image, carouselItem,
height; height;
carousel.removeClass('carousel-ready'); carousel.removeClass('carousel-ready');
...@@ -101,11 +101,11 @@ jQuery(function($) { ...@@ -101,11 +101,11 @@ jQuery(function($) {
$(carousel[i]).find('.item').addClass('inline'); $(carousel[i]).find('.item').addClass('inline');
height = 0; height = 0;
image = $(carousel[i]).find('.item img'); carouselItem = $(carousel[i]).find('.item');
for (j = 0; j < image.length; j = j + 1){ for (j = 0; j < carouselItem.length; j = j + 1) {
if($(image[j]).height() > height){ if ($(carouselItem[j]).height() > height) {
height = $(image[j]).height(); height = $(carouselItem[j]).height();
} }
} }
...@@ -177,7 +177,15 @@ jQuery(function($) { ...@@ -177,7 +177,15 @@ jQuery(function($) {
initThumbnailMasonry(); 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'), var dialog = $('.modal-dialog'),
dialogParent = $(e.target).closest('.modal-dialog').length; dialogParent = $(e.target).closest('.modal-dialog').length;
...@@ -186,7 +194,6 @@ jQuery(function($) { ...@@ -186,7 +194,6 @@ jQuery(function($) {
} }
}); });
carouselHeight();
affixSize(); affixSize();
siteMessages(); siteMessages();
focusOnOpen(); focusOnOpen();
......
...@@ -16,27 +16,28 @@ ...@@ -16,27 +16,28 @@
{/foreach} {/foreach}
</div> </div>
<a class="left carousel-control" href="#slideshow{$instanceid}" role="button" data-slide="prev"> <div class="left carousel-control">
<span class="icon icon-chevron-left icon-lg" role="presentation" aria-hidden="true" aria-hidden="true"></span> <a class="carousel-control-prev" href="#slideshow{$instanceid}" role="button" data-slide="prev" title="{str tag=previous}">
<span class="sr-only">Previous</span> <span class="icon icon-angle-left icon-lg" role="presentation" aria-hidden="true" aria-hidden="true"></span>
</a> <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"> <a class="carousel-control-first" href="#slideshow{$instanceid}" role="button" data-slide-to="0" title="{str tag=first}">
<span class="icon icon-chevron-left icon-lg" role="presentation" aria-hidden="true" aria-hidden="true"></span> <span class="icon icon-angle-double-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">{str tag=first}</span>
<span class="sr-only">First</span> </a>
</a> </div>
<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="right carousel-control" href="#slideshow{$instanceid}" role="button" data-slide="next"> <div class="right carousel-control">
<span class="icon icon-chevron-right icon-lg" role="presentation" aria-hidden="true" aria-hidden="true"></span> <a class="carousel-control-next" href="#slideshow{$instanceid}" role="button" data-slide="next" title="{str tag=next}">
<span class="sr-only">Next</span> <span class="icon icon-angle-right icon-lg" role="presentation" aria-hidden="true" aria-hidden="true"></span>
</a> <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> </div>
{else} {else}
{str tag=noimagesfound section=artefact.file} {str tag=noimagesfound section=artefact.file}
......
...@@ -358,19 +358,3 @@ ...@@ -358,19 +358,3 @@
.moodle-login.icon { .moodle-login.icon {
margin: 10px; 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 { .carousel {
width: 82%;
margin: 0 auto;
.item { .item {
display: block; display: block;
// &.inline {
// display: block;
// }
} }
&.carousel-ready { &.carousel-ready {
...@@ -10,23 +15,55 @@ ...@@ -10,23 +15,55 @@
&.next { &.next {
display: block; display: block;
} }
img {
vertical-align: middle;
}
} }
} }
// Overriding bootstrap carousel styles // Overriding bootstrap carousel styles
.carousel-caption { .carousel-caption {
text-align: left; text-align: left;
background-color:rgba(0,0,0,0.6); position: relative;
color: $text-color;
background-color: transparent;
text-shadow: none;
left: 0; left: 0;
right: 0; right: 0;
bottom: 0; bottom: 0;
padding: 10px; padding: 10px 0 0 0;
} }
.carousel-control { .carousel-control {
color: #000; width: 8%;
top: 50%; opacity: 1;
bottom: 50%; top: 0;
bottom: 100%;
~ .icon { ~ .icon {
vertical-align: middle; 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 @@ ...@@ -2,7 +2,7 @@
{if $title} {if $title}
<h3 class="title panel-heading js-heading"> <h3 class="title panel-heading js-heading">
{if $retractable} {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} {/if}
{$title} {$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