RanchiMall/floscout
3
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

v1.1.0

Browse Source
This commit is contained in:
sairaj mote 2020-05-14 11:46:54 +05:30
parent 3f8652a124
commit 07e146a0f5
4 changed files with 139 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

49
css/main.css
View File

@ -10,7 +10,7 @@
}
body {
--primary-color: purple;
--primary-color: #1E88E5;
--text: 17, 17, 17;
--text-light: 85, 85, 85;
--foreground: 255, 255, 255;
@ -183,6 +183,18 @@ section .dark-background {
grid-template-rows: auto 1fr;
}
ul {
list-style: none;
}
ul .balance {
margin-bottom: 2rem;
}
ul .balance:last-of-type {
margin-bottom: 0;
}
.padding {
padding: 0 1.5rem;
}
@ -538,7 +550,7 @@ section .dark-background {
padding: 1.5rem 0;
}
.page h2.heading {
.page h3.heading {
margin-top: 2rem;
font-family: 'Montserrat', sans-serif;
}
@ -625,6 +637,39 @@ p {
color: var(--primary-color);
}
.tabs {
position: relative;
margin-top: 2rem;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
}
.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 {
cursor: pointer;
font-family: 'Montserrat', sans-serif;
opacity: 0.6;
padding-bottom: 0.5rem;
margin-right: 1rem;
}
.tabs .tab:last-of-type {
margin-right: 0;
}
.tabs .tab.active {
opacity: 1;
}
@media only screen and (min-width: 640px) {
.padding {
padding: 0 6vw;

2
css/main.css.map
View File

File diff suppressed because one or more lines are too long

38
css/main.scss
View File

@ -8,7 +8,7 @@
font-family: 'Roboto', sans-serif;
}
body{
--primary-color: purple;
--primary-color: #1E88E5;
--text: 17, 17, 17;
--text-light: 85, 85, 85;
--foreground: 255, 255, 255;
@ -126,6 +126,15 @@ section{
grid-template-rows: auto 1fr;
}
}
ul{
list-style: none;
.balance{
margin-bottom: 2rem;
&:last-of-type{
margin-bottom: 0;
}
}
}
.padding{
padding: 0 1.5rem;
}
@ -379,7 +388,7 @@ section{
}
.page{
padding: 1.5rem 0;
h2.heading{
h3.heading{
margin-top: 2rem;
font-family: 'Montserrat', sans-serif;
}
@ -448,6 +457,31 @@ p{
cursor: pointer;
color: var(--primary-color);
}
.tabs{
position: relative;
margin-top: 2rem;
display: flex;
.line{
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;
&:last-of-type{
margin-right: 0;
}
&.active{
opacity: 1;
}
}
}
@media only screen and (min-width: 640px){
.padding{
padding: 0 6vw;

59
index.html
View File

@ -130,7 +130,7 @@
<h5 class="label">Nonce</h5>
<h4>29294481394</h4>
</div>
<h2 class="heading">Transactions</h2>
<h3 class="heading">Transactions</h3>
<div id="block_transaction_container" class="top-bottom-padding">
<div class="transaction">
<div class="transaction-header grid grid-2">
@ -170,12 +170,12 @@
<h2>1.0006</h2><h4>FLO</h4>
<p class="breakable">FDhQizsksSHs4dyJBeLqGcbyuEg163jhXi</p>
</div>
<h2 class="heading">Transactions</h2>
<h3 class="heading">Transactions</h3>
<div id="address_transaction_container" class="top-bottom-padding">
</div>
</div>
<div id="transaction_page" class="page">
<div id="transaction_page" class="page hide-completely">
<div class="grid grid-2">
<div>
<h5 class="label">Token Transfer</h5>
@ -208,7 +208,37 @@
<h4>2527</h4>
</div>
</div>
</div>
<div id="token_page" class="page">
<h2>RMT</h2>
<div class="card">
<h5 class="label">Supply</h5>
<h4>21,000,000</h4>
<h5 class="label">Incorporation Address</h5>
<h4 class="breakable">F6EMAHjivqrcrdAHNABq2R1FLNkx8xfEaT</h4>
</div>
<div class="tabs">
<h4 class="tab active" data-target="token_balance_container">Top Balances</h4>
<h4 class="tab" data-target="token_transaction_container">Top Transactions</h4>
<div class="line"></div>
</div>
<ul id="token_balance_container" data-tab-group="token" class="card">
<li class="balance" >
<h5 class="breakable label">F6EMAHjivqrcrdAHNABq2R1FLNkx8xfEaT</h5>
<h4>0.0000023333 RMT</h4>
</li>
<li class="balance">
<h5 class="breakable label">F6EMAHjivqrcrdAHNABq2R1FLNkx8xfEaT</h5>
<h4>0.0000023333 RMT</h4>
</li>
</ul>
<ul id="token_transaction_container" data-tab-group="token" class="card hide-completely">
<li class="balance" >
<h5 class="breakable label">F6EMAHjivqrcrdAHNABq2R1FLNkx8xfEaT</h5>
<h4>0.0000023333 RMT</h4>
</li>
</ul>
</div>
</div>
</main>
<script>
let themeToggler = document.getElementById('theme_toggle'),
@ -301,8 +331,29 @@
showPage("block_page")
pageTitle.textContent = 'Block'
}
if(e.target.closest('.tab')){
showTab(e.target.closest('.tab'))
}
})
})
function showTab(tab){
let targetTab = tab.getAttribute('data-target'),
targetBody = document.getElementById(targetTab),
targetGroup = targetBody.getAttribute('data-tab-group'),
tabGroupMembers = document.querySelectorAll(`[data-tab-group = '${targetGroup}']`),
allTabs = tab.parentNode.querySelectorAll('.tab'),
line = tab.closest('.tabs').querySelector('.line')
tabGroupMembers.forEach(member => {
member.classList.add('hide-completely')
})
targetBody.classList.remove('hide-completely')
allTabs.forEach(thisTab => {
thisTab.classList.remove('active')
})
tab.classList.add('active')
line.setAttribute('style', `left: ${tab.offsetLeft}px; width: ${tab.getBoundingClientRect().width}px`);
}
</script>
</body>
</html>