Bug 1381752 - Re-organize the layout

4 files changed, 54 insertions, 10 deletions

diff --git a/extensions/BugModal/web/common_bug_modal.css b/extensions/BugModal/web/common_bug_modal.css
index 36b84e380..7eeefd6ff 100644
--- a/extensions/BugModal/web/common_bug_modal.css
+++ b/extensions/BugModal/web/common_bug_modal.css
@@ -692,7 +692,7 @@ body.platform-Win32 .comment-text, body.platform-Win64 .comment-text {
 /* add comment */
 
 #add-comment {
-    margin-top: 20px;
+    margin-top: 10px;
 }
 
 #add-comment-private,
diff --git a/extensions/BugModal/web/common_bug_modal.js b/extensions/BugModal/web/common_bug_modal.js
index b275c3a29..a06b391d9 100644
--- a/extensions/BugModal/web/common_bug_modal.js
+++ b/extensions/BugModal/web/common_bug_modal.js
@@ -871,9 +871,6 @@ $(function() {
             $.scrollTo($('#comment'), function() { $('#comment').focus(); });
         });
 
-    // auto-enlarge comment area (up to its max-height)
-    autosize($('#comment'));
-
     // add comment --> private
     $('#add-comment-private-cb')
         .click(function(event) {
diff --git a/extensions/BugModal/web/new_bug.css b/extensions/BugModal/web/new_bug.css
index 45c3abcea..a96083d81 100644
--- a/extensions/BugModal/web/new_bug.css
+++ b/extensions/BugModal/web/new_bug.css
@@ -1,7 +1,46 @@
-#bugzilla-etiquette {
-    float: left;
+#bugzilla-body {
+    max-width: initial;
+    min-width: initial;
+    width: initial;
 }
+
 #create-btn {
-	margin: 0 0 5px 0;
-	float: right;
+    margin: 5px 0 5px 0;
+    float: right;
+    padding: 8px;
+}
+
+.new-bug-container {
+    display: flex;
+    display: -webkit-flex;
+    flex-direction: column;
+    padding:5px;
+}
+
+.new-bug {
+    display: flex;
+    display: -webkit-flex;
+    flex-flow: row wrap;
+    padding:5px;
+}
+
+.new-bug-split-1 {
+    flex: 2 1 30px;
+    margin:5px;
+}
+.new-bug-split-2 {
+    flex: 4 1 30px;
+    margin:5px;
+}
+.new-bug-pad {
+    flex: 1 1 30px;
+    margin:5px;
+}
+
+.new-bug-title {
+    flex: 6 1 30px;
+    margin:5px;
+}
+input, label {
+    display: block; !important
 }
diff --git a/extensions/BugModal/web/new_bug.js b/extensions/BugModal/web/new_bug.js
index d00770e3a..9da5abce9 100644
--- a/extensions/BugModal/web/new_bug.js
+++ b/extensions/BugModal/web/new_bug.js
@@ -16,6 +16,7 @@ $(document).ready(function() {
     var product_sel = $("#product").selectize({
         valueField: 'name',
         labelField: 'name',
+        placeholder: 'Product',
         searchField: 'name',
         options: [],
         preload: true,
@@ -27,6 +28,7 @@ $(document).ready(function() {
     var component_sel = $("#component").selectize({
         valueField: 'name',
         labelField: 'name',
+        placeholder: 'Component',
         searchField: 'name',
         options: [],
     });
@@ -34,6 +36,7 @@ $(document).ready(function() {
     var version_sel = $("#version").selectize({
         valueField: 'name',
         labelField: 'name',
+        placeholder: 'Version',
         searchField: 'name',
         options: [],
     });
@@ -42,6 +45,7 @@ $(document).ready(function() {
         delimiter: ', ',
         valueField: 'name',
         labelField: 'name',
+        placeholder: 'Keywords',
         searchField: 'name',
         options: [],
         preload: true,
@@ -93,9 +97,13 @@ $(document).ready(function() {
     $('.create-btn')
         .click(function(event) {
             event.preventDefault();
-            if (document.newbugform.checkValidity && !document.newbugform.checkValidity())
+            if (document.newbugform.checkValidity && !document.newbugform.checkValidity()) {
+                alert("Required fields are empty");
                 return;
-            this.form.submit()
+            }
+            else {
+                this.form.submit()
+            }
         });
     
 });