Changeset 7334

Timestamp:

03/03/09 13:19:31 (17 months ago)

Author:

stoomey

Message:

Images and css for article redesign. References #1115

Location:

head/ambra/webapp/src/main/webapp

Files:

• article/article_comments.ftl (modified) (2 diffs)
• article/article_related.ftl (modified) (5 diffs)
• article/article_rhc.ftl (modified) (2 diffs)
• css/screen.css (modified) (8 diffs)
• images/articleMenu_btm.gif (added)
• images/articleMenu_top.gif (added)
• images/button_info.png (added)
• images/icon_download.gif (added)
• images/icon_email.gif (added)
• images/icon_error.gif (added)
• images/icon_print.gif (added)
• images/links_alerts_bg.gif (added)
• images/rhcBox_btm.gif (added)
• images/rhcBox_more.gif (added)
• images/rhcBox_top.gif (added)

head/ambra/webapp/src/main/webapp/article/article_comments.ftl

@@ -39 +39 @@
     <div id="researchArticle" class="content corrections">
    <#else>
-    <div id="researchArticle" class="content">
+    <div id="researchArticle" class="content comments">
    </#if>
       <a id="top" name="top" toc="top" title="Top"></a>
@@ -49 +49 @@
       <#assign tab="comments" />
       <#include "article_tabs.ftl">
+      <div class="rss"><a href="#">Comments RSS</a></div>
       <#if commentary?size == 0>
-        <p>There are currently no notes or comments yet on this article.
-        You can <a href="${startDiscussionUrl}" title="Click to make a new comment on this article" class="discuss icon">add a comment</a> or return to the original article to add a note.<p>
+        <p>There are currently no notes or comments yet on this article. You can <a href="${startDiscussionUrl}" title="Click to make a new comment on this article" class="discuss icon">add a comment</a> or return to the original article to add a note.</p>
       <#else>
+        <ul>
         <#if corrections == true>
-         <a href="${commentsURL}" title="View all corrections" class="discuss icon">View all Comments</a></p>
+          <li><a href="${commentsURL}" title="View all corrections" class="discuss icon">View all Comments</a></li>
         <#else>
-         <a href="${correctionsURL}" title="View all corrections" class="corrections icon">View all corrections</a></p>
+          <li><a href="${correctionsURL}" title="View all corrections" class="corrections icon">View all corrections</a></li>
         </#if>
-        <a href="${startDiscussionUrl}" title="Click to make a new comment on this article" class="discuss icon">Make a new comment on this article</a></p>
+          <li><a href="${startDiscussionUrl}" title="Click to make a new comment on this article" class="discuss icon">Make a new comment on this article</a></li>
+        </ul>
         <table class="directory" cellpadding="0" cellspacing="0">
           <#list commentary as comment>

head/ambra/webapp/src/main/webapp/article/article_related.ftl

@@ -28 +28 @@
     </form>
 
-    <div id="researchArticle" class="content">
+    <div id="researchArticle" class="content related">
       <a id="top" name="top" toc="top" title="Top"></a>
       <div id="contentHeader"><p>Open Access</p><p id="articleType">${articleType.heading}</p></div>
@@ -35 +35 @@
       <#include "article_tabs.ftl">
 
-      <h1>Related Articles (i)</h1>
+      <h2>Related Articles <a href="#" class="info">info</a></h2>
 
-      <div>Related Subject Categories</div>
+      <h3>Related Subject Categories</h3>
       <ul>
         <#list articleInfo.categories as cat>
@@ -44 +44 @@
       </ul>
 
-      <div>Related Articles on the web <img id="relatedArticlesSpinner" src="../../images/loading.gif" height="20" width="20" class="loading" /></div>
+      <h3>Related Articles on the web <img id="relatedArticlesSpinner" src="../../images/loading.gif" height="20" width="20" class="loading" /></h3>
       <ul>
         <li><a href="http://scholar.google.com/scholar?hl=en&lr=&q=related:${docURL?url}&btnG=Search">Google Scholar</a></li>
@@ -50 +50 @@
       </ul>
 
-      <div>Cited in: <img id="relatedCitesSpinner" src="../../images/loading.gif" height="20" width="20" class="loading" /></div>
+      <h3>Cited in <img id="relatedCitesSpinner" src="../../images/loading.gif" height="20" width="20" class="loading" /></h3>
       <div id="relatedCites"></div>
       <div>Search for citations on <a href="http://scholar.google.com/scholar?hl=en&lr=&cites=${docURL?url}">Google Scholar</a>.</div>
 
-      <div>Related Blog Posts (i) <img id="relatedBlogSpinner" src="../../images/loading.gif" height="20" width="20" class="loading" /></div>
+      <h2>Related Blog Posts <a href="#" class="info">info</a> <img id="relatedBlogSpinner" src="../../images/loading.gif" height="20" width="20" class="loading" /></h2>
       <div id="relatedBlogPosts"></div>
 
-      Search for related blog posts on <a href="http://blogsearch.google.com/blogsearch?hl=en&ie=UTF-8&q=${shortDOI?url}&btnG=Search+Blogs">Google Blogs</a></div>
+      Search for related blog posts on <a href="http://blogsearch.google.com/blogsearch?hl=en&ie=UTF-8&q=${shortDOI?url}&btnG=Search+Blogs">Google Blogs</a>
 
-      <div>Trackbacks</div>
+      <h3>Trackbacks</h3>
       <div>To trackback this article use the following trackback URL:<br/>
         <@s.url namespace="/" includeParams="none" id="trackbackURL" action="trackback" trackbackId="${articleURI}"/>
@@ -66 +66 @@
       </div>
     </div>
+  </div>
+  <div style="visibility:hidden">
+    <#include "/widget/ratingDialog.ftl">
+  </div>
 </div>
-<div style="visibility:hidden">
-  <#include "/widget/ratingDialog.ftl">
-</div>

head/ambra/webapp/src/main/webapp/article/article_rhc.ftl

@@ -90 +90 @@
             }
           </script>
-          <a style='cursor: pointer;' onclick='javascript:bookmark_in_connotea("${docURL}");'><img src='${freemarker_config.getContext()}/journals/plosJournals/images/icon_connotea_16x16.gif' alt="Connotea" title="Add to Connotea"/></a>
+          <a style='cursor: pointer;' onclick='javascript:bookmark_in_connotea("${docURL}");'><img src='${freemarker_config.getContext()}/images/icon_connotea_16x16.gif' alt="Connotea" title="Add to Connotea"/></a>
           <#-- See: http://www.connotea.org/wiki/AddToConnoteaButton -->
           <#-- Citeulike -->
-          <a href="http://www.citeulike.org/posturl?url=${docURL?url}&title=${articleInfoX.title?url}" target="_new"><img src='${freemarker_config.getContext()}/journals/plosJournals/images/icon_citeulike_16x16.gif' alt="CiteULike" title="Add to CiteULike" /></a>
+          <a href="http://www.citeulike.org/posturl?url=${docURL?url}&title=${articleInfoX.title?url}" target="_new"><img src='${freemarker_config.getContext()}/images/icon_citeulike_16x16.gif' alt="CiteULike" title="Add to CiteULike" /></a>
           <#-- For more info see http://www.citeulike.org/faq/all.adp -->
           <#-- Digg
@@ -114 +114 @@
       </li>
       <li class="email icon"><a href="${emailArticleURL}">Email this article</a></li>
-      <li class="twitter icon"><a href="http://twitter.com/home/?status=${"Check+out+this+article%3A+" + docURL?url}" title="Tweet about this article">Tweet about this article</a></li>
     </ul>
   </div>

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

@@ -124 +124 @@
 a.advanced              { background-image: url(../images/icon_advanced.gif); }
 a.browse                { background-image: url(../images/icon_browse.gif); }
+a.info { background:url(../images/button_info.png); }
 
 /* Article Icons */
@@ -311 +312 @@
 ul#links li.rss a,
 ul#links li.rss a:visited { background-image: url(../images/links_rss_bg.gif); }
+ul#links li.alerts a,
+ul#links li.alerts a:visited { background-image: url(../images/links_alerts_bg.gif); }
 
 span.new { color: #fff; float: left; display: block; }
@@ -331 +334 @@
 */
 
-/*TEMP STYLE: suppresses 2nd instance of research article title on the article page*/
-div#articleMenu + h1 { display:none; }
-
 /* article page tabs */
-div.horizontalTabs      { position:relative; border:0; margin-top:15px; padding:0; background:transparent; width:100%; }
+div.horizontalTabs      { /*position:relative;*/ border:0; margin-top:15px; padding:0; background:transparent; width:99%; }
 div.horizontalTabs:after  { content:"."; display: block; height:0; clear:left; visibility:hidden; }
-/*div#articleContainer div#researchArticle*/ ul#tabsContainer  { float:left;  margin:0!important; padding:0 0 0 10px!important; /* "!important" required for IE7 */ line-height:normal; background:transparent url("../images/tab_bg.gif") repeat-x bottom; width:640px; }
+/*div#articleContainer div#researchArticle*/ ul#tabsContainer  { float:left; clear:none; margin:0!important; padding:0 0 0 10px!important; /* "!important" required for IE7 */ line-height:normal; background:transparent url("../images/tab_bg.gif") repeat-x bottom; width:640px; }
 ul#tabsContainer ul { margin:0; padding:10px 10px 0; }
 ul#tabsContainer li             { cursor:pointer; float:left; background:url("../images/tab_left.gif") no-repeat 0% 0%; margin:0 2px; padding:0 0 0 8px; list-style:none; font-size:.9em; font-weight:bold; color:#666; }
@@ -351 +351 @@
 div.static h1,
 div.content h1,
-div.search h1 { /* article title */font-size: 2.2em;    line-height: 1.1em;     margin: 10px 0 0 0;font-weight: normal; }
+div.search h1 { font-size:1.7em; line-height:1.2em;     margin:10px 0 0 0; font-weight:bold; }
 
 
@@ -359 +359 @@
 div.pageerror p         { margin-left: 8px; }
 div.content h2  { /* article sub-title */ margin: 10px 0; font-style: italic; font-size: 1.5em; background: none; padding: 0;}
-
 div.static h2,
 div.content h3  { /* article main body heading */ font-size: 1.6em; margin: 20px 0 0 0; border-bottom: 1px solid #ccc; padding-bottom: 3px;}
@@ -411 +410 @@
 
 div.abstract    { margin: 15px 0; }
-div.articleinfo { font-size: .9em; padding: 10px;  margin: 10px 0; background: #DBDBDB url(../images/abstract_bg.gif) repeat-x top; }
+div.articleinfo { font-size: .9em; padding:0 10px;  margin:20px 0 40px 0; border-left:5px solid #c60; }
 div.contributions { }
 div.articleinfo p
@@ -446 +445 @@
 #rhc { font-size:0.9em; line-height:1.5em; }
 #rhc h6 { font-size:1em; }
-#rhc h6 a.info { display:inline-block; background:url(../images/button_info.png) no-repeat bottom left; text-indent:-9999px; height:15px; width:14px; }
+#rhc h6 a.info { display:inline-block; background-repeat:no-repeat; background-position:0 .1em; text-indent:-9999px; width:14px; }
 #rhc p { margin:3px 5px 5px 5px; }
 #rhc div.rhcBox_type1 { margin-bottom:18px; padding-bottom:8px; background:#fcd3b8 url(../images/rhcBox_btm.gif) no-repeat bottom left; zoom:1; }
@@ -534 +533 @@
 span.equation span span.note { display:inline; margin: 0;}
 span.equation img       { margin: 0 auto; display: block; padding-bottom: 10px;}
+
+/* ------ Related Page Styles ------- */
+div.related h2 { font-style:normal; }
+div.related h2 a.info { display:inline-block; background-repeat:no-repeat; background-position:0 .25em; text-indent:-9999px; width:14px; margin-top:15px; }
+div.related h3 { font-family:Verdana, Arial, Helvetica, sans-serif; font-size:1em; font-weight:bold; border:0; margin:1em 0 0 0; padding:0; }
+div.related ul { margin:0; }
+div.related ul li { list-style-type:none; background-image:none; display:inline; padding-left:0; padding-right:0.5em; }
+
+/* ------ Comment Page Styles ------- */
+div.comments ul { margin:10px 0 0 0; }
+div.comments ul li { list-style-type:none; background-image:none; padding:0; }
+div.comments ul li a.corrections { color:#f00; }
+div.comments div.rss { float:right; margin-top:10px; }
+div.comments div.rss a { background:transparent url(../images/icon_rss_small.gif) no-repeat scroll right 0.15em; padding-right:15px; }
+div.comments table.directory { margin:15px 0 0 0; width:100%; }
+div.comments table.directory { width:99%; }
+div.comments > table.directory { width:100%; } /* for modern browsers */
 
 /* ------ Inline Annotation Styles ------- */