Skip to content
This repository has been archived by the owner on Sep 5, 2024. It is now read-only.

Commit

Permalink
Merge pull request #15 from darwinia-network/aki-ui2
Browse files Browse the repository at this point in the history
Update UI
  • Loading branch information
wuminzhe authored Apr 7, 2024
2 parents 14843d2 + ab7ce16 commit 23ab275
Show file tree
Hide file tree
Showing 11 changed files with 96 additions and 181 deletions.
4 changes: 2 additions & 2 deletions app/assets/stylesheets/application.tailwind.css
Original file line number Diff line number Diff line change
Expand Up @@ -3,11 +3,11 @@
@tailwind utilities;

html, body {
background-color: rgb(252, 251, 248);
/* background-color: rgb(252, 251, 248); */
}

table, dd {
font-family: 'Overpass Mono', monospace;
font-family: "Ubuntu Mono", monospace;
}

.pagination a {
Expand Down
10 changes: 4 additions & 6 deletions app/helpers/messages_helper.rb
Original file line number Diff line number Diff line change
@@ -1,15 +1,13 @@
module MessagesHelper
def status_style(status)
if status == 'accepted'
'inline-block whitespace-nowrap rounded-full bg-primary-100 px-[0.65em] pb-[0.25em] pt-[0.35em] text-center align-baseline text-[0.75em] font-bold leading-none text-primary-700'
'bg-blue-100 text-blue-800 text-xs font-medium me-2 px-2.5 py-0.5 rounded-full dark:bg-blue-900 dark:text-blue-300'
elsif status == 'root_ready'
'inline-block whitespace-nowrap rounded-full bg-secondary-100 px-[0.65em] pb-[0.25em] pt-[0.35em] text-center align-baseline text-[0.75em] font-bold leading-none text-secondary-800'
'bg-yellow-100 text-yellow-800 text-xs font-medium me-2 px-2.5 py-0.5 rounded-full dark:bg-yellow-900 dark:text-yellow-300'
elsif status == 'dispatch_failed'
'inline-block whitespace-nowrap rounded-full bg-danger-100 px-[0.65em] pb-[0.25em] pt-[0.35em] text-center align-baseline text-[0.75em] font-bold leading-none text-danger-700'
'bg-red-100 text-red-800 text-xs font-medium me-2 px-2.5 py-0.5 rounded-full dark:bg-red-900 dark:text-red-300'
elsif status == 'dispatch_success'
'inline-block whitespace-nowrap rounded-full bg-success-100 px-[0.65em] pb-[0.25em] pt-[0.35em] text-center align-baseline text-[0.75em] font-bold leading-none text-success-700'
elsif status == 'cleared'
'inline-block whitespace-nowrap rounded-full bg-neutral-50 px-[0.65em] pb-[0.25em] pt-[0.35em] text-center align-baseline text-[0.75em] font-bold leading-none text-neutral-600'
'bg-green-100 text-green-800 text-xs font-medium me-2 px-2.5 py-0.5 rounded-full dark:bg-green-900 dark:text-green-300'
end
end

Expand Down
3 changes: 3 additions & 0 deletions app/javascript/application.js
Original file line number Diff line number Diff line change
@@ -1,3 +1,6 @@
// Entry point for the build script in your package.json
import "@hotwired/turbo-rails"
import "./controllers"

import "flowbite/dist/flowbite.turbo.js";
import "flowbite/dist/datepicker.turbo.js";
4 changes: 2 additions & 2 deletions app/models/message.rb
Original file line number Diff line number Diff line change
Expand Up @@ -35,9 +35,9 @@ class Message < ApplicationRecord

def status_label
if status == 'accepted'
'Pending(Accepted)'
'Accepted'
elsif status == 'root_ready'
'Pending(Root Aggregated)'
'Root Ready'
elsif status == 'dispatch_success'
'Success'
elsif status == 'dispatch_failed'
Expand Down
43 changes: 28 additions & 15 deletions app/views/layouts/application.html.erb
Original file line number Diff line number Diff line change
Expand Up @@ -7,32 +7,45 @@
<%= csp_meta_tag %>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Overpass+Mono&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Ubuntu+Mono:ital,wght@0,400;0,700;1,400;1,700&display=swap" rel="stylesheet">

<%= stylesheet_link_tag "application", "data-turbo-track": "reload" %>
<%= javascript_include_tag "application", "data-turbo-track": "reload", defer: true %>
<%= javascript_include_tag 'tw-elements.umd.min', 'data-turbo-track': 'reload', type: "module" %>
</head>

<body>
<body class="flex flex-col min-h-screen">
<%= turbo_stream_from("messages_count") %>

<div class="flex flex-col">
<header class="p-4 pt-5 ml-6 text-2xl text-left">
<a href="/">Darwinia Messages Explorer</a>
<%= render "messages/messages_count", messages_count: @messages_count %>
</header>
<main class="h-90 px-4">
<div class="px-6">
<header class="w-full mx-auto lg:max-w-6xl">
<nav class="bg-white border-gray-200 dark:bg-gray-900">
<div class="max-w-screen-xl flex flex-wrap items-center justify-between mx-auto p-6">
<a href="/" class="flex items-center space-x-3 rtl:space-x-reverse">
<span class="self-center text-2xl font-semibold whitespace-nowrap dark:text-white">Msgport Messages Explorer</span>
</a>
<%= render "messages/messages_count", messages_count: @messages_count %>
</div>
</nav>
</header>

<main class="flex-1 w-full mx-auto lg:max-w-6xl">

<div class="w-full p-6 pt-0 bg-white dark:bg-gray-900">
<label for="tx_or_hash" class="sr-only">Search</label>
<div class="relative mt-1">
<div class="absolute inset-y-0 rtl:inset-r-0 start-0 flex items-center ps-3 pointer-events-none">
<svg class="w-4 h-4 text-gray-500 dark:text-gray-400" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 20 20">
<path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m19 19-4-4m0-7A7 7 0 1 1 1 8a7 7 0 0 1 14 0Z"/>
</svg>
</div>
<%= form_with url: "/message", method: :get do |form| %>
<%= form.text_field :tx_or_hash, class: "p-1.5 text-md bg-transparent", style: "border: 1px solid lightgrey; box-sizing: border-box; width: 100%", placeholder: "Source Tx Hash, or, Msg Hash" %>
<%= form.text_field :tx_or_hash, class: "block pt-2 ps-10 text-sm text-gray-900 border border-gray-300 rounded-lg w-full bg-gray-50 focus:ring-blue-500 focus:border-blue-500 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500", placeholder: "Source Tx Hash, or, Msg Hash" %>
<% end %>
</div>
</div>

<%= yield %>
</main>
<footer class="p-4 ml-6 text-sm text-left">©️ 2023 <a href="https://darwinia.network/">Darwinia</a></footer>
</div>
<%= yield %>
</main>
<footer class="w-full mx-auto lg:max-w-6xl p-6">©️ 2023 <a href="https://darwinia.network/">Darwinia</a></footer>

</body>
</html>
25 changes: 10 additions & 15 deletions app/views/messages/_message.html.erb
Original file line number Diff line number Diff line change
@@ -1,24 +1,19 @@
<tr id="message_<%= message.identifier %>" class="border-b dark:border-neutral-500">
<td class="whitespace-nowrap px-6 py-2 text-left"><%= time_ago_in_words(message.block_timestamp) %> ago</td>
<td class="whitespace-nowrap px-6 py-2">
<%= link_to message.from_network.name, network_messages_path(message.from_network.name), class: 'underline' %>
->
<%= link_to message.to_network.name, network_messages_path('_', message.to_network.name), class: 'underline' %>
<td class="whitespace-nowrap px-6 py-2">#<%= message.index %></td>
<td class="whitespace-nowrap px-6 py-2"><%= block_link(message.from_network, message.block_number) %></td>
<td class="whitespace-nowrap px-6 py-2"><%= link_to short(message.msg_hash), message_by_tx_or_hash_path(message.msg_hash), class: 'underline' %></td>
<td class="whitespace-nowrap px-6 py-2"><%= short(message.root) %></td>
<td class="whitespace-nowrap px-6 py-2 text-left"><%= address_link_short(message.from_network, message.from) %></td>
<td class="whitespace-nowrap px-6 py-2 text-left"><%= address_link_short(message.to_network, message.to) %></td>
<td class="whitespace-nowrap px-6 py-2">
<tr id="message_<%= message.identifier %>" class="bg-white border-b dark:bg-gray-800 dark:border-gray-700">
<td class="whitespace-nowrap px-6 py-4"><%= link_to short(message.msg_hash), message_by_tx_or_hash_path(message.msg_hash), class: 'underline' %></td>
<td class="whitespace-nowrap px-6 py-4">
<div class="<%= status_style(message.status) %>">
<%= link_to message.status_label, "#{request.path}?status=#{message.status}" %>
</div>
</td>
<td class="whitespace-nowrap px-6 py-2">
<td class="whitespace-nowrap px-6 py-4">
<%= link_to message.from_network.name, network_messages_path(message.from_network.name), class: 'underline' %> > <%= link_to message.to_network.name, network_messages_path('_', message.to_network.name), class: 'underline' %>
<td class="whitespace-nowrap px-6 py-4 text-left"><%= address_link_short(message.from_network, message.from) %></td>
<td class="whitespace-nowrap px-6 py-4 text-left"><%= address_link_short(message.to_network, message.to) %></td>
<td class="whitespace-nowrap px-6 py-4 text-left"><%= time_ago_in_words(message.block_timestamp) %> ago</td>
<td class="whitespace-nowrap px-6 py-4">
<% if message.dispatch_block_timestamp %>
<%= time_consumption(message) %>
<% end %>
</td>
<td class="whitespace-nowrap px-6 py-2"><%= link_to "Detail", message_by_tx_or_hash_path(message.msg_hash), class: "underline" %></td>
<td class="whitespace-nowrap px-6 py-2"><%= link_to "MORE", message_by_tx_or_hash_path(message.msg_hash), class: "underline" %></td>
</tr>
2 changes: 1 addition & 1 deletion app/views/messages/_messages_count.html.erb
Original file line number Diff line number Diff line change
@@ -1 +1 @@
<span id="messages_count" class="text-center text-sm text-gray-500">Total <%= messages_count %></span>
<span id="messages_count" class="text-center text-sm text-gray-500"><%= messages_count %> messages</span>
34 changes: 17 additions & 17 deletions app/views/messages/index.html.erb
Original file line number Diff line number Diff line change
@@ -1,33 +1,33 @@
<%= turbo_stream_from("messages") %>

<div class="flex flex-col">
<div class="overflow-x-auto sm:-mx-6 lg:-mx-8">
<div class="inline-block min-w-full py-2 sm:px-6 lg:px-8">
<div class="overflow-hidden">
<table class="min-w-full text-center text-sm font-light">
<thead class="border-b font-medium dark:border-neutral-500">
<div class="overflow-x-auto">
<div class="w-full inline-block">
<div class="relative overflow-hidden">


<table class="w-full text-sm text-left rtl:text-right text-gray-500 dark:text-gray-400">
<thead class="text-xs text-gray-700 uppercase dark:text-gray-400">
<tr>
<th scope="col" class="px-6 py-2 text-left">Age</th>
<th scope="col" class="px-6 py-2">Direction</th>
<th scope="col" class="px-6 py-2">Index</th>
<th scope="col" class="px-6 py-2">Block</th>
<th scope="col" class="px-6 py-2">MsgHash</th>
<th scope="col" class="px-6 py-2">Root</th>
<th scope="col" class="px-6 py-2 text-left">From</th>
<th scope="col" class="px-6 py-2 text-left">To</th>
<th scope="col" class="px-6 py-2">Status</th>
<th scope="col" class="px-6 py-2">Time Spent</th>
<th scope="col" class="px-6 py-2"></th>
<th scope="col" class="px-6 py-3">Hash</th>
<th scope="col" class="px-6 py-3">Status</th>
<th scope="col" class="px-6 py-3">Direction</th>
<th scope="col" class="px-6 py-3 text-left">From</th>
<th scope="col" class="px-6 py-3 text-left">To</th>
<th scope="col" class="px-6 py-3 text-left">Age</th>
<th scope="col" class="px-6 py-3">Time Spent</th>
<th scope="col" class="px-6 py-3"></th>
</tr>
</thead>
<tbody id="messages">
<%= render @messages %>
</tbody>
</table>

</div>
</div>
</div>
</div>
<div class="px-6 py-2">
<div class="p-6">
<%= paginate @messages %>
</div>
4 changes: 2 additions & 2 deletions package.json
Original file line number Diff line number Diff line change
Expand Up @@ -6,9 +6,9 @@
"@hotwired/turbo-rails": "^7.3.0",
"autoprefixer": "^10.4.16",
"esbuild": "^0.19.5",
"flowbite": "^2.3.0",
"postcss": "^8.4.31",
"tailwindcss": "^3.3.4",
"tw-elements": "^1.0.0"
"tailwindcss": "^3.3.4"
},
"scripts": {
"build": "esbuild app/javascript/*.* --bundle --sourcemap --format=esm --outdir=app/assets/builds --public-path=/assets",
Expand Down
4 changes: 2 additions & 2 deletions tailwind.config.js
Original file line number Diff line number Diff line change
Expand Up @@ -4,10 +4,10 @@ module.exports = {
'./app/helpers/**/*.rb',
'./app/assets/stylesheets/**/*.css',
'./app/javascript/**/*.js',
'./node_modules/tw-elements/dist/js/**/*.js'
'./node_modules/flowbite/**/*.js'
],
plugins: [
require('tw-elements/dist/plugin.cjs')
require('flowbite/plugin')
],
darkMode: "class"
}
Loading

0 comments on commit 23ab275

Please sign in to comment.