Merge pull request #2810 from brkcvn/master

Tailwind class name controlled for javascript file
akaunting · Dec 12, 2022 · e873248 · e873248
2 parents e0a855c + 167b9c4
commit e873248
Show file tree

Hide file tree

Showing 3 changed files with 19 additions and 4 deletions.
diff --git a/public/css/app.css b/public/css/app.css
@@ -1592,6 +1592,17 @@ button, input, optgroup, select, textarea{
         margin-left: unset !important;
     }
 
+/* width of container, custom choose */
+
+@media (min-width: 640px){
+
+  [custom-half]{
+    grid-column: span 3 / span 3 !important;
+  }
+}
+
+/* width of container, custom choose */
+
 *, ::before, ::after{
   --tw-border-spacing-x: 0;
   --tw-border-spacing-y: 0;

diff --git a/resources/assets/js/views/settings/settings.js b/resources/assets/js/views/settings/settings.js
@@ -142,13 +142,11 @@ const app = new Vue({
         },
 
         onSmallWidthColumn(item) {
-            this.$refs[item].$el.classList.remove('sm:col-span-6');
-            this.$refs[item].$el.classList.add('sm:col-span-3');
+            this.$refs[item].$el.setAttribute('custom-half', true);
         },
 
         onFullWidthColumn(item) {
-            this.$refs[item].$el.classList.add('sm:col-span-6');
-            this.$refs[item].$el.classList.remove('sm:col-span-3');
+            this.$refs[item].$el.removeAttribute('custom-half');
         },
 
         settingsInvoice() {

diff --git a/resources/assets/sass/app.css b/resources/assets/sass/app.css
@@ -239,6 +239,12 @@
     #button-monthly {
         margin-left: unset !important;
     }
+
+    /* width of container, custom choose */
+    [custom-half] {
+        @apply sm:col-span-3 !important;
+    }
+    /* width of container, custom choose */
 }
 
 /* menu */