Merge pull request #203 from poanetwork/remove-unnecessary-style-code

Remove unnecessary style code

apps/explorer_web/assets/css/app.scss

@@ -1,5 +1,4 @@
 @import "explorer/all";
-@import "components/all";
 
 /* Phoenix flash messages */
 .alert:empty { display: none; }
@@ -43,9 +42,10 @@ $fa-font-path: "~@fortawesome/fontawesome-free/webfonts";
 @import "components/dot";
 @import "components/pagination";
 @import "components/address_link";
-@import "explorer/button";
+@import "components/footer";
-@import "explorer/filter";
+@import "components/filter";
-@import "explorer/table";
+@import "components/button";
+@import "components/table";
 @import "tooltip";
 
 :export {

apps/explorer_web/assets/css/components/_address.scss

@@ -1,47 +0,0 @@
-.address {
-  &__container { @extend %paper; }
-  &__header { @extend %section-header; }
-  &__heading { @extend %section-header__heading; }
-  &__subheading { @extend %section-header__subheading; }
-  &__attributes {
-    @include explorer-typography("body1");
-    padding: explorer-size(-1) explorer-size(1);
-  }
-  &__item { @extend %section-list__item; }
-  &__item-key { @extend %section-list__item-key; }
-  &__item-value { @extend %section-list__item-value; }
-
-  &__tabs { @extend %section-tabs; }
-  &__tab {
-    @extend %section-tabs__tab;
-    &--active { @extend %section-tabs__tab--active; }
-  }
-
-  &__headline-title {
-    @include explorer-typography("title");
-    color: explorer-color("slate", "900");
-    margin: 0;
-    line-height: 18px;
-  }
-
-  &__link { color: explorer-color("blue", "500"); }
-
-  &__pagination {
-    margin: explorer-size(-1) 0 explorer-size(-2) 0;
-    .pagination { text-align: right; }
-  }
-}
-
-@media (min-width: $explorer-breakpoint-md) {
-  .address {
-    &__headline {
-      display: flex;
-      align-items: center;
-      justify-content: center;
-    }
-    &__headline-title { flex: 1; }
-    &__pagination {
-      margin: explorer-size(-1) 0 explorer-size(-2) 0;
-    }
-  }
-}

apps/explorer_web/assets/css/components/_all.scss

@@ -1,4 +0,0 @@
-@import "section";
-@import "address";
-@import "block";
-@import "footer";

apps/explorer_web/assets/css/components/_block.scss

@@ -1,36 +0,0 @@
-.block {
-  &__container { @extend %paper; }
-  &__header { @extend %section-header; }
-  &__heading { @extend %section-header__heading; }
-  &__subheading { @extend %section-header__subheading; }
-  &__tabs { @extend %section-tabs; }
-
-  &__tab {
-    @extend %section-tabs__tab;
-    &--active { @extend %section-tabs__tab--active; }
-  }
-
-  &__attributes { padding: explorer-size(-1) explorer-size(1); }
-  &__column { @include explorer-typography("body1"); }
-  &__item { @extend %section-list__item; }
-  &__item-key { @extend %section-list__item-key; }
-  &__item-value { @extend %section-list__item-value; }
-  &__link { color: explorer-color("blue", "500"); }
-}
-
-@media (min-width: $explorer-breakpoint-lg) {
-  .block {
-    &__attributes {
-      display: flex;
-      align-items: top;
-      justify-content: top;
-    }
-
-    &__column {
-      width: explorer-size(1);
-      flex: 1;
-      margin-right: explorer-size(1);
-      & + & { margin-left: explorer-size(1); }
-    }
-  }
-}

apps/explorer_web/assets/css/components/_footer.scss

@@ -2,8 +2,8 @@
   font-size: 12px;
   display: block;
   bottom: 0;
-  background: explorer-color("gray", "50");
+  background: $gray-100;
-  color:explorer-color("gray", "700");
+  color:$gray-600;
   text-align: center;
   padding: 14px;
   height: 50px;

apps/explorer_web/assets/css/components/_section.scss

@@ -1,55 +0,0 @@
-%section-header {
-  margin-top: explorer-size(-1);
-  margin-bottom: explorer-size(0);
-}
-
-%section-header__heading {
-  @include explorer-typography("title");
-  color: explorer-color("gray", "900");
-  margin: 0;
-}
-
-%section-header__subheading {
-  @include explorer-typography("body1");
-  color: explorer-color("slate", "900");
-  text-overflow: ellipsis;
-  white-space: nowrap;
-  overflow: hidden;
-  margin: 0;
-}
-
-%section-tabs {
-  padding: 0 explorer-size(0);
-}
-
-%section-tabs__tab {
-  @include explorer-typography("body1");
-  margin: 0;
-  border-top: explorer-size(-4) solid transparent;
-  border-left: explorer-size(-4) solid transparent;
-  border-right: explorer-size(-4) solid transparent;
-  display: inline-block;
-  padding: explorer-size(-2) explorer-size(-2);
-}
-
-%section-tabs__tab--active {
-  border-top-color: explorer-color("blue", "500");
-}
-
-%section-list__item {
-  display: flex;
-  flex-direction: row;
-  justify-content: space-between;
-}
-
-%section-list__item-key {
-  color: explorer-color("black");
-  min-width: explorer-size(3);
-}
-
-%section-list__item-value {
-  color: explorer-color("slate", "900");
-  text-overflow: ellipsis;
-  white-space: nowrap;
-  overflow: hidden;
-}

apps/explorer_web/assets/css/components/_transaction_log.scss

@@ -1,47 +0,0 @@
-.transaction-log {
-  @extend %paper;
-
-  &__container {
-    padding: explorer-size(-1) explorer-size(0);
-    & + & { padding-top: 0; }
-    &--title { padding-top: explorer-size(0); }
-  }
-
-  &__header { @extend %section-header; }
-  &__heading { @extend %section-header__heading; }
-  &__subheading { @extend %section-header__subheading; }
-  &__tabs { @extend %section-tabs; }
-
-  &__tab {
-    @extend %section-tabs__tab;
-    &--active { @extend %section-tabs__tab--active; }
-  }
-
-  &__attributes { padding: explorer-size(-1) explorer-size(1); }
-  &__link { color: explorer-color("blue", "500"); }
-
-  &__table {
-  
-    @include explorer-typography("body1");
-    color: explorer-color("slate", "900");
-  }
-
-  &__column-header { @include explorer-typography("body1"); }
-}
-
-@media (min-width: $explorer-breakpoint-lg) {
-  .transaction {
-    &__attributes {
-      display: flex;
-      align-items: top;
-      justify-content: top;
-    }
-
-    &__column {
-      width: explorer-size(1);
-      flex: 1;
-      margin-right: explorer-size(1);
-      & + & { margin-left: explorer-size(1); }
-    }
-  }
-}

apps/explorer_web/assets/css/explorer/_all.scss

@@ -1,7 +1,3 @@
 @import "breakpoints";
-@import "color";
-@import "header";
 @import "size";
-@import "open_sans";
 @import "paper";
-@import "typography";

apps/explorer_web/assets/css/explorer/_color.scss

@@ -1,51 +0,0 @@
-$explorer-colors: (
-    "blue": (
-      "500": #4786ff
-    ),
-    "slate": (
-      "50": #f5f7fa,
-      "100": #cfd8dc,
-      "200": #b0bec5,
-      "300": #90a4ae,
-      "400": #78909c,
-      "500": #607d8b,
-      "600": #546e7a,
-      "700": #455a64,
-      "800": #37474f,
-      "900": #263238
-    ),
-    "gray": (
-      "50": #fafafa,
-      "100": #f5f5f5,
-      "200": #eeeeee,
-      "300": #e0e0e0,
-      "400": #bdbdbd,
-      "500": #9e9e9e,
-      "600": #757575,
-      "700": #616161,
-      "800": #424242,
-      "900": #212121
-    ),
-    "green": (
-      "500": #1bb85a
-    ),
-    "purple": (
-      "500": #8940d5
-    ),
-    "yellow": (
-      "500": #ffc547
-    ),
-    "red": (
-      "500": #ff7860
-    ),
-    "white": #ffffff,
-    "black": #000000
-);
-
-@function explorer-color($color-name, $tone: null) {
-  @if ($tone) {
-    @return map-get(map-get($explorer-colors, $color-name), $tone);
-  } @else {
-    @return map-get($explorer-colors, $color-name);
-  }
-}

apps/explorer_web/assets/css/explorer/_header.scss

@@ -1,19 +0,0 @@
-$explorer-header-small: 48px;
-$explorer-header-medium: 56px;
-$explorer-header-large: 64px;
-
-%explorer-header-height { height: $explorer-header-small; }
-%explorer-header-square-width { width: $explorer-header-small; }
-%explorer-header-min-height { min-height: $explorer-header-small; }
-
-@media (orientation: landscape) and (max-height: $explorer-breakpoint-landscape) {
-  %explorer-header-height { height: $explorer-header-medium; }
-  %explorer-header-square-width { width: $explorer-header-medium; }
-  %explorer-header-min-height { min-height: $explorer-header-medium; }
-}
-
-@media (min-width: $explorer-breakpoint-landscape) {
-  %explorer-header-height { height: $explorer-header-large; }
-  %explorer-header-square-width { width: $explorer-header-large; }
-  %explorer-header-min-height { min-height: $explorer-header-large; }
-}

apps/explorer_web/assets/css/explorer/_paper.scss

@@ -1,7 +1,7 @@
 %paper {
   margin-bottom: 1rem;
-  border-radius: explorer-size(-4);
+  border-radius: 5px;
-  background-color: explorer-color("white");
+  background-color: #fff;
-  box-shadow: 0 2px 2px 0 rgba(explorer-color("black"), 0.16),
+  box-shadow: 0 2px 2px 0 rgba(0, 0,0, 0.16),
-              0 0px 2px 0 rgba(explorer-color("black"), 0.12);
+              0 0px 2px 0 rgba(0, 0, 0, 0.12);
 }

apps/explorer_web/assets/css/explorer/_typography.scss

@@ -1,28 +0,0 @@
-$explorer-typography-styles: (
-  headline: (
-    "font-weight": 400,
-    "font-size": 24px,
-    "line-height": 32px
-  ),
-  title: (
-    "font-weight": 400,
-    "font-size": 18px,
-    "line-height": 28px
-  ),
-  body1: (
-    "font-weight": 400,
-    "font-size": 13px,
-    "line-height": 36px
-  ),
-  caption: (
-    "font-weight": 400,
-    "font-size": 13px,
-    "line-height": 24px
-  )
-);
-
-@mixin explorer-typography($style) {
-  font-weight: map-get(map-get($explorer-typography-styles, $style), "font-weight");
-  font-size: map-get(map-get($explorer-typography-styles, $style), "font-size");
-  line-height: map-get(map-get($explorer-typography-styles, $style), "line-height");
-}

apps/explorer_web/lib/explorer_web/templates/address/overview.html.eex

@@ -1,23 +1,25 @@
-<div class="address__header">
+<div>
-  <h1 class="address__heading"><%= gettext "Address" %></h1>
+  <h1><%= gettext "Address" %></h1>
-  <h3 class="address__subheading" data-test="address_detail_hash"><%= @address %></h3>
+  <h2 data-test="address_detail_hash"><%= @address %></h2>
 </div>
-<div class="address__container">
+<div class="panels container__subsection">
-  <div class="address__attributes">
+  <div class="panels__container">
-    <dl>
+    <table class="table table-responsive-sm table-font">
-      <div class="address__item">
+      <table class="table table-responsive-sm table-font">
-        <dt class="address__item-key"><%= gettext "Balance" %></dt>
+        <tbody>
-        <dd class="address__item-value address__balance u-text-right" title="<%= @address %>" data-test="address_balance">
+          <tr>
-          <div><%= balance(@address) %> </div>
+            <th scope="row"><%= gettext "Balance" %></th>
-          <div><%= formatted_usd(@address, @exchange_rate) %> </div>
+            <td class="u-text-right" data-test="address_balance">
-        </dd>
+              <div><%= balance(@address) %></div>
-      </div>
+              <div><%= formatted_usd(@address, @exchange_rate) %></div>
-      <div class="address__item">
+            </td>
-        <dt class="address__item-key"><%= gettext "Number of Transactions" %></dt>
+          </tr>
-        <dd class="address__item-value" data-test="transaction_count">
+          <tr>
-          <%= Cldr.Number.to_string!(@transaction_count) %>
+            <th scope="row"> <%= gettext "Number of Transactions" %></th>
-        </dd>
+            <td class="u-text-right" data-test="transaction_count"><%= Cldr.Number.to_string!(@transaction_count) %></td>
-      </div>
+          </tr>
-    </dl>
+        </tbody>
+      </table>
+    </table>
   </div>
 </div>

apps/explorer_web/lib/explorer_web/templates/block/index.html.eex

@@ -1,8 +1,6 @@
 <section class="container__section">
   <div>
-    <h1>
+    <h1>Blocks</h1>
-      Blocks
-    </h1>
     <p>
       <%= gettext(
             "Showing #%{start_block} to #%{end_block}",

apps/explorer_web/priv/gettext/default.pot

@@ -1,6 +1,6 @@
 #: lib/explorer_web/templates/address_internal_transaction/index.html.eex:67
 #: lib/explorer_web/templates/address_transaction/index.html.eex:70
-#: lib/explorer_web/templates/block/index.html.eex:20
+#: lib/explorer_web/templates/block/index.html.eex:18
 #: lib/explorer_web/templates/block_transaction/index.html.eex:135
 #: lib/explorer_web/templates/chain/_blocks.html.eex:9
 #: lib/explorer_web/templates/chain/_transactions.html.eex:12
@@ -27,7 +27,7 @@ msgstr ""
 msgid "Copyright %{year} POA"
 msgstr ""
 
-#: lib/explorer_web/templates/block/index.html.eex:22
+#: lib/explorer_web/templates/block/index.html.eex:20
 #: lib/explorer_web/templates/block_transaction/index.html.eex:87
 msgid "Gas Used"
 msgstr ""
@@ -40,7 +40,7 @@ msgstr ""
 msgid "Hash"
 msgstr ""
 
-#: lib/explorer_web/templates/block/index.html.eex:19
+#: lib/explorer_web/templates/block/index.html.eex:17
 #: lib/explorer_web/templates/chain/_blocks.html.eex:8
 msgid "Height"
 msgstr ""
@@ -51,7 +51,7 @@ msgstr ""
 
 #: lib/explorer_web/templates/address_internal_transaction/index.html.eex:7
 #: lib/explorer_web/templates/address_transaction/index.html.eex:7
-#: lib/explorer_web/templates/block/index.html.eex:21
+#: lib/explorer_web/templates/block/index.html.eex:19
 #: lib/explorer_web/templates/block_transaction/index.html.eex:118
 #: lib/explorer_web/templates/chain/_transactions.html.eex:4
 #: lib/explorer_web/templates/layout/_sidebar.html.eex:36
@@ -78,7 +78,7 @@ msgstr ""
 msgid "Difficulty"
 msgstr ""
 
-#: lib/explorer_web/templates/block/index.html.eex:23
+#: lib/explorer_web/templates/block/index.html.eex:21
 #: lib/explorer_web/templates/block_transaction/index.html.eex:95
 #: lib/explorer_web/templates/transaction/overview.html.eex:116
 #: lib/explorer_web/templates/transaction_internal_transaction/index.html.eex:31
@@ -126,15 +126,15 @@ msgstr ""
 msgid "Cumulative Gas Used"
 msgstr ""
 
-#: lib/explorer_web/templates/block/index.html.eex:22
+#: lib/explorer_web/templates/block/index.html.eex:20
-#: lib/explorer_web/templates/block/index.html.eex:23
+#: lib/explorer_web/templates/block/index.html.eex:21
 #: lib/explorer_web/templates/chain/_blocks.html.eex:11
 #: lib/explorer_web/templates/transaction/overview.html.eex:119
 #: lib/explorer_web/templates/transaction_internal_transaction/index.html.eex:31
 msgid "Gas"
 msgstr ""
 
-#: lib/explorer_web/templates/block/index.html.eex:24
+#: lib/explorer_web/templates/block/index.html.eex:22
 #: lib/explorer_web/templates/transaction/overview.html.eex:124
 msgid "Gas Price"
 msgstr ""
@@ -204,7 +204,7 @@ msgstr ""
 msgid "Transaction Status"
 msgstr ""
 
-#: lib/explorer_web/templates/address/overview.html.eex:9
+#: lib/explorer_web/templates/address/overview.html.eex:11
 msgid "Balance"
 msgstr ""
 
@@ -218,11 +218,11 @@ msgstr ""
 msgid "POA"
 msgstr ""
 
-#: lib/explorer_web/templates/block/index.html.eex:41
+#: lib/explorer_web/templates/block/index.html.eex:39
 msgid "%{count} transactions"
 msgstr ""
 
-#: lib/explorer_web/templates/block/index.html.eex:7
+#: lib/explorer_web/templates/block/index.html.eex:5
 msgid "Showing #%{start_block} to #%{end_block}"
 msgstr ""
 
@@ -429,7 +429,7 @@ msgstr ""
 msgid "USD"
 msgstr ""
 
-#: lib/explorer_web/templates/address/overview.html.eex:16
+#: lib/explorer_web/templates/address/overview.html.eex:18
 msgid "Number of Transactions"
 msgstr ""
 

apps/explorer_web/priv/gettext/en/LC_MESSAGES/default.po

@@ -12,7 +12,7 @@ msgstr ""
 
 #: lib/explorer_web/templates/address_internal_transaction/index.html.eex:67
 #: lib/explorer_web/templates/address_transaction/index.html.eex:70
-#: lib/explorer_web/templates/block/index.html.eex:20
+#: lib/explorer_web/templates/block/index.html.eex:18
 #: lib/explorer_web/templates/block_transaction/index.html.eex:135
 #: lib/explorer_web/templates/chain/_blocks.html.eex:9
 #: lib/explorer_web/templates/chain/_transactions.html.eex:12
@@ -39,7 +39,7 @@ msgstr "Blocks"
 msgid "Copyright %{year} POA"
 msgstr "%{year} POA Network Ltd. All rights reserved"
 
-#: lib/explorer_web/templates/block/index.html.eex:22
+#: lib/explorer_web/templates/block/index.html.eex:20
 #: lib/explorer_web/templates/block_transaction/index.html.eex:87
 msgid "Gas Used"
 msgstr "Gas Used"
@@ -52,7 +52,7 @@ msgstr "Gas Used"
 msgid "Hash"
 msgstr "Hash"
 
-#: lib/explorer_web/templates/block/index.html.eex:19
+#: lib/explorer_web/templates/block/index.html.eex:17
 #: lib/explorer_web/templates/chain/_blocks.html.eex:8
 msgid "Height"
 msgstr "Height"
@@ -63,7 +63,7 @@ msgstr "POA Network Explorer"
 
 #: lib/explorer_web/templates/address_internal_transaction/index.html.eex:7
 #: lib/explorer_web/templates/address_transaction/index.html.eex:7
-#: lib/explorer_web/templates/block/index.html.eex:21
+#: lib/explorer_web/templates/block/index.html.eex:19
 #: lib/explorer_web/templates/block_transaction/index.html.eex:118
 #: lib/explorer_web/templates/chain/_transactions.html.eex:4
 #: lib/explorer_web/templates/layout/_sidebar.html.eex:36
@@ -90,7 +90,7 @@ msgstr "Block #%{number} Details"
 msgid "Difficulty"
 msgstr "Difficulty"
 
-#: lib/explorer_web/templates/block/index.html.eex:23
+#: lib/explorer_web/templates/block/index.html.eex:21
 #: lib/explorer_web/templates/block_transaction/index.html.eex:95
 #: lib/explorer_web/templates/transaction/overview.html.eex:116
 #: lib/explorer_web/templates/transaction_internal_transaction/index.html.eex:31
@@ -138,15 +138,15 @@ msgstr "Transaction Details"
 msgid "Cumulative Gas Used"
 msgstr "Cumulative Gas Used"
 
-#: lib/explorer_web/templates/block/index.html.eex:22
+#: lib/explorer_web/templates/block/index.html.eex:20
-#: lib/explorer_web/templates/block/index.html.eex:23
+#: lib/explorer_web/templates/block/index.html.eex:21
 #: lib/explorer_web/templates/chain/_blocks.html.eex:11
 #: lib/explorer_web/templates/transaction/overview.html.eex:119
 #: lib/explorer_web/templates/transaction_internal_transaction/index.html.eex:31
 msgid "Gas"
 msgstr "Gas"
 
-#: lib/explorer_web/templates/block/index.html.eex:24
+#: lib/explorer_web/templates/block/index.html.eex:22
 #: lib/explorer_web/templates/transaction/overview.html.eex:124
 msgid "Gas Price"
 msgstr "Gas Price"
@@ -216,7 +216,7 @@ msgstr "Transaction Hash"
 msgid "Transaction Status"
 msgstr "Transaction Status"
 
-#: lib/explorer_web/templates/address/overview.html.eex:9
+#: lib/explorer_web/templates/address/overview.html.eex:11
 msgid "Balance"
 msgstr "Balance"
 
@@ -230,11 +230,11 @@ msgstr "Balance"
 msgid "POA"
 msgstr "POA"
 
-#: lib/explorer_web/templates/block/index.html.eex:41
+#: lib/explorer_web/templates/block/index.html.eex:39
 msgid "%{count} transactions"
 msgstr "%{count} transactions"
 
-#: lib/explorer_web/templates/block/index.html.eex:7
+#: lib/explorer_web/templates/block/index.html.eex:5
 msgid "Showing #%{start_block} to #%{end_block}"
 msgstr "Showing #%{start_block} to #%{end_block}"
 
@@ -441,7 +441,7 @@ msgstr ""
 msgid "USD"
 msgstr ""
 
-#: lib/explorer_web/templates/address/overview.html.eex:16
+#: lib/explorer_web/templates/address/overview.html.eex:18
 msgid "Number of Transactions"
 msgstr ""