Gabriel Rodriguez Alsina
6 years ago
parent
0939f45877
commit
66c73e7b39
@ -0,0 +1,26 @@ |
||||
$check-tooltip-background: #f5f6fa !default; |
||||
$check-tooltip-background-active: $primary !default; |
||||
$check-tooltip-check: #a3a9b5 !default; |
||||
$check-tooltip-check-active: #fff !default; |
||||
|
||||
.check-tooltip { |
||||
display: block; |
||||
height: 16px; |
||||
width: 16px; |
||||
|
||||
.check-tooltip-circle { |
||||
fill: $check-tooltip-background; |
||||
} |
||||
.check-tooltip-check { |
||||
fill: $check-tooltip-check; |
||||
} |
||||
|
||||
&:hover { |
||||
.check-tooltip-circle { |
||||
fill: $check-tooltip-background-active; |
||||
} |
||||
.check-tooltip-check { |
||||
fill: $check-tooltip-check-active; |
||||
} |
||||
} |
||||
} |
||||
@ -0,0 +1,18 @@ |
||||
$i-tooltip-background: #a3a9b5 !default; |
||||
$i-tooltip-background-active: $primary !default; |
||||
|
||||
.i-tooltip { |
||||
display: block; |
||||
height: 16px; |
||||
width: 16px; |
||||
|
||||
path { |
||||
fill: $i-tooltip-background; |
||||
} |
||||
|
||||
&:hover { |
||||
path { |
||||
fill: $i-tooltip-background-active; |
||||
} |
||||
} |
||||
} |
||||
@ -0,0 +1,41 @@ |
||||
$progress-from-to-background: #f5f6fa !default; |
||||
$progress-from-to-progress-background: $primary !default; |
||||
|
||||
.progress-from-to { |
||||
min-width: 120px; |
||||
max-width: 100%; |
||||
|
||||
.stakes-table & { |
||||
width: 120px; |
||||
} |
||||
} |
||||
|
||||
.progress-from-to-values { |
||||
display: flex; |
||||
justify-content: space-between; |
||||
margin-bottom: 10px; |
||||
} |
||||
|
||||
.progress-from-to-value { |
||||
color: #333; |
||||
font-size: 12px; |
||||
font-weight: normal; |
||||
line-height: 1.2; |
||||
} |
||||
|
||||
.progress-from-to-background { |
||||
background-color: $progress-from-to-background; |
||||
border-radius: 2px; |
||||
height: 4px; |
||||
overflow: hidden; |
||||
position: relative; |
||||
} |
||||
|
||||
.progress-from-to-progress { |
||||
background-color: $progress-from-to-progress-background; |
||||
height: 100%; |
||||
left: 0; |
||||
max-width: 100%; |
||||
position: absolute; |
||||
top: 0; |
||||
} |
||||
@ -0,0 +1,58 @@ |
||||
$stakes-table-th-background: #f5f6fa !default; |
||||
|
||||
.stakes-table-container { |
||||
max-width: 100%; |
||||
overflow-x: auto; |
||||
width: 100%; |
||||
} |
||||
|
||||
.stakes-table { |
||||
min-width: fit-content; |
||||
width: 100%; |
||||
} |
||||
|
||||
.stakes-table-th { |
||||
background-color: $stakes-table-th-background; |
||||
color: #a3a9b5; |
||||
font-size: 14px; |
||||
font-weight: bold; |
||||
line-height: 1.2; |
||||
text-align: left; |
||||
} |
||||
|
||||
.stakes-table-th-content { |
||||
align-items: center; |
||||
display: flex; |
||||
justify-content: flex-start; |
||||
padding: 21px 15px 21px 0; |
||||
position: relative; |
||||
z-index: 0; |
||||
} |
||||
|
||||
.stakes-th-text { |
||||
margin-right: 10px; |
||||
} |
||||
|
||||
.stakes-th-text { |
||||
margin-right: 10px; |
||||
} |
||||
|
||||
.stakes-td { |
||||
border-bottom: 1px solid #f5f6fa; |
||||
font-size: 14px; |
||||
font-weight: normal; |
||||
height: 57px; |
||||
line-height: 1.2; |
||||
text-align: left; |
||||
vertical-align: center; |
||||
white-space: nowrap; |
||||
} |
||||
|
||||
.stakes-td-order { |
||||
min-width: 50px; |
||||
text-align: center; |
||||
} |
||||
|
||||
.stakes-td-link-style { |
||||
color: $primary; |
||||
} |
||||
@ -0,0 +1,8 @@ |
||||
.tooltip { |
||||
max-width: 250px; |
||||
|
||||
.tooltip-inner { |
||||
border-radius: 5px; |
||||
padding: 15px; |
||||
} |
||||
} |
||||
@ -0,0 +1,14 @@ |
||||
defmodule BlockScoutWeb.CommonComponentsController do |
||||
use BlockScoutWeb, :controller |
||||
|
||||
alias BlockScoutWeb.CommonComponentsView |
||||
|
||||
def index(conn, params) do |
||||
[] |
||||
|> handle_render(conn, params) |
||||
end |
||||
|
||||
defp handle_render(full_options, conn, _params) do |
||||
render(conn, "index.html") |
||||
end |
||||
end |
||||
@ -0,0 +1,14 @@ |
||||
<div |
||||
class="check-tooltip" |
||||
data-boundary="window" |
||||
data-container="body" |
||||
data-html="true" |
||||
data-placement="top" |
||||
data-toggle="tooltip" |
||||
title="<%= @text %>" |
||||
> |
||||
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16"> |
||||
<path class="check-tooltip-circle" fill-rule="evenodd" d="M8 0a8 8 0 1 1 0 16A8 8 0 0 1 8 0z"/> |
||||
<path class="check-tooltip-check" fill-rule="evenodd" d="M11.714 6.657l-2 2-1.887 1.888c-.037.057-.063.119-.113.169a.963.963 0 0 1-.714.279.963.963 0 0 1-.714-.279c-.05-.05-.076-.112-.113-.17L4.286 8.657a.969.969 0 1 1 1.371-1.371L7 8.629l1.286-1.286 2.057-2.057a.969.969 0 1 1 1.371 1.371z"/> |
||||
</svg> |
||||
</div> |
||||
@ -0,0 +1,13 @@ |
||||
<div |
||||
class="i-tooltip" |
||||
data-boundary="window" |
||||
data-container="body" |
||||
data-html="true" |
||||
data-placement="top" |
||||
data-toggle="tooltip" |
||||
title="<%= @text %>" |
||||
> |
||||
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16"> |
||||
<path fill-rule="evenodd" d="M8 16A8 8 0 1 1 8 0a8 8 0 0 1 0 16zM8 3a1 1 0 1 0 0 2 1 1 0 0 0 0-2zm1 5a1 1 0 0 0-2 0v4a1 1 0 0 0 2 0V8z"/> |
||||
</svg> |
||||
</div> |
||||
@ -0,0 +1,9 @@ |
||||
<div class="progress-from-to"> |
||||
<div class="progress-from-to-values"> |
||||
<div class="progress-from-to-value"><%= @from %></div> |
||||
<div class="progress-from-to-value"><%= @to %></div> |
||||
</div> |
||||
<div class="progress-from-to-background"> |
||||
<div class="progress-from-to-progress" style="width: <%= @progress %>%"></div> |
||||
</div> |
||||
</div> |
||||
@ -0,0 +1,4 @@ |
||||
<div class="stakes-address-container"> |
||||
<span class="stakes-address"><%= @address %></span> |
||||
<%= render BlockScoutWeb.CommonComponentsView, "_check_tooltip.html", text: @tooltip %> |
||||
</div> |
||||
@ -0,0 +1,73 @@ |
||||
<div class="stakes-table-container"> |
||||
<table class="stakes-table"> |
||||
<thead> |
||||
<tr> |
||||
<th class="stakes-table-th"> </th> |
||||
<%= render BlockScoutWeb.StakesView, "_stakes_th.html", title: "Validator", tooltip: "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut." %> |
||||
<%= render BlockScoutWeb.StakesView, "_stakes_th.html", title: "Staked Amount", tooltip: "Lorem ipsum dolor sit iusmod tempor incididunt ut." %> |
||||
<%= render BlockScoutWeb.StakesView, "_stakes_th.html", title: "Stakes Ratio", tooltip: "Sed do eiusmod tempor incididunt ut." %> |
||||
<%= render BlockScoutWeb.StakesView, "_stakes_th.html", title: "Delegators", tooltip: "Lorem ipsum dolor sit amet." %> |
||||
<th class="stakes-table-th"> </th> |
||||
</tr> |
||||
</thead> |
||||
<tbody> |
||||
<%= if @empty_content do %> |
||||
<tr> |
||||
<td colspan="6"> |
||||
empty |
||||
</td> |
||||
</tr> |
||||
<%= end %> |
||||
<%= if not @empty_content do %> |
||||
<tr> |
||||
<td class="stakes-td"><div class="stakes-td-order">1</div></td> |
||||
<td class="stakes-td"> |
||||
<%= |
||||
render BlockScoutWeb.StakesView, |
||||
"_stakes_address.html", |
||||
address: "0x59D8-d6Fc43", |
||||
tooltip: "This is a validator" |
||||
%> |
||||
</td> |
||||
<td class="stakes-td"> |
||||
<%= |
||||
render BlockScoutWeb.CommonComponentsView, |
||||
"_progress_from_to.html", |
||||
from: 10, |
||||
to: 100, |
||||
progress: 83 |
||||
%> |
||||
</td> |
||||
<td class="stakes-td">2.56%</td> |
||||
<td class="stakes-td"><span class="stakes-td-link-style">1455</span></td> |
||||
<td class="stakes-td">text</td> |
||||
</tr> |
||||
<%= for i <- 2..5 do %> |
||||
<tr> |
||||
<td class="stakes-td"><div class="stakes-td-order"><%= i %></div></td> |
||||
<td class="stakes-td"> |
||||
<%= |
||||
render BlockScoutWeb.StakesView, |
||||
"_stakes_address.html", |
||||
address: "0x59D8-d6Fc43", |
||||
tooltip: "This is a validator" |
||||
%> |
||||
</td> |
||||
<td class="stakes-td"> |
||||
<%= |
||||
render BlockScoutWeb.CommonComponentsView, |
||||
"_progress_from_to.html", |
||||
from: 500, |
||||
to: 15000, |
||||
progress: 40 |
||||
%> |
||||
</td> |
||||
<td class="stakes-td">2.56%</td> |
||||
<td class="stakes-td"><span class="stakes-td-link-style">1455</span></td> |
||||
<td class="stakes-td">text</td> |
||||
</tr> |
||||
<%= end %> |
||||
<%= end %> |
||||
</tbody> |
||||
</table> |
||||
</div> |
||||
@ -0,0 +1,6 @@ |
||||
<th class="stakes-table-th"> |
||||
<div class="stakes-table-th-content"> |
||||
<span class="stakes-th-text"><%= @title %></span> |
||||
<%= render BlockScoutWeb.CommonComponentsView, "_i_tooltip.html", text: @tooltip %> |
||||
</div> |
||||
</th> |
||||
@ -1,8 +1,17 @@ |
||||
<div class="card-title-container"> |
||||
<div class="card-title"><%= @title %></div> |
||||
<div class="check"> |
||||
<input type="checkbox" /> |
||||
<div class="check-icon"></div> |
||||
<div class="check-text">Show only those I staked into</div> |
||||
<div class="card-title-controls"> |
||||
<%= if @show_banned_checkbox do %> |
||||
<div class="check card-title-control"> |
||||
<input type="checkbox" /> |
||||
<div class="check-icon"></div> |
||||
<div class="check-text">Show banned only</div> |
||||
</div> |
||||
<%= end %> |
||||
<div class="check card-title-control"> |
||||
<input type="checkbox" /> |
||||
<div class="check-icon"></div> |
||||
<div class="check-text">Show only those I staked into</div> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
@ -0,0 +1,3 @@ |
||||
defmodule BlockScoutWeb.CommonComponentsView do |
||||
use BlockScoutWeb, :view |
||||
end |
||||
Loading…
Reference in new issue