Changeset 7355

Timestamp:

03/06/09 13:39:12 (17 months ago)

Author:

stoomey

Message:

Images, css, and ftl updates for competing interest statement ui and commenting guidelines text..

References #1136

Location:

head/ambra/webapp/src/main/webapp

Files:

• css/annotation.css (modified) (10 diffs)
• css/screen.css (modified) (8 diffs)
• discussion/startDiscussion.ftl (modified) (1 diff)
• images/dialog_pb.gif (modified) (previous)
• images/dialog_pt.gif (modified) (previous)
• journals/plosJournals/article/article_content.ftl (modified) (1 diff)
• widget/annotation_add.ftl (modified) (2 diffs)
• widget/contextAction.ftl (modified) (5 diffs)
• widget/discussionResponse.ftl (modified) (1 diff)
• widget/ratingDialog.ftl (modified) (1 diff)

head/ambra/webapp/src/main/webapp/css/annotation.css

@@ -38 +38 @@
 .dialog { line-height: 1.4em; font-size: .9em;}
 /* dialog box title */
-.dialog h5{ margin: 0 0 10px 0; font-size: 1em; color: #333; padding: 5px;}
+.dialog h5{ margin: 5px 5px 10px;}
 /* annotation post title */
 .dialog h6{ border: 1px solid #666; border-bottom:0; font-size: 1em; padding: 5px; margin: 0; background: #fff; clear: right;}
@@ -83 +83 @@
 .preview div.detail a { margin: 0 10px; }
 /* annotate is applied to dialog viewers in the annotation process */
-.annotate{ width: 42em; border: 3px solid #0bf; background: #fff url(../images/forms_bg.gif) repeat-x bottom; position:relative;}
+.annotate{ width:52em; border: 3px solid #666; background: #fff url(../images/forms_bg.gif) repeat-x bottom; position:relative;}
 
 div.contextActionDialog { padding:0;margin:0; }
@@ -89 +89 @@
 div.context div.tipu { background:transparent url(../images/dialog_pt.gif) no-repeat 0px 0px; width:39px; height:22px; position:absolute; top: -22px; left:22px; }
 
-div.context{ width:22em; border:3px solid #666; background:#fff url(../images/forms_bg.gif) repeat-x bottom; position:relative;}
-div.context div.contextActionContent { border:0px; margin:4px; line-height:1.1em; }
+div.context{ width:28em; border:3px solid #666; background:#fff url(../images/forms_bg.gif) repeat-x bottom; position:relative;}
+div.context div.contextActionContent { border:0px; margin:10px; }
 div.context div.contextActionContent h5 { padding:0px 0px 3px 0px; margin:0px;}
 div.context div.contextActionContent ul { padding:5px 0px 0px 0px; margin:0px; list-style-type:dot;}
@@ -106 +106 @@
 .response fieldset{ border: none; }
 .response fieldset .reply{ display: block; margin: 10px 0; padding: 2px; border: 1px solid #ccc}
-.posting .title{ width: 34em; }
+.posting .title{ width: 25em; }
 .flag textarea,
-.posting textarea{ width: 34em; height: 8em; display: block; overflow: auto; margin-bottom: 10px; margin-left: 0; margin-top: 5px;}
+.posting textarea{ width: 25em; height: 8em; display: block; overflow: auto; margin-bottom: 10px; margin-left: 0; margin-top: 5px;}
 .response .body{ width: 46em; height: 12em; overflow: auto;}
 
@@ -131 +131 @@
 
 /* --- pane contains viewing area --- */
-.pane                   { margin: 20px; padding: 0 5px;  margin: 10px 0; position: relative; }
+.pane                   { margin: 20px; padding: 0 5px;  margin:0; position: relative; }
 .reading.pane   { height: 12em; }
 .dialog fieldset{ border: 0; margin: 0; padding: 0;}
@@ -137 +137 @@
 .dialog legend,
 .post legend    { display: none; }
-.pane .error    { background-color: #fff; font-style: normal; }
-
-.dialog input,
-.post input     { display: block; margin: 10px 0;}
+.pane .error    { display:none; padding:5px; border:1px solid #c00; background-color: #fff; font-style: normal; }
 
 .dialog .response { width: 100%; height: 8em; overflow: auto; }
@@ -150 +147 @@
 .dialog fieldset input.checkbox  { width: 1em; vertical-align: middle; height: 1.125em; display: inline; margin-right: 4px;}
 div.btnwrap { width: 100%; display:block; margin: 0; height: auto; }
-div.btnwrap input { margin: 5px auto; display: block; width: 18em; padding: 2px;}
+div.btnwrap input { margin: 5px auto; display: block; padding: 2px;}
 
 /* --- multiple is the containing block for multiple annotations --- */
@@ -187 +184 @@
 
 .none                                   { display: none; }
-.annotate ol,
-.annotate li                    { list-style-type: none; margin: 0; padding: 0; width: 100%;}
 
 /* --- page view --- */
@@ -209 +204 @@
 div.response div.detail         { padding-left: 5px; }
 /* h5 for pane posting titles */
-div.response h5  { margin: 20px 0 0 0; padding: 0; font-size: 1.1em;}
+div.response h5  { margin: 20px 5px 5px; padding: 0; font-size: 1.1em;}
 
 div.pane                { position: relative; }
+div.pane fieldset { margin:0; padding:0; }
 div.response div.close a        { position: absolute; float: none; top: 20px; right: 20px; color: #333;}
 
-div.response .pane                                      { border: 2px solid #ccc; border-width: 2px 0 2px 2px; padding: 0 20px 20px 20px; margin: 0; background-repeat: repeat-x; background-position: top; color: #fff;}
+div.response .pane                                      { border: 2px solid #ccc; border-width: 2px 0 2px 2px; padding: 0 20px 20px; margin: 0; background-repeat: repeat-x; background-position: top; color: #fff;}
 div.response .pane legend                       { display: none; }
 
@@ -239 +235 @@
 div#flagConfirm { display: none; }
 
+/*-------------- additional styles for notation, comment/response and rating forms
+NOTE: 
+div.response targets start/respond discussion forms only
+div.annotate targets rating and notation forms only
+div.posting targets all user input forms --------------------*/
+div.response div.instructions a,
+div.response div.instructions a:hover { color:#fff; text-decoration:underline; }
+div.annotate div.instructions,
+div.response div.instructions { border:1px solid #ccc; border-left:0; border-right:0; font-size:0.9em; margin:0 5px 1.5em; padding:5px 0; }
+div.response div.instructions { font-size:inherit; }
+div.annotate div.instructions ol,
+div.response div.instructions ol { margin:0; padding-left:15px; list-style-position:inside; }
+
+div.posting ul { margin:0; padding:0; }
+div.posting label,
+div.posting ul.rating { line-height:0.8em; }
+/* SWT - this breaks star rating in IE div.posting ul.rating { top:-1em; }*/
+div.annotate div.posting textarea,
+div.annotate div.posting input.title  { margin:5px 0; width:23.7em; }
+div.response textarea,
+div.response input.title { width:32em; }
+div.posting td.coi textarea { height:5em; }
+div.posting td.coi ul li { list-style-type:none; }
+div.posting td.coi ul li:first-child { margin-bottom:1em; }
+div.posting td.coi ul li label { display:block; line-height:1.5em; }
+div.posting td.coi ul li label input { float:left; margin-right:0.5em; margin-bottom:1em; }
+div.response td.coi ul li label input { margin-bottom:0; }
+div.response table.layout td.coi { vertical-align:bottom; }
+div.annotate div.instructions ol li { list-style-position:inside; }
+div.response table.layout {width:67em; margin:0 5px; }
+table.layout td.buttons { text-align:right; vertical-align:bottom; }
+.buttons input { color:#333; margin:0 5px; }
+.buttons input.primary { font-weight:bold; }
+
+
 .toolbar                        { background: url(../images/toolbar_bg.gif) repeat-x 20px; padding: 5px; border: 1px solid #ccc; border-width: 0 0 2px 2px; margin: 0}
 .toolbar ul,

head/ambra/webapp/src/main/webapp/css/screen.css

@@ -3 +3 @@
  * $Id$
  *
- * Copyright (c) 2006-2008 by Topaz, Inc.
+ * Copyright (c) 2006-2009 by Topaz, Inc.
  * http://topazproject.org
  *
@@ -56 +56 @@
 strong          { font-weight: bold; }
 h1 sup          { font-size: .75em; }
-ul, ol, dl      { margin: 20px; position: relative; }
 ol.simple {list-style-type: none; margin: 20px; position: relative; }
 ol.roman-lower {list-style-type: lower-roman; margin: 20px; position: relative; }
@@ -67 +66 @@
 th                      { padding: 6px; background-color: #fdae7a; border: 4px solid #FFF; border-width: 0 3px 3px 0; font-weight: bold;}
 td                      { padding: 6px; background-color: #fcd3b8; border: 4px solid #FFF; border-width: 0 3px 3px 0; }
+table.layout { margin:0; }
+table.layout td { padding:0; background-color:transparent; border:0; vertical-align:top; }
+
 /* Default Headings */
 h1, h2, h3      { font-family: Georgia, "Times New Roman", Times, serif; color: #333; /*position: relative; Note: this was causing links in floated articleMenu to be covered up and unclickable in Firefox2 */ }
@@ -396 +398 @@
 div#contentHeader p { margin: 0; padding:0; text-indent: -9999px; }
 div#contentHeader p#articleType { text-transform:uppercase; text-indent:7px; margin-top:-13px; font-weight:bold; color:#fff; background-color:transparent; }
+div#contentHeader a.info { background-position:0 0.3em; background-repeat:no-repeat; display:inline-block; text-indent:-9999px; width:14px; }
 
 div#publisher { border-bottom:1px dashed #c60; background-color:#fff; } /* background color allows bottom border to display in IE6 */
@@ -407 +410 @@
 p.oa-banner             { margin: 0; padding: 5px 0;font-size: .85em; border-bottom: 8px solid #c60; color: #666; }
 p.authors               { margin: 10px 0 0 0; font-weight: bold; font-size: 1.1em; }
-p.affiliations  { font-size: .85em; margin: 0; }
+p.affiliations  { font-size: .85em; margin: 0; line-height:1.4em; }
 
 div.abstract    { margin: 15px 0; }
@@ -427 +430 @@
 div.content div#articleMenu p { margin-bottom:0; padding:0 8px 0 23px; }
 div.content div#articleMenu ul { margin:0; padding:0 8px 0 23px; position:static!important; } /* position:static fixes display issues in IE6 */
-div.content div#articleMenu ul li { background-image:none; padding:2px 0; line-height:1.5em; }
+div.content div#articleMenu ul li { background-image:none; padding:2px 0; line-height:1.4em; }
 div.content div#articleMenu ul li.annotation,
 div.content div#articleMenu ul li.discuss { background-position:0 2px; background-repeat:no-repeat; padding-left:18px; }
@@ -496 +499 @@
 div.fch ol li p a:visited { font-weight:normal; color:#004e9c; }
 
+/* Retraction styles */
+div.retractionHtmlId p.retractionHtmlId strong { color:#ff0000; } 
+div.retractionHtmlId p.retractionHtmlId em { font-weight:bold; font-style:normal; } 
+div.retractionHtmlId { margin: 15px 0; padding:0; border: 1px solid #ff0000; background-color: #fff4f0; } 
+div.retractionHtmlId p.retractionHtmlId, 
+div.corrections td.title a, 
+div#discussionContainer div.corrections div.original div.hd h3 { background:url(../images/icon_correction.gif) left 0% no-repeat; } 
+div.retractionHtmlId p.retractionHtmlId { margin:8px 8px 0; text-indent:20px; } 
+div.retractionHtmlId span.retractionHtmlId { margin:8px 8px 0; text-indent:0; } 
+div.retractionHtmlId span.retractionHtmlId div { margin-bottom:10px; font-weight:normal; } 
+div.retractionHtmlId span.retractionHtmlId div p { margin:0; padding:0; display:inline; font-weight:normal; } 
+div.retractionHtmlId span.retractionHtmlId div p a:link { font-weight:normal; color:#069; } 
+div.retractionHtmlId span.retractionHtmlId div p a:visited { font-weight:normal; color:#004e9c; } 
+
 div#ratingRhc1 { margin-bottom:5px;}
 div#ratingRhc1 ol,
@@ -568 +585 @@
 
 /* adds correction icon to bugs containing correction notes */
-span.minrcrctn a.bug span, span.frmlcrctn a.bug span {
+span.minrcrctn a.bug span, span.frmlcrctn a.bug span, span.retractionCssStyle a.bug span {
   background:url(../images/icon_correction_small.gif) left center no-repeat;
   padding-left:10px;

head/ambra/webapp/src/main/webapp/discussion/startDiscussion.ftl

@@ -32 +32 @@
       <div class="posting pane" id="DiscussionPanel">
         <h5>Post Your Discussion Comment</h5>
-        <div class="close btn" id="btnCancelResponse"><@s.a href="%{articlePageURL}" title="Cancel and go back to original article">Cancel</@s.a></div>
+        <div class="instructions">Please follow our <a  href="/static/commentGuidelines.action">guidelines for commenting/rating</a> and review our <a href="#">competing interests policy</a>. Comments that do not conform to our guidelines will be promptly removed and the user account disabled. The following must be avoided:
+        <ol>
+          <li>Remarks that could be interpreted as allegations of misconduct</li>
+          <li>Unsupported assertions or statements</li>
+          <li>Inflammatory or insulting language</li>
+        </ol>
+      </div>
+        <!-- You may want the url variables here for targeting by the new cancel button at the bottom of the form. <div class="close btn" id="btnCancelResponse"><@s.a href="%{articlePageURL}" title="Cancel and go back to original article">Cancel</@s.a></div>-->
           <form name="discussionResponse" method="post" action="">
           <input type="hidden" name="target" value="${articleInfo.id}" />        
           <input type="hidden" name="commentTitle" value="" />
           <input type="hidden" name="comment" value="" />
-          <input type="hidden" name="isPublic" value="true" />
-
-          <div id="responseSubmitMsg" class="error"/>                
+          <input type="hidden" name="isPublic" value="true" />             
           <fieldset>
             <legend>Compose Your Response</legend>
-
-            <label for="responseTitle"><span class="none">Enter your comment title</span><!-- error message text <em>A title is required for all public annotations</em>--></label>
-            <input type="text" name="responseTitle" id="responseTitle" value="Enter your comment title..." class="title" alt="Enter your comment title..." />
-
-            <label for="responseArea"><span class="none">Enter your comment</span><!-- error message style <em>Please enter your response</em>--></label>
-            <textarea id="responseArea" title="Enter your comment..." class="response" name="responseArea" >Enter your comment...</textarea>
-
-            <div class="btnwrap"><input name="post" value="Post" type="button" id="btnPostResponse" title="Click to Post Your Response"/></div>
+            <div id="responseSubmitMsg" class="error"></div>
+            <table class="layout">
+              <tr>
+                <td>
+                  <label for="title"><span class="none">Enter your comment title</span></label>
+                  <input type="text" name="responseTitle" id="title" value="Enter your comment title..." class="title" alt="Enter your comment title..." />
+                  <label for="responseArea"><span class="none">Enter your comment</span></label>
+                  <textarea id="responseArea" title="Enter your comment..." class="response" name="responseArea" >Enter your comment...</textarea>
+                </td>
+                <td>&nbsp;</td>
+                <td class="coi">
+                  <fieldset>
+                    <legend>Declare any competing interests.</legend>
+                    <ul>
+                      <li><label><input id="temp" type="radio" checked="checked" name="noCOI" value="blah"  /> No, I don't have any competing interests to declare.</label></li>
+                      <li><label><input id="temp2" type="radio" name="yesCOI" value="blahblah"  /> Yes, I have competing interests to declare (enter below):</label></li>
+                    </ul>
+                    <textarea name="coi" id="temp" value="Enter your competing interests..." alt="Enter your competing interests...">Enter your competing interests...</textarea>
+                  </fieldset>
+                </td>
+              </tr>
+              <tr>
+                <td colspan="3" class="buttons">
+                  <input type="button" value="Cancel" title="Click to close and cancel" id="btnCancelResponse"/>
+                  <input name="post" value="Submit" type="button" id="btnPostResponse" title="Click to Post Your Response" class="primary"/>
+                </td>
+              </tr>
+            </table>
           </fieldset>
         </form>

head/ambra/webapp/src/main/webapp/journals/plosJournals/article/article_content.ftl

@@ -42 +42 @@
         <li class="discuss icon">
           <#if Session[freemarker_config.userAttributeKey]?exists>
-            <a href="${createDiscussionURL}" class="discuss icon">Make a general comment</a>
+            <a href="${createDiscussionURL}">Make a general comment</a>
           <#else>
             <a href="${freemarker_config.context}/user/secure/secureRedirect.action?goTo=${thisPage}">Make a general comment</a>

head/ambra/webapp/src/main/webapp/widget/annotation_add.ftl

@@ -21 +21 @@
         <div class="dialog annotate">
                 <div class="tipu" id="dTipu"></div>
-                <div class="btn close" title="Click to close and cancel">
-                        <a id="btn_cancel" title="Click to close and cancel">Cancel</a>
-                </div>
                 <div class="comment">
                         <h5><span class="commentPrivate">Add Your Note (For Private Viewing)</span><span class="commentPublic">Post Your Note (For Public Viewing)</span></h5>
@@ -38 +35 @@
                                         <fieldset>
                                                 <legend>Compose Your Note</legend>
-
                                                 <span id="submitMsg" class="error"></span>
-                                                
-                                                <label for="cNoteType">This is a </label><select name="cNoteType" id="cNoteType"><option value="note">note</option><option value="correction">correction</option></select>
-            <@s.url id="wacl" namespace="/static" action="commentGuidelines" includeParams="none" anchor="corrections" target="${articleURI}" />
-                                                <span id="cdls" style="visibility:hidden;margin-left:1em">(<a href="${wacl}">What are corrections?</a>)</span>
-
-                                                <label for="cTitle" class="commentPublic"><span class="none">Enter your note title</span><!-- error message text <em>A title is required for all public notes</em>--></label>
-                                                <input type="text" name="cTitle" id="cTitle" value="Enter your note title..." class="title commentPublic" alt="Enter your note title..." />
-
-                                                <label for="cArea"><span class="none">Enter your note</span><!-- error message text <em>Please enter your note</em>--></label>
-                                                <textarea name="cArea" id="cArea" value="Enter your note..." alt="Enter your note...">Enter your note...</textarea>
-
-                                                <input type="hidden" name="isPublic" value="true" />
-                                                <!--
-                                                <div><input type="radio" id="privateFlag" class="radio" title="Choose from one of the options" name="public" value="false" disabled="true" /><label for="Private">Private</label></div>
-                                                <div><input type="radio" id="publicFlag" class="radio" title="Choose from one of the options" name="public" value="true" checked="true" /><label for="Public">Public</label></div>
-            -->
-            <div class="btnwrap commentPrivate"><input type="button" value="Save" class="commentPrivate" title="Click to save your note privately" id="btn_save"/></div>
-                                                <div class="btnwrap commentPublic"><input type="button" value="Post" class="commentPublic" title="Click to post your note publicly" id="btn_post"/></div>
+                                                <table class="layout">
+              <tr>
+                <td>
+                                                <label for="cNoteType">This is a </label><select name="cNoteType" id="cNoteType"><option value="note">note</option><option value="correction">correction</option></select>
+                  <@s.url id="wacl" namespace="/static" action="commentGuidelines" includeParams="none" anchor="corrections" target="${articleURI}" />
+                                                <span id="cdls" style="visibility:hidden;margin-left:0.3em; white-space:nowrap;"><a href="${wacl}">What are corrections?</a></span>
+                                                <label for="cTitle" class="commentPublic"><span class="none">Enter your note title</span><!-- error message text <em>A title is required for all public notes</em>--></label>
+                                                <input type="text" name="cTitle" id="cTitle" value="Enter your note title..." class="title commentPublic" alt="Enter your note title..." />
+                                                <label for="cArea"><span class="none">Enter your note</span><!-- error message text <em>Please enter your note</em>--></label>
+                                                <textarea name="cArea" id="cArea" value="Enter your note..." alt="Enter your note...">Enter your note...</textarea>
+                                                <input type="hidden" name="isPublic" value="true" />
+                </td>
+                <td>&nbsp;</td>
+                <td class="coi">
+                  <fieldset>
+                    <legend>Declare any competing interests.</legend>
+                    <ul>
+                      <li><label><input id="temp" type="radio" checked="checked" name="noCOI" value="blah"  /> No, I don't have any competing interests to declare.</label></li>
+                      <li><label><input id="temp2" type="radio" name="yesCOI" value="blahblah"  /> Yes, I have competing interests to declare (enter below):</label></li>
+                    </ul>
+                    <textarea name="coi" id="temp" value="Enter your competing interests..." alt="Enter your competing interests...">Enter your competing interests...</textarea>
+                  </fieldset>
+                </td>
+              </tr>
+              <tr>
+                <td colspan="3" class="buttons">
+                  <input type="button" value="Cancel" title="Click to close and cancel" id="btn_cancel"/>
+                  <input type="button" value="Submit" title="Click to post your note publicly" id="btn_post" class="primary"/>
+                </td>
+              </tr>
+            </table>
                                         </fieldset>
                                 </form>

head/ambra/webapp/src/main/webapp/widget/contextAction.ftl

@@ -3 +3 @@
                 <div class="tipu" id="caTipu"></div>
                 <div class="contextActionContent">
-                        <h5><img src="images/tooltip_addannotation.gif" /> Add a note to this text.</h5>
-                        Please follow our <a href="">guidelines for commenting/rating</a>. Comments that do
-                        not conform to our guidelines will be promptly removed and the
-                        user account disabled.  The following must be avoided:
+                        <h5><img src="../images/tooltip_addannotation.gif" /> Add a note to this text.</h5>
+                        Please follow our <a href="">guidelines for commenting/rating</a> and review our <a href="#">competing interests policy</a>. Comments that do not conform to our guidelines will be promptly removed and the user account disabled. The following must be avoided:
                         <ul>
                                 <li>Remarks that could be interpreted as allegations of misconduct</li>
@@ -12 +10 @@
                                 <li>Inflammatory and insulting language</li>
                         </ul>
-                        <form name="contextActionForm" id="contextActionForm" method="post" action="">
-        <input type="button" name="Continue" value="Continue" id="ContextActionDialogContinueButton" onmouseup="ambra.displayAnnotationContext.startComment(event);" title="Add a note to this text"></form>
-                        <div class="clearer"></div>
+                        <form name="contextActionForm" id="contextActionForm" class="clearfix buttons" method="post" action="">
+        <input type="button" name="Continue" value="Continue" id="ContextActionDialogContinueButton" onmouseup="ambra.displayAnnotationContext.startComment(event);" title="Add a note to this text" class="primary"/></form>
                 </div>
                 <div class="tip" id="caTip"></div>
@@ -23 +20 @@
                 <div class="tipu" id="canlTipu"></div>
                 <div class="contextActionContent">
-                        <h5><img src="images/tooltip_addannotation.gif" /> Add a note to this text.</h5>
+                        <h5><img src="../images/tooltip_addannotation.gif" /> Add a note to this text.</h5>
                         You must be logged into to add a note to an article.
       You may log in by <a onmousedown="ambra.displayAnnotationContext.disconnect(event);" href="${freemarker_config.context}/user/secure/secureRedirect.action?goTo=${thisPage}">clicking here</a>.
@@ -34 +31 @@
                 <div class="tipu" id="canBDTipu"></div>
                 <div class="contextActionContent">
-                        <h5><img src="images/tooltip_addannotation.gif" /> Add a note to this text.</h5>
+                        <h5 class="annotation icon"><img src="../images/tooltip_addannotation.gif" /> Add a note to this text.</h5>
       You can not annotate this area of the document.
                 </div>
@@ -44 +41 @@
                 <div class="tipu" id="canbrTipu"></div>
                 <div class="contextActionContent">
-                        <h5><img src="images/tooltip_addannotation.gif" /> Add a note to this text.</h5>
+                        <h5><img src="../images/tooltip_addannotation.gif" /> Add a note to this text.</h5>
       You can not create an annotation that spans different sections of the document, please
       adjust your selection.

head/ambra/webapp/src/main/webapp/widget/discussionResponse.ftl

@@ -21 +21 @@
 <div class="posting pane" id="DiscussionPanel">
         <h5>Post Your Response</h5>
-        <div class="close btn" id="btnCancelResponse"><a href="#" title="Close this dialogue box">Cancel</a></div>
-        <form name="discussionResponse" method="post" action="">
-                <input type="hidden" name="commentTitle" value="" />
-                <input type="hidden" name="comment" value="" />
-
-                <div id="responseSubmitMsg" class="error"></div>
-                
-                <fieldset>
-                        <legend>Compose Your Response</legend>
-                
-                        <label for="responseTitle"><span class="none">Enter your response title</span><!-- error message text <em>A title is required for all public annotations</em>--></label>
-                        <input type="text" name="responseTitle" id="responseTitle" value="Enter your response title..." class="title" alt="Enter your response title..." />
-                        
-                        <label for="reponseArea"><span class="none">Enter your response</span><!-- error message style <em>Please enter your response</em>--></label>
-                        <textarea id="responseArea" title="Enter your response..." class="response" name="responseArea" >Enter your response...</textarea>
-                        
-                        <div class="btnwrap"><input name="post" value="Post" type="button" id="btnPostResponse" title="Click to Post Your Response"/></div>
-                        
+  <div class="instructions">Please follow our <a  href="/static/commentGuidelines.action">guidelines for commenting/rating</a> and review our <a href="#">competing interests policy</a>. Comments that do not conform to our guidelines will be promptly removed and the user account disabled. The following must be avoided:
+    <ol>
+      <li>Remarks that could be interpreted as allegations of misconduct</li>
+      <li>Unsupported assertions or statements</li>
+      <li>Inflammatory or insulting language</li>
+    </ol>
+  </div>
+  <form name="discussionResponse" method="post" action="">
+  <input type="hidden" name="commentTitle" value="" />
+  <input type="hidden" name="comment" value="" />
+  <fieldset>
+    <legend>Compose Your Response</legend>
+    <div id="responseSubmitMsg" class="error"></div>
+    <table class="layout">
+        <tr>
+          <td>
+            <label for="title"><span class="none">Enter your response title</span></label>
+            <input type="text" name="responseTitle" id="title" value="Enter your response title..." class="title" alt="Enter your response title..." />
+            <label for="reponseArea"><span class="none">Enter your response</span></label>
+            <textarea id="responseArea" title="Enter your response..." class="response" name="responseArea" >Enter your response...</textarea>
+          <td>&nbsp;</td>
+          <td class="coi">
+            <fieldset>
+              <legend>Declare any competing interests.</legend>
+              <ul>
+                <li><label><input id="temp" type="radio" checked="checked" name="noCOI" value="blah"  /> No, I don't have any competing interests to declare.</label></li>
+                <li><label><input id="temp2" type="radio" name="yesCOI" value="blahblah"  /> Yes, I have competing interests to declare (enter below):</label></li>
+              </ul>
+              <textarea name="coi" id="temp" value="Enter your competing interests..." alt="Enter your competing interests...">Enter your competing interests...</textarea>
+            </fieldset>
+          </td>
+        </tr>
+        <tr>
+          <td colspan="3" class="buttons">
+            <input type="button" value="Cancel" title="Click to close and cancel" id="btnCancelResponse"/>
+            <input name="post" value="Post" type="button" id="btnPostResponse" title="Click to Post Your Response" class="primary"/>
+          </td>
+        </tr>
+      </table>
                 </fieldset>
         </form>

head/ambra/webapp/src/main/webapp/widget/ratingDialog.ftl

@@ -21 +21 @@
   <div class="dialog annotate">
     <div class="tipu" id="dTipu"></div>
-    <div class="btn close" title="Click to close and cancel"><a id="btn_cancel_rating" title="Click to close and cancel">Cancel</a></div>
     <div class="comment">
       <h5><span class="commentPublic">Rate This Article</span></h5>
-      <p>See also <a href="${freemarker_config.getContext()}/static/ratingGuidelines.action" class="instructions">guidelines for rating</a>.</p>
-      <div class="posting pane"><form name="ratingForm" id="ratingForm" method="post" action="">
-        <input type="hidden" name="articleURI" value="${articleURI}" />  
-        <input type="hidden" name="commentTitle" id="commentTitle" value="" />
-        <input type="hidden" name="comment" id="commentArea" value="" />
-        <fieldset>
-          <legend>Compose Your Annotation</legend>
-          <span id="submitRatingMsg" class="error"></span>
-<#if isResearchArticle == true>
-          <label for="insight">Insight</label>
-          <ul class="star-rating rating edit" title="Rate insight" id="rateInsight">
-            <li class="current-rating pct0"></li>
-            <li><a href="javascript:void(0);" title="Bland" class="one-star" onclick="ambra.rating.setRatingCategory(this, 'insight', 1);">1</a></li>
-            <li><a href="javascript:void(0);" title="" class="two-stars" onclick="ambra.rating.setRatingCategory(this, 'insight', 2);">2</a></li>
-            <li><a href="javascript:void(0);" title="" class="three-stars" onclick="ambra.rating.setRatingCategory(this, 'insight', 3);">3</a></li>
-            <li><a href="javascript:void(0);" title="" class="four-stars" onclick="ambra.rating.setRatingCategory(this, 'insight', 4);">4</a></li>
-            <li><a href="javascript:void(0);" title="Profound" class="five-stars" onclick="ambra.rating.setRatingCategory(this, 'insight', 5);">5</a></li>
-          </ul>    
-          <input type="hidden" name="insight" title="insight" value="" />
-          <label for="reliability">Reliability</label>
-          <ul class="star-rating rating edit" title="Rate reliability" id="rateReliability">
-            <li class="current-rating pct0"></li>
-            <li><a href="javascript:void(0);" title="Tenuous" class="one-star" onclick="ambra.rating.setRatingCategory(this, 'reliability', 1);">1</a></li>
-            <li><a href="javascript:void(0);" title="" class="two-stars" onclick="ambra.rating.setRatingCategory(this, 'reliability', 2);">2</a></li>
-            <li><a href="javascript:void(0);" title="" class="three-stars" onclick="ambra.rating.setRatingCategory(this, 'reliability', 3);">3</a></li>
-            <li><a href="javascript:void(0);" title="" class="four-stars" onclick="ambra.rating.setRatingCategory(this, 'reliability', 4);">4</a></li>
-            <li><a href="javascript:void(0);" title="Unassailable" class="five-stars" onclick="ambra.rating.setRatingCategory(this, 'reliability', 5);">5</a></li>
-          </ul>    
-          <input type="hidden" name="reliability" title="reliability" value="" />
-          <label for="style">Style</label>
-          <ul class="star-rating rating edit" title="Rate style" id="rateStyle">
-            <li class="current-rating pct0"></li>
-            <li><a href="javascript:void(0);" title="Crude" class="one-star" onclick="ambra.rating.setRatingCategory(this, 'style', 1);">1</a></li>
-            <li><a href="javascript:void(0);" title="" class="two-stars" onclick="ambra.rating.setRatingCategory(this, 'style', 2);">2</a></li>
-            <li><a href="javascript:void(0);" title="" class="three-stars" onclick="ambra.rating.setRatingCategory(this, 'style', 3);">3</a></li>
-            <li><a href="javascript:void(0);" title="" class="four-stars" onclick="ambra.rating.setRatingCategory(this, 'style', 4);">4</a></li>
-            <li><a href="javascript:void(0);" title="Elegant" class="five-stars" onclick="ambra.rating.setRatingCategory(this, 'style', 5);">5</a></li>
-          </ul>    
-          <input type="hidden" name="style" title="style" value="" />
-<#else>
-          <label for="singleRating">Rating</label>
-          <ul class="star-rating rating edit" title="Rate single" id="rateSingleRating">
-            <li class="current-rating pct0"></li>
-            <li><a href="javascript:void(0);" title="Bland" class="one-star" onclick="ambra.rating.setRatingCategory(this, 'singleRating', 1);">1</a></li>
-            <li><a href="javascript:void(0);" title="" class="two-stars" onclick="ambra.rating.setRatingCategory(this, 'singleRating', 2);">2</a></li>
-            <li><a href="javascript:void(0);" title="" class="three-stars" onclick="ambra.rating.setRatingCategory(this, 'singleRating', 3);">3</a></li>
-            <li><a href="javascript:void(0);" title="" class="four-stars" onclick="ambra.rating.setRatingCategory(this, 'singleRating', 4);">4</a></li>
-            <li><a href="javascript:void(0);" title="Profound" class="five-stars" onclick="ambra.rating.setRatingCategory(this, 'singleRating', 5);">5</a></li>
-          </ul>    
-          <input type="hidden" name="singleRating" title="singleRating" value="" />
-</#if>
-          <label for="cTitle" class="commentPublic"><span class="none">Enter your comment title</span><!-- error message text <em>A title is required for all public annotations</em>--></label>
-          <input type="text" name="cTitle" id="cTitle" value="Enter your comment title..." class="title commentPublic" alt="Enter your comment title..." />
-          <label for="cArea"><span class="none">Enter your comment</span><!-- error message text <em>Please enter your annotation</em>--></label>
-          <textarea name="cArea" id="cArea" value="Enter your comment..." alt="Enter your comment...">Enter your comment...</textarea>
-          <div class="btnwrap commentPublic"><input type="button" value="Post" class="commentPublic" title="Click to post your annotation publicly" id="btn_post_rating"/></div>
-        </fieldset>
-      </form></div>
+      <div class="instructions">Please follow our <a  href="/static/commentGuidelines.action">guidelines for commenting/rating</a> and review our <a href="#">competing interests policy</a>. Comments that do not conform to our guidelines will be promptly removed and the user account disabled. The following must be avoided:
+        <ol>
+          <li>Remarks that could be interpreted as allegations of misconduct</li>
+          <li>Unsupported assertions or statements</li>
+          <li>Inflammatory or insulting language</li>
+        </ol>
+      </div>
+      <div class="posting pane">
+        <form name="ratingForm" id="ratingForm" method="post" action="">
+          <input type="hidden" name="articleURI" value="${articleURI}" />  
+          <input type="hidden" name="commentTitle" id="commentTitle" value="" />
+          <input type="hidden" name="comment" id="commentArea" value="" />
+          <fieldset>
+            <legend>Compose Your Annotation</legend>
+            <span id="submitRatingMsg" class="error"></span>
+            <table class="layout">
+              <tr>
+                <td rowspan="2">
+      <#if isResearchArticle == true>
+                  <label for="insight">Insight</label>
+                  <ul class="star-rating rating edit" title="Rate insight" id="rateInsight">
+                    <li class="current-rating pct0"></li>
+                    <li><a href="javascript:void(0);" title="Bland" class="one-star" onclick="ambra.rating.setRatingCategory(this, 'insight', 1);">1</a></li>
+                    <li><a href="javascript:void(0);" title="" class="two-stars" onclick="ambra.rating.setRatingCategory(this, 'insight', 2);">2</a></li>
+                    <li><a href="javascript:void(0);" title="" class="three-stars" onclick="ambra.rating.setRatingCategory(this, 'insight', 3);">3</a></li>
+                    <li><a href="javascript:void(0);" title="" class="four-stars" onclick="ambra.rating.setRatingCategory(this, 'insight', 4);">4</a></li>
+                    <li><a href="javascript:void(0);" title="Profound" class="five-stars" onclick="ambra.rating.setRatingCategory(this, 'insight', 5);">5</a></li>
+                  </ul>    
+                  <input type="hidden" name="insight" title="insight" value="" />
+                  <label for="reliability">Reliability</label>
+                  <ul class="star-rating rating edit" title="Rate reliability" id="rateReliability">
+                    <li class="current-rating pct0"></li>
+                    <li><a href="javascript:void(0);" title="Tenuous" class="one-star" onclick="ambra.rating.setRatingCategory(this, 'reliability', 1);">1</a></li>
+                    <li><a href="javascript:void(0);" title="" class="two-stars" onclick="ambra.rating.setRatingCategory(this, 'reliability', 2);">2</a></li>
+                    <li><a href="javascript:void(0);" title="" class="three-stars" onclick="ambra.rating.setRatingCategory(this, 'reliability', 3);">3</a></li>
+                    <li><a href="javascript:void(0);" title="" class="four-stars" onclick="ambra.rating.setRatingCategory(this, 'reliability', 4);">4</a></li>
+                    <li><a href="javascript:void(0);" title="Unassailable" class="five-stars" onclick="ambra.rating.setRatingCategory(this, 'reliability', 5);">5</a></li>
+                  </ul>    
+                  <input type="hidden" name="reliability" title="reliability" value="" />
+                  <label for="style">Style</label>
+                  <ul class="star-rating rating edit" title="Rate style" id="rateStyle">
+                    <li class="current-rating pct0"></li>
+                    <li><a href="javascript:void(0);" title="Crude" class="one-star" onclick="ambra.rating.setRatingCategory(this, 'style', 1);">1</a></li>
+                    <li><a href="javascript:void(0);" title="" class="two-stars" onclick="ambra.rating.setRatingCategory(this, 'style', 2);">2</a></li>
+                    <li><a href="javascript:void(0);" title="" class="three-stars" onclick="ambra.rating.setRatingCategory(this, 'style', 3);">3</a></li>
+                    <li><a href="javascript:void(0);" title="" class="four-stars" onclick="ambra.rating.setRatingCategory(this, 'style', 4);">4</a></li>
+                    <li><a href="javascript:void(0);" title="Elegant" class="five-stars" onclick="ambra.rating.setRatingCategory(this, 'style', 5);">5</a></li>
+                  </ul>    
+                  <input type="hidden" name="style" title="style" value="" />
+      <#else>
+                  <label for="singleRating">Rating</label>
+                  <ul class="star-rating rating edit" title="Rate single" id="rateSingleRating">
+                    <li class="current-rating pct0"></li>
+                    <li><a href="javascript:void(0);" title="Bland" class="one-star" onclick="ambra.rating.setRatingCategory(this, 'singleRating', 1);">1</a></li>
+                    <li><a href="javascript:void(0);" title="" class="two-stars" onclick="ambra.rating.setRatingCategory(this, 'singleRating', 2);">2</a></li>
+                    <li><a href="javascript:void(0);" title="" class="three-stars" onclick="ambra.rating.setRatingCategory(this, 'singleRating', 3);">3</a></li>
+                    <li><a href="javascript:void(0);" title="" class="four-stars" onclick="ambra.rating.setRatingCategory(this, 'singleRating', 4);">4</a></li>
+                    <li><a href="javascript:void(0);" title="Profound" class="five-stars" onclick="ambra.rating.setRatingCategory(this, 'singleRating', 5);">5</a></li>
+                  </ul>    
+                  <input type="hidden" name="singleRating" title="singleRating" value="" />
+      </#if>
+                  <label for="cTitle" class="commentPublic"><span class="none">Enter your comment title</span><!-- error message text <em>A title is required for all public annotations</em>--></label>
+                  <input type="text" name="cTitle" id="cTitle" value="Enter your comment title..." class="title commentPublic" alt="Enter your comment title..." />
+                  <label for="cArea"><span class="none">Enter your comment</span><!-- error message text <em>Please enter your annotation</em>--></label>
+                  <textarea name="cArea" id="cArea" value="Enter your comment..." alt="Enter your comment...">Enter your comment...</textarea>
+                </td>
+                <td rowspan="2">&nbsp;</td>
+                <td class="coi">
+                  <fieldset>
+                    <legend>Declare any competing interests.</legend>
+                    <ul>
+                      <li><label><input id="temp" type="radio" checked="checked" name="noCOI" value="blah"  /> No, I don't have any competing interests to declare.</label></li>
+                      <li><label><input id="temp2" type="radio" name="yesCOI" value="blahblah"  /> Yes, I have competing interests to declare (enter below):</label></li>
+                    </ul>
+                    <textarea name="coi" id="temp" value="Enter your competing interests..." alt="Enter your competing interests...">Enter your competing interests...</textarea>
+                  </fieldset>
+                </td>
+              </tr>
+              <tr>
+                <td class="buttons">
+                  <input type="button" value="Cancel" title="Click to close and cancel" id="btn_cancel_rating"/>
+                  <input type="button" value="Submit" title="Click to post your annotation publicly" id="btn_post_rating" class="primary"/>
+                </td>
+              </tr>
+            </table>
+          </fieldset>
+        </form>
+      </div>
     </div>
   </div>