refactor query bar look & feel

Author: leif81

bzkanban.css

@@ -144,26 +144,17 @@ body {
     font-size: small;
     margin-left: 15px;
 }
-#query .fa {
-    vertical-align: bottom;
-    border-radius: 3px 0 0 3px;
-    border-style: solid;
-    border-width: 1px 0 1px 1px;
-    border-color: darkgrey;
+#query label, #query span {
     padding: 3.5px;
-    background-color: #E2E4E6;
-
+    font-size: small;
+    margin-right: 8px;
 }
 input#textFilter {
     padding: 4px;
 }
 #query select, #query input {
     width: 150px;
-    border-width: 1px 1px 1px 0;
-    border-radius: 0 3px 3px 0;
-}
-#query span {
-    margin-right: 8px;
+    margin-left: 5px;
 }
 #whoami {
     font-size: small;
@@ -309,14 +300,9 @@ input#textFilter {
     font-size: x-small;
 }
 select, textarea, input, button {
-    padding: 3px;
-    border-radius: 3px;
-    border-style: solid;
-    border-width: 1px;
-    border-color: darkgrey;
+    padding: 4px;
 }
 button {
-    background-color: #E2E4E6;
 }
 button:hover {
     background-color: lightgrey;

bzkanban.js

@@ -135,12 +135,8 @@ function createQueryFields() {
     var query = document.createElement("span");
     query.id = "query";
 
-    var product = document.createElement("span");
-
-    var productIcon = document.createElement("i");
-    productIcon.className = "fa fa-archive";
-    productIcon.title = "Product";
-
+    var product = document.createElement("label");
+    var productLabel = document.createTextNode("Product");
     var productList = document.createElement("select");
     productList.id = "textProduct";
     productList.name = "product";
@@ -172,12 +168,8 @@ function createQueryFields() {
         });
     });
 
-    var milestone = document.createElement("span");
-
-    var milestoneIcon = document.createElement("i");
-    milestoneIcon.className = "fa fa-flag";
-    milestoneIcon.title = "Milestone";
-
+    var milestone = document.createElement("label");
+    var milestoneLabel = document.createTextNode("Milestone");
     var milestoneList = document.createElement("select");
     milestoneList.id = "textMilestone";
     milestoneList.name = "milestone";
@@ -191,12 +183,8 @@ function createQueryFields() {
         loadBoard();
     });
 
-    var assignee = document.createElement("span");
-
-    var assigneeIcon = document.createElement("i");
-    assigneeIcon.className = "fa fa-user";
-    assigneeIcon.title = "Assignee";
-
+    var assignee = document.createElement("label");
+    var assigneeLabel = document.createTextNode("Assignee");
     var assigneeList = document.createElement("select");
     assigneeList.id = "textAssignee";
     assigneeList.name = "assignee";
@@ -224,11 +212,11 @@ function createQueryFields() {
         debounce( filterByString( document.getElementById("textFilter").value ), 500);
     });
 
-    product.appendChild(productIcon);
+    product.appendChild(productLabel);
     product.appendChild(productList);
-    milestone.appendChild(milestoneIcon);
+    milestone.appendChild(milestoneLabel);
     milestone.appendChild(milestoneList);
-    assignee.appendChild(assigneeIcon);
+    assignee.appendChild(assigneeLabel);
     assignee.appendChild(assigneeList);
     filter.appendChild(filterIcon);
     filter.appendChild(filterText);

index.html

@@ -6,7 +6,6 @@
         <meta name="viewport" content="width=device-width, initial-scale=1">
 
         <title>Bz Kanban Board</title>
-        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">
         <link rel="stylesheet" href="bzkanban.css">
         <link rel="icon" href="https://assets-cdn.github.com/images/icons/emoji/unicode/1f52a.png">
     </head>