Skip to content

Commit

Permalink
feat: Implement switching to next/previous block on detail pages (#395)
Browse files Browse the repository at this point in the history
  • Loading branch information
janmichek authored Jul 26, 2023
1 parent aaebc66 commit 6bb0996
Show file tree
Hide file tree
Showing 3 changed files with 69 additions and 7 deletions.
5 changes: 0 additions & 5 deletions src/components/AppPagination.vue
Original file line number Diff line number Diff line change
Expand Up @@ -101,11 +101,6 @@ defineEmits(['prev-clicked', 'next-clicked'])
border-radius: 4px;
cursor: pointer;
@media (--desktop) {
width: 32px;
height: 32px;
}
&:active {
color: var(--color-blue);
}
Expand Down
69 changes: 68 additions & 1 deletion src/components/KeyblockDetailsPanel.vue
Original file line number Diff line number Diff line change
Expand Up @@ -28,7 +28,34 @@
Height
</th>
<td class="keyblock-details-panel__data">
{{ keyblockDetails.height }}
<div class="keyblock-details-panel__controls">
<app-link :to="`/keyblocks/${keyblockDetails.height - 1}`">
<button
:class="[
'keyblock-details-panel__button',
'keyblock-details-panel__button--prev',
]">
<app-icon
:size="22"
name="caret-left"/>
</button>
</app-link>
{{ keyblockDetails.height }}
<app-link
:to="`/keyblocks/${keyblockDetails.height + 1}`"
:class="[{'keyblock-details-panel__keyblock-link--disabled': !isNextKeyblockMined}]">
<button
:class="[
'keyblock-details-panel__button',
'keyblock-details-panel__button--next',
]"
:disabled="!isNextKeyblockMined">
<app-icon
:size="22"
name="caret-right"/>
</button>
</app-link>
</div>
</td>
</tr>
<tr class="keyblock-details-panel__row">
Expand Down Expand Up @@ -131,13 +158,16 @@
</template>

<script setup>
import { storeToRefs } from 'pinia'
import AppPanel from '@/components/AppPanel'
import CopyChip from '@/components/CopyChip'
import AppIcon from '@/components/AppIcon'
import AppLink from '@/components/AppLink'
import { formatAePrice, formatEllipseHash, formatNumber } from '@/utils/format'
import { useRecentBlocksStore } from '~/stores/recentBlocks'
const { NODE_URL, MIDDLEWARE_URL } = useRuntimeConfig().public
const { blockHeight: latestBlockHeight } = storeToRefs(useRecentBlocksStore())
const props = defineProps({
keyblockDetails: {
Expand All @@ -152,6 +182,9 @@ const keyblockNodeUrl = computed(() =>
const keyblockMiddlewareUrl = computed(() =>
`${MIDDLEWARE_URL}/v2/key-blocks/${props.keyblockDetails.hash}`,
)
const isNextKeyblockMined = computed(() =>
props.keyblockDetails.height < latestBlockHeight.value,
)
</script>

<style scoped>
Expand Down Expand Up @@ -225,5 +258,39 @@ const keyblockMiddlewareUrl = computed(() =>
&__not-existent {
margin: var(--space-3) 0;
}
&__controls {
display: flex;
justify-content: flex-end;
align-items: center;
}
&__button {
width: 32px;
height: 32px;
padding: 0;
display: flex;
justify-content: center;
align-items: center;
background: transparent;
border: 1px solid var(--color-midnight);
border-radius: 4px;
cursor: pointer;
&--next {
margin-left: var(--space-6);
}
&--prev {
margin-right: var(--space-6);
}
}
&__keyblock-link--disabled {
cursor: not-allowed;
opacity: 0.3;
pointer-events: none;
}
}
</style>
2 changes: 1 addition & 1 deletion src/pages/keyblocks/[id].vue
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,7 @@
v-if="keyblockDetails"
:keyblock-details="keyblockDetails"/>

<app-tabs>
<app-tabs v-if="!keyblockDetails.notExistent">
<app-tab title="Microblocks">
<keyblock-microblocks-panel/>
</app-tab>
Expand Down

0 comments on commit 6bb0996

Please sign in to comment.