Make the UI usable and polish up some stuff

This commit is contained in:
Aaron Mueller 2013-01-09 21:27:19 +01:00
parent 21bc92a461
commit b81b0cf730
8 changed files with 67 additions and 6 deletions

View File

@ -1,11 +1,15 @@
$(document).ready ->
$("#feed_list > li > a").on("ajax:success", (event, data) ->
$("#feed_content").html(data)
false
)
$("#feed_content").on("ajax:success", ".item > a", (event, data) ->
item = $(this).parent()
$("article", item).html(data)
.addClass("expanded")
.append($('<br class="clearing">'))
$("a", item).live()
false
)

View File

@ -9,5 +9,6 @@
* compiled file, but it's generally better to create a new file per style scope.
*
*= require_self
*= require config
*= require_tree .
*/

View File

@ -0,0 +1,7 @@
// http://www.colourlovers.com/palette/126030/Cruel_Water_at_Night
$main_color1: #030C22;
$main_color2: #20293F;
$main_color3: #404749;
$main_color4: #A9B0B3;

View File

@ -1,3 +1,24 @@
// Place all the styles related to the items controller here.
// They will automatically be included in application.css.
// You can use Sass (SCSS) here: http://sass-lang.com/
@import "config";
li.item {
overflow: auto;
em.date_published, em.author {
font-size: 0.8em;
}
em.author {
font-weight: bold;
}
article {
// TODO: Some more default stuff for incomming HTML
p {
margin: 0;
padding: 0;
}
}
article.expanded {
padding: 10px 5px 10px 20px;
}
}

View File

@ -0,0 +1,27 @@
@import "config";
aside {
width: 250px;
float: left;
ul {
list-style-type: none;
padding: 0 5px;
//background-color: $main_color4;
}
}
section#feed_content {
float: left;
max-width: 750px;
ul {
list-style-type: none;
padding: 0 10px;
}
}
.clearing {
clear: both;
}

View File

@ -7,5 +7,6 @@
<%= render :partial => "navigation" %>
</aside>
<div id="feed_content">
</div>
<section id="feed_content">
</section>

View File

@ -2,7 +2,7 @@
<% @items.each do |item| %>
<li class="item">
<%= link_to raw(item.title), item_path(item), :remote => true %>
<span class="data_published"><%= time_ago_in_words(item.published_at) %></span> <span class="author">by <%= item.author %></span>
<em class="date_published"><%= time_ago_in_words(item.published_at) %></em> <em class="author">by <%= item.author %></em>
<article></article>
</li>
<% end %>