From 92e7b90d619111fdaaf50ab0b8538c39605fe005 Mon Sep 17 00:00:00 2001
From: luca-marie <ml.kochsiek@fu-berlin.de>
Date: Thu, 1 Sep 2016 12:17:05 +0200
Subject: Updating the view and CSS, no pic and twitter handle in each tweet;
 Displaying only 3 most tweets

---
 app/assets/stylesheets/twitter.scss | 74 ++++++++++++++++++-------------------
 app/helpers/twitter_helper.rb       |  2 +-
 app/views/home/_content.html.haml   | 14 ++++---
 app/views/twitter/_index.html.erb   | 18 ++++-----
 4 files changed, 52 insertions(+), 56 deletions(-)

(limited to 'app')

diff --git a/app/assets/stylesheets/twitter.scss b/app/assets/stylesheets/twitter.scss
index b0ce982..89cdecf 100644
--- a/app/assets/stylesheets/twitter.scss
+++ b/app/assets/stylesheets/twitter.scss
@@ -5,30 +5,14 @@
 .twitter_header {
   font-size: 20px;
   text-align: left;
-  margin-bottom: 30px;
+  margin-bottom: 80px;
 }
 
-.twitter_list {
-  box-sizing: border-box;
-}
-
-.tweet:hover {
-    background-color: #ccf2ff;
-  }
-
-.tweet {
-  border-bottom-style: solid;
-  border-color: #bfbfbf;
-  padding: 10px 8px;
-}
-
-.tweet_title {
-  position: relative;
-  height: 40px;
-  margin-bottom: 10px;
+.twitter_id {
+  position: absolute;
 }
 
-.tweet_pic {
+.twitter_pic {
   display: block;
   width: 40px;
   height: 40px;
@@ -38,12 +22,39 @@
   top: 0;
   }
 
-.tweet_name {
-  padding-left: 50px;
+.twitter_image_frame {
+  width: 40px;
+  height: 40px;
+  overflow: hidden;
+  }
+
+.twitter_name {
+  padding-left: 65px;
   line-height: 40px;
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
+  font-size: 20px;
+}
+
+.twitter_image_frame > img {
+  display: block;
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  width: 100%;
+  margin: auto;
+  }
+
+.twitter_list {
+  box-sizing: border-box;
+}
+
+.tweet {
+  border-top-style: solid;
+  border-color: lightgrey;
+  padding: 10px 8px;
 }
 
 .tweet_text {
@@ -55,22 +66,9 @@ box-sizing: border-box;
   padding-top: 4px;
   font-size: 12px ;
 }
+
 .twitter_footer {
+  border-top-style: solid;
+  border-color: lightgrey;
   padding-top: 8px;
 }
-
-.twitter_image_frame {
-  width: 40px;
-  height: 40px;
-  overflow: hidden;
-}
-
-.twitter_image_frame > img {
-  display: block;
-  position: absolute;
-  top: 0;
-  bottom: 0;
-  left: 0;
-  width: 100%;
-  margin: auto;
-}
diff --git a/app/helpers/twitter_helper.rb b/app/helpers/twitter_helper.rb
index d20b7da..834e5c6 100644
--- a/app/helpers/twitter_helper.rb
+++ b/app/helpers/twitter_helper.rb
@@ -18,6 +18,6 @@ module TwitterHelper
   end
 
   def tweets
-    twitter_client.user_timeline(twitter_handle).select{ |tweet| tweet.text.start_with?('RT','@')==false}
+    twitter_client.user_timeline(twitter_handle).select{ |tweet| tweet.text.start_with?('RT','@')==false}.take(3)
   end
 end
diff --git a/app/views/home/_content.html.haml b/app/views/home/_content.html.haml
index a299295..ecd8524 100644
--- a/app/views/home/_content.html.haml
+++ b/app/views/home/_content.html.haml
@@ -1,11 +1,13 @@
-.row
-  %h1= t(:welcome, :provider => APP_CONFIG[:domain])
-  .p=t(:welcome_message_html)
+.col-md-9
+  .row
+    %h1= t(:welcome, :provider => APP_CONFIG[:domain])
+    .p=t(:welcome_message_html)
 
-.row
-  .col-md-9
+  .row
     = home_page_buttons
-  .col-md-3
+
+.col-md-3
+  .row
     = render 'twitter/index'
 
     - if Rails.env == 'development'
diff --git a/app/views/twitter/_index.html.erb b/app/views/twitter/_index.html.erb
index eba9675..2d17aad 100644
--- a/app/views/twitter/_index.html.erb
+++ b/app/views/twitter/_index.html.erb
@@ -2,20 +2,17 @@
   <div class="twitter">
 
       <div class="twitter_header">
-        Tweets by </br><%= twitter_name %></p>
+        <p>These are the most recent tweets by </br><%= twitter_name%></p>
+
+        <div class="twitter_id">
+          <div class="twitter_pic twitter_image_frame"><%= image_tag("rails.png") %></div>
+          <div class="twitter_name"><a href="https://twitter.com/loadtocode">@<%= twitter_handle %></a></div>
+        </div>
       </div>
 
       <div class="twitter_list">
         <% tweets.each do |e| %>
           <div class="tweet">
-
-            <div class="tweet_title">
-              <div class="tweet_pic twitter_image_frame"><%= image_tag("team-loadtocode-Loading_icon.gif") %></div>
-                <div class="tweet_name">
-                  @<%= twitter_handle %>
-                </div>
-            </div>
-
             <div class="tweet_text"><%= " #{e.text}" %>
             </div>
 
@@ -29,6 +26,5 @@
       <div class="twitter_footer">
         To prevent leakage no links are displayed. For more information visit @<%= twitter_name %> on twitter.com.</p>
       </div>
-
-    </div>
+</div>
 <% end %>
-- 
cgit v1.2.3