From f8966e259c3503797e50a887e86def511e592c70 Mon Sep 17 00:00:00 2001 From: maxgrapps Date: Thu, 20 Jun 2019 17:31:22 +0300 Subject: [PATCH 1/2] redesigned 'download csv' button --- .../assets/css/components/_transaction.scss | 73 +++++++------------ .../address_transaction/index.html.eex | 20 +++-- apps/block_scout_web/priv/gettext/default.pot | 5 +- 3 files changed, 42 insertions(+), 56 deletions(-) diff --git a/apps/block_scout_web/assets/css/components/_transaction.scss b/apps/block_scout_web/assets/css/components/_transaction.scss index b949e0f055..1fd1c6241e 100644 --- a/apps/block_scout_web/assets/css/components/_transaction.scss +++ b/apps/block_scout_web/assets/css/components/_transaction.scss @@ -1,56 +1,35 @@ -.transaction-details-address { - font-size: 12px; - font-weight: bold; - line-height: 1.2; - margin: 0 0 12px; -} - -.transaction-top-panel, .transaction-bottom-panel { +.transaction-bottom-panel { display: flex; - justify-content: space-between; flex-direction: column; - @media (min-width: 500px) { - flex-direction: row; + @media (min-width: 768px) { + flex-direction: row; + justify-content: space-between; + align-items: flex-end; } } -.transaction-top-panel { - .pagination-container { - margin-top: 30px; +.download-all-transactions { + text-align: center; + color: #a3a9b5; + font-size: 14px; + margin-top: 10px; + @media (min-width: 768px) { + margin-top: 0; } - @media (min-width: 500px) { - align-items: flex-start; - .pagination-container { - margin-top: 0; + .download-all-transactions-link { + text-decoration: none; + svg { + position: relative; + margin-left: 2px; + top: -3px; + path { + fill: $primary; + } + } + &:hover { + span { + text-decoration: underline; + } } } -} - -.transaction-bottom-panel { - @media (min-width: 500px) { - align-items: flex-end; - } -} - -.download-csv { - display: inline-block; - height: 24px; - background: #f5f6fa; - border-radius: 2px; - outline: none; - font-family: Nunito, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"; - font-size: 12px; - line-height: 25px; - padding: 0 10px; - font-weight: 600; - cursor: pointer; - color: #a3a9b5; - text-align: center; - transition: .1s ease-in; - text-decoration: none !important; - &:hover { - background-color: $primary; - color: #fff; - border-color: $primary; - } } \ No newline at end of file diff --git a/apps/block_scout_web/lib/block_scout_web/templates/address_transaction/index.html.eex b/apps/block_scout_web/lib/block_scout_web/templates/address_transaction/index.html.eex index 5c1552e943..a24df921c6 100644 --- a/apps/block_scout_web/lib/block_scout_web/templates/address_transaction/index.html.eex +++ b/apps/block_scout_web/lib/block_scout_web/templates/address_transaction/index.html.eex @@ -50,10 +50,10 @@ -
- to_string(@address.hash)}) %>><%= gettext("Download All Transactions as CSV") %> - <%= render BlockScoutWeb.CommonComponentsView, "_pagination_container.html", position: "top", show_pagination_limit: true, data_next_page_button: true, data_prev_page_button: true %> -
+ + + + <%= render BlockScoutWeb.CommonComponentsView, "_pagination_container.html", position: "top", show_pagination_limit: true, data_next_page_button: true, data_prev_page_button: true %>