Bug 1496004 - Improve layout of attachment detail page, hide comment form when custom...

diff --git a/extensions/FlagTypeComment/web/js/ftc.js b/extensions/FlagTypeComment/web/js/ftc.js
index 2682721bc4b4c91e235f0492e7450b550b9bc0c2..291b5ff53ed64884550486e7296818901ec62b33 100644 (file)
--- a/extensions/FlagTypeComment/web/js/ftc.js
+++ b/extensions/FlagTypeComment/web/js/ftc.js
@@ -26,6 +26,9 @@ Bugzilla.FlagTypeComment = class FlagTypeComment {
     if (this.$flags && this.$comment) {
       this.selects = [...this.$flags.querySelectorAll('.flag_select')];
       this.selects.forEach($select => $select.addEventListener('change', () => this.flag_onselect($select)));
+      this.$fieldset_wrapper = this.$flags.parentElement.appendChild(document.createElement('div'));
+      this.$fieldset_wrapper.id = 'approval-request-fieldset-wrapper';
+      this.$comment_wrapper = document.querySelector('#smallCommentFrame') || this.$comment.parentElement;
       this.$comment.form.addEventListener('submit', () => this.form_onsubmit());
     }
   }
@@ -49,7 +52,7 @@ Bugzilla.FlagTypeComment = class FlagTypeComment {
    * @type {Array<HTMLFieldSetElement>}
    */
   get inserted_fieldsets() {
-    return [...this.$flags.parentElement.querySelectorAll('fieldset.approval-request')];
+    return [...this.$fieldset_wrapper.querySelectorAll('fieldset.approval-request')];
   }
 
   /**
@@ -120,7 +123,7 @@ Bugzilla.FlagTypeComment = class FlagTypeComment {
       $fieldset = this.find_available_fieldset(name);
 
       if ($fieldset) {
-        this.$flags.parentElement.appendChild($fieldset);
+        this.$fieldset_wrapper.appendChild($fieldset);
       }
     }
 
@@ -133,6 +136,9 @@ Bugzilla.FlagTypeComment = class FlagTypeComment {
         this.add_comment(text);
       }
     }
+
+    // Hide the original comment form when one or more `<fieldset>`s are inserted
+    this.$comment_wrapper.hidden = this.inserted_fieldsets.length > 0;
   }
 
   /**

diff --git a/extensions/FlagTypeComment/web/styles/ftc.css b/extensions/FlagTypeComment/web/styles/ftc.css
index 93d1909358280ea168c0199c2f3429b3d6b97f6b..a6ab1c18a72c1ee7091be4181e8f05b6feb45022 100644 (file)
--- a/extensions/FlagTypeComment/web/styles/ftc.css
+++ b/extensions/FlagTypeComment/web/styles/ftc.css
@@ -5,14 +5,30 @@
  * This Source Code Form is "Incompatible With Secondary Licenses", as
  * defined by the Mozilla Public License, v. 2.0. */
 
+#approval-request-fieldset-wrapper {
+  margin: 0 0 0 16px;
+}
+
+#approval-request-fieldset-wrapper:empty {
+  display: none;
+}
+
 fieldset.approval-request {
-  margin: 1em 0;
+  margin: 0 0 8px;
+}
+
+fieldset.approval-request:last-child {
+  margin: 0;
 }
 
 fieldset.approval-request legend {
   font-weight: bold;
 }
 
+fieldset.approval-request table {
+  width: 100%;
+}
+
 fieldset.approval-request th {
   padding: .4em;
   width: 20em;
@@ -36,11 +52,11 @@ fieldset.approval-request input[type="text"] {
 }
 
 fieldset.approval-request input.long[type="text"] {
-  width: 40em;
+  width: 100%;
 }
 
 fieldset.approval-request textarea {
-  width: 40em;
+  width: 100%;
   min-height: 5em;
   font-size: inherit;
   line-height: inherit;
@@ -56,3 +72,9 @@ fieldset.approval-request table ~ p:last-child {
   margin: .4em;
   text-align: right;
 }
+
+@media screen and (max-width: 1023px) {
+  #approval-request-fieldset-wrapper {
+    margin: 16px 0 0 0;
+  }
+}

diff --git a/extensions/Review/template/en/default/hook/flag/list-requestee.html.tmpl b/extensions/Review/template/en/default/hook/flag/list-requestee.html.tmpl
index 771bc803c3074d41b27335c4b8702fbe744092b2..da458dd184e4eda221030b41e3b133c9946be81e 100644 (file)
--- a/extensions/Review/template/en/default/hook/flag/list-requestee.html.tmpl
+++ b/extensions/Review/template/en/default/hook/flag/list-requestee.html.tmpl
@@ -8,7 +8,7 @@
 
 [% RETURN UNLESS type.name == 'review' %]
 
-<span id="[% fid FILTER none %]_suggestions" style="display: none">
+<span id="[% fid FILTER none %]_suggestions" class="reviewer-suggestions" style="display: none">
   &nbsp;&nbsp;<a href="#" id="[% fid FILTER none %]_suggestions_link">suggested reviewers &#9662;</a>
 </span>
 

diff --git a/extensions/Review/web/styles/review.css b/extensions/Review/web/styles/review.css
index 9f5b6360308dda97bf50c8c446f39f032aa48ead..61edea4825015dfc405ff18f53af426cbca8fa50 100644 (file)
--- a/extensions/Review/web/styles/review.css
+++ b/extensions/Review/web/styles/review.css
@@ -8,3 +8,8 @@
 .mentor {
     font-weight: bold;
 }
+
+.reviewer-suggestions {
+  display: block;
+  margin: 4px 0;
+}

diff --git a/skins/standard/attachment.css b/skins/standard/attachment.css
index 008bc70313ba91eec838cc24baa38f89ca377f2a..1b4c293635a089a4c073d61b13297ca05de56a58 100644 (file)
--- a/skins/standard/attachment.css
+++ b/skins/standard/attachment.css
@@ -133,13 +133,20 @@ table.attachment_info td {
     display: block;
 }
 
-#smallCommentFrame {
-    margin-right: 1.5em;
+#attachment_actions {
+    clear: both;
+    margin-bottom: 1ex;
 }
 
-#attachment_comments_and_flags, #attachment_actions {
+#attachment_comments_and_flags {
+    display: flex;
+    overflow: hidden;
     clear: both;
-    margin-bottom: 1ex;
+    margin: 16px 0;
+}
+
+#attachment_comments_and_flags > * {
+    flex: auto;
 }
 
 #attachment_information_read_only .title {
@@ -187,8 +194,15 @@ table.attachment_info td {
     float: left;
 }
 
-#smallCommentFrame textarea {
+#smallCommentFrame {
+  margin: 0 0 0 16px;
+}
+
+#smallCommentFrame #comment,
+#smallCommentFrame #comment_preview {
     display: block;
+    box-sizing: border-box;
+    width: 100% !important;
 }
 
 textarea.bz_private {
@@ -206,7 +220,11 @@ div#update_container {
 }
 
 #attachment_flags {
-    margin-bottom: 1em;
+    display: flex;
+}
+
+#attachment_flags > * {
+    flex: auto;
 }
 
 #attachment_flags p {
@@ -474,3 +492,14 @@ div#update_container {
 #att-error-message:empty {
   margin: 0;
 }
+
+@media screen and (max-width: 1023px) {
+  #attachment_comments_and_flags,
+  #attachment_flags {
+    display: block;
+  }
+
+  #smallCommentFrame {
+    margin: 16px 0 0 0;
+  }
+}

diff --git a/template/en/default/attachment/edit.html.tmpl b/template/en/default/attachment/edit.html.tmpl
index bc88d2ab4658dbe7e105a8ec57f64a608358865e..9bec3544207ec08534d49ac76a86a58cfc6f9e92 100644 (file)
--- a/template/en/default/attachment/edit.html.tmpl
+++ b/template/en/default/attachment/edit.html.tmpl
@@ -260,6 +260,11 @@
         [% END %]
       </div>
       <div id="attachment_comments_and_flags">
+        <div id="attachment_flags">
+          [% IF attachment.flag_types.size > 0 %]
+            [% PROCESS "flag/list.html.tmpl" flag_types = attachment.flag_types, read_only_flags = !can_edit %]
+          [% END %]
+        </div>
         [% IF user.id %]
           <div id="smallCommentFrame">
             <label for="comment">Comment (on the [% terms.bug %]):</label>
@@ -274,25 +279,17 @@
             [% Hook.process('after_comment_textarea') %]
           </div>
         [% END %]
-        <div id="attachment_flags">
-          [% IF attachment.flag_types.size > 0 %]
-              [% PROCESS "flag/list.html.tmpl" flag_types = attachment.flag_types
-                                               read_only_flags = !can_edit
-              %]
-
-          [% END %]
-        </div>
-
-        [% Hook.process('form_before_submit') %]
-
-        [% IF user.id %]
-          <div id="update_container">
-            <input type="submit" value="Submit" id="update">
-          </div>
-        [% END %]
       </div>
     </div>
   </div>
+
+  [% Hook.process('form_before_submit') %]
+
+  [% IF user.id %]
+    <div id="update_container">
+      <input type="submit" value="Submit" id="update">
+    </div>
+  [% END %]
 </form>
 
 <div id="attachment_actions">