Merge pull request #280 from php-school/responsive-improvments

Responsive improvements

Author: AydinHassan

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 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"
@@ -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

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 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-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 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 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:mb-0 lg:w-auto xl:w-44"
               @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"

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 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>

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 -->