Merge pull request #2207 from maxgrapps/ab-export-transactions

New 'download csv' button design

CHANGELOG.md

@@ -35,6 +35,7 @@
 - [#2064](https://github.com/poanetwork/blockscout/pull/2064) - feat: add fields to tx apis, small cleanups
 
 ### Fixes
+- [#2207](https://github.com/poanetwork/blockscout/pull/2207) - new 'download csv' button design
 - [#2206](https://github.com/poanetwork/blockscout/pull/2206) - added styles for 'Download All Transactions as CSV' button
 - [#2099](https://github.com/poanetwork/blockscout/pull/2099) - logs search input width
 - [#2098](https://github.com/poanetwork/blockscout/pull/2098) - nav dropdown issue, logo size issue

apps/block_scout_web/assets/css/components/_transaction.scss

@@ -1,56 +1,35 @@
-.transaction-details-address {
+.transaction-bottom-panel {
-  font-size: 12px;
-  font-weight: bold;
-  line-height: 1.2;
-  margin: 0 0 12px;
-}
-
-.transaction-top-panel, .transaction-bottom-panel {
 	display: flex;
-	justify-content: space-between;
 	flex-direction: column;
-	@media (min-width: 500px) {
+	@media (min-width: 768px) {
-		flex-direction: row;	
+		flex-direction: row;
+		justify-content: space-between;
+		align-items: flex-end;
 	}
 }
 
-.transaction-top-panel {
+.download-all-transactions {
-	.pagination-container {
+	text-align: center;
-		margin-top: 30px;
+	color: #a3a9b5;
+	font-size: 14px;
+	margin-top: 10px;
+	@media (min-width: 768px) {
+		margin-top: 0;
 	}
-	@media (min-width: 500px) {
+	.download-all-transactions-link {
-		align-items: flex-start;	
+		text-decoration: none;
-		.pagination-container {
+		svg {
-			margin-top: 0;
+			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;
-    }
 }

apps/block_scout_web/lib/block_scout_web/templates/address_transaction/index.html.eex

@@ -50,10 +50,10 @@
             </div>
           </div>
         </div>
-        <div class="transaction-top-panel">
+        
-          <a class="download-csv" href=<%= address_transaction_path(@conn, :transactions_csv, %{"address_id" => to_string(@address.hash)}) %>><%= gettext("Download All Transactions as CSV") %></a>
+        
-          <%= render BlockScoutWeb.CommonComponentsView, "_pagination_container.html", position: "top", show_pagination_limit: true, data_next_page_button: true, data_prev_page_button: true %>
+
-        </div>
+        <%= render BlockScoutWeb.CommonComponentsView, "_pagination_container.html", position: "top", show_pagination_limit: true, data_next_page_button: true, data_prev_page_button: true %>
 
         <button data-error-message class="alert alert-danger col-12 text-left" style="display: none;">
           <span href="#" class="alert-link"><%= gettext("Something went wrong, click to reload.") %></span>
@@ -66,9 +66,17 @@
         </div>
 
         <div data-items></div>
-  
+        
         <div class="transaction-bottom-panel">
-          <a class="download-csv" href=<%= address_transaction_path(@conn, :transactions_csv, %{"address_id" => to_string(@address.hash)}) %>><%= gettext("Download All Transactions as CSV") %></a>
+          <div class="download-all-transactions">
+            Download&nbsp;
+            <a class="download-all-transactions-link" href=<%= address_transaction_path(@conn, :transactions_csv, %{"address_id" => to_string(@address.hash)}) %>>
+              <span><%= gettext("CSV") %></span>
+              <svg xmlns="http://www.w3.org/2000/svg" width="14" height="16">
+                  <path fill="#333333" fill-rule="evenodd" d="M13 16H1c-.999 0-1-1-1-1V1s-.004-1 1-1h6l7 7v8s-.032 1-1 1zm-1-8c0-.99-1-1-1-1H8s-1 .001-1-1V3c0-.999-1-1-1-1H2v12h10V8z"/>
+              </svg>
+            </a>
+          </div>
           <%= render BlockScoutWeb.CommonComponentsView, "_pagination_container.html", position: "bottom", cur_page_number: "1", show_pagination_limit: true, data_next_page_button: true, data_prev_page_button: true %>
         </div>
 

apps/block_scout_web/priv/gettext/default.pot

@@ -1696,7 +1696,6 @@ msgid "New Smart Contract Verification"
 msgstr ""
 
 #, elixir-format
-#: lib/block_scout_web/templates/address_transaction/index.html.eex:54
+#: lib/block_scout_web/templates/address_transaction/index.html.eex:74
-#: lib/block_scout_web/templates/address_transaction/index.html.eex:71
+msgid "CSV"
-msgid "Download All Transactions as CSV"
 msgstr ""