Improve table presentation

RailsEventStore · Jan 23, 2024 · a02d909 · a02d909
1 parent f9170e5
commit a02d909
Show file tree

Hide file tree

Showing 2 changed files with 11 additions and 14 deletions.
diff --git a/ruby_event_store-browser/elm/src/Page/ShowEvent.elm b/ruby_event_store-browser/elm/src/Page/ShowEvent.elm
@@ -213,19 +213,16 @@ showEvent baseUrl event maybeCausedEvents =
                 [ class "w-full text-left grid md:grid-cols-3 gap-8 overflow-hidden"
                 ]
                 [ section [ class "space-y-4" ]
-                    [ h2 [ class "border-gray-400 border-b text-gray-500 uppercase font-bold text-xs pb-2" ]
-                        [ button [ class "flex justify-between w-full" ] [ span [] [ text "Event Type" ], span [ class "text-gray-500" ] [ text "copy" ] ]
-                        ]
-                    , div [] [ text event.eventId ]
+                    [ h2 [ class "border-gray-400 border-b text-gray-500 uppercase font-bold text-xs pb-2" ] [ text "Event ID"]
+                     , div [ class "text-sm font-medium font-mono"] [ text event.eventId ]
                     ]
                 , section [ class "space-y-4" ]
                     [ h2 [ class "border-gray-400 border-b text-gray-500 uppercase font-bold text-xs pb-2" ]
                         [ button [ class "flex justify-between w-full" ] [ span [] [ text "Raw Data" ], span [ class "text-gray-500" ] [ text "copy" ] ] ]
                     , div [ class "overflow-auto w-full" ] [ showJsonTree event.rawData event.dataTreeState (\s -> ChangeOpenedEventDataTreeState s) ]
                     ]
                 , section [ class "space-y-4" ]
-                    [ h2 [ class "border-gray-400 border-b text-gray-500 uppercase font-bold text-xs pb-2" ]
-                        [ button [ class "flex justify-between w-full" ] [ span [] [ text "Raw Metadata" ], span [ class "text-gray-500" ] [ text "copy" ] ] ]
+                    [ h2 [ class "border-gray-400 border-b text-gray-500 uppercase font-bold text-xs pb-2" ] [ text "Raw Metadata" ]
                     , div [ class "overflow-auto w-full" ] [ showJsonTree event.rawMetadata event.metadataTreeState (\s -> ChangeOpenedEventMetadataTreeState s) ]
                     ]
                 ]

diff --git a/ruby_event_store-browser/elm/src/Page/ShowStream.elm b/ruby_event_store-browser/elm/src/Page/ShowStream.elm
@@ -233,20 +233,20 @@ renderResults baseUrl events =
 
         _ ->
             table
-                [ class "my-10 w-full text-left table-fixed border-collapse"
+                [ class "my-10 w-full text-left border-collapse"
                 ]
                 [ thead
                     [ class "align-bottom leading-tight"
                     ]
                     [ tr []
                         [ th
-                            [ class "border-gray-400 border-b text-gray-500 uppercase pb-4 p-0 text-xs" ]
+                            [ class "border-gray-400 border-b text-gray-500 uppercase pb-4 px-4 text-xs" ]
                             [ text "Event name" ]
                         , th
-                            [ class "border-gray-400 border-b text-gray-500 uppercase p-0 pb-4 text-xs" ]
+                            [ class "border-gray-400 border-b text-gray-500 uppercase pb-4 pr-4 text-xs" ]
                             [ text "Event id" ]
                         , th
-                            [ class "border-gray-400 border-b text-gray-500 uppercase p-0 pb-4 text-xs text-right" ]
+                            [ class "border-gray-400 border-b text-gray-500 uppercase pb-4 pr-4 text-xs text-right" ]
                             [ text "Created at" ]
                         ]
                     ]
@@ -258,19 +258,19 @@ renderResults baseUrl events =
 
 itemRow : Url.Url -> Api.Event -> Html Msg
 itemRow baseUrl { eventType, createdAt, eventId } =
-    tr []
+    tr [ class "border-gray-50 border-b hover:bg-gray-100"]
         [ td
-            [ class "p-0 pt-2" ]
+            [ class "py-2 px-4 align-middle" ]
             [ a
                 [ class "text-red-700 no-underline"
                 , href (Route.eventUrl baseUrl eventId)
                 ]
                 [ text eventType ]
             ]
         , td
-            [ class "p-0 pt-2" ]
+            [ class "py-2  pr-4 font-mono text-sm leading-none font-medium align-middle" ]
             [ text eventId ]
         , td
-            [ class "p-0 pt-2 text-right" ]
+            [ class "py-2  pr-4 font-mono text-sm leading-none font-medium text-right align-middle" ]
             [ text (formatTimestamp createdAt) ]
         ]