Doc Ritezel
7 years ago
parent
36a3fb2a2f
commit
630d811159
@ -1,3 +1,5 @@ |
||||
@import "blocks"; |
||||
@import "container"; |
||||
@import "header"; |
||||
@import "transactions"; |
||||
@import "footer"; |
||||
|
||||
@ -1,9 +1,21 @@ |
||||
.blocks { |
||||
@extend %paper; |
||||
|
||||
&__container { |
||||
padding: explorer-size(-1) explorer-size(0); |
||||
& + & { padding-top: 0; } |
||||
&--title { padding-top: explorer-size(0); } |
||||
} |
||||
|
||||
&__title { |
||||
@extend h2; |
||||
@include explorer-typography("title"); |
||||
color: explorer-color("slate", "100"); |
||||
margin: 0; |
||||
} |
||||
|
||||
&__table { |
||||
@extend .table; |
||||
@extend %table; |
||||
@include explorer-typography("body1"); |
||||
color: explorer-color("slate", "100"); |
||||
} |
||||
} |
||||
|
||||
@ -0,0 +1,21 @@ |
||||
%explorer-container-height { min-height: calc(100vh - #{$explorer-header-small} - #{explorer-size(-1) * 2}); } |
||||
|
||||
@media (orientation: landscape) and (max-height: $explorer-breakpoint-landscape) { |
||||
%explorer-container-height { min-height: calc(100vh - #{$explorer-header-medium} - #{explorer-size(-1) * 2}); } |
||||
} |
||||
|
||||
@media (min-width: $explorer-breakpoint-landscape) { |
||||
%explorer-container-height { min-height: calc(100vh - #{$explorer-header-large} - #{explorer-size(-1) * 2}); } |
||||
} |
||||
|
||||
.container { |
||||
@extend %explorer-container-height; |
||||
background: explorer-color("slate", "500"); |
||||
padding-top: explorer-size(-1); |
||||
padding-bottom: explorer-size(-1); |
||||
|
||||
&__section { |
||||
display: block; |
||||
padding: 0 explorer-size(-2); |
||||
} |
||||
} |
||||
@ -0,0 +1,8 @@ |
||||
.footer { |
||||
@include explorer-typography("body1"); |
||||
display: block; |
||||
background: explorer-color("slate", "100"); |
||||
color: explorer-color("white"); |
||||
text-align: center; |
||||
padding: explorer-size(-1) 0; |
||||
} |
||||
@ -1,10 +1,24 @@ |
||||
.header { |
||||
&__logo { |
||||
@extend .img-responsive; |
||||
width: 5em; |
||||
@extend %explorer-header-min-height; |
||||
background: explorer-color("gray", 900); |
||||
|
||||
&__container { |
||||
width: 100%; |
||||
} |
||||
|
||||
&__title { |
||||
@extend h1; |
||||
&__row { vertical-align: middle; } |
||||
&__cell { |
||||
@extend %explorer-header-height; |
||||
&--logo { @extend %explorer-header-square-width; } |
||||
} |
||||
&__logo-link { |
||||
@extend %explorer-header-height; |
||||
@extend %explorer-header-square-width; |
||||
display: block; |
||||
} |
||||
&__logo { |
||||
@extend %explorer-header-height; |
||||
@extend %explorer-header-square-width; |
||||
display: block; |
||||
} |
||||
} |
||||
|
||||
@ -1,9 +1,21 @@ |
||||
.transactions { |
||||
@extend %paper; |
||||
|
||||
&__container { |
||||
padding: explorer-size(-1) explorer-size(0); |
||||
& + & { padding-top: 0; } |
||||
&--title { padding-top: explorer-size(0); } |
||||
} |
||||
|
||||
&__title { |
||||
@extend h2; |
||||
@include explorer-typography("title"); |
||||
color: explorer-color("slate", "100"); |
||||
margin: 0; |
||||
} |
||||
|
||||
&__table { |
||||
@extend .table; |
||||
@extend %table; |
||||
@include explorer-typography("body1"); |
||||
color: explorer-color("slate", "100"); |
||||
} |
||||
} |
||||
|
||||
@ -0,0 +1,8 @@ |
||||
@import "breakpoints"; |
||||
@import "color"; |
||||
@import "header"; |
||||
@import "size"; |
||||
@import "open_sans"; |
||||
@import "paper"; |
||||
@import "table"; |
||||
@import "typography"; |
||||
@ -0,0 +1,5 @@ |
||||
$explorer-breakpoint-landscape: 480px; |
||||
$explorer-breakpoint-sm: 544px; |
||||
$explorer-breakpoint-md: 768px; |
||||
$explorer-breakpoint-lg: 992px; |
||||
$explorer-breakpoint-xl: 1200px; |
||||
@ -0,0 +1,29 @@ |
||||
$explorer-colors: ( |
||||
"blue": ( |
||||
"500": #4786ff |
||||
), |
||||
"slate": ( |
||||
"100": #1b2437, |
||||
"500": #f5f7fa, |
||||
"900": #e4e6e9 |
||||
), |
||||
"gray": ( |
||||
"900": #fafcff |
||||
), |
||||
"green": ( |
||||
"500": #1bb85a |
||||
), |
||||
"purple": ( |
||||
"500": #8940d5 |
||||
), |
||||
"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); |
||||
} |
||||
} |
||||
@ -0,0 +1,19 @@ |
||||
$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; } |
||||
} |
||||
File diff suppressed because one or more lines are too long
@ -0,0 +1,7 @@ |
||||
%paper { |
||||
margin-bottom: 1rem; |
||||
border-radius: explorer-size(-4); |
||||
background-color: explorer-color("white"); |
||||
box-shadow: 0 2px 2px 0 rgba(explorer-color("black"), 0.16), |
||||
0 0px 2px 0 rgba(explorer-color("black"), 0.12); |
||||
} |
||||
@ -0,0 +1,17 @@ |
||||
$golden-ratio: 1.61803398875; |
||||
|
||||
@function explorer-size($exponent) { |
||||
$value: $golden-ratio; |
||||
|
||||
@if $exponent > 0 { |
||||
@for $i from 1 through $exponent { |
||||
$value: $value * $golden-ratio; |
||||
} |
||||
} @elseif $exponent < 0 { |
||||
@for $i from 1 through -$exponent { |
||||
$value: $value / $golden-ratio; |
||||
} |
||||
} |
||||
|
||||
@return 1rem * $value; |
||||
} |
||||
@ -0,0 +1,23 @@ |
||||
%table { |
||||
width: 100%; |
||||
max-width: 100%; |
||||
margin-bottom: 1rem; |
||||
|
||||
> thead, |
||||
> tbody, |
||||
> tfoot { |
||||
> tr { |
||||
> th { text-align: left; } |
||||
|
||||
> th, |
||||
> td { |
||||
padding: explorer-size(-2) 0; |
||||
line-height: 1rem; |
||||
} |
||||
} |
||||
} |
||||
|
||||
> thead > tr > th { |
||||
border-bottom: 2px solid explorer-color("slate", "900"); |
||||
} |
||||
} |
||||
@ -0,0 +1,23 @@ |
||||
$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 |
||||
) |
||||
); |
||||
|
||||
@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"); |
||||
} |
||||
@ -0,0 +1,3 @@ |
||||
<footer class="footer"> |
||||
<%= gettext "Copyright %{year} POA", year: 2018 %> |
||||
</footer> |
||||
@ -0,0 +1,8 @@ |
||||
<header class="header"> |
||||
<table class="header__container" cellspacing="0" cellpadding="0" border="0"> |
||||
<tr class="header__row"> |
||||
<td class="header__cell header__cell--logo"><%= logo_image(@conn, alt: gettext "POA Network Explorer") %></td> |
||||
<td class="header__cell" align="right"></td> |
||||
</tr> |
||||
</table> |
||||
</header> |
||||
@ -1,49 +1,57 @@ |
||||
<div><%= gettext "explorer-welcome" %></div> |
||||
<section class="container__section"> |
||||
<div class="blocks"> |
||||
<div class="blocks__container blocks__container--title"> |
||||
<h2 class="blocks__title"><%= gettext "Blocks" %></h2> |
||||
</div> |
||||
<div class="blocks__container"> |
||||
<table class="blocks__table"> |
||||
<thead class="blocks__header"> |
||||
<tr> |
||||
<th class="blocks__column-header"><%= gettext "Height" %></th> |
||||
<th class="blocks__column-header"><%= gettext "Age" %></th> |
||||
<th class="blocks__column-header"><%= gettext "Transactions" %></th> |
||||
<th class="blocks__column-header"><%= gettext "Gas Used" %></th> |
||||
</tr> |
||||
</thead> |
||||
<tbody> |
||||
<%= for block <- @blocks do %> |
||||
<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--gas-used"><%= block.gas_used %></td> |
||||
</tr> |
||||
<% end %> |
||||
</tbody> |
||||
</table> |
||||
</div> |
||||
</div> |
||||
|
||||
<div class="blocks"> |
||||
<div class="blocks__title"><%= gettext "blocks-title" %></div> |
||||
<table class="blocks__table"> |
||||
<thead class="blocks__header"> |
||||
<tr> |
||||
<th><%= gettext "Height" %></th> |
||||
<th><%= gettext "Age" %></th> |
||||
<th><%= gettext "Transactions" %></th> |
||||
<th><%= gettext "Gas Used" %></th> |
||||
</tr> |
||||
</thead> |
||||
<tbody> |
||||
<%= for block <- @blocks do %> |
||||
<tr class="blocks__row"> |
||||
<td class="blocks__column--height"><%= block.number %></td> |
||||
<td class="blocks__column--age"><%= block.age %></td> |
||||
<td class="blocks__column--transactions_count"><%= block.transactions_count %></td> |
||||
<td class="blocks__column--gas-used"><%= block.gas_used %></td> |
||||
</tr> |
||||
<% end %> |
||||
</tbody> |
||||
</table> |
||||
</div> |
||||
|
||||
<div class="transactions"> |
||||
<div class="transactions__title"><%= gettext "Transactions" %></div> |
||||
<table class="transactions__table"> |
||||
<thead class="transactions__header"> |
||||
<tr> |
||||
<th><%= gettext "Hash" %></th> |
||||
<th><%= gettext "Block" %></th> |
||||
<th><%= gettext "Age" %></th> |
||||
<th><%= gettext "Value" %></th> |
||||
</tr> |
||||
</thead> |
||||
<tbody> |
||||
<%= for transaction <- @transactions do %> |
||||
<tr class="transactions__row"> |
||||
<td class="transactions__column--hash"><%= transaction.hash %></td> |
||||
<td class="transactions__column--block"><%= transaction.block.number %></td> |
||||
<td class="transactions__column--age"><%= transaction.block.timestamp |> Timex.from_now %></td> |
||||
<td class="transactions__column--value"><%= transaction.value %></td> |
||||
</tr> |
||||
<% end %> |
||||
</tbody> |
||||
</table> |
||||
</div> |
||||
<div class="transactions"> |
||||
<div class="transactions__container transactions__container--title"> |
||||
<h2 class="transactions__title"><%= gettext "Transactions" %></h2> |
||||
</div> |
||||
<div class="transactions__container"> |
||||
<table class="transactions__table"> |
||||
<thead class="transactions__header"> |
||||
<tr> |
||||
<th class="transactions__column-header"><%= gettext "Hash" %></th> |
||||
<th class="transactions__column-header"><%= gettext "Block" %></th> |
||||
<th class="transactions__column-header"><%= gettext "Age" %></th> |
||||
<th class="transactions__column-header"><%= gettext "Value" %></th> |
||||
</tr> |
||||
</thead> |
||||
<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--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> |
||||
</tr> |
||||
<% end %> |
||||
</tbody> |
||||
</table> |
||||
</div> |
||||
</div> |
||||
</section> |
||||
|
||||
@ -1,3 +1,11 @@ |
||||
defmodule ExplorerWeb.LayoutView do |
||||
use ExplorerWeb, :view |
||||
alias ExplorerWeb.Endpoint |
||||
|
||||
def logo_image(conn, alt: alt) do |
||||
conn |
||||
|> static_path("/images/logo.png") |
||||
|> img_tag(class: "header__logo", alt: alt) |
||||
|> link(to: Endpoint.url(), class: "header__logo-link") |
||||
end |
||||
end |
||||
|
||||
@ -1,58 +1,52 @@ |
||||
## This file is a PO Template file. |
||||
## |
||||
## `msgid`s here are often extracted from source code. |
||||
## Add new translations manually only if they're dynamic |
||||
## translations that can't be statically extracted. |
||||
## |
||||
## Run `mix gettext.extract` to bring this file up to |
||||
## date. Leave `msgstr`s empty as changing them here as no |
||||
## effect: edit them in PO (`.po`) files instead. |
||||
msgid "" |
||||
#, elixir-format |
||||
#: lib/explorer_web/templates/page/index.html.eex:11 |
||||
#: lib/explorer_web/templates/page/index.html.eex:40 |
||||
msgid "Age" |
||||
msgstr "" |
||||
|
||||
#: lib/explorer_web/templates/layout/app.html.eex:7 |
||||
#: lib/explorer_web/templates/layout/app.html.eex:18 |
||||
msgid "explorer-title" |
||||
#, elixir-format |
||||
#: lib/explorer_web/templates/page/index.html.eex:39 |
||||
msgid "Block" |
||||
msgstr "" |
||||
|
||||
#: lib/explorer_web/templates/page/index.html.eex:1 |
||||
msgid "explorer-welcome" |
||||
#, elixir-format |
||||
#: lib/explorer_web/templates/page/index.html.eex:4 |
||||
msgid "Blocks" |
||||
msgstr "" |
||||
|
||||
#: lib/explorer_web/templates/page/index.html.eex:4 |
||||
msgid "blocks-title" |
||||
#, elixir-format |
||||
#: lib/explorer_web/templates/layout/_footer.html.eex:2 |
||||
msgid "Copyright %{year} POA" |
||||
msgstr "" |
||||
|
||||
#: lib/explorer_web/templates/page/index.html.eex:11 |
||||
#, elixir-format |
||||
#: lib/explorer_web/templates/page/index.html.eex:13 |
||||
msgid "Gas Used" |
||||
msgstr "" |
||||
|
||||
#: lib/explorer_web/templates/page/index.html.eex:8 |
||||
msgid "Height" |
||||
#, elixir-format |
||||
#: lib/explorer_web/templates/page/index.html.eex:38 |
||||
msgid "Hash" |
||||
msgstr "" |
||||
|
||||
#, elixir-format |
||||
#: lib/explorer_web/templates/page/index.html.eex:10 |
||||
msgid "Validated" |
||||
msgid "Height" |
||||
msgstr "" |
||||
|
||||
#: lib/explorer_web/templates/page/index.html.eex:9 |
||||
#: lib/explorer_web/templates/page/index.html.eex:34 |
||||
msgid "Age" |
||||
#, elixir-format |
||||
#: lib/explorer_web/templates/layout/_header.html.eex:4 |
||||
#: lib/explorer_web/templates/layout/app.html.eex:7 |
||||
msgid "POA Network Explorer" |
||||
msgstr "" |
||||
|
||||
#, elixir-format |
||||
#: lib/explorer_web/templates/page/index.html.eex:12 |
||||
#: lib/explorer_web/templates/page/index.html.eex:32 |
||||
msgid "Hash" |
||||
msgstr "" |
||||
|
||||
#: lib/explorer_web/templates/page/index.html.eex:10 |
||||
#: lib/explorer_web/templates/page/index.html.eex:28 |
||||
msgid "Transactions" |
||||
msgstr "" |
||||
|
||||
#: lib/explorer_web/templates/page/index.html.eex:33 |
||||
msgid "Block" |
||||
msgstr "" |
||||
|
||||
#: lib/explorer_web/templates/page/index.html.eex:35 |
||||
#, elixir-format |
||||
#: lib/explorer_web/templates/page/index.html.eex:41 |
||||
msgid "Value" |
||||
msgstr "" |
||||
|
||||
Loading…
Reference in new issue