Finish dynamic positioning of sidebar

JhumanJ · Sep 7, 2023 · d82547b · d82547b
1 parent 7184d8a
commit d82547b
Show file tree

Hide file tree

Showing 2 changed files with 9 additions and 6 deletions.
diff --git a/resources/js/components/open/forms/components/FormEditor.vue b/resources/js/components/open/forms/components/FormEditor.vue
@@ -49,7 +49,7 @@
       </div>
     </div>
 
-    <div class="w-full flex grow overflow-y-scroll">
+    <div class="w-full flex grow overflow-y-scroll relative">
       <div class="relative w-full shrink-0 overflow-y-scroll border-r md:w-1/2 md:max-w-sm lg:w-2/5">
         <div class="border-b bg-blue-50 p-5 text-nt-blue-dark md:hidden">
           Please create this form on a device with a larger screen. That will allow you to preview your form changes.
@@ -71,7 +71,7 @@
       <form-field-edit-sidebar/>
 
       <!-- Form Error Modal -->
-      <form-error-modal 
+      <form-error-modal
         :show="showFormErrorModal"
         :validation-error-response="validationErrorResponse"
         @close="showFormErrorModal=false"

diff --git a/resources/js/components/open/forms/fields/FormFieldEditSidebar.vue b/resources/js/components/open/forms/fields/FormFieldEditSidebar.vue
@@ -1,6 +1,6 @@
 <template>
   <div v-if="showSidebar"
-       class="w-full md:w-1/2 lg:w-2/5 border-l relative overflow-y-scroll md:max-w-[20rem] flex-shrink-0">
+       class="absolute shadow-lg shadow-blue-800/30 top-0 h-[calc(100vh-45px)] right-0 lg:shadow-none lg:relative bg-white w-full md:w-1/2 lg:w-2/5 border-l overflow-y-scroll md:max-w-[20rem] flex-shrink-0">
     <div class="p-4 border-b sticky top-0 z-10 bg-white">
       <button v-if="!field" class="text-gray-500 hover:text-gray-900 cursor-pointer" @click.prevent="closeSidebar">
         <svg class="h-6 w-6" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
@@ -31,9 +31,9 @@
             </svg>
             Remove
           </v-button>
-          <v-button size="small" :class="{
-            'rounded-none border-r-0 text-xs':!isBlockField,
-            'rounded-l-none text-xs':isBlockField,
+          <v-button size="small" class="text-xs" :class="{
+            'rounded-none border-r-0':!isBlockField && typeCanBeChanged,
+            'rounded-l-none':isBlockField || !typeCanBeChanged
           }" color="light-gray" @click="duplicateBlock">
             <svg class="h-4 w-4 text-blue-600 inline mr-1 -mt-1" viewBox="0 0 24 24" fill="none"
                  xmlns="http://www.w3.org/2000/svg">
@@ -103,6 +103,9 @@ export default {
     },
     isBlockField() {
       return this.field && this.field.type.startsWith('nf')
+    },
+    typeCanBeChanged() {
+      return ['text', 'email', 'phone', 'number','select', 'multi_select'].includes(this.field.type)
     }
   },