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
main
erlehmann 16 years ago
parent f9279f6fbe
commit 43fe1f377e

@ -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

@ -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,31 +110,46 @@ ul
padding-left: 0.5em;
}
/* classes */
#video
{
display: block;
margin: auto;
}
#messagebox
#video,
#copyright,
#header,
#heading,
#login,
#search,
#tagcloud
{
border-width: 1px;
margin-right: 28em !important;
padding: 1em;
text-align: center;
margin-bottom: 1em;
}
/* ids */
/* sidebar stuff */
#copyright,
#header,
#heading,
#login,
#search,
#tagcloud
{
padding: 1em;
}
#header
{
height: 3em;
padding-bottom: 0.5em;
}
#messagebox
{
border-width: 1px;
clear: right;
margin-bottom: 1em;
margin-right: 28em !important;
padding: 1em;
text-align: justify;
text-align: center;
}
#heading,
@ -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>
${self.login()}
${self.search()}
${self.tagcloud()}
<div id="header">
<img src="${h.url_for('/images/logo.png')}" alt="Yolanda logo"/>
<h1>
<img src="${h.url_for('logo')}" alt="${g.platform_name} logo"/>
</h1>
</div>
${self.login()}
<div id="heading">
<h1>
${self.heading()}
</h1>
</div>
${self.search()}
${self.messagebox()}
${self.tagcloud()}
<div id="content">
${self.messagebox()}
${self.body()}
${self.body()}
</div>
<div id="copyright">
<em>Yolanda</em> Copyright &copy; 2007, 2008 <em>The Yolanda Developers</em> &ndash;
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">

@ -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 &lt;video&gt; 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…
Cancel
Save