Skip to content

Commit

Permalink
Feat/inline style (#2)
Browse files Browse the repository at this point in the history
* doc: env example

* fix: Inline style
  • Loading branch information
alexandrglaznyov authored Aug 4, 2023
1 parent ee9eccb commit 0d9af0b
Show file tree
Hide file tree
Showing 9 changed files with 145 additions and 32 deletions.
2 changes: 1 addition & 1 deletion app/package-lock.json

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

115 changes: 115 additions & 0 deletions app/server/assets/style.css
Original file line number Diff line number Diff line change
Expand Up @@ -118,6 +118,121 @@ a:has(h1) {
align-items: center;
}

img {
width: 150px;
height: 150px;
border-radius: 50%;
margin: 50px
}

.contact-icon {
display: flex;
flex-direction: column;
flex: 1;
justify-content: flex-end;
}

.vertical-line {
border-right: 1px solid white;
margin-right: 16px;
margin-left: 16px
}

.horizontal-line {
border-bottom: 1px solid white;
margin-top: 16px;
margin-bottom: 16px
}

.restake-info {
display: flex;
flex: 1;
flex-direction: column;
justify-content: flex-end;
}

.flex-columns {
display: flex;
flex: 1;
justify-content: space-between;
align-items: center;
}

.flex-1 {
flex: 1;
}

.validator-info {
display: flex;
flex-direction: column;
flex: 1
}

.time-info {
margin: 0;
margin-top: 5px
}

.profile-button {
margin: 0;
width: 60%;
}

.footer-container {
margin-top: 200px;
display: flex;
flex-direction: column;
align-items: center;
}

.error-content {
display: flex;
flex-direction: column;
align-items: center;
}

.error-container {
display: flex;
flex-direction: column;
align-items: center;
}

.error-heading {
margin-top: 25px;
margin-bottom: 25px;
}

.error-message-container {
display: flex;
justify-content: space-around;
margin-bottom: 25px;
}

.error-gif-container {
display: flex;
flex-direction: column;
align-items: center;
}

.delegate-max-button {
width: 30%;
margin: 0;
margin-left: 3px
}

.button-container {
margin-top: 10px;
}

.restake-button {
border-color: red;
color: red
}

.bold-text {
font-weight: bold;
}

.inform-article {
display: flex;
margin: 0;
Expand Down
2 changes: 1 addition & 1 deletion app/server/views/404.pug
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
extends layout
block content
div(style='display: flex; flex-direction: column; align-items: center;')
div.error-content
<svg xmlns="http://www.w3.org/2000/svg" width="350" height="350" viewBox="0 0 24 20" stroke-width="2" stroke="currentColor" fill="" stroke-linecap="round" stroke-linejoin="round"> <path stroke="none" d="M0 0h24v24H0z" fill="none"/> <path d="M3 7v4a1 1 0 0 0 1 1h3" /> <path d="M7 7v10" /> <path d="M10 8v8a1 1 0 0 0 1 1h2a1 1 0 0 0 1 -1v-8a1 1 0 0 0 -1 -1h-2a1 1 0 0 0 -1 1z" /> <path d="M17 7v4a1 1 0 0 0 1 1h3" /> <path d="M21 7v10" /> </svg>
<iframe src="https://giphy.com/embed/Ju7l5y9osyymQ" width="480" height="360" frameBorder="0" class="giphy-embed" allowFullScreen></iframe><p><a href="https://giphy.com/gifs/rick-astley-Ju7l5y9osyymQ">via GIPHY</a></p>
p Page not found : (
Expand Down
9 changes: 4 additions & 5 deletions app/server/views/components/form-delegate.pug
Original file line number Diff line number Diff line change
Expand Up @@ -2,17 +2,16 @@ article( x-data=`delegation('${validatorAddress}')` class='slide-it')
form
h2 Delegate to #{validatorMetadata.moniker}
label(for="delegate") Amount to delegate $KYVE
div(style="display: flex; jastify-content: space-between;")
input(x-model.number='amount' id="delegate" name="delegate" style="margin: 0; width: 70%" type='number')
div.header-validator
input(x-model.number='amount' id="delegate" name="delegate" style='margin:0; width: 70%' type='number')
button(
role="button"
:disabled="$store.wallet.client ? false : true"
:data-tooltip="$store.wallet.client ? null : 'Need to connect wallet'"
style="width: 30%; margin: 0; margin-left: 3px"
class="secondary outline"
class="secondary outline delegate-max-button"
@click.prevent="amount = toHumamReadable($store.wallet.balance)") Max
small(x-text="'You will delegate: '+ formatNumber(amount)") You will delegate
div(style="margin-top: 10px").grid
div.button-container.grid
button(class="secondary" hx-get='/' id='back' hx-swap="outerHTML transition:true" hx-target='closest article' hx-push-url="true" ) Back
button(
@click.prevent="await delegate(amount)"
Expand Down
3 changes: 1 addition & 2 deletions app/server/views/components/form-restake.pug
Original file line number Diff line number Diff line change
Expand Up @@ -12,8 +12,7 @@ article(x-data="restake" class='slide-it')
:aria-busy="busyRevoke"
:disabled="!$store.wallet.restakeData.isAlive ? true : (busyRestake || busyRevoke)"
role="button"
class="outline"
style="border-color: red; color: red"
class="outline restake-button"
:data-tooltip="$store.wallet.restakeData.isAlive ? null : 'Restake doesn\\'t enabled for this validator'"
@click.prevent=`await revokeRestake("${grantAddress}")` ) Disable restake
button(
Expand Down
8 changes: 4 additions & 4 deletions app/server/views/error.pug
Original file line number Diff line number Diff line change
@@ -1,8 +1,8 @@
extends layout
block content
div(style='display: flex; flex-direction: column; align-items: center;')
h1(style='margin-top: 25px; margin-bottom: 25px') Internal Server Error
div(style='display: flex; justify-content: space-around; margin-bottom: 25px')
div(style='display: flex; flex-direction: column; align-items: center;')
div.error-container
h1.error-heading Internal Server Error
div.error-message-container
div.error-gif-container
<iframe src="https://giphy.com/embed/tNC2rod1uTrdC" width="480" height="360" frameBorder="0" class="giphy-embed" allowFullScreen></iframe><p><a href="https://giphy.com/gifs/futurama-bender-tNC2rod1uTrdC">via GIPHY</a></p>
a(role="button" class="outline" href="/") HOME PAGE
4 changes: 2 additions & 2 deletions app/server/views/layout.pug
Original file line number Diff line number Diff line change
Expand Up @@ -24,12 +24,12 @@ html(lang="en" data-theme="dark")
nav
ul: li
a(href='/')
h1(style='margin-bottom: 0') KYVE RESTAKE
h1 KYVE RESTAKE
span For protocol nodes
ul: li: button(x-transition x-data role="button" class="contrast outline" x-text='$store.wallet.text' @click=`$store.wallet.client ? $store.wallet.disconnect() : await $store.wallet.connect('${validatorAddress}')`) Connect Wallet
main
block content
footer(style="margin-top: 200px; display: flex; flex-direction: column; align-items: center;" )
footer.footer-container
small Made with ❤️ by #[a(href='https://mellifera.network') MELLIFERA]
div
small #[a(href='https://kyve-restake.mellifera.network') KyveRestake]. All open source #[a(href='https://github.com/mellifera-labs/kyve-restake') GitHub] <svg xmlns="http://www.w3.org/2000/svg" height="1em" viewBox="0 0 496 512"><!--! Font Awesome Free 6.4.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2023 Fonticons, Inc. --><path d="M165.9 397.4c0 2-2.3 3.6-5.2 3.6-3.3.3-5.6-1.3-5.6-3.6 0-2 2.3-3.6 5.2-3.6 3-.3 5.6 1.3 5.6 3.6zm-31.1-4.5c-.7 2 1.3 4.3 4.3 4.9 2.6 1 5.6 0 6.2-2s-1.3-4.3-4.3-5.2c-2.6-.7-5.5.3-6.2 2.3zm44.2-1.7c-2.9.7-4.9 2.6-4.6 4.9.3 2 2.9 3.3 5.9 2.6 2.9-.7 4.9-2.6 4.6-4.6-.3-1.9-3-3.2-5.9-2.9zM244.8 8C106.1 8 0 113.3 0 252c0 110.9 69.8 205.8 169.5 239.2 12.8 2.3 17.3-5.6 17.3-12.1 0-6.2-.3-40.4-.3-61.4 0 0-70 15-84.7-29.8 0 0-11.4-29.1-27.8-36.6 0 0-22.9-15.7 1.6-15.4 0 0 24.9 2 38.6 25.8 21.9 38.6 58.6 27.5 72.9 20.9 2.3-16 8.8-27.1 16-33.7-55.9-6.2-112.3-14.3-112.3-110.5 0-27.5 7.6-41.3 23.6-58.9-2.6-6.5-11.1-33.3 2.6-67.9 20.9-6.5 69 27 69 27 20-5.6 41.5-8.5 62.8-8.5s42.8 2.9 62.8 8.5c0 0 48.1-33.6 69-27 13.7 34.7 5.2 61.4 2.6 67.9 16 17.7 25.8 31.5 25.8 58.9 0 96.5-58.9 104.2-114.8 110.5 9.2 7.9 17 22.9 17 46.4 0 33.7-.3 75.4-.3 83.6 0 6.5 4.6 14.4 17.3 12.1C428.2 457.8 496 362.9 496 252 496 113.3 383.5 8 244.8 8zM97.2 352.9c-1.3 1-1 3.3.7 5.2 1.6 1.6 3.9 2.3 5.2 1 1.3-1 1-3.3-.7-5.2-1.6-1.6-3.9-2.3-5.2-1zm-10.8-8.1c-.7 1.3.3 2.9 2.3 3.9 1.6 1 3.6.7 4.3-.7.7-1.3-.3-2.9-2.3-3.9-2-.6-3.6-.3-4.3.7zm32.4 35.6c-1.6 1.3-1 4.3 1.3 6.2 2.3 2.3 5.2 2.6 6.5 1 1.3-1.3.7-4.3-1.3-6.2-2.2-2.3-5.2-2.6-6.5-1zm-11.4-14.7c-1.6 1-1.6 3.6 0 5.9 1.6 2.3 4.3 3.3 5.6 2.3 1.6-1.3 1.6-3.9 0-6.2-1.4-2.3-4-3.3-5.6-2z"/></svg>
Expand Down
32 changes: 16 additions & 16 deletions app/server/views/main.pug
Original file line number Diff line number Diff line change
Expand Up @@ -2,23 +2,23 @@ extends layout
block content
article.inform-article
div.icon
img(src=`${validatorImageURL}`, style='width: 150px; height: 150px; border-radius: 50%; margin: 50px' alt="Validator image")
div(style='display: flex; flex-direction: column; flex: 1; justify-content: flex-end;')
img(src=`${validatorImageURL}` alt="Validator image")
div.contact-icon
p.no-margin <svg xmlns="http://www.w3.org/2000/svg" height="1em" viewBox="0 0 576 512"><!--! Font Awesome Free 6.4.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2023 Fonticons, Inc. --><path d="M64 32C28.7 32 0 60.7 0 96V416c0 35.3 28.7 64 64 64H512c35.3 0 64-28.7 64-64V96c0-35.3-28.7-64-64-64H64zm80 256h64c44.2 0 80 35.8 80 80c0 8.8-7.2 16-16 16H80c-8.8 0-16-7.2-16-16c0-44.2 35.8-80 80-80zm-32-96a64 64 0 1 1 128 0 64 64 0 1 1 -128 0zm256-32H496c8.8 0 16 7.2 16 16s-7.2 16-16 16H368c-8.8 0-16-7.2-16-16s7.2-16 16-16zm0 64H496c8.8 0 16 7.2 16 16s-7.2 16-16 16H368c-8.8 0-16-7.2-16-16s7.2-16 16-16zm0 64H496c8.8 0 16 7.2 16 16s-7.2 16-16 16H368c-8.8 0-16-7.2-16-16s7.2-16 16-16z"/></svg> indentity: #{validatorMetadata.identity}
p.no-margin <svg xmlns="http://www.w3.org/2000/svg" height="1em" viewBox="0 0 512 512"><!--! Font Awesome Free 6.4.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2023 Fonticons, Inc. --><path d="M256 512A256 256 0 1 0 256 0a256 256 0 1 0 0 512zm50.7-186.9L162.4 380.6c-19.4 7.5-38.5-11.6-31-31l55.5-144.3c3.3-8.5 9.9-15.1 18.4-18.4l144.3-55.5c19.4-7.5 38.5 11.6 31 31L325.1 306.7c-3.2 8.5-9.9 15.1-18.4 18.4zM288 256a32 32 0 1 0 -64 0 32 32 0 1 0 64 0z"/></svg> website: #{validatorMetadata.website}
p.no-margin <svg xmlns="http://www.w3.org/2000/svg" height="1em" viewBox="0 0 512 512"><!--! Font Awesome Free 6.4.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2023 Fonticons, Inc. --><path d="M48 64C21.5 64 0 85.5 0 112c0 15.1 7.1 29.3 19.2 38.4L236.8 313.6c11.4 8.5 27 8.5 38.4 0L492.8 150.4c12.1-9.1 19.2-23.3 19.2-38.4c0-26.5-21.5-48-48-48H48zM0 176V384c0 35.3 28.7 64 64 64H448c35.3 0 64-28.7 64-64V176L294.4 339.2c-22.8 17.1-54 17.1-76.8 0L0 176z"/></svg> contact: #{validatorMetadata.security_contact}
p.no-margin <svg xmlns="http://www.w3.org/2000/svg" height="1em" viewBox="0 0 576 512"><!--! Font Awesome Free 6.4.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2023 Fonticons, Inc. --><path d="M64 64C28.7 64 0 92.7 0 128v64c0 8.8 7.4 15.7 15.7 18.6C34.5 217.1 48 235 48 256s-13.5 38.9-32.3 45.4C7.4 304.3 0 311.2 0 320v64c0 35.3 28.7 64 64 64H512c35.3 0 64-28.7 64-64V320c0-8.8-7.4-15.7-15.7-18.6C541.5 294.9 528 277 528 256s13.5-38.9 32.3-45.4c8.3-2.9 15.7-9.8 15.7-18.6V128c0-35.3-28.7-64-64-64H64zm64 112l0 160c0 8.8 7.2 16 16 16H432c8.8 0 16-7.2 16-16V176c0-8.8-7.2-16-16-16H144c-8.8 0-16 7.2-16 16zM96 160c0-17.7 14.3-32 32-32H448c17.7 0 32 14.3 32 32V352c0 17.7-14.3 32-32 32H128c-17.7 0-32-14.3-32-32V160z"/></svg> commission: #{commission} %
div(style='border-right: 1px solid white; margin-right: 16px; margin-left: 16px')
div(style='display: flex; flex-direction: column; flex: 1')
div.vertical-line
div.validator-info
div.header-validator
div(style='flex: 1;')
div.flex-1
h2 #{validatorMetadata.moniker}
a(href=`https://app.kyve.network/#/validators/${validatorAddress}` role="button" class="outline" style='margin: 0; width: 60%;') Full profile
div(style='display: flex; flex: 1; flex-direction: column; justify-content: flex-end;')
p(style="margin: 0; margin-top: 5px") Restake every: #{restakeEvery}
p(style="margin: 0; margin-top: 5px") Last restake: #{lastRestake}
div(style='border-bottom: 1px solid white; margin-top: 16px; margin-bottom: 16px')
div(style='display: flex; flex: 1; justify-content: space-between; align-items: center;')
a(href=`https://app.kyve.network/#/validators/${validatorAddress}` role="button" class="outline profile-button") Full profile
div.restake-info
p.time-info Restake every: #{restakeEvery}
p.time-info Last restake: #{lastRestake}
div.horizontal-line
div.flex-columns
div.col-2
p Total stake $KYVE
p.no-margin #{total_delegation}
Expand All @@ -28,8 +28,8 @@ block content
div.col-2
p Delegators count
p.no-margin #{delegator_count}
div(style='border-bottom: 1px solid white; margin-top: 16px; margin-bottom: 16px')
div(style='display: flex; flex: 1; justify-content: space-between;')
div.horizontal-line
div.flex-columns
div.col-2
p My restake
div.no-margin(x-data)
Expand All @@ -40,7 +40,7 @@ block content
x-transition:leave.duration.400ms)
span(
:style="{ color: $store.wallet.restakeData.isAlive ? 'var(--ins-color)': null }"
style="font-weight: bold;"
bold-text
x-text='$store.wallet.client ? $store.wallet.restakeData.isAlive ? "Enabled" : "Disabled" : ""') &nbsp;
span(
x-text="$store.wallet.restakeExpireAfter().message ?? ''"
Expand All @@ -53,7 +53,7 @@ block content
x-transition
data-tooltip='Please, connect wallet'): <svg xmlns="http://www.w3.org/2000/svg" height="1em" viewBox="0 0 512 512"><!--! Font Awesome Free 6.4.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2023 Fonticons, Inc. --><path d="M256 512A256 256 0 1 0 256 0a256 256 0 1 0 0 512zM169.8 165.3c7.9-22.3 29.1-37.3 52.8-37.3h58.3c34.9 0 63.1 28.3 63.1 63.1c0 22.6-12.1 43.5-31.7 54.8L280 264.4c-.2 13-10.9 23.6-24 23.6c-13.3 0-24-10.7-24-24V250.5c0-8.6 4.6-16.5 12.1-20.8l44.3-25.4c4.7-2.7 7.6-7.7 7.6-13.1c0-8.4-6.8-15.1-15.1-15.1H222.6c-3.4 0-6.4 2.1-7.5 5.3l-.4 1.2c-4.4 12.5-18.2 19-30.6 14.6s-19-18.2-14.6-30.6l.4-1.2zM224 352a32 32 0 1 1 64 0 32 32 0 1 1 -64 0z"/></svg>
span(
style="font-weight: bold;"
bold-text
x-show='$store.wallet.balance'
x-transition:enter.duration.500ms
x-transition:leave.duration.400ms
Expand All @@ -63,7 +63,7 @@ block content
p.no-margin(x-data)
em(x-show='$store.wallet.delegated === null' x-transition data-tooltip='Please, connect wallet'): <svg xmlns="http://www.w3.org/2000/svg" height="1em" viewBox="0 0 512 512"><!--! Font Awesome Free 6.4.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2023 Fonticons, Inc. --><path d="M256 512A256 256 0 1 0 256 0a256 256 0 1 0 0 512zM169.8 165.3c7.9-22.3 29.1-37.3 52.8-37.3h58.3c34.9 0 63.1 28.3 63.1 63.1c0 22.6-12.1 43.5-31.7 54.8L280 264.4c-.2 13-10.9 23.6-24 23.6c-13.3 0-24-10.7-24-24V250.5c0-8.6 4.6-16.5 12.1-20.8l44.3-25.4c4.7-2.7 7.6-7.7 7.6-13.1c0-8.4-6.8-15.1-15.1-15.1H222.6c-3.4 0-6.4 2.1-7.5 5.3l-.4 1.2c-4.4 12.5-18.2 19-30.6 14.6s-19-18.2-14.6-30.6l.4-1.2zM224 352a32 32 0 1 1 64 0 32 32 0 1 1 -64 0z"/></svg>
span(
style="font-weight: bold;"
bold-text
x-show="$store.wallet.delegated !== null"
x-transition:enter.duration.500ms
x-transition:leave.duration.400ms
Expand Down
2 changes: 1 addition & 1 deletion client/package-lock.json

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

0 comments on commit 0d9af0b

Please sign in to comment.