fix: improve ux

web-tech-tw · Nov 14, 2024 · 7f7f6ee · 7f7f6ee
1 parent 354dd35
commit 7f7f6ee
Show file tree

Hide file tree

Showing 5 changed files with 73 additions and 41 deletions.
diff --git a/src/views/RoomCreateView.vue b/src/views/RoomCreateView.vue
@@ -1,7 +1,9 @@
 <template>
-  <div>
-    <div :style="backgroundStyle" />
-    <div class="absolute top-36 flex w-full justify-center">
+  <div :style="backgroundStyle">
+    <div
+      class="flex flex-wrap w-full justify-center py-20"
+      :class="backdropClass"
+    >
       <div
         v-if="step === 1"
         class="w-full md:w-2/3 mx-3 my-5 py-4 px-8 bg-white shadow-lg rounded-lg"
@@ -228,11 +230,14 @@ const roomData = reactive({
 
 const backgroundStyle = computed(() => {
   const {backgroundImage} = roomData;
-  return {
-    "backgroundImage": `url(${backgroundImage})`,
-    "filter": "brightness(0.3)",
-    "height": "100vh",
-  };
+  return !!backgroundImage ? {
+    backgroundImage: `url(${backgroundImage})`,
+  } : {};
+});
+
+const backdropClass = computed(() => {
+  const {backgroundImage} = roomData;
+  return !!backgroundImage ? "backdrop-brightness-50" : "";
 });
 
 const onClickNext = () => {

diff --git a/src/views/RoomListView.vue b/src/views/RoomListView.vue
@@ -28,7 +28,7 @@
           :key="j"
           class="border-gray-400 flex flex-row mb-2"
         >
-          <div class="rounded-md flex flex-1 items-center p-4 border-2 mt-3 border-lime-400">
+          <div class="rounded-md flex flex-1 items-center p-4 border-2 mt-3 border-lime-400 justify-between">
             <img
               :alt="i.label"
               :src="i.backgroundImage"

diff --git a/src/views/RoomManageView.vue b/src/views/RoomManageView.vue
@@ -1,25 +1,25 @@
 <template>
-  <div>
-    <div :style="backgroundStyle" />
+  <div :style="backgroundStyle">
     <div
       v-if="isDead"
-      class="absolute top-36 flex flex-col w-full"
+      class="flex flex-wrap w-full justify-center bg-white py-20"
     >
       <div class="text-center text-red-500">
         發生錯誤
       </div>
     </div>
     <div
       v-else-if="isLoad"
-      class="absolute top-36 flex flex-col w-full"
+      class="flex flex-wrap w-full justify-center bg-white py-20"
     >
       <div class="flex justify-center my-16">
         <loading-circle-icon class="h-8 w-8 animate-spin text-lime-600" />
       </div>
     </div>
     <div
       v-else
-      class="absolute top-36 flex w-full justify-center"
+      class="flex flex-wrap w-full justify-center py-20"
+      :class="backdropClass"
     >
       <div class="max-w-md py-4 px-8 bg-white shadow-lg rounded-lg my-20">
         <div class="flex justify-center md:justify-end -mt-16">
@@ -143,17 +143,29 @@ const inviteUrl = computed(() => {
 });
 
 const descriptionHtml = computed(() => {
+  const escapeMap = {
+    "&": "&amp;",
+    "<": "&lt;",
+    ">": "&gt;",
+    "\"": "&quot;",
+    "'": "&#039;",
+  };
   const {description} = roomData;
-  return description?.replaceAll("\n", "<br />");
+  return description?.
+    replace(/[&<>"']/g, (i) => escapeMap[i]).
+    replaceAll("\n", "<br />");
 });
 
 const backgroundStyle = computed(() => {
   const {backgroundImage} = roomData;
-  return {
-    "backgroundImage": `url(${backgroundImage})`,
-    "filter": "brightness(0.3)",
-    "height": "100vh",
-  };
+  return !!backgroundImage ? {
+    backgroundImage: `url(${backgroundImage})`,
+  } : {};
+});
+
+const backdropClass = computed(() => {
+  const {backgroundImage} = roomData;
+  return !!backgroundImage ? "backdrop-brightness-50" : "";
 });
 
 const onClickCopyInviteUrl = async () => {

diff --git a/src/views/RoomSubmissionView.vue b/src/views/RoomSubmissionView.vue
@@ -1,25 +1,25 @@
 <template>
-  <div>
-    <div :style="backgroundStyle" />
+  <div :style="backgroundStyle">
     <div
       v-if="isDead"
-      class="absolute top-36 flex flex-col w-full"
+      class="flex flex-wrap w-full justify-center bg-white py-20"
     >
       <div class="text-center text-red-500">
         發生錯誤
       </div>
     </div>
     <div
       v-else-if="isLoad"
-      class="absolute top-36 flex flex-col w-full"
+      class="flex flex-wrap w-full justify-center bg-white py-20"
     >
       <div class="flex justify-center my-16">
         <loading-circle-icon class="h-8 w-8 animate-spin text-lime-600" />
       </div>
     </div>
     <div
       v-else
-      class="absolute top-36 flex flex-col w-full justify-start"
+      class="flex flex-wrap w-full justify-center py-20"
+      :class="backdropClass"
     >
       <div class="w-full flex justify-center">
         <div class="max-w-md py-4 px-8 bg-white shadow-lg rounded-lg mt-20 mb-8">
@@ -183,11 +183,14 @@ const isValid = computed(() => {
 
 const backgroundStyle = computed(() => {
   const {backgroundImage} = roomData;
-  return {
-    "backgroundImage": `url(${backgroundImage})`,
-    "filter": "brightness(0.3)",
-    "height": "100vh",
-  };
+  return !!backgroundImage ? {
+    backgroundImage: `url(${backgroundImage})`,
+  } : {};
+});
+
+const backdropClass = computed(() => {
+  const {backgroundImage} = roomData;
+  return !!backgroundImage ? "backdrop-brightness-50" : "";
 });
 
 watch(submissionCode, (v) => {

diff --git a/src/views/TicketView.vue b/src/views/TicketView.vue
@@ -1,25 +1,25 @@
 <template>
-  <div>
-    <div :style="backgroundStyle" />
+  <div :style="backgroundStyle">
     <div
       v-if="isDead"
-      class="absolute top-36 flex flex-col w-full"
+      class="flex flex-wrap w-full justify-center bg-white py-20"
     >
       <div class="text-center text-red-500">
         發生錯誤
       </div>
     </div>
     <div
       v-else-if="isLoad"
-      class="absolute top-36 flex flex-col w-full"
+      class="flex flex-wrap w-full justify-center bg-white py-20"
     >
       <div class="flex justify-center my-16">
         <loading-circle-icon class="h-8 w-8 animate-spin text-lime-600" />
       </div>
     </div>
     <div
       v-else
-      class="absolute top-36 flex w-full justify-center"
+      class="flex flex-wrap w-full justify-center py-20"
+      :class="backdropClass"
     >
       <div class="max-w-md py-4 px-8 bg-white shadow-lg rounded-lg my-20">
         <div class="flex justify-center md:justify-end -mt-16">
@@ -145,17 +145,29 @@ const isSubmmited = computed(() => {
 });
 
 const descriptionHtml = computed(() => {
+  const escapeMap = {
+    "&": "&amp;",
+    "<": "&lt;",
+    ">": "&gt;",
+    "\"": "&quot;",
+    "'": "&#039;",
+  };
   const {description} = roomData;
-  return description?.replaceAll("\n", "<br />");
+  return description?.
+    replace(/[&<>"']/g, (i) => escapeMap[i]).
+    replaceAll("\n", "<br />");
 });
 
 const backgroundStyle = computed(() => {
   const {backgroundImage} = roomData;
-  return {
-    "backgroundImage": `url(${backgroundImage})`,
-    "filter": "brightness(0.3)",
-    "height": "100vh",
-  };
+  return !!backgroundImage ? {
+    backgroundImage: `url(${backgroundImage})`,
+  } : {};
+});
+
+const backdropClass = computed(() => {
+  const {backgroundImage} = roomData;
+  return !!backgroundImage ? "backdrop-brightness-50" : "";
 });
 
 const onClickCopy = async () => {