From dd8cc6f2b93dc301675067d56d8ab0581342f69d Mon Sep 17 00:00:00 2001 From: Tanishq Dubey Date: Sun, 20 Oct 2024 14:34:53 -0400 Subject: [PATCH] loads and looks ok --- templates/index.html | 71 +++++++++++++++++++++++++++++++++----------- 1 file changed, 53 insertions(+), 18 deletions(-) diff --git a/templates/index.html b/templates/index.html index cedd0f9..e4642d9 100644 --- a/templates/index.html +++ b/templates/index.html @@ -27,6 +27,8 @@ grid-auto-rows: 10px; grid-auto-flow: dense; gap: 15px; + max-width: 100%; + box-sizing: border-box; } .polaroid { position: relative; @@ -39,6 +41,8 @@ flex-direction: column; align-items: center; transition: background-color 0.3s ease; + max-width: 100%; + box-sizing: border-box; } .polaroid img { @@ -87,37 +91,22 @@ "wdth" 100; } - @media (max-width: 768px) { - body { - flex-direction: column; - } - .sidebar { - width: 100%; - height: auto; - position: static; - padding: 10px; - } - .main-content { - padding: 10px; - } - } - .sidebar { - width: 25rem; + min-width: 20rem; background-color: #f0f0f0; padding: 20px; box-sizing: border-box; position: sticky; top: 0; height: 100vh; - overflow-y: auto; + overflow: hidden; display: flex; flex-direction: column; justify-content: space-between; } .sidebar-title { - font-size: 1.5rem; + font-size: 1rem; text-align: right; } .sidebar-nav { @@ -134,6 +123,38 @@ text-decoration: none; color: #ff6600; } + + + @media (max-width: 768px) { + body { + flex-direction: column; + } + .sidebar { + width: 100%; + height: auto; + position: static; + padding: 10px; + } + .main-content { + padding: 10px; + } + .grid-container { + display: flex; + flex-direction: column; + gap: 20px; + } + .polaroid { + width: 100%; + max-width: 100vw; + height: auto; + } + } + + @media (min-width: 769px) and (max-width: 1024px) { + .grid-container { + grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); + } + } @@ -180,6 +201,8 @@ const img = document.createElement('img'); img.src = polaroid.imgSrc; img.alt = polaroid.caption; + img.setAttribute('data-original-width', polaroid.width); + img.setAttribute('data-original-height', polaroid.height); const dateOverlay = document.createElement('div'); dateOverlay.className = 'date-overlay'; @@ -206,6 +229,17 @@ polaroidElement.style.gridColumnEnd = `span ${width}`; polaroidElement.style.gridRowEnd = `span ${height}`; + + } + + function handleResize() { + const polaroids = document.querySelectorAll('.polaroid'); + polaroids.forEach(polaroid => { + const img = polaroid.querySelector('img'); + const width = parseInt(img.getAttribute('data-original-width')); + const height = parseInt(img.getAttribute('data-original-height')); + positionPolaroid(polaroid, { width, height }); + }); } async function loadImages() { @@ -241,6 +275,7 @@ } window.addEventListener('scroll', handleScroll); + loadImages(); // Initial load