add header for browse
parent
6a313cf2f7
commit
5d0679a0a5
|
@ -1,15 +1,26 @@
|
||||||
<template>
|
<template>
|
||||||
<div class="browser">
|
<div class="browser">
|
||||||
<div class="view" v-for="address in addresses" :key="address">
|
<div class="view" v-for="(address, idx) in addresses" :key="address">
|
||||||
|
<header :class="{ disabled: addresses.length === 1 }">
|
||||||
|
<sl-icon-button
|
||||||
|
class="this-button"
|
||||||
|
name="bookmark"
|
||||||
|
@click="visit(idx)"
|
||||||
|
/>
|
||||||
|
<sl-icon-button
|
||||||
|
class="close-button"
|
||||||
|
name="x-circle"
|
||||||
|
@click="close(idx)"
|
||||||
|
/>
|
||||||
|
</header>
|
||||||
<Inspect :address="address" />
|
<Inspect :address="address" />
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script lang="ts">
|
<script lang="ts">
|
||||||
import { computed, defineComponent, PropType } from "vue";
|
|
||||||
import { useEntity } from "@/lib/entity";
|
|
||||||
import Inspect from "@/views/Inspect.vue";
|
import Inspect from "@/views/Inspect.vue";
|
||||||
|
import { defineComponent, PropType } from "vue";
|
||||||
|
|
||||||
export default defineComponent({
|
export default defineComponent({
|
||||||
name: "Browse",
|
name: "Browse",
|
||||||
|
@ -25,7 +36,20 @@ export default defineComponent({
|
||||||
data: () => {
|
data: () => {
|
||||||
return {};
|
return {};
|
||||||
},
|
},
|
||||||
setup(props) {
|
setup(props) {},
|
||||||
|
methods: {
|
||||||
|
visit(idx: number) {
|
||||||
|
this.$router.push({
|
||||||
|
params: { addresses: [this.$route.params.addresses[idx]] },
|
||||||
|
});
|
||||||
|
},
|
||||||
|
close(idx: number) {
|
||||||
|
const addresses = [...this.$route.params.addresses];
|
||||||
|
addresses.splice(idx, 1);
|
||||||
|
this.$router.push({
|
||||||
|
params: { addresses },
|
||||||
|
});
|
||||||
|
},
|
||||||
},
|
},
|
||||||
});
|
});
|
||||||
</script>
|
</script>
|
||||||
|
@ -46,5 +70,27 @@ export default defineComponent({
|
||||||
|
|
||||||
margin: 1rem 0;
|
margin: 1rem 0;
|
||||||
padding: 0 1rem;
|
padding: 0 1rem;
|
||||||
|
|
||||||
|
header {
|
||||||
|
position: relative;
|
||||||
|
margin: 0;
|
||||||
|
min-height: 1em;
|
||||||
|
|
||||||
|
.this-button {
|
||||||
|
position: absolute;
|
||||||
|
left: 50%;
|
||||||
|
translate: transformX(-50%);
|
||||||
|
}
|
||||||
|
|
||||||
|
.close-button {
|
||||||
|
position: absolute;
|
||||||
|
right: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
&.disabled {
|
||||||
|
opacity: 0.5;
|
||||||
|
pointer-events: none;
|
||||||
|
}
|
||||||
|
}
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|
Loading…
Reference in New Issue