empayre/fleet
14
0
Fork 0
mirror of https://github.com/empayre/fleet.git synced 2024-11-06 08:55:24 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

Website: Update <scrollable-tweets> component (#9760)

Browse Source 
Closes: https://github.com/fleetdm/fleet/issues/9656

Changes:
- Updated the <scrollable-tweets> compontent to:
  - update the current page indicator on mobile devices
- Handle scrolling to a page when the component has been scrolled
manually
  - increase the size of the page indicator on smaller screens
This commit is contained in:
Eric 2023-02-08 20:04:56 -06:00 committed by GitHub
parent f85a3327b5
commit bdd9634c6a
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 47 additions and 54 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

77
website/assets/js/components/scrollable-tweets.component.js vendored
View File

@ -19,7 +19,7 @@ parasails.registerComponent('scrollableTweets', {
// ╩╝╚╝╩ ╩ ╩╩ ╩╩═╝ ╚═╝ ╩ ╩ ╩ ╩ ╚═╝
data: function () {
return {
currentTweetPage: 1,
currentTweetPage: 0,
numberOfTweetCards: 6,
numberOfTweetPages: 0,
numberOfTweetsPerPage: 0,
@ -110,13 +110,11 @@ parasails.registerComponent('scrollableTweets', {
</div>
</div>
</div>
<div purpose="tweet-cards-right-padding">
</div>
</div>
<div purpose="" class="mx-auto">
<nav aria-label="..." >
<ul purpose="tweets-page-indicator" class="pagination pagination-sm">
<li class="page-item" :class="[currentTweetPage === pageNumber ? 'selected' : '']" v-for="pageNumber in numberOfTweetPages" @click="scrollTweetsDivToPage(pageNumber)"></li>
<ul purpose="tweets-page-indicator" class="pagination pagination-sm" v-if="numberOfTweetPages > 1">
<li class="page-item" :class="[currentTweetPage === index ? 'selected' : '']" v-for="(pageNumber, index) in numberOfTweetPages" @click="scrollTweetsDivToPage(index)"></li>
</ul>
</nav>
</div>
@ -131,11 +129,11 @@ parasails.registerComponent('scrollableTweets', {
},
mounted: async function(){
await this.updateNumberOfTweetPages(); // Update the number of pages for the tweet page indicator.
window.addEventListener('wheel', this.updateCurrentPageIndicator); // Add a mouse wheel event listener to update the tweet page indicator when a user scrolls the div.
const tweetsDiv = document.querySelector('div[purpose="tweets"]');
tweetsDiv.addEventListener('scroll', this.updatePageIndicator, {passive: true}); // Add a scroll event listener to update the tweet page indicator when a user scrolls the div.
window.addEventListener('resize', this.updateNumberOfTweetPages); // Add an event listener to update the number of tweet pages based on how many tweet cards can fit on the screen.
},
beforeDestroy: function() {
//…
},
// ╦╔╗╔╔╦╗╔═╗╦═╗╔═╗╔═╗╔╦╗╦╔═╗╔╗╔╔═╗
@ -144,50 +142,49 @@ parasails.registerComponent('scrollableTweets', {
methods: {
updateNumberOfTweetPages: async function() {
// Get the first tweet card in the tweets div.
let firstTweetCardDiv = $('div[purpose="tweet-card"]')[0];
// Update the tweetCardWidth to have 16 pixels of padding.
// Get the width of the first tweet card.
let firstTweetCardDiv = document.querySelector('div[purpose="tweet-card"]');
this.tweetCardWidth = firstTweetCardDiv.clientWidth + 16;
let usersScreenWidth = window.innerWidth;
// Get the number of tweets that can be visible on the user's screen
this.numberOfTweetsPerPage = Math.max(Math.floor(usersScreenWidth/this.tweetCardWidth), 1);
// Divide the number of tweet cards by the number of tweets that can fit on a users screen
// Find out how may entire cards can fit on the screen.
this.numberOfTweetsPerPage = Math.floor(window.innerWidth / this.tweetCardWidth);
// Find out how many pages of tweet cards there will be.
this.numberOfTweetPages = Math.ceil(this.numberOfTweetCards / this.numberOfTweetsPerPage);
// Update the current page indicator.
this.updatePageIndicator();
await this.forceRender();
},
updateCurrentPageIndicator: function() {
updatePageIndicator: function() {
// Get the tweets div.
let tweetsDiv = document.querySelector('div[purpose="tweets"]');
// Get the amount the tweets div has been scrolled to the left.
let currentTweetDivScrollAmount = tweetsDiv.scrollLeft;
// Divide the current amount scrolled by the width of a tweet card, and divide that value by how many tweet cards we can show on a page.
let pageCurrentlyViewed = ((currentTweetDivScrollAmount) / this.tweetCardWidth) / this.numberOfTweetsPerPage;
let pageToIndicate = Math.ceil(pageCurrentlyViewed + 1);
if(pageToIndicate > this.numberOfTweetPages){
pageToIndicate = this.numberOfTweetPages;
// Find out the width of a page of tweet cards
let tweetPageWidth;
if(this.numberOfTweetPages === 2 && this.numberOfTweetsPerPage > 3){
tweetPageWidth = this.tweetCardWidth;
} else {
tweetPageWidth = this.tweetCardWidth * this.numberOfTweetsPerPage;
}
// Update the currentTweetPage value
this.currentTweetPage = pageToIndicate;
// Set the maximum number of pages as the maximum value
let currentPage = Math.min(Math.round(tweetsDiv.scrollLeft / tweetPageWidth), (this.numberOfTweetPages - 1));
// Update the page indicator
this.currentTweetPage = currentPage;
},
scrollTweetsDivToPage: function(page) {
// Get the tweets div.
let tweetsDiv = document.querySelector('div[purpose="tweets"]');
if(page === this.currentTweetPage){ // If the page it is currently on is selected, do nothing.
return;
} else if(page === 1){// If the first page was selected, scroll the tweets div to the starting position.
tweetsDiv.scroll(0, 9000);
} else if(page !== this.currentTweetPage) { // If any other page was selected, scroll the tweets div.
// Get the amount we need to scroll for a single page.
let amountToScrollBy = ((6 / this.numberOfTweetPages) * this.tweetCardWidth);
// Get the number of pages we're moving
let pageDifference = page - this.currentTweetPage;
// Multiply the amount to scroll by the number of pages we're scrolling
amountToScrollBy = pageDifference * amountToScrollBy;
// Scroll the Tweets div
tweetsDiv.scrollBy(amountToScrollBy, 0);
}
// Set the current page.
this.currentTweetPage = page;
// Find out the width of a page of tweet cards
let pageWidth = this.tweetCardWidth * this.numberOfTweetsPerPage;
// Figure out how much distance we're expecting to scroll.
let baseAmountToScroll = (page - this.currentTweetPage) * pageWidth;
// Find out the actual distance the div has been scrolled
let amountCurrentPageHasBeenScrolled = tweetsDiv.scrollLeft - (this.currentTweetPage * pageWidth);
// subtract the amount the current page has been scrolled from the baseAmountToScroll
let amountToScroll = baseAmountToScroll - amountCurrentPageHasBeenScrolled;
// Scroll the div to the specified 'page'
tweetsDiv.scrollBy(amountToScroll, 0);
},
}
});

24
website/assets/styles/components/scrollable-tweets.component.less vendored
View File

@ -20,15 +20,12 @@
padding-left: 120px;
padding-right: 120px;
margin-top: 80px;
margin-bottom: 16px;
padding-bottom: 16px;
scrollbar-width: none;
}
[purpose='tweet-cards-right-padding'] {
min-width: 120px;
}
[purpose='tweet-card'] {
max-width: 367px;
min-width: 367px;
display: flex;
flex-direction: column;
@ -66,33 +63,32 @@
@media (max-width: 991px) {
[purpose='tweets'] {
padding-left: 80px;
}
[purpose='tweet-cards-right-padding'] {
min-width: 80px;
padding-right: 80px;
}
}
@media (max-width: 768px) {
[purpose='tweets'] {
padding-left: 40px;
}
[purpose='tweet-cards-right-padding'] {
min-width: 40px;
padding-right: 40px;
}
}
@media (max-width: 575px) {
[purpose='tweets'] {
padding-left: 20px;
}
[purpose='tweet-cards-right-padding'] {
min-width: 20px;
padding-right: 20px;
}
[purpose='tweet-card'] {
min-width: 280px;
padding: 20px;
border-radius: 16px;
}
[purpose='tweets-page-indicator'] {
li {
padding: 12px;
}
}
}
}