From c01c705f5a450a4929f7a343f06b9d953a470b28 Mon Sep 17 00:00:00 2001
From: Water Boiled Pizza <31476555+WaterBoiledPizza@users.noreply.github.com>
Date: Mon, 23 Jan 2023 15:10:36 +0800
Subject: [PATCH 1/7] Formats and requirements for emote upload

---
 .../scss/emote-upload/emote-upload.scss       | 17 +++++-
 src/views/emote-upload/EmoteUpload.vue        | 61 +++++++++++--------
 2 files changed, 50 insertions(+), 28 deletions(-)

diff --git a/src/assets/scss/emote-upload/emote-upload.scss b/src/assets/scss/emote-upload/emote-upload.scss
index 5f2e07e4..2f65810d 100644
--- a/src/assets/scss/emote-upload/emote-upload.scss
+++ b/src/assets/scss/emote-upload/emote-upload.scss
@@ -57,7 +57,8 @@
 				justify-content: center;
 				align-items: center;
 				padding: 0.5em 1em;
-				margin-right: 1em;
+				margin-left: 0em;
+				margin-right: auto;
 				border-radius: 0.4em;
 
 				> span {
@@ -100,13 +101,25 @@
 
 					> .formats-viewer {
 						position: absolute;
-						width: 16em;
+						width: 20em;
 						display: flex;
 						flex-direction: column;
 						border-radius: 0.4em;
 						padding: 0.5em;
+						padding-left: 1em;
+						padding-right: 1em;
 						backdrop-filter: blur(4px);
 
+						.requirements {
+							padding-top: 0.25rem;
+							font-size: 0.8rem;
+
+							> h3 {
+								font-size: 1rem;
+								margin-bottom: -10px;
+							}
+						}
+
 						.format {
 							display: flex;
 							flex-direction: row;
diff --git a/src/views/emote-upload/EmoteUpload.vue b/src/views/emote-upload/EmoteUpload.vue
index 1c8ea248..72f9c6fe 100644
--- a/src/views/emote-upload/EmoteUpload.vue
+++ b/src/views/emote-upload/EmoteUpload.vue
@@ -38,21 +38,38 @@
 						@dragleave="dragOver = false"
 					>
 						<h3>{{ t("emote.upload.image_upload") }}</h3>
-						<a class="acceptable-format-list" @click="formatsViewerOpen = !formatsViewerOpen">
-							{{ t("emote.upload.accepted_formats") }}
-							<Icon v-if="formatsViewerOpen" icon="close" />
-						</a>
 
-						<!-- Formats Viewer -->
+						<input id="file-upload" hidden type="file" :accept="mimeList" @change="onFileInputChange" />
+						<label for="file-upload">
+							<img ref="previewImage" />
+						</label>
+					</div>
+
+					<span>
+						<div v-if="parentEmote" class="parent-emote">
+							<img :src="getImage(parentEmote.host, ImageFormat.WEBP, 2)?.url" />
+							<div class="as-child-notice">
+								<i18n-t keypath="emote.upload.as_child" tag="p">
+									<span style="font-weight: 600">{{ parentEmote.name }}</span>
+								</i18n-t>
+							</div>
+						</div>
+					</span>
+				</div>
+				<div class="image-upload">
+					<div
+						:dragOver="dragOver"
+						@drop.prevent="onDropFile"
+						@dragover.prevent
+						@dragenter="dragOver = true"
+						@dragleave="dragOver = false"
+					>
+						<!-- Formats Viewer and Requirements -->
 						<div v-if="formatsViewerOpen" ref="formatsViewer" class="formats-viewer">
 							<div class="format" categories>
 								<div part="label">{{ t("emote.upload.filetype") }}</div>
 								<div part="animation">{{ t("emote.upload.animation") }}</div>
 								<div part="transparency">{{ t("emote.upload.transparency") }}</div>
-
-								<span part="close-btn" @click="formatsViewerOpen = false">
-									<Icon icon="close" />
-								</span>
 							</div>
 							<div v-for="f of acceptableFileTypes" :key="f.label" class="format" :format="f.mime">
 								<div part="label">{{ f.label }}</div>
@@ -72,23 +89,15 @@
 									<Icon v-else icon="times" color="red" />
 								</div>
 							</div>
-						</div>
-						<input id="file-upload" hidden type="file" :accept="mimeList" @change="onFileInputChange" />
-						<label for="file-upload">
-							<img ref="previewImage" />
-						</label>
-					</div>
-
-					<span>
-						<div v-if="parentEmote" class="parent-emote">
-							<img :src="getImage(parentEmote.host, ImageFormat.WEBP, 2)?.url" />
-							<div class="as-child-notice">
-								<i18n-t keypath="emote.upload.as_child" tag="p">
-									<span style="font-weight: 600">{{ parentEmote.name }}</span>
-								</i18n-t>
+							<div class="requirements">
+								<h3>Requirements:</h3>
+								<br />- under 7 MB <br />- smaller than 1000 x 1000 pixels <br />- less than 1000 frames
+								<br />
+								- no more than 50 fps
 							</div>
 						</div>
-					</span>
+					</div>
+					<span />
 				</div>
 			</div>
 
@@ -161,11 +170,11 @@ if (parentID.value) {
 }
 
 // Formats viewer
-const formatsViewerOpen = ref(false);
+const formatsViewerOpen = ref(true);
 const formatsViewer = ref<HTMLElement | null>(null);
 
 onMounted(() => {
-	onClickOutside(formatsViewer, () => (formatsViewerOpen.value = false));
+	onClickOutside(formatsViewer, () => (formatsViewerOpen.value = true));
 });
 
 // Form

From c034d8993e453444f9371b837b2d1567063c7b5e Mon Sep 17 00:00:00 2001
From: WaterBoiledPizza <lazyman0615@gmail.com>
Date: Mon, 23 Jan 2023 22:32:47 +0800
Subject: [PATCH 2/7] Follow up regarding changes to emote upload page

---
 .../scss/emote-upload/emote-upload.scss       |  5 ++---
 src/views/emote-upload/EmoteUpload.vue        | 20 ++++++-------------
 2 files changed, 8 insertions(+), 17 deletions(-)

diff --git a/src/assets/scss/emote-upload/emote-upload.scss b/src/assets/scss/emote-upload/emote-upload.scss
index 2f65810d..c1886e1e 100644
--- a/src/assets/scss/emote-upload/emote-upload.scss
+++ b/src/assets/scss/emote-upload/emote-upload.scss
@@ -57,7 +57,7 @@
 				justify-content: center;
 				align-items: center;
 				padding: 0.5em 1em;
-				margin-left: 0em;
+				margin-left: auto;
 				margin-right: auto;
 				border-radius: 0.4em;
 
@@ -116,7 +116,6 @@
 
 							> h3 {
 								font-size: 1rem;
-								margin-bottom: -10px;
 							}
 						}
 
@@ -211,7 +210,7 @@
 				}
 			}
 
-			@media screen and (max-width: 800px) {
+			@media screen and (max-width: 1200px) {
 				flex-direction: column;
 				align-items: center;
 				> .image-upload {
diff --git a/src/views/emote-upload/EmoteUpload.vue b/src/views/emote-upload/EmoteUpload.vue
index 72f9c6fe..8a542ce1 100644
--- a/src/views/emote-upload/EmoteUpload.vue
+++ b/src/views/emote-upload/EmoteUpload.vue
@@ -65,7 +65,7 @@
 						@dragleave="dragOver = false"
 					>
 						<!-- Formats Viewer and Requirements -->
-						<div v-if="formatsViewerOpen" ref="formatsViewer" class="formats-viewer">
+						<div class="formats-viewer">
 							<div class="format" categories>
 								<div part="label">{{ t("emote.upload.filetype") }}</div>
 								<div part="animation">{{ t("emote.upload.animation") }}</div>
@@ -91,9 +91,10 @@
 							</div>
 							<div class="requirements">
 								<h3>Requirements:</h3>
-								<br />- under 7 MB <br />- smaller than 1000 x 1000 pixels <br />- less than 1000 frames
-								<br />
-								- no more than 50 fps
+								<p>- under 7 MB</p>
+								<p>- smaller than 1000 x 1000 pixels</p>
+								<p>- less than 1000 frames</p>
+								<p>- no more than 50 fps</p>
 							</div>
 						</div>
 					</div>
@@ -123,11 +124,10 @@
 </template>
 
 <script setup lang="ts">
-import { computed, defineAsyncComponent, onMounted, reactive, ref } from "vue";
+import { computed, defineAsyncComponent, reactive, ref } from "vue";
 import { useI18n } from "vue-i18n";
 import { useRoute, useRouter } from "vue-router";
 import { useQuery } from "@vue/apollo-composable";
-import { onClickOutside } from "@vueuse/core";
 import { LocalStorageKeys } from "@store/lskeys";
 import { GetEmote, GetMinimalEmote } from "@/apollo/query/emote.query";
 import { ImageFormat, getImage } from "@/structures/Common";
@@ -169,14 +169,6 @@ if (parentID.value) {
 	onResult((res) => (parentEmote.value = res.data.emote));
 }
 
-// Formats viewer
-const formatsViewerOpen = ref(true);
-const formatsViewer = ref<HTMLElement | null>(null);
-
-onMounted(() => {
-	onClickOutside(formatsViewer, () => (formatsViewerOpen.value = true));
-});
-
 // Form
 const form = reactive({
 	name: "",

From 74e1313db400e93a8e1f515a94cc25d82f3d9240 Mon Sep 17 00:00:00 2001
From: WaterBoiledPizza <lazyman0615@gmail.com>
Date: Wed, 25 Jan 2023 12:09:12 +0800
Subject: [PATCH 3/7] Layout adjustment

---
 .../scss/emote-upload/emote-upload.scss       | 40 ++++++++++++-------
 src/views/emote-upload/EmoteUpload.vue        | 21 ++++++----
 2 files changed, 39 insertions(+), 22 deletions(-)

diff --git a/src/assets/scss/emote-upload/emote-upload.scss b/src/assets/scss/emote-upload/emote-upload.scss
index c1886e1e..fca70e5c 100644
--- a/src/assets/scss/emote-upload/emote-upload.scss
+++ b/src/assets/scss/emote-upload/emote-upload.scss
@@ -36,15 +36,15 @@
 				> .image-upload > span > .parent-emote {
 					background-color: darken(themed("backgroundColor"), 2);
 				}
-				> .image-upload > div {
+				> .image-upload > .file-upload {
 					background-color: darken(themed("backgroundColor"), 2);
-					> .formats-viewer {
-						background-color: transparentize(lighten(themed("backgroundColor"), 4), 0.25);
-					}
 					&[dragOver="true"] {
 						background-color: transparentize(darken(themed("accent"), 8), 0.75);
 					}
 				}
+				> .image-upload > div > .formats-viewer {
+					background-color: transparentize(lighten(themed("backgroundColor"), 4), 0.25);
+				}
 			}
 
 			> .form-grid-item {
@@ -82,12 +82,15 @@
 
 					&[dragOver="true"] {
 						h3,
-						a,
 						label {
 							pointer-events: none;
 						}
 					}
 
+					> h3 {
+						padding-top: 3.5rem;
+					}
+
 					> a.acceptable-format-list {
 						cursor: pointer;
 						user-select: none;
@@ -99,6 +102,24 @@
 						}
 					}
 
+					> .requirements {
+						font-size: 0.7rem;
+						margin-left: 2rem;
+						margin-right: auto;
+						padding-bottom: 0.5rem;
+						width: 350px;
+
+						> h3 {
+							padding-top: 2rem;
+							font-size: 1rem;
+							padding-bottom: 0.25rem;
+						}
+
+						> p {
+							font-size: 0.8rem;
+						}
+					}
+
 					> .formats-viewer {
 						position: absolute;
 						width: 20em;
@@ -110,15 +131,6 @@
 						padding-right: 1em;
 						backdrop-filter: blur(4px);
 
-						.requirements {
-							padding-top: 0.25rem;
-							font-size: 0.8rem;
-
-							> h3 {
-								font-size: 1rem;
-							}
-						}
-
 						.format {
 							display: flex;
 							flex-direction: row;
diff --git a/src/views/emote-upload/EmoteUpload.vue b/src/views/emote-upload/EmoteUpload.vue
index 8a542ce1..762562bb 100644
--- a/src/views/emote-upload/EmoteUpload.vue
+++ b/src/views/emote-upload/EmoteUpload.vue
@@ -32,6 +32,7 @@
 				<div class="image-upload form-grid-item">
 					<div
 						:dragOver="dragOver"
+						class="file-upload"
 						@drop.prevent="onDropFile"
 						@dragover.prevent
 						@dragenter="dragOver = true"
@@ -43,6 +44,17 @@
 						<label for="file-upload">
 							<img ref="previewImage" />
 						</label>
+						<div class="requirements">
+							<h3>Up to:</h3>
+							<p>- 7 MB large</p>
+							<p>- 1000 x 1000 pixels big</p>
+							<p>- 1000 frames</p>
+							<p>- 50 fps</p>
+						</div>
+						<div class="requirements">
+							*Max width is 384 px and max height is 128 px after processing. Image will be scaled down
+							according to the aspect ratio.
+						</div>
 					</div>
 
 					<span>
@@ -64,7 +76,7 @@
 						@dragenter="dragOver = true"
 						@dragleave="dragOver = false"
 					>
-						<!-- Formats Viewer and Requirements -->
+						<!-- Formats Viewer -->
 						<div class="formats-viewer">
 							<div class="format" categories>
 								<div part="label">{{ t("emote.upload.filetype") }}</div>
@@ -89,13 +101,6 @@
 									<Icon v-else icon="times" color="red" />
 								</div>
 							</div>
-							<div class="requirements">
-								<h3>Requirements:</h3>
-								<p>- under 7 MB</p>
-								<p>- smaller than 1000 x 1000 pixels</p>
-								<p>- less than 1000 frames</p>
-								<p>- no more than 50 fps</p>
-							</div>
 						</div>
 					</div>
 					<span />

From 22704c787d80f872f688e3a7460e20e78c7087e5 Mon Sep 17 00:00:00 2001
From: WaterBoiledPizza <lazyman0615@gmail.com>
Date: Wed, 25 Jan 2023 13:19:34 +0800
Subject: [PATCH 4/7] Format adjustment

---
 .../scss/emote-upload/emote-upload.scss       | 28 ++++++++--------
 src/views/emote-upload/EmoteUpload.vue        | 32 ++++++++-----------
 2 files changed, 27 insertions(+), 33 deletions(-)

diff --git a/src/assets/scss/emote-upload/emote-upload.scss b/src/assets/scss/emote-upload/emote-upload.scss
index fca70e5c..50cf81d0 100644
--- a/src/assets/scss/emote-upload/emote-upload.scss
+++ b/src/assets/scss/emote-upload/emote-upload.scss
@@ -33,16 +33,16 @@
 			justify-content: space-between;
 
 			@include themify() {
-				> .image-upload > span > .parent-emote {
-					background-color: darken(themed("backgroundColor"), 2);
-				}
-				> .image-upload > .file-upload {
+				.file-upload {
 					background-color: darken(themed("backgroundColor"), 2);
 					&[dragOver="true"] {
 						background-color: transparentize(darken(themed("accent"), 8), 0.75);
 					}
 				}
-				> .image-upload > div > .formats-viewer {
+				> .image-upload > span > .parent-emote {
+					background-color: darken(themed("backgroundColor"), 2);
+				}
+				.formats-viewer {
 					background-color: transparentize(lighten(themed("backgroundColor"), 4), 0.25);
 				}
 			}
@@ -87,9 +87,9 @@
 						}
 					}
 
-					> h3 {
-						padding-top: 3.5rem;
-					}
+					// > h3 {
+					// 	padding-top: 3.5rem;
+					// }
 
 					> a.acceptable-format-list {
 						cursor: pointer;
@@ -103,14 +103,14 @@
 					}
 
 					> .requirements {
-						font-size: 0.7rem;
-						margin-left: 2rem;
+						font-size: 0.625rem;
+						margin-left: 4rem;
 						margin-right: auto;
 						padding-bottom: 0.5rem;
-						width: 350px;
+						width: 18rem;
 
 						> h3 {
-							padding-top: 2rem;
+							padding-top: 1rem;
 							font-size: 1rem;
 							padding-bottom: 0.25rem;
 						}
@@ -121,7 +121,8 @@
 					}
 
 					> .formats-viewer {
-						position: absolute;
+						top: 0;
+						position: relative;
 						width: 20em;
 						display: flex;
 						flex-direction: column;
@@ -129,7 +130,6 @@
 						padding: 0.5em;
 						padding-left: 1em;
 						padding-right: 1em;
-						backdrop-filter: blur(4px);
 
 						.format {
 							display: flex;
diff --git a/src/views/emote-upload/EmoteUpload.vue b/src/views/emote-upload/EmoteUpload.vue
index 762562bb..5d64a6e6 100644
--- a/src/views/emote-upload/EmoteUpload.vue
+++ b/src/views/emote-upload/EmoteUpload.vue
@@ -44,17 +44,6 @@
 						<label for="file-upload">
 							<img ref="previewImage" />
 						</label>
-						<div class="requirements">
-							<h3>Up to:</h3>
-							<p>- 7 MB large</p>
-							<p>- 1000 x 1000 pixels big</p>
-							<p>- 1000 frames</p>
-							<p>- 50 fps</p>
-						</div>
-						<div class="requirements">
-							*Max width is 384 px and max height is 128 px after processing. Image will be scaled down
-							according to the aspect ratio.
-						</div>
 					</div>
 
 					<span>
@@ -68,14 +57,8 @@
 						</div>
 					</span>
 				</div>
-				<div class="image-upload">
-					<div
-						:dragOver="dragOver"
-						@drop.prevent="onDropFile"
-						@dragover.prevent
-						@dragenter="dragOver = true"
-						@dragleave="dragOver = false"
-					>
+				<div class="image-upload form-grid-item">
+					<div>
 						<!-- Formats Viewer -->
 						<div class="formats-viewer">
 							<div class="format" categories>
@@ -102,6 +85,17 @@
 								</div>
 							</div>
 						</div>
+						<div class="requirements">
+							<h3>Up to:</h3>
+							<p>- 7 MB large</p>
+							<p>- 1000 x 1000 pixels big</p>
+							<p>- 1000 frames</p>
+							<p>- 50 fps</p>
+						</div>
+						<div class="requirements">
+							* Max width is 384 px and max height is 128 px after processing. Image will be scaled down
+							according to the aspect ratio.
+						</div>
 					</div>
 					<span />
 				</div>

From bf5370be732ab167aac99ddddc6fdf49256972e0 Mon Sep 17 00:00:00 2001
From: WaterBoiledPizza <lazyman0615@gmail.com>
Date: Wed, 25 Jan 2023 13:39:37 +0800
Subject: [PATCH 5/7] Changed text

---
 src/assets/scss/emote-upload/emote-upload.scss | 4 ++--
 src/views/emote-upload/EmoteUpload.vue         | 4 ++--
 2 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/src/assets/scss/emote-upload/emote-upload.scss b/src/assets/scss/emote-upload/emote-upload.scss
index 50cf81d0..1c63e29f 100644
--- a/src/assets/scss/emote-upload/emote-upload.scss
+++ b/src/assets/scss/emote-upload/emote-upload.scss
@@ -103,7 +103,7 @@
 					}
 
 					> .requirements {
-						font-size: 0.625rem;
+						font-size: 0.725rem;
 						margin-left: 4rem;
 						margin-right: auto;
 						padding-bottom: 0.5rem;
@@ -116,7 +116,7 @@
 						}
 
 						> p {
-							font-size: 0.8rem;
+							font-size: 0.9rem;
 						}
 					}
 
diff --git a/src/views/emote-upload/EmoteUpload.vue b/src/views/emote-upload/EmoteUpload.vue
index 5d64a6e6..18f7cf4a 100644
--- a/src/views/emote-upload/EmoteUpload.vue
+++ b/src/views/emote-upload/EmoteUpload.vue
@@ -93,8 +93,8 @@
 							<p>- 50 fps</p>
 						</div>
 						<div class="requirements">
-							* Max width is 384 px and max height is 128 px after processing. Image will be scaled down
-							according to the aspect ratio.
+							* Emote will be scaled to a max height of 128 px and/or a max width of 384 px, preserving
+							the aspect ratio.
 						</div>
 					</div>
 					<span />

From 39f6f7342664dc35a64d7e17112fe97b94d55bd4 Mon Sep 17 00:00:00 2001
From: WaterBoiledPizza <lazyman0615@gmail.com>
Date: Mon, 22 May 2023 15:01:36 +0800
Subject: [PATCH 6/7] EmoteUpload UI changes

---
 .../scss/emote-upload/emote-upload.scss       | 170 +++++++++++-------
 src/views/emote-upload/EmoteUpload.vue        |  82 +++++----
 2 files changed, 155 insertions(+), 97 deletions(-)

diff --git a/src/assets/scss/emote-upload/emote-upload.scss b/src/assets/scss/emote-upload/emote-upload.scss
index 1c63e29f..42cac66f 100644
--- a/src/assets/scss/emote-upload/emote-upload.scss
+++ b/src/assets/scss/emote-upload/emote-upload.scss
@@ -30,46 +30,81 @@
 			flex-direction: row;
 			height: 100%;
 			margin: 1em;
-			justify-content: space-between;
+			// justify-content: space-between;
 
 			@include themify() {
-				.file-upload {
+				> .inputs > span > .parent-emote {
 					background-color: darken(themed("backgroundColor"), 2);
+				}
+				> .image-upload > .image-box {
+					background-color: darken(themed("backgroundColor"), 2);
+					> .formats-viewer {
+						background-color: transparentize(lighten(themed("backgroundColor"), 4), 0.25);
+					}
 					&[dragOver="true"] {
 						background-color: transparentize(darken(themed("accent"), 8), 0.75);
 					}
 				}
-				> .image-upload > span > .parent-emote {
-					background-color: darken(themed("backgroundColor"), 2);
-				}
-				.formats-viewer {
-					background-color: transparentize(lighten(themed("backgroundColor"), 4), 0.25);
-				}
 			}
 
-			> .form-grid-item {
-				width: calc(100% / 3);
-			}
+			// > .inputs {
+			// 	width: calc(100% / 3);
+			// 	display: flex;
+			// 	flex-direction: column;
+			// 	margin-top: 1em;
+			// 	padding: 0.5em 1em;
+			// 	border-radius: 0.4em;
+
+			// 	> span {
+			// 		display: flex;
+			// 		align-items: center;
+			// 		width: 100%;
+			// 	}
+			// 	.parent-emote {
+			// 		padding: 1em;
+			// 		border-radius: 0.3em;
+			// 		display: flex;
+			// 		justify-content: space-between;
+			// 		align-items: center;
+			// 		box-shadow: 0 0 0.25em rgb(100, 70, 180);
+			// 		margin-bottom: 2.5em;
+			// 		> .as-child-notice {
+			// 			text-align: center;
+			// 			margin-left: 1em;
+			// 		}
+			// 	}
+
+			// 	.text-input {
+			// 		display: flex;
+			// 		flex-direction: column;
+			// 		max-width: 16em;
+			// 	}
+
+			// 	> form {
+			// 		.form-item {
+			// 			margin-top: 1em;
+			// 			margin-bottom: 1em;
+			// 		}
+
+			// 		> h4 {
+			// 			margin-bottom: 0.6em;
+			// 			opacity: 0.75;
+			// 		}
+			// 	}
+			// }
 
 			> .image-upload {
+				width: calc(100% / 3);
 				display: flex;
 				flex-direction: column;
 				justify-content: center;
 				align-items: center;
 				padding: 0.5em 1em;
-				margin-left: auto;
-				margin-right: auto;
+				margin-right: 1em;
 				border-radius: 0.4em;
+				min-width: 26em;
 
-				> span {
-					display: flex;
-					align-items: center;
-					justify-content: center;
-					width: 100%;
-					flex-grow: 1;
-				}
-
-				> div {
+				> .image-box {
 					display: flex;
 					flex-direction: column;
 					align-items: center;
@@ -82,15 +117,12 @@
 
 					&[dragOver="true"] {
 						h3,
+						a,
 						label {
 							pointer-events: none;
 						}
 					}
 
-					// > h3 {
-					// 	padding-top: 3.5rem;
-					// }
-
 					> a.acceptable-format-list {
 						cursor: pointer;
 						user-select: none;
@@ -102,34 +134,14 @@
 						}
 					}
 
-					> .requirements {
-						font-size: 0.725rem;
-						margin-left: 4rem;
-						margin-right: auto;
-						padding-bottom: 0.5rem;
-						width: 18rem;
-
-						> h3 {
-							padding-top: 1rem;
-							font-size: 1rem;
-							padding-bottom: 0.25rem;
-						}
-
-						> p {
-							font-size: 0.9rem;
-						}
-					}
-
 					> .formats-viewer {
-						top: 0;
-						position: relative;
+						position: absolute;
 						width: 20em;
 						display: flex;
 						flex-direction: column;
 						border-radius: 0.4em;
 						padding: 0.5em;
-						padding-left: 1em;
-						padding-right: 1em;
+						backdrop-filter: blur(4px);
 
 						.format {
 							display: flex;
@@ -145,15 +157,15 @@
 								margin-bottom: 0.25em;
 							}
 							[part="label"] {
-								width: 33.3333%;
+								width: 20%;
 							}
 							[part="animation"] {
 								text-align: center;
-								width: 33.3333%;
+								width: 40%;
 							}
 							[part="transparency"] {
 								text-align: center;
-								width: 33.3333%;
+								width: 40%;
 							}
 							[part="close-btn"] {
 								cursor: pointer;
@@ -163,17 +175,21 @@
 					}
 				}
 
-				.parent-emote {
-					padding: 1em;
-					border-radius: 0.3em;
-					display: flex;
-					justify-content: space-between;
-					align-items: center;
-					box-shadow: 0 0 0.25em rgb(100, 70, 180);
+				> .requirements {
+					font-size: 0.725rem;
+					// margin-left: 4rem;
+					// margin-right: auto;
+					padding-bottom: 0.5rem;
+					width: 18rem;
+
+					> h3 {
+						padding-top: 1rem;
+						font-size: 1rem;
+						padding-bottom: 0.25rem;
+					}
 
-					> .as-child-notice {
-						text-align: center;
-						margin-left: 1em;
+					> p {
+						font-size: 0.9rem;
 					}
 				}
 			}
@@ -193,16 +209,37 @@
 					height: 8rem;
 					border: 4px dashed currentColor;
 					border-radius: 0.25em;
+					object-fit: contain;
 				}
 			}
 
 			> .inputs {
+				width: calc(100% / 3);
 				display: flex;
 				flex-direction: column;
 				margin-top: 1em;
 				padding: 0.5em 1em;
 				border-radius: 0.4em;
 
+				> span {
+					display: flex;
+					align-items: center;
+					width: 100%;
+				}
+				.parent-emote {
+					padding: 1em;
+					border-radius: 0.3em;
+					display: flex;
+					justify-content: space-between;
+					align-items: center;
+					box-shadow: 0 0 0.25em rgb(100, 70, 180);
+					margin-bottom: 2.5em;
+					> .as-child-notice {
+						text-align: center;
+						margin-left: 1em;
+					}
+				}
+
 				.text-input {
 					display: flex;
 					flex-direction: column;
@@ -222,14 +259,21 @@
 				}
 			}
 
-			@media screen and (max-width: 1200px) {
+			@media screen and (max-width: 800px) {
 				flex-direction: column;
 				align-items: center;
 				> .image-upload {
 					align-items: center;
 				}
 				> .inputs {
-					align-items: center;
+					align-items: flex-start;
+					width: inherit;
+					.text-input {
+						max-width: 100%;
+					}
+					form {
+						width: 100%;
+					}
 				}
 			}
 		}
diff --git a/src/views/emote-upload/EmoteUpload.vue b/src/views/emote-upload/EmoteUpload.vue
index 18f7cf4a..e7fee1b7 100644
--- a/src/views/emote-upload/EmoteUpload.vue
+++ b/src/views/emote-upload/EmoteUpload.vue
@@ -10,6 +10,17 @@
 			<div class="overall-form">
 				<!-- Information Inputs -->
 				<div class="inputs form-grid-item">
+					<span>
+						<div v-if="parentEmote" class="parent-emote">
+							<img :src="getImage(parentEmote.host, ImageFormat.WEBP, 2)?.url" />
+							<div class="as-child-notice">
+								<i18n-t keypath="emote.upload.as_child" tag="p">
+									<span style="font-weight: 600">{{ parentEmote.name }}</span>
+								</i18n-t>
+							</div>
+						</div>
+					</span>
+
 					<h3>{{ t(txt.emoteDetails) }}</h3>
 
 					<form>
@@ -32,39 +43,28 @@
 				<div class="image-upload form-grid-item">
 					<div
 						:dragOver="dragOver"
-						class="file-upload"
+						class="image-box"
 						@drop.prevent="onDropFile"
 						@dragover.prevent
 						@dragenter="dragOver = true"
 						@dragleave="dragOver = false"
 					>
 						<h3>{{ t("emote.upload.image_upload") }}</h3>
+						<a class="acceptable-format-list" @click="formatsViewerOpen = !formatsViewerOpen">
+							{{ t("emote.upload.accepted_formats") }}
+							<Icon v-if="formatsViewerOpen" icon="close" />
+						</a>
 
-						<input id="file-upload" hidden type="file" :accept="mimeList" @change="onFileInputChange" />
-						<label for="file-upload">
-							<img ref="previewImage" />
-						</label>
-					</div>
-
-					<span>
-						<div v-if="parentEmote" class="parent-emote">
-							<img :src="getImage(parentEmote.host, ImageFormat.WEBP, 2)?.url" />
-							<div class="as-child-notice">
-								<i18n-t keypath="emote.upload.as_child" tag="p">
-									<span style="font-weight: 600">{{ parentEmote.name }}</span>
-								</i18n-t>
-							</div>
-						</div>
-					</span>
-				</div>
-				<div class="image-upload form-grid-item">
-					<div>
 						<!-- Formats Viewer -->
-						<div class="formats-viewer">
+						<div v-if="formatsViewerOpen" ref="formatsViewer" class="formats-viewer">
 							<div class="format" categories>
 								<div part="label">{{ t("emote.upload.filetype") }}</div>
 								<div part="animation">{{ t("emote.upload.animation") }}</div>
 								<div part="transparency">{{ t("emote.upload.transparency") }}</div>
+
+								<span part="close-btn" @click="formatsViewerOpen = false">
+									<Icon icon="close" />
+								</span>
 							</div>
 							<div v-for="f of acceptableFileTypes" :key="f.label" class="format" :format="f.mime">
 								<div part="label">{{ f.label }}</div>
@@ -83,21 +83,25 @@
 									/>
 									<Icon v-else icon="times" color="red" />
 								</div>
+								<span part="close-btn"></span>
 							</div>
 						</div>
-						<div class="requirements">
-							<h3>Up to:</h3>
-							<p>- 7 MB large</p>
-							<p>- 1000 x 1000 pixels big</p>
-							<p>- 1000 frames</p>
-							<p>- 50 fps</p>
-						</div>
-						<div class="requirements">
-							* Emote will be scaled to a max height of 128 px and/or a max width of 384 px, preserving
-							the aspect ratio.
-						</div>
+						<input id="file-upload" hidden type="file" :accept="mimeList" @change="onFileInputChange" />
+						<label for="file-upload">
+							<img ref="previewImage" />
+						</label>
+					</div>
+					<div class="requirements">
+						<h3>Up to:</h3>
+						<p>- 7 MB large</p>
+						<p>- 1000 x 1000 pixels big</p>
+						<p>- 1000 frames</p>
+						<p>- 50 fps</p>
+					</div>
+					<div class="requirements">
+						* Emote will be scaled to a max height of 128 px and/or a max width of 384 px, preserving the
+						aspect ratio.
 					</div>
-					<span />
 				</div>
 			</div>
 
@@ -123,10 +127,11 @@
 </template>
 
 <script setup lang="ts">
-import { computed, defineAsyncComponent, reactive, ref } from "vue";
+import { computed, defineAsyncComponent, onMounted, reactive, ref } from "vue";
 import { useI18n } from "vue-i18n";
 import { useRoute, useRouter } from "vue-router";
 import { useQuery } from "@vue/apollo-composable";
+import { onClickOutside } from "@vueuse/core";
 import { LocalStorageKeys } from "@store/lskeys";
 import { GetEmote, GetMinimalEmote } from "@/apollo/query/emote.query";
 import { ImageFormat, getImage } from "@/structures/Common";
@@ -168,6 +173,14 @@ if (parentID.value) {
 	onResult((res) => (parentEmote.value = res.data.emote));
 }
 
+// Formats viewer
+const formatsViewerOpen = ref(false);
+const formatsViewer = ref<HTMLElement | null>(null);
+
+onMounted(() => {
+	onClickOutside(formatsViewer, () => (formatsViewerOpen.value = false));
+});
+
 // Form
 const form = reactive({
 	name: "",
@@ -240,6 +253,7 @@ const upload = () => {
 	req.setRequestHeader("Content-Type", mime);
 	req.setRequestHeader("Content-Length", buf.value.byteLength.toString(10));
 	req.setRequestHeader("Authorization", `Bearer ${localStorage.getItem(LocalStorageKeys.TOKEN)}`);
+	req.withCredentials = true;
 	req.upload.onprogress = (progress) => (uploadProgress.value = (progress.loaded / progress.total) * 100);
 	req.onload = () => {
 		uploadProgress.value = 0;

From 47db480e45246db7e93f68ff601ed18227cc4b74 Mon Sep 17 00:00:00 2001
From: WaterBoiledPizza <lazyman0615@gmail.com>
Date: Mon, 22 May 2023 15:02:24 +0800
Subject: [PATCH 7/7] Removed unused lines

---
 .../scss/emote-upload/emote-upload.scss       | 46 -------------------
 1 file changed, 46 deletions(-)

diff --git a/src/assets/scss/emote-upload/emote-upload.scss b/src/assets/scss/emote-upload/emote-upload.scss
index 42cac66f..4b1ba92f 100644
--- a/src/assets/scss/emote-upload/emote-upload.scss
+++ b/src/assets/scss/emote-upload/emote-upload.scss
@@ -47,52 +47,6 @@
 				}
 			}
 
-			// > .inputs {
-			// 	width: calc(100% / 3);
-			// 	display: flex;
-			// 	flex-direction: column;
-			// 	margin-top: 1em;
-			// 	padding: 0.5em 1em;
-			// 	border-radius: 0.4em;
-
-			// 	> span {
-			// 		display: flex;
-			// 		align-items: center;
-			// 		width: 100%;
-			// 	}
-			// 	.parent-emote {
-			// 		padding: 1em;
-			// 		border-radius: 0.3em;
-			// 		display: flex;
-			// 		justify-content: space-between;
-			// 		align-items: center;
-			// 		box-shadow: 0 0 0.25em rgb(100, 70, 180);
-			// 		margin-bottom: 2.5em;
-			// 		> .as-child-notice {
-			// 			text-align: center;
-			// 			margin-left: 1em;
-			// 		}
-			// 	}
-
-			// 	.text-input {
-			// 		display: flex;
-			// 		flex-direction: column;
-			// 		max-width: 16em;
-			// 	}
-
-			// 	> form {
-			// 		.form-item {
-			// 			margin-top: 1em;
-			// 			margin-bottom: 1em;
-			// 		}
-
-			// 		> h4 {
-			// 			margin-bottom: 0.6em;
-			// 			opacity: 0.75;
-			// 		}
-			// 	}
-			// }
-
 			> .image-upload {
 				width: calc(100% / 3);
 				display: flex;