Menu
▾
▴
[Sciret-svn] SF.net SVN: sciret:[682] trunk
|
From: <al...@us...> - 2008-09-18 09:29:40
|
Revision: 682
http://sciret.svn.sourceforge.net/sciret/?rev=682&view=rev
Author: alpeb
Date: 2008-09-18 16:29:19 +0000 (Thu, 18 Sep 2008)
Log Message:
-----------
- In home, separated categories and articles in tabs
- Replaced jquery's tabs in the article view with YUI's
Modified Paths:
--------------
trunk/javascript/general.js
trunk/style.css
trunk/templates/MainView.tpl
trunk/templates/ViewArticle.tpl
trunk/templates/head.tpl
Modified: trunk/javascript/general.js
===================================================================
--- trunk/javascript/general.js 2008-09-16 23:18:51 UTC (rev 681)
+++ trunk/javascript/general.js 2008-09-18 16:29:19 UTC (rev 682)
@@ -966,25 +966,6 @@
});
// *********************************************************
-// ** TABS HANDLING **
-// *********************************************************
-$j(document).ready(function() {
- $j(function () {
- var tabContainers = $j('#tabs > div.tab');
-
- $j('.view_mode a').click(function () {
- tabContainers.hide();
- tabContainers.filter(this.hash).show();
- $j('.view_mode a').removeClass('active_tab');
- $j(this).addClass('active_tab');
- return false;
- }).filter(':first').click();
- });
-
-});
-
-
-// *********************************************************
// ** OTHER FUNCTIONS **
// *********************************************************
function saveDraft(form) {
Modified: trunk/style.css
===================================================================
--- trunk/style.css 2008-09-16 23:18:51 UTC (rev 681)
+++ trunk/style.css 2008-09-18 16:29:19 UTC (rev 682)
@@ -301,35 +301,6 @@
font-size: 1.3em;
}
-.view_mode {
- margin-top: 20px;
- margin-bottom: 20px;
- padding-left: 100px;
- padding-bottom: 5px;
- padding-top: 7px;
- background: url(images/bg_view_mode.jpg) no-repeat 0 bottom;
- border-top-color: #e8e8e8;
-}
-
-.view_mode span a {
- margin-left: 3px;
- padding: 5px 10px;
- border-top: 1px solid #e4e4e4;
- border-right: 1px solid #b2b2b2;
- border-left: 1px solid #b2b2b2;
- color: #4c4c4c;
- font-weight: bold;
-}
-
-.active_tab {
- background-color: #fff;
-}
-
-.view_mode span a:hover {
- text-decoration: none;
- padding-top: 7px;
-}
-
.author {
background: transparent url(images/bg_author.gif) no-repeat scroll right;
color: #fff;
@@ -836,3 +807,201 @@
#foot a:hover {
border-bottom-color: #777;
}
+
+/* ##################################################### */
+/* TABS */
+/* Customization of YUI's Sam skin for tabs: */
+/* yui/build/tabview/assets/skins/sam/tabbiew-skin.css */
+/* ##################################################### */
+/* .yui-navset defaults to .yui-navset-top */
+.yui-skin-sam .yui-navset .yui-nav,
+.yui-skin-sam .yui-navset .yui-navset-top .yui-nav { /* protect nested tabviews from other orientations */
+ border:none; /* color between tab list and content */
+ margin-top: 20px;
+ margin-bottom: 20px;
+ padding-left: 100px;
+ padding-top: 7px;
+ background: url(images/bg_view_mode.jpg) no-repeat 0 bottom;
+ Xposition:relative;
+ zoom:1;
+}
+
+.yui-skin-sam .yui-navset .yui-nav li,
+.yui-skin-sam .yui-navset .yui-navset-top .yui-nav li {
+ margin:0 0.16em 0 0; /* space between tabs */
+ padding:1px 0 0; /* gecko: make room for overflow */
+ zoom:1;
+}
+
+.yui-skin-sam .yui-navset .yui-nav .selected,
+.yui-skin-sam .yui-navset .yui-navset-top .yui-nav .selected {
+ margin:0 0.16em -1px 0; /* for overlap */
+}
+
+.yui-skin-sam .yui-navset .yui-nav a,
+.yui-skin-sam .yui-navset .yui-navset-top .yui-nav a {
+ position:relative;
+ text-decoration:none;
+ background:#d8d8d8 url(javascript/yui/build/assets/skins/sam/sprite.png) repeat-x; /* tab background */
+ margin-left: 3px;
+ padding: 5px 10px;
+ border-top: 1px solid #e4e4e4;
+ border-right: 1px solid #b2b2b2;
+ border-left: 1px solid #b2b2b2;
+ border-bottom:none;
+ color: #4c4c4c;
+ font-weight: bold;
+}
+
+.yui-skin-sam .yui-navset .yui-nav a em,
+.yui-skin-sam .yui-navset .yui-navset-top .yui-nav a em {
+ border:solid #a3a3a3;
+ border-width:1px 0 0;
+ cursor:hand;
+ padding:0.25em .75em;
+ left:0; right: 0; bottom: 0; /* protect from other orientations */
+ top:-1px; /* for 1px rounded corners */
+ position:relative;
+}
+
+.yui-skin-sam .yui-navset .yui-nav .selected a,
+.yui-skin-sam .yui-navset .yui-nav .selected a:focus, /* no focus effect for selected */
+.yui-skin-sam .yui-navset .yui-nav .selected a:hover { /* no hover effect for selected */
+ background:none;
+ color:#000;
+ background-color: #fff;
+}
+
+.yui-skin-sam .yui-navset .yui-nav a:hover,
+.yui-skin-sam .yui-navset .yui-nav a:focus {
+ background:none;
+ outline:0;
+}
+
+.yui-skin-sam .yui-navset .yui-nav .selected a em {
+ padding:0.35em 0.75em; /* raise selected tab */
+}
+
+.yui-skin-sam .yui-navset .yui-nav .selected a,
+.yui-skin-sam .yui-navset .yui-nav .selected a em {
+ border-top: 1px solid #e4e4e4;
+ border-right: 1px solid #b2b2b2;
+ border-left: 1px solid #b2b2b2;
+}
+
+.yui-skin-sam .yui-navset .yui-content {
+ background:#fff;
+}
+
+.yui-skin-sam .yui-navset .yui-content,
+.yui-skin-sam .yui-navset .yui-navset-top .yui-content {
+ border:none;
+ padding:0; /* content padding */
+}
+
+/* left and right orientations */
+.yui-skin-sam .yui-navset-left .yui-nav,
+.yui-skin-sam .yui-navset .yui-navset-left .yui-nav,
+.yui-skin-sam .yui-navset .yui-navset-right .yui-nav,
+.yui-skin-sam .yui-navset-right .yui-nav {
+ border-width:0 5px 0 0;
+ Xposition:absolute; /* from tabview-core; have to reiterate for skin-sam due to pos:rel on skin-sam yui-nav */
+ top:0; bottom:0; /* stretch to fill content height */
+}
+
+.yui-skin-sam .yui-navset .yui-navset-right .yui-nav,
+.yui-skin-sam .yui-navset-right .yui-nav {
+ border-width:0 0 0 5px;
+}
+
+.yui-skin-sam .yui-navset-left .yui-nav li,
+.yui-skin-sam .yui-navset .yui-navset-left .yui-nav li,
+.yui-skin-sam .yui-navset-right .yui-nav li {
+ margin:0 0 0.16em; /* space between tabs */
+ padding:0 0 0 1px; /* gecko: make room for overflow */
+}
+
+.yui-skin-sam .yui-navset-right .yui-nav li {
+ padding:0 1px 0 0; /* gecko: make room for overflow */
+}
+
+.yui-skin-sam .yui-navset-left .yui-nav .selected,
+.yui-skin-sam .yui-navset .yui-navset-left .yui-nav .selected {
+ margin:0 -1px 0.16em 0;
+}
+
+.yui-skin-sam .yui-navset-right .yui-nav .selected {
+ margin:0 0 0.16em -1px;
+}
+
+.yui-skin-sam .yui-navset-left .yui-nav a,
+.yui-skin-sam .yui-navset-right .yui-nav a {
+ border-width:1px 0;
+}
+
+.yui-skin-sam .yui-navset-left .yui-nav a em,
+.yui-skin-sam .yui-navset .yui-navset-left .yui-nav a em,
+.yui-skin-sam .yui-navset-right .yui-nav a em {
+ border-width:0 0 0 1px;
+ padding:0.2em .75em;
+ top:auto;
+ left:-1px; /* for 1px rounded corners */
+}
+
+.yui-skin-sam .yui-navset-right .yui-nav a em {
+ border-width:0 1px 0 0;
+ left:auto;
+ right:-1px; /* for 1px rounded corners */
+}
+
+.yui-skin-sam .yui-navset-left .yui-nav a,
+.yui-skin-sam .yui-navset-left .yui-nav .selected a,
+.yui-skin-sam .yui-navset-left .yui-nav a:hover,
+.yui-skin-sam .yui-navset-right .yui-nav a,
+.yui-skin-sam .yui-navset-right .yui-nav .selected a,
+.yui-skin-sam .yui-navset-right .yui-nav a:hover,
+.yui-skin-sam .yui-navset-bottom .yui-nav a,
+.yui-skin-sam .yui-navset-bottom .yui-nav .selected a,
+.yui-skin-sam .yui-navset-bottom .yui-nav a:hover {
+ background-image:none; /* no left-right or bottom-top gradient */
+}
+
+.yui-skin-sam .yui-navset-left .yui-content {
+ border:1px solid #808080; /* content border */
+ border-left-color:#243356; /* different border color */
+}
+
+/* bottom orientation */
+.yui-skin-sam .yui-navset-bottom .yui-nav,
+.yui-skin-sam .yui-navset .yui-navset-bottom .yui-nav {
+ border-width:5px 0 0; /* color between tab list and content */
+}
+
+.yui-skin-sam .yui-navset .yui-navset-bottom .yui-nav .selected,
+.yui-skin-sam .yui-navset-bottom .yui-nav .selected {
+ margin:-1px 0.16em 0 0; /* for overlap */
+}
+
+.yui-skin-sam .yui-navset .yui-navset-bottom .yui-nav li,
+.yui-skin-sam .yui-navset-bottom .yui-nav li {
+ padding:0 0 1px 0; /* gecko: make room for overflow */
+ vertical-align:top;
+}
+
+.yui-skin-sam .yui-navset .yui-navset-bottom .yui-nav li a,
+.yui-skin-sam .yui-navset-bottom .yui-nav li a {
+}
+
+.yui-skin-sam .yui-navset .yui-navset-bottom .yui-nav a em,
+.yui-skin-sam .yui-navset-bottom .yui-nav a em {
+ border-width:0 0 1px;
+ top:auto;
+ bottom:-1px; /* for 1px rounded corners */
+}
+
+.yui-skin-sam .yui-navset-bottom .yui-content,
+.yui-skin-sam .yui-navset .yui-navset-bottom .yui-content {
+ border:1px solid #808080; /* content border */
+ border-bottom-color:#243356; /* different border color */
+}
+
Modified: trunk/templates/MainView.tpl
===================================================================
--- trunk/templates/MainView.tpl 2008-09-16 23:18:51 UTC (rev 681)
+++ trunk/templates/MainView.tpl 2008-09-18 16:29:19 UTC (rev 682)
@@ -8,62 +8,82 @@
* @packager Keyboard Monkeys
*/
-->
-<table class="categoriesTable">
- <tr>
- <td>{path}</td>
- </tr>
- <tr>
- <td>
- <table "width=100%" border="0">
- {categories}
+<script type="text/javascript">
+ YAHOO.util.Event.onDOMReady(function() {
+ var mainViewTabs = new YAHOO.widget.TabView("mainViewTabs");
+ });
+</script>
+<div id="mainViewTabs" >
+ <ul class="yui-nav">
+ <li class="selected">
+ <a href="#categories">[l]Categories[/l]</a>
+ </li>
+ <li>
+ <a href="#articles">[l]Articles[/l]</a>
+ </li>
+ </ul>
+ <div class="yui-content">
+ <div>
+ <table class="categoriesTable">
+ <tr>
+ <td>{path}</td>
+ </tr>
+ <tr>
+ <td>
+ <table "width=100%" border="0">
+ {categories}
+ </table>
+ </td>
+ </tr>
</table>
- </td>
- </tr>
-</table>
+ </div>
+ <div>
+ <div class="title_view">
+ <div class="title_content">
+ <span>
+ {navigationTitle}
+ <a href="javascript:void(0)" onclick="addFavorite('location')"><img id="favoriteStarImg" src="images/star.png" alt="[l]Add location to favorites[/l]" title="[l]Add location to favorites[/l]" style="display:{favoriteLocationStarImgDisplay}" /><img id="unFavoriteStarImg" src="images/star_crossed.png" alt="[l]Remove location from favorites[/l]" title="[l]Remove location from favorites[/l]" style="display:{unFavoriteLocationStarImgDisplay}" /><img id="favoriteProgressImg" src="images/progress.gif" style="display:none" /></a>
+ </span>
+ </div>
+ <p class="view_left">
+ <!-- BEGIN viewAllLink_block -->
+ <a href="{viewAllLink}" style="font-weight:bold; font-size:10px">[l]View All[/l]</a>
+ <!-- END viewAllLink_block -->
+ <!-- BEGIN viewArticlesLink_block -->
+ <a href="{viewArticlesLink}" style="font-weight:bold; font-size:10px">[l]Articles only[/l]</a>
+ <!-- END viewArticlesLink_block -->
+ <!-- BEGIN viewBookmarksLink_block -->
+ <a href="{viewBookmarksLink}" style="font-weight:bold; font-size:10px">[l]Bookmarks only[/l]</a>
+ <!-- END viewBookmarksLink_block -->
+ </p>
+ <p class="view_right">[l]Sort by:[/l]
+ <span class="button_gray"><a href="{sortByDateLink}">[l]Date[/l]</a>{sortByDateArrow}</span>
+ <span class="button_gray"><a href="{sortByViewsLink}">[l]Views[/l]</a>{sortByViewsArrow}</span>
+ </p>
+ </div><!--end title_view-->
-<div class="title_view">
- <div class="title_content">
- <span>
- {navigationTitle}
- <a href="javascript:void(0)" onclick="addFavorite('location')"><img id="favoriteStarImg" src="images/star.png" alt="[l]Add location to favorites[/l]" title="[l]Add location to favorites[/l]" style="display:{favoriteLocationStarImgDisplay}" /><img id="unFavoriteStarImg" src="images/star_crossed.png" alt="[l]Remove location from favorites[/l]" title="[l]Remove location from favorites[/l]" style="display:{unFavoriteLocationStarImgDisplay}" /><img id="favoriteProgressImg" src="images/progress.gif" style="display:none" /></a>
- </span>
+ <!-- BEGIN articles_block -->
+ <h2>
+ <i>({art_num}) </i>
+ <img src="images/{articleImage}" />
+ <a href="{art_link}">{art_title}</a> {bookmark_edit}
+ <!-- BEGIN question_block -->
+ ({questionStr})
+ <!-- END question_block -->
+ </h2>
+ <div>
+ {modifOrCreated} {art_date} - {img_stars} {attachment}
+ </div>
+ <div class="art_category">{art_category}</div>
+ <p>{art_excerpt}</p>
+ <div class="author"><span>{art_author}</span></div>
+ <!-- END articles_block -->
+ <!-- BEGIN noArticles_block -->
+ <div style="text-align:center; margin-top:15px">
+ {noArticlesMessage}
+ </div>
+ <!-- END noArticles_block -->
+ {paginationLinks}
+ </div>
</div>
- <p class="view_left">
- <!-- BEGIN viewAllLink_block -->
- <a href="{viewAllLink}" style="font-weight:bold; font-size:10px">[l]View All[/l]</a>
- <!-- END viewAllLink_block -->
- <!-- BEGIN viewArticlesLink_block -->
- <a href="{viewArticlesLink}" style="font-weight:bold; font-size:10px">[l]Articles only[/l]</a>
- <!-- END viewArticlesLink_block -->
- <!-- BEGIN viewBookmarksLink_block -->
- <a href="{viewBookmarksLink}" style="font-weight:bold; font-size:10px">[l]Bookmarks only[/l]</a>
- <!-- END viewBookmarksLink_block -->
- </p>
- <p class="view_right">[l]Sort by:[/l]
- <span class="button_gray"><a href="{sortByDateLink}">[l]Date[/l]</a>{sortByDateArrow}</span>
- <span class="button_gray"><a href="{sortByViewsLink}">[l]Views[/l]</a>{sortByViewsArrow}</span>
- </p>
-</div><!--end title_view-->
-
-<!-- BEGIN articles_block -->
-<h2>
- <i>({art_num}) </i>
- <img src="images/{articleImage}" />
- <a href="{art_link}">{art_title}</a> {bookmark_edit}
- <!-- BEGIN question_block -->
- ({questionStr})
- <!-- END question_block -->
-</h2>
-<div>
- {modifOrCreated} {art_date} - {img_stars} {attachment}
</div>
-<div class="art_category">{art_category}</div>
-<p>{art_excerpt}</p>
-<div class="author"><span>{art_author}</span></div>
-<!-- END articles_block -->
-<!-- BEGIN noArticles_block -->
-<div style="text-align:center; margin-top:15px">
- {noArticlesMessage}
-</div>
-<!-- END noArticles_block -->
-{paginationLinks}
Modified: trunk/templates/ViewArticle.tpl
===================================================================
--- trunk/templates/ViewArticle.tpl 2008-09-16 23:18:51 UTC (rev 681)
+++ trunk/templates/ViewArticle.tpl 2008-09-18 16:29:19 UTC (rev 682)
@@ -10,6 +10,9 @@
-->
<script type="text/javascript">
var artId = {art_id};
+ YAHOO.util.Event.onDOMReady(function() {
+ var articleTabs = new YAHOO.widget.TabView("articleTabs");
+ });
</script>
<div class="title_view">
<div class="title_content">
@@ -58,76 +61,86 @@
</p>
<span id="publishArticleStatusMessage" style="font-weight:bold; color:red"></span>
</div><!--end title_view-->
-<div id="tabs">
- <div class="view_mode">
- <span><a href="#tab_article">[l]Article[/l]</a></span> <span><a href="#tab_links">[l]Links & Files[/l]</a></span> <span><a href="#tab_history">[l]History[/l]</a></span>
- </div>
- <div id="tab_article" class="tab">
- <h2>
- <a href="">{title}</a>
- </h2>
- <p>{content}</p>
- <div id="commentsDiv">
- {commentsTable}
+<div id="articleTabs">
+ <ul class="yui-nav">
+ <li class="selected">
+ <a href="#article">[l]Article[/l]</a>
+ </li>
+ <li>
+ <a href="#links">[l]Links & Files[/l]</a>
+ </li>
+ <li>
+ <a href="#history">[l]History[/l]</a>
+ </li>
+ </ul>
+ <div class="yui-content">
+ <div>
+ <h2>
+ <a href="">{title}</a>
+ </h2>
+ <p>{content}</p>
+ <div id="commentsDiv">
+ {commentsTable}
+ </div>
</div>
- </div>
- <div id="tab_links" class="tab">
- <h2>
- [l]Attached Files[/l]
- </h2>
- <form method="POST" action="{form_del_action}">
- <ul>
- <!-- BEGIN file_item_block -->
- <li>
- {img_delete}
- <a href="{getFileLink}">{file_name}</a>: {file_comment}
- </li>
- <!-- END file_item_block -->
- </ul>
- </form>
- <!-- BEGIN file_upload_block -->
- <form method="POST" name="file_form" action="{uploadAction}" enctype="multipart/form-data">
- [l]Attach File[/l]: <input type='file' name='new_file'>
- [l]comment[/l]: <input type="text" name="file_comment">
- <input type=submit name="upload" value="[l]Upload[/l]">
- ([l]Maximum file size[/l]: {maxFileSize})
- </form>
- <!-- END file_upload_block -->
- <div id="relatedArticlesDiv">
- {relatedArticlesTable}
+ <div>
+ <h2>
+ [l]Attached Files[/l]
+ </h2>
+ <form method="POST" action="{form_del_action}">
+ <ul>
+ <!-- BEGIN file_item_block -->
+ <li>
+ {img_delete}
+ <a href="{getFileLink}">{file_name}</a>: {file_comment}
+ </li>
+ <!-- END file_item_block -->
+ </ul>
+ </form>
+ <!-- BEGIN file_upload_block -->
+ <form method="POST" name="file_form" action="{uploadAction}" enctype="multipart/form-data">
+ [l]Attach File[/l]: <input type='file' name='new_file'>
+ [l]comment[/l]: <input type="text" name="file_comment">
+ <input type=submit name="upload" value="[l]Upload[/l]">
+ ([l]Maximum file size[/l]: {maxFileSize})
+ </form>
+ <!-- END file_upload_block -->
+ <div id="relatedArticlesDiv">
+ {relatedArticlesTable}
+ </div>
</div>
+ <div>
+ <h2>
+ [l]History[/l]
+ </h2>
+ <table collspace="0" >
+ <tr>
+ <th scope="col" class="specth">
+ [l]Date[/l]
+ </th>
+ <th scope="col">
+ [l]User[/l]
+ </th>
+ <th scope="col">
+ [l]Action[/l]
+ </th>
+ </tr>
+ <!-- BEGIN history_line_block -->
+ <tr>
+ <td class="spec">
+ {historyDate}
+ </td>
+ <td>
+ {historyUser}
+ </td>
+ <td>
+ {historyAction}
+ </td>
+ </tr>
+ <!-- END history_line_block -->
+ </table>
+ </div>
</div>
- <div id="tab_history" class="tab">
- <h2>
- [l]History[/l]
- </h2>
- <table collspace="0" >
- <tr>
- <th scope="col" class="specth">
- [l]Date[/l]
- </th>
- <th scope="col">
- [l]User[/l]
- </th>
- <th scope="col">
- [l]Action[/l]
- </th>
- </tr>
- <!-- BEGIN history_line_block -->
- <tr>
- <td class="spec">
- {historyDate}
- </td>
- <td>
- {historyUser}
- </td>
- <td>
- {historyAction}
- </td>
- </tr>
- <!-- END history_line_block -->
- </table>
- </div>
</div><!--end tabs-->
<!-- BEGIN img_delete_block -->
Modified: trunk/templates/head.tpl
===================================================================
--- trunk/templates/head.tpl 2008-09-16 23:18:51 UTC (rev 681)
+++ trunk/templates/head.tpl 2008-09-18 16:29:19 UTC (rev 682)
@@ -28,12 +28,12 @@
<script type="text/javascript" src="javascript/yui/build/calendar/calendar-min.js"></script>
<script type="text/javascript" src="javascript/yui/build/logger/logger-min.js"></script>
<script type="text/javascript" src="javascript/yui/build/json/json-min.js"></script>
+ <script type="text/javascript" src="javascript/yui/build/tabview/tabview-min.js"></script>
<!-- required by effects.js -->
<script type="text/javascript" src="javascript/effects-min.js"></script>
<script src="javascript/jquery.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript" src="javascript/general.js"></script>
- <script type="text/javascript" src="javascript/simModal.js"></script>
<script type="text/javascript" src="javascript/overlib.js"></script>
<!-- BEGIN rtl_block -->
<style>
This was sent by the SourceForge.net collaborative development platform, the world's largest Open Source development site.
|
