AzitaRahimi/final-protfolio
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

icon-desktop

Browse Source
This commit is contained in:
Azita Rahimi
2026-06-22 11:28:55 +03:30
parent 38d6213ab3
commit fa10e5309b
2 changed files with 21 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
src/assets/css/portfolio.css
View File

@@ -976,7 +976,7 @@ body.dragging-scroll {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
gap: 24px; gap: 24px;
max-width: 600px; /* max-width: 600px; */
} }
.itemc, .itemc,
.itemr { .itemr {
@@ -994,6 +994,7 @@ body.dragging-scroll {
background-repeat: no-repeat; background-repeat: no-repeat;
background-position: bottom; background-position: bottom;
background-size: auto; background-size: auto;
/* flex-basis: 100%; */
} }
.itemr { .itemr {
background-color: #e5efff; background-color: #e5efff;

20
src/assets/js/portfolio.js
View File

@@ -1102,21 +1102,37 @@ function handleMobilePopupView() {
window.addEventListener('resize', updateOrientationState); window.addEventListener('resize', updateOrientationState);
window.addEventListener('orientationchange', updateOrientationState); window.addEventListener('orientationchange', updateOrientationState);
updateOrientationState();
function updateOrientationState() { function updateOrientationState() {
const isLandscape = window.innerWidth > window.innerHeight; const isLandscape = window.innerWidth > window.innerHeight;
const desktopBtn = document.querySelector('.desktop-btn');
const phoneBtn = document.querySelector('.phone-btn');
const desktopUse = document.getElementById('desktopIcon');
const phoneUse = document.getElementById('phoneIcon');
if (isLandscape) { if (isLandscape) {
portfolioWrapper.classList.remove('mobile-view'); portfolioWrapper.classList.remove('mobile-view');
sideWrapper.classList.add('rotated-desktop'); sideWrapper.classList.add('rotated-desktop');
sideWrapper.classList.add('is-rotated'); sideWrapper.classList.add('is-rotated');
overlay.classList.add('is-rotated2'); overlay.classList.add('is-rotated2');
desktopBtn?.classList.add('active');
phoneBtn?.classList.remove('active');
desktopUse?.setAttribute('href', './src/assets/icons/portfolioP.svg#descktop-icon-active');
phoneUse?.setAttribute('href', './src/assets/icons/portfolioP.svg#phone-icon');
} else { } else {
portfolioWrapper.classList.add('mobile-view'); portfolioWrapper.classList.add('mobile-view');
sideWrapper.classList.remove('rotated-desktop'); sideWrapper.classList.remove('rotated-desktop');
sideWrapper.classList.remove('is-rotated'); sideWrapper.classList.remove('is-rotated');
overlay.classList.remove('is-rotated2'); overlay.classList.remove('is-rotated2');
phoneBtn?.classList.add('active');
desktopBtn?.classList.remove('active');
phoneUse?.setAttribute('href', './src/assets/icons/portfolioP.svg#phone-icon-active');
desktopUse?.setAttribute('href', './src/assets/icons/portfolioP.svg#descktop-icon');
} }
} }
updateOrientationState(); updateOrientationState();