gawells/Self-Service-Dashboard
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 7 Wiki Activity

resize the box when anchors are resized

Browse Source
This commit is contained in:
gawells
2026-06-26 16:00:22 -04:00
parent 1aaf6825bd
commit 38e8ebf362
3 changed files with 46 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/pages/profile_page.html
+8 -5
View File
@@ -96,11 +96,14 @@
<img id="new_profile_image" alt="new-profile-image" /> <img id="new_profile_image" alt="new-profile-image" />
<div id="darken_part"></div> <div id="darken_part"></div>
</div> </div>
<div id="resize_photo_box"> <div id="grab-area">
<div id="top_left_resize" class="resize_anchor"></div> <div id="box-scale-holder">
<div id="top_right_resize" class="resize_anchor"></div> <div id="top_left_resize" class="resize_anchor"></div>
<div id="bottom_left_resize" class="resize_anchor"></div> <div id="top_right_resize" class="resize_anchor"></div>
<div id="bottom_right_resize" class="resize_anchor"></div> <div id="bottom_left_resize" class="resize_anchor"></div>
<div id="bottom_right_resize" class="resize_anchor"></div>
</div>
<div id="resize_photo_box"></div>
</div> </div>
<button id="confirm_change">Confirm Change</button> <button id="confirm_change">Confirm Change</button>
</div> </div>
static/javascript/resize_photo_dialouge.js
+15
View File
@@ -72,6 +72,9 @@ for (var i = 0; i < resize_anchors.length; i++) {
handleBeingHeld[index] = false; handleBeingHeld[index] = false;
resize_anchors[index].style.setProperty("--x-offset", "0px"); resize_anchors[index].style.setProperty("--x-offset", "0px");
resize_anchors[index].style.setProperty("--y-offset", "0px"); resize_anchors[index].style.setProperty("--y-offset", "0px");
resize_photo_box.style.setProperty("--size", "350px");
resize_photo_box.style.setProperty("--box-x-offset", "0px");
resize_photo_box.style.setProperty("--box-y-offset", "0px");
}); });
resize_anchors[i].style.setProperty("--x-offset", "0px"); resize_anchors[i].style.setProperty("--x-offset", "0px");
@@ -89,5 +92,17 @@ document.body.addEventListener("mousemove", () => {
resize_anchors[i].style.setProperty("--x-offset", moveAmount + "px"); resize_anchors[i].style.setProperty("--x-offset", moveAmount + "px");
resize_anchors[i].style.setProperty("--y-offset", moveAmount + "px"); resize_anchors[i].style.setProperty("--y-offset", moveAmount + "px");
resize_photo_box.style.setProperty("--size", 350 - moveAmount + "px");
if (i == 0) {
resize_photo_box.style.setProperty("--box-x-offset", moveAmount + "px");
resize_photo_box.style.setProperty("--box-y-offset", moveAmount + "px");
}
if (i == 1) {
resize_photo_box.style.setProperty("--box-y-offset", moveAmount + "px");
}
if (i == 2) {
resize_photo_box.style.setProperty("--box-x-offset", moveAmount + "px");
}
} }
}); });
static/profile_page.css
+23 -5
View File
@@ -178,6 +178,15 @@
top: calc(350px / 2); top: calc(350px / 2);
} }
#grab-area {
display: grid;
}
#grab-area > * {
grid-column-start: 1;
grid-row-start: 1;
}
#resize_photo_box { #resize_photo_box {
background-color: rgba(0, 0, 0, 0); background-color: rgba(0, 0, 0, 0);
width: var(--size); width: var(--size);
@@ -187,6 +196,8 @@
border-color: black; border-color: black;
border-width: 5px; border-width: 5px;
z-index: 4; z-index: 4;
transform: translateX(var(--box-x-offset)) translateY(var(--box-y-offset));
} }
.resize_anchor { .resize_anchor {
@@ -194,11 +205,12 @@
width: 20px; width: 20px;
height: 20px; height: 20px;
position: absolute; position: absolute;
z-index: 5;
} }
#top_left_resize { #top_left_resize {
transform: translateX(calc(-50% + var(--x-offset))) transform: translateX(calc(-50% + var(--x-offset) + 10px))
translateY(calc(-50% + var(--y-offset))); translateY(calc(-50% + var(--y-offset) + 10px));
} }
#top_left_resize:hover { #top_left_resize:hover {
@@ -206,8 +218,8 @@
} }
#top_right_resize { #top_right_resize {
transform: translateX(calc(340px - var(--x-offset))) transform: translateX(calc(350px - var(--x-offset) - 10px))
translateY(calc(-50% + var(--y-offset))); translateY(calc(-50% + var(--y-offset) + 10px));
} }
#top_right_resize:hover { #top_right_resize:hover {
@@ -215,7 +227,7 @@
} }
#bottom_left_resize { #bottom_left_resize {
transform: translateX(calc(-50% + var(--x-offset))) transform: translateX(calc(-50% + var(--x-offset) + 10px))
translateY(calc(340px - var(--x-offset))); translateY(calc(340px - var(--x-offset)));
} }
@@ -231,3 +243,9 @@
#bottom_right_resize:hover { #bottom_right_resize:hover {
cursor: se-resize !important; cursor: se-resize !important;
} }
#box-scale-holder {
position: relative;
width: 360px;
height: 360px;
}