Skip to content

Commit

Permalink
Run prettier
Browse files Browse the repository at this point in the history
  • Loading branch information
@AydinHassan
AydinHassan committed Feb 4, 2024
1 parent 3c98a8a commit a612273
Show file tree
Hide file tree
Showing 5 changed files with 58 additions and 65 deletions.
2 changes: 1 addition & 1 deletion assets/components/Online/ComposerPackages.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -98,7 +98,7 @@ const removeDependency = (packageName) => {
:disabled="newDependency === ''"
@click.stop="addDependency"
type="button"
class="inline-flex h-9 w-16 items-center justify-center rounded-full border border-transparent bg-pink-600 px-4 py-2 text-base font-medium text-white shadow-sm hover:bg-pink-700 focus:outline-none focus:ring focus:ring-pink-800 disabled:opacity-70 disabled:hover:bg-pink-600 ml-3 text-sm"
class="ml-3 inline-flex h-9 w-16 items-center justify-center rounded-full border border-transparent bg-pink-600 px-4 py-2 text-base text-sm font-medium text-white shadow-sm hover:bg-pink-700 focus:outline-none focus:ring focus:ring-pink-800 disabled:opacity-70 disabled:hover:bg-pink-600"
>
<ArrowPathIcon v-cloak v-show="loadingComposerAdd" class="h-4 w-4 animate-spin" />
<span v-if="!loadingComposerAdd">Add</span>
Expand Down
4 changes: 2 additions & 2 deletions assets/components/Online/EditorBreadcrumbs.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -33,8 +33,8 @@ const exerciseCompleted = computed(() => {
</div>
</li>
<li>
<span class="ml-1 md:ml-0 flex items-center" v-if="exerciseCompleted" title="You've already completed this exercise!">
<TrophyIcon class="h-4 w-4 md:h-6 md:w-6 text-yellow-400" />
<span class="ml-1 flex items-center md:ml-0" v-if="exerciseCompleted" title="You've already completed this exercise!">
<TrophyIcon class="h-4 w-4 text-yellow-400 md:h-6 md:w-6" />
</span>
</li>
</ol>
Expand Down
97 changes: 45 additions & 52 deletions assets/components/Online/ExerciseVerify.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,10 +3,10 @@ import Modal from "./ModalDialog.vue";
import { ArrowPathIcon, CommandLineIcon, SparklesIcon } from "@heroicons/vue/24/solid";
import toFilePath from "./Utils/toFilePath";
import RunResult from "./RunResult.vue";
import {Menu, MenuButton, MenuItem, MenuItems, Tab, TabGroup, TabList, TabPanel, TabPanels} from "@headlessui/vue";
import { Menu, MenuButton, MenuItem, MenuItems, Tab, TabGroup, TabList, TabPanel, TabPanels } from "@headlessui/vue";
import Alert from "./SiteAlert.vue";
import { ref } from "vue";
import {ChevronDownIcon} from "@heroicons/vue/20/solid";
import { ChevronDownIcon } from "@heroicons/vue/20/solid";
const emit = defineEmits(["verify-loading", "verify-success", "verify-fail", "run-loaded"]);
const props = defineProps({
Expand Down Expand Up @@ -39,7 +39,7 @@ const enableRateLimitError = () => {
};
const runSolution = async () => {
currentAction.value = 'run';
currentAction.value = "run";
if (loadingRun.value) {
return;
Expand Down Expand Up @@ -81,7 +81,7 @@ const runSolution = async () => {
};
const verifySolution = () => {
currentAction.value = 'verify';
currentAction.value = "verify";
if (loadingVerify.value) {
return;
Expand Down Expand Up @@ -134,7 +134,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 flex-1 items-center gap-y-2 h-[48px]">
<div class="flex h-[48px] flex-1 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"
Expand All @@ -146,59 +146,54 @@ const verifySolution = () => {
<CommandLineIcon v-if="!loadingRun" v-cloak class="ml-2 h-5 w-5" />
</button>
<div class="w-full md:w-44 h-[48px] flex justify-between md:justify-center rounded bg-gradient-to-r from-pink-600 to-purple-500 px-3">
<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 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">
<span v-if="currentAction === 'verify'" class="flex flex-1 items-center md:justify-center" @click="verifySolution">
<ArrowPathIcon v-cloak v-show="loadingVerify" class="hidden md:flex h-4 w-4 animate-spin" />
<span :class="{'md:hidden': loadingVerify}">Verify</span>
<SparklesIcon :class="{'md:hidden': loadingVerify}" v-cloak class="ml-2 h-5 w-5" />
<ArrowPathIcon v-cloak v-show="loadingVerify" class="hidden h-4 w-4 animate-spin md:flex" />
<span :class="{ 'md:hidden': loadingVerify }">Verify</span>
<SparklesIcon :class="{ 'md:hidden': loadingVerify }" v-cloak class="ml-2 h-5 w-5" />
</span>
<span v-if="currentAction === 'run'" class="flex flex-1 items-center md:justify-center" @click="runSolution">
<ArrowPathIcon v-cloak v-show="loadingRun" class="hidden md:flex h-4 w-4 animate-spin" />
<ArrowPathIcon v-cloak v-show="loadingRun" class="hidden h-4 w-4 animate-spin md:flex" />
<span>Run</span>
<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 }">
<div class="group">
<MenuButton class="h-[48px]" :disabled="loadingVerify || loadingRun">
<ChevronDownIcon v-if="!loadingRun && !loadingVerify"
:class="open ? '' : 'rotate-180'"
class="flex md:hidden ml-2 h-5 w-5 transition duration-200 focus:outline-none duration-300"
aria-hidden="true"
<ChevronDownIcon
v-if="!loadingRun && !loadingVerify"
:class="open ? '' : 'rotate-180'"
class="ml-2 flex h-5 w-5 transition duration-200 duration-300 focus:outline-none md:hidden"
aria-hidden="true"
/>
<ArrowPathIcon v-cloak v-show="loadingVerify || loadingRun" class="flex md:hidden ml-2 h-4 w-4 animate-spin" />
<ArrowPathIcon v-cloak v-show="loadingVerify || loadingRun" class="ml-2 flex h-4 w-4 animate-spin md:hidden" />
</MenuButton>
</div>
<transition
enter-active-class="transition ease-out duration-100"
enter-from-class="transform opacity-0 scale-95"
enter-to-class="transform opacity-100 scale-100"
leave-active-class="transition ease-in duration-75"
leave-from-class="transform opacity-100 scale-100"
leave-to-class="transform opacity-0 scale-95"
enter-active-class="transition ease-out duration-100"
enter-from-class="transform opacity-0 scale-95"
enter-to-class="transform opacity-100 scale-100"
leave-active-class="transition ease-in duration-75"
leave-from-class="transform opacity-100 scale-100"
leave-to-class="transform opacity-0 scale-95"
>
<MenuItems class="absolute -top-2 -right-3 -translate-y-full z-40 origin-top-right rounded-md bg-gradient-to-r from-pink-600 to-purple-500 text-left w-[168px] px-3">
<MenuItem v-slot="{ active, close }" v-if="currentAction === 'verify'">
<button
class="flex flex-1 h-[48px] w-full items-center justify-start rounded px-4 text-sm text-white"
@click.stop="runSolution"
:disabled="loadingRun"
>
<MenuItems class="absolute -right-3 -top-2 z-40 w-[168px] origin-top-right -translate-y-full rounded-md bg-gradient-to-r from-pink-600 to-purple-500 px-3 text-left">
<MenuItem v-if="currentAction === 'verify'">
<button class="flex h-[48px] w-full flex-1 items-center justify-start rounded px-4 text-sm text-white" @click.stop="runSolution" :disabled="loadingRun">
<span>Run</span>
<CommandLineIcon class="ml-2 h-5 w-5" />
</button>
</MenuItem>
<MenuItem v-slot="{ active, close }" v-if="currentAction === 'run'">
<MenuItem v-if="currentAction === 'run'">
<button
v-if="currentAction === 'run'"
class="flex flex-1 h-[48px] w-full items-center justify-start rounded px-4 text-sm text-white"
@click.stop="verifySolution"
:disabled="loadingVerify"
v-if="currentAction === 'run'"
class="flex h-[48px] w-full flex-1 items-center justify-start rounded px-4 text-sm text-white"
@click.stop="verifySolution"
:disabled="loadingVerify"
>
<span>Verify</span>
<SparklesIcon class="ml-2 h-5 w-5" />
Expand All @@ -211,12 +206,12 @@ const verifySolution = () => {
</div>
<Teleport to="body">
<Transition
enter-active-class="transition-opacity duration-100 ease-in"
leave-active-class="transition-opacity duration-200 ease-in"
enter-from-class="opacity-0"
enter-to-class="opacity-100"
leave-from-class="opacity-100"
leave-to-class="opacity-0"
enter-active-class="transition-opacity duration-100 ease-in"
leave-active-class="transition-opacity duration-200 ease-in"
enter-from-class="opacity-0"
enter-to-class="opacity-100"
leave-from-class="opacity-100"
leave-to-class="opacity-0"
>
<Modal id="run-modal" :scroll-content="true" size="3xl" max-height="max-h-[calc(5/6*100%)]" v-if="openRunModal" @close="openRunModal = false">
<template #header>
Expand All @@ -236,10 +231,10 @@ const verifySolution = () => {
<TabList className="flex justify-center border-b border-solid border-gray-600">
<Tab as="template" v-slot="{ selected }" v-for="(run, i) in programRunResult.runs" :key="i">
<button
:class="{
'border-b-2 border-pink-500 px-4 py-3 text-pink-400': selected,
' px-4 py-3 text-white': !selected,
}"
:class="{
'border-b-2 border-pink-500 px-4 py-3 text-pink-400': selected,
' px-4 py-3 text-white': !selected,
}"
>
Run #{{ i + 1 }}
</button>
Expand All @@ -258,10 +253,10 @@ const verifySolution = () => {
<template #footer>
<div class="flex justify-end">
<button
type="button"
v-show="programRunResult.success === true"
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:ring focus:ring-pink-800 sm:ml-3 sm:w-auto sm:text-sm"
@click="runSolution"
type="button"
v-show="programRunResult.success === true"
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:ring focus:ring-pink-800 sm:ml-3 sm:w-auto sm:text-sm"
@click="runSolution"
>
<ArrowPathIcon :class="{ 'animate-spin': loadingRun }" class="-ml-1 mr-2 h-4 w-4" />
Run again
Expand All @@ -271,6 +266,4 @@ const verifySolution = () => {
</Modal>
</Transition>
</Teleport>
</template>
10 changes: 5 additions & 5 deletions assets/components/Online/ProgressBar.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,11 +12,11 @@ const percentComplete = computed(() => {
</script>

<template>
<div class="flex order-2 w-full lg:w-1/6 items-center">
<div class="relative mt-0 flex flex-1 h-2 md:h-5 items-center justify-center rounded-full bg-gray-200 bg-gray-700 ">
<div class="absolute left-0 h-2 md:h-5 rounded-full bg-pink-500" :style="{ width: percentComplete + '%' }"></div>
<p class="absolute mx-auto ml-2 hidden md:inline-flex items-center text-xs font-bold font-mono text-white">{{ studentStore.totalCompleted() }}/{{ workshopStore.totalExercises }} Completed</p>
<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>
<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 md:hidden items-center text-xs text-white mr-2 font-mono">{{ studentStore.totalCompleted() }}/{{ workshopStore.totalExercises }} Completed</p>
<p class="mx-auto ml-2 mr-2 items-center font-mono text-xs text-white md:hidden">{{ studentStore.totalCompleted() }}/{{ workshopStore.totalExercises }} Completed</p>
</div>
</template>
10 changes: 5 additions & 5 deletions assets/components/Online/SiteAlert.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -40,24 +40,24 @@ watch(
>
<div v-cloak v-show="show" class="absolute left-0 top-4 z-[51] flex w-full justify-center">
<div
class="mx-2 md:mx-0 rounded-lg bg-gradient-to-r px-3 py-3 shadow-lg sm:px-6 lg:px-8"
class="mx-2 rounded-lg bg-gradient-to-r px-3 py-3 shadow-lg sm:px-6 md:mx-0 lg:px-8"
:class="{
'from-red-600 to-pink-700': type === 'error',
'from-pink-500 to-purple-500': type === 'success',
}"
>
<div class="flex flex-wrap items-center justify-center">
<div class="flex items-center">
<ExclamationTriangleIcon v-if="type === 'error'" class="h-5 w-5 md:h-6 md:w-6 text-white" />
<CheckIcon v-if="type === 'success'" class="h-5 w-5 md:h-6 md:w-6 text-white" />
<ExclamationTriangleIcon v-if="type === 'error'" class="h-5 w-5 text-white md:h-6 md:w-6" />
<CheckIcon v-if="type === 'success'" class="h-5 w-5 text-white md:h-6 md:w-6" />
<p class="ml-3 font-medium text-white">
<span class="text-sm md:text-base">{{ message }}</span>
</p>
</div>
<div class="order-2 flex-shrink-0 sm:order-3 sm:ml-3">
<button @click="$emit('close')" type="button" class="-mr-1 flex rounded-md p-1 md:p-2 hover:bg-pink-600 focus:outline-none focus:ring-2 focus:ring-white sm:-mr-2">
<button @click="$emit('close')" type="button" class="-mr-1 flex rounded-md p-1 hover:bg-pink-600 focus:outline-none focus:ring-2 focus:ring-white sm:-mr-2 md:p-2">
<span class="sr-only">Dismiss</span>
<XMarkIcon class="h-5 w-5 md:h-6 md:w-6 text-white" />
<XMarkIcon class="h-5 w-5 text-white md:h-6 md:w-6" />
</button>
</div>
</div>
Expand Down

0 comments on commit a612273

Please sign in to comment.