Change layout and number of tweets for 2 columns

st-tech · Apr 25, 2019 · eb84d4f · eb84d4f
1 parent ac41a9a
commit eb84d4f
Show file tree

Hide file tree

Showing 3 changed files with 37 additions and 25 deletions.
diff --git a/lambda/web/app/models/tweet.rb b/lambda/web/app/models/tweet.rb
@@ -9,7 +9,7 @@ class << self
     def ranking
       order_by_score_desc
         .reject { |t| t.delete_flag }
-        .take(15)
+        .take(30)
     end
 
     def all

diff --git a/lambda/web/app/public/css/style.css b/lambda/web/app/public/css/style.css
@@ -69,11 +69,21 @@ h1 {
 }
 
 .contents {
-  margin: 0 20%;
+  margin: 0 5%;
   background: #fff;
+  display: flex;
+  justify-content: center;
+}
+
+.ranking {
+  flex-grow: 1;
   border: 1rem #000 solid;
 }
 
+.ranking:first-child {
+  border-right: none;
+}
+
 .ranking-list {
   border-bottom: 1rem #000 solid;
 }

diff --git a/lambda/web/app/views/index.erb b/lambda/web/app/views/index.erb
@@ -15,30 +15,32 @@
         <h1>FASHION CHECK RANKING</h1>
       </header>
       <div class="contents">
-        <ul class="ranking">
-          <% @tweets.each.with_index(1) do |tweet, i| %>
-            <li id="ranking<%= i %>" class="ranking-list">
-              <div class="ranking-body">
-                <div class="ranking-num">
-                  <%= i %>
+        <% 2.times do |i| %>
+          <ul class="ranking">
+            <% @tweets[(15 * i)...(15 * (i + 1))].each.with_index(15 * i + 1) do |tweet, i| %>
+              <li id="ranking<%= i %>" class="ranking-list">
+                <div class="ranking-body">
+                  <div class="ranking-num">
+                    <%= i %>
+                  </div>
+                  <div class="ranking-fav">
+                    <%= tweet.score %><span>FAV</span>
+                  </div>
+                  <div class="ranking-user">
+                    <a href="<%= tweet.tweet_url %>">
+                      <div class="ranking-user-img">
+                        <img src="<%= tweet.image_url %>" alt="<%= tweet.account_id %>">
+                      </div>
+                      <div class="ranking-user-name">
+                        @<%= tweet.account_id %>
+                      </div>
+                    </a>
+                  </div>
                 </div>
-                <div class="ranking-fav">
-                  <%= tweet.score %><span>FAV</span>
-                </div>
-                <div class="ranking-user">
-                  <a href="<%= tweet.tweet_url %>">
-                    <div class="ranking-user-img">
-                      <img src="<%= tweet.image_url %>" alt="<%= tweet.account_id %>">
-                    </div>
-                    <div class="ranking-user-name">
-                      @<%= tweet.account_id %>
-                    </div>
-                  </a>
-                </div>
-              </div>
-            </li>
-          <% end %>
-        </ul>
+              </li>
+            <% end %>
+          </ul>
+        <% end %>
       </div>
       <footer>
         © ZOZO Technologies, Inc.