Gabriel Rodriguez Alsina
6 years ago
parent
ee635fa42a
commit
afcf48168d
@ -1,6 +0,0 @@ |
||||
$btn-add-full-bg: $primary !default; |
||||
$btn-add-full-color: #fff !default; |
||||
|
||||
.btn-add-full { |
||||
@include btn-full($btn-add-full-bg, $btn-add-full-color); |
||||
} |
||||
@ -1,6 +0,0 @@ |
||||
$btn-add-line-bg: #fff !default; |
||||
$btn-add-line-color: $secondary !default; |
||||
|
||||
.btn-add-line { |
||||
@include btn-line($btn-add-line-bg, $btn-add-line-color); |
||||
} |
||||
@ -0,0 +1,6 @@ |
||||
$btn-full-primary-bg: $primary !default; |
||||
$btn-full-primary-color: #fff !default; |
||||
|
||||
.btn-full-primary { |
||||
@include btn-full($btn-full-primary-bg, $btn-full-primary-color); |
||||
} |
||||
@ -0,0 +1,6 @@ |
||||
$btn-line-bg: #fff !default; |
||||
$btn-line-color: $secondary !default; |
||||
|
||||
.btn-line { |
||||
@include btn-line($btn-line-bg, $btn-line-color); |
||||
} |
||||
@ -0,0 +1,74 @@ |
||||
.stakes-progress { |
||||
.modal-stake-right & { |
||||
border-left: 1px solid $base-border-color; |
||||
flex-shrink: 0; |
||||
height: 100%; |
||||
padding: $modal-vertical-padding $modal-horizontal-padding; |
||||
width: 190px; |
||||
} |
||||
} |
||||
|
||||
.stakes-progress-info { |
||||
margin-bottom: 25px; |
||||
|
||||
&:last-child { |
||||
margin-bottom: 0; |
||||
} |
||||
} |
||||
|
||||
.stakes-progress-info-title { |
||||
color: #a3a9b5; |
||||
font-size: 12px; |
||||
font-weight: normal; |
||||
line-height: 1.2; |
||||
margin: 0 0 12px; |
||||
text-align: left; |
||||
} |
||||
|
||||
.stakes-progress-info-value { |
||||
color: #333; |
||||
font-size: 14px; |
||||
font-weight: normal; |
||||
line-height: 1.2; |
||||
margin: 0; |
||||
text-align: left; |
||||
|
||||
&.link-color { |
||||
color: $primary; |
||||
} |
||||
} |
||||
|
||||
.stakes-progress-graph { |
||||
margin: 0 0 20px; |
||||
position: relative; |
||||
} |
||||
|
||||
.stakes-progress-graph-canvas { |
||||
position: relative; |
||||
z-index: 1; |
||||
} |
||||
|
||||
.stakes-progress-data { |
||||
left: 50%; |
||||
position: absolute; |
||||
top: 50%; |
||||
transform: translateX(-50%) translateY(-50%); |
||||
z-index: 12; |
||||
} |
||||
|
||||
.stakes-progress-data-total { |
||||
color: #a3a9b5; |
||||
font-size: 12px; |
||||
font-weight: normal; |
||||
line-height: 1.2; |
||||
text-align: center; |
||||
} |
||||
|
||||
.stakes-progress-data-progress { |
||||
color: #333; |
||||
font-size: 24px; |
||||
font-weight: bold; |
||||
line-height: 1.2; |
||||
margin: 0 0 8px; |
||||
text-align: center; |
||||
} |
||||
@ -1,6 +1,9 @@ |
||||
<span class="btn-add-full <%= if assigns[:extra_class] do @extra_class end %>"> |
||||
<button |
||||
class="btn-add-full btn-full-primary <%= if assigns[:extra_class] do @extra_class end %>" |
||||
<%= if assigns[:disabled] do "disabled" end %> |
||||
> |
||||
<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14"> |
||||
<path fill-rule="evenodd" d="M13 8H8v5a1 1 0 0 1-2 0V8H1a1 1 0 0 1 0-2h5V1a1 1 0 0 1 2 0v5h5a1 1 0 0 1 0 2z"/> |
||||
</svg> |
||||
<span class="btn-add-full-text"><%= @text %></span> |
||||
</span> |
||||
<span class="btn-full-primary-text"><%= @text %></span> |
||||
</button> |
||||
@ -1,6 +1,9 @@ |
||||
<span class="btn-add-line <%= if assigns[:extra_class] do @extra_class end %>"> |
||||
<button |
||||
class="btn-add-line btn-line <%= if assigns[:extra_class] do @extra_class end %>" |
||||
<%= if assigns[:disabled] do "disabled" end %> |
||||
> |
||||
<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14"> |
||||
<path fill-rule="evenodd" d="M13 8H8v5a1 1 0 0 1-2 0V8H1a1 1 0 0 1 0-2h5V1a1 1 0 0 1 2 0v5h5a1 1 0 0 1 0 2z"/> |
||||
</svg> |
||||
<span class="btn-add-line-text"><%= @text %></span> |
||||
</span> |
||||
<span class="btn-line-text"><%= @text %></span> |
||||
</button> |
||||
@ -0,0 +1,9 @@ |
||||
<button |
||||
class="btn-stake-more-full btn-full-primary <%= if assigns[:extra_class] do @extra_class end %>" |
||||
<%= if assigns[:disabled] do "disabled" end %> |
||||
> |
||||
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16"> |
||||
<path fill="#FFF" fill-rule="evenodd" d="M15 16H1a1 1 0 0 1-1-1v-3a1 1 0 0 1 1-1h14a1 1 0 0 1 1 1v3a1 1 0 0 1-1 1zm-1-3H2v1h12v-1zM8.785 8.675c-.114.114-.25.187-.394.237-.007.003-.012.01-.02.013a1.036 1.036 0 0 1-1.136-.221L4.296 5.765a1.038 1.038 0 1 1 1.469-1.469L7 5.531V1a1 1 0 0 1 2 0v4.54l1.246-1.246a1.033 1.033 0 0 1 1.46 1.46L8.785 8.675z"/> |
||||
</svg> |
||||
<span class="btn-full-primary-text"><%= @text %></span> |
||||
</button> |
||||
@ -0,0 +1,52 @@ |
||||
<div class="modal fade" id="stakeModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenterTitle" aria-hidden="true"> |
||||
<div class="modal-dialog modal-dialog-centered modal-stake" role="document"> |
||||
<div class="modal-content"> |
||||
<button type="button" class="close close-modal" data-dismiss="modal" aria-label="Close"> |
||||
<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18"> |
||||
<path fill="#F6F7F9" fill-rule="evenodd" d="M10.435 8.983l7.261 7.261a1.027 1.027 0 1 1-1.452 1.452l-7.261-7.261-7.262 7.262a1.025 1.025 0 1 1-1.449-1.45l7.262-7.261L.273 1.725A1.027 1.027 0 1 1 1.725.273l7.261 7.261 7.23-7.231a1.025 1.025 0 1 1 1.449 1.45l-7.23 7.23z"/> |
||||
</svg> |
||||
</button> |
||||
<div class="modal-stake-two-cols"> |
||||
<div class="modal-stake-left"> |
||||
<div class="modal-header"> |
||||
<h5 class="modal-title"><%= gettext("Stake") %></h5> |
||||
</div> |
||||
<div class="modal-body"> |
||||
<form> |
||||
<div class="input-group form-group"> |
||||
<input type="text" class="form-control n-b-r" placeholder='<%= gettext("Amount") %>'> |
||||
<div class="input-group-prepend last"> |
||||
<div class="input-group-text">POA20</div> |
||||
</div> |
||||
</div> |
||||
<p class="form-p m-b-0">Minimum Stake: <span class="text-dark">100 POA20</span></p> |
||||
<p class="form-p">Your Balance: <span class="text-dark">2000 POA20</span></p> |
||||
<div class="form-button"> |
||||
<%= render BlockScoutWeb.StakesView, "_stakes_btn_stake_more.html", text: gettext("Stake More"), extra_class: "full-width" %> |
||||
</div> |
||||
</form> |
||||
</div> |
||||
<div class="modal-bottom-disclaimer b-b-r-0"> |
||||
<div class="modal-bottom-disclaimer-graphic"> |
||||
<svg xmlns="http://www.w3.org/2000/svg" width="10" height="16"> |
||||
<path fill="#333" fill-rule="evenodd" d="M9 16H1a1 1 0 0 1 0-2h3V6H1a1 1 0 0 1 0-2h4a1 1 0 0 1 1 1v9h3a1 1 0 0 1 0 2zM5 2H4a1 1 0 0 1 0-2h1a1 1 0 0 1 0 2z"/> |
||||
</svg> |
||||
</div> |
||||
<div class="modal-bottom-disclaimer-text">Lorem ipsum dolor sit amet, consect adipiscing elit, sed do eiusmod temp incididunt ut labore et dolore magna. Sed do eiusmod temp incididunt ut.</div> |
||||
</div> |
||||
</div> |
||||
<div class="modal-stake-right"> |
||||
<%= |
||||
render BlockScoutWeb.StakesView, |
||||
"_stakes_progress.html", |
||||
progress: "900", |
||||
total: "2700", |
||||
pool: "0x7130-95a480", |
||||
stakes_ratio: "2.75%", |
||||
delegators: "1367" |
||||
%> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
@ -0,0 +1,32 @@ |
||||
<div class="stakes-progress"> |
||||
<div class="stakes-progress-graph"> |
||||
<canvas |
||||
class="stakes-progress-graph-canvas" |
||||
height="125" |
||||
id="stakeProgress" |
||||
width="125" |
||||
></canvas> |
||||
<div class="stakes-progress-data"> |
||||
<div class="stakes-progress-data-progress js-stakes-progress-data-progress"><%= if assigns[:progress] do @progress end %></div> |
||||
<div class="stakes-progress-data-total js-stakes-progress-data-total"><%= if assigns[:total] do @total end %></div> |
||||
</div> |
||||
</div> |
||||
<div class="stakes-progress-info"> |
||||
<h2 class="stakes-progress-info-title"><%= gettext("Pool") %></h2> |
||||
<p class="stakes-progress-info-value link-color"> |
||||
<%= if assigns[:pool] do @pool end %> |
||||
</p> |
||||
</div> |
||||
<div class="stakes-progress-info"> |
||||
<h2 class="stakes-progress-info-title"><%= gettext("Stakes Ratio") %></h2> |
||||
<p class="stakes-progress-info-value"> |
||||
<%= if assigns[:stakes_ratio] do @stakes_ratio end %> |
||||
</p> |
||||
</div> |
||||
<div class="stakes-progress-info"> |
||||
<h2 class="stakes-progress-info-title"><%= gettext("Delegators") %></h2> |
||||
<p class="stakes-progress-info-value link-color"> |
||||
<%= if assigns[:delegators] do @delegators end %> |
||||
</p> |
||||
</div> |
||||
</div> |
||||
Loading…
Reference in new issue