CSOL-site/views/layout.html

183 строки
11 KiB
HTML

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge;chrome=1" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>CSOL{% block title %}{% if pageTitle %} | {{ pageTitle }}{% endif %}{% endblock %}</title>
<link rel="stylesheet" href="/media/bootstrap/css/bootstrap.css">
<link rel="stylesheet" href="/media/css/core.css">
<link rel="icon" type="image/png" href="/media/images/favicon.png">
<script type="text/javascript" src="//use.typekit.net/nht7hbp.js"></script>
<script type="text/javascript">try{Typekit.load();}catch(e){}</script>
<!--[if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
{% block head %}{% endblock %}
</head>
<body{% if bodyClass %} class="{{ bodyClass }}"{% endif %}>
<div class="wrapper primary">
<div class="inner-wrapper">
<div class="navbar navbar-static-top">
<div class="navbar-inner">
<div class="container">
<a class="brand" href="/">Chicago Summer of Learning</a>
<div class="nav-wrap">
<ul class="nav">
<li class="learn{% if navItem == 'learn' %} active{% endif %}">
<a href="/explore">Explore</a>
</li>
<li class="badges{% if navItem == 'badges' %} active{% endif %}">
<a href="/earn">Earn</a>
</li>
<li class="challenges{% if navItem == 'challenges' %} active{% endif %}">
<a href="/challenges">Level Up</a>
</li>
<li class="claim{% if navItem == 'claim' %} active{% endif %}">
<a href="/claim">Claim</a>
</li>
{% if user %}
{% if user.type == 'learner' %}
<li class="dropdown backpack{% if navItem == 'backpack' %} active{% endif %}">
<a class="dropdown-toggle" role="button" data-toggle="dropdown" id="backpack-menu-toggle">My CSOL <i class="caret"></i></a>
<ul class="dropdown-menu" role="menu" id="backpack-menu" aria-labelledby="backpack-menu-toggle">
<li role="presentation"{% if subNavItem == 'badges' %} class="active"{% endif %}>
<a role="menuitem" tabindex="-1" href="/mybadges">My Badges</a>
</li>
<li role="presentation"{% if subNavItem == 'badges' %} class="active"{% endif %}>
<a role="menuitem" tabindex="-1" href="/myapplications">My Applications</a>
</li>
<li role="presentation"{% if subNavItem == 'playlist' %} class="active"{% endif %}>
<a role="menuitem" tabindex="-1" href="/myplaylist">My Playlist</a>
</li>
<li class="divider" role="presentation" aria-hidden="true"></li>
<li role="presentation">
<a role="menuitem" tabindex="-1" href="/logout">Log Out</a>
</li>
</ul>
</li>
{% else %}
<li class="dashboard{% if navItem == 'dashboard' %} active{% endif %}">
<a href="/dashboard">My Dashboard</a>
</li>
<li class="logout">
<a href="/logout">Log out</a>
</li>
{% endif %}
{% else %}
<li class="dropdown log-in{% if navItem == 'log-in' %} active{% endif %}">
<a href="/login" class="dropdown-toggle" role="button" data-toggle="dropdown" id="menu-login-form-toggle">Log In / Sign Up <i class="caret"></i></a>
<form class="dropdown-menu" id="menu-login-form" aria-label="Log In" method="post" action="/login">
<input type="hidden" name="_csrf" value="{{ csrfToken }}">
<label for="menu-login-username">Email or Nickname:</label>
<input type="text" id="menu-login-username" name="username" required="required">
<label for="menu-login-password">Password:</label>
<input type="password" id="menu-login-password" name="password" required="required">
<button type="submit" class="btn">Submit</button>
<small>Don't have an account? <a href="/signup">Sign up.</a></small>
</form>
</li>
{% endif %}
</ul>
</div>
</div>
</div>
</div>
<div id="main" class="container">
<div class="container">
{% block notices %}
{% for type, messages in _messages %}
{% if type != 'modal' %}
{% for message in messages %}
<div class="alert alert-{{ type }}">
{{ message.value }}
</div>
{% endfor %}
{% endif %}
{% endfor %}
{% endblock %}
{% if _messages.modal %}
{% for message in _messages.modal %}
<div class="modal hide initial" tabindex="-1" role="dialog" aria-hidden="true">
{% if message.title %}
<div class="modal-header">
<h3>{{ message.title }}</h3>
</div>
{% endif %}
<div class="modal-body">
{{ message.value }}
</div>
<div class="modal-footer">
{% for button in message.buttons %}
<button class="btn {% if button.type %}btn-{{ button.type }}{% endif %}" data-dismiss="modal" aria-hidden="true">{{ button.label }}</button>
{% endfor %}
</div>
</div>
{% endfor %}
{% endif %}
{% block pageTitleWrapper %}{% if pageTitle %}<h2>{% block pageTitle %}{{ pageTitle }}{% endblock %}</h2>{% endif %}{% endblock %}
{% block content %}{% endblock %}
</div>
</div>
</div>
</div>
<div class="wrapper secondary footer">
<div class="inner-wrapper">
<div class="container">
<div class="upper clearfix">
<p class="pull-left" id="rahm">"Because we are making the right choices today, every child in Chicago has a better chance at a brighter future tomorrow."<br><span style="margin-top:5px;display:block; text-align:right;">–Mayor Rahm Emanuel</span></p>
<ul class="pull-left" id="logos">
<li><a class="logo moz" href="http://openbadges.org" target=_blank>Mozilla</a></li>
<li><a class="logo chi" href="http://www.cityofchicago.org" target=_blank>City of Chicago</a></li>
<li><a class="logo mac" href="http://macfound.org" target=_blank>MacArthur Foundation</a></li>
</ul>
<div class="pull-right" id="bubbles"><span class="lt">Join the conversation on <a href="https://www.facebook.com/ChicagoSummerOfLearning" target="_blank">Facebook</a>.</span><span class="rt">Share stories on <a href="http://twitter.com/csol2013" target="_blank&quot;">Twitter</a></span></div>
</div>
<div class="lower clearfix">
<ul class="pull-left">
<li><a href="mailto:support@chicagosummeroflearning.org">support@chicagosummeroflearning.org</a></li>
<li><span>&copy; 2013</span></li>
</ul>
<ul class="pull-right">
<li><a href="/about">About</a></li>
<li><a href="/terms">Terms</a></li>
<li><a href="/privacy">Privacy</a></li>
<li><a href="/faq">FAQ</a></li>
</ul>
</div>
</div>
</div>
</div>
{% block modal %}{% endblock %}
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="/media/bootstrap/js/bootstrap.js"></script>
<script src="/media/js/custom_logic.js"></script>
{% if _messages.modal %}
<script>
(function($) {
function next () {
var modal = modals.shift();
if (!modal)
return;
$(modal)
.modal()
.on('hidden', next);
}
var modals = [];
$('.initial[role="dialog"]').each(function(index, modal) {
modals.push(modal);
});
next();
})(jQuery);
</script>
{% endif %}
{% block finally %}{% endblock %}
</body>
</html>