[FIX] ui responsivity

controllers/main.py

@@ -703,4 +703,4 @@ class PosSales(http.Controller):
             'process': True,
             'name': sale_order.display_name,
             'date': self.get_server_datetime()
-        }
+        }

src/components/common/InputDropdown.vue

@@ -2,11 +2,11 @@
     .input-group
         .input-group-button(v-if='withPrefix')
             button(type='button') {{ prefix }}
-        input(type='text' v-model='formattedValue')
+        input.form-input(type='text' v-model='formattedValue' :style="{'width': withPrefix || withSuffix ? '88%' : '100%'}")
         .input-group-button(v-if='withSuffix')
-            button(type='button' @click='onShowSuffixOptions' :disabled='withSuffixOptions()' ref='suffixButton') {{ suffix }}
-                span.caret
-            ul.dropdown(:style="{ 'display': isShowSuffixOptions ? 'block' : 'none' }" ref='suffixDropdown')
+            button(type='button' @click='onShowSuffixOptions' ref='suffixButton') {{ suffix }}
+                span.caret(:style="{'display': withSuffixOptions() ? 'none' : 'inline-block'}")
+            ul.dropdown(:style="{'display': isShowSuffixOptions ? 'block' : 'none'}" ref='suffixDropdown')
                 li(v-for='option in suffixOptions' :key='option.id')
                     a(@click='onClickSuffixOption(option)') {{ option.name }}
 </template>
@@ -124,6 +124,10 @@
                 return this.suffixOptions.length == 0
             },
             onShowSuffixOptions() {
+                if (this.withSuffixOptions()) {
+                    return
+                }
+
                 this.isShowSuffixOptions = !this.isShowSuffixOptions
             },
             onClickOutside(e) {
@@ -170,24 +174,27 @@
         position: relative
         display: table
         border-collapse: separate
-        input
+        .form-input
+            position: relative
             width: 100%
             height: 35px
-            display: table-cell
-            position: relative
             float: left
-            border-radius: 0
-            margin-bottom: 0
             z-index: 2
+            display: table-cell
+            margin-bottom: 0
+            border-radius: 0
             font-size: 12pt
+            line-height: 1.42857143
+            padding: 6px 12px
             &:focus
                 z-index: 3
         .input-group-button
             position: relative
-            display: table-cell
+            font-size: 0
             width: 1%
             white-space: nowrap
             vertical-align: middle
+            display: table-cell
             &:first-child
                 & > button
                     margin-right: -1px
@@ -205,6 +212,9 @@
                 border-radius: 0
                 box-shadow: none
                 background: #e0e0e0
+                z-index: 2
+                position: relative
+                user-select: none
                 &:focus
                     outline: 0 !important
                     border: 1px solid #ccc

src/components/steps/Payment.vue

@@ -12,7 +12,7 @@
                     label(for='credit') Crédito
             .form-item
                 label.form-label Monto a Pagar
-                input-dropdown.form-input(withPrefix='true' prefix='$')
+                input-dropdown.form-input(withSuffix='true' suffix='$' :suffixOptions="[{id: 1, name:'G$'}, {id: 2, name:'R$'}]")
             .form-item
                 label.form-label Monto Recibido
                 input-dropdown.form-input