timelapse/timelapse-frontend
4
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

responsive

Browse Source
This commit is contained in:
arussac
2025-03-24 20:34:11 +01:00
parent 4222b37e77
commit b56e9b629d
2 changed files with 50 additions and 14 deletions
Download Patch File Download Diff File Expand all files Collapse all files

44
css/style_menu.css
View File

@@ -1,14 +1,14 @@
.project { .project {
width: 90%;
height: 40vh; height: 40vh;
width: 80%;
box-sizing: border-box; box-sizing: border-box;
padding: 20px;
background-color: #f8f9fa; background-color: #f8f9fa;
text-align: center; text-align: center;
border: 1px solid #ddd; border: 1px solid #ddd;
border-radius: 10px; border-radius: 10px;
margin: 0 10px; margin: 0 1vw;
backface-visibility: hidden; backface-visibility: hidden;
display: flex;
} }
#global_title { #global_title {
@@ -29,9 +29,9 @@
.dot { .dot {
z-index: 30; z-index: 30;
width: 12px; width: 0.8vw;
height: 12px; height: 1.8vh;
margin: 0 5px; margin: 0 0.3vw;
background-color: #bbb; background-color: #bbb;
border-radius: 50%; border-radius: 50%;
cursor: pointer; cursor: pointer;
@@ -44,10 +44,10 @@
.container { .container {
margin: 0 auto; margin: 0 auto;
width: 250px; width: 25vw;
height: 47vh; height: 47vh;
position: relative; position: relative;
perspective: 1000px; perspective: 100vw;
} }
.carousel { .carousel {
@@ -63,19 +63,39 @@
text-align: center; text-align: center;
} }
.item h2 {
font-size: 4vh;
color: #151515;
}
.item p {
font-size: 2.4vh;
color: #151515;
}
.item button {
font-size: 2.8vh;
}
.next, .prev { .next, .prev {
position: absolute; position: absolute;
cursor: pointer; cursor: pointer;
background-color: transparent; background-color: transparent;
font-size: 90px; font-size: 20vh;
color: white; color: white;
border: none; border: none;
bottom: 2.5em; bottom: 25vh;
transition: transform 0.3s, box-shadow 0.3s; transition: transform 0.3s, box-shadow 0.3s;
} }
.next:hover, .prev:hover { .next:hover, .prev:hover {
box-shadow: 0 0 15px 0 rgba(253, 252, 252, 0.2); box-shadow: 0 0 15px 0 rgba(253, 252, 252, 0.2);
transform: translateY(-4px); transform: translateY(-4px);
} }
.next { right: 2em; } .next { right: 10vw; }
.prev { left: 2em; } .prev { left: 10vw; }
.project_buttons {
display: flex;
flex-direction: column;
align-items: center;
}

20
js/index.js
View File

@@ -106,9 +106,11 @@ function setupCarousel(global_project_list) {
const letter = ['a', 'b', 'c', 'd', 'e', 'f','g','h','i','j','k','l','m','n','o','p','q','r','s','t']; const letter = ['a', 'b', 'c', 'd', 'e', 'f','g','h','i','j','k','l','m','n','o','p','q','r','s','t'];
const degGlobal = 360 / global_project_list.length; const degGlobal = 360 / global_project_list.length;
var carousel_css = $(".carousel"), let carousel_css = $(".carousel"),
currdeg = 0 currdeg = 0
let width = window.innerWidth;
global_project_list.forEach((project, index) => { global_project_list.forEach((project, index) => {
const projectDiv = document.createElement('div'); const projectDiv = document.createElement('div');
projectDiv.classList.add('project'); projectDiv.classList.add('project');
@@ -124,7 +126,7 @@ function setupCarousel(global_project_list) {
</div> </div>
`; `;
carousel.appendChild(projectDiv); carousel.appendChild(projectDiv);
document.querySelector('.'.concat(letter[index])).style=`transform: rotateY(${index * degGlobal}deg) translateZ(250px);`; document.querySelector('.'.concat(letter[index])).style=`transform: rotateY(${index * degGlobal}deg) translateZ(${width/6}px);`;
// Add event listener for project details button // Add event listener for project details button
const detailButton = projectDiv.querySelector('.default-access-button'); const detailButton = projectDiv.querySelector('.default-access-button');
@@ -204,3 +206,17 @@ function rotate(e){
} }
} }
function handleResize() {
window.location.reload();
}
window.addEventListener('resize', handleResize);
function isMobileDevice() {
return /Mobi|Android/i.test(navigator.userAgent);
}
if (isMobileDevice()) {
console.log("You are on a mobile device.");
}