From 19d138d530c7b7993fab29a0ad2f512d8c21319b Mon Sep 17 00:00:00 2001 From: supereth Date: Tue, 16 Aug 2016 14:12:15 +0800 Subject: [PATCH] feat(#mBB-token): Created new tab for Custom Tokens, added custom scrollbar ++ - 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. --- css/style.css | 69 ++++++++++++++++++++++-- img/tab_token_prev.svg | 72 +++++++++++++++++++++++++ img/tabs-iconset-tokens.svg | 26 +++++++++ index.html | 105 +++++++++++++++++++++--------------- js/style.js | 67 +++++++++-------------- 5 files changed, 251 insertions(+), 88 deletions(-) create mode 100644 img/tab_token_prev.svg create mode 100644 img/tabs-iconset-tokens.svg diff --git a/css/style.css b/css/style.css index b6e39bf9fe..07ae77bf31 100644 --- a/css/style.css +++ b/css/style.css @@ -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; diff --git a/img/tab_token_prev.svg b/img/tab_token_prev.svg new file mode 100644 index 0000000000..33dbb01cbb --- /dev/null +++ b/img/tab_token_prev.svg @@ -0,0 +1,72 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/img/tabs-iconset-tokens.svg b/img/tabs-iconset-tokens.svg new file mode 100644 index 0000000000..bc1cf11338 --- /dev/null +++ b/img/tabs-iconset-tokens.svg @@ -0,0 +1,26 @@ + + + + + + + + + + + + + + + + + + + diff --git a/index.html b/index.html index f1493b6021..161f70459a 100644 --- a/index.html +++ b/index.html @@ -282,49 +282,54 @@

ACCOUNT INFO BACKUP

-
-
- - - - - - - - - - - - - - - - - - - - - - -
-
+
+
+ + + + + + + + + + + + + + + + + + + + + + + + + +
+
-
+
- + +
+ +
+

ASSET CREATION

+
+

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. +

+ 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. +

+

+ +
+ +
+ +
diff --git a/js/style.js b/js/style.js index 8f6fcfce08..83c3abc703 100644 --- a/js/style.js +++ b/js/style.js @@ -45,26 +45,26 @@ var $wrapW = $('#wrapper').width(), // GUI elements dynamic sizing and LeftBar visibility -$(window).on("load resize", function(e){ - - var $wrapH = $('#wrapper').height(), +$(window).on("load resize", function (e) { + + var $wrapH = $('#wrapper').height(), $headerH = $('header').height(), $tabsH = $('#tabs').height(), $jurlH = $('.jurl').height(), $mainBodyH = $wrapH - $headerH - $tabsH - $jurlH, - $lb = $('#mBLeftBar'), + $lb = $('#mBLeftBar'), $lbW = $('#mBLeftBar').width(), - $mbBodyW = $wrapW - $lbW; - - $('#mainBody').css('height', $mainBodyH); - $('#mBLeftBar').css('height', $mainBodyH); - $('#mBBody').css('width', $mbBodyW); + $mbBodyW = $wrapW - $lbW; + + $('#mainBody').css('height', $mainBodyH); + $('#mBLeftBar').css('height', $mainBodyH); + $('#mBBody').css('width', $mbBodyW); //$('.mBB-content').css('height', ($mainBodyH - 50)).css('max-height', $mainBodyH - 50); - + // LeftBarVis(); // Temporary due to LeftBarVis function not being used //$('#mBB-wallet').css('text-align', 'center'); - + }); @@ -75,14 +75,10 @@ $(window).on("load resize", function(e){ // Fee styling on .paymentForm -$(window).ready(function(){ - - $(".paymentForm tr td:contains('Fee')").each(function(){ - - $(this).parent().addClass( "paymentFormFee" ); - - }); - +$(window).ready(function () { + $(".paymentForm tr td:contains('Fee')").each(function () { + $(this).parent().addClass("paymentFormFee"); + }); }); @@ -91,42 +87,27 @@ $('#mBB-community').height($mbBodyH); // LOADER -$(document).ready(function(){ - +$(document).ready(function () { NProgress.start(); - }); -function executeDoneFirst (callback) { - +function executeDoneFirst(callback) { NProgress.done(); callback(); - } -$(window).load(function() { - +$(window).load(function () { var $eThing = $('#bg-spin'); - - - Waves.apiRequest(Waves.api.blocks.last, function(response) { - - - if(!response.errorCode) { - - executeDoneFirst(function () { - $eThing.delay(1000).fadeOut(); - }); - + Waves.apiRequest(Waves.api.blocks.last, function (response) { + if (!response.errorCode) { + executeDoneFirst(function () { + $eThing.delay(1000).fadeOut(); + }); } else { - - $("#networkCheck").html('Failed connecting to Waves'); - + $("#networkCheck").html('Failed connecting to Waves'); } - }); - });