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.
wavesplatform · Aug 16, 2016 · 19d138d · 19d138d
1 parent 88971f8
commit 19d138d
Show file tree

Hide file tree

Showing 5 changed files with 251 additions and 88 deletions.
diff --git 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
diff --git a/img/tabs-iconset-tokens.svg b/img/tabs-iconset-tokens.svg
diff --git a/index.html b/index.html
@@ -282,49 +282,54 @@ <h2>ACCOUNT INFO BACKUP</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 @@ <h1>DECENTRALIZED VOTING</h1>
             </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">