design feed list.

Matt Swanson · Matt Swanson · commit e00ae0f42860 · 2013-04-27T22:13:48.000-04:00
diff --git a/app.rb b/app.rb
@@ -46,4 +46,5 @@ def render_partial(name, locals = {})
 
 require_relative "app/controllers/stories_controller"
 require_relative "app/controllers/first_run_controller"
-require_relative "app/controllers/sessions_controller"
+require_relative "app/controllers/sessions_controller"
+require_relative "app/controllers/feeds_controller"
diff --git a/app/controllers/feeds_controller.rb b/app/controllers/feeds_controller.rb
@@ -0,0 +1,9 @@
+require_relative "../repositories/feed_repository"
+
+class Stringer < Sinatra::Base
+  get "/feeds" do
+    @feeds = Feed.all
+    
+    erb :'feeds/index'
+  end
+end
diff --git a/app/models/feed.rb b/app/models/feed.rb
@@ -1,3 +1,8 @@
 class Feed < ActiveRecord::Base
   has_many :stories, order: "published desc"
+
+  def status
+    options = [:green, :yellow, :red]
+    options[rand(3)]
+  end
 end
diff --git a/app/public/css/styles.css b/app/public/css/styles.css
@@ -86,12 +86,12 @@ hr {
   margin-bottom: 14px;
 }
 
-ul#story-list {
+ul#story-list, ul#feed-list {
   list-style-type: none;
   margin-left: 0px;
 }
 
-li.story {
+li.story, li.feed {
   margin-bottom: 7px;
   background-color: white;
   border-radius: 5px;
@@ -129,7 +129,7 @@ li.story.open .story-preview {
   border-bottom: 2px solid #FAF2E5;
 }
 
-.story-preview {
+.story-preview , .feed-line{
   height: 30px;
   line-height: 30px;
   cursor: pointer;
@@ -138,11 +138,11 @@ li.story.open .story-preview {
   white-space: nowrap;
 }
 
-.story-preview div {
+.story-preview div, .feed-line div {
   height: 30px;
 }
 
-.blog-title {
+.blog-title, .feed-title {
   text-align: left;
   margin-left: 20px;
   overflow: hidden;
@@ -231,6 +231,68 @@ li.story .story-body h1 a:hover {
   color: #7F8281;
 }
 
+li.feed .status {
+  height: 15px;
+  width: 15px;
+  display: inline-block;
+  line-height: 30px;
+  border-radius: 50px;
+  position: relative;
+  top: 2px;
+  left: 10px;
+}
+
+li.feed .feed-line {
+  cursor: default;
+}
+
+li.feed .feed-title {
+  display: inline-block;
+}
+
+li.feed .feed-title-container {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+li.feed .status.green {
+  background: #2ECC71;
+}
+
+li.feed .status.yellow {
+  background: #F1C40F;
+}
+
+li.feed .status.red {
+  background: #E74C3C;
+}
+
+li.feed .feed-last-updated {
+  text-align: right;
+}
+
+li.feed .last-updated {
+  font-size: 10px;
+}
+
+li.feed .last-updated-time {
+  width: 100px;
+  display: inline-block;
+}
+
+li.feed .remove-feed {
+  cursor: pointer;
+}
+
+li.feed .remove-feed a {
+  text-align: center;
+  padding-left: 3px;
+  padding-right: 3px;
+  margin-left: 10px;
+  color: #C0392B;
+}
+
 #zen {
   text-align: center;
 }
diff --git a/app/views/feeds/index.erb b/app/views/feeds/index.erb
@@ -0,0 +1,15 @@
+<div id="action-bar">
+  <%= render_partial :feed_action_bar %>
+</div>
+
+<% unless @feeds.empty? %>
+<div id="feeds">
+  <ul id="feed-list">
+    <% @feeds.each do |feed| %>
+      <%= render_partial :feed, { feed: feed } %>
+    <% end %>
+  </ul>
+</div>
+<% else %>
+  Hey, you should <a href="/add_feed">add</a> some feeds.
+<% end %>
diff --git a/app/views/partials/_action_bar.erb b/app/views/partials/_action_bar.erb
@@ -11,10 +11,10 @@
   </div>
 
   <div class="pull-right">
-    <a class="btn btn-primary" id="feeds">
+    <a class="btn btn-primary" id="feeds" href="/feeds">
       <i class="icon-list"></i>
     </a>
-    <a class="btn btn-primary" id="add-feed">
+    <a class="btn btn-primary" id="add-feed" href="/add_feed">
       <i class="icon-plus"></i>
     </a>
   </div>
diff --git a/app/views/partials/_feed.erb b/app/views/partials/_feed.erb
@@ -0,0 +1,23 @@
+<li class="feed" id="feed-<%= feed.id%>" data-id="<%= feed.id %>">
+  <div class="row-fluid feed-line">
+    <div class="span7 feed-title-container">
+      <div class="status <%= feed.status %>"></div>
+      <p class="feed-title">
+        <%= feed.name %>
+      </p>
+    </div>
+    <div class="span4 feed-last-updated">
+      <span class="last-updated">Last updated</span>
+      <span class="last-updated-time">
+        <% if feed.last_fetched %>
+          <%= feed.last_fetched.strftime("%b %d, %H:%M") %>
+        <% else %>
+          Never
+        <% end %>
+      </span>
+    </div>
+    <div class="span1 remove-feed">
+      <a class="icon-remove"></a>
+    </div>
+  </div>
+</li>
diff --git a/app/views/partials/_feed_action_bar.erb b/app/views/partials/_feed_action_bar.erb
@@ -0,0 +1,16 @@
+<div class="row-fluid">
+  <div class="pull-left">
+    <a class="btn" id="home" href="/news">
+      <i class="icon-reply"></i>
+    </a>
+  </div>
+
+  <div class="pull-right">
+    <a class="btn btn-primary" id="feeds" href="/feeds">
+      <i class="icon-list"></i>
+    </a>
+    <a class="btn btn-primary" id="add-feed" href="/add_feed">
+      <i class="icon-plus"></i>
+    </a>
+  </div>
+</div>
