From d9c6faa6ab4a2aad29189a03e855e0461c9eb969 Mon Sep 17 00:00:00 2001
From: JustTemmie <47639983+JustTemmie@users.noreply.github.com>
Date: Fri, 4 Jul 2025 09:43:05 +0200
Subject: [PATCH] refactor: move stuff from profile to within the crop popup
 itself

---
 components/CropPopup.vue                     | 32 ++++++++++++++------
 components/Settings/UserSettings/Profile.vue | 31 ++++---------------
 2 files changed, 29 insertions(+), 34 deletions(-)

diff --git a/components/CropPopup.vue b/components/CropPopup.vue
index 7671e4d..8321cb1 100644
--- a/components/CropPopup.vue
+++ b/components/CropPopup.vue
@@ -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>
diff --git a/components/Settings/UserSettings/Profile.vue b/components/Settings/UserSettings/Profile.vue
index e9542c9..302c4c0 100644
--- a/components/Settings/UserSettings/Profile.vue
+++ b/components/Settings/UserSettings/Profile.vue
@@ -24,14 +24,12 @@
 
     </div>
   </div>
-  <div v-if="isCropPopupVisible" id="crop-popup-container">
-    <CropPopup
-      :imageSrc="cropImageSrc"
-      :onCrop="handleCrop"
-      :onClose="closeCropPopup"
-      id="crop-popup-preview"
-    />
-  </div>
+  <CropPopup
+    v-if="isCropPopupVisible"
+    :imageSrc="cropImageSrc"
+    :onCrop="handleCrop"
+    :onClose="closeCropPopup"
+  />
 </template>
 
 <script lang="ts" setup>
@@ -168,21 +166,4 @@ function closeCropPopup() {
 #profile-popup {
   margin-left: 2dvw;
 }
-
-#crop-popup-container {
-  position: fixed;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
-  z-index: 10;
-  background: rgba(0,0,0,0.5);
-}
-
-#crop-popup-preview {
-  position: absolute;
-  top: 50%;
-  left: 50%;
-  transform: translate(-50%, -50%);
-}
 </style>
\ No newline at end of file