From f1dabb516d51298f04746b37d32fd6168806c686 Mon Sep 17 00:00:00 2001
From: "STW_TTTY\\stwtt" <trx.setthawut@gmail.com>
Date: Tue, 16 Jul 2024 13:52:34 +0700
Subject: [PATCH] =?UTF-8?q?=E0=B9=81=E0=B8=81=E0=B9=89=20UI?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../components/ProjectDetail.vue              | 136 ++++++++++--------
 1 file changed, 80 insertions(+), 56 deletions(-)

diff --git a/src/modules/15_development/components/ProjectDetail.vue b/src/modules/15_development/components/ProjectDetail.vue
index 2fb32c2a3..782bd635f 100644
--- a/src/modules/15_development/components/ProjectDetail.vue
+++ b/src/modules/15_development/components/ProjectDetail.vue
@@ -565,15 +565,19 @@ onMounted(() => {
                     :options="projectTechniquesOp1"
                     type="checkbox"
                   />
-                  <div class="full-width q-mt-sm" v-if="checkOtherBox11">
-                    <q-input
-                      v-model="reasonPlanned70"
-                      dense
-                      :disable="store.projectStatus === 'FINISH'"
-                      outlined
-                      class="inputgreen"
-                      label="กรุณาระบุ"
-                    ></q-input>
+                  <div class="row" v-if="checkOtherBox11">
+                    <div class="offset-4 col-8 q-mt-sm relative-position">
+                      <div class="other_custom_input">
+                        <q-input
+                          v-model="reasonPlanned70"
+                          dense
+                          :disable="store.projectStatus === 'FINISH'"
+                          outlined
+                          class="inputgreen"
+                          label="กรุณาระบุ"
+                        ></q-input>
+                      </div>
+                    </div>
                   </div>
                 </div>
                 <div class="col-12 col-sm-6 col-md-4">
@@ -590,15 +594,19 @@ onMounted(() => {
                     :options="projectTechniquesOp2"
                     type="checkbox"
                   />
-                  <div class="full-width q-mt-sm" v-if="checkOtherBox12">
-                    <q-input
-                      v-model="reasonPlanned20"
-                      dense
-                      outlined
-                      :disable="store.projectStatus === 'FINISH'"
-                      class="inputgreen"
-                      label="กรุณาระบุ"
-                    ></q-input>
+                  <div class="row" v-if="checkOtherBox12">
+                    <div class="offset-4 col-8 q-mt-sm relative-position">
+                      <div class="other_custom_input">
+                        <q-input
+                          v-model="reasonPlanned20"
+                          dense
+                          :disable="store.projectStatus === 'FINISH'"
+                          outlined
+                          class="inputgreen"
+                          label="กรุณาระบุ"
+                        ></q-input>
+                      </div>
+                    </div>
                   </div>
                 </div>
                 <div class="col-12 col-sm-6 col-md-4">
@@ -615,15 +623,19 @@ onMounted(() => {
                     :options="projectTechniquesOp3"
                     type="checkbox"
                   />
-                  <div class="full-width q-mt-sm" v-if="checkOtherBox13">
-                    <q-input
-                      v-model="reasonPlanned10"
-                      dense
-                      outlined
-                      :disable="store.projectStatus === 'FINISH'"
-                      class="inputgreen"
-                      label="กรุณาระบุ"
-                    ></q-input>
+                  <div class="row" v-if="checkOtherBox13">
+                    <div class="offset-4 col-8 q-mt-sm relative-position">
+                      <div class="other_custom_input">
+                        <q-input
+                          v-model="reasonPlanned10"
+                          dense
+                          :disable="store.projectStatus === 'FINISH'"
+                          outlined
+                          class="inputgreen"
+                          label="กรุณาระบุ"
+                        ></q-input>
+                      </div>
+                    </div>
                   </div>
                 </div>
               </div>
@@ -640,7 +652,7 @@ onMounted(() => {
                 class="inputgreen"
               />
             </div>
-            
+
             <div class="col-12" v-if="store.projectStatus === 'FINISH'">
               <div class="row col-12 q-col-gutter-sm">
                 <div class="col-12 q-my-sm">
@@ -706,7 +718,7 @@ onMounted(() => {
                 </div>
                 <div class="col-12 q-py-md">
                   <div class="row q-col-gutter-md">
-                    <div class="col-12 col-sm-6 col-md-4 align-top">
+                    <div class="col-12 col-sm-6 col-md-6 col-lg-4">
                       <q-label class="q-mb-sm text-weight-medium text-body2"
                         >การเรียนรู้และการพัฒนาจากการลงมือทำ (70)</q-label
                       >
@@ -719,17 +731,21 @@ onMounted(() => {
                         :options="projectTechniquesOp1"
                         type="checkbox"
                       />
-                      <div class="full-width q-mt-sm" v-if="checkOtherBox21">
-                        <q-input
-                          v-model="reasonActual70"
-                          dense
-                          outlined
-                          class="inputgreen"
-                          label="กรุณาระบุ"
-                        ></q-input>
+                      <div class="row" v-if="checkOtherBox21">
+                        <div class="offset-4 col-8 q-mt-sm relative-position">
+                          <div class="other_custom_input">
+                            <q-input
+                              v-model="reasonActual70"
+                              dense
+                              outlined
+                              class="inputgreen"
+                              label="กรุณาระบุ"
+                            ></q-input>
+                          </div>
+                        </div>
                       </div>
                     </div>
-                    <div class="col-12 col-sm-6 col-md-4">
+                    <div class="col-12 col-sm-6 col-md-6 col-lg-4">
                       <q-label class="q-mb-sm text-weight-medium text-body2"
                         >การเรียนรู้และการพัฒนาจากบุคคลอื่น (20)</q-label
                       >
@@ -742,17 +758,21 @@ onMounted(() => {
                         :options="projectTechniquesOp2"
                         type="checkbox"
                       />
-                      <div class="full-width q-mt-sm" v-if="checkOtherBox22">
-                        <q-input
-                          v-model="reasonActual20"
-                          dense
-                          outlined
-                          class="inputgreen"
-                          label="กรุณาระบุ"
-                        ></q-input>
+                      <div class="row" v-if="checkOtherBox22">
+                        <div class="offset-4 col-8 q-mt-sm relative-position">
+                          <div class="other_custom_input">
+                            <q-input
+                              v-model="reasonActual20"
+                              dense
+                              outlined
+                              class="inputgreen"
+                              label="กรุณาระบุ"
+                            ></q-input>
+                          </div>
+                        </div>
                       </div>
                     </div>
-                    <div class="col-12 col-sm-6 col-md-4">
+                    <div class="col-12 col-sm-6 col-md-6 col-lg-4">
                       <q-label class="q-mb-sm text-weight-medium text-body2"
                         >การเรียนรู้และการพัฒนาจากการฝึกอบรม (10)</q-label
                       >
@@ -765,14 +785,18 @@ onMounted(() => {
                         :options="projectTechniquesOp3"
                         type="checkbox"
                       />
-                      <div class="full-width q-mt-sm" v-if="checkOtherBox23">
-                        <q-input
-                          v-model="reasonActual10"
-                          dense
-                          outlined
-                          class="inputgreen"
-                          label="กรุณาระบุ"
-                        ></q-input>
+                      <div class="row" v-if="checkOtherBox23">
+                        <div class="offset-4 col-8 q-mt-sm relative-position">
+                          <div class="other_custom_input">
+                            <q-input
+                              v-model="reasonActual10"
+                              dense
+                              outlined
+                              class="inputgreen"
+                              label="กรุณาระบุ"
+                            ></q-input>
+                          </div>
+                        </div>
                       </div>
                     </div>
                   </div>
@@ -826,7 +850,7 @@ onMounted(() => {
 }
 .other_custom_input {
   position: absolute;
-  top: -45px;
+  top: -25px;
   width: 100%;
 }