Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Ana/add back to validators button #3362

Merged
merged 4 commits into from
Jan 8, 2020
Merged

Ana/add back to validators button #3362

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
ae0acc0
add back to validators button
Bitcoinera Dec 30, 2019
ec50eb6
changelog
Bitcoinera Dec 30, 2019
dff3038
apply designs to button
Bitcoinera Jan 8, 2020
71a35c4
button improvements
Bitcoinera Jan 8, 2020
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions changes/ana_add-go-back-to-validators-button
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
[Added] [#3362](https://github.com/cosmos/lunie/pull/3362) Adds "Back to Validators" button in PageValidator @Bitcoinera
3 changes: 3 additions & 0 deletions public/img/icons/arrow-icon.svg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
62 changes: 53 additions & 9 deletions src/components/staking/PageValidator.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,13 +9,27 @@
class="small"
>
<template v-if="validator.operatorAddress" slot="managed-body">
<div class="status-container">
<span :class="validator.status | toLower" class="validator-status">
{{ validator.status }}
</span>
<span v-if="validator.statusDetailed" class="validator-status-detailed">
{{ validator.statusDetailed }}
</span>
<button
class="validators-list-button"
color="secondary"
@click="$router.push(`/validators`)"
>
<img src="/img/icons/arrow-icon.svg" />
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@Bitcoinera @faboweb we already import material icons for this. we don't need to include separate svg's for this kind of stuff.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Charlie seemed very happy with this arrow. I don't know 🤷‍♀️

Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

sure. but we already import them as fonts - icons should be used like this (not imported as separate SVGs):

lunie/src/components/transactions/message-view/SendMessageDetails.vue

Line 24 in b9566b9

<i class="material-icons arrow">arrow_right_alt</i>

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

pushed: #3388

<div style="width: 20px;display: inline-block"></div>
Back to Validators
</button>
<div class="status-button-container">
<div class="status-container">
<span :class="validator.status | toLower" class="validator-status">
{{ validator.status }}
</span>
<span
v-if="validator.statusDetailed"
class="validator-status-detailed"
>
{{ validator.statusDetailed }}
</span>
</div>
</div>
<tr class="li-validator">
<td class="data-table__row__info">
Expand Down Expand Up @@ -389,6 +403,24 @@ export default {
}
</script>
<style scoped>
.validators-list-button {
margin: 0 0 20px 10px;
width: 177px;
height: 40px;
background-color: #272b48;
font-size: 14px;
color: #7a88b8;
border: 1px solid rgb(122, 136, 184, 0.1);
border-radius: 5px;
cursor: pointer;
}

.validators-list-button:hover {
background: #445381;
color: #f1f3f7;
border-color: #445381;
}

.li-validator {
display: flex;
justify-content: space-between;
Expand Down Expand Up @@ -478,8 +510,14 @@ span {
margin-top: 0.4rem;
font-size: 0.8rem;
}
</style>
<style>

@media screen and (max-width: 425px) {
.status-button-container {
display: flex;
flex-direction: column-reverse;
}
}

@media screen and (max-width: 667px) {
.button-container {
width: 100%;
Expand All @@ -490,4 +528,10 @@ span {
width: 50%;
}
}

@media screen and (min-width: 1024px) {
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

not a problem this time. but it is better to stick with either max-width or min-width so it is better to grasp what the breakpoints are.

In this case we could have done:

.validators-list-button {
  display: block;
}
@media screen and (max-width: 1024px) {
  display: none;
}

.validators-list-button {
display: none;
}
}
</style>