Permalink
Browse files

feat(#mBB-token): Created new tab for Custom Tokens, added custom scr…

…ollbar ++

- Created new Icon for Token Creation Tab
- Created placeholder content for newly added Tab
- Cleaned up a bit style.js since some functions will not be used
anymore due to flexbox new CSS rulesets.
- Further improved some elements to adapt this flexbox migration.
- Added new customized scrollbar for all webkit browsers that matches
perfectly with the app theme.
- Further improved adaptivity for mobile sizes.
  • Loading branch information...
1 parent 88971f8 commit 19d138d530c7b7993fab29a0ad2f512d8c21319b @supereth supereth committed Aug 16, 2016
Showing with 251 additions and 88 deletions.
  1. +66 −3 css/style.css
  2. +72 −0 img/tab_token_prev.svg
  3. +26 −0 img/tabs-iconset-tokens.svg
  4. +63 −42 index.html
  5. +24 −43 js/style.js
View
@@ -131,6 +131,22 @@ body {
font-weight: 600;
}
+/* Custom Scrollbar */
+
+.wScroll::-webkit-scrollbar-track {
+ -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
+ background-color: #F5F5F5;
+}
+.wScroll::-webkit-scrollbar {
+ width: 10px;
+ background-color: #F5F5F5;
+}
+.wScroll::-webkit-scrollbar-thumb {
+ background-color: #37556E;
+ border: 1px solid #555555;
+ border-radius: 4px;
+}
+
/* ======================================================================= */
@@ -539,10 +555,16 @@ header {
z-index: 100;
}
#tabs-Iconset {
+ display: -webkit-box;
+ display: -ms-flexbox;
display: flex;
height: 90%;
width: 92.5%;
+ -webkit-box-pack: center;
+ -ms-flex-pack: center;
justify-content: center;
+ -webkit-box-align: center;
+ -ms-flex-align: center;
align-items: center;
}
#tabs-Iconset label {
@@ -613,7 +635,10 @@ input.tabs-radio:checked + label img {
/* padding-bottom: 1rem;*/
}
#mBBody {
+ display: -webkit-box;
+ display: -ms-flexbox;
display: flex;
+ -ms-flex-line-pack: center;
align-content: center;
position: relative;
width: 100% !important;
@@ -624,6 +649,7 @@ input.tabs-radio:checked + label img {
#mBB-exchange,
#mBB-voting,
#mBB-history,
+#mBB-token,
#mBB-messages,
#mBB-community {
display: none;
@@ -644,19 +670,30 @@ input.tabs-radio:checked + label img {
#mBB-wallet {
width: 100%;
+ display: -webkit-box;
+ display: -ms-flexbox;
display: flex;
+ -ms-flex-wrap: wrap;
flex-wrap: wrap;
}
.flex-container {
+ display: -webkit-box;
+ display: -ms-flexbox;
display: flex;
width: 100%;
height: auto;
+ -webkit-box-pack: center;
+ -ms-flex-pack: center;
justify-content: center;
+ -ms-flex-line-pack: center;
align-content: center;
+ -ms-flex-wrap: wrap;
flex-wrap: wrap;
}
.walletBox {
position: relative;
+ -webkit-box-flex: 1;
+ -ms-flex: 1;
flex: 1;
/* display: inline-block;*/
min-width: 300px;
@@ -1179,6 +1216,10 @@ input.tabs-radio:checked + label img {
#portfolio {
padding-bottom: 1rem;
}
+#mBB-portfolio {
+ width: 100%;
+ text-align: center;
+}
#portfolio h2 {
background-color: #ffffff;
border: 0px solid #F0F0F0;
@@ -1218,11 +1259,9 @@ input.tabs-radio:checked + label img {
/* HISTORY TAB */
#mBB-history {
+ width: 100%;
text-align: center;
}
-#wHistory {
- width: 97vw;
-}
#mBB-history .wavesTable {
/* border: 1px solid red;*/
}
@@ -1244,6 +1283,26 @@ input.tabs-radio:checked + label img {
/* ======================================================================= */
+/* EXCHANGE TAB */
+
+#mBB-exchange {
+ width: 100%;
+ text-align: center;
+}
+
+/* ======================================================================= */
+
+
+/* TOKENS TAB */
+
+#mBB-token {
+ width: 100%;
+ text-align: center;
+}
+
+/* ======================================================================= */
+
+
/* MESSENGER TAB */
#mBB-messages-add {
@@ -1301,6 +1360,10 @@ input.tabs-radio:checked + label img {
/* COMMUNITY TAB */
+#mBB-community {
+ width: 100%;
+ text-align: center;
+}
#mBB-community h2 {
text-align: center;
font-size: 1.25rem;
@@ -0,0 +1,72 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<!-- Creator: CorelDRAW X7 -->
+<svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" width="6.40718in" height="3.18874in" version="1.1" style="shape-rendering:geometricPrecision; text-rendering:geometricPrecision; image-rendering:optimizeQuality; fill-rule:evenodd; clip-rule:evenodd"
+viewBox="0 0 62353 31032"
+ xmlns:xlink="http://www.w3.org/1999/xlink">
+ <defs>
+ <style type="text/css">
+ <![CDATA[
+ .str1 {stroke:#E6E6E6;stroke-width:32.4138}
+ .str0 {stroke:#E6E6E6;stroke-width:67.5861}
+ .fil1 {fill:none}
+ .fil2 {fill:#37556E}
+ .fil3 {fill:#E6E6E6}
+ .fil0 {fill:white}
+ ]]>
+ </style>
+ </defs>
+ <g id="Layer_x0020_1">
+ <metadata id="CorelCorpID_0Corel-Layer"/>
+ <polygon class="fil0 str0" points="36,4147 62320,4147 62320,30998 36,30998 "/>
+ <polygon class="fil1 str1" points="996,7794 61355,7794 61355,12368 996,12368 "/>
+ <polygon class="fil2 str0" points="34,34 62317,34 62317,4147 34,4147 "/>
+ <path class="fil0" d="M910 684l4434 0 0 2813 -4434 0 0 -2813zm38473 1121l1946 0 0 1946 -1946 0 0 -1946zm-3060 0l1946 0 0 1946 -1946 0 0 -1946zm-3060 0l1946 0 0 1946 -1946 0 0 -1946zm-3059 0l1946 0 0 1946 -1946 0 0 -1946zm-3062 0l1946 0 0 1946 -1946 0 0 -1946zm-3060 0l1946 0 0 1946 -1946 0 0 -1946zm-3059 0l1945 0 0 1946 -1945 0 0 -1946zm-1706 -1361l4383 0 0 557 -4383 0 0 -557zm4954 0l8147 0 0 557 -8147 0 0 -557zm9363 0l4383 0 0 557 -4383 0 0 -557zm5019 0l4384 0 0 557 -4384 0 0 -557zm17780 294l1298 0 0 1297 -1298 0 0 -1297zm1818 0l1298 0 0 1297 -1298 0 0 -1297zm1817 0l1298 0 0 1297 -1298 0 0 -1297zm-3623 2101l1489 0 0 557 -1489 0 0 -557zm1862 0l3048 0 0 557 -3048 0 0 -557z"/>
+ <polygon class="fil2" points="996,6337 61355,6337 61355,7794 996,7794 "/>
+ <polygon class="fil3" points="27102,5067 35249,5067 35249,5624 27102,5624 "/>
+ <polygon class="fil2" points="60057,4645 61355,4645 61355,5943 60057,5943 "/>
+ <path class="fil0" d="M4457 6787l4341 0 0 557 -4341 0 0 -557zm14452 0l4341 0 0 557 -4341 0 0 -557zm14452 0l4342 0 0 557 -4342 0 0 -557zm14453 0l4341 0 0 557 -4341 0 0 -557z"/>
+ <path class="fil3" d="M996 11224l60359 0 0 1144 -60359 0 0 -1144zm0 -2286l60359 0 0 1144 -60359 0 0 -1144zm1944 -711l7377 0 0 280 -7377 0 0 -280z"/>
+ <polygon class="fil0" points="3147,9350 10110,9350 10110,9630 3147,9630 "/>
+ <path class="fil3" d="M17390 8227l4912 0 0 280 -4912 0 0 -280zm5480 0l2324 0 0 280 -2324 0 0 -280z"/>
+ <path class="fil0" d="M20282 9341l4912 0 0 279 -4912 0 0 -279zm-2892 0l2323 0 0 279 -2323 0 0 -279z"/>
+ <path class="fil2" d="M45593 8227l2323 0 0 280 -2323 0 0 -280zm3230 0l2323 0 0 280 -2323 0 0 -280zm3253 0l2323 0 0 280 -2323 0 0 -280zm-6483 1144l2323 0 0 280 -2323 0 0 -280zm3230 0l2323 0 0 280 -2323 0 0 -280zm3253 0l2323 0 0 280 -2323 0 0 -280z"/>
+ <polygon class="fil3" points="31369,8227 39695,8227 39695,8507 31369,8507 "/>
+ <polygon class="fil0" points="33114,9350 37947,9350 37947,9630 33114,9630 "/>
+ <polygon class="fil3" points="4452,10506 8803,10506 8803,10786 4452,10786 "/>
+ <polygon class="fil0" points="3629,11632 9628,11632 9628,11911 3629,11911 "/>
+ <path class="fil3" d="M18317 10506l3985 0 0 280 -3985 0 0 -280zm4553 0l1590 0 0 280 -1590 0 0 -280z"/>
+ <path class="fil0" d="M20107 11620l5758 0 0 279 -5758 0 0 -279zm-3388 0l2721 0 0 279 -2721 0 0 -279z"/>
+ <path class="fil2" d="M45593 10506l2323 0 0 280 -2323 0 0 -280zm3230 0l2323 0 0 280 -2323 0 0 -280zm3253 0l2323 0 0 280 -2323 0 0 -280zm-6483 1144l2323 0 0 280 -2323 0 0 -280zm3230 0l2323 0 0 280 -2323 0 0 -280zm3253 0l2323 0 0 280 -2323 0 0 -280z"/>
+ <polygon class="fil3" points="33979,10506 37085,10506 37085,10786 33979,10786 "/>
+ <polygon class="fil0" points="32152,11632 38912,11632 38912,11911 32152,11911 "/>
+ <path class="fil2" d="M58251 4645l1298 0 0 1298 -1298 0 0 -1298zm-1818 0l1298 0 0 1298 -1298 0 0 -1298z"/>
+ <polygon class="fil2" points="996,4645 2294,4645 2294,5943 996,5943 "/>
+ <polygon class="fil2" points="2816,4645 4114,4645 4114,5943 2816,5943 "/>
+ </g>
+ <g id="Layer_x0020_1_0">
+ <metadata id="CorelCorpID_1Corel-Layer"/>
+ <g id="_799460016">
+ <polygon class="fil0 str0" points="16802,15772 45268,15772 45268,25639 16802,25639 "/>
+ <circle class="fil2 str0" cx="45268" cy="15772" r="589"/>
+ <polygon class="fil1 str1" points="17914,20006 44088,20006 44088,24581 17914,24581 "/>
+ <polygon class="fil2" points="17914,18550 44088,18550 44088,20006 17914,20006 "/>
+ <polygon class="fil2" points="42790,16858 44088,16858 44088,18156 42790,18156 "/>
+ <polygon class="fil3" points="19734,20440 22934,20440 22934,20719 19734,20719 "/>
+ <polygon class="fil3" points="17914,21150 44088,21150 44088,22295 17914,22295 "/>
+ <polygon class="fil3" points="17914,23436 44088,23436 44088,24581 17914,24581 "/>
+ <polygon class="fil0" points="19734,21563 26697,21563 26697,21843 19734,21843 "/>
+ <polygon class="fil3" points="19734,22719 24085,22719 24085,22998 19734,22998 "/>
+ <polygon class="fil0" points="19734,23844 25732,23844 25732,24124 19734,24124 "/>
+ <g>
+ <path class="fil2" d="M33476 20440l2324 0 0 279 -2324 0 0 -279zm3230 0l2323 0 0 279 -2323 0 0 -279zm3253 0l2323 0 0 279 -2323 0 0 -279zm-6483 1144l2324 0 0 280 -2324 0 0 -280zm3230 0l2323 0 0 280 -2323 0 0 -280zm3253 0l2323 0 0 280 -2323 0 0 -280z"/>
+ <path class="fil2" d="M33476 22719l2324 0 0 279 -2324 0 0 -279zm3230 0l2323 0 0 279 -2323 0 0 -279zm3253 0l2323 0 0 279 -2323 0 0 -279zm-6483 1144l2324 0 0 280 -2324 0 0 -280zm3230 0l2323 0 0 280 -2323 0 0 -280zm3253 0l2323 0 0 280 -2323 0 0 -280z"/>
+ </g>
+ <path class="fil2" d="M40984 16858l1298 0 0 1298 -1298 0 0 -1298zm-1817 0l1298 0 0 1298 -1298 0 0 -1298z"/>
+ <polygon class="fil2" points="17914,16858 19212,16858 19212,18156 17914,18156 "/>
+ <polygon class="fil2" points="19734,16858 21032,16858 21032,18156 19734,18156 "/>
+ <polygon class="fil2" points="22655,17198 30802,17198 30802,17755 22655,17755 "/>
+ <polygon class="fil2" points="31804,17198 37015,17198 37015,17755 31804,17755 "/>
+ </g>
+ </g>
+</svg>
@@ -0,0 +1,26 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<!-- Creator: CorelDRAW X7 -->
+<svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" width="0.25in" height="0.25in" version="1.1" style="shape-rendering:geometricPrecision; text-rendering:geometricPrecision; image-rendering:optimizeQuality; fill-rule:evenodd; clip-rule:evenodd"
+viewBox="0 0 282 282"
+ xmlns:xlink="http://www.w3.org/1999/xlink">
+ <defs>
+ <style type="text/css">
+ <![CDATA[
+ .fil1 {fill:white}
+ .fil0 {fill:white;fill-rule:nonzero}
+ ]]>
+ </style>
+ </defs>
+ <g id="Layer_x0020_1">
+ <metadata id="CorelCorpID_0Corel-Layer"/>
+ <g id="_773989488">
+ <path class="fil0" d="M141 0c39,0 74,16 100,41 25,26 41,61 41,100 0,39 -16,74 -41,100 -26,25 -61,41 -100,41 -39,0 -74,-16 -100,-41 -25,-26 -41,-61 -41,-100 0,-39 16,-74 41,-100 26,-25 61,-41 100,-41zm86 55c-22,-22 -52,-36 -86,-36 -34,0 -64,14 -86,36 -22,22 -36,52 -36,86 0,34 14,64 36,86 22,22 52,36 86,36 34,0 64,-14 86,-36 22,-22 36,-52 36,-86 0,-34 -14,-64 -36,-86z"/>
+ <g>
+ <path class="fil1" d="M208 91l-51 -51c-9,-9 -23,-9 -32,0l-51 51c-3,3 -3,8 0,11l15 15 11 10c3,2 7,2 11,0l20 -19c6,-6 14,-6 20,0l21 19c3,2 7,2 10,0l11 -10 15 -15c3,-3 3,-8 0,-11z"/>
+ <path class="fil1" d="M45 152l80 80c4,4 9,6 14,6l0 -31 -8 0 0 -9 8 0 0 -23 0 -2 2 0 28 0 0 -8 9 0 0 8 36 0 2 0 21 -21c14,-14 4,-18 -6,-28l-13 -11c-3,-3 -8,-3 -11,0l-20 19c-6,5 -14,5 -20,0l-21 -19c-3,-3 -7,-3 -10,0l-21 19c-6,5 -14,5 -20,0l-20 -19c-3,-3 -8,-3 -11,0l-12 10c-10,10 -21,15 -7,29z"/>
+ <path class="fil1" d="M152 213l-7 0 0 9 7 0 0 26c6,0 11,-2 15,-6l55 -56 -34 0 0 -7 -9 0 0 7 -27 0 0 27z"/>
+ </g>
+ </g>
+ </g>
+</svg>
View
@@ -282,49 +282,54 @@ <h2 id="ImportAccHeader" class="noDisp">IMPORT ACCOUNT</h2>
<span class="jurl"></span>
<!-- APPLICATION TAB SELECTORS -->
- <section id="tabs" class="fFade noSelect">
- <div id="tabs-Iconset" class="centerIt">
-
- <input type="radio" name="tabs-Icons" id="tabs-Icons-wallet" class="tabs-radio" value="mBB-wallet" checked>
- <label for="tabs-Icons-wallet" class="fade">
- <img src="img/tabs-iconset-wallet.svg" class="fFade tooltip-3" alt="Wallet tab" title="<center><u>Wallet</u></center><br/>Area containing the main wallets."></img>
- </label>
-
- <input type="radio" name="tabs-Icons" id="tabs-Icons-portfolio" class="tabs-radio" value="mBB-portfolio">
- <label for="tabs-Icons-portfolio">
- <img src="img/tabs-iconset-portfolio.svg" class="fFade tooltip-3" alt="Portfolio tab" title="<center><u>Portfolio</u></center><br/>Display all your assets, both digital and physical<br/>as well as allowing transfers."></img>
- </label>
-
- <input type="radio" name="tabs-Icons" id="tabs-Icons-exchange" class="tabs-radio" value="mBB-exchange">
- <label for="tabs-Icons-exchange">
- <img src="img/tabs-iconset-exchange.svg" class="fFade tooltip-3" alt="Exchange tab" title="<center><u>Waves Decentralized Exchange</u></center><br/>Access to Waves' markets where you can<br/>conveniently buy, sell and trade tokens."></img>
- </label>
-
- <input type="radio" name="tabs-Icons" id="tabs-Icons-voting" class="tabs-radio" value="mBB-voting">
- <label for="tabs-Icons-voting">
- <img src="img/tabs-iconset-voting.svg" class="fFade tooltip-3" alt="Voting tab" title="<center><u>Voting Area</u></center><br/>Decentralized voting utility."></img>
- </label>
-
- <input type="radio" name="tabs-Icons" id="tabs-Icons-history" class="tabs-radio" value="mBB-history">
- <label for="tabs-Icons-history">
- <img src="img/tabs-iconset-history.svg" class="fFade tooltip-3" alt="History tab" title="<center><u>History</u></center><br/>Access all your transaction records."></img>
- </label>
-
- <input type="radio" name="tabs-Icons" id="tabs-Icons-messages" class="tabs-radio" value="mBB-messages">
- <label for="tabs-Icons-messages">
- <img src="img/tabs-iconset-messages.svg" class="fFade tooltip-3" alt="Messages tab" title="<center><u>Decentralized Messenger</u></center><br/>Allows private communication between Waves' users."></img>
- </label>
-
- <input type="radio" name="tabs-Icons" id="tabs-Icons-community" class="tabs-radio" value="mBB-community">
- <label for="tabs-Icons-community">
- <img src="img/tabs-iconset-community.svg" class="fFade tooltip-3" alt="Community tab" title="<center><u>Community tab</u></center><br/>Resources to learn more about Waves project such as <br/>forums, blogs, websites, etc."></img>
- </label>
-
- </div>
- </section>
+<section id="tabs" class="fFade noSelect">
+ <div id="tabs-Iconset" class="centerIt">
+
+ <input type="radio" name="tabs-Icons" id="tabs-Icons-wallet" class="tabs-radio" value="mBB-wallet" checked>
+ <label for="tabs-Icons-wallet" class="fade">
+ <img src="img/tabs-iconset-wallet.svg" class="fFade tooltip-3" alt="Wallet tab" title="<center><u>Wallet</u></center><br/>Area containing the main wallets."></img>
+ </label>
+
+ <input type="radio" name="tabs-Icons" id="tabs-Icons-portfolio" class="tabs-radio" value="mBB-portfolio">
+ <label for="tabs-Icons-portfolio">
+ <img src="img/tabs-iconset-portfolio.svg" class="fFade tooltip-3" alt="Portfolio tab" title="<center><u>Portfolio</u></center><br/>Display all your assets, both digital and physical<br/>as well as allowing transfers."></img>
+ </label>
+
+ <input type="radio" name="tabs-Icons" id="tabs-Icons-exchange" class="tabs-radio" value="mBB-exchange">
+ <label for="tabs-Icons-exchange">
+ <img src="img/tabs-iconset-exchange.svg" class="fFade tooltip-3" alt="Exchange tab" title="<center><u>Waves Decentralized Exchange</u></center><br/>Access to Waves' markets where you can<br/>conveniently buy, sell and trade tokens."></img>
+ </label>
+
+ <input type="radio" name="tabs-Icons" id="tabs-Icons-voting" class="tabs-radio" value="mBB-voting">
+ <label for="tabs-Icons-voting">
+ <img src="img/tabs-iconset-voting.svg" class="fFade tooltip-3" alt="Voting tab" title="<center><u>Voting Area</u></center><br/>Decentralized voting utility."></img>
+ </label>
+
+ <input type="radio" name="tabs-Icons" id="tabs-Icons-history" class="tabs-radio" value="mBB-history">
+ <label for="tabs-Icons-history">
+ <img src="img/tabs-iconset-history.svg" class="fFade tooltip-3" alt="History tab" title="<center><u>History</u></center><br/>Access all your transaction records."></img>
+ </label>
+
+ <input type="radio" name="tabs-Icons" id="tabs-Icons-tokens" class="tabs-radio" value="mBB-token">
+ <label for="tabs-Icons-tokens">
+ <img src="img/tabs-iconset-tokens.svg" class="fFade tooltip-3" alt="Tokens Creation tab" title="<center><u>Tokens Creation tab</u></center><br/>Area in which assets can be created."></img>
+ </label>
+
+ <input type="radio" name="tabs-Icons" id="tabs-Icons-messages" class="tabs-radio" value="mBB-messages">
+ <label for="tabs-Icons-messages">
+ <img src="img/tabs-iconset-messages.svg" class="fFade tooltip-3" alt="Messages tab" title="<center><u>Decentralized Messenger</u></center><br/>Allows private communication between Waves' users."></img>
+ </label>
+
+ <input type="radio" name="tabs-Icons" id="tabs-Icons-community" class="tabs-radio" value="mBB-community">
+ <label for="tabs-Icons-community">
+ <img src="img/tabs-iconset-community.svg" class="fFade tooltip-3" alt="Community tab" title="<center><u>Community tab</u></center><br/>Resources to learn more about Waves project such as <br/>forums, blogs, websites, etc."></img>
+ </label>
+
+ </div>
+</section>
<!-- MAIN APPLICATION BODY CONTENT -->
- <section id="mainBody">
+ <section id="mainBody" class="wScroll">
<!-- LEFT BAR CONTENTS -->
<!--
@@ -834,7 +839,23 @@ <h2 id="ImportAccHeader" class="noDisp">IMPORT ACCOUNT</h2>
</div>
<!-- / HISTORY TAB -->
-
+ <!-- TOKENS TAB -->
+ <div id="mBB-token" class="mBB-content">
+
+ <div class="phContent">
+ <h1>ASSET CREATION</h1>
+ <br/>
+ <p>The Asset Creation area is utilized to build custom Assets composed by Tokens. It is the first step in order to initialize a project in the platform.
+ <br/><br/>
+ The Asset Creation tab will start being operative in the fall of 2016, shortly after the Full Node code is released publicly or even at the same time.
+ </p>
+ <br/><br/>
+ <img src="img/tab_token_prev.svg" />
+ </div>
+
+ </div>
+ <!-- / TOKENS TAB -->
+
<!-- MESSAGES TAB -->
<div id="mBB-messages" class="mBB-content">
Oops, something went wrong.

0 comments on commit 19d138d

Please sign in to comment.