Commit 6bdfe785 authored by Oskar Kalbag's avatar Oskar Kalbag

Updated the stylesheet for the sample. Also added static middleware for serving the CSS and JS.

parent 9c87843a
......@@ -9,6 +9,7 @@ superagent = require 'superagent'
app = express()
app.engine 'html', tally.__express
app.set 'views', __dirname + '/views'
app.use express.static('views')
#
# Simple template example (with static data)
......
......@@ -24,6 +24,8 @@ exports.__express = (path, data, callback) ->
# setting their display to none as makes sense on the client.
data.aralbalkan = {tallyRunningInNode: yes}
# console.log data
window.data = data
window.run distal
......
body {
max-width: 768px;
line-height: 24px;
font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
margin: 36px 48px;
}
ul {
margin-top: 36px;
}
li {
list-style-type: none;
margin-bottom: 36px;
min-height: 106px;
min-height: 100px;
background-color: #eee;
padding: 12px;
}
li img {
......@@ -14,4 +22,10 @@ li img {
margin-right: 36px;
width: 100px;
height: 100px;
border: 1px solid black;
}
[data-qif='not:numberOfPosts'] {
background-color: transparent;
color: red;
}
......@@ -11,19 +11,17 @@
</head>
<body>
<h1>App.net Global Timeline</h1>
<p>Showing you the latest <span dataq-qtext.</p>
<p>Showing you the latest <span data-qtext='numberOfPosts'></span> posts from <a href='http://join.app.net'>App.net</a>.</p>
<ul>
<li data-qrepeat='post data'><img data-qattr='src post.user.avatar_image.url' src='http://placehold.it/100/100' alt='User name’s avatar'><span data-qtext='post.text'>This is the post text. It can be up to 255 characters long in App.net. It can contain <a href='http://aralbalkan.com'>links</a>, like this one to Aral’s <a href='http://moderniosdevelopment.com'>Modern iOS Development Workshop</a> in April, 2013 in the UK.</span> &#8202;&#8202; <a data-qattr='href post.user.canonical_url' data-qtext='post.user.name' href=''>Jane Person</a>.</li>
<li data-qrepeat='post data'><img data-qattr='src post.user.avatar_image.url' src='http://placehold.it/100x100' alt='User name’s avatar'><span data-qtext='post.text'>This is the post text. It can be up to 255 characters long in App.net. It can contain <a href='http://aralbalkan.com'>links</a>, like this one to Aral’s <a href='http://moderniosdevelopment.com'>Modern iOS Development Workshop</a> in April, 2013 in the UK.</span> &#8202;&#8202; <a data-qattr='href post.user.canonical_url' data-qtext='post.user.name' href=''>Jane Person</a>.</li>
<li data-qif='false'><img src='http://placehold.it/100/100' alt='User name’s avatar'>This is another post. It can be up to 255 characters long in App.net. It can contain <a href='http://aralbalkan.com'>links</a>, like this one to Aral’s <a href='http://moderniosdevelopment.com'>Modern iOS Development Workshop</a> in April, 2013 in the UK. &#8202;&#8202; <a href=''>Some Other Person</a>.</li>
<li data-qif='false'><img src='http://placehold.it/100x100' alt='User name’s avatar'>This is another post. It can be up to 255 characters long in App.net. It can contain <a href='http://aralbalkan.com'>links</a>, like this one to Aral’s <a href='http://moderniosdevelopment.com'>Modern iOS Development Workshop</a> in April, 2013 in the UK. &#8202;&#8202; <a href=''>Some Other Person</a>.</li>
<li data-qif='false'><img src='http://placehold.it/100/100' alt='User name’s avatar'>This is another post. It can be up to 255 characters long in App.net. It can contain <a href='http://aralbalkan.com'>links</a>, like this one to Aral’s <a href='http://moderniosdevelopment.com'>Modern iOS Development Workshop</a> in April, 2013 in the UK. &#8202;&#8202; <a href=''>Some Other Person</a>.</li>
<li data-qif='false'><img src='http://placehold.it/100x100' alt='User name’s avatar'>This is another post. It can be up to 255 characters long in App.net. It can contain <a href='http://aralbalkan.com'>links</a>, like this one to Aral’s <a href='http://moderniosdevelopment.com'>Modern iOS Development Workshop</a> in April, 2013 in the UK. &#8202;&#8202; <a href=''>Some Other Person</a>.</li>
<li data-qif='false'><img src='http://placehold.it/100/100' alt='User name’s avatar'>This is another post. It can be up to 255 characters long in App.net. It can contain <a href='http://aralbalkan.com'>links</a>, like this one to Aral’s <a href='http://moderniosdevelopment.com'>Modern iOS Development Workshop</a> in April, 2013 in the UK. &#8202;&#8202; <a href=''>Some Other Person</a>.</li>
<li data-qif='false'><img src='http://placehold.it/100x100' alt='User name’s avatar'>This is another post. It can be up to 255 characters long in App.net. It can contain <a href='http://aralbalkan.com'>links</a>, like this one to Aral’s <a href='http://moderniosdevelopment.com'>Modern iOS Development Workshop</a> in April, 2013 in the UK. &#8202;&#8202; <a href=''>Some Other Person</a>.</li>
<li data-qif='false'><img src='http://placehold.it/100/100' alt='User name’s avatar'>This is another post. It can be up to 255 characters long in App.net. It can contain <a href='http://aralbalkan.com'>links</a>, like this one to Aral’s <a href='http://moderniosdevelopment.com'>Modern iOS Development Workshop</a> in April, 2013 in the UK. &#8202;&#8202; <a href=''>Some Other Person</a>.</li>
<li data-qif='false'><img src='http://placehold.it/100/100' alt='User name’s avatar'>This is another post. It can be up to 255 characters long in App.net. It can contain <a href='http://aralbalkan.com'>links</a>, like this one to Aral’s <a href='http://moderniosdevelopment.com'>Modern iOS Development Workshop</a> in April, 2013 in the UK. &#8202;&#8202; <a href=''>Some Other Person</a>.</li>
<li data-qif='not:numberOfPosts'>There are no posts to display.</li>
</ul>
<button data-qif='false' id='highlight-template'>Show highlights</button>
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment