adding some style to the default template thanks to Qartin: now using…

… juice.chunks and Django template inheritance
kovshenin · Nov 1, 2010 · e88c510 · e88c510
1 parent f2f7b54
commit e88c510
Show file tree

Hide file tree

Showing 91 changed files with 1,378 additions and 49 deletions.
diff --git a/front/permalinks.py b/front/permalinks.py
@@ -20,7 +20,10 @@ def get_patterns():
 from juice.taxonomy.models import Term
 from juice.pages.models import Page
 
-def make_permalink(object, prepend="", append=""):
+def make_permalink(object=None, prepend="", append=""):
+	if object == None:
+		return reverse('juice.front.views.index')
+
 	if isinstance(object, Page):
 		slug = object.slug
 

diff --git a/front/views.py b/front/views.py
@@ -62,7 +62,7 @@ def index(request, page=1):
 	else:
 		contact_form = ContactForm()	
 
-	return render_to_response('index.html', {'posts': posts, 'pages': pages, 'tags': tags, 'categories': categories, 'contact_form': contact_form})
+	return render('home.html', {'posts': posts, 'pages': pages, 'tags': tags, 'categories': categories, 'contact_form': contact_form})
 
 # single post view
 def single(request, post_slug):
@@ -120,12 +120,11 @@ def single(request, post_slug):
 
 	for c in p.comments:
 		c.permalink = make_permalink(c)
-		c.indent = c.level * 50
 		c.populate()
 
 	p.comments_count = p.comments.count()
 
-	return render_to_response('news-single.html', {'post': p, 'comment_form': comment_form}, context_instance=RequestContext(request))
+	return render('post.html', {'post': p, 'comment_form': comment_form}, context_instance=RequestContext(request))
 
 # view posts by category
 def category(request, category_slug, page=1):
@@ -155,7 +154,7 @@ def page(request, page_slug, page_id=False):
 		p = Page.objects.get(id=page_id)
 	else:
 		p = Page.objects.get(slug=page_slug)
-	return render_to_response('page.html', {'page': p})
+	return render('page.html', {'page': p})
 
 # This function routes all requests that didn't match any regex
 def route(request, slug):
@@ -186,3 +185,40 @@ def route(request, slug):
 
 	except:
 		raise Http404
+
+# The following function does render_to_response along with the global
+# variables used by the base template (base.html). This reduces
+# redundant code.
+def render(template_name, context={}, **kwargs):
+	main_menu = [
+		{'title': 'Home', 'permalink': make_permalink()}
+	]
+	pages = Page.tree.filter(parent__id=None)
+	# set the permalinks
+	for page in pages:
+		entry = {
+			'title': page.title,
+			'permalink': make_permalink(page)
+		}
+		main_menu.append(entry)
+
+	main_menu.append({
+		'title': 'Contacts',
+		'permalink': '',
+	})
+
+	context['global'] = {
+		'title': 'Juice',
+		'home': make_permalink(),
+		'navigation': {
+			'main': main_menu,
+			'tray': [
+				{'title': 'Home', 'permalink': make_permalink()},
+				{'title': 'Products', 'permalink': ''},
+				{'title': 'Services', 'permalink': ''},
+				{'title': 'Feedback', 'permalink': ''},
+			]
+		},
+	}
+
+	return render_to_response(template_name, context, **kwargs)
diff --git a/initial_data.json b/initial_data.json
diff --git a/settings.py b/settings.py
@@ -35,12 +35,12 @@
 
 # Absolute path to the directory that holds media.
 # Example: "/home/media/media.lawrence.com/"
-MEDIA_ROOT = ''
+MEDIA_ROOT = '/home/kovshenin/Juice/juice/templates/static/'
 
 # URL that handles the media served from MEDIA_ROOT. Make sure to use a
 # trailing slash if there is a path component (optional in other cases).
 # Examples: "http://media.lawrence.com", "http://example.com/media/"
-MEDIA_URL = ''
+MEDIA_URL = '/static/'
 
 # URL prefix for admin media -- CSS, JavaScript and images. Make sure to use a
 # trailing slash.

diff --git a/templates/base.html b/templates/base.html
@@ -0,0 +1,80 @@
+{% load chunks %}
+<?xml version="1.0"?>
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
+<head>
+    <meta http-equiv="content-type" content="text/html; charset=utf-8" />
+    <meta name="description" content="..." />
+    <meta name="keywords" content="..." />
+
+	<link rel="stylesheet" media="screen,projection" type="text/css" href="/static/css/juice.css" />
+    <link rel="stylesheet" media="screen,projection" type="text/css" href="/static/css/reset.css" />
+    <link rel="stylesheet" media="screen,projection" type="text/css" href="/static/css/main.css" />
+    <!--[if lte IE 6]><link rel="stylesheet" type="text/css" href="/static/css/main-msie.css" /><![endif]-->
+    <link rel="stylesheet" media="screen,projection" type="text/css" href="/static/css/style.css" />
+    <link rel="stylesheet" media="print" type="text/css" href="/static/css/print.css" />
+
+    <title>{% block title %}{% endblock %} - {{ global.title }}</title>
+</head>
+
+<body>
+
+<div id="main">
+    <!-- Header -->
+    <div id="header">
+
+        <h1 id="logo"><a href="{{ global.home }}" title="[Go to homepage]"><img src="/static/tmp/logo.gif" alt="" /></a></h1>
+        <hr class="noscreen" />
+
+        <!-- Navigation -->
+        <div id="nav">
+			{% for entry in global.navigation.main %}
+				<a href="{{ entry.permalink }}" {% if forloop.first %}id="nav-active"{% endif %}>{{ entry.title }}</a> {% if not forloop.last %}<span>|</span>{% endif %}
+			{% endfor %}
+        </div> <!-- /nav -->
+
+    </div> <!-- /header -->
+
+    <!-- Tray -->
+    <div id="tray">
+
+        <ul>
+			{% for entry in global.navigation.tray %}
+				<li><a href="{{ entry.permalink }}">{{ entry.title }}</a></li>
+			{% endfor %}
+            <!--<li id="tray-active"><a href="#">Homepage</a></li> <!-- Active page -->-->
+        </ul>
+
+        <!-- Search -->
+        <div id="search" class="box">
+            <form action="#" method="get">
+                <div class="box">
+                    <div id="search-input"><span class="noscreen">Search:</span><input type="text" size="30" name="" value="Search" /></div>
+                    <div id="search-submit"><input type="image" src="/static/design/search-submit.gif" value="OK" /></div>
+                </div>
+            </form>
+        </div> <!-- /search -->
+
+    <hr class="noscreen" />
+    </div> <!-- /tray -->
+
+	{% block content %}
+	{% endblock %}
+
+    <hr class="noscreen" />
+
+    <!-- Footer -->
+    <div id="footer">
+
+        <!-- Do you want remove this backlinks? Look at www.nuviotemplates.com/payment.php -->
+        <p class="f-right">{% chunk "bottom-right" %}</p>
+        <!-- Do you want remove this backlinks? Look at www.nuviotemplates.com/payment.php -->
+
+        <p>{% chunk "bottom-left" %}</p>
+
+    </div> <!-- /footer -->
+
+</div> <!-- /main -->
+
+</body>
+</html>
diff --git a/templates/home.html b/templates/home.html
@@ -0,0 +1,160 @@
+{% extends "base.html" %}
+{% load chunks %}
+
+{% block title %}Home{% endblock %}
+{% block content %}
+    <!-- Promo -->
+    <div id="col-top"></div>
+    <div id="col" class="box">
+
+        <div id="ribbon"></div> <!-- /ribbon (design/ribbon.gif) -->
+
+        <!-- Screenshot in browser (replace tmp/browser.gif) -->
+        <div id="col-browser"><a href="#"><img src="/static/tmp/browser.gif" width="255" height="177" alt="" /></a></div> 
+
+        <div id="col-text">
+
+            <h2 id="slogan"><span></span>Place for your slogan.</h2>
+
+            <p>{% chunk "home-promo" %}</p>
+
+            <p id="btns">
+                <a href="#"><img src="/static/design/btn-tell.gif" alt="" /></a>
+                <a href="#"><img src="/static/design/btn-purchase.gif" alt="" /></a>
+            </p>
+
+        </div> <!-- /col-text -->
+
+    </div> <!-- /col -->
+    <div id="col-bottom"></div>
+
+    <hr class="noscreen" />
+
+    <!-- 3 columns -->
+    <div id="cols3-top"></div>
+    <div id="cols3" class="box">
+
+        <!-- Column I. -->
+        <div class="col">
+
+            <h3><a href="#">Product I.</a></h3>
+
+            <p class="nom t-center"><a href="#"><img src="/static/tmp/200x140.gif" alt="" /></a></p>
+
+            <div class="col-text">
+
+                <p>Lorem ipsum dolor sit amet <a href="#">consectetuer</a> amit adipiscing elit. <strong>Nunc feugiat.</strong>
+                Inam massa est feugiat <a href="#">pharetra</a> lacus. In non arcu nec liberom pharetra rutrum est.</p>
+
+                <ul class="ul-01">
+                    <li>Lorem ipsum dolor sit amet</li>
+                    <li>Lorem ipsum dolor sit amet</li>
+                    <li>Lorem ipsum dolor sit amet</li>
+                </ul>
+
+            </div> <!-- /col-text -->
+
+            <div class="col-more"><a href="#"><img src="/static/design/cols3-more.gif" alt="" /></a></div>
+
+        </div> <!-- /col -->
+
+        <hr class="noscreen" />
+
+        <!-- Column II. -->
+        <div class="col">
+
+            <h3><a href="#">Product II.</a></h3>
+
+            <p class="nom t-center"><a href="#"><img src="/static/tmp/200x140.gif" alt="" /></a></p>
+
+            <div class="col-text">
+
+                <p>Lorem ipsum dolor sit amet consectetuer amit adipiscing elit. <strong>Nunc feugiat.</strong>
+                Inam massa est feugiat <a href="#">pharetra</a> lacus. In non arcu nec liberom pharetra rutrum est.</p>
+
+                <ul class="ul-01">
+                    <li>Lorem ipsum dolor sit amet</li>
+                    <li>Lorem ipsum dolor sit amet</li>
+                    <li>Lorem ipsum dolor sit amet</li>
+                </ul>
+
+            </div> <!-- /col-text -->
+
+            <div class="col-more"><a href="#"><img src="/static/design/cols3-more.gif" alt="" /></a></div>
+
+        </div> <!-- /col -->
+
+        <hr class="noscreen" />
+
+        <!-- Column III. -->
+        <div class="col last">
+
+            <h3><a href="#">Product III.</a></h3>
+
+            <p class="nom t-center"><a href="#"><img src="/static/tmp/200x140.gif" alt="" /></a></p>
+
+            <div class="col-text">
+
+                <p>Lorem ipsum dolor sit amet consectetuer amit adipiscing elit. <strong>Nunc feugiat.</strong>
+                Inam massa est feugiat pharetra lacus. In non arcu nec liberom <a href="#">pharetra rutrum est</a>.</p>
+
+                <ul class="ul-01">
+                    <li>Lorem ipsum dolor sit amet</li>
+                    <li>Lorem ipsum dolor sit amet</li>
+                    <li>Lorem ipsum dolor sit amet</li>
+                </ul>
+
+            </div> <!-- /col-text -->
+
+            <div class="col-more"><a href="#"><img src="/static/design/cols3-more.gif" alt="" /></a></div>
+
+        </div> <!-- /col -->
+
+        <hr class="noscreen" />
+
+    </div> <!-- /cols3 -->
+    <div id="cols3-bottom"></div>
+
+    <!-- 2 columns -->
+    <div id="cols2-top"></div>
+    <div id="cols2" class="box">
+
+        <!-- Blog -->
+        <div id="col-left">
+
+            <div class="title">
+                <span class="f-right"><a href="#" class="ico-rss">RSS feed</a></span>
+                <h4>Corporate Blog</h4>
+            </div> <!-- /title -->
+
+            <ul class="ul-list nomb">
+				{% for post in posts %}
+					<li><span class="f-right"><a href="{{ post.permalink }}#comments" class="ico-comment">{{ post.comments_count }} comment(s)</a></span> <span class="date">{{ post.published|date:"d.m.Y" }}</span> <a href="{{ post.permalink }}" class="article">{{ post.title }}</a></li>
+				{% endfor %}
+            </ul>
+
+        </div> <!-- /col-left -->
+
+        <hr class="noscreen" />
+
+        <!-- Testimonials -->
+        <div id="col-right">
+
+            <h4><span>Testimonials</span></h4>
+
+            <div class="box">
+
+                <div class="col-right-img"><img src="/static/tmp/65x65.gif" width="65" height="65" alt="" /></div>
+                <div class="col-right-text">
+
+                    {% chunk "testimonials-text" %}
+
+                </div> <!-- /col-right-text -->
+
+            </div> <!-- /box -->
+
+        </div> <!-- /col-right -->
+
+    </div> <!-- /cols2 -->
+    <div id="cols2-bottom"></div>
+{% endblock %}
diff --git a/templates/impress-01/css/main-msie.css b/templates/impress-01/css/main-msie.css
@@ -0,0 +1,54 @@
+/* ----------------------------------------------------------------------------------------------------------
+
+    Output device: screen, projection
+
+    Author:     Nuvio (www.nuvio.cz)
+    Update:     2008-07-29, 18:30 GMT+1
+    Version:    2.2.6 (2008-07-13, 14:28 GMT+1)
+
+    Structure:
+        display; position; z-index; float; clear; width; height; overflow; margin; padding; border; background; align; font;
+
+    Content:
+
+        1) HTML tags
+        2) HTML styles
+        3) Layout
+        4-1) Page: Homepage
+        5) Others
+
+---------------------------------------------------------------------------------------------------------- */
+
+/* ----------------------------------------------------------------------------------------------------------
+1) HTML tags
+---------------------------------------------------------------------------------------------------------- */
+
+body {text-align:center;}
+
+table {font-size:100%;}
+
+/* ----------------------------------------------------------------------------------------------------------
+2) HTML styles
+---------------------------------------------------------------------------------------------------------- */
+
+/* ----------------------------------------------------------------------------------------------------------
+3) Layout
+---------------------------------------------------------------------------------------------------------- */
+
+#main {text-align:left;}
+
+/* ----------------------------------------------------------------------------------------------------------
+4-1) Page: Homepage
+---------------------------------------------------------------------------------------------------------- */
+
+    .col {width:310px;}
+    .col.last {margin-right:-3px;}
+
+    #cols2 #col-left {width:635px; padding:20px;}
+    #cols2 #col-right {width:307px;}
+
+/* ----------------------------------------------------------------------------------------------------------
+5) Others
+---------------------------------------------------------------------------------------------------------- */
+
+.box {height:1%;}