Step 7 | Add search box

amahdy · Mar 30, 2017 · 0e50c4c · 0e50c4c
1 parent 8de9d67
commit 0e50c4c
Showing 1 changed file with 28 additions and 0 deletions.
diff --git a/src/offline-first-app/offline-first-app.html b/src/offline-first-app/offline-first-app.html
@@ -33,13 +33,29 @@
         margin: 8px;
       }
 
+      #searchArea {
+        padding-top: 120px;
+      }
+
+      #searchResultsArea {
+        padding-top: 60px;
+      }
+
       paper-button.update-button {
         margin-top: 12px;
         margin-right: 0px;
         float: right;
         background-color: #00b4f0;
         color: white;
       }
+
+      paper-button.find-button {
+        margin-top: 12px;
+        margin-right: 0px;
+        float: right;
+        background-color: #34373b;
+        color: white;
+      }
     </style>
 
     <vaadin-split-layout id="topLayout">
@@ -53,6 +69,14 @@ <h3>Editor</h3>
         <paper-input label="Last Name" id="lastName"></paper-input>
         <paper-input label="E-Mail" id="email"></paper-input>
         <paper-button class="update-button" raised on-tap="update">Update</paper-button>
+
+        <div id="searchArea">
+          <h3>Search</h3>
+          <paper-input label="First Name" id="search"></paper-input>
+          <paper-button class="find-button" raised on-tap="find">Find</paper-button>
+        </div>
+
+        <div id="searchResultsArea"></div
       </div>
     </vaadin-split-layout>
   </template>
@@ -155,6 +179,10 @@ <h3>Editor</h3>
         });
       },
 
+      find : function() {
+
+      },
+
     });
   </script>
 </dom-module>