v1.0.1

css/main.css

@@ -117,6 +117,10 @@ button {
   letter-spacing: 0.06em;
 }
 
+.uppercase {
+  text-transform: uppercase;
+}
+
 .toggle {
   position: relative;
   cursor: pointer;
@@ -183,6 +187,19 @@ section .dark-background {
       grid-template-rows: auto 1fr;
 }
 
+ul[type='circle'] {
+  padding: 1.5rem 2.5rem;
+  list-style: circle;
+}
+
+ul[type='circle'] li {
+  margin-bottom: 1rem;
+}
+
+ul[type='circle'] li:last-of-type {
+  margin-bottom: 0;
+}
+
 ul {
   list-style: none;
 }
@@ -221,6 +238,7 @@ ul .balance:last-of-type {
 .card h4 {
   margin-bottom: 0.4rem;
   font-weight: 400;
+  text-transform: capitalize;
 }
 
 .label {
@@ -546,6 +564,10 @@ ul .balance:last-of-type {
   font-family: 'Montserrat', sans-serif;
 }
 
+#page_header h3 {
+  font-weight: 500;
+}
+
 .page {
   padding: 1.5rem 0;
 }
@@ -604,6 +626,7 @@ p {
       -ms-flex-align: center;
           align-items: center;
   font-size: 0.8rem;
+  margin-bottom: 0.5rem;
 }
 
 .status.done {
@@ -643,15 +666,7 @@ p {
   display: -webkit-box;
   display: -ms-flexbox;
   display: flex;
-}
+  overflow-x: auto;
-
-.tabs .line {
-  position: absolute;
-  height: 0.1rem;
-  background: rgba(var(--text), 0.8);
-  bottom: 0;
-  -webkit-transition: left 0.3s, width 0.3s;
-  transition: left 0.3s, width 0.3s;
 }
 
 .tabs .tab {
@@ -660,6 +675,9 @@ p {
   opacity: 0.6;
   padding-bottom: 0.5rem;
   margin-right: 1rem;
+  -webkit-tap-highlight-color: transparent;
+  white-space: nowrap;
+  border-bottom: transparent;
 }
 
 .tabs .tab:last-of-type {
@@ -668,6 +686,25 @@ p {
 
 .tabs .tab.active {
   opacity: 1;
+  border-bottom: 0.1em solid rgba(var(--text), 0.8);
+}
+
+.contract-choice {
+  margin-bottom: 2rem;
+}
+
+.contract-choice:last-of-type {
+  margin-bottom: 0;
+}
+
+.contract-choice h3 {
+  text-transform: capitalize;
+  font-weight: 400;
+  margin-bottom: 0.5rem;
+}
+
+#homepage {
+  margin: 0 1.5rem;
 }
 
 @media only screen and (min-width: 640px) {
@@ -677,6 +714,9 @@ p {
   .margin {
     margin: 0 6vw;
   }
+  #homepage {
+    margin: 0 4vw;
+  }
   .input {
     width: 80vw !important;
   }
@@ -725,6 +765,9 @@ p {
   .margin {
     margin: 0 16vw;
   }
+  #homepage {
+    margin: 0 8vw;
+  }
   .input {
     width: 50vw !important;
   }
@@ -765,6 +808,9 @@ p {
   .margin {
     margin: 0 26vw;
   }
+  #homepage {
+    margin: 0 12vw;
+  }
 }
 
 @media only screen and (min-width: 2048px) {
@@ -777,6 +823,9 @@ p {
   .margin {
     margin: 0 32vw;
   }
+  #homepage {
+    margin: 0 24vw;
+  }
   #first_section {
     min-height: auto;
   }

css/main.scss

@@ -80,6 +80,9 @@ button{
     overflow-wrap: break-word;
     letter-spacing: 0.06em;
 }
+.uppercase{
+    text-transform: uppercase;
+}
 .toggle{
     position: relative;
     cursor: pointer;
@@ -127,11 +130,23 @@ section{
     }
 }
 ul{
-    list-style: none;
+    &[type='circle']{
-    .balance{
+        padding: 1.5rem 2.5rem;
-        margin-bottom: 2rem;
+        list-style: circle;
-        &:last-of-type{
+        li{
-            margin-bottom: 0;
+            margin-bottom: 1rem;
+            &:last-of-type{
+                margin-bottom: 0;
+            }
+        }   
+    }
+    &{
+        list-style: none;
+        .balance{
+            margin-bottom: 2rem;
+            &:last-of-type{
+                margin-bottom: 0;
+            }
         }
     }
 }
@@ -155,6 +170,7 @@ ul{
     h4{
         margin-bottom: 0.4rem;
         font-weight: 400;
+        text-transform: capitalize;
     }
 }
 .label{
@@ -385,6 +401,9 @@ ul{
     padding: 1.5rem 0;
     align-items: center;
     font-family: 'Montserrat', sans-serif;
+    h3{
+        font-weight: 500;
+    }
 }
 .page{
     padding: 1.5rem 0;
@@ -431,6 +450,7 @@ p{
     display: inline-flex;
     align-items: center;
     font-size: 0.8rem;
+    margin-bottom: 0.5rem;
     &.done{
         background: #00C853;
         align-self: center;
@@ -461,27 +481,39 @@ p{
     position: relative;
     margin-top: 2rem;
     display: flex;
-    .line{
+    overflow-x: auto;
-        position: absolute;
-        height: 0.1rem;
-        background: rgba(var(--text), 0.8);
-        bottom: 0;
-        transition: left 0.3s, width 0.3s;
-    }
     .tab{
         cursor: pointer;
         font-family: 'Montserrat', sans-serif;
         opacity: 0.6;
         padding-bottom: 0.5rem;
         margin-right: 1rem;
+        -webkit-tap-highlight-color: transparent;
+        white-space: nowrap;
+        border-bottom: transparent;
         &:last-of-type{
             margin-right: 0;
         }
         &.active{
             opacity: 1;
+            border-bottom: 0.1em solid rgba(var(--text), 0.8);
         }
     }
 }
+.contract-choice{
+    margin-bottom: 2rem;
+    &:last-of-type{
+        margin-bottom: 0;
+    }
+    h3{
+        text-transform: capitalize;
+        font-weight: 400;
+        margin-bottom: 0.5rem;
+    }
+}
+#homepage{
+    margin: 0 1.5rem;
+}
 @media only screen and (min-width: 640px){
     .padding{
         padding: 0 6vw;
@@ -489,6 +521,9 @@ p{
     .margin{
         margin: 0 6vw;
     }
+    #homepage{
+        margin: 0 4vw;
+    }
     .input{
         width: 80vw !important;
     }
@@ -535,7 +570,9 @@ p{
     .margin{
        margin: 0 16vw;
     }
-
+    #homepage{
+        margin: 0 8vw;
+    }
     .input{
         width: 50vw !important;
     }
@@ -568,6 +605,9 @@ p{
     .margin{
         margin: 0 26vw;
     }
+    #homepage{
+        margin: 0 12vw;
+    }
 }
 @media only screen and (min-width: 2048px){
     body{
@@ -579,6 +619,9 @@ p{
     .margin{
         margin: 0 32vw;
     }
+    #homepage{
+        margin: 0 24vw;
+    }
     #first_section{
         min-height: auto;
     }

index.html

@@ -8,7 +8,7 @@
 </head>
 <body data-theme='dark'>
     <main>
-        <div id="homepage" class="page hide-completely margin">
+        <div id="homepage" class="page hide-completely">
             <section id="first_section">
                 <header class="header">
                     <div id="logo">
@@ -102,7 +102,7 @@
                     <title>Back Button</title>
                     <polyline points="32.15 0.35 0.7 31.8 32.15 63.72"/>
                 </svg>
-                <h3  id="page_title">Block</h3>
+                <h3 id="page_title">Block</h3>
                 <svg class="icon search margin-left-auto" viewBox="0 0 64 64">
                     <title>search icon</title>
                     <circle cx="25.34" cy="25.34" r="24.84"/>
@@ -208,7 +208,7 @@
                     <h4>2527</h4>
                 </div>
             </div>
-            <div id="token_page" class="page">
+            <div id="token_page" class="page hide-completely">
                   <h2>RMT</h2>
                   <div class="card">
                     <h5 class="label">Supply</h5>
@@ -238,6 +238,48 @@
                       </li>
                   </ul>
             </div> 
+            <div id="contract_page" class="page">
+                <div class="status closed">Closed</div>
+                <h2 class="uppercase">India ELections 2019</h2>
+                <div class="card">
+                    <h5 class="label">Contract Type</h5>
+                    <h4 class="breakable address">F6EMAHjivqrcrdAHNABq2R1FLNkx8xfEaT</h4>
+                    <h5 class="label">Expiration</h5>
+                    <h4>wed may 22 2019 21:00:00 gmt+05:30</h4>
+                    <h5 class="label">Token Used</h5>
+                    <h4>RMT</h4>
+                    <h5 class="label">Participation Amount</h5>
+                    <h4>0.001 RMT</h4>
+                </div>
+                <h3 class="heading">User Choices</h3>
+                <ul class="card" type='circle'>
+                    <li>Narendra Modi Wins</li>
+                    <li>Narendra Modi Loses</li>
+                </ul>
+                <div class="tabs">
+                    <h4 class="tab active" data-target="participant_container">Participants</h4>
+                    <h4 class="tab" data-target="winners_container">Winners</h4>
+                    <div class="line"></div>
+                </div>
+                <ul id="participant_container" data-tab-group="token" class="card">
+                    <li class="contract-choice" >
+                        <h5 class="breakable label">F6EMAHjivqrcrdAHNABq2R1FLNkx8xfEaT</h5>
+                        <h3>narendra modi wins</h3>
+                        <h4>0.0000023333 RMT</h4>
+                    </li>
+                    <li class="balance">
+                        <h5 class="breakable label">F6EMAHjivqrcrdAHNABq2R1FLNkx8xfEaT</h5>
+                        <h4>0.0000023333 RMT</h4>
+                    </li>
+                </ul>
+                <ul id="winners_container" data-tab-group="token" class="card hide-completely">
+                    <li class="contract-choice winner" >
+                        <h5 class="breakable label">F6EMAHjivqrcrdAHNABq2R1FLNkx8xfEaT</h5>
+                        <h3>narendra modi wins</h3>
+                        <h4>0.0000023333 RMT</h4>
+                    </li>
+                </ul>
+            </div>
         </div>        
     </main>
     <script>
@@ -331,6 +373,10 @@
                     showPage("block_page")
                     pageTitle.textContent = 'Block'
                 }
+                if(e.target.closest('.block')){
+                    showPage("contract_page")
+                    pageTitle.textContent = 'Contract  '
+                }
                 if(e.target.closest('.tab')){
                     showTab(e.target.closest('.tab'))
                 }
@@ -342,8 +388,7 @@
                 targetBody = document.getElementById(targetTab),
                 targetGroup = targetBody.getAttribute('data-tab-group'),
                 tabGroupMembers = document.querySelectorAll(`[data-tab-group = '${targetGroup}']`),
-                allTabs = tab.parentNode.querySelectorAll('.tab'),
+                allTabs = tab.parentNode.querySelectorAll('.tab')
-                line = tab.closest('.tabs').querySelector('.line')
             tabGroupMembers.forEach(member => {
                 member.classList.add('hide-completely')
             })
@@ -352,7 +397,6 @@
                 thisTab.classList.remove('active')
             })
             tab.classList.add('active')
-            line.setAttribute('style', `left: ${tab.offsetLeft}px; width: ${tab.getBoundingClientRect().width}px`);
         }
     </script>
 </body>