Improved Pass Notification and Verify Button

php-school · Feb 12, 2024 · 945369c · 945369c
1 parent daab7c4
commit 945369c
Show file tree

Hide file tree

Showing 2 changed files with 27 additions and 20 deletions.
diff --git a/assets/components/Online/ExerciseVerify.vue b/assets/components/Online/ExerciseVerify.vue
@@ -146,8 +146,8 @@ const verifySolution = () => {
       <CommandLineIcon v-if="!loadingRun" v-cloak class="ml-2 h-5 w-5" />
     </button>
 
-    <div class="flex h-[48px] w-full justify-between rounded bg-gradient-to-r from-pink-600 to-purple-500 px-3 md:w-44 md:justify-center">
-      <button class="mr-0 mt-0 flex h-[48px] w-full items-center text-sm text-white transition-all duration-300 ease-in">
+    <div class="flex h-[48px] w-full justify-between rounded bg-gradient-to-r from-pink-600 to-purple-500 md:w-44 md:justify-center">
+      <button class="mr-0 mt-0 flex h-[48px] w-full items-center text-sm text-white transition-all duration-300 ease-in outline-none pl-3">
         <span v-if="currentAction === 'verify'" class="flex flex-1 items-center md:justify-center" @click="verifySolution">
           <ArrowPathIcon v-cloak v-show="loadingVerify" class="hidden h-4 w-4 animate-spin md:flex" />
           <span :class="{ 'md:hidden': loadingVerify }">Verify</span>
@@ -160,7 +160,7 @@ const verifySolution = () => {
           <CommandLineIcon v-cloak class="ml-2 h-5 w-5" />
         </span>
       </button>
-      <Menu as="div" class="relative text-xs uppercase text-white" v-slot="{ open }">
+      <Menu as="div" class="relative text-xs uppercase text-white pr-3" v-slot="{ open }">
         <div class="group">
           <MenuButton class="h-[48px]" :disabled="loadingVerify || loadingRun">
             <ChevronDownIcon

diff --git a/assets/components/Online/PassNotification.vue b/assets/components/Online/PassNotification.vue
@@ -1,5 +1,5 @@
 <script setup>
-import { computed, onMounted, onUnmounted, ref } from "vue";
+import { computed, onMounted, onBeforeUnmount, ref } from "vue";
 import Modal from "./ModalDialog.vue";
 import FileTree from "./FileTree.vue";
 import AceEditor from "./AceEditor.vue";
@@ -34,9 +34,10 @@ onMounted(() => {
   };
 
   document.addEventListener("keyup", el.value.escapeEventHandler, true);
+  el.value.focus();
 });
 
-onUnmounted(() => {
+onBeforeUnmount(() => {
   document.removeEventListener("keyup", el.value.escapeEventHandler);
 });
 
@@ -46,11 +47,11 @@ const officialSolutionFileTree = ref(
   props.officialSolution === null
     ? []
     : props.officialSolution.map((file, i) => {
-        return {
-          id: i,
-          name: file.file_path,
-        };
-      }),
+      return {
+        id: i,
+        name: file.file_path,
+      };
+    }),
 );
 
 const fileTreeStyles = {
@@ -75,6 +76,7 @@ const files = computed(() => {
 
 const dismissPassNotification = () => {
   emit("close");
+  console.log("Here");
 };
 
 const showOfficialSolution = () => {
@@ -93,8 +95,9 @@ const isSelectedFile = (file) => {
 <template>
   <div ref="el">
     <div v-cloak class="fixed inset-0 z-40 bg-gray-900 bg-opacity-70" />
-    <div v-click-away="dismissPassNotification" v-cloak id="pass-notification" class="absolute top-4 z-40 flex w-full justify-center shadow-lg">
-      <div class="mx-auto rounded-lg bg-gradient-to-r from-pink-500 to-purple-500 px-3 py-3 sm:px-6 lg:px-8">
+    <div v-click-away="dismissPassNotification" v-cloak id="pass-notification"
+      class="absolute top-4 z-40 flex w-full justify-center shadow-lg">
+      <div class="mx-2 md:mx-auto rounded-lg bg-gradient-to-r from-pink-500 to-purple-500 px-3 py-3 sm:px-6 lg:px-8">
         <div class="flex flex-wrap items-center justify-center">
           <div class="flex items-center">
             <span class="flex rounded-lg p-2">
@@ -105,17 +108,19 @@ const isSelectedFile = (file) => {
               <span class="hidden md:inline">Congratulations! your solution passed.</span>
             </p>
           </div>
-          <div v-if="hasOfficialSolution" class="order-3 mt-2 w-full flex-shrink-0 sm:order-2 sm:mt-0 sm:w-auto">
-            <button @click="showOfficialSolution" class="flex items-center justify-center px-2 py-2 text-sm font-bold text-white underline">See the official solution</button>
+          <div v-if="hasOfficialSolution" class="w-full flex-shrink-0 flex justify-center sm:mt-0 md:w-auto">
+            <button @click="showOfficialSolution" class="px-2 py-2 text-sm font-bold text-white underline">See the official solution</button>
           </div>
-          <div v-if="nextExerciseLink" class="order-3 mt-2 flex w-full flex-shrink-0 sm:order-2 sm:mt-0 sm:w-auto">
+          <div v-if="nextExerciseLink" class="w-full flex-shrink-0 flex justify-center sm:mt-0 md:w-auto">
             <span v-if="hasOfficialSolution" class="flex items-center justify-center text-sm text-white">or</span>
-            <router-link id="next-exercise-link" :to="nextExerciseLink" class="flex items-center justify-center px-2 py-2 text-sm font-bold text-white underline">
+            <router-link id="next-exercise-link" :to="nextExerciseLink"
+              class="flex items-center justify-center px-2 py-2 text-sm font-bold text-white underline">
               Continue to the next exercise &rarr;
             </router-link>
           </div>
-          <div class="order-2 flex-shrink-0 sm:order-3 sm:ml-3">
-            <button @click="dismissPassNotification" type="button" class="-mr-1 flex rounded-md p-2 hover:bg-pink-600 focus:outline-none focus:ring-2 focus:ring-white sm:-mr-2">
+          <div class="flex-shrink-0 sm:ml-3">
+            <button @click="dismissPassNotification" type="button"
+              class="-mr-1 flex rounded-md p-2 hover:bg-pink-600 focus:outline-none focus:ring-2 focus:ring-white sm:-mr-2">
               <span class="sr-only">Dismiss</span>
               <XMarkIcon class="h-6 w-6 text-white" />
             </button>
@@ -134,11 +139,13 @@ const isSelectedFile = (file) => {
         <template #body>
           <div class="flex">
             <div class="w-1/3 border-r border-solid border-r-gray-600 bg-gray-900">
-              <file-tree :files="officialSolutionFileTree" :file-select-function="selectSolutionFile" :initial-selected-item="officialSolutionFileTree[0]" :custom-styles="fileTreeStyles" />
+              <file-tree :files="officialSolutionFileTree" :file-select-function="selectSolutionFile"
+                :initial-selected-item="officialSolutionFileTree[0]" :custom-styles="fileTreeStyles" />
             </div>
             <div class="w-2/3">
               <template v-for="file in files" :key="file.name">
-                <AceEditor v-show="isSelectedFile(file)" v-model:value="file.content" :min-lines="20" :max-lines="20" readonly></AceEditor>
+                <AceEditor v-show="isSelectedFile(file)" v-model:value="file.content" :min-lines="20" :max-lines="20"
+                  readonly></AceEditor>
               </template>
             </div>
           </div>