From a673d851c16ccca9a59deb884d68693493441de3 Mon Sep 17 00:00:00 2001
From: Victoria Wang <violasongoo@gmail.com>
Date: Tue, 18 Nov 2014 20:43:17 -0600
Subject: [PATCH] Mobile fixes for news feed

---
 sass/_project-sass/_project-Main.scss | 46 +++++++++++++++++++++++++++
 views/home.erb                        | 32 ++++++++++---------
 2 files changed, 63 insertions(+), 15 deletions(-)

diff --git a/sass/_project-sass/_project-Main.scss b/sass/_project-sass/_project-Main.scss
index 86ce3339..7ff5fe20 100644
--- a/sass/_project-sass/_project-Main.scss
+++ b/sass/_project-sass/_project-Main.scss
@@ -35,6 +35,18 @@
   font-size: 2.5em;
   margin-top: 15px;
 }
+.news-site-info {
+  @media (max-device-width:480px), screen and (max-width:800px) {
+    float: right;
+    width: 35%;
+    
+    .col-50 {
+      width:100%;
+      margin-bottom: 1em!important;
+    }
+  }
+  
+}
 .site-url {
   font-size:18px;
   margin-bottom: 8px;
@@ -449,6 +461,10 @@
 }
 .news-feed .content.misc-page.columns .col-66 {
   min-height: 56em;
+  
+  @media (max-device-width:480px), screen and (max-width:800px) {
+    min-height: 0;
+  }
 }
 .content.misc-page.columns .col-33 {
   width: 33%;
@@ -475,10 +491,27 @@
 }
 .interior .header-Outro.with-columns .col-32 {
   width: 33%;
+  
+  h3 {
+    @media (max-device-width:480px), screen and (max-width:800px) {
+      display: none;
+    }
+  }
+  @media (max-device-width:480px), screen and (max-width:800px) {
+    width: 10em!important;
+    float: right;
+    padding: 0 0 18px 0;
+    margin-top: -28px;
+  }
 }
 .interior .header-Outro.with-columns .col-66 {
   width: 67%;
   border-right: 1px solid #0B0F11;
+  
+  @media (max-device-width:480px), screen and (max-width:800px) {
+   border-right: 0;
+   padding: 15px 0 27px 30px; 
+  }
 }
 .interior .header-Outro.with-columns .col-32 .edit {
   margin-top: 4px;
@@ -520,6 +553,10 @@
   background-size: cover;
   float: left;
   margin-bottom: 20px;
+  
+  @media (max-device-width:480px), screen and (max-width:800px) {
+    width: 60%;
+  }
 }
 .site-portrait {
   border: 5px solid white;
@@ -538,6 +575,15 @@
   margin-top: .2em;
   margin-bottom: -.2em;
 }
+.news-profile-button {
+  clear: both;
+  margin: 20px auto 2em auto;
+  text-align: center;
+  
+  @media (max-device-width:480px), screen and (max-width:800px) {
+    text-align: left;
+  }
+}
 a.tag, a.tag:visited {
   font-size: .7em;
   text-transform: uppercase;
diff --git a/views/home.erb b/views/home.erb
index 87a82cbc..b72b5c69 100644
--- a/views/home.erb
+++ b/views/home.erb
@@ -13,7 +13,7 @@
       </div>
     </div>
     <div class="col col-32">
-      <h3>Your Website</h3>
+      <h3>Your Site</h3>
       <a href="/dashboard" class="btn-Action edit"><i class="fa fa-edit" title="Edit"></i>Edit Site</a>
     </div>
   </div>
@@ -87,25 +87,27 @@
       </div>
 
       <div class="col col-33">
-        <p class="site-url"><a href="//<%= current_site.host %>" target="_blank"><%= site.title %></a></p>
-        <div class="stats">
-          <div class="col col-50">
-            <% if site.updated_at %>
-              Last updated<br><strong><%= site.updated_at.ago %></strong>
-            <% else %>
-              Your new website!<br><strong><a href="/dashboard"><i class="fa fa-edit" title="Edit"></i> Start Building</a></strong>
-            <% end %>
-          </div>
-          <div class="col col-50">
-            <div><strong><%= site.views.format_large_number %></strong> unique views</div>
-            <div><strong><%= site.hits.format_large_number %></strong> hits</div>
-            <div><strong><%= site.follows_dataset.count.format_large_number %></strong> followers</div>
+        <div class="news-site-info">
+          <p class="site-url"><a href="//<%= current_site.host %>" target="_blank"><%= site.title %></a></p>
+          <div class="stats">
+            <div class="col col-50">
+              <% if site.updated_at %>
+                Last updated<br><strong><%= site.updated_at.ago %></strong>
+              <% else %>
+                Your new website!<br><strong><a href="/dashboard"><i class="fa fa-edit" title="Edit"></i> Start Building</a></strong>
+              <% end %>
+            </div>
+            <div class="col col-50">
+              <div><strong><%= site.views.format_large_number %></strong> views</div>
+              <div><strong><%= site.hits.format_large_number %></strong> hits</div>
+              <div><strong><%= site.follows_dataset.count.format_large_number %></strong> followers</div>
+            </div>
           </div>
         </div>
 
         <a href="//<%= site.host %>" class="large-portrait" style="background-image:url(<%= site.screenshot_url('index.html', '540x405') %>);"></a>
 
-        <div style="margin-top: 20px; margin-bottom: 2em" class="txt-Center">
+        <div class="news-profile-button">
           <a href="/site/<%= site.username %>" class="btn-Action">View Site Profile</a>
         </div>