From 6bb76f18940c8bbbb0b27cee180ae6bb56527fb8 Mon Sep 17 00:00:00 2001
From: Victoria Wang <violasongoo@gmail.com>
Date: Wed, 15 Oct 2014 17:38:19 -0700
Subject: [PATCH] News feed suggestions now using the same site gallery style
 as the browse page

---
 sass/_project-sass/_project-Main.scss         |  5 ++-
 .../_project-Website-Gallery.scss             | 14 ++++++
 views/home.erb                                | 44 ++++++++++++++-----
 3 files changed, 50 insertions(+), 13 deletions(-)

diff --git a/sass/_project-sass/_project-Main.scss b/sass/_project-sass/_project-Main.scss
index ca85cfba..8e323777 100644
--- a/sass/_project-sass/_project-Main.scss
+++ b/sass/_project-sass/_project-Main.scss
@@ -1080,7 +1080,10 @@ a.tag:hover {
 .pagination .arrow {
   vertical-align: 1px;
 }
-
+.view-all-sites {
+  font-size: 1.2em;
+  margin-top: 1em;
+}
 .interior .header-Outro.with-columns .col.filter {
   padding-top: 0px;
   padding-bottom: 4px;
diff --git a/sass/_project-sass/_project-Website-Gallery.scss b/sass/_project-sass/_project-Website-Gallery.scss
index a4216577..17eb828f 100644
--- a/sass/_project-sass/_project-Website-Gallery.scss
+++ b/sass/_project-sass/_project-Website-Gallery.scss
@@ -54,6 +54,7 @@
   .title {
     margin-top: 8px;
     margin-bottom: 2px;
+    white-space: nowrap;
   }
   
   &.int-Gall{
@@ -73,6 +74,19 @@
         width:49%
       }
     }
+    &.suggestions {
+      padding: .25em 0 0 0;
+      
+      li {
+        margin: 0 1.33% 12px 0;
+        width: 32%;
+        @include box-shadow(1px 1px 2px 1px rgba(0, 0, 0, 0.1));
+
+        @media (max-width:1000px){
+          width:48%
+        } 
+      }
+    }
   }
 }
 
diff --git a/views/home.erb b/views/home.erb
index 9e2aa9ae..ce44c116 100644
--- a/views/home.erb
+++ b/views/home.erb
@@ -29,27 +29,47 @@
           <div class="welcome">
             <h4>Welcome to your Neocities news feed!</h4>
             <p>
-              You aren't following any websites yet! Once you do, updates will show up here and you can like and comment on them.
+              You aren’t following any websites yet! Once you do, updates will show up here and you can like and comment on them.
 
               Here are some website suggestions for you. Want to find some sites to follow? <a href="/browse">Check out all the sites on Neocities!</a>
             </p>
           </div>
 
+          <ul class="row website-Gallery content int-Gall suggestions">
           <% @suggestions.each do |suggested_site| %>
-            <div class="site-suggestion">
-              <div class="site-portrait">
-                <a href="//<%= suggested_site.host %>">
-                  <img src="<%= suggested_site.screenshot_url('index.html', '540x405') %>">
-                </a>
-                <span class="caption">
-                  <a href="/site/<%= suggested_site.username %>"><%= suggested_site.title %></a>
+            <li>
+              <a href="//<%= suggested_site.host %>" class="neo-Screen-Shot" target="_blank" title="<%= suggested_site.title %>">
+                <span class="img-Holder" style="background:url(<%= suggested_site.screenshot_url('index.html', '540x405') %>) no-repeat;">
+                  <img src="/img/placeholder.png" alt="<%= suggested_site.title %>" />
                 </span>
+              </a>
+              <div class="title">
+                <a href="//<%= suggested_site.host %>" title="<%= suggested_site.title %>"><%= suggested_site.title.shorten(30) %></a>
               </div>
-              <% suggested_site.tags.each do |tag| %>
-                <a class="tag" href="/browse?tag=<%= Rack::Utils.escape tag.name %>"><%= tag.name %></a>
-              <% end %>
-            </div>
+              <div class="site-info">
+                <div class="username">
+                  <a href="/site/<%= suggested_site.username %>" title="Profile">
+                    <i class="fa fa-user"></i><%= site.username %>
+                  </a>
+                </div>
+                <div class="site-stats">
+                  <a href="/site/<%= suggested_site.username %>">
+                      <%= suggested_site.views %>&nbsp;view<%= suggested_site.views == 1 ? '' : 's' %>
+                  </a>
+                </div>
+                <div class="site-tags">
+                  <% if suggested_site.tags.count > 0 %>
+                    <i class="fa fa-tag"></i> 
+                    <% suggested_site.tags.each_with_index do |tag, index| %>
+                      <a class="" href="/browse?tag=<%= Rack::Utils.escape tag.name %>"><%= tag.name %></a><% if index != suggested_site.tags.length - 1 %>,<% end %> 
+                    <% end %>
+                  <% end %>
+                </div>
+              </div>
+            </li>
           <% end %>
+        </ul>
+        <p class="view-all-sites"><a href="/browse">View all sites <i class="fa fa-angle-double-right"></i></a></p>
         <% end %>
       </div>