set max height for requests table

This commit is contained in:
Eric 2024-06-07 12:57:30 +10:00
parent 83ab353038
commit a6225b9f6a
No known key found for this signature in database
4 changed files with 31 additions and 22 deletions

View File

@ -4,7 +4,7 @@
<meta charset="UTF-8">
<link rel="icon" href="/favicon.ico">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Vite App</title>
<title>Codex Testnet</title>
</head>
<body>
<div id="app"></div>

View File

@ -155,16 +155,14 @@ onMounted(async () => {
info alert - Slot
</button>
<div class="flex flex-col h-full min-w-96 bg-white dark:bg-gray-900">
<header class="w-full text-center border-b p-4">
<header class="w-full text-center border-b p-4 flex-none">
<AppNav />
</header>
<main>
<div class="mx-auto max-w-screen-xl">
<ContractEventAlerts v-model="alerts"></ContractEventAlerts>
<RouterView class="flex-auto p-4" />
</div>
<main class="flex-1 mx-auto max-w-screen-xl w-full p-4">
<ContractEventAlerts v-model="alerts"></ContractEventAlerts>
<RouterView />
</main>
<footer class="w-full text-center border-t p-4 mt-4">
<footer class="w-full text-center border-t p-4 mt-4 flex-none">
<Balance />
<BlockNumber />
</footer>

View File

@ -25,17 +25,20 @@ const totalPrice = computed(() => price(props.request))
<div class="flex">
<CodexImage class="flex-2" :cid="request.content.cid"></CodexImage>
<div class="py-8 px-4 mx-auto max-w-2xl lg:py-16">
<h2 class="mb-2 text-xl font-semibold leading-none text-gray-900 md:text-2xl dark:text-white">
{{ shortHex(requestId, 12) }}
</h2>
<p class="mb-4 text-xl font-extrabold leading-none text-gray-900 md:text-2xl dark:text-white">
{{ totalPrice }} CDX
<div class="flex justify-between items-center mb-2">
<h2 class="text-xl font-semibold leading-none text-gray-900 md:text-2xl dark:text-white">
Request {{ shortHex(requestId, 12) }}
</h2>
<StateIndicator
:text="request.state"
:color="getStateColour(request.state)"
></StateIndicator>
</div>
<p class="mb-4 text-xl font-extrabold leading-none text-gray-900
md:text-2xl dark:text-white flex justify-between">
<div>{{ totalPrice }} CDX</div>
</p>
<StateIndicator
class="mb-4"
:text="request.state"
:color="getStateColour(request.state)"
></StateIndicator>
<dl>
<dt class="mb-2 font-semibold leading-none text-gray-900 dark:text-white">Dataset CID</dt>
<dd class="mb-4 font-light text-gray-500 sm:mb-5 dark:text-gray-400">

View File

@ -15,9 +15,9 @@ const router = useRouter()
</script>
<template>
<div>
<div class="flex flex-1 flex-col h-auto">
<div
class="flex items-center justify-between flex-column md:flex-row flex-wrap space-y-4 md:space-y-0 py-4 px-6 bg-white dark:bg-gray-900"
class="flex flex-initial items-center justify-between flex-column md:flex-row flex-wrap space-y-4 md:space-y-0 py-4 px-6 bg-white dark:bg-gray-900"
>
<div>
<button
@ -114,9 +114,11 @@ const router = useRouter()
</div>
</div>
<div
class="relative overflow-x-auto overflow-y-auto max-h-screen shadow-md sm:rounded-lg border-t border-gray-50"
class="max-h-128 flex-1 overflow-x-auto overflow-y-auto shadow-md sm:rounded-lg border-t border-gray-50"
>
<table class="w-full text-sm text-left rtl:text-right text-gray-500 dark:text-gray-400">
<table
class="w-full relative text-sm text-left rtl:text-right text-gray-500 dark:text-gray-400"
>
<thead
class="text-xs text-gray-700 uppercase bg-gray-50 dark:bg-gray-700 dark:text-gray-400"
>
@ -169,3 +171,9 @@ const router = useRouter()
</div>
</div>
</template>
<style scoped>
.max-h-128 {
max-height: 36rem;
}
</style>