Optimize UI

ReceiptManager · May 18, 2021 · 45eaa21 · 45eaa21
1 parent 7a4b77c
commit 45eaa21
Show file tree

Hide file tree

Showing 2 changed files with 18 additions and 19 deletions.
diff --git a/Frontend/history.js b/Frontend/history.js
@@ -317,7 +317,7 @@ class MainElement extends LitElement {
                return html `
                   <div class="itemsListContainer">
 
-                      <vaadin-combo-box required id="category${item[0]}" class="itemListCategory" placeholder="${translated.inputLabels.lbl_category}" value="${item[3]}" label="${translated.inputLabels.lbl_category}" @change=${() => updateResponseJson(item[0], "category", this)} @keyup=${e => closeMobileKeyboard(e, this, "category" + item[0])}></vaadin-combo-box>
+                      <vaadin-combo-box required auto-open-disabled clear-button-visible id="category${item[0]}" class="itemListCategory" placeholder="${translated.inputLabels.lbl_category}" value="${item[3]}" label="${translated.inputLabels.lbl_category}" @change=${() => updateResponseJson(item[0], "category", this)} @keyup=${e => closeMobileKeyboard(e, this, "category" + item[0])}></vaadin-combo-box>
                       <vaadin-text-field required id="article${item[0]}" class="itemListArticle" label="${translated.inputLabels.lbl_article}" value="${item[1]}" @change=${() => updateResponseJson(item[0], "article", this)} @keyup=${e => closeMobileKeyboard(e, this, "article" + item[0])}></vaadin-text-field>
                       <vaadin-text-field required id="sum${item[0]}" class="itemListSum" pattern="((\-|)[0-9]|[0-9]{2})\.[0-9]{2}"  label="${translated.inputLabels.lbl_price}" value="${itemSum}" @change=${() => updateResponseJson(item[0], "articleSum", this)} @keyup=${e => closeMobileKeyboard(e, this, "sum" + item[0])}></vaadin-text-field>
                       
@@ -429,8 +429,8 @@ class MainElement extends LitElement {
       width: 98%;
       display: inline-grid;
       grid-auto-flow: column;
-      grid-template-columns: 115px calc(100% - 225px) auto auto;
-      column-gap: 6px;
+      grid-template-columns: 129px calc(100% - 225px) auto auto;
+      column-gap: 0px;
     }
 
     .foundArticles
@@ -448,7 +448,7 @@ class MainElement extends LitElement {
 
     .itemListCategory
     {
-      width: 120px;
+      width: 135px;
     }
 
     .itemListArticle
@@ -469,7 +469,7 @@ class MainElement extends LitElement {
 
     .assumeArticleSum {
       display: inline-block;
-      margin-left: calc(100% - 190px);
+      margin-left: calc(100% - 185px);
       padding-right: 0px;
       padding-top: 1px;
     }
@@ -478,21 +478,21 @@ class MainElement extends LitElement {
     {
       font-family: Roboto;
       font-size: small;
-      margin-left: calc(100% - 89px);
+      margin-left: calc(100% - 84px);
       color: red;
     }
 
     .differenceGrey
     {
       font-family: Roboto;
       font-size: small;
-      margin-left: calc(100% - 95px);
+      margin-left: calc(100% - 82px);
       color: lightgrey;
     }
 
     .deleteButton {
       display: none;
-      margin-top: 20px;
+      margin-top: 35px;
     }
 
     .purchase

diff --git a/Frontend/scann.js b/Frontend/scann.js
@@ -319,7 +319,7 @@ checkValidAndSave(e)
 
             return html `
             <div class="itemsListContainer">
-                      <vaadin-combo-box required id="category${item[0]}" class="itemListCategory" placeholder="${translated.inputLabels.lbl_category}" value="${item[3]}" label="${translated.inputLabels.lbl_category}" @change=${() => updateResponseJson(item[0], "category", this)} @keyup=${e => closeMobileKeyboard(e, this, "category" + item[0])}></vaadin-combo-box>
+                      <vaadin-combo-box required auto-open-disabled clear-button-visible id="category${item[0]}" class="itemListCategory" placeholder="${translated.inputLabels.lbl_category}" value="${item[3]}" label="${translated.inputLabels.lbl_category}" @change=${() => updateResponseJson(item[0], "category", this)} @keyup=${e => closeMobileKeyboard(e, this, "category" + item[0])}></vaadin-combo-box>
                       <vaadin-text-field required id="article${item[0]}" class="itemListArticle" label="${translated.inputLabels.lbl_article}" value="${item[1]}" @change=${() => updateResponseJson(item[0], "article", this)} @keyup=${e => closeMobileKeyboard(e, this, "article" + item[0])}></vaadin-text-field>
                       <vaadin-text-field required id="sum${item[0]}" class="itemListSum" pattern="((\-|)[0-9]|[0-9]{2})\.[0-9]{2}"  label="${translated.inputLabels.lbl_price}" value="${itemSum}" @change=${() => updateResponseJson(item[0], "articleSum", this)} @keyup=${e => closeMobileKeyboard(e, this, "sum" + item[0])}></vaadin-text-field>
                       
@@ -436,14 +436,13 @@ checkValidAndSave(e)
           width: 98%;
           display: inline-grid;
           grid-auto-flow: column;
-          grid-template-columns: 115px calc(100% - 225px) auto auto;
-          column-gap: 6px;
+          grid-template-columns: 135px calc(100% - 232px) auto auto;
+          column-gap: 2px;
         }
 
         .itemListCategories
         {
-          width: 120px;
-          margin-top: 1px;
+          width: 135px;
         }
 
         .foundArticles
@@ -460,7 +459,7 @@ checkValidAndSave(e)
 
         .deleteButton {
           display: none;
-          margin-top: 20px;
+          margin-top: 35px;
         }
 
         .itemListSum
@@ -472,18 +471,18 @@ checkValidAndSave(e)
         {
           font-family: Roboto;
           font-size: small;
-          margin-left: calc(100% - 89px);
+          margin-left: calc(100% - 84px);
           color: red;
         }
-
+    
         .differenceGrey
         {
           font-family: Roboto;
           font-size: small;
-          margin-left: calc(100% - 95px);
+          margin-left: calc(100% - 82px);
           color: lightgrey;
         }
-
+    
         .uploadToast {
           --paper-toast-background-color: green;
         }
@@ -514,7 +513,7 @@ checkValidAndSave(e)
 
         .assumeArticleSum {
           display: inline-block;
-          margin-left: calc(100% - 232px);
+          margin-left: calc(100% - 228px);
           padding-right: 0px;
           padding-top: 1px;
         }