Skip to content

Commit 19d138d

Browse files
superethsupereth
committed
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.
1 parent 88971f8 commit 19d138d

File tree

5 files changed

+251
-88
lines changed

5 files changed

+251
-88
lines changed

‎css/style.css‎

Lines changed: 66 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -131,6 +131,22 @@ body {
131131
font-weight: 600;
132132
}
133133

134+
/* Custom Scrollbar */
135+
136+
.wScroll::-webkit-scrollbar-track {
137+
-webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
138+
background-color: #F5F5F5;
139+
}
140+
.wScroll::-webkit-scrollbar {
141+
width: 10px;
142+
background-color: #F5F5F5;
143+
}
144+
.wScroll::-webkit-scrollbar-thumb {
145+
background-color: #37556E;
146+
border: 1px solid #555555;
147+
border-radius: 4px;
148+
}
149+
134150
/* ======================================================================= */
135151

136152

@@ -539,10 +555,16 @@ header {
539555
z-index: 100;
540556
}
541557
#tabs-Iconset {
558+
display: -webkit-box;
559+
display: -ms-flexbox;
542560
display: flex;
543561
height: 90%;
544562
width: 92.5%;
563+
-webkit-box-pack: center;
564+
-ms-flex-pack: center;
545565
justify-content: center;
566+
-webkit-box-align: center;
567+
-ms-flex-align: center;
546568
align-items: center;
547569
}
548570
#tabs-Iconset label {
@@ -613,7 +635,10 @@ input.tabs-radio:checked + label img {
613635
/* padding-bottom: 1rem;*/
614636
}
615637
#mBBody {
638+
display: -webkit-box;
639+
display: -ms-flexbox;
616640
display: flex;
641+
-ms-flex-line-pack: center;
617642
align-content: center;
618643
position: relative;
619644
width: 100% !important;
@@ -624,6 +649,7 @@ input.tabs-radio:checked + label img {
624649
#mBB-exchange,
625650
#mBB-voting,
626651
#mBB-history,
652+
#mBB-token,
627653
#mBB-messages,
628654
#mBB-community {
629655
display: none;
@@ -644,19 +670,30 @@ input.tabs-radio:checked + label img {
644670

645671
#mBB-wallet {
646672
width: 100%;
673+
display: -webkit-box;
674+
display: -ms-flexbox;
647675
display: flex;
676+
-ms-flex-wrap: wrap;
648677
flex-wrap: wrap;
649678
}
650679
.flex-container {
680+
display: -webkit-box;
681+
display: -ms-flexbox;
651682
display: flex;
652683
width: 100%;
653684
height: auto;
685+
-webkit-box-pack: center;
686+
-ms-flex-pack: center;
654687
justify-content: center;
688+
-ms-flex-line-pack: center;
655689
align-content: center;
690+
-ms-flex-wrap: wrap;
656691
flex-wrap: wrap;
657692
}
658693
.walletBox {
659694
position: relative;
695+
-webkit-box-flex: 1;
696+
-ms-flex: 1;
660697
flex: 1;
661698
/* display: inline-block;*/
662699
min-width: 300px;
@@ -1179,6 +1216,10 @@ input.tabs-radio:checked + label img {
11791216
#portfolio {
11801217
padding-bottom: 1rem;
11811218
}
1219+
#mBB-portfolio {
1220+
width: 100%;
1221+
text-align: center;
1222+
}
11821223
#portfolio h2 {
11831224
background-color: #ffffff;
11841225
border: 0px solid #F0F0F0;
@@ -1218,11 +1259,9 @@ input.tabs-radio:checked + label img {
12181259
/* HISTORY TAB */
12191260

12201261
#mBB-history {
1262+
width: 100%;
12211263
text-align: center;
12221264
}
1223-
#wHistory {
1224-
width: 97vw;
1225-
}
12261265
#mBB-history .wavesTable {
12271266
/* border: 1px solid red;*/
12281267
}
@@ -1244,6 +1283,26 @@ input.tabs-radio:checked + label img {
12441283
/* ======================================================================= */
12451284

12461285

1286+
/* EXCHANGE TAB */
1287+
1288+
#mBB-exchange {
1289+
width: 100%;
1290+
text-align: center;
1291+
}
1292+
1293+
/* ======================================================================= */
1294+
1295+
1296+
/* TOKENS TAB */
1297+
1298+
#mBB-token {
1299+
width: 100%;
1300+
text-align: center;
1301+
}
1302+
1303+
/* ======================================================================= */
1304+
1305+
12471306
/* MESSENGER TAB */
12481307

12491308
#mBB-messages-add {
@@ -1301,6 +1360,10 @@ input.tabs-radio:checked + label img {
13011360

13021361
/* COMMUNITY TAB */
13031362

1363+
#mBB-community {
1364+
width: 100%;
1365+
text-align: center;
1366+
}
13041367
#mBB-community h2 {
13051368
text-align: center;
13061369
font-size: 1.25rem;

‎img/tab_token_prev.svg‎

Lines changed: 72 additions & 0 deletions
Loading

‎img/tabs-iconset-tokens.svg‎

Lines changed: 26 additions & 0 deletions
Loading

‎index.html‎

Lines changed: 63 additions & 42 deletions
Original file line numberDiff line numberDiff line change
@@ -282,49 +282,54 @@ <h2>ACCOUNT INFO BACKUP</h2>
282282
<span class="jurl"></span>
283283

284284
<!-- APPLICATION TAB SELECTORS -->
285-
<section id="tabs" class="fFade noSelect">
286-
<div id="tabs-Iconset" class="centerIt">
287-
288-
<input type="radio" name="tabs-Icons" id="tabs-Icons-wallet" class="tabs-radio" value="mBB-wallet" checked>
289-
<label for="tabs-Icons-wallet" class="fade">
290-
<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>
291-
</label>
292-
293-
<input type="radio" name="tabs-Icons" id="tabs-Icons-portfolio" class="tabs-radio" value="mBB-portfolio">
294-
<label for="tabs-Icons-portfolio">
295-
<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>
296-
</label>
297-
298-
<input type="radio" name="tabs-Icons" id="tabs-Icons-exchange" class="tabs-radio" value="mBB-exchange">
299-
<label for="tabs-Icons-exchange">
300-
<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>
301-
</label>
302-
303-
<input type="radio" name="tabs-Icons" id="tabs-Icons-voting" class="tabs-radio" value="mBB-voting">
304-
<label for="tabs-Icons-voting">
305-
<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>
306-
</label>
307-
308-
<input type="radio" name="tabs-Icons" id="tabs-Icons-history" class="tabs-radio" value="mBB-history">
309-
<label for="tabs-Icons-history">
310-
<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>
311-
</label>
312-
313-
<input type="radio" name="tabs-Icons" id="tabs-Icons-messages" class="tabs-radio" value="mBB-messages">
314-
<label for="tabs-Icons-messages">
315-
<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>
316-
</label>
317-
318-
<input type="radio" name="tabs-Icons" id="tabs-Icons-community" class="tabs-radio" value="mBB-community">
319-
<label for="tabs-Icons-community">
320-
<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>
321-
</label>
322-
323-
</div>
324-
</section>
285+
<section id="tabs" class="fFade noSelect">
286+
<div id="tabs-Iconset" class="centerIt">
287+
288+
<input type="radio" name="tabs-Icons" id="tabs-Icons-wallet" class="tabs-radio" value="mBB-wallet" checked>
289+
<label for="tabs-Icons-wallet" class="fade">
290+
<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>
291+
</label>
292+
293+
<input type="radio" name="tabs-Icons" id="tabs-Icons-portfolio" class="tabs-radio" value="mBB-portfolio">
294+
<label for="tabs-Icons-portfolio">
295+
<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>
296+
</label>
297+
298+
<input type="radio" name="tabs-Icons" id="tabs-Icons-exchange" class="tabs-radio" value="mBB-exchange">
299+
<label for="tabs-Icons-exchange">
300+
<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>
301+
</label>
302+
303+
<input type="radio" name="tabs-Icons" id="tabs-Icons-voting" class="tabs-radio" value="mBB-voting">
304+
<label for="tabs-Icons-voting">
305+
<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>
306+
</label>
307+
308+
<input type="radio" name="tabs-Icons" id="tabs-Icons-history" class="tabs-radio" value="mBB-history">
309+
<label for="tabs-Icons-history">
310+
<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>
311+
</label>
312+
313+
<input type="radio" name="tabs-Icons" id="tabs-Icons-tokens" class="tabs-radio" value="mBB-token">
314+
<label for="tabs-Icons-tokens">
315+
<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>
316+
</label>
317+
318+
<input type="radio" name="tabs-Icons" id="tabs-Icons-messages" class="tabs-radio" value="mBB-messages">
319+
<label for="tabs-Icons-messages">
320+
<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>
321+
</label>
322+
323+
<input type="radio" name="tabs-Icons" id="tabs-Icons-community" class="tabs-radio" value="mBB-community">
324+
<label for="tabs-Icons-community">
325+
<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>
326+
</label>
327+
328+
</div>
329+
</section>
325330

326331
<!-- MAIN APPLICATION BODY CONTENT -->
327-
<section id="mainBody">
332+
<section id="mainBody" class="wScroll">
328333

329334
<!-- LEFT BAR CONTENTS -->
330335
<!--
@@ -834,7 +839,23 @@ <h1>DECENTRALIZED VOTING</h1>
834839
</div>
835840
<!-- / HISTORY TAB -->
836841

837-
842+
<!-- TOKENS TAB -->
843+
<div id="mBB-token" class="mBB-content">
844+
845+
<div class="phContent">
846+
<h1>ASSET CREATION</h1>
847+
<br/>
848+
<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.
849+
<br/><br/>
850+
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.
851+
</p>
852+
<br/><br/>
853+
<img src="img/tab_token_prev.svg" />
854+
</div>
855+
856+
</div>
857+
<!-- / TOKENS TAB -->
858+
838859
<!-- MESSAGES TAB -->
839860
<div id="mBB-messages" class="mBB-content">
840861

0 commit comments

Comments
 (0)