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/verify_other_explorers";
@import "components/errors";
@import "components/new_smart_contract";
:export {
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">
<div class="card">
<div class="card-body">
<h1 class="card-title"><%= gettext "New Smart Contract" %></h1>
<section class="container new-smart-contract-container">
<div class="new-smart-contract-form">
<h1 class="smart-contract-title"><%= gettext "New Smart Contract" %></h1>
<%= form_for @changeset,
address_verify_contract_path(@conn, :create, @conn.params["address_id"]),
[],
fn f -> %>
<div class="form-group">
<%= 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">
<div class="smart-contract-form-group-inner-wrapper">
<%= 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" %>
</div>
<div class="form-group">
<%= 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">
<div class="smart-contract-form-group-inner-wrapper">
<%= 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" %>
</div>
<div class="form-group mb-4">
<%= 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">
<div class="smart-contract-form-group-inner-wrapper">
<%= 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" %>
</div>
<div class="form-group">
<%= label :evm_version, :evm_version, gettext("EVM Version") %>
<%= select :evm_version, :evm_version, @evm_versions, class: "form-control", selected: "petersburg", "aria-describedby": "evm-version-help-block" %>
</div>
<div class="form-group mb-4">
<%= 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 class="smart-contract-form-group">
<div class="smart-contract-form-group-inner-wrapper">
<%= label :evm_version, :evm_version, gettext("EVM Version") %>
<%= 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
elit, sed do eiusmod tempor incididunt</div>
</div>
</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 class="smart-contract-form-group">
<div class="smart-contract-form-group-inner-wrapper">
<%= 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>
<%= error_tag f, :optimization, id: "optimization-help-block", class: "text-danger" %>
</div>
<div class="form-group">
<%= 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">
<div class="smart-contract-form-group-inner-wrapper">
<%= 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 class="form-group mb-4">
<%= 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">
<div class="smart-contract-form-group-inner-wrapper">
<%= 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" %>
</div>
<div class="form-group mb-4">
<%= 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">
<div class="smart-contract-form-group-inner-wrapper">
<%= 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" %>
</div>
<h3 class="card-title"><%= gettext "Contract Libraries" %></h3>
<div class="form-group">
<%= 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">
<div class="smart-contract-form-group-inner-wrapper">
<%= 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 class="form-group">
<%= 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">
<div class="smart-contract-form-group-inner-wrapper">
<%= 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 class="form-group">
<%= 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">
<div class="smart-contract-form-group-inner-wrapper">
<%= 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 class="form-group">
<%= 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">
<div class="smart-contract-form-group-inner-wrapper">
<%= 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 class="form-group">
<%= 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">
<div class="smart-contract-form-group-inner-wrapper">
<%= 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 class="form-group">
<%= 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">
<div class="smart-contract-form-group-inner-wrapper">
<%= 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 class="form-group">
<%= 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">
<div class="smart-contract-form-group-inner-wrapper">
<%= 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 class="form-group">
<%= 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">
<div class="smart-contract-form-group-inner-wrapper">
<%= 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 class="form-group">
<%= 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">
<div class="smart-contract-form-group-inner-wrapper">
<%= 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 class="form-group">
<%= 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">
<div class="smart-contract-form-group-inner-wrapper">
<%= 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>
<button
@ -137,5 +204,5 @@
class: "button button-sm") %>
<% end %>
</div>
</div>
</section>

Write Preview
Loading…
Cancel
Save