diff --git a/src/pages/profile_page.html b/src/pages/profile_page.html
index 0c134f1..5986d1a 100644
--- a/src/pages/profile_page.html
+++ b/src/pages/profile_page.html
@@ -270,6 +270,22 @@
image_dark_overlay.style.setProperty("--x-offset", "0px");
image_dark_overlay.style.setProperty("--y-offset", "0px");
+ bounds = calculateBoxBoundsOnImage({
+ x: 0,
+ y: 0,
+ });
+ image_dark_overlay.style.setProperty("--left-edge", bounds.left + "px");
+ image_dark_overlay.style.setProperty(
+ "--right-edge",
+ bounds.right + "px",
+ );
+
+ image_dark_overlay.style.setProperty("--top-edge", bounds.top + "px");
+ image_dark_overlay.style.setProperty(
+ "--bottom-edge",
+ bounds.bottom + "px",
+ );
+
resize_photo_box.style.setProperty("--size", "350px");
});
diff --git a/static/javascript/resize_photo_dialouge.js b/static/javascript/resize_photo_dialouge.js
index 204c20b..c7c2bf0 100644
--- a/static/javascript/resize_photo_dialouge.js
+++ b/static/javascript/resize_photo_dialouge.js
@@ -23,21 +23,18 @@ function calculateOffsets() {
return { x: xOffset + left + right, y: yOffset + top + bottom };
}
-function calculateBoxBoundsOnImage() {
- offsets = calculateOffsets();
-
+function calculateBoxBoundsOnImage(offsets) {
const x_overspill = image_width - 360;
const left_overspill = x_overspill / 2 - offsets.x;
- // const right_overspill = x_overspill / 2 - offsets.y;
const y_overspill = image_height - 360;
const top_overspill = y_overspill / 2 - offsets.y;
return {
- left: left_overspill + 5,
- right: left_overspill + 5 + 350,
- top: top_overspill + 5,
- bottom: top_overspill + 350 + 5,
+ left: left_overspill,
+ right: left_overspill + 360,
+ top: top_overspill,
+ bottom: top_overspill + 360,
};
}
@@ -53,7 +50,7 @@ resize_photo_box.addEventListener("mousemove", () => {
image_dark_overlay.style.setProperty("--x-offset", offsets.x + "px");
image_dark_overlay.style.setProperty("--y-offset", offsets.y + "px");
- bounds = calculateBoxBoundsOnImage();
+ bounds = calculateBoxBoundsOnImage(offsets);
image_dark_overlay.style.setProperty("--left-edge", bounds.left + "px");
image_dark_overlay.style.setProperty("--right-edge", bounds.right + "px");
diff --git a/static/profile_page.css b/static/profile_page.css
index 2c29df2..99a69d5 100644
--- a/static/profile_page.css
+++ b/static/profile_page.css
@@ -255,14 +255,17 @@
}
#circle-display {
- width: 100%;
- height: 100%;
+ position: absolute;
+ width: calc(100% + 10px);
+ height: calc(100% + 10px);
+ transform: translateX(-5px) translateY(-5px);
+ transform: scale(10px);
background: radial-gradient(
circle closest-side,
transparent 99%,
rgba(0, 0, 0, 0.5) 100%
);
- display: none;
+ /*dispalt*/
}
#image_dark_overlay {