mirror of
				https://github.com/crater-invoice/crater.git
				synced 2025-10-30 21:21:09 -04:00 
			
		
		
		
	add version check validation
This commit is contained in:
		| @ -182,4 +182,40 @@ export default { | ||||
|       } | ||||
|     ) | ||||
|   }, | ||||
|   compareVersion(v1, v2, options) { | ||||
|     const lexicographical = options && options.lexicographical | ||||
|     const zeroExtend = options && options.zeroExtend | ||||
|     let v1parts = v1.split('.') | ||||
|     let v2parts = v2.split('.') | ||||
|     function isValidPart(x) { | ||||
|       return (lexicographical ? /^\d+[A-Za-z]*$/ : /^\d+$/).test(x) | ||||
|     } | ||||
|     if (!v1parts.every(isValidPart) || !v2parts.every(isValidPart)) { | ||||
|       return NaN | ||||
|     } | ||||
|     if (zeroExtend) { | ||||
|       while (v1parts.length < v2parts.length) v1parts.push('0') | ||||
|       while (v2parts.length < v1parts.length) v2parts.push('0') | ||||
|     } | ||||
|     if (!lexicographical) { | ||||
|       v1parts = v1parts.map(Number) | ||||
|       v2parts = v2parts.map(Number) | ||||
|     } | ||||
|     for (let i = 0; i < v1parts.length; ++i) { | ||||
|       if (v2parts.length == i) { | ||||
|         return 1 | ||||
|       } | ||||
|       if (v1parts[i] == v2parts[i]) { | ||||
|         continue | ||||
|       } else if (v1parts[i] > v2parts[i]) { | ||||
|         return 1 | ||||
|       } else { | ||||
|         return -1 | ||||
|       } | ||||
|     } | ||||
|     if (v1parts.length != v2parts.length) { | ||||
|       return -1 | ||||
|     } | ||||
|     return 0 | ||||
|   }, | ||||
| } | ||||
|  | ||||
| @ -790,6 +790,7 @@ | ||||
|       "check_update": "Check for updates", | ||||
|       "avail_update": "New Update available", | ||||
|       "next_version": "Next version", | ||||
|       "requirements": "Requirements", | ||||
|       "update": "Update Now", | ||||
|       "update_progress": "Update in progress...", | ||||
|       "progress_text": "It will just take a few minutes. Please do not refresh the screen or close the window before the update finishes", | ||||
| @ -802,7 +803,7 @@ | ||||
|       "running_migrations": "Running Migrations", | ||||
|       "finishing_update": "Finishing Update", | ||||
|       "update_failed": "Update Failed", | ||||
|       "update_failed_text": "Sorry! Your update failed on : {step} step"    | ||||
|       "update_failed_text": "Sorry! Your update failed on : {step} step" | ||||
|     } | ||||
|   }, | ||||
|   "wizard": { | ||||
|  | ||||
| @ -36,16 +36,44 @@ | ||||
|           }}</label | ||||
|           ><br /> | ||||
|           <label class="version">{{ updateData.version }}</label> | ||||
|           <p class="page-sub-title" style="white-space: pre-wrap;">{{ description }}</p> | ||||
|           <p class="page-sub-title" style="white-space: pre-wrap;"> | ||||
|             {{ description }} | ||||
|           </p> | ||||
|           <label class="input-label"> | ||||
|             {{ $t('settings.update_app.requirements') }} | ||||
|           </label> | ||||
|           <div | ||||
|             v-for="(ext, i) in requiredExtentions" | ||||
|             :key="i" | ||||
|             class="col-md-8 p-0" | ||||
|           > | ||||
|             <div class="update-requirements"> | ||||
|               <div v-if="i == 'php'" class="d-flex justify-content-between"> | ||||
|                 <span>{{ i }}({{ minPhpVesrion }})</span> | ||||
|                 <span | ||||
|                   v-if="$utils.compareVersion(ext, minPhpVesrion) != -1" | ||||
|                   class="verified" | ||||
|                 /> | ||||
|                 <span v-else class="not-verified" /> | ||||
|               </div> | ||||
|               <div v-else class="d-flex justify-content-between"> | ||||
|                 <span>{{ i }}</span> | ||||
|                 <span v-if="ext" class="verified" /> | ||||
|                 <span v-else class="not-verified" /> | ||||
|               </div> | ||||
|             </div> | ||||
|           </div> | ||||
|           <base-button | ||||
|             size="large" | ||||
|             icon="rocket" | ||||
|             color="theme" | ||||
|             class="mt-5" | ||||
|             @click="onUpdateApp" | ||||
|           > | ||||
|             {{ $t('settings.update_app.update') }} | ||||
|           </base-button> | ||||
|         </div> | ||||
|  | ||||
|         <div v-if="isUpdating" class="mt-4 content"> | ||||
|           <div class="d-flex flex-row justify-content-between"> | ||||
|             <div> | ||||
| @ -131,6 +159,8 @@ export default { | ||||
|         installed: '', | ||||
|         version: '', | ||||
|       }, | ||||
|       requiredExtentions: null, | ||||
|       minPhpVesrion: null, | ||||
|     } | ||||
|   }, | ||||
|   created() { | ||||
| @ -177,6 +207,8 @@ export default { | ||||
|           this.updateData.version = response.data.version.version | ||||
|           this.description = response.data.version.description | ||||
|           this.isUpdateAvailable = true | ||||
|           this.requiredExtentions = response.data.version.extensions | ||||
|           this.minPhpVesrion = response.data.version.minimum_php_version | ||||
|         } | ||||
|       } catch (e) { | ||||
|         this.isUpdateAvailable = false | ||||
| @ -186,7 +218,17 @@ export default { | ||||
|     }, | ||||
|     async onUpdateApp() { | ||||
|       let path = null | ||||
|  | ||||
|       if ( | ||||
|         this.$utils.compareVersion( | ||||
|           this.requiredExtentions.php, | ||||
|           this.minPhpVesrion | ||||
|         ) == -1 | ||||
|       ) { | ||||
|         window.toastr['error']( | ||||
|           'Your current configuration does not match the update requirements. Please try again after all the requirements are fulfilled.  ' | ||||
|         ) | ||||
|         return true | ||||
|       } | ||||
|       for (let index = 0; index < this.updateSteps.length; index++) { | ||||
|         let currentStep = this.updateSteps[index] | ||||
|         try { | ||||
| @ -230,15 +272,17 @@ export default { | ||||
|       } | ||||
|     }, | ||||
|     onUpdateFailed(translationKey) { | ||||
|       let stepName = this.$t(translationKey)  | ||||
|       let stepName = this.$t(translationKey) | ||||
|       swal({ | ||||
|         title: this.$t('settings.update_app.update_failed'), | ||||
|         text: this.$tc('settings.update_app.update_failed_text', stepName, {step: stepName}), | ||||
|         text: this.$tc('settings.update_app.update_failed_text', stepName, { | ||||
|           step: stepName, | ||||
|         }), | ||||
|         buttons: [this.$t('general.cancel'), this.$t('general.retry')], | ||||
|       }).then(async (value) => { | ||||
|         if (value) { | ||||
|           this.onUpdateApp() | ||||
|           return  | ||||
|           return | ||||
|         } | ||||
|         this.isUpdating = false | ||||
|       }) | ||||
| @ -248,6 +292,12 @@ export default { | ||||
| </script> | ||||
|  | ||||
| <style scoped> | ||||
| .update-requirements { | ||||
|   /* display: flex; | ||||
|   justify-content: space-between; */ | ||||
|   padding: 10px; | ||||
|   border: 1px solid #eaf1fb; | ||||
| } | ||||
| .update { | ||||
|   transform: rotate(360deg); | ||||
|   animation: rotating 1s linear infinite; | ||||
|  | ||||
							
								
								
									
										587
									
								
								resources/assets/sass/pages/settings.scss
									
									
									
									
										vendored
									
									
								
							
							
						
						
									
										587
									
								
								resources/assets/sass/pages/settings.scss
									
									
									
									
										vendored
									
									
								
							| @ -2,325 +2,310 @@ | ||||
| // ------------------------- | ||||
|  | ||||
| .settings-container { | ||||
|     margin-top: 40px; | ||||
|   margin-top: 40px; | ||||
|  | ||||
|     .settings-sidebar { | ||||
|         list-style-type: none; | ||||
|         padding: 0px; | ||||
|   .settings-sidebar { | ||||
|     list-style-type: none; | ||||
|     padding: 0px; | ||||
|  | ||||
|         .settings-menu-item { | ||||
|             padding: 10px 0px; | ||||
|             font-weight: 500; | ||||
|             font-size: 14px; | ||||
|             line-height: 18px; | ||||
|             color: $ls-color-black; | ||||
|     .settings-menu-item { | ||||
|       padding: 10px 0px; | ||||
|       font-weight: 500; | ||||
|       font-size: 14px; | ||||
|       line-height: 18px; | ||||
|       color: $ls-color-black; | ||||
|  | ||||
|             .setting-icon { | ||||
|                 width: 25px; | ||||
|                 color: $ls-color-gray; | ||||
|                 font-size: 16px; | ||||
|             } | ||||
|  | ||||
|         } | ||||
|  | ||||
|         .link-color { | ||||
|             color: $ls-color-gray--dark; | ||||
|             display: flex; | ||||
|             align-items: center; | ||||
|         } | ||||
|  | ||||
|         .active-setting { | ||||
|             color: $ls-color-primary !important; | ||||
|             cursor: pointer; | ||||
|  | ||||
|             .setting-icon { | ||||
|                 color: $ls-color-primary !important; | ||||
|             } | ||||
|         } | ||||
|       .setting-icon { | ||||
|         width: 25px; | ||||
|         color: $ls-color-gray; | ||||
|         font-size: 16px; | ||||
|       } | ||||
|     } | ||||
|  | ||||
|     .link-color { | ||||
|       color: $ls-color-gray--dark; | ||||
|       display: flex; | ||||
|       align-items: center; | ||||
|     } | ||||
|  | ||||
|     .active-setting { | ||||
|       color: $ls-color-primary !important; | ||||
|       cursor: pointer; | ||||
|  | ||||
|       .setting-icon { | ||||
|         color: $ls-color-primary !important; | ||||
|       } | ||||
|     } | ||||
|   } | ||||
|  | ||||
|   .setting-main-container { | ||||
|     .setting-card { | ||||
|       padding: 30px; | ||||
|       min-height: 620px; | ||||
|     } | ||||
|  | ||||
|     .page-header { | ||||
|       margin: 0px; | ||||
|  | ||||
|       .page-title { | ||||
|         margin: 0; | ||||
|         padding-bottom: 10px; | ||||
|         font-weight: 500; | ||||
|         font-size: 17.5px; | ||||
|         line-height: 21px; | ||||
|         letter-spacing: 0.1px; | ||||
|         color: #000000; | ||||
|       } | ||||
|  | ||||
|       .page-sub-title { | ||||
|         max-width: 480px; | ||||
|         font-size: 14px; | ||||
|         line-height: 21px; | ||||
|         color: $ls-color-gray--dark; | ||||
|         margin-bottom: 30px; | ||||
|       } | ||||
|     } | ||||
|  | ||||
|     .input-label { | ||||
|       font-style: normal; | ||||
|       font-weight: 500; | ||||
|       font-size: 14px; | ||||
|       line-height: 21px; | ||||
|       color: #55547a; | ||||
|     } | ||||
|   } | ||||
|  | ||||
|   .expense-category { | ||||
|     td { | ||||
|       background-color: $ls-color-gray--very-light !important; | ||||
|     } | ||||
|   } | ||||
|  | ||||
|   .tax-table { | ||||
|     td { | ||||
|       background-color: $ls-color-gray--very-light !important; | ||||
|     } | ||||
|  | ||||
|     .tax-name { | ||||
|     } | ||||
|  | ||||
|     .compound-tax { | ||||
|       display: inline; | ||||
|       padding: 2px 8px; | ||||
|       font-size: 10px; | ||||
|       line-height: 15px; | ||||
|       background: $red--very-light; | ||||
|       color: $red--dark; | ||||
|     } | ||||
|   } | ||||
|  | ||||
|   .payment-tab { | ||||
|     .dropdown-container { | ||||
|       right: 0; | ||||
|       left: auto; | ||||
|     } | ||||
|   } | ||||
|  | ||||
|   .item-tab { | ||||
|     .dropdown-container { | ||||
|       right: 0; | ||||
|       left: auto; | ||||
|     } | ||||
|   } | ||||
|  | ||||
|   .update-container { | ||||
|     .verified, | ||||
|     .not-verified { | ||||
|       height: 15px; | ||||
|       width: 15px; | ||||
|       background-color: $brand-success; | ||||
|       display: inline-block; | ||||
|       margin: 0 10px; | ||||
|       border-radius: 50%; | ||||
|     } | ||||
|  | ||||
|     .not-verified { | ||||
|       background-color: $brand-danger; | ||||
|     } | ||||
|  | ||||
|     .update-spinner { | ||||
|       font-size: 30px; | ||||
|       color: $ls-color-gray--dark; | ||||
|     } | ||||
|  | ||||
|     .update-steps-container { | ||||
|       list-style-type: none; | ||||
|       width: 100%; | ||||
|       padding: 0px; | ||||
|  | ||||
|       .update-step { | ||||
|         display: flex; | ||||
|         width: 100%; | ||||
|         justify-content: space-between; | ||||
|         padding: 10px 0px; | ||||
|         border-bottom: 1px solid $ls-color-gray--light; | ||||
|  | ||||
|         &:last-child { | ||||
|           border-bottom: 0px solid; | ||||
|         } | ||||
|       } | ||||
|     } | ||||
|  | ||||
|     .update-step-text { | ||||
|       font-size: $font-size-base; | ||||
|       margin: 0px; | ||||
|       line-height: 2rem; | ||||
|     } | ||||
|  | ||||
|     .update-status-container { | ||||
|       display: flex; | ||||
|       flex-direction: row; | ||||
|       align-items: center; | ||||
|  | ||||
|       .update-time { | ||||
|         font-size: 10px; | ||||
|         color: $ls-color-gray--dark; | ||||
|         margin-right: 10px; | ||||
|       } | ||||
|  | ||||
|       .update-status { | ||||
|         font-size: 13px; | ||||
|         width: 88px; | ||||
|         height: 28px; | ||||
|         display: block; | ||||
|         text-align: center; | ||||
|         border-radius: 30px; | ||||
|         text-transform: uppercase; | ||||
|         line-height: 2rem; | ||||
|       } | ||||
|  | ||||
|       .status-pending { | ||||
|         background-color: #eaf1fb; | ||||
|         color: $ls-color-secondary; | ||||
|       } | ||||
|  | ||||
|       .status-running { | ||||
|         background-color: rgba(21, 178, 236, 0.15); | ||||
|         color: $ls-color-light-blue; | ||||
|       } | ||||
|  | ||||
|       .status-finished { | ||||
|         background-color: #d4f6ee; | ||||
|         color: $ls-color-green; | ||||
|       } | ||||
|  | ||||
|       .status-error { | ||||
|         background-color: rgba(251, 113, 120, 0.22); | ||||
|         color: $ls-color-red; | ||||
|       } | ||||
|     } | ||||
|   } | ||||
|  | ||||
|   .add-new-tax { | ||||
|     height: 45px; | ||||
|     white-space: nowrap; | ||||
|     z-index: 1; | ||||
|   } | ||||
|  | ||||
|   .flex-box { | ||||
|     display: flex; | ||||
|   } | ||||
|  | ||||
|   .left { | ||||
|     position: relative; | ||||
|     width: 50px; | ||||
|   } | ||||
|  | ||||
|   .btn-switch { | ||||
|     position: absolute; | ||||
|     top: -18px; | ||||
|   } | ||||
|  | ||||
|   .box-title { | ||||
|     margin-bottom: 5px; | ||||
|     padding: 0; | ||||
|     font-size: 16px; | ||||
|     line-height: 21px; | ||||
|     color: #55547a; | ||||
|   } | ||||
|  | ||||
|   .box-desc { | ||||
|     margin: 0; | ||||
|     padding: 0; | ||||
|     max-width: 480px; | ||||
|     font-size: 12px; | ||||
|     line-height: 18px; | ||||
|     color: $ls-color-gray--dark; | ||||
|   } | ||||
|  | ||||
|   .notes { | ||||
|     overflow: hidden; | ||||
|     width: 200px; | ||||
|  | ||||
|     .note { | ||||
|       text-overflow: ellipsis; | ||||
|       white-space: nowrap; | ||||
|       overflow: hidden; | ||||
|     } | ||||
|   } | ||||
|  | ||||
|   .version { | ||||
|     background: #eaf1fb; | ||||
|     color: #a5acc1; | ||||
|     border: 1px solid #eaf1fb; | ||||
|     box-sizing: border-box; | ||||
|     border-radius: 5px; | ||||
|     padding: 10px; | ||||
|     margin-bottom: 15px; | ||||
|   } | ||||
| } | ||||
|  | ||||
| @media (max-width: $x-small-breakpoint) { | ||||
|   .settings-container { | ||||
|     .setting-main-container { | ||||
|       .setting-card { | ||||
|         overflow: scroll; | ||||
|       } | ||||
|  | ||||
|         .setting-card { | ||||
|             padding: 30px; | ||||
|             min-height: 620px; | ||||
|         } | ||||
|  | ||||
|         .page-header { | ||||
|             margin: 0px; | ||||
|  | ||||
|             .page-title { | ||||
|                 margin: 0; | ||||
|                 padding-bottom: 10px; | ||||
|                 font-weight: 500; | ||||
|                 font-size: 17.5px; | ||||
|                 line-height: 21px; | ||||
|                 letter-spacing: 0.1px; | ||||
|                 color: #000000; | ||||
|             } | ||||
|  | ||||
|             .page-sub-title { | ||||
|                 max-width: 480px; | ||||
|                 font-size: 14px; | ||||
|                 line-height: 21px; | ||||
|                 color: $ls-color-gray--dark; | ||||
|                 margin-bottom: 30px; | ||||
|             } | ||||
|  | ||||
|         } | ||||
|  | ||||
|         .input-label { | ||||
|             font-style: normal; | ||||
|             font-weight: 500; | ||||
|             font-size: 14px; | ||||
|             line-height: 21px; | ||||
|             color: #55547A; | ||||
|         } | ||||
|       & .ml-15 { | ||||
|         margin-left: 15px; | ||||
|       } | ||||
|  | ||||
|       .page-header { | ||||
|         flex-wrap: wrap; | ||||
|       } | ||||
|     } | ||||
|  | ||||
|     .expense-category { | ||||
|         td { | ||||
|             background-color: $ls-color-gray--very-light !important; | ||||
|         } | ||||
|     .table-component { | ||||
|       td:first-child { | ||||
|         height: auto; | ||||
|         min-height: 10px; | ||||
|         text-align: center; | ||||
|         justify-content: center; | ||||
|       } | ||||
|     } | ||||
|  | ||||
|     .tax-table { | ||||
|         td { | ||||
|             background-color: $ls-color-gray--very-light !important; | ||||
|         } | ||||
|  | ||||
|         .tax-name { | ||||
|  | ||||
|         } | ||||
|  | ||||
|         .compound-tax { | ||||
|             display: inline; | ||||
|             padding: 2px 8px; | ||||
|             font-size: 10px; | ||||
|             line-height: 15px; | ||||
|             background: $red--very-light; | ||||
|             color: $red--dark; | ||||
|         } | ||||
|       .tax-name { | ||||
|         margin-top: 21px; | ||||
|         width: 76%; | ||||
|       } | ||||
|     } | ||||
|  | ||||
|     .payment-tab { | ||||
|  | ||||
|         .dropdown-container { | ||||
|             right: 0; | ||||
|             left: auto; | ||||
|     .expense-category { | ||||
|       .table-component__table__body { | ||||
|         tr:first-child { | ||||
|           td:nth-child(2) { | ||||
|             height: auto; | ||||
|             width: 101%; | ||||
|           } | ||||
|         } | ||||
|  | ||||
|     } | ||||
|  | ||||
|     .item-tab { | ||||
|  | ||||
|         .dropdown-container { | ||||
|             right: 0; | ||||
|             left: auto; | ||||
|         } | ||||
|  | ||||
|     } | ||||
|  | ||||
|     .update-container { | ||||
|  | ||||
|         .update-spinner { | ||||
|             font-size: 30px; | ||||
|             color: $ls-color-gray--dark; | ||||
|         } | ||||
|  | ||||
|         .update-steps-container { | ||||
|             list-style-type: none; | ||||
|             width: 100%; | ||||
|             padding: 0px; | ||||
|  | ||||
|             .update-step { | ||||
|                 display: flex; | ||||
|                 width: 100%; | ||||
|                 justify-content: space-between; | ||||
|                 padding: 10px 0px; | ||||
|                 border-bottom: 1px solid $ls-color-gray--light; | ||||
|  | ||||
|                 &:last-child { | ||||
|                     border-bottom: 0px solid; | ||||
|                 } | ||||
|  | ||||
|             } | ||||
|  | ||||
|         } | ||||
|  | ||||
|         .update-step-text { | ||||
|             font-size: $font-size-base; | ||||
|             margin: 0px; | ||||
|             line-height: 2rem; | ||||
|         } | ||||
|  | ||||
|         .update-status-container { | ||||
|             display: flex; | ||||
|             flex-direction: row; | ||||
|             align-items: center; | ||||
|  | ||||
|             .update-time { | ||||
|                 font-size: 10px; | ||||
|                 color: $ls-color-gray--dark; | ||||
|                 margin-right: 10px; | ||||
|             } | ||||
|      | ||||
|             .update-status { | ||||
|                 font-size: 13px; | ||||
|                 width: 88px; | ||||
|                 height: 28px; | ||||
|                 display: block; | ||||
|                 text-align: center; | ||||
|                 border-radius: 30px; | ||||
|                 text-transform: uppercase; | ||||
|                 line-height: 2rem; | ||||
|             } | ||||
|      | ||||
|             .status-pending { | ||||
|                 background-color: #EAF1FB; | ||||
|                 color: $ls-color-secondary; | ||||
|             } | ||||
|      | ||||
|             .status-running { | ||||
|                 background-color: rgba(21, 178, 236, 0.15); | ||||
|                 color: $ls-color-light-blue; | ||||
|             } | ||||
|      | ||||
|             .status-finished { | ||||
|                 background-color: #D4F6EE; | ||||
|                 color: $ls-color-green; | ||||
|             } | ||||
|      | ||||
|             .status-error { | ||||
|                 background-color: rgba(251, 113, 120, 0.22); | ||||
|                 color: $ls-color-red; | ||||
|             } | ||||
|         } | ||||
|  | ||||
|       } | ||||
|     } | ||||
|  | ||||
|     .add-new-tax { | ||||
|         height: 45px; | ||||
|         white-space: nowrap; | ||||
|         z-index: 1; | ||||
|     } | ||||
|  | ||||
|     .flex-box { | ||||
|         display: flex; | ||||
|     } | ||||
|  | ||||
|     .left { | ||||
|         position: relative; | ||||
|         width: 50px; | ||||
|     } | ||||
|  | ||||
|     .btn-switch { | ||||
|         position: absolute; | ||||
|         top: -18px; | ||||
|     } | ||||
|  | ||||
|     .box-title { | ||||
|         margin-bottom: 5px; | ||||
|         padding: 0; | ||||
|         font-size: 16px; | ||||
|         line-height: 21px; | ||||
|         color: #55547A; | ||||
|     } | ||||
|  | ||||
|     .box-desc { | ||||
|         margin: 0; | ||||
|         padding: 0; | ||||
|         max-width: 480px; | ||||
|         font-size: 12px; | ||||
|         line-height: 18px; | ||||
|         color: $ls-color-gray--dark; | ||||
|     } | ||||
|  | ||||
|     .notes { | ||||
|         overflow: hidden; | ||||
|         width: 200px; | ||||
|  | ||||
|         .note { | ||||
|             text-overflow: ellipsis; | ||||
|             white-space: nowrap; | ||||
|             overflow: hidden; | ||||
|         } | ||||
|     } | ||||
|  | ||||
|     .version { | ||||
|         background: #EAF1FB; | ||||
|         color: #A5ACC1; | ||||
|         border: 1px solid #EAF1FB; | ||||
|         box-sizing: border-box; | ||||
|         border-radius: 5px; | ||||
|         padding: 10px; | ||||
|         margin-bottom: 15px; | ||||
|       position: relative; | ||||
|       z-index: 1; | ||||
|     } | ||||
| } | ||||
|  | ||||
| @media(max-width: $x-small-breakpoint ) { | ||||
|  | ||||
|     .settings-container { | ||||
|  | ||||
|         .setting-main-container { | ||||
|  | ||||
|             .setting-card { | ||||
|                 overflow: scroll; | ||||
|             } | ||||
|  | ||||
|             & .ml-15 { | ||||
|                 margin-left: 15px; | ||||
|             } | ||||
|  | ||||
|             .page-header { | ||||
|                 flex-wrap: wrap; | ||||
|             } | ||||
|  | ||||
|         } | ||||
|  | ||||
|         .table-component { | ||||
|  | ||||
|             td:first-child { | ||||
|                 height: auto; | ||||
|                 min-height: 10px; | ||||
|                 text-align: center; | ||||
|                 justify-content: center; | ||||
|             } | ||||
|  | ||||
|         } | ||||
|  | ||||
|         .tax-table { | ||||
|  | ||||
|             .tax-name { | ||||
|                 margin-top: 21px; | ||||
|                 width: 76%; | ||||
|             } | ||||
|  | ||||
|         } | ||||
|  | ||||
|         .expense-category { | ||||
|  | ||||
|             .table-component__table__body { | ||||
|  | ||||
|                 tr:first-child { | ||||
|  | ||||
|                     td:nth-child(2) { | ||||
|                         height: auto; | ||||
|                         width: 101%; | ||||
|                     } | ||||
|  | ||||
|                 } | ||||
|  | ||||
|             } | ||||
|  | ||||
|         } | ||||
|  | ||||
|         .add-new-tax { | ||||
|             position: relative; | ||||
|             z-index: 1; | ||||
|         } | ||||
|  | ||||
|     } | ||||
|  | ||||
|   } | ||||
| } | ||||
|  | ||||
		Reference in New Issue
	
	Block a user