Split landing page columns

assets/css/components/_container.scss

@@ -31,13 +31,39 @@
 }
 
 @media (min-width: $explorer-breakpoint-sm) {
-  .container__section { width: $explorer-breakpoint-sm; }
+  .container {
+    &__section { width: $explorer-breakpoint-sm; }
+  }
 }
 
 @media (min-width: $explorer-breakpoint-md) {
-  .container__section { width: $explorer-breakpoint-md; }
+  .container {
+    &__section {
+      width: $explorer-breakpoint-md;
+
+      &--partitioned {
+        display: flex;
+        align-items: top;
+        justify-content: top;
+      }
+    }
+
+    &__subsection {
+      flex: 1;
+      margin-right: explorer-size(-2);
+      & + & { margin-left: explorer-size(-2); }
+    }
+  }
 }
 
 @media (min-width: $explorer-breakpoint-lg) {
-  .container__section { width: $explorer-breakpoint-lg; }
+  .container {
+    &__section { width: $explorer-breakpoint-lg; }
+  }
+}
+
+@media (min-width: $explorer-breakpoint-xl) {
+  .container {
+    &__section { width: $explorer-breakpoint-xl; }
+  }
 }

assets/css/components/_transactions.scss

@@ -18,4 +18,23 @@
     @include explorer-typography("body1");
     color: explorer-color("slate", "100");
   }
+
+  &__hash {
+    width: explorer-size(2);
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    overflow: hidden;
+  }
+}
+
+@media (min-width: $explorer-breakpoint-lg) {
+  .transactions {
+    &__hash { width: explorer-size(3); }
+  }
+}
+
+@media (min-width: $explorer-breakpoint-xl) {
+  .transactions {
+    &__hash { width: explorer-size(4); }
+  }
 }

lib/explorer_web/templates/page/index.html.eex

@@ -1,5 +1,5 @@
-<section class="container__section">
-  <div class="blocks">
+<section class="container__section container__section--partitioned">
+  <div class="blocks container__subsection">
     <div class="blocks__container blocks__container--title">
       <h2 class="blocks__title"><%= gettext "Blocks" %></h2>
     </div>
@@ -18,7 +18,7 @@
             <tr class="blocks__row">
               <td class="blocks__column blocks__column--height"><%= block.number %></td>
               <td class="blocks__column blocks__column--age"><%= block.age %></td>
-              <td class="blocks__column blocks__column--transactions_count"><%= block.transactions_count %></td>
+              <td class="blocks__column blocks__column--transactions-count"><%= block.transactions_count %></td>
               <td class="blocks__column blocks__column--gas-used"><%= block.gas_used %></td>
             </tr>
           <% end %>
@@ -26,8 +26,7 @@
       </table>
     </div>
   </div>
-
-  <div class="transactions">
+  <div class="transactions container__subsection">
     <div class="transactions__container transactions__container--title">
       <h2 class="transactions__title"><%= gettext "Transactions" %></h2>
     </div>
@@ -44,7 +43,9 @@
         <tbody>
           <%= for transaction <- @transactions do %>
             <tr class="transactions__row">
-              <td class="transactions__column transactions__column--hash"><%= transaction.hash %></td>
+              <td class="transactions__column transactions__column--hash">
+                <div class="transactions__hash" title="<%= transaction.hash %>"><%= transaction.hash %></div>
+              </td>
               <td class="transactions__column transactions__column--block"><%= transaction.block.number %></td>
               <td class="transactions__column transactions__column--age"><%= transaction.block.timestamp |> Timex.from_now %></td>
               <td class="transactions__column transactions__column--value"><%= transaction.value %></td>

test/explorer_web/features/contributor_browsing_test.exs

@@ -24,8 +24,8 @@ defmodule ExplorerWeb.UserListTest do
     |> visit("/en")
     |> assert_has(css(".blocks__title", text: "Blocks"))
     |> assert_has(css(".blocks__column--height", count: 5, text: "1"))
-    |> assert_has(css(".blocks__column--transactions_count", count: 5))
-    |> assert_has(css(".blocks__column--transactions_count", count: 1, text: "3"))
+    |> assert_has(css(".blocks__column--transactions-count", count: 5))
+    |> assert_has(css(".blocks__column--transactions-count", count: 1, text: "3"))
     |> assert_has(css(".blocks__column--age", count: 5, text: "1 hour ago"))
     |> assert_has(css(".blocks__column--gas-used", count: 5, text: "10"))
   end