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

View File

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

View File

@ -25,17 +25,20 @@ const totalPrice = computed(() => price(props.request))
<div class="flex"> <div class="flex">
<CodexImage class="flex-2" :cid="request.content.cid"></CodexImage> <CodexImage class="flex-2" :cid="request.content.cid"></CodexImage>
<div class="py-8 px-4 mx-auto max-w-2xl lg:py-16"> <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"> <div class="flex justify-between items-center mb-2">
{{ shortHex(requestId, 12) }} <h2 class="text-xl font-semibold leading-none text-gray-900 md:text-2xl dark:text-white">
</h2> Request {{ shortHex(requestId, 12) }}
<p class="mb-4 text-xl font-extrabold leading-none text-gray-900 md:text-2xl dark:text-white"> </h2>
{{ totalPrice }} CDX <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> </p>
<StateIndicator
class="mb-4"
:text="request.state"
:color="getStateColour(request.state)"
></StateIndicator>
<dl> <dl>
<dt class="mb-2 font-semibold leading-none text-gray-900 dark:text-white">Dataset CID</dt> <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"> <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> </script>
<template> <template>
<div> <div class="flex flex-1 flex-col h-auto">
<div <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> <div>
<button <button
@ -114,9 +114,11 @@ const router = useRouter()
</div> </div>
</div> </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 <thead
class="text-xs text-gray-700 uppercase bg-gray-50 dark:bg-gray-700 dark:text-gray-400" 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>
</div> </div>
</template> </template>
<style scoped>
.max-h-128 {
max-height: 36rem;
}
</style>