Merge pull request #275 from php-school/more-mobile-improvements

More mobile improvements

assets/components/Online/ConfirmDialog.vue

@@ -89,7 +89,7 @@ defineExpose({
 <template>
   <focus-trap v-model:active="focusActive" :initial-focus="() => confirmButton">
     <div v-show="isOpen" class="fixed inset-0 z-40 flex h-full w-full flex-col justify-start rounded-lg bg-gray-800 bg-opacity-80">
-      <div class="bg-grey-800 flex h-full w-full items-center justify-center drop-shadow-xl">
+      <div class="bg-grey-800 flex h-full w-full items-center justify-center p-2 drop-shadow-xl md:p-0">
         <div class="max-h-[calc(1/2*100%)] max-w-sm rounded-lg bg-gray-900">
           <div class="items-top flex flex-none justify-between rounded-t border-b border-solid border-slate-600 p-8">
             <div class="flex items-center">
@@ -105,20 +105,20 @@ defineExpose({
             </div>
           </div>
           <div class="flex-none rounded-b border-solid border-slate-600 p-6">
-            <div class="flex justify-end">
+            <div class="flex justify-end gap-x-2">
               <button
                 v-if="showCancel"
                 @click="decline"
                 type="button"
-                class="inline-flex w-full items-center justify-center rounded-full border border-pink-600 px-8 py-2 text-base font-medium text-gray-400 shadow-sm hover:bg-pink-600 hover:text-white focus:outline-none focus:outline-none focus:ring focus:ring-pink-800 sm:ml-3 sm:w-auto sm:text-sm"
+                class="inline-flex w-full items-center justify-center rounded-full border border-pink-600 px-8 py-2 text-sm font-medium text-gray-400 shadow-sm hover:bg-pink-600 hover:text-white focus:outline-none focus:outline-none focus:ring focus:ring-pink-800 sm:ml-3 sm:w-auto md:text-base"
               >
                 {{ cancelMessage }}
               </button>
               <button
                 ref="confirmButton"
                 @click="confirm"
                 type="button"
-                class="inline-flex w-full items-center justify-center rounded-full border border-transparent bg-pink-600 px-8 py-2 text-base font-medium text-white shadow-sm hover:bg-pink-700 focus:outline-none focus:outline-none focus:ring focus:ring-pink-800 sm:ml-3 sm:w-auto sm:text-sm"
+                class="inline-flex w-full items-center justify-center rounded-full border border-transparent bg-pink-600 px-8 py-2 text-sm font-medium text-white shadow-sm hover:bg-pink-700 focus:outline-none focus:outline-none focus:ring focus:ring-pink-800 sm:ml-3 sm:w-auto md:text-base"
               >
                 {{ okMessage }}
               </button>

assets/components/Online/EditorBreadcrumbs.vue

@@ -16,7 +16,7 @@ const exerciseCompleted = computed(() => {
 </script>
 
 <template>
-  <nav class="flex w-full md:w-auto justify-center" aria-label="Breadcrumb">
+  <nav class="flex w-full justify-center md:w-auto" aria-label="Breadcrumb">
     <ol class="inline-flex items-center space-x-1 font-mono md:space-x-3">
       <li class="inline-flex items-center">
         <router-link to="/online" class="inline-flex items-center text-sm font-medium text-white hover:text-pink-500">

assets/components/Online/EditorTabs.vue

@@ -30,20 +30,20 @@ const changeTab = (tab) => {
 
 <template>
   <div class="tabs flex flex-1 flex-col">
-    <ul class="tabs list-reset flex flex-none justify-start border-solid border-gray-600">
+    <ul class="tabs list-reset flex flex-none justify-start">
       <li
         v-for="(tab, index) in tabList"
         :key="index"
         @click="changeTab(index)"
         class="inline-block flex items-center justify-between border-r border-solid border-r-gray-600 pl-2 pr-1 text-xs text-white no-underline hover:text-pink-500"
-        :class="[activeTab === index ? '-mt-[1px] border-t border-t-pink-600' : 'border-b border-b-gray-600']"
+        :class="[activeTab === index ? 'border-t border-t-pink-600' : 'border-b border-t border-gray-600 ']"
       >
         <a href="#" class="py-6 pl-1 text-gray-300 hover:no-underline" :class="[activeTab === index ? 'text-pink-600' : '']">
           {{ tab }}
         </a>
         <XMarkIcon v-show="disableClose === false" @click.stop="closeTab(tab)" class="ml-2 mr-1 h-3 w-3 cursor-pointer text-zinc-400 hover:text-white" />
       </li>
-      <li class="flex-1 border-b border-solid border-gray-600"></li>
+      <li class="flex-1 border-b border-t border-solid border-gray-600"></li>
     </ul>
     <template v-for="(tab, index) in tabList">
       <div class="tabs-panel flex h-full flex-1" :key="index" v-if="index === activeTab">

assets/components/Online/ExerciseEntry.vue

@@ -47,7 +47,7 @@ const isNextWorkshop = computed(() => {
 
 <template>
   <li @click="selectExercise" class="group flex flex-row hover:bg-gray-600 last:hover:rounded-b-lg">
-    <div class="flex flex-1 cursor-pointer select-none items-center p-4">
+    <div class="hidden flex-1 cursor-pointer select-none items-center p-4 md:flex">
       <div class="mr-4 flex h-10 w-10 flex-col items-center justify-center">
         <a href="#" class="relative block">
           <img alt="workshop" src="../../img/cloud/core-workshops.png" class="mx-auto h-10 w-10 object-cover" />
@@ -65,5 +65,22 @@ const isNextWorkshop = computed(() => {
         <ArrowRightCircleIcon v-else class="h-8 w-8 rounded-full border-2 border-solid border-pink-500 !fill-none text-pink-200" :class="{ 'animate-bounce': isNextWorkshop }" />
       </a>
     </div>
+    <div class="flex flex-1 cursor-pointer select-none flex-col items-center p-4 md:hidden">
+      <div class="flex w-full items-center justify-between">
+        <div class="mr-4 flex-1 text-white group-hover:text-pink-600">
+          <div class="font-medium">{{ exercise.name }}</div>
+          <div class="text-xs text-gray-300">{{ exercise.description }}</div>
+        </div>
+        <a href="#" class="flex justify-end text-right">
+          <CheckCircleIcon v-if="isCurrentExerciseComplete" class="h-8 w-8 rounded-full border-2 border-solid border-pink-300 text-pink-500" />
+          <ArrowRightCircleIcon v-else class="h-8 w-8 rounded-full border-2 border-solid border-pink-500 !fill-none text-pink-200" :class="{ 'animate-bounce': isNextWorkshop }" />
+        </a>
+      </div>
+      <div class="mt-4 flex w-full items-center justify-between">
+        <div class="rounded-full bg-pink-600 px-3 py-1 text-xs text-gray-200">
+          {{ exercise.type }}
+        </div>
+      </div>
+    </div>
   </li>
 </template>

assets/components/Online/ExerciseVerify.vue

@@ -131,7 +131,7 @@ const verifySolution = () => {
   <div class="flex flex-1 items-center gap-y-2">
     <button
       id="run"
-      class="mr-2 mt-0 h-[48px] w-44 items-center justify-center rounded border-2 border-solid border-[#E91E63] px-4 text-sm text-white hover:bg-[#E91E63] hidden md:flex"
+      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"
       @click.stop="runSolution"
       :disabled="loadingRun"
     >
@@ -141,7 +141,7 @@ const verifySolution = () => {
     </button>
     <button
       id="verify"
-      class="mr-0 md:mr-2 mt-0 flex h-[48px] w-full md:w-44 items-center justify-center rounded bg-gradient-to-r from-pink-600 to-purple-500 px-4 text-sm text-white transition-all duration-300 ease-in hover:bg-[#aa1145]"
+      class="mr-0 mt-0 flex h-[48px] w-full items-center justify-center rounded bg-gradient-to-r from-pink-600 to-purple-500 px-4 text-sm text-white transition-all duration-300 ease-in hover:bg-[#aa1145] md:mr-2 md:w-44"
       @click="verifySolution"
       :disabled="loadingVerify"
     >

assets/components/Online/FileTree.vue

@@ -76,13 +76,13 @@ const addFolder = () => {
 </script>
 
 <template>
-  <div class="">
-    <div class="flex flex-col sm:flex-row justify-between border-b border-solid border-gray-600 px-3 py-5">
-      <span class="font-mono text-base text-white mb-2 sm:mb-0 sm:mr-4">Files</span>
-      <div v-if="showControls" class="flex flex-wrap sm:flex-nowrap text-white">
-      <XMarkIcon @click="reset" class="mr-1 sm:mr-2 h-4 w-4 sm:h-5 sm:w-5 cursor-pointer hover:text-pink-500" style="fill: none !important" />
-        <FolderPlusIcon @click="addFolder" class="mr-1 sm:mr-2 h-4 w-4 sm:h-5 sm:w-5 cursor-pointer hover:text-pink-500" style="fill: none !important" />
-        <PlusIcon @click="addFile" class="mr-1 sm:mr-2 h-4 w-4 sm:h-5 sm:w-5 cursor-pointer hover:text-pink-500" style="fill: none !important" />
+  <div class="w-full">
+    <div class="flex flex-row items-center justify-between border-b border-solid border-gray-600 px-3 py-5">
+      <span class="font-mono text-base text-white">Files</span>
+      <div v-if="showControls" class="flex text-white">
+        <XMarkIcon @click="reset" class="mr-1 h-4 w-4 cursor-pointer hover:text-pink-500 sm:mr-2 sm:h-5 sm:w-5" style="fill: none !important" />
+        <FolderPlusIcon @click="addFolder" class="mr-1 h-4 w-4 cursor-pointer hover:text-pink-500 sm:mr-2 sm:h-5 sm:w-5" style="fill: none !important" />
+        <PlusIcon @click="addFile" class="mr-1 h-4 w-4 cursor-pointer hover:text-pink-500 sm:mr-2 sm:h-5 sm:w-5" style="fill: none !important" />
       </div>
     </div>
     <ul class="w-full font-mono text-gray-300">

assets/components/Online/ModalDialog.vue

@@ -74,7 +74,7 @@ const closeModal = (event) => {
   <focus-trap :v-model:active="true">
     <div class="">
       <div class="fixed inset-0 z-40 bg-gray-900 bg-opacity-80" />
-      <div tabindex="-1" class="fixed left-0 right-0 top-0 z-50 flex w-full items-center justify-center overflow-x-hidden md:inset-0 h-full p-2 md:p-0">
+      <div tabindex="-1" class="fixed left-0 right-0 top-0 z-50 flex h-full w-full items-center justify-center overflow-x-hidden p-2 md:inset-0 md:p-0">
         <div
           :id="id"
           v-click-away="clickAway"

assets/components/Online/PageDashboard.vue

@@ -23,8 +23,8 @@ onMounted(async () => {
 </script>
 
 <template>
-  <section class="flex-1 overflow-hidden pb-4">
-    <div class="container mx-auto flex h-full flex-col overflow-hidden">
+  <section class="flex-1 overflow-y-scroll pb-4 md:overflow-hidden">
+    <div class="container mx-auto flex flex-col overflow-hidden md:h-full">
       <student-progress></student-progress>
 
       <workshop-exercise-selection-list></workshop-exercise-selection-list>