Skip to content

Commit

Permalink
Fixes to container centering
Browse files Browse the repository at this point in the history
  • Loading branch information
@TommasoPrinetti
TommasoPrinetti committed Jan 21, 2025
1 parent 84253a8 commit 877c6e0
Show file tree
Hide file tree
Showing 3 changed files with 113 additions and 33 deletions.
2 changes: 1 addition & 1 deletion .svelte-kit/generated/server/internal.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -22,7 +22,7 @@ export const options = {
app: ({ head, body, assets, nonce, env }) => "<!DOCTYPE html>\n<html lang=\"en\">\n <head>\n <meta charset=\"utf-8\" />\n <link rel=\"icon\" href=\"" + assets + "/favicon.png\" />\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1\" />\n " + head + "\n\n <noscript>\n <style>\n /**\n * Reinstate scrolling for non-JS clients\n */\n .simplebar-content-wrapper {\n scrollbar-width: auto;\n -ms-overflow-style: auto;\n }\n\n .simplebar-content-wrapper::-webkit-scrollbar,\n .simplebar-hide-scrollbar::-webkit-scrollbar {\n display: initial;\n width: initial;\n height: initial;\n }\n </style>\n </noscript>\n </head>\n <body data-sveltekit-preload-data=\"hover\">\n <div class=\"major_div\" style=\"display: contents\">" + body + "</div>\n </body>\n</html>\n\n<style></style>\n",
error: ({ status, message }) => "<!doctype html>\n<html lang=\"en\">\n\t<head>\n\t\t<meta charset=\"utf-8\" />\n\t\t<title>" + message + "</title>\n\n\t\t<style>\n\t\t\tbody {\n\t\t\t\t--bg: white;\n\t\t\t\t--fg: #222;\n\t\t\t\t--divider: #ccc;\n\t\t\t\tbackground: var(--bg);\n\t\t\t\tcolor: var(--fg);\n\t\t\t\tfont-family:\n\t\t\t\t\tsystem-ui,\n\t\t\t\t\t-apple-system,\n\t\t\t\t\tBlinkMacSystemFont,\n\t\t\t\t\t'Segoe UI',\n\t\t\t\t\tRoboto,\n\t\t\t\t\tOxygen,\n\t\t\t\t\tUbuntu,\n\t\t\t\t\tCantarell,\n\t\t\t\t\t'Open Sans',\n\t\t\t\t\t'Helvetica Neue',\n\t\t\t\t\tsans-serif;\n\t\t\t\tdisplay: flex;\n\t\t\t\talign-items: center;\n\t\t\t\tjustify-content: center;\n\t\t\t\theight: 100vh;\n\t\t\t\tmargin: 0;\n\t\t\t}\n\n\t\t\t.error {\n\t\t\t\tdisplay: flex;\n\t\t\t\talign-items: center;\n\t\t\t\tmax-width: 32rem;\n\t\t\t\tmargin: 0 1rem;\n\t\t\t}\n\n\t\t\t.status {\n\t\t\t\tfont-weight: 200;\n\t\t\t\tfont-size: 3rem;\n\t\t\t\tline-height: 1;\n\t\t\t\tposition: relative;\n\t\t\t\ttop: -0.05rem;\n\t\t\t}\n\n\t\t\t.message {\n\t\t\t\tborder-left: 1px solid var(--divider);\n\t\t\t\tpadding: 0 0 0 1rem;\n\t\t\t\tmargin: 0 0 0 1rem;\n\t\t\t\tmin-height: 2.5rem;\n\t\t\t\tdisplay: flex;\n\t\t\t\talign-items: center;\n\t\t\t}\n\n\t\t\t.message h1 {\n\t\t\t\tfont-weight: 400;\n\t\t\t\tfont-size: 1em;\n\t\t\t\tmargin: 0;\n\t\t\t}\n\n\t\t\t@media (prefers-color-scheme: dark) {\n\t\t\t\tbody {\n\t\t\t\t\t--bg: #222;\n\t\t\t\t\t--fg: #ddd;\n\t\t\t\t\t--divider: #666;\n\t\t\t\t}\n\t\t\t}\n\t\t</style>\n\t</head>\n\t<body>\n\t\t<div class=\"error\">\n\t\t\t<span class=\"status\">" + status + "</span>\n\t\t\t<div class=\"message\">\n\t\t\t\t<h1>" + message + "</h1>\n\t\t\t</div>\n\t\t</div>\n\t</body>\n</html>\n"
},
version_hash: "1mbxa8t"
version_hash: "9y742k"
};

export async function get_hooks() {
Expand Down
12 changes: 8 additions & 4 deletions src/lib/components/cards/capitols.svelte
View file
Original file line number Diff line number Diff line change
Expand Up @@ -196,10 +196,13 @@ let isProjCover = data.isProjCover
padding-right: var(--spacing-M);
gap: var(--spacing-M);
background-color: #97D2FB;
position: absolute;
cursor: grab;
top: 20%;
left: 20%;
top: 0;
left: 0;
position: absolute;
user-select: none;
overflow: hidden;
align-content: flex-start;
Expand Down Expand Up @@ -599,9 +602,10 @@ let isProjCover = data.isProjCover
}
@media only screen and (max-width: 768px) {
.card_container {
:global(.card_container ){
display: none;
}
}
Expand Down
132 changes: 104 additions & 28 deletions src/routes/+page.svelte
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,6 +12,9 @@
//The data containes everything passed from the +page.server.js
export let data
let width = 0;
let height = 0;
let containers;
let scrollContainers;
let floaters;
Expand Down Expand Up @@ -41,10 +44,59 @@
let simplebarContainer;
let isDesktop;
let isDesktop = null;
let isMobileDevice = null;
let previousIsDesktop;
//Functions
const updateWindowSize = () => {
previousIsDesktop = isDesktop
width = window.innerWidth;
height = window.innerHeight;
if (width > 768) {
isDesktop = true;
isMobileDevice = false;
// Detect transition from mobile to desktop
if (previousIsDesktop === false) {
console.log("Transitioned from mobile to desktop");
reloadWebsite();
}
} else {
isDesktop = false;
isMobileDevice = true;
// Detect transition from desktop to mobile
if (previousIsDesktop === true) {
console.log("Transitioned from desktop to mobile");
hideDesktopStuff();
}
}
};
const hideDesktopStuff = () => {
if (containers) {
containers.forEach(container => {
container.style.display = 'none';
});
}
// Hide all containers
if (floaters) {
floaters.forEach(floater => {
floater.style.display = 'none';
});
}
}
const reloadWebsite = () => {
location.reload();
}
const updateTime = () => {
const now = new Date();
setTimeout(() => {
Expand All @@ -62,6 +114,7 @@
containers.forEach((container, index) => {
const { x, y } = initialPositions[index];
console.log(x, y)
container.style.transition = 'transform 0.3s ease-in-out'
container.style.transform = `translate(${x}px, ${y}px)`;
Expand All @@ -72,6 +125,7 @@
setTimeout(() => {
container.style.transition = ''
}, 300);
});
selectedCard = "Qualifying";
Expand Down Expand Up @@ -273,15 +327,10 @@
const ResizeObserver = (await import('resize-observer-polyfill')).default;
const userAgent = navigator.userAgent || navigator.vendor || window.opera;
const isMobileDevice = /android|iphone|ipad|ipod|blackberry|iemobile|opera mini/i.test(userAgent.toLowerCase());
// If it's not a mobile device, assume it's desktop
isDesktop = !isMobileDevice;
// Alternatively, check based on screen width
if (window.innerWidth > 768) {
isDesktop = true;
}
// Initialize the size
updateWindowSize();
window.addEventListener('resize', updateWindowSize);
if (simplebarContainer) {
new SimpleBar(simplebarContainer, {
Expand All @@ -293,26 +342,46 @@
updateTime();
const interval = setInterval(updateTime, 1000);
containers = document.querySelectorAll('.card_container')
floaters = document.querySelectorAll('.floater_container')
hostElement = document.querySelector('.host');
scrollContainers = document.querySelectorAll('.card_scrollable_container')
if (isDesktop) {
containers = document.querySelectorAll('.card_container')
floaters = document.querySelectorAll('.floater_container')
hostElement = document.querySelector('.host');
scrollContainers = document.querySelectorAll('.card_scrollable_container')
tick();
await tick();
// Storing positions
containers.forEach((container, index) => {
const offset = -30 * index;
const centering = 30;
const x = offset - (4 * centering);
const y = offset - (0.8 * centering);
const totalCards = containers.length;
// Dimensions of the viewport
const hostRect = hostElement.getBoundingClientRect();
const windowWidth = hostRect.width;
const windowHeight = hostRect.height;
// Define the offset and centering values
const offset = -30;
// Get card dimensions (assuming all cards are the same size)
const cardWidth = windowWidth * 0.6;
const cardHeight = cardWidth / 1.5
// Calculate the total block width and height
const totalBlockWidth = cardWidth + ((totalCards - 1) * Math.abs(offset));
const totalBlockHeight = cardHeight + ((totalCards - 1) * Math.abs(offset));
// Calculate the starting position (top-left of the first card) to center the block
const startX = (windowWidth - totalBlockWidth) / 2;
const startY = (windowHeight - totalBlockHeight) / 2;
// Calculate the position for the current container based on the index
let x = startX + index * offset;
let y = startY + index * offset;
initialPositions.push({ x, y });
// Apply the position to the container
container.style.transform = `translate(${x}px, ${y}px)`;
container.setAttribute('data-x', x);
container.setAttribute('data-y', y);
Expand All @@ -327,15 +396,15 @@
}
container.style.opacity = '0';
setTimeout(() => {
setTimeout(() => {
container.style.display = 'grid';
container.style.opacity = '1';
}, index * 125);
}, 500);
container.style.display = 'grid';
container.style.opacity = '1';
}, index * 125);
}, 500);
});
containers.forEach(container => {
container.classList.add('grab');
Expand Down Expand Up @@ -560,9 +629,16 @@
sections = document.querySelectorAll('.section_container');
setupMouseDetection();
observeSectionsAndContainers();
tick();
}
return () => {
window.removeEventListener('resize', updateWindowSize);
};
});
Expand Down

0 comments on commit 877c6e0

Please sign in to comment.