Skip to content

Commit

Permalink
Release v4.3.0 (#1080)
Browse files Browse the repository at this point in the history 
* QOLDEV-470 initial commit with SWE footer restructure and AOC notice

* QOLDEV-73 Updating class name to qg-table-no-stripes (#1028)

* Qoldev 422 jquery datepicker (#1035)

* QOLDEV-422 jQuery datepicker does not need text='date'
* Removing unsupported comment
* removing hasDatepicker before initialising datepicker after document is ready

* Qoldev 422 jquery datepicker (#1036)

QOLDEV-422 Using on load instead of document.ready

* Qoldev 422 jquery datepicker (#1042)

* QOLDEV-422 Check if jquery datepicker exists on the page

* Qoldev 422 jquery datepicker date format (#1053)

* QOLDEV-422 jQuery datepicker placeholder and date format

* Resolving new line lint warning

* QOLDEV-422 jQuery datepicker format

* QOLDEV-75 Carousel improvements

* QOLDEV-75 Cleanup comments

* QOLDEV-75 Cleanup redundant HTML

* QOLDEV-535 Removing num_ranks and tiers as no longer needed in Funnelback 16 (#1073)

* QOLDEV-535 Removing num_ranks and tiers parameter as no longer needed in the Funnelback 16

* fixing somecharacters

* QOLDEV-470 SWE Add cultural notice, remove COVID and update footer CSS

* QOLDEV-450 Styling buttons within the alertbox (#1078)

* QOLDEV-450 Styling buttons within the alertbox

* Updating funnelback change to only check the number of suggested results

* QOLDEV-553 Styling social media links (#1082)

* Resolve conflict for 4.3.0 (#1081)

* Release v4.2.3 (#1045)

Merging 4.2.3 to master

* Release v4.2.3 (#1056)

* Fixing funnelback search test

* Resolve conflicts merge 4.3 to master (#1086)

* Release v4.2.3 (#1045)

Merging 4.2.3 to master

* Release v4.2.3 (#1056)

* QOLDEV-75 fix typo in table reference

* Puppeteer upgrade to 21.1.0 (#1095)

* Puppeteer upgrade to 21.1.0

* Updating package-lock with newer versions

* Bumping babel/plugin-transform-runtime version (#1096)

---------

Co-authored-by: Steve Pegg <[email protected]>
Co-authored-by: Steve Pegg <[email protected]>
  • Loading branch information
@ghazal-salehi @stvp-qld
3 people authored Aug 24, 2023
1 parent 57043d0 commit 6691c1d
Show file tree
Hide file tree
Showing 4 changed files with 201 additions and 149 deletions.
212 changes: 118 additions & 94 deletions src/assets/_project/_blocks/components/carousel/_qg-carousel.scss
View file
Original file line number Diff line number Diff line change
@@ -1,167 +1,191 @@
.qg-featured{
&.qg-aside{
.qg-featured {
&.qg-aside {
.carousel {
margin-bottom: 0;
}
}
.carousel{
.carousel {
@include rem(margin-top, 16px);
position: relative;
.carousel-inner{

.carousel-inner {

.carousel-item {

position: relative;
opacity: 0;
transition: opacity 0.2s ease-in-out;

a {
text-decoration-line: none !important;
display: block;
}
opacity: 0;
transition: opacity 0.2s ease-in-out;

img {
width: 100%;
height: auto;
margin-bottom: 1.6rem;
}
h3 {
margin-top: 0;
margin: 0 0 0.5rem 0!important;
text-align: left;
font-size: 1.125rem;
@include qg-link-styles__default;
}
}

.active {
opacity: 1;
}

.active.left,
.active.right {
left: 0;
opacity: 0;
z-index: 1;
}

.next.left,
.prev.right {
opacity: 1;
}

.carousel-control {
z-index: 2;
}
}
.carousel-caption{
.carousel-caption {

position: static;
padding: 0;
margin-bottom:0;
margin-bottom: 0;
background: none;
h3 {
text-align: left;
@include rem(font-size, 15px);
font-weight: 700;
color: #000 !important;
}

p {
text-align: left;
color: #000;
&.more{
&.more {
text-align: right;
}
}
}
.carousel-indicators{
position: inherit;
margin-left: 0;
float: left;
justify-content: flex-start;
text-align: left;
margin-bottom: 0;
margin-right: 0;
width: 70%;

.carousel-nav {
display: flex;
margin-top: 1rem;
margin-bottom: 1rem;
}

.carousel-indicators {
flex-basis: calc(100% - 10rem);

display: flex;
flex-wrap: wrap;
height: 38px;
align-items: center;
justify-content: flex-start;

position: relative;
margin: 0;
padding: 0;

li {
border: 1px solid #000;
border-radius: 50%;
margin-right: 10px;
width: 10px;
height: 10px;
&.active{
background-color: #000;
margin: 0.5rem;
width: 0.75rem;
height: 0.75rem;

&.active {
background-color: $black;
}
}
}

.controls-grp {
position: relative;
margin-bottom: 0;
padding-left: 0 !important;
float: right;
width: 30%;
top: -7px;
text-align: right;
flex-basis: 10rem;

margin: 0;
margin-bottom: 0 !important;
padding: 0;

display: flex;
justify-content: flex-end;
flex-wrap: nowrap;
list-style: none;

li {
margin-bottom: 0 !important;
width: 2.5rem;
height: 2rem;
display: inline-block;
margin-right: 18px;
line-height: 1;
&:last-child{
margin-right: 0;
}
a {

& > a {
text-decoration-line: none !important;
}
a:active, a:focus {
color: #c00;
i {
color: #c00;
}
}
.fa {
color: #000;
&.fa-sync {
&:before{
content: "\f021";
display: block;

//All nav icons
.fa-sync,
.icon-prev,
.icon-next,
.fa-pause {
color: $black;
width: 2.5rem;
height: 2rem;
display: block;
position: relative;

&:before {
font-family: FontAwesome;
font-size: 1.75rem;
line-height: 1.75rem;
width: 2.5rem;
position: absolute;
top: 0;
left: 0.75rem;
}
}
}
.toggleCarousel{
position: relative;
top: -4px;
}
.carousel-control{
position: initial;
left: inherit;
top: 0;
right: 0;
width: inherit;
margin: 0 !important;
background-image: none;
color: #000;
text-shadow: none;
.icon-prev,.icon-next{
position: inherit;
}
&.right{
top: -8px;
.icon-next:before{
content: "\f0da";
position: inherit;
font-family: FontAwesome;
font-size: 27px;

&:hover,
&:active,
&:focus {
span {
color: $qg-blue-hover;
}
}
&.left{
top: -8px;
right: 74px;
.icon-prev:before{
content: "\f0d9";
font-family: FontAwesome;
position: inherit;
font-size: 27px;
}

//Pause/sync icon only
.fa-pause:before,
.fa-sync:before {
font-size: 1.25rem;
left: 0.65rem;
}

// Individual icons
.fa-sync:before {
content: "\f021";
}
.icon-prev:before {
content: "\f0d9";
}
.icon-next:before {
content: "\f0da";
}
}
}

.button-title {
display: none;
visibility: hidden;
}
}
}
}

.carousel[data-count="0"] .carousel-nav,
.carousel[data-count="1"] .carousel-nav,
.carousel.hide-navigation .carousel-nav {
display: none;
}
}

#qg-content #qg-primary-content .carousel-cell .carousel-cell__header a {
text-decoration-color:currentColor;
#qg-content #qg-primary-content .carousel-cell .carousel-cell__header a {
text-decoration-color: currentColor;
}
74 changes: 41 additions & 33 deletions src/assets/_project/_blocks/components/carousel/qg-carousel.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,47 +3,55 @@

(function ($) {
let carousels = [];

let eqHeight = (carousels) => {
carousels.forEach(function (e) {
let items = $('#' + e + '').find('.carousel-item');
let heights = [];
let tallest;
if (items.length) {
var normalizeHeights = function () {
items.each(function () {
heights.push($(this).height());
});
tallest = Math.max.apply(null, heights);
items.each(function () {
$(this).css('min-height', tallest + 'px');
});
};
normalizeHeights();
$(window).on('resize orientationchange', function () {
tallest = 0;
heights.length = 0;
items.each(function () {
$(this).css('min-height', '0');
});
normalizeHeights();
});
}
//For each carousel on the page...
carousels.forEach(function (carousel) {
//Get the height of each carousel slide in the carousel...
let slides = $('#' + carousel).find('.carousel-item');

//Each slides height into an array...
let slideHeights = slides.map(function(e, slide) {
return $(slide).height();
});

//Assign the tallest value to every slide
slideHeights.map(function(e, slide) {
$(slide).css('min-height', Math.max(...slideHeights) + 'px');
});
});
};
$('.qg-featured .carousel.slide').each(function (i, e) {
let carousel = $(e).attr('id');
carousels.push(carousel);

$('.qg-featured .carousel.slide').each(function (int, element) {
let carouselID = $(element).attr('id');
carousels.push(carouselID);

//Start all slides to cycle by default
$(this).attr('data-state', 'cycle');
$('#' + carousel + '').find('.toggleCarousel').click(function (e) {

//Bind click/tap event
$('#' + carouselID).find('.toggleCarousel').on('click', function (e) {
e.preventDefault();
var $parentCarousel = $(this).parents('div.carousel.slide');
$parentCarousel.attr('data-state') === 'cycle' ? $parentCarousel.attr('data-state', 'pause') : $parentCarousel.attr('data-state', 'cycle');
$parentCarousel.carousel($parentCarousel.attr('data-state'));
$(this).find('i').toggleClass('fa-sync fa-pause');
let parentCarousel = $(this).parents('div.carousel.slide');
let currentState = parentCarousel.attr('data-state');
switch (currentState) {
//If paused, switch to cycling state
case 'pause':
parentCarousel.attr('data-state', 'cycle').carousel('cycle');
$(this).find('i, span').not('.button-title').removeClass('fa-sync fa-pause').addClass('fa-pause');
break;

case 'cycle':
//If cycling, switch to a paused state
parentCarousel.attr('data-state', 'pause').carousel('pause');
$(this).find('i, span').not('.button-title').removeClass('fa-sync fa-pause').addClass('fa-sync');
break;
}
});
});

//Equal height each carousel slide
window.onload = function () {
eqHeight(carousels);
};
})(jQuery);

Loading

0 comments on commit 6691c1d

Please sign in to comment.