Skip to content

Commit

Permalink
set form labels to small and bold text; width and text alignment styl…
Browse files Browse the repository at this point in the history 
…ing on form fields
  • Loading branch information
@ksmontville
ksmontville committed Jun 7, 2024
1 parent 6598048 commit ca20c94
Show file tree
Hide file tree
Showing 3 changed files with 47 additions and 17 deletions.
36 changes: 27 additions & 9 deletions src/components/tasks/ManageTasks.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,10 @@
<div class="flex flex-column row-gap-3">
<section class="form-section">
<div class="p-input-icon-right">
<label for="taskName">Task Name <span class="required">*</span></label>
<label for="taskName">
<small class="text-gray-400 font-bold">Task Name </small>
<span class="required">*</span></label
>
<PvInputText
v-model="t$.taskName.$model"
name="taskName"
Expand All @@ -30,7 +33,10 @@
<!-- Task ID -->
<section class="form-section">
<div class="p-input-icon-right">
<label for="taskId">Task ID <span class="required">*</span></label>
<label for="taskId">
<small class="text-gray-400 font-bold">Task ID </small>
<span class="required">*</span></label
>
<PvInputText
v-model="t$.taskId.$model"
name="taskId"
Expand All @@ -50,21 +56,28 @@
<!-- Cover Image -->
<section class="form-section">
<div>
<label for="coverImage">Cover Image (URL)</label>
<label for="coverImage">
<small class="text-gray-400 font-bold">Cover Image (URL)</small>
</label>
<PvInputText v-model="taskFields.coverImage" name="coverImage" />
</div>
</section>
<!--Description-->
<section class="form-section">
<div class="p-input-icon-right">
<label for="description">Description </label>
<label for="description">
<small class="text-gray-400 font-bold">Description</small>
</label>
<PvInputText v-model="taskFields.description" name="description" />
</div>
</section>
<!--Task URL-->
<section class="form-section">
<div v-if="isExternalTask">
<label for="taskURL">Task URL <span class="required">*</span></label>
<label for="taskURL">
<small class="text-gray-400 font-bold">Task URL </small>
<span class="required">*</span></label
>
<PvInputText
v-model="t$.taskURL.$model"
name="taskURL"
Expand All @@ -84,7 +97,9 @@
</div>

<div v-if="!isExternalTask">
<h3 class="text-center">Configure Game Parameters</h3>
<h3 class="text-center">
<strong>Configure Game Parameters</strong>
</h3>
<h4 class="text-center">Create the configurable game parameters for variants of this task.</h4>
<div v-for="(param, index) in gameConfig" :key="index">
<div class="flex gap-2 align-content-start flex-grow-0 params-container">
Expand Down Expand Up @@ -170,7 +185,10 @@
<h1 class="text-center font-bold">Update a Task</h1>
<form @submit.prevent="handleUpdateTask()">
<section class="flex flex-column gap-2 mb-4">
<label for="variant-fields" class="my-2">Select an Existing Task<span class="required">*</span></label>
<label for="variant-fields" class="my-2">
<small class="text-gray-400 font-bold">Select an Existing Task </small>
<span class="required">*</span></label
>
<PvDropdown
v-model="selectedTask"
:options="formattedTasks"
Expand All @@ -194,7 +212,7 @@
<label :for="key" class="w-1">
<em>{{ key }}</em>
</label>
<PvInputText :placeholder="typeof value" class="text-right" disabled />
<PvInputText :placeholder="typeof value" class="w-2 text-center" disabled />

<PvInputText
v-if="typeof value === 'string'"
Expand Down Expand Up @@ -269,7 +287,7 @@
<label :for="paramName" class="w-2">
<em>{{ paramName }} </em>
</label>
<PvInputText id="inputEditParamType" :placeholder="typeof param" class="w-2" disabled />
<PvInputText id="inputEditParamType" :placeholder="typeof param" class="w-2 text-center" disabled />
<PvInputText
v-if="typeof param === 'string'"
v-model="updatedTaskData.gameConfig[paramName]"
Expand Down
26 changes: 19 additions & 7 deletions src/components/tasks/ManageVariants.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,10 @@
<div class="flex flex-column row-gap-3">
<section class="form-section">
<div class="flex justify-content-between align-items-center">
<label for="variant-fields">Select an Existing Task <span class="required">*</span></label>
<label for="variant-fields">
<small class="text-gray-400 font-bold">Select an Existing Task </small>
<span class="required">*</span></label
>
<div class="flex flex-column gap-2 align-items-end">
<div class="flex flex-row align-items-center justify-content-end gap-2 flex-order-1">
<!-- This does not seemt to function properly, comming it out for now.-->
Expand Down Expand Up @@ -43,7 +46,10 @@

<section class="form-section">
<div class="p-input-icon-right">
<label for="variantName">Variant Name <span class="required">*</span></label>
<label for="variantName">
<small class="text-gray-400 font-bold">Variant Name </small>
<span class="required">*</span></label
>
<PvInputText
v-model="v$.variantName.$model"
name="variantName"
Expand All @@ -66,7 +72,9 @@
</div>

<div class="flex flex-column align-items-center">
<h3 class="text-center">Configure Game Parameters</h3>
<h3 class="text-center">
<strong>Configure Game Parameters</strong>
</h3>
<h4 class="text-center">
Set the game parameters for a new variant of task <strong>{{ variantFields.selectedGame.id }}</strong>
</h4>
Expand Down Expand Up @@ -208,8 +216,9 @@
<h1 class="text-center font-bold">Update a Variant</h1>
<form @submit.prevent="handleUpdateVariant()">
<section class="flex flex-column gap-2 mb-4">
<label for="variant-fields" class="my-2"
>Select an Existing Task and Variant <span class="required">*</span></label
<label for="task-select" class="my-2">
<small class="text-gray-400 font-bold">Select an Existing Task </small>
<span class="required">*</span></label
>
<PvDropdown
v-model="selectedTask"
Expand All @@ -219,6 +228,10 @@
placeholder="Select a Game"
@click="clearFieldParamArrays()"
/>
<label for="variant-select" class="my-2">
<small class="text-gray-400 font-bold">Select an Existing Variant </small>
<span class="required">*</span></label
>
<PvDropdown
v-model="selectedVariant"
:options="filteredVariants"
Expand All @@ -243,7 +256,7 @@
<label :for="key" class="w-1">
<em>{{ key }}</em>
</label>
<PvInputText id="inputEditVariantType" :placeholder="typeof value" disabled class="text-right" />
<PvInputText id="inputEditVariantType" :placeholder="typeof value" disabled class="w-2 text-center" />
<PvInputText
v-if="typeof value === 'string'"
v-model="updatedVariantData[key]"
Expand Down Expand Up @@ -684,7 +697,6 @@ const handleVariantSubmit = async (isFormValid) => {
taskImage: variantFields.selectedGame.image,
variantName: variantFields.variantName,
variantParams: combinedParams,
// TODO: Check if this is the valid way to see demo/test data values
demoData: { task: !!variantFields.selectedGame?.demoData, variant: isDemoData },
testData: { task: !!variantFields.selectedGame?.testData, variant: isTestData },
registered: isRegisteredVariant,
Expand Down
2 changes: 1 addition & 1 deletion src/pages/ManageTasksVariants.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -24,7 +24,7 @@
</template>

<script setup>
import ManageTasks from '@/components/tasks/ManageTasks.vue';
import ManageTasks from '../components/tasks/ManageTasks.vue';
import ManageVariants from '../components/tasks/ManageVariants.vue';
</script>

Expand Down

0 comments on commit ca20c94

Please sign in to comment.