From 3d8b2b4efc3b3af59b91f6df871cdda9fd46cc08 Mon Sep 17 00:00:00 2001
From: Aydin Hassan <aydin@hotmail.co.uk>
Date: Sun, 10 Mar 2024 16:03:47 +0100
Subject: [PATCH 1/3] Fix mobile nav toggle

---
 assets/components/Website/SiteNav.vue | 5 ++---
 1 file changed, 2 insertions(+), 3 deletions(-)

diff --git a/assets/components/Website/SiteNav.vue b/assets/components/Website/SiteNav.vue
index 63941386..79069d6b 100644
--- a/assets/components/Website/SiteNav.vue
+++ b/assets/components/Website/SiteNav.vue
@@ -1,6 +1,5 @@
 <script setup>
 import { Menu, MenuButton, MenuItem, MenuItems } from "@headlessui/vue";
-import Button from "./PrimaryButton.vue";
 import GitHubIcon from "../Icons/GitHubIcon.vue";
 import { ChevronDownIcon } from "@heroicons/vue/20/solid";
 import SiteLogo from "./SiteLogo.vue";
@@ -147,9 +146,9 @@ const slackModalOpen = ref(false);
 
       <!-- Mobile Menu Button -->
       <div class="block sm:hidden">
-        <Button @click="mobileMenuVisible = !mobileMenuVisible" class="text-white hover:text-gray-300 focus:outline-none">
+        <button @click="mobileMenuVisible = !mobileMenuVisible" class="text-white hover:text-gray-300 focus:outline-none">
           <img src="../../img/cloud/bars-solid-pink.svg" alt="" class="h-6 w-6" />
-        </Button>
+        </button>
       </div>
 
       <!-- Sign In Button -->

From e872d8f0ef745cb6d49c033df6b85b1c5ac96458 Mon Sep 17 00:00:00 2001
From: Aydin Hassan <aydin@hotmail.co.uk>
Date: Sun, 10 Mar 2024 16:04:05 +0100
Subject: [PATCH 2/3] Improve status bar responsiveness

---
 assets/components/Online/ExerciseVerify.vue   |  4 ++--
 .../components/Online/PageExerciseEditor.vue  | 22 +++++++++----------
 assets/components/Online/ProgressBar.vue      | 15 +++++++++----
 3 files changed, 24 insertions(+), 17 deletions(-)

diff --git a/assets/components/Online/ExerciseVerify.vue b/assets/components/Online/ExerciseVerify.vue
index 394163da..d6374c8e 100644
--- a/assets/components/Online/ExerciseVerify.vue
+++ b/assets/components/Online/ExerciseVerify.vue
@@ -130,7 +130,7 @@ const verifySolution = () => {
 
 <template>
   <alert type="error" @close="showRateLimitError = false" :show="showRateLimitError" :timeout="4000" message="Too many requests. Please try again in a few minutes."></alert>
-  <div class="flex h-[48px] flex-1 items-center gap-y-2">
+  <div class="flex h-[48px] flex-1 md:flex-none items-center gap-y-2">
     <button
       id="run"
       class="mr-2 mt-0 hidden h-[48px] w-44 items-center justify-center rounded border-2 border-solid border-[#E91E63] px-4 text-sm text-white hover:bg-[#E91E63] md:flex"
@@ -156,7 +156,7 @@ const verifySolution = () => {
           <CommandLineIcon v-cloak class="ml-2 h-5 w-5" />
         </span>
       </button>
-      <Menu as="div" class="relative pr-3 text-xs uppercase text-white" v-slot="{ open }">
+      <Menu as="div" class="relative mr-3 text-xs uppercase text-white" v-slot="{ open }">
         <div class="group">
           <MenuButton class="h-[48px]" :disabled="loadingVerify || loadingRun">
             <ChevronDownIcon
diff --git a/assets/components/Online/PageExerciseEditor.vue b/assets/components/Online/PageExerciseEditor.vue
index e8ec013b..f1457424 100644
--- a/assets/components/Online/PageExerciseEditor.vue
+++ b/assets/components/Online/PageExerciseEditor.vue
@@ -438,31 +438,31 @@ const deleteFileOrFolder = async (file) => {
           </TransitionRoot>
         </div>
         <!-- start footer -->
-        <div class="flex flex-wrap items-center justify-between gap-y-3 border-t border-solid border-gray-600 p-2 md:mb-0 md:gap-y-0">
-          <editor-breadcrumbs :current-exercise="currentExercise" class="order-3 md:order-1"></editor-breadcrumbs>
+        <div class="flex flex-wrap lg:flex-nowrap items-center justify-between gap-y-3 border-t border-solid border-gray-600 p-2 md:mb-0">
+          <editor-breadcrumbs :current-exercise="currentExercise" class="order-3 lg:order-1 mr-3"></editor-breadcrumbs>
           <progress-bar></progress-bar>
-          <div class="order-1 flex w-full items-start justify-center gap-x-2 md:order-3 md:w-auto md:gap-x-0">
+          <div class="order-1 flex w-full items-start justify-end gap-x-2 lg:order-3 lg:w-auto md:gap-x-0">
             <button
               ref="openFileBrowserButton"
-              class="mr-0 flex h-[48px] w-auto items-center justify-center rounded border-2 border-solid border-[#E91E63] px-4 text-sm text-white hover:bg-[#E91E63] md:mr-2 md:hidden md:w-44 lg:mb-0"
+              class="mr-0 flex h-[48px] w-auto items-center justify-center rounded border-2 border-solid border-[#E91E63] px-4 text-sm text-white hover:bg-[#E91E63] md:mr-2 md:hidden lg:mb-0"
               @click.stop="openFileBrowser = !openFileBrowser"
             >
-              <FolderIcon v-cloak class="h-5 w-5 md:ml-2" />
+              <FolderIcon v-cloak class="h-5 w-5 xl:ml-2" />
             </button>
             <button
-              class="mr-0 flex h-[48px] w-auto items-center justify-center rounded border-2 border-solid border-[#E91E63] px-4 text-sm text-white hover:bg-[#E91E63] md:mr-2 md:w-44 lg:mb-0"
+              class="mr-0 flex h-[48px] w-auto items-center justify-center rounded border-2 border-solid border-[#E91E63] px-4 text-sm text-white hover:bg-[#E91E63] md:mr-2 md:w-44 lg:w-auto xl:w-44 lg:mb-0"
               @click="openComposerModal = true"
             >
-              <span class="hidden md:flex">Composer deps</span>
-              <CircleStackIcon v-cloak class="h-5 w-5 md:ml-2" />
+              <span class="hidden md:flex lg:hidden xl:flex">Composer deps</span>
+              <CircleStackIcon v-cloak class="h-5 w-5 md:ml-2 lg:ml-0 xl:ml-2" />
             </button>
             <button
               id="show-problem"
-              class="mr-0 mt-0 flex h-[48px] w-auto items-center justify-center rounded border-2 border-solid border-[#E91E63] px-4 text-sm text-white hover:bg-[#E91E63] md:mr-2 md:w-44"
+              class="mr-0 mt-0 flex h-[48px] w-auto items-center justify-center rounded border-2 border-solid border-[#E91E63] px-4 text-sm text-white hover:bg-[#E91E63] md:mr-2 md:w-44 lg:w-auto xl:w-44"
               @click="openProblemModal = true"
             >
-              <span class="hidden md:flex">Show problem</span>
-              <MapIcon v-cloak class="h-5 w-5 md:ml-2" />
+              <span class="hidden md:flex lg:hidden xl:flex">Show problem</span>
+              <MapIcon v-cloak class="h-5 w-5 md:ml-2 lg:ml-0 xl:ml-2" />
             </button>
             <exercise-verify
               @verify-loading="verifyLoading"
diff --git a/assets/components/Online/ProgressBar.vue b/assets/components/Online/ProgressBar.vue
index 54f403c9..f8d8320d 100644
--- a/assets/components/Online/ProgressBar.vue
+++ b/assets/components/Online/ProgressBar.vue
@@ -7,14 +7,21 @@ import { useWorkshopStore } from "../../stores/workshops";
 const workshopStore = useWorkshopStore();
 
 const percentComplete = computed(() => {
-  return (studentStore.totalCompleted() / workshopStore.totalExercises) * 100;
+    let percent = (studentStore.totalCompleted() / workshopStore.totalExercises) * 100;
+
+    //looks weird when the progressbar is smaller
+    if (percent < 7) {
+        percent = 7;
+    }
+
+    return percent;
 });
 </script>
 
 <template>
-  <div class="order-2 flex w-full items-center lg:w-1/6">
-    <div class="relative mt-0 flex h-2 flex-1 items-center justify-center rounded-full bg-gray-200 bg-gray-700 md:h-5">
-      <div class="absolute left-0 h-2 rounded-full bg-pink-500 md:h-5" :style="{ width: percentComplete + '%' }"></div>
+  <div class="order-2 md:order-3 flex w-full md:flex-1 items-center lg:w-1/6 lg:flex-none">
+    <div class="relative mt-0 flex h-2 flex-1 items-center justify-center rounded-full bg-gray-200 bg-gray-700 md:h-5 z-10">
+      <div class="absolute left-0 h-2 rounded-full bg-pink-500 md:h-5 z-0" :style="{ width: percentComplete + '%' }"></div>
       <p class="absolute mx-auto ml-2 hidden items-center font-mono text-xs font-bold text-white md:inline-flex">{{ studentStore.totalCompleted() }}/{{ workshopStore.totalExercises }} Completed</p>
     </div>
     <p class="mx-auto ml-2 mr-2 items-center font-mono text-xs text-white md:hidden">{{ studentStore.totalCompleted() }}/{{ workshopStore.totalExercises }} Completed</p>

From c62958b86bc282c570af08b13ba19ad8fa697e6e Mon Sep 17 00:00:00 2001
From: Aydin Hassan <aydin@hotmail.co.uk>
Date: Sun, 10 Mar 2024 16:05:04 +0100
Subject: [PATCH 3/3] prettier

---
 assets/components/Online/ExerciseVerify.vue    |  2 +-
 .../components/Online/PageExerciseEditor.vue   |  8 ++++----
 assets/components/Online/ProgressBar.vue       | 18 +++++++++---------
 3 files changed, 14 insertions(+), 14 deletions(-)

diff --git a/assets/components/Online/ExerciseVerify.vue b/assets/components/Online/ExerciseVerify.vue
index d6374c8e..91971f8a 100644
--- a/assets/components/Online/ExerciseVerify.vue
+++ b/assets/components/Online/ExerciseVerify.vue
@@ -130,7 +130,7 @@ const verifySolution = () => {
 
 <template>
   <alert type="error" @close="showRateLimitError = false" :show="showRateLimitError" :timeout="4000" message="Too many requests. Please try again in a few minutes."></alert>
-  <div class="flex h-[48px] flex-1 md:flex-none items-center gap-y-2">
+  <div class="flex h-[48px] flex-1 items-center gap-y-2 md:flex-none">
     <button
       id="run"
       class="mr-2 mt-0 hidden h-[48px] w-44 items-center justify-center rounded border-2 border-solid border-[#E91E63] px-4 text-sm text-white hover:bg-[#E91E63] md:flex"
diff --git a/assets/components/Online/PageExerciseEditor.vue b/assets/components/Online/PageExerciseEditor.vue
index f1457424..3602c148 100644
--- a/assets/components/Online/PageExerciseEditor.vue
+++ b/assets/components/Online/PageExerciseEditor.vue
@@ -438,10 +438,10 @@ const deleteFileOrFolder = async (file) => {
           </TransitionRoot>
         </div>
         <!-- start footer -->
-        <div class="flex flex-wrap lg:flex-nowrap items-center justify-between gap-y-3 border-t border-solid border-gray-600 p-2 md:mb-0">
-          <editor-breadcrumbs :current-exercise="currentExercise" class="order-3 lg:order-1 mr-3"></editor-breadcrumbs>
+        <div class="flex flex-wrap items-center justify-between gap-y-3 border-t border-solid border-gray-600 p-2 md:mb-0 lg:flex-nowrap">
+          <editor-breadcrumbs :current-exercise="currentExercise" class="order-3 mr-3 lg:order-1"></editor-breadcrumbs>
           <progress-bar></progress-bar>
-          <div class="order-1 flex w-full items-start justify-end gap-x-2 lg:order-3 lg:w-auto md:gap-x-0">
+          <div class="order-1 flex w-full items-start justify-end gap-x-2 md:gap-x-0 lg:order-3 lg:w-auto">
             <button
               ref="openFileBrowserButton"
               class="mr-0 flex h-[48px] w-auto items-center justify-center rounded border-2 border-solid border-[#E91E63] px-4 text-sm text-white hover:bg-[#E91E63] md:mr-2 md:hidden lg:mb-0"
@@ -450,7 +450,7 @@ const deleteFileOrFolder = async (file) => {
               <FolderIcon v-cloak class="h-5 w-5 xl:ml-2" />
             </button>
             <button
-              class="mr-0 flex h-[48px] w-auto items-center justify-center rounded border-2 border-solid border-[#E91E63] px-4 text-sm text-white hover:bg-[#E91E63] md:mr-2 md:w-44 lg:w-auto xl:w-44 lg:mb-0"
+              class="mr-0 flex h-[48px] w-auto items-center justify-center rounded border-2 border-solid border-[#E91E63] px-4 text-sm text-white hover:bg-[#E91E63] md:mr-2 md:w-44 lg:mb-0 lg:w-auto xl:w-44"
               @click="openComposerModal = true"
             >
               <span class="hidden md:flex lg:hidden xl:flex">Composer deps</span>
diff --git a/assets/components/Online/ProgressBar.vue b/assets/components/Online/ProgressBar.vue
index f8d8320d..e3c165cd 100644
--- a/assets/components/Online/ProgressBar.vue
+++ b/assets/components/Online/ProgressBar.vue
@@ -7,21 +7,21 @@ import { useWorkshopStore } from "../../stores/workshops";
 const workshopStore = useWorkshopStore();
 
 const percentComplete = computed(() => {
-    let percent = (studentStore.totalCompleted() / workshopStore.totalExercises) * 100;
+  let percent = (studentStore.totalCompleted() / workshopStore.totalExercises) * 100;
 
-    //looks weird when the progressbar is smaller
-    if (percent < 7) {
-        percent = 7;
-    }
+  //looks weird when the progressbar is smaller
+  if (percent < 7) {
+    percent = 7;
+  }
 
-    return percent;
+  return percent;
 });
 </script>
 
 <template>
-  <div class="order-2 md:order-3 flex w-full md:flex-1 items-center lg:w-1/6 lg:flex-none">
-    <div class="relative mt-0 flex h-2 flex-1 items-center justify-center rounded-full bg-gray-200 bg-gray-700 md:h-5 z-10">
-      <div class="absolute left-0 h-2 rounded-full bg-pink-500 md:h-5 z-0" :style="{ width: percentComplete + '%' }"></div>
+  <div class="order-2 flex w-full items-center md:order-3 md:flex-1 lg:w-1/6 lg:flex-none">
+    <div class="relative z-10 mt-0 flex h-2 flex-1 items-center justify-center rounded-full bg-gray-200 bg-gray-700 md:h-5">
+      <div class="absolute left-0 z-0 h-2 rounded-full bg-pink-500 md:h-5" :style="{ width: percentComplete + '%' }"></div>
       <p class="absolute mx-auto ml-2 hidden items-center font-mono text-xs font-bold text-white md:inline-flex">{{ studentStore.totalCompleted() }}/{{ workshopStore.totalExercises }} Completed</p>
     </div>
     <p class="mx-auto ml-2 mr-2 items-center font-mono text-xs text-white md:hidden">{{ studentStore.totalCompleted() }}/{{ workshopStore.totalExercises }} Completed</p>