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

trunk/yolanda/controllers/index.py

@@ -8,3 +8,4 @@ class IndexController(BaseController):
 
     def index(self):
         return render('/xhtml/index.mako')
+

trunk/yolanda/controllers/search.py

@@ -13,17 +13,17 @@ class SearchController(BaseController):
 
         # c.results dummy
         c.results = [
-                    {'title': 'foobar', 'id': '23' , 'thumbnail': h.url_for('/images/404.png')},
+                    {'title': 'foobar', 'id': '23' },
-                    {'title': 'blablupp', 'id': '42', 'thumbnail': h.url_for('/images/404.png')},
+                    {'title': 'blablupp', 'id': '42'},
-                    {'title': 'uiae nrdt', 'id': '555' , 'thumbnail': h.url_for('/images/404.png')},
+                    {'title': 'uiae nrdt', 'id': '555'},
-                    {'title': 'uiaenrtd uiaenrtd uiaenrdt', 'id': '666666666', 'thumbnail': h.url_for('/images/404.png')},
+                    {'title': 'uiaenrtd uiaenrtd uiaenrdt', 'id': '666666666'},
-                    {'title': 'foobar', 'id': '23' , 'thumbnail': h.url_for('/images/404.png')},
+                    {'title': 'foobar', 'id': '23'},
-                    {'title': 'blablupp', 'id': '42', 'thumbnail': h.url_for('/images/404.png')},
+                    {'title': 'blablupp', 'id': '42'},
-                    {'title': 'James Bond drives a bulletproof Aston Martin !!!', 'id': '555' , 'thumbnail': h.url_for('/images/404.png')},
+                    {'title': 'James Bond drives a bulletproof Aston Martin !!!', 'id': '555'},
-                    {'title': 'uiaenrtd uiaenrtd uiaenrdt uiaenrtd uiaenrtd', 'id': '666666666', 'thumbnail': h.url_for('/images/404.png')},
+                    {'title': 'uiaenrtd uiaenrtd uiaenrdt uiaenrtd uiaenrtd', 'id': '666666666'},
-                    {'title': 'foobar', 'id': '123' , 'thumbnail': h.url_for('/images/404.png')},
+                    {'title': 'foobar', 'id': '123'},
-                    {'title': 'blablupp', 'id': '42', 'thumbnail': h.url_for('/images/404.png')},
+                    {'title': 'blablupp', 'id': '42'},
-                    {'title': 'lolwtf hax !!!11', 'id': '9001', 'thumbnail': h.url_for('/images/404.png')}
+                    {'title': 'lolwtf hax !!!11', 'id': '9001'}
                     ]
 
         return render('/xhtml/results.mako')

trunk/yolanda/controllers/video.py

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

trunk/yolanda/lib/app_globals.py

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

trunk/yolanda/public/css/colors/debug.css

@@ -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;
+}

trunk/yolanda/public/css/colors/tango.css

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

trunk/yolanda/public/css/default.css

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

trunk/yolanda/public/css/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;
-}

trunk/yolanda/public/css/fonts/hurrdurr.css

@@ -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;
+}

trunk/yolanda/public/css/layout/fake6.css

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

trunk/yolanda/templates/xhtml/base.mako

@@ -1,6 +1,6 @@
 <?xml version="1.0" ?>
-<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
+<!DOCTYPE html>
-    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+<!-- 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()}
 
-    ${self.body()}
+    <div id="content">
+
+        ${self.body()}
+
+    </div>
 
     <div id="copyright">
-        <em>Yolanda</em> Copyright &copy; 2007, 2008 <em>The Yolanda Developers</em> &ndash;
+        ${g.platform_name} is realized using <em>${g.application_name}</em> Copyright © 2007, 2008 ${g.developers} –
-        This program comes with <em>absolutely no warranty</em>; for details <a href="${h.url_for('license')}">click here</a>.
+        ${g.application_name} 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.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/">
+            <a href="">
-                <img alt="XHTML 1.1 logo" src="${h.url_for('images/badges/xhtml 1.1.png')}" />
+                <img alt="XHTML 5" src="${h.url_for('images/badges/xhtml5.png')}" />
             </a>
         </li>
 

trunk/yolanda/templates/xhtml/index.mako

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

trunk/yolanda/templates/xhtml/results.mako

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

trunk/yolanda/templates/xhtml/video.mako

@@ -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')}"
+/>
+-->
+