CipherLabs
/
blockscout
mirror of https://github.com/blockscout/blockscout
2
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

(add) new contract section styling

Browse Source
pull/2071/head
Gabriel Rodriguez Alsina 6 years ago
parent 608485ff25
commit 2a08ccc005
3 changed files with 202 additions and 69 deletions
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Show Stats Download Patch File Download Diff File
  1. 1
      apps/block_scout_web/assets/css/app.scss
  2. 65
      apps/block_scout_web/assets/css/components/_new_smart_contract.scss
  3. 205
      apps/block_scout_web/lib/block_scout_web/templates/address_contract_verification/new.html.eex

1
apps/block_scout_web/assets/css/app.scss
Unescape View File

@ -122,6 +122,7 @@ $fa-font-path: "~@fortawesome/fontawesome-free/webfonts";
@import "components/alerts"; @import "components/alerts";
@import "components/verify_other_explorers"; @import "components/verify_other_explorers";
@import "components/errors"; @import "components/errors";
@import "components/new_smart_contract";
:export { :export {
dashboardBannerChartAxisFontColor: $dashboard-banner-chart-axis-font-color; dashboardBannerChartAxisFontColor: $dashboard-banner-chart-axis-font-color;

65
apps/block_scout_web/assets/css/components/_new_smart_contract.scss
Unescape View File

@ -0,0 +1,65 @@
$new-smart-contract-container-tooltips-background-color: #fbfafc !default;
$new-smart-contract-tooltips-width: 300px;
$smart-contract-form-group-tooltip-color: #adb5bd !default;
.new-smart-contract-container {
background-color: #fff;
background-image: linear-gradient(
to bottom right,
#{$new-smart-contract-container-tooltips-background-color} 100%,
#{$new-smart-contract-container-tooltips-background-color} 100%
);
background-position: 100% 0;
background-repeat: repeat-y;
background-size: #{$new-smart-contract-tooltips-width} 1px;
box-shadow: 0 0 25px 0 rgba(0, 0, 0, 0.15);
margin-bottom: 3rem;
padding: 50px 0 50px 22px;
}
.smart-contract-title {
color: #333;
font-size: 18px;
font-weight: normal;
line-height: 1.2;
margin: 0 0 70px 0;
padding: 0;
text-align: left;
}
.smart-contract-form-group {
margin-bottom: 30px;
}
.smart-contract-form-group-inner-wrapper {
display: flex;
justify-content: space-between;
label {
color: #333;
font-size: 14px;
font-weight: normal;
line-height: 1.7;
margin: 0;
min-width: 170px;
padding-right: 60px;
text-align: left;
}
.form-control {
flex-grow: 1;
margin-right: 30px;
}
.smart-contract-form-group-tooltip {
color: $smart-contract-form-group-tooltip-color;
flex-grow: 0;
flex-shrink: 0;
font-size: 12px;
font-weight: normal;
line-height: 1.5;
padding: 0 30px;
text-align: left;
width: #{$new-smart-contract-tooltips-width};
}
}

205
apps/block_scout_web/lib/block_scout_web/templates/address_contract_verification/new.html.eex
Unescape View File

@ -1,120 +1,187 @@
<section class="container"> <section class="container new-smart-contract-container">
<div class="card"> <div class="new-smart-contract-form">
<div class="card-body"> <h1 class="smart-contract-title"><%= gettext "New Smart Contract" %></h1>
<h1 class="card-title"><%= gettext "New Smart Contract" %></h1>
<%= form_for @changeset, <%= form_for @changeset,
address_verify_contract_path(@conn, :create, @conn.params["address_id"]), address_verify_contract_path(@conn, :create, @conn.params["address_id"]),
[], [],
fn f -> %> fn f -> %>
<div class="form-group"> <div class="smart-contract-form-group">
<%= label f, :address_hash, gettext("Contract Address") %> <div class="smart-contract-form-group-inner-wrapper">
<%= text_input f, :address_hash, class: "form-control", "aria-describedby": "contract-address-help-block", readonly: true %> <%= label f, :address_hash, gettext("Contract Address") %>
<%= text_input f, :address_hash, class: "form-control", "aria-describedby": "contract-address-help-block", readonly: true %>
<div class="smart-contract-form-group-tooltip">Lorem ipsum dolor sit amet, consectetur adip
elit, sed do eiusmod tempor incididunt</div>
</div>
<%= error_tag f, :address_hash, id: "contract-address-help-block", class: "text-danger" %> <%= error_tag f, :address_hash, id: "contract-address-help-block", class: "text-danger" %>
</div> </div>
<div class="form-group"> <div class="smart-contract-form-group">
<%= label f, :name, gettext("Contract Name") %> <div class="smart-contract-form-group-inner-wrapper">
<%= text_input f, :name, class: "form-control", "aria-describedby": "contract-name-help-block", "data-test": "contract_name" %> <%= label f, :name, gettext("Contract Name") %>
<%= text_input f, :name, class: "form-control", "aria-describedby": "contract-name-help-block", "data-test": "contract_name" %>
<div class="smart-contract-form-group-tooltip">Lorem ipsum dolor sit amet, consectetur adip
elit, sed do eiusmod tempor incididunt</div>
</div>
<%= error_tag f, :name, id: "contract-name-help-block", class: "text-danger" %> <%= error_tag f, :name, id: "contract-name-help-block", class: "text-danger" %>
</div> </div>
<div class="form-group mb-4"> <div class="smart-contract-form-group">
<%= label f, :compiler_version, gettext("Compiler") %> <div class="smart-contract-form-group-inner-wrapper">
<%= select f, :compiler_version, @compiler_versions, class: "form-control", selected: "latest", "aria-describedby": "compiler-help-block" %> <%= label f, :compiler_version, gettext("Compiler") %>
<%= select f, :compiler_version, @compiler_versions, class: "form-control", selected: "latest", "aria-describedby": "compiler-help-block" %>
<div class="smart-contract-form-group-tooltip">Lorem ipsum dolor sit amet, consectetur adip
elit, sed do eiusmod tempor incididunt</div>
</div>
<%= error_tag f, :compiler_version, id: "compiler-help-block", class: "text-danger" %> <%= error_tag f, :compiler_version, id: "compiler-help-block", class: "text-danger" %>
</div> </div>
<div class="form-group"> <div class="smart-contract-form-group">
<%= label :evm_version, :evm_version, gettext("EVM Version") %> <div class="smart-contract-form-group-inner-wrapper">
<%= select :evm_version, :evm_version, @evm_versions, class: "form-control", selected: "petersburg", "aria-describedby": "evm-version-help-block" %> <%= label :evm_version, :evm_version, gettext("EVM Version") %>
</div> <%= select :evm_version, :evm_version, @evm_versions, class: "form-control", selected: "petersburg", "aria-describedby": "evm-version-help-block" %>
<div class="smart-contract-form-group-tooltip">Lorem ipsum dolor sit amet, consectetur adip
<div class="form-group mb-4"> elit, sed do eiusmod tempor incididunt</div>
<%= label f, "Optimization" %>
<div class="form-check mb-2">
<%= radio_button f, :optimization, false, checked: true, class: "form-check-input", "aria-describedby": "optimization-help-block" %>
<%= label :smart_contract_optimization, :false, gettext("No"), class: "form-check-label" %>
</div> </div>
</div>
<div class="form-check"> <div class="smart-contract-form-group">
<%= radio_button f, :optimization, true, class: "form-check-input", "aria-describedby": "optimization-help-block" %> <div class="smart-contract-form-group-inner-wrapper">
<%= label :smart_contract_optimization, :true, gettext("Yes"), class: "form-check-label" %> <%= label f, "Optimization" %>
<div class="form-check mb-2">
<%= radio_button f, :optimization, false, checked: true, class: "form-check-input", "aria-describedby": "optimization-help-block" %>
<%= label :smart_contract_optimization, :false, gettext("No"), class: "form-check-label" %>
</div>
<div class="form-check">
<%= radio_button f, :optimization, true, class: "form-check-input", "aria-describedby": "optimization-help-block" %>
<%= label :smart_contract_optimization, :true, gettext("Yes"), class: "form-check-label" %>
</div>
<div class="smart-contract-form-group-tooltip">Lorem ipsum dolor sit amet, consectetur adip
elit, sed do eiusmod tempor incididunt</div>
</div> </div>
<%= error_tag f, :optimization, id: "optimization-help-block", class: "text-danger" %> <%= error_tag f, :optimization, id: "optimization-help-block", class: "text-danger" %>
</div> </div>
<div class="form-group"> <div class="smart-contract-form-group">
<%= label f, :name, gettext("Optimization runs") %> <div class="smart-contract-form-group-inner-wrapper">
<%= text_input :optimization, :runs, value: 200, class: "form-control", "aria-describedby": "optimization-runs-help-block", "data-test": "optimization-runs" %> <%= label f, :name, gettext("Optimization runs") %>
<%= text_input :optimization, :runs, value: 200, class: "form-control", "aria-describedby": "optimization-runs-help-block", "data-test": "optimization-runs" %>
<div class="smart-contract-form-group-tooltip">Lorem ipsum dolor sit amet, consectetur adip
elit, sed do eiusmod tempor incididunt</div>
</div>
</div> </div>
<div class="form-group mb-4"> <div class="smart-contract-form-group">
<%= label f, :contract_source_code, gettext("Enter the Solidity Contract Code below") %> <div class="smart-contract-form-group-inner-wrapper">
<%= textarea f, :contract_source_code, class: "form-control monospace", rows: 3, "aria-describedby": "contract-source-code-help-block" %> <%= label f, :contract_source_code, gettext("Enter the Solidity Contract Code below") %>
<%= textarea f, :contract_source_code, class: "form-control monospace", rows: 3, "aria-describedby": "contract-source-code-help-block" %>
<div class="smart-contract-form-group-tooltip">Lorem ipsum dolor sit amet, consectetur adip
elit, sed do eiusmod tempor incididunt</div>
</div>
<%= error_tag f, :contract_source_code, id: "contract-source-code-help-block", class: "text-danger", "data-test": "contract-source-code-error" %> <%= error_tag f, :contract_source_code, id: "contract-source-code-help-block", class: "text-danger", "data-test": "contract-source-code-error" %>
</div> </div>
<div class="form-group mb-4"> <div class="smart-contract-form-group">
<%= label f, :contructor_arguments, gettext("Enter constructor arguments if the contract had any") %> <div class="smart-contract-form-group-inner-wrapper">
<%= textarea f, :constructor_arguments, class: "form-control monospace", rows: 3, "aria-describedby": "contract-constructor-arguments-help-block" %> <%= label f, :contructor_arguments, gettext("Enter constructor arguments if the contract had any") %>
<%= textarea f, :constructor_arguments, class: "form-control monospace", rows: 3, "aria-describedby": "contract-constructor-arguments-help-block" %>
<div class="smart-contract-form-group-tooltip">Lorem ipsum dolor sit amet, consectetur adip
elit, sed do eiusmod tempor incididunt</div>
</div>
<%= error_tag f, :constructor_arguments, id: "contract-constructor-arguments-help-block", class: "text-danger", "data-test": "contract-constructor-arguments-error" %> <%= error_tag f, :constructor_arguments, id: "contract-constructor-arguments-help-block", class: "text-danger", "data-test": "contract-constructor-arguments-error" %>
</div> </div>
<h3 class="card-title"><%= gettext "Contract Libraries" %></h3> <h3 class="card-title"><%= gettext "Contract Libraries" %></h3>
<div class="form-group"> <div class="smart-contract-form-group">
<%= label :external_libraries, :library1, gettext("1 Library Name") %> <div class="smart-contract-form-group-inner-wrapper">
<%= text_input :external_libraries, :library1_name, class: "form-control", "aria-describedby": "contract-name-help-block" %> <%= label :external_libraries, :library1, gettext("1 Library Name") %>
<%= text_input :external_libraries, :library1_name, class: "form-control", "aria-describedby": "contract-name-help-block" %>
<div class="smart-contract-form-group-tooltip">Lorem ipsum dolor sit amet, consectetur adip
elit, sed do eiusmod tempor incididunt</div>
</div>
</div> </div>
<div class="form-group"> <div class="smart-contract-form-group">
<%= label :external_libraries, :library1, gettext("1 Library Address") %> <div class="smart-contract-form-group-inner-wrapper">
<%= text_input :external_libraries, :library1_address, class: "form-control", "aria-describedby": "contract-name-help-block" %> <%= label :external_libraries, :library1, gettext("1 Library Address") %>
<%= text_input :external_libraries, :library1_address, class: "form-control", "aria-describedby": "contract-name-help-block" %>
<div class="smart-contract-form-group-tooltip">Lorem ipsum dolor sit amet, consectetur adip
elit, sed do eiusmod tempor incididunt</div>
</div>
</div> </div>
<div class="form-group"> <div class="smart-contract-form-group">
<%= label :external_libraries, :library2, gettext("2 Library Name") %> <div class="smart-contract-form-group-inner-wrapper">
<%= text_input :external_libraries, :library2_name, class: "form-control", "aria-describedby": "contract-name-help-block" %> <%= label :external_libraries, :library2, gettext("2 Library Name") %>
<%= text_input :external_libraries, :library2_name, class: "form-control", "aria-describedby": "contract-name-help-block" %>
<div class="smart-contract-form-group-tooltip">Lorem ipsum dolor sit amet, consectetur adip
elit, sed do eiusmod tempor incididunt</div>
</div>
</div> </div>
<div class="form-group"> <div class="smart-contract-form-group">
<%= label :external_libraries, :library2, gettext("2 Library Address") %> <div class="smart-contract-form-group-inner-wrapper">
<%= text_input :external_libraries, :library2_address, class: "form-control", "aria-describedby": "contract-name-help-block" %> <%= label :external_libraries, :library2, gettext("2 Library Address") %>
<%= text_input :external_libraries, :library2_address, class: "form-control", "aria-describedby": "contract-name-help-block" %>
<div class="smart-contract-form-group-tooltip">Lorem ipsum dolor sit amet, consectetur adip
elit, sed do eiusmod tempor incididunt</div>
</div>
</div> </div>
<div class="form-group"> <div class="smart-contract-form-group">
<%= label :external_libraries, :library3, gettext("3 Library Name") %> <div class="smart-contract-form-group-inner-wrapper">
<%= text_input :external_libraries, :library3_name, class: "form-control", "aria-describedby": "contract-name-help-block" %> <%= label :external_libraries, :library3, gettext("3 Library Name") %>
<%= text_input :external_libraries, :library3_name, class: "form-control", "aria-describedby": "contract-name-help-block" %>
<div class="smart-contract-form-group-tooltip">Lorem ipsum dolor sit amet, consectetur adip
elit, sed do eiusmod tempor incididunt</div>
</div>
</div> </div>
<div class="form-group"> <div class="smart-contract-form-group">
<%= label :external_libraries, :library3, gettext("3 Library Address") %> <div class="smart-contract-form-group-inner-wrapper">
<%= text_input :external_libraries, :library3_address, class: "form-control", "aria-describedby": "contract-name-help-block" %> <%= label :external_libraries, :library3, gettext("3 Library Address") %>
<%= text_input :external_libraries, :library3_address, class: "form-control", "aria-describedby": "contract-name-help-block" %>
<div class="smart-contract-form-group-tooltip">Lorem ipsum dolor sit amet, consectetur adip
elit, sed do eiusmod tempor incididunt</div>
</div>
</div> </div>
<div class="form-group"> <div class="smart-contract-form-group">
<%= label :external_libraries, :library4, gettext("4 Library Name") %> <div class="smart-contract-form-group-inner-wrapper">
<%= text_input :external_libraries, :library4_name, class: "form-control", "aria-describedby": "contract-name-help-block" %> <%= label :external_libraries, :library4, gettext("4 Library Name") %>
<%= text_input :external_libraries, :library4_name, class: "form-control", "aria-describedby": "contract-name-help-block" %>
<div class="smart-contract-form-group-tooltip">Lorem ipsum dolor sit amet, consectetur adip
elit, sed do eiusmod tempor incididunt</div>
</div>
</div> </div>
<div class="form-group"> <div class="smart-contract-form-group">
<%= label :external_libraries, :library4, gettext("4 Library Address") %> <div class="smart-contract-form-group-inner-wrapper">
<%= text_input :external_libraries, :library4_address, class: "form-control", "aria-describedby": "contract-name-help-block" %> <%= label :external_libraries, :library4, gettext("4 Library Address") %>
<%= text_input :external_libraries, :library4_address, class: "form-control", "aria-describedby": "contract-name-help-block" %>
<div class="smart-contract-form-group-tooltip">Lorem ipsum dolor sit amet, consectetur adip
elit, sed do eiusmod tempor incididunt</div>
</div>
</div> </div>
<div class="form-group"> <div class="smart-contract-form-group">
<%= label :external_libraries, :library5, gettext("5 Library Name") %> <div class="smart-contract-form-group-inner-wrapper">
<%= text_input :external_libraries, :library5_name, class: "form-control", "aria-describedby": "contract-name-help-block" %> <%= label :external_libraries, :library5, gettext("5 Library Name") %>
<%= text_input :external_libraries, :library5_name, class: "form-control", "aria-describedby": "contract-name-help-block" %>
<div class="smart-contract-form-group-tooltip">Lorem ipsum dolor sit amet, consectetur adip
elit, sed do eiusmod tempor incididunt</div>
</div>
</div> </div>
<div class="form-group"> <div class="smart-contract-form-group">
<%= label f, :library5, gettext("5 Library Address") %> <div class="smart-contract-form-group-inner-wrapper">
<%= text_input f, :library5_address, class: "form-control", "aria-describedby": "contract-name-help-block" %> <%= label f, :library5, gettext("5 Library Address") %>
<%= text_input f, :library5_address, class: "form-control", "aria-describedby": "contract-name-help-block" %>
<div class="smart-contract-form-group-tooltip">Lorem ipsum dolor sit amet, consectetur adip
elit, sed do eiusmod tempor incididunt</div>
</div>
</div> </div>
<button <button
@ -137,5 +204,5 @@
class: "button button-sm") %> class: "button button-sm") %>
<% end %> <% end %>
</div> </div>
</div>
</section> </section>

Write Preview
Loading…
Cancel
Save