diff --git a/website/assets/images/testimonials-pagination-next-48x48@2x.png b/website/assets/images/testimonials-pagination-next-48x48@2x.png new file mode 100644 index 0000000000..e8ff756ae1 Binary files /dev/null and b/website/assets/images/testimonials-pagination-next-48x48@2x.png differ diff --git a/website/assets/images/testimonials-pagination-previous-48x48@2x.png b/website/assets/images/testimonials-pagination-previous-48x48@2x.png new file mode 100644 index 0000000000..048baad5c1 Binary files /dev/null and b/website/assets/images/testimonials-pagination-previous-48x48@2x.png differ diff --git a/website/assets/js/components/scrollable-tweets.component.js b/website/assets/js/components/scrollable-tweets.component.js index 26c2258dca..4737c58e43 100644 --- a/website/assets/js/components/scrollable-tweets.component.js +++ b/website/assets/js/components/scrollable-tweets.component.js @@ -23,16 +23,16 @@ parasails.registerComponent('scrollableTweets', { return { quotesToDisplay: [], quotesWithVideoLinks: [], - currentTweetPage: 0, - numberOfTweetCards: 0, - numberOfTweetPages: 0, + tweetsDiv: undefined, + tweetCards: undefined, + pageWidth: undefined, + numberOfTweetCardsDisplayedOnThisPage: undefined, + showPreviousPageButton: false, + showNextPageButton: true, numberOfTweetsPerPage: 0, - tweetCardWidth: 0, - tweetPageWidth: 0, - screenSize: 0, - scrolledAmount: 0, - scrollableAmount: 0, - modal: '' + syncing: false, + firstCardPosition: 0, + modal: '', }; }, @@ -41,7 +41,10 @@ parasails.registerComponent('scrollableTweets', { // ╩ ╩ ╩ ╩ ╩╩═╝ template: `
+
+
+
@@ -61,11 +64,9 @@ parasails.registerComponent('scrollableTweets', {
-
-
- +
@@ -93,7 +94,13 @@ parasails.registerComponent('scrollableTweets', { }, mounted: async function(){ - + this.tweetsDiv = $('div[purpose="tweets"]')[0]; + this.tweetCards = $('a[purpose="tweet-card"]'); + this.firstCardPosition = this.tweetCards[0].getBoundingClientRect().x; + this.numberOfTweetCardsDisplayedOnThisPage = this.tweetCards.length; + this.calculateHowManyFullTweetsCanBeDisplayed(); + $(window).on('resize', this.calculateHowManyFullTweetsCanBeDisplayed); + $(window).on('wheel', this.updatePageIndicators); }, beforeDestroy: function() { @@ -103,6 +110,46 @@ parasails.registerComponent('scrollableTweets', { // ║║║║ ║ ║╣ ╠╦╝╠═╣║ ║ ║║ ║║║║╚═╗ // ╩╝╚╝ ╩ ╚═╝╩╚═╩ ╩╚═╝ ╩ ╩╚═╝╝╚╝╚═╝ methods: { + calculateHowManyFullTweetsCanBeDisplayed: function() { + let firstTweetCard = this.tweetCards[0]; + let nextTweetCard = this.tweetCards[1]; + this.tweetCardWidth = nextTweetCard.getBoundingClientRect().x - firstTweetCard.getBoundingClientRect().x; + this.numberOfTweetsPerPage = Math.floor((document.body.clientWidth - this.firstCardPosition)/this.tweetCardWidth); + if(this.numberOfTweetsPerPage < 1){ + this.numberOfTweetsPerPage = 1; + } + this.pageWidth = this.tweetCardWidth * this.numberOfTweetsPerPage; + if(this.numberOfTweetsPerPage >= this.numberOfTweetCardsDisplayedOnThisPage){ + $(this.tweetsDiv).addClass('mx-auto'); + } else { + $(this.tweetsDiv).removeClass('mx-auto'); + } + this.updatePageIndicators(); + }, + + clickNextPage: async function() { + if(!this.syncing){ + this.tweetsDiv.scrollLeft += this.pageWidth; + await setTimeout(()=>{ + this.updatePageIndicators(); + }, 600); + } + }, + + clickPreviousPage: async function() { + if(!this.syncing){ + this.tweetsDiv.scrollLeft -= this.pageWidth; + await setTimeout(()=>{ + this.updatePageIndicators(); + }, 600); + } + }, + + updatePageIndicators: function() { + this.syncing = false; + this.showPreviousPageButton = this.tweetsDiv.scrollLeft > (this.firstCardPosition * 0.5); + this.showNextPageButton = (this.tweetsDiv.scrollWidth - this.tweetsDiv.scrollLeft - this.tweetsDiv.clientWidth) >= this.tweetCardWidth * .25; + }, clickOpenVideoModal: function(modalName) { this.modal = _.kebabCase(modalName); diff --git a/website/assets/styles/components/scrollable-tweets.component.less b/website/assets/styles/components/scrollable-tweets.component.less index c0844ae1f1..6e46904a13 100644 --- a/website/assets/styles/components/scrollable-tweets.component.less +++ b/website/assets/styles/components/scrollable-tweets.component.less @@ -9,24 +9,73 @@ font-size: 13px; line-height: 20px; + position: relative; [purpose='tweets']::-webkit-scrollbar { display: none; } + [purpose='previous-page-indicator'] { + display: none; + opacity: 0; + cursor: pointer; + z-index: 30; + position: absolute; + transition: transform 1s, opacity 0.25s ease-in; + transform: scale(0.5); + bottom: 50%; + left: 10px; + width: 48px; + height: 48px; + img { + width: 48px; + height: 48px; + } + } + + [purpose='next-page-indicator'] { + display: none; + opacity: 0; + cursor: pointer; + position: absolute; + transition: transform 1s, opacity 0.25s ease-in; + transform: scale(0.5); + bottom: 50%; + z-index: 30; + right: 10px; + width: 48px; + height: 48px; + img { + width: 48px; + height: 48px; + } + } + [purpose='tweets'] { overflow-x: scroll; scroll-behavior: smooth; padding-left: 120px; padding-right: 120px; margin-top: 80px; - padding-bottom: 16px; + margin-bottom: 80px; scrollbar-width: none; -ms-overflow-style: none; + &:hover { + [purpose='previous-page-indicator'] { + opacity: 1; + transform: scale(1.0); + } + [purpose='next-page-indicator'] { + opacity: 1; + transform: scale(1.0); + } + } } [purpose='tweet-card'] { + box-shadow: none; + background-color: #FFF; [purpose='logo'] { img { max-height: 32px; @@ -78,33 +127,6 @@ box-shadow: 0px 4px 16px rgba(0, 0, 0, 0.1); } } - - [purpose='page-indictator-container'] { - margin-bottom: 80px; - padding-left: 120px; - padding-right: 120px; - } - [purpose='page-indicator'] { - cursor: pointer; - padding: 4px; - height: 16px; - width: 16px; - border-radius: 100%; - margin-right: 8px; - - background-color: @core-vibrant-blue-15; - &.selected { - background-color: @core-fleet-black-50; - } - - - } - [purpose='tweets-page-indicator'] { - li { - } - li.selected { - } - } [purpose='video-modal'] { [purpose='modal-dialog'] { width: 100%; @@ -139,15 +161,20 @@ } + @media(hover) { + [purpose='previous-page-indicator'] { + display: flex; + } + [purpose='next-page-indicator'] { + display: flex; + } + } + @media (max-width: 991px) { [purpose='tweets'] { padding-left: 80px; padding-right: 80px; } - [purpose='page-indictator-container'] { - padding-left: 80px; - padding-right: 80px; - } } @media (max-width: 768px) { @@ -155,10 +182,6 @@ padding-left: 40px; padding-right: 40px; } - [purpose='page-indictator-container'] { - padding-left: 40px; - padding-right: 40px; - } [purpose='video-modal'] { [purpose='modal-dialog'] { max-width: 97vw; @@ -179,19 +202,11 @@ padding-left: 20px; padding-right: 20px; } - [purpose='page-indictator-container'] { - padding-left: 20px; - padding-right: 20px; - } [purpose='tweet-card'] { min-width: 280px; padding: 20px; border-radius: 16px; } - [purpose='page-indicator'] { - padding: 12px; - margin-bottom: 8px; - } [purpose='video-modal'] { [purpose='modal-content'] { width: 95vw;