Bug 1381752 - Re-organize the layout

6 files changed, 64 insertions, 18 deletions

diff --git a/extensions/BugModal/template/en/default/bug_modal/common_header.html.tmpl b/extensions/BugModal/template/en/default/bug_modal/common_header.html.tmpl
index 2ffee3bd7..814464f27 100644
--- a/extensions/BugModal/template/en/default/bug_modal/common_header.html.tmpl
+++ b/extensions/BugModal/template/en/default/bug_modal/common_header.html.tmpl
@@ -49,7 +49,7 @@
     "contextMenu",
     "visibility"
   );
-  style_urls.push(
+  style_urls.unshift(
     "extensions/BugModal/web/common_bug_modal.css",
     "extensions/BugModal/web/dropdown.css",
     "skins/custom/bug_groups.css",
@@ -76,4 +76,4 @@
   };
 [% END %]
 
-[% Hook.process("end") %]
\ No newline at end of file
+[% Hook.process("end") %]
diff --git a/extensions/BugModal/template/en/default/bug_modal/common_new_comment.html.tmpl b/extensions/BugModal/template/en/default/bug_modal/common_new_comment.html.tmpl
index 2ba3948d1..184310277 100644
--- a/extensions/BugModal/template/en/default/bug_modal/common_new_comment.html.tmpl
+++ b/extensions/BugModal/template/en/default/bug_modal/common_new_comment.html.tmpl
@@ -39,17 +39,19 @@
       Preview
       <img id="preview-throbber" src="extensions/BugModal/web/throbber.gif" width="16" height="11" style="display:none">
     </li>
+    <!-- <li id="comment-guide-tab" role="tab" tabindex="-2" aria-controls="comment-guide-tabpanel" aria-selected="false">
+      <a href="page.cgi?id=etiquette.html" target="_blank" tabindex="-1">
+      Comments Subject to Etiquette and Contributor Guidelines</a>
+    </li> -->
   </ul>
+<!--   <div id="bugzilla-etiquette">
+    
+  </div> -->
 
   <div id="comment-edit-tabpanel" class="comment-tabpanel" role="tabpanel" aria-labelledby="comment-edit-tab">
-    <textarea rows="5" cols="80" name="comment" id="comment" aria-labelledby="comment-edit-tab"></textarea>
+    <textarea rows="5" [%+ UNLESS disable_cols %] cols="80" [% END +%] name="comment" id="comment" aria-labelledby="comment-edit-tab"></textarea>
   </div>
   <div id="comment-preview-tabpanel" class="comment-tabpanel" role="tabpanel" aria-labelledby="comment-preview-tab" style="display:none">
     <pre id="comment-preview" class="comment-text"></pre>
   </div>
-
-  <div id="bugzilla-etiquette">
-    <a href="page.cgi?id=etiquette.html" target="_blank" tabindex="-1">
-      Comments Subject to Etiquette and Contributor Guidelines</a>
-  </div>
 </div>
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()
+            }
         });
     
 });