VK style changes - Fix the container and add support for y scroll
This commit is contained in:
parent
2178c41801
commit
fe27768239
|
@ -19,7 +19,18 @@ import 'alpinejs'
|
||||||
import {Socket} from "phoenix"
|
import {Socket} from "phoenix"
|
||||||
import LiveSocket from "phoenix_live_view"
|
import LiveSocket from "phoenix_live_view"
|
||||||
|
|
||||||
|
let Hooks = {}
|
||||||
|
|
||||||
|
Hooks.VkContainerLog = {
|
||||||
|
updated() {
|
||||||
|
var logsDiv = document.getElementById("clogsholder")
|
||||||
|
logsDiv.scrollTop = logsDiv.scrollHeight
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
let csrfToken = document.querySelector("meta[name='csrf-token']").getAttribute("content")
|
let csrfToken = document.querySelector("meta[name='csrf-token']").getAttribute("content")
|
||||||
let liveSocket = new LiveSocket("/live", Socket, {params: {_csrf_token: csrfToken}})
|
let liveSocket = new LiveSocket("/live", Socket, {hooks: Hooks, params: {_csrf_token: csrfToken}})
|
||||||
liveSocket.connect()
|
liveSocket.connect()
|
||||||
window.liveSocket = liveSocket
|
window.liveSocket = liveSocket
|
||||||
|
|
||||||
|
|
||||||
|
|
|
@ -2,11 +2,19 @@ defmodule ZcashExplorerWeb.VkLive do
|
||||||
use Phoenix.LiveView
|
use Phoenix.LiveView
|
||||||
|
|
||||||
@impl true
|
@impl true
|
||||||
def render(assigns) do
|
def render(%{message: %{"txs" => []}} = assigns) do
|
||||||
~L"""
|
~L"""
|
||||||
<div class="text-green-400 font-mono break-all ">
|
<div id="clogsholder" class="text-green-400 font-mono break-all overscroll-auto overflow-auto mx-16 h-28 min-h-full border-solid rounded-md border-opacity-25 shadow-inner border-4 border-light-blue-500 " phx-hook="VkContainerLog">
|
||||||
|
<div id="clogs min-h-full">
|
||||||
<%= @message["message"] %>
|
<%= @message["message"] %>
|
||||||
</div>
|
</div>
|
||||||
|
</div>
|
||||||
|
"""
|
||||||
|
end
|
||||||
|
|
||||||
|
@impl true
|
||||||
|
def render(assigns) do
|
||||||
|
~L"""
|
||||||
<%= if length(@message["txs"]) > 0 do %>
|
<%= if length(@message["txs"]) > 0 do %>
|
||||||
<div class="shadow overflow-hidden border-b border-gray-200 rounded-lg overflow-x-auto">
|
<div class="shadow overflow-hidden border-b border-gray-200 rounded-lg overflow-x-auto">
|
||||||
<table class="min-w-full divide-y divide-gray-200">
|
<table class="min-w-full divide-y divide-gray-200">
|
||||||
|
|
Loading…
Reference in New Issue