gorb/frontend
4
0
Fork 0
Code Issues 6 Pull requests 1 Projects Releases Packages 1 Wiki Activity Actions

refactor: move stuff from profile to within the crop popup itself
All checks were successful
ci/woodpecker/push/build-and-publish Pipeline was successful
Details

Browse source
This commit is contained in:
JustTemmie 2025-07-04 09:43:05 +02:00
parent 181fcd04db
commit d9c6faa6ab
Signed by: justtemmie
SSH key fingerprint: SHA256:nBO+OwpTkd8LYhe38PIqdxmDvkIg9Vw2EbrRZM97dkU
2 changed files with 29 additions and 34 deletions
Download patch file Download diff file Expand all files Collapse all files

32
components/CropPopup.vue
View file

@ -1,8 +1,10 @@
<template>
<div class="crop-popup">
<img ref="image" :src="imageSrc" style="min-height: 500px;">
<Button text="Crop" :callback="cropImage"></Button>
<Button text="Cancel" :callback="closePopup"></Button>
<div id="fullscreen-container">
<div id="crop-preview">
<img ref="image" :src="imageSrc" style="min-height: 500px;">
<Button class="button" text="Crop" :callback="cropImage"></Button>
<Button class="button" text="Cancel" :callback="closePopup"></Button>
</div>
</div>
</template>
@ -60,12 +62,24 @@ function closePopup() {
</script>
<style scoped>
.crop-popup, #image-preview{
min-width: 20dvw;
min-height: 20dvh;
.button {
margin: 0.2em
}
cropper-canvas {
min-height: 500px;
#fullscreen-container {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 10;
background: rgba(0,0,0,0.5);
}
#crop-preview {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
</style>