layout revision, added video page and debug stylesheet, introduction of global variables
git-svn-id: http://yolanda.mister-muffin.de/svn@386 7eef14d0-6ed0-489d-bf55-20463b2d70db
This commit is contained in:
parent
f9279f6fbe
commit
43fe1f377e
14 changed files with 183 additions and 86 deletions
|
@ -8,3 +8,4 @@ class IndexController(BaseController):
|
|||
|
||||
def index(self):
|
||||
return render('/xhtml/index.mako')
|
||||
|
||||
|
|
|
@ -13,17 +13,17 @@ class SearchController(BaseController):
|
|||
|
||||
# c.results dummy
|
||||
c.results = [
|
||||
{'title': 'foobar', 'id': '23' , 'thumbnail': h.url_for('/images/404.png')},
|
||||
{'title': 'blablupp', 'id': '42', 'thumbnail': h.url_for('/images/404.png')},
|
||||
{'title': 'uiae nrdt', 'id': '555' , 'thumbnail': h.url_for('/images/404.png')},
|
||||
{'title': 'uiaenrtd uiaenrtd uiaenrdt', 'id': '666666666', 'thumbnail': h.url_for('/images/404.png')},
|
||||
{'title': 'foobar', 'id': '23' , 'thumbnail': h.url_for('/images/404.png')},
|
||||
{'title': 'blablupp', 'id': '42', 'thumbnail': h.url_for('/images/404.png')},
|
||||
{'title': 'James Bond drives a bulletproof Aston Martin !!!', 'id': '555' , 'thumbnail': h.url_for('/images/404.png')},
|
||||
{'title': 'uiaenrtd uiaenrtd uiaenrdt uiaenrtd uiaenrtd', 'id': '666666666', 'thumbnail': h.url_for('/images/404.png')},
|
||||
{'title': 'foobar', 'id': '123' , 'thumbnail': h.url_for('/images/404.png')},
|
||||
{'title': 'blablupp', 'id': '42', 'thumbnail': h.url_for('/images/404.png')},
|
||||
{'title': 'lolwtf hax !!!11', 'id': '9001', 'thumbnail': h.url_for('/images/404.png')}
|
||||
{'title': 'foobar', 'id': '23' },
|
||||
{'title': 'blablupp', 'id': '42'},
|
||||
{'title': 'uiae nrdt', 'id': '555'},
|
||||
{'title': 'uiaenrtd uiaenrtd uiaenrdt', 'id': '666666666'},
|
||||
{'title': 'foobar', 'id': '23'},
|
||||
{'title': 'blablupp', 'id': '42'},
|
||||
{'title': 'James Bond drives a bulletproof Aston Martin !!!', 'id': '555'},
|
||||
{'title': 'uiaenrtd uiaenrtd uiaenrdt uiaenrtd uiaenrtd', 'id': '666666666'},
|
||||
{'title': 'foobar', 'id': '123'},
|
||||
{'title': 'blablupp', 'id': '42'},
|
||||
{'title': 'lolwtf hax !!!11', 'id': '9001'}
|
||||
]
|
||||
|
||||
return render('/xhtml/results.mako')
|
||||
|
|
|
@ -12,7 +12,7 @@ class VideoController(BaseController):
|
|||
'description': 'Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nullam sapien mauris, venenatis at, fermentum at, tempus eu, urna.' ,
|
||||
'preview': h.url_for('/images/404.png')
|
||||
}
|
||||
return 'show a video html page'
|
||||
return render('/xhtml/video.mako')
|
||||
|
||||
def file(self):
|
||||
return 'serve video'
|
||||
|
|
|
@ -11,5 +11,8 @@ class Globals(object):
|
|||
initialization and is available during requests via the 'g'
|
||||
variable
|
||||
"""
|
||||
self.appname = "Application Name"
|
||||
self.application_name = "Yolanda"
|
||||
self.platform_name = "Demo Application"
|
||||
self.platform_slogan = "Welcome to Demo Application, a video CMS without a slogan."
|
||||
self.developers = ("Nils Dagsson Moskopp", "Johannes Schauer")
|
||||
pass
|
||||
|
|
25
trunk/yolanda/public/css/colors/debug.css
Normal file
25
trunk/yolanda/public/css/colors/debug.css
Normal file
|
@ -0,0 +1,25 @@
|
|||
/*
|
||||
div
|
||||
{
|
||||
outline-color: black;
|
||||
outline-style: solid;
|
||||
outline-width: 1px;
|
||||
}
|
||||
*/
|
||||
|
||||
/*
|
||||
h1, h2, h3, h4, h5, h6, p
|
||||
{
|
||||
outline-color: black;
|
||||
outline-style: dotted;
|
||||
outline-width: 1px;
|
||||
}
|
||||
*/
|
||||
|
||||
a[href=""],
|
||||
img[alt=""]
|
||||
{
|
||||
outline-color: red;
|
||||
outline-style: solid;
|
||||
outline-width: 3px;
|
||||
}
|
|
@ -88,7 +88,26 @@ ul#queries
|
|||
color: #FFD95A;
|
||||
}
|
||||
|
||||
/* classes */
|
||||
/* ids */
|
||||
|
||||
#copyright
|
||||
{
|
||||
background-color: #131313;
|
||||
border-color: #363636;
|
||||
border-style: dotted;
|
||||
}
|
||||
|
||||
#video,
|
||||
#header,
|
||||
#heading,
|
||||
#login,
|
||||
#search,
|
||||
#tagcloud
|
||||
{
|
||||
background-color: #131313;
|
||||
border-color: #363636;
|
||||
border-style: solid;
|
||||
}
|
||||
|
||||
#messagebox
|
||||
{
|
||||
|
@ -116,28 +135,3 @@ ul#queries
|
|||
background-color: #fcaf3e;
|
||||
color: #131313;
|
||||
}
|
||||
|
||||
#messagebox #message
|
||||
{
|
||||
font-size: 1.4em;
|
||||
}
|
||||
|
||||
/* ids */
|
||||
|
||||
#copyright
|
||||
{
|
||||
background-color: #131313;
|
||||
border-color: #363636;
|
||||
border-style: dotted;
|
||||
font-family: monospace;
|
||||
}
|
||||
|
||||
#heading,
|
||||
#login,
|
||||
#search,
|
||||
#tagcloud
|
||||
{
|
||||
background-color: #131313;
|
||||
border-color: #363636;
|
||||
border-style: solid;
|
||||
}
|
||||
|
|
|
@ -8,6 +8,8 @@ Purpose of this file is to import reset, decoration and structure stylesheets.
|
|||
*/
|
||||
|
||||
@import "reset.css";
|
||||
@import "colors/debug.css";
|
||||
@import "colors/tango.css";
|
||||
@import "fonts/hurrdurr.css";
|
||||
@import "structure/fake6.css";
|
||||
@import "layout/fake6.css";
|
||||
@import "flow/fake6.css";
|
||||
|
|
|
@ -7,18 +7,22 @@ This file is licensed under the WTF Public License.
|
|||
Purpose of this file is to provide the flow of the elements, such as:
|
||||
- float
|
||||
- clear
|
||||
- margin
|
||||
*/
|
||||
|
||||
#heading,
|
||||
#copyright
|
||||
{
|
||||
clear: both;
|
||||
}
|
||||
|
||||
#header
|
||||
{
|
||||
}
|
||||
|
||||
#login,
|
||||
#search,
|
||||
#tagcloud
|
||||
{
|
||||
clear: right;
|
||||
float: right;
|
||||
}
|
||||
|
||||
#results
|
||||
{
|
||||
margin-right: 28em;
|
||||
}
|
||||
|
|
|
@ -137,3 +137,22 @@ ul
|
|||
line-height: 1.25em;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
#copyright
|
||||
{
|
||||
font-family: monospace;
|
||||
}
|
||||
|
||||
#messagebox #message
|
||||
{
|
||||
font-size: 1.4em;
|
||||
}
|
||||
|
||||
#header,
|
||||
#heading,
|
||||
#login,
|
||||
#search,
|
||||
#tagcloud
|
||||
{
|
||||
text-align: justify;
|
||||
}
|
||||
|
|
|
@ -68,15 +68,12 @@ ol
|
|||
ol#results
|
||||
{
|
||||
/* compensate for list element margin */
|
||||
margin-left: -1em;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
ol#results li
|
||||
{
|
||||
display: inline-block;
|
||||
margin-left: 1em;
|
||||
margin-bottom: 1em;
|
||||
width: 216px;
|
||||
}
|
||||
|
||||
|
@ -113,7 +110,39 @@ ul
|
|||
padding-left: 0.5em;
|
||||
}
|
||||
|
||||
/* classes */
|
||||
#video
|
||||
{
|
||||
display: block;
|
||||
margin: auto;
|
||||
}
|
||||
|
||||
#video,
|
||||
#copyright,
|
||||
#header,
|
||||
#heading,
|
||||
#login,
|
||||
#search,
|
||||
#tagcloud
|
||||
{
|
||||
border-width: 1px;
|
||||
margin-bottom: 1em;
|
||||
}
|
||||
|
||||
#copyright,
|
||||
#header,
|
||||
#heading,
|
||||
#login,
|
||||
#search,
|
||||
#tagcloud
|
||||
{
|
||||
padding: 1em;
|
||||
}
|
||||
|
||||
#header
|
||||
{
|
||||
height: 3em;
|
||||
padding-bottom: 0.5em;
|
||||
}
|
||||
|
||||
#messagebox
|
||||
{
|
||||
|
@ -123,23 +152,6 @@ ul
|
|||
text-align: center;
|
||||
}
|
||||
|
||||
/* ids */
|
||||
|
||||
/* sidebar stuff */
|
||||
|
||||
#copyright,
|
||||
#heading,
|
||||
#login,
|
||||
#search,
|
||||
#tagcloud
|
||||
{
|
||||
border-width: 1px;
|
||||
clear: right;
|
||||
margin-bottom: 1em;
|
||||
padding: 1em;
|
||||
text-align: justify;
|
||||
}
|
||||
|
||||
#heading,
|
||||
#login,
|
||||
#search,
|
||||
|
@ -149,7 +161,8 @@ ul
|
|||
padding-bottom: 0.5em;
|
||||
}
|
||||
|
||||
#results
|
||||
#content,
|
||||
#header
|
||||
{
|
||||
margin-right: 28em;
|
||||
}
|
||||
|
|
|
@ -1,6 +1,6 @@
|
|||
<?xml version="1.0" ?>
|
||||
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
|
||||
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
|
||||
<!DOCTYPE html>
|
||||
<!-- XHTML 5, baby ! -->
|
||||
|
||||
<%def name="search()">
|
||||
<div id="search">
|
||||
|
@ -121,30 +121,36 @@
|
|||
|
||||
<body>
|
||||
|
||||
<div id="header">
|
||||
<img src="${h.url_for('/images/logo.png')}" alt="Yolanda logo"/>
|
||||
</div>
|
||||
|
||||
${self.login()}
|
||||
|
||||
${self.search()}
|
||||
|
||||
${self.tagcloud()}
|
||||
|
||||
<div id="header">
|
||||
<h1>
|
||||
<img src="${h.url_for('logo')}" alt="${g.platform_name} logo"/>
|
||||
</h1>
|
||||
</div>
|
||||
|
||||
<div id="heading">
|
||||
<h1>
|
||||
${self.heading()}
|
||||
</h1>
|
||||
</div>
|
||||
|
||||
${self.search()}
|
||||
|
||||
${self.tagcloud()}
|
||||
|
||||
${self.messagebox()}
|
||||
|
||||
<div id="content">
|
||||
|
||||
${self.body()}
|
||||
|
||||
</div>
|
||||
|
||||
<div id="copyright">
|
||||
<em>Yolanda</em> Copyright © 2007, 2008 <em>The Yolanda Developers</em> –
|
||||
This program comes with <em>absolutely no warranty</em>; for details <a href="${h.url_for('license')}">click here</a>.
|
||||
This is <em>free software</em>, and you are welcome to redistribute it
|
||||
${g.platform_name} is realized using <em>${g.application_name}</em> Copyright © 2007, 2008 ${g.developers} –
|
||||
${g.application_name} comes with <em>absolutely no warranty</em>; for details <a href="${h.url_for('license')}">click here</a>.
|
||||
${g.application_name} is <em>free software</em>, and you are welcome to redistribute it
|
||||
under certain conditions; <a href="${h.url_for('license')}">click here</a> for details.
|
||||
To view the source code, <a href="">click here</a>. Report bugs <a href="">here</a>.
|
||||
</div>
|
||||
|
@ -152,8 +158,8 @@
|
|||
<ul id="badges">
|
||||
|
||||
<li class="badge">
|
||||
<a href="http://validator.w3.org/">
|
||||
<img alt="XHTML 1.1 logo" src="${h.url_for('images/badges/xhtml 1.1.png')}" />
|
||||
<a href="">
|
||||
<img alt="XHTML 5" src="${h.url_for('images/badges/xhtml5.png')}" />
|
||||
</a>
|
||||
</li>
|
||||
|
||||
|
|
|
@ -5,7 +5,7 @@
|
|||
</%def>
|
||||
|
||||
<%def name="heading()">
|
||||
Welcome to Yolanda, a video CMS missing a proper slogan.
|
||||
${g.platform_slogan}
|
||||
</%def>
|
||||
|
||||
<h1>An introduction to Yolanda</h1>
|
||||
|
|
|
@ -13,7 +13,7 @@
|
|||
% for result in c.results:
|
||||
<li>
|
||||
<a href="${h.url_for('video_page', video=result)}">
|
||||
<img src="${result['thumbnail']}" alt='thumbnail for "${result['title']}"'/>
|
||||
<img src="${h.url_for('/images/404.png')}" alt='thumbnail for "${result['title']}"'/>
|
||||
</a>
|
||||
<br />
|
||||
<a href="${h.url_for('video_page', video=result)}" class="title">
|
||||
|
|
30
trunk/yolanda/templates/xhtml/video.mako
Normal file
30
trunk/yolanda/templates/xhtml/video.mako
Normal file
|
@ -0,0 +1,30 @@
|
|||
<%inherit file="base.mako"/>
|
||||
|
||||
<%def name="title()">
|
||||
front page
|
||||
</%def>
|
||||
|
||||
<%def name="heading()">
|
||||
This Video is lulz.
|
||||
</%def>
|
||||
|
||||
<video
|
||||
id="video"
|
||||
controls="true"
|
||||
poster="${h.url_for('/dummy/poster.png')}"
|
||||
src="${h.url_for('http://127.0.0.1:5000/dummy/video.ogv')}"
|
||||
>
|
||||
Sorry, your browser does not support the <video> element. <a href="http://ftp.mozilla.org/pub/mozilla.org/firefox/nightly/latest-trunk/">Firefox 3.1 nightly builds</a>, <a href="http://labs.opera.com/news/2008/07/18/">Opera experimental builds</a> and <a href="http://www.apple.com/safari/">Safari</a> with <a href="http://xiph.org/quicktime/">XiphQT</a> installed can playback videos with varying degrees of success.
|
||||
</video>
|
||||
|
||||
<a href="">download file</a>
|
||||
|
||||
<a href="">download in HD resolution</a>
|
||||
|
||||
<!--
|
||||
<img
|
||||
id="video"
|
||||
src="${h.url_for('/dummy/poster.png')}"
|
||||
/>
|
||||
-->
|
||||
|
Loading…
Reference in a new issue