Deme Layout

Layout None
Override default layout True
{% load item_tags %}
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

{% if item %}
<title>Deme &raquo; {% viewable_name item %}{% if action_title %} &raquo; {{ action_title }}{% endif %}</title>
{% else %}
<title>Deme{% if action_title %} &raquo; {{ action_title }}{% endif %}</title>
{% endif %}


<link rel="shortcut icon" href="{% block favicon %}{% if item %}{{ item.actual_item_type|icon_url:24 }}{% else %}{{ accepted_item_type|icon_url:24 }}{% endif %}{% endblock favicon %}" type="image/x-icon" />
<!--<link rel="shortcut icon" href="{% media_url "favicon.ico" %}" type="image/x-icon" />-->

{% universal_edit_button %}

<link rel="stylesheet" href="{% media_url "stylesheets/blueprint/screen.css" %}" type="text/css" media="screen, projection" />
<link rel="stylesheet" href="{% media_url "stylesheets/blueprint/print.css" %}" type="text/css" media="print" />
<!--[if IE]>
<link rel="stylesheet" href="{% media_url "stylesheets/blueprint/ie.css" %}" type="text/css" media="screen, projection" />
<![endif]-->
<link href="{% media_url "stylesheets/base.css" %}" media="all" rel="Stylesheet" type="text/css" />

<script type="text/javascript" src="{% media_url "javascripts/jquery-1.3.2.min.js" %}"></script>

<script type="text/javascript" src="{% media_url "javascripts/jquery-ui-1.7.1.custom.min.js" %}"></script>
<link href="{% media_url "stylesheets/smoothness/jquery-ui-1.7.1.custom.css" %}" media="all" rel="Stylesheet" type="text/css" />

<script type="text/javascript" src="{% media_url "javascripts/grid.locale-en.js" %}"></script>
<script type="text/javascript" src="{% media_url "javascripts/jquery.jqGrid.min.js" %}"></script>
<link href="{% media_url "stylesheets/ui.jqgrid.css" %}" media="all" rel="Stylesheet" type="text/css" />

<script type="text/javascript" src="{% media_url "javascripts/fg.menu.js" %}"></script>
<link href="{% media_url "stylesheets/fg.menu.css" %}" media="screen" rel="stylesheet" type="text/css" />
<!-- style exceptions for IE 6 -->
<!--[if IE 6]>
<style type="text/css">
.fg-menu-ipod .fg-menu li { width: 95%; }
.fg-menu-ipod .ui-widget-content { border:0; }
</style>
<![endif]-->

{% ifequal action 'show' %}
{% if item %}
<link rel="alternate" type="application/rss+xml" title="Action notice feed" href="{% url item_url viewer=viewer_name,action="show",noun=item.pk,format="rss" %}" />
{% endif %}
{% endifequal %}
{% ifequal action 'list' %}
<link rel="alternate" type="application/rss+xml" title="Item feed" href="{% url item_type_url viewer=viewer_name,action="list",format="rss" %}" />
{% endifequal %}
<script type="text/javascript">
// from http://www.filamentgroup.com/examples/buttonFrameworkCSS/
$(function(){
//all hover and click logic for buttons
$(".fg-button:not(.ui-state-disabled)")
.hover(
function(){
$(this).addClass("ui-state-hover");
},
function(){
$(this).removeClass("ui-state-hover");
}
)
.mousedown(function(){
$(this).parents('.fg-buttonset-single:first').find(".fg-button.ui-state-active").removeClass("ui-state-active");
if( $(this).is('.ui-state-active.fg-button-toggleable, .fg-buttonset-multi .ui-state-active') ){ $(this).removeClass("ui-state-active"); }
else { $(this).addClass("ui-state-active"); }
})
.mouseup(function(){
if(! $(this).is('.fg-button-toggleable, .fg-buttonset-single .fg-button, .fg-buttonset-multi .fg-button') ){
$(this).removeClass("ui-state-active");
}
});
});

// To give the gray "Search" text in the search box
$(document).ready(function () {
var search_box_changed = {% if search_query %}true{% else %}false{% endif %};
var search_box = document.getElementById('search_box');
search_box.onfocus = function(e){
if (!search_box_changed) {
search_box_changed = true;
search_box.value = '';
search_box.style.color = 'inherit';
}
};
search_box.onblur = function(e){
if (search_box.value == '') {
search_box_changed = false;
search_box.value = 'Search';
search_box.style.color = '#777';
}
};
search_box.onblur();
});

$(document).ready(function () {
$("#right_accordion").accordion({
fillSpace: false,
autoHeight: false,
});
});
</script>

</head>

<body>

<div class="site_outer">
<div class="site_inner">

<div class="header" style="padding-top: 3px; padding-bottom: 3px;">

<table style="margin-bottom: 0;">
<tr>

<td style="vertical-align: top; width: 200px; padding: 0;" rowspan="2">
<div class="top_left">
<a href="/"><img src="/static/filedocument/2010/10/26/deme-logo-website_.gif" alt="Deme Logo" style="height: 100px; width: 200px; border: 1px solid #aaa; background-color: #FFFFFF; -moz-border-radius: 8px; -webkit-border-radius: 8px;" /></a>
</div>

</td>

<td style="vertical-align: top; text-align: center; padding: 0; padding-left: 5px; padding-right: 5px;">

{% new_item_menu %}

<form method="get" action="{% url item_type_url viewer="item" %}" style="display: inline;">
<input type="search" id="search_box" name="q" value="{{ search_query }}" style="width: 20em;" />
{# TODO add magnifying glass #}
</form>
</td>

<td style="vertical-align: top; text-align: right; padding: 0;">
<div style="float: right;">
{% login_menu %}
</div>
<div style="clear: both;">
</div>
</td>

</tr>
<tr>
<td style="vertical-align: bottom; padding: 0; padding-left: 5px;" colspan="2">
<div style="clear: both;"></div>
{% if item %}
<div style="float: right;">
{% itemtoolbar %}
</div>
{% endif %}

<div class="crumbs">
{% crumbs %}
</div>

<div class="title">
{% block title %}
{% if item %}
<img src="{{ item.actual_item_type|icon_url:24 }}" title="{% item_type_verbose_name item %}" /> {% viewable_name item %}{% if action_title %} &raquo; {{ action_title }}{% endif %}
{% else %}
<img src="{{ accepted_item_type|icon_url:24 }}" title="{% item_type_verbose_name accepted_item_type %}" /> {% if action_title %}{{ action_title }}{% else %}{{ accepted_item_type_name_plural|capfirst }}{% endif %}
{% endif %}
{% endblock title %}
</div>
</td>
</tr>
</table>

</div>

<script type="text/javascript">
//TODO figure out padding
var PAGE_WIDTH = 960;

function increase_column_right()
{
var right_width = $('#right_table_column').width();
if( right_width >= PAGE_WIDTH*.75 ){
$('#center_table_column').hide();
$('#increasebutton').hide();
$('#right_table_column').width( .875*PAGE_WIDTH );
}
else{
$('#right_table_column').width( right_width + PAGE_WIDTH*.125 );
$('#center_table_column').width( PAGE_WIDTH*.75 - right_width );
}
}
function decrease_column_right()
{
var right_width = $('#right_table_column').width();
if( right_width <= PAGE_WIDTH*.25 ){
$('#right_table_column').hide();
$('#right_table_column_hidden').show();
$('#right_table_column_hidden').width($('#right_table_column_hidden a').width());
$('#center_table_column').width( .875*PAGE_WIDTH - $('#right_table_column_hidden').width() );
}
else{
$('#right_table_column').width( right_width - PAGE_WIDTH*.125 );
$('#center_table_column').width( PAGE_WIDTH - right_width );
$('#center_table_column').show();
$('#increasebutton').show();
}
}
function show_column_right() {
$('#right_table_column').show();
$('#right_table_column_hidden').hide();
$('#center_table_column').width(960 - $('#right_table_column').width() - $('#left_table_column').width());
}
function show_comments_big() {
$('#make_big').hide();
$('#make_normal').show();
$('.comment_body').show();
}
function hide_comments_big() {
$('#make_big').show();
$('#make_normal').hide();
$('.comment_body').hide();
}
function openCommentDialog(name)
{
var dialogBox = $('#' + name);
dialogBox.dialog({
autoOpen: false,
bgiframe: true,
modal: true,
close: function(event, ui) {dialogBox.dialog('destroy')}
});
dialogBox.dialog('open');
}
function displayHiddenDiv(name)
{
var hiddenDiv = $('#' + name);
hiddenDiv.show();
}
</script>

<div class="content_box">

{% if layout_permissions_problem %}
<div style="color: #a00; padding: 15px; margin: 15px; border: thin dotted #a00; text-align: center;">
Permissions Error: You are not authorized to view the layout, so this page is being displayed in the default layout.
</div>
{% endif %}

<table cellspacing="0">
<tr>
<td style="vertical-align: top; width: 120px; padding:0;" id="left_table_column">
<div class="ui-widget-header ui-corner-top ui-helper-clearfix" style="padding: 5px;">
Navigation
</div>
<div class="ui-widget-content ui-corner-bottom ui-helper-clearfix" style="padding: 5px;">
<ul style="list-style-type: none; margin: 0; padding: 0;">
<li{% ifequal full_path "/"%} style="font-weight: bold;"{% endifequal %}><a href="/">Home</a></li>
<li{% ifequal action "list" %}{% ifequal viewer_name "item" %} style="font-weight: bold;"{% endifequal %}{% endifequal %}><a href="{% url item_type_url viewer="item" %}">Items</a></li>
<li{% ifequal viewer_name "codegraph"%} style="font-weight: bold;"{% endifequal %}><a href="{% url item_type_url viewer="codegraph" %}">Codegraph</a></li>
<li><a href="http://deme.stanford.edu/static/docs/index.html">Docs</a></li>
</ul>
</div>
</td>

<td style="vertical-align: top; {% if item %} width: 600px; {% else %} width: 840px; {% endif %} padding:0;" id="center_table_column">
<div style="padding: 0 5px 0 5px;">
{% block content %}
{% endblock %}
</div>
</td>

{% if item %}

<td style="vertical-align: top; display: none; padding:0;" id="right_table_column_hidden">
<div class="ui-helper-clearfix" style="font-size: 60%;">
<a href="#" onclick="show_column_right(); return false;" class="fg-button ui-state-default ui-corner-all" title="Show"><div style="font-size: 9pt;">Item Data</div></a>
</div>
</td>
<td style="vertical-align: top; width: 240px; padding:0;" id="right_table_column">
<div class="ui-helper-clearfix" style="font-size: 60%;">
<a href="#" id="increasebutton" onclick="increase_column_right(); return false;" class="fg-button ui-state-default fg-button-icon-solo ui-corner-all" title="Show"><span class="ui-icon ui-icon-arrowthickstop-1-w"></span> Show</a>
<a href="#" id="decreasebutton" onclick="decrease_column_right(); return false;" class="fg-button ui-state-default fg-button-icon-solo ui-corner-all" title="Hide"><span class="ui-icon ui-icon-arrowthickstop-1-e"></span> Hide</a>
</div>

{# TODO links are black because of ui-widget-content to a #}
<div id="right_accordion">

<h3><a href="#">Item Details</a></h3>
<div id="accordion_details">
{% itemdetails %}
</div>

{% calculatecomments %}
<h3><a href="#">{{ n_comments }} comment{{ n_comments|pluralize }}</a></h3>
<div>
<div id="make_big"><a href="#" onclick="show_comments_big(); return false;">Expand Comments</a></div>
<div id="make_normal" style="display: none;"><a href="#" onclick="hide_comments_big(); return false;">Collapse Comments</a></div>
{{ comment_box }}
</div>

{% calculateactionnotices %}
<h3><a href="#">{{ n_action_notices }} action notice{{ n_action_notices|pluralize }}</a></h3>
<div>
{{ action_notice_box }}
</div>

{% calculatehistory %}
<h3><a href="#">{{ n_versions }} version{{ n_versions|pluralize }}</a></h3>
<div>
{{ history_box }}
</div>

{% calculaterelationships %}
<h3><a href="#">{{ n_relationships }} related item{{ n_relationships|pluralize }}</a></h3>
<div>
{{ relationships_box }}
</div>

<h3><a href="#">Permissions</a></h3>
<div>
{% permissions_box %}
</div>


</div>
</td>


{% endif %}
</tr>
</table>

</div>

<div class="footer">
<p>Copyright &copy;2008-{% now "Y" %} to Deme | <a href="http://github.com/mikemintz/deme/tree/master">Source Code</a> <span class="pipe">|</span> <a href="/viewing/group/23">Authors</a> | <a href="{% url item_type_url viewer="item",action="admin" %}">Admin</a> | <a href="{% url item_type_url viewer="item",action="recentchanges" %}">Recent Changes</a></p>
<p>Desktop browser | <a href="list.mobi">Mobile</a> | <a href="list.rss">RSS</a></p> {# TODO generate formats list #}
</div>

</div>
</div>

</body>

</html>

For Internet Explorer users: Click on the Tools menu, located at the top of your browser window. When the drop-down menu appears, select the option labeled Full Screen.

For Chrome users:Click on the Chrome "wrench" icon, located in the upper right hand corner of your browser window. When the drop-down menu appears, select the choice labeled Full Screen.

For Firefox user:Click on the View menu, located at the top of your browser window. When the drop-down menu appears, select the option labeled Full Screen.

For Safari users: Safari currently does not support the ability to go fullscreen.