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

place resize anchors

Browse Source
This commit is contained in:
gawells
2026-06-14 08:52:59 -04:00
parent 3d6a853be0
commit 791dd3b0c4
2 changed files with 28 additions and 31 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/pages/profile_page.html
+6 -12
View File
@@ -88,17 +88,6 @@
></div> ></div>
</div> </div>
</div> </div>
<!--<div id="password_errors">
<div class="password_error">Error 1</div>
<div class="password_error">Error 2</div>
</div>
<div id="password_warnings">
<div class="password_error">Error 1</div>
<div class="password_error">Error 2</div>
</div>-->
<button id="final_change_password_button">Change Password</button> <button id="final_change_password_button">Change Password</button>
</div> </div>
@@ -107,7 +96,12 @@
<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> <div id="resize_photo_box">
<div id="top_left_resize" class="resize_anchor"></div>
<div id="top_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>
<button id="confirm_change">Confirm Change</button> <button id="confirm_change">Confirm Change</button>
</div> </div>
static/profile_page.css
+22 -19
View File
@@ -200,23 +200,26 @@
z-index: 4; z-index: 4;
} }
/* .resize_anchor {
#resize_photo_box:hover {
cursor: grab;
}
#new_profile_image {
height: 350px;
position: absolute;
transform: translateX(5px) translateY(5px);
object-fit: cover;
}
#image_container {
height: 350px;
width: fit-content;
position: absolute;
background-color: red; background-color: red;
}*/ width: 20px;
height: 20px;
position: absolute;
pointer-events: none;
}
#top_left_resize {
transform: translateX(-50%) translateY(-50%);
}
#top_right_resize {
transform: translateX(340px) translateY(-50%);
}
#bottom_left_resize {
transform: translateY(340px) translateX(-50%);
}
#bottom_right_resize {
transform: translateX(340px) translateY(340px);
}