tornadocash/tornado-initiation-ui
1
0
Fork 0
mirror of https://github.com/tornadocash/tornado-initiation-ui.git synced 2025-01-23 16:53:35 +01:00
Code Issues Packages Projects Releases Wiki Activity

update header

Browse Source 
scroll top steps
This commit is contained in:
Danil Kovtonyuk 2020-10-13 17:49:08 +10:00
parent 66be351cfe
commit c20d518413
10 changed files with 122 additions and 13 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
assets/styles/app.scss
View File

@ -3,9 +3,8 @@
flex-direction: column;
min-height: 100vh;
@media print {
background: none;
}
background: linear-gradient(180deg, #181818 0%, #000000 100%);
background-attachment: fixed;
> .main-content {
flex: 1;
@ -19,11 +18,6 @@
@import 'components/step';
@import 'components/header';
html {
background: linear-gradient(180deg, #181818 0%, #000000 100%);
background-attachment: fixed;
}
.title {
span {
color: $primary;

5
assets/styles/components/_base.scss
View File

@ -1,3 +1,8 @@
$control-height: 2.438rem;
$control-border-width: 1px;
$control-padding-vertical: calc(0.375rem - #{$control-border-width});
$control-padding-horizontal: calc(1.063rem - #{$control-border-width});
$primary: #44F1A6;
$primary-invert: #000000;

4
assets/styles/components/_button.scss
View File

@ -25,11 +25,11 @@
.icon {
&:first-child:not(:last-child) {
margin-left: -0.25em;
margin-left: -0.15em;
margin-right: 0.5em; }
&:last-child:not(:first-child) {
margin-left: 0.5em;
margin-right: -0.25em; }
margin-right: -0.15em; }
&:first-child:last-child {
margin-left: 0;
margin-right: 0; }

4
assets/styles/components/_header.scss
View File

@ -23,4 +23,8 @@
.logo {
height: 40px;
}
.navbar-item {
font-size: 0.875rem
}
}

8
assets/styles/components/_icons.scss
View File

@ -18,4 +18,12 @@
&-check {
mask-image: url('../images/icons/check.svg');
}
&-wallet {
mask-image: url("data:image/svg+xml,%3Csvg width='18' height='18' viewBox='0 0 18 18' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M11 10C10.4477 10 10 10.4477 10 11C10 11.5523 10.4477 12 11 12H13C13.5523 12 14 11.5523 14 11C14 10.4477 13.5523 10 13 10H11Z' fill='%230E1633'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M4 0C1.79083 0 0 1.79086 0 4V14C0 16.2091 1.79083 18 4 18H14C16.2092 18 18 16.2091 18 14V8C18 5.79086 16.2092 4 14 4H12C12 1.79086 10.2092 0 8 0H4ZM2 6V14C2 15.1046 2.89545 16 4 16H14C15.1046 16 16 15.1046 16 14V8C16 6.89543 15.1046 6 14 6H2ZM2 4C2 2.89543 2.89545 2 4 2H8C9.10455 2 10 2.89543 10 4H2Z' fill='%230E1633'/%3E%3C/svg%3E");
}
&-logout {
mask-image: url("data:image/svg+xml,%3Csvg width='19' height='18' viewBox='0 0 19 18' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M4 0C1.79083 0 0 1.79086 0 4V14C0 16.2091 1.79083 18 4 18H10C10.5523 18 11 17.5523 11 17C11 16.4477 10.5523 16 10 16H4C2.89545 16 2 15.1046 2 14V4C2 2.89543 2.89545 2 4 2H10C10.5523 2 11 1.55228 11 1C11 0.447716 10.5523 0 10 0H4Z' fill='%230E1633'/%3E%3Cpath d='M15.1213 5.70708C14.7308 5.31655 14.0976 5.31655 13.7071 5.70708C13.3165 6.0976 13.3165 6.73077 13.7071 7.12129L14.5858 7.99997H6C5.44769 7.99997 5 8.44769 5 8.99997C5 9.55225 5.44769 9.99997 6 9.99997H14.6406L13.707 10.9336C13.3165 11.3241 13.3165 11.9571 13.707 12.3476C14.0975 12.7381 14.7306 12.7381 15.1211 12.3476L17.7148 9.75388C17.9575 9.51125 18.0494 9.17508 17.9905 8.86153C17.9597 8.63882 17.8555 8.43955 17.7031 8.28889L15.1213 5.70708Z' fill='%230E1633'/%3E%3C/svg%3E%0A");
}
}

9
assets/styles/components/_step.scss
View File

@ -1,3 +1,7 @@
.steps {
padding-top: 1.25rem;
}
.step {
margin: 1.25rem 0;
background: #1F1F1F;
@ -7,6 +11,11 @@
align-items: center;
overflow: hidden;
&:first-child {
margin-top: 0;
}
.diamond {
margin-right: 1.25rem;
}

34
components/Navbar.vue
View File

@ -5,6 +5,31 @@
<Logo />
</b-navbar-item>
</template>
<template slot="start">
<b-navbar-item>Info</b-navbar-item>
</template>
<template slot="end">
<b-navbar-item tag="div">
<div class="buttons">
<b-button
v-if="isLoggedIn"
type="is-primary"
outlined
icon-left="logout"
@click="onLogOut"
>Logout</b-button
>
<b-button
v-else
type="is-primary"
outlined
icon-left="wallet"
@click="onLogIn"
>Connect</b-button
>
</div>
</b-navbar-item>
</template>
</b-navbar>
</template>
@ -15,5 +40,14 @@ export default {
components: {
Logo,
},
data() {
return {
isLoggedIn: false,
}
},
methods: {
onLogIn() {},
onLogOut() {},
},
}
</script>

2
components/Step.vue
View File

@ -1,6 +1,6 @@
<template>
<div class="step">
<diamond :active="data.deployAddress" />
<diamond :active="!!data.deployAddress" />
<div class="step-body">
<h4>{{ data.title }}</h4>
<div v-if="data.deployAddress" class="deployed">

36
components/Steps.vue
View File

@ -20,6 +20,42 @@ export default {
'Nor again is there anyone who loves or pursues or desires to obtain',
deployAddress: '0xf7a526d8642f6c6cb98bcda9919209d3c1ce359e',
},
{ title: 'But I must explain to you how all this mistaken idea' },
{
title:
'Nor again is there anyone who loves or pursues or desires to obtain',
deployAddress: '0xf7a526d8642f6c6cb98bcda9919209d3c1ce359e',
},
{ title: 'But I must explain to you how all this mistaken idea' },
{
title:
'Nor again is there anyone who loves or pursues or desires to obtain',
deployAddress: '0xf7a526d8642f6c6cb98bcda9919209d3c1ce359e',
},
{ title: 'But I must explain to you how all this mistaken idea' },
{
title:
'Nor again is there anyone who loves or pursues or desires to obtain',
deployAddress: '0xf7a526d8642f6c6cb98bcda9919209d3c1ce359e',
},
{ title: 'But I must explain to you how all this mistaken idea' },
{
title:
'Nor again is there anyone who loves or pursues or desires to obtain',
deployAddress: '0xf7a526d8642f6c6cb98bcda9919209d3c1ce359e',
},
{ title: 'But I must explain to you how all this mistaken idea' },
{
title:
'Nor again is there anyone who loves or pursues or desires to obtain',
deployAddress: '0xf7a526d8642f6c6cb98bcda9919209d3c1ce359e',
},
{ title: 'But I must explain to you how all this mistaken idea' },
{
title:
'Nor again is there anyone who loves or pursues or desires to obtain',
deployAddress: '0xf7a526d8642f6c6cb98bcda9919209d3c1ce359e',
},
],
}
},

23
pages/index.vue
View File

@ -7,14 +7,21 @@
</h2>
<div class="buttons is-centered">
<b-button type="is-primary" outlined icon-left="tool">Start now</b-button>
<b-button
type="is-primary"
outlined
icon-left="tool"
@mousedown="(e) => e.preventDefault()"
@click="onStart"
>Start now</b-button
>
</div>
<h3 class="title is-14px mt-6">Completed Tasks: <span>5/16</span></h3>
<div class="tornado-discoverer image is-16by9"></div>
<steps />
<steps ref="steps" />
</div>
</template>
@ -25,5 +32,17 @@ export default {
components: {
Steps,
},
methods: {
scrollTo(element) {
window.scrollTo({
behavior: 'smooth',
left: 0,
top: element.getBoundingClientRect().top,
})
},
onStart() {
this.scrollTo(this.$refs.steps.$el)
},
},
}
</script>