Skip to content

Commit

Permalink
Adding base templates: head, header, footer, and base.html
Browse files Browse the repository at this point in the history
  • Loading branch information
Paul Craciunoiu committed Feb 13, 2010
1 parent 874b3db commit 3bef785
Show file tree
Hide file tree
Showing 4 changed files with 220 additions and 0 deletions.
52 changes: 52 additions & 0 deletions templates/base/base.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,52 @@
{% include 'base/head.html' %}

<body class="mini">
<div id="wrap" class="mini"{% if rtl %} dir="rtl"{% endif %}>
<div id="doc">
{% include 'base/header.html' %}

<div class="feature-contents">

<div id="breadcrumbs"><ul>
<li><a href="{{ locale }}/kb/">Firefox Support</a></li>
<li class="divider">/</li><li>{{ self.title() }}</li>
</ul></div>


</div>{# end .feature-contents #}

This comment has been minimized.

Sign in to view

Copy link
@jsocol

jsocol Feb 18, 2010

Comments like this are unnecessary: Fix the indent of the inner blocks, instead.

This comment has been minimized.

Sign in to view

Copy link
@jbalogh

jbalogh Feb 19, 2010

I like these comments for longer blocks than this one (like when I can't see the top on my screen).

This comment has been minimized.

Sign in to view

Copy link
@pcraciunoiu

pcraciunoiu Feb 19, 2010

Owner

Yeah. I was trying to avoid over-indentation. Anyway the DOM structure should be rewritten now that we talked to David and Laura about the approach. Will start today.

<ul id="side-menu">
<li class="first"><h3><a href="/kb/">Firefox Support</a></h3></li>
<li><a href="/kb/">Knowledge Base</a></li>
<li><a href="/forum">Support Forum</a></li>
<li><a href="/kb/Ask+a+question">Ask a Question</a></li>
<li><a href="/kb/Other+Firefox+support">Other Firefox Support</a></li>
<li><a href="/kb/How+to+contribute">How to Contribute</a></li>
{% if session %}

This comment has been minimized.

Sign in to view

Copy link
@jsocol

jsocol Feb 18, 2010

Will need to talk about how to handle this.
<li><a href="tiki-user_preferences.php">My Account</a></li>

This comment has been minimized.

Sign in to view

Copy link
@jsocol

jsocol Feb 18, 2010

These should be prefixed with /

This comment has been minimized.

Sign in to view

Copy link
@pcraciunoiu

pcraciunoiu Feb 19, 2010

Owner

Right. I was too lazy.
<li><a href="tiki-logout.php">Log Out</a></li>
{% else %}
<li><a href="/tiki-login.php">Log In</a></li>
{% endif %}
</ul>

<div id="c1c2">
<div id="wrapper">
<div id="col1" class="marginright">
<div class="marginleft content">
<div class="clearfix cbb contentwrapper" role="main">
<div class="topbar"></div>
{% block content %}content{% endblock %}
<br class="clear" />
<div class="botbar"></div>
</div>
</div>
</div>
</div>
</div>{# end #c1c2 #}

<br class="clear" />
</div>{# end #doc #}
</div>{# end #wrap #}

{% include 'base/footer.html' %}
90 changes: 90 additions & 0 deletions templates/base/footer.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,90 @@
{# start #footer #}
<div id="footer">
<div id="footer-contents" role="contentinfo">

<ul id="footer-menu">
<li><a href="http://www.mozilla.com/firefox/">Firefox</a>
<ul>
<li><a href="http://www.mozilla.com/firefox/features/">Features</a></li>
<li><a href="http://www.mozilla.com/firefox/security/">Security</a></li>
<li><a href="http://www.mozilla.com/firefox/customize/">Customization</a></li>
<li><a href="http://www.mozilla.com/firefox/organic/">100% Organic Software</a></li>
<li><a href="http://www.mozilla.com/firefox/tips/">Tips and Tricks</a></li>
<li><a href="http://www.mozilla.com/firefox/video/">Videos</a></li>
<li><a href="http://www.mozilla.com/firefox/latest/releasenotes/">Release Notes</a></li>
<li><a href="http://www.mozilla.com/firefox/all.html">Other Systems and Languages</a></li>
<li><a href="http://www.mozilla.com/firefox/fastest/">Fastest Firefox</a></li>
</ul>
</li>
<li><a href="https://addons.mozilla.org/" class="external">Add-ons</a>
<ul>
<li><a href="https://addons.mozilla.org/firefox/" class="external">All Add-ons</a></li>
<li><a href="https://addons.mozilla.org/firefox/recommended" class="external">Recommended</a></li>
<li><a href="https://addons.mozilla.org/firefox/browse/type:1/cat:all?sort=popular" class="external">Popular</a></li>
<li><a href="https://addons.mozilla.org/firefox/browse/type:2" class="external">Themes</a></li>
<li><a href="https://addons.mozilla.org/firefox/browse/type:4" class="external">Search Engines</a></li>
<li><a href="https://addons.mozilla.org/firefox/browse/type:7" class="external">Plugins</a></li>
</ul>

</li>
<li><a href="/">Support</a>
<ul>
<li><a href="http://support.mozilla.com/{{ locale }}/kb/">Firefox Support</a></li>
<li><a href="http://mobile.support.mozilla.com/{{ locale }}/kb/">Mobile Support</a></li>
<li><a href="http://www.mozilla.org/support/thunderbird/" class="external">Thunderbird Support</a></li>
</ul>
</li>
<li><a href="http://www.mozilla.com/manyfaces/">Community</a>
<ul>
<li><a href="https://addons.mozilla.org/" class="external">Add-ons</a></li>
<li><a href="https://bugzilla.mozilla.org/" class="external">Bugzilla</a></li>
<li><a href="http://developer.mozilla.org/" class="external">Mozilla Developer Center</a></li>

<li><a href="http://labs.mozilla.com/" class="external">Mozilla Labs</a></li>
<li><a href="http://www.mozillamessaging.com/" class="external">Mozilla Messaging</a></li>
<li><a href="http://www.mozilla.org/" class="external">Mozilla.org</a></li>
<li><a href="http://www.mozillazine.org/" class="external">MozillaZine</a></li>
<li><a href="http://planet.mozilla.org/" class="external">Planet Mozilla</a></li>
<li><a href="http://quality.mozilla.org/" class="external">QMO</a></li>
<li><a href="http://www.spreadfirefox.com/" class="external">SpreadFirefox</a></li>
<li><a href="http://support.mozilla.com/">Support</a></li>
</ul>
</li>
<li><a href="http://www.mozilla.com/about/">About</a>
<ul>
<li><a href="http://www.mozilla.com/about/whatismozilla.html">What is Mozilla?</a></li>
<li><a href="http://www.mozilla.com/about/get-involved.html">Get Involved</a></li>
<li><a href="http://www.mozilla.com/press/">Press Center</a></li>
<li><a href="http://www.mozilla.com/about/careers.html">Careers</a></li>
<li><a href="http://www.mozilla.com/about/partnerships.html">Partnerships</a></li>
<li><a href="http://www.mozilla.com/about/licensing.html">Licensing</a></li>
<li><a href="http://blog.mozilla.com/" class="external">Blog</a></li>
<li><a href="http://communitystore.mozilla.org/" class="external">Community Store</a></li>
<li><a href="http://www.mozilla.com/about/logo/" class="external">Logo Guide</a></li>
<li><a href="http://www.mozilla.com/about/contact.html">Contact Us</a></li>
</ul>
</li>
</ul>

<div id="cc-license">
<p>Except where otherwise <a href="http://www.mozilla.com/en-US/about/legal.html#site">noted</a>, content on this site is licensed under the<br><strong><a href="http://creativecommons.org/licenses/by-sa/3.0/">Creative Commons Attribution Share-Alike License v3.0</a></strong> or any later version.</p>
<ul>
<li><a href="http://www.mozilla.com/privacy-policy.html">Privacy Policy</a></li>
<li><a href="http://www.mozilla.com/about/legal.html">Legal Notices</a></li>
<li><a href="/kb/About+Firefox+Support">About</a></li>
<li><a href="http://blog.mozilla.com/sumo">Blog</a></li>
</ul>

<p class="disclaimer">Mozilla is providing links to any applications as a courtesy, and makes no representations regarding the applications or any information related there to. Any questions, complaints or claims regarding the applications must be directed to the appropriate software vendor.</p>

<p>Powered by <a href="http://www.djangoproject.com/">The Django Framework</a></p>

This comment has been minimized.

Sign in to view

Copy link
@jsocol

jsocol Feb 18, 2010

;)
</div>

</div>
</div>
{# end #footer #}

<script type="text/javascript" src="http://support.mozilla.com/minify.php/js_main"></script>

This comment has been minimized.

Sign in to view

Copy link
@jsocol

jsocol Feb 18, 2010

This needs to be somehow configurable. Even with just the search templates, we need to be able to add the js_mozsadvanced group.

This comment has been minimized.

Sign in to view

Copy link
@pcraciunoiu

pcraciunoiu Feb 19, 2010

Owner

Yes indeed. Maybe we should add that in when we have session handling, if we're planning to keep the advanced search UI for logged-in users only.

This comment has been minimized.

Sign in to view

Copy link
@jsocol

jsocol Feb 19, 2010

To do that, this part of the template still needs to be configurable.

</body>
</html>
14 changes: 14 additions & 0 deletions templates/base/head.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,14 @@
<!DOCTYPE html>
<html lang="{{ locale }}">

This comment has been minimized.

Sign in to view

Copy link
@jsocol

jsocol Feb 18, 2010

We need to decide on terminology here. lang = locale is just confusing.

This comment has been minimized.

Sign in to view

Copy link
@jbalogh

jbalogh Feb 19, 2010

I mix them up like nobody's business.

This comment has been minimized.

Sign in to view

Copy link
@pcraciunoiu

pcraciunoiu Feb 19, 2010

Owner

I guess we need to see if they ever differ?
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>{% block title %}

This comment has been minimized.

Sign in to view

Copy link
@jsocol

jsocol Feb 18, 2010

https://bugzilla.mozilla.org/show_bug.cgi?id=545808 is right, this should automatically include the phrase "Firefox Support"

Firefox Support

{% endblock %}</title>

<link rel="icon" href="{{ favicon }}" />

<link rel="stylesheet" type="text/css" href="http://support.mozilla.com/minify.php/css_styles_mozcommon;css_styles_mozkb" />
64 changes: 64 additions & 0 deletions templates/base/header.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,64 @@
{# start #nav-access #}
<ul id="nav-access">
<li><a href="#nav-main">skip to navigation</a></li>
<li><a href="#switch">switch language</a></li>
</ul>
{# end #nav-access #}

{# start #header #}
<div id="header" role="banner">

<h1><a href="http://www.mozilla.com/" title="{tr}Back to Mozilla.com{/tr}"><img src="http://support.mozilla.com/styles/mozcommon/mozilla-logo.png" height="56" width="145" alt="Mozilla" /></a></h1>

This comment has been minimized.

Sign in to view

Copy link
@jsocol

jsocol Feb 18, 2010

{tr} tags need to be replaced with {{ _() }}
<div id="nav-main" class="yuimenubar yuimenubarnav" role="navigation">
<div class="bd">

<ul class="first-of-type">
<li id="menu_products" class="yuimenubaritem"><a href="http://www.mozilla.com/en-US/products/">Products</a>

This comment has been minimized.

Sign in to view

Copy link
@jsocol

jsocol Feb 18, 2010

These links need to have the locale stripped.
<div class="yuimenu">
<div class="bd">
<ul>
<li id="submenu_firefox" class="yuimenuitem"><a href="http://www.mozilla.com/en-US/products/firefox/">Firefox</a></li><li id="submenu_thunderbird" class="yuimenuitem"><a href="http://www.mozilla.com/en-US/products/thunderbird/">Thunderbird</a></li></ul>
</div>
</div>

</li><li id="menu_addons" class="yuimenubaritem"><a href="https://addons.mozilla.org/">Add-ons</a>
<div class="yuimenu">
<div class="bd">
<ul>
<li id="submenu_addons_all" class="yuimenuitem"><a href="https://addons.mozilla.org/firefox/">All Add-ons</a></li><li id="submenu_addons_recommended" class="yuimenuitem"><a href="https://addons.mozilla.org/firefox/recommended">Recommended</a></li><li id="submenu_addons_popular" class="yuimenuitem"><a href="https://addons.mozilla.org/firefox/browse/type:1/cat:all?sort=popular">Popular</a></li><li id="submenu_addons_themes" class="yuimenuitem"><a href="https://addons.mozilla.org/firefox/browse/type:2">Themes</a></li><li id="submenu_addons_search" class="yuimenuitem"><a href="https://addons.mozilla.org/firefox/browse/type:4">Search Engines</a></li><li id="submenu_addons_plugins" class="yuimenuitem"><a href="https://addons.mozilla.org/firefox/browse/type:7">Plugins</a></li></ul>
</div>

</div>
</li><li id="menu_support" class="yuimenubaritem"><span class="current">Support</span>
<div class="yuimenu">
<div class="bd">
<ul>
<li id="submenu_support_kb" class="yuimenuitem"><a href="http://support.mozilla.com/{if isset($currentLocale)}{$currentLocale}/{/if}kb/">Firefox Support</a></li><li id="submenu_support_mobile" class="yuimenuitem"><a href="http://mobile.support.mozilla.com/{if isset($currentLocale)}{$currentLocale}/{/if}kb/">Mobile Support</a></li><li id="submenu_support_thunderbird" class="yuimenuitem"><a href="http://www.mozilla.org/support/thunderbird/">Thunderbird Support</a></li></ul>
</div>

</div>
</li><li id="menu_community" class="yuimenubaritem"><a href="http://www.mozilla.com/en-US/manyfaces/">Community</a>
<div class="yuimenu">
<div class="bd">
<ul>
<li id="submenu_community_addons" class="yuimenuitem"><a href="https://addons.mozilla.org/">Add-ons</a></li><li id="submenu_community_bugzilla" class="yuimenuitem"><a href="https://bugzilla.mozilla.org/">Bugzilla</a></li><li id="submenu_community_devmo" class="yuimenuitem"><a href="http://developer.mozilla.org/">Mozilla Developer Center</a></li><li id="submenu_community_labs" class="yuimenuitem"><a href="http://labs.mozilla.com/">Mozilla Labs</a></li><li id="submenu_community_mozillaorg" class="yuimenuitem"><a href="http://www.mozilla.org/">Mozilla.org</a></li><li id="submenu_community_mozillazine" class="yuimenuitem"><a href="http://www.mozillazine.org/">MozillaZine</a></li><li id="submenu_community_planet" class="yuimenuitem"><a href="http://planet.mozilla.org/">Planet Mozilla</a></li><li id="submenu_community_qmo" class="yuimenuitem"><a href="http://quality.mozilla.org/">QMO</a></li><li id="submenu_community_spreadfirefox" class="yuimenuitem"><a href="http://www.spreadfirefox.com/">SpreadFirefox</a></li><li id="submenu_community_support" class="yuimenuitem"><span class="current">Support</span></li></ul>

</div>
</div>
</li><li id="menu_aboutus" class="yuimenubaritem"><a href="http://www.mozilla.com/en-US/about/">About</a>
<div class="yuimenu">
<div class="bd">
<ul>
<li id="submenu_about" class="yuimenuitem"><a href="http://www.mozilla.com/en-US/about/whatismozilla.html">What is Mozilla?</a></li><li id="submenu_getinvolved" class="yuimenuitem"><a href="http://www.mozilla.com/en-US/about/get-involved.html">Get Involved</a></li><li id="submenu_press" class="yuimenuitem"><a href="http://www.mozilla.com/en-US/press/">Press Center</a></li><li id="submenu_careers" class="yuimenuitem"><a href="http://www.mozilla.com/en-US/about/careers.html">Careers</a></li><li id="submenu_partnerships" class="yuimenuitem"><a href="http://www.mozilla.com/en-US/about/partnerships.html">Partnerships</a></li><li id="submenu_licensing" class="yuimenuitem"><a href="http://www.mozilla.com/en-US/about/licensing.html">Licensing</a></li><li id="submenu_blog" class="yuimenuitem"><a href="http://blog.mozilla.com/">Blog</a></li><li id="submenu_store" class="yuimenuitem"><a href="http://store.mozilla.org/">Store</a></li><li id="submenu_contact" class="yuimenuitem"><a href="http://www.mozilla.com/en-US/about/contact.html">Contact Us</a></li></ul>

</div>
</div>
</li></ul>
</div>
</div>

<hr class="hide" />
</div>
{# end #header #}

<hr class="hide" />

3 comments on commit 3bef785

@jsocol
Copy link

@jsocol jsocol commented on 3bef785 Feb 18, 2010

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

General thoughts (we talked about this, but for posterity):

  • templates/layout/base.html > templates/base/base.html (yes, I'm being pedantic)
  • L10n?
  • Template comments: In general, I feel like {# template comments #} should be limited to things that should not get sent to the browser. You've used them in places when HTML comments would be fine (if even necessary).

@jsocol
Copy link

@jsocol jsocol commented on 3bef785 Feb 18, 2010

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

And of course, you shouldn't be developing on the development branch, but branching from development with a new feature branch:

git checkout -b bug-123456 development

@pcraciunoiu
Copy link
Owner

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Thanks for the comments guys.

Please sign in to comment.