mirror of
https://github.com/livebook-dev/livebook.git
synced 2025-01-04 06:01:59 +08:00
Improve apps on mobile (#1821)
This commit is contained in:
José Valim
GitHub
parent
1e995cfca3
commit
a2c58f8d8e
1 changed files with 65 additions and 70 deletions
|
|
@ -55,77 +55,72 @@ defmodule LivebookWeb.AppLive do
|
|||
@impl true
|
||||
def render(assigns) when assigns.app_authenticated? do
|
||||
~H"""
|
||||
<div class="flex grow h-full">
|
||||
<div class="px-3 py-5">
|
||||
<.menu id="app-menu" position={:bottom_left}>
|
||||
<:toggle>
|
||||
<button class="flex items-center text-gray-900">
|
||||
<img src={~p"/images/logo.png"} height="40" width="40" alt="logo livebook" />
|
||||
<.remix_icon icon="arrow-down-s-line" />
|
||||
</button>
|
||||
</:toggle>
|
||||
<.menu_item>
|
||||
<.link navigate={~p"/"} role="menuitem">
|
||||
<.remix_icon icon="home-6-line" />
|
||||
<span>Home</span>
|
||||
</.link>
|
||||
</.menu_item>
|
||||
<.menu_item :if={@data_view.show_source}>
|
||||
<.link patch={~p"/apps/#{@data_view.slug}/source"} role="menuitem">
|
||||
<.remix_icon icon="code-line" />
|
||||
<span>View source</span>
|
||||
</.link>
|
||||
</.menu_item>
|
||||
</.menu>
|
||||
</div>
|
||||
<div class="grow overflow-y-auto relative" data-el-notebook>
|
||||
<div
|
||||
class="w-full max-w-screen-lg px-4 sm:pl-8 sm:pr-16 md:pl-16 pt-4 sm:py-5 mx-auto"
|
||||
data-el-notebook-content
|
||||
>
|
||||
<div data-el-js-view-iframes phx-update="ignore" id="js-view-iframes"></div>
|
||||
<div class="flex items-center pb-4 mb-2 space-x-4 border-b border-gray-200">
|
||||
<h1 class="text-3xl font-semibold text-gray-800">
|
||||
<%= @data_view.notebook_name %>
|
||||
</h1>
|
||||
</div>
|
||||
<div :if={@data_view.app_status == :booting} class="flex items-center space-x-2">
|
||||
<span class="relative flex h-3 w-3">
|
||||
<span class="animate-ping absolute inline-flex h-full w-full rounded-full bg-blue-400 opacity-75">
|
||||
</span>
|
||||
<span class="relative inline-flex rounded-full h-3 w-3 bg-blue-500"></span>
|
||||
</span>
|
||||
<div class="text-gray-700 font-medium">
|
||||
Booting
|
||||
</div>
|
||||
</div>
|
||||
<div :if={@data_view.app_status == :error} class="flex items-center space-x-2">
|
||||
<span class="relative flex h-3 w-3">
|
||||
<span class="relative inline-flex rounded-full h-3 w-3 bg-red-500"></span>
|
||||
</span>
|
||||
<div class="text-gray-700 font-medium">
|
||||
Error
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
:if={@data_view.app_status in [:running, :shutting_down]}
|
||||
class="pt-4 flex flex-col space-y-6"
|
||||
data-el-outputs-container
|
||||
id="outputs"
|
||||
>
|
||||
<div :for={output_view <- Enum.reverse(@data_view.output_views)}>
|
||||
<LivebookWeb.Output.outputs
|
||||
outputs={[output_view.output]}
|
||||
dom_id_map={%{}}
|
||||
session_id={@session.id}
|
||||
session_pid={@session.pid}
|
||||
client_id={@client_id}
|
||||
input_values={output_view.input_values}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div style="height: 80vh"></div>
|
||||
<div class="h-full relative overflow-y-auto px-4 md:px-20" data-el-notebook>
|
||||
<div class="w-full max-w-screen-lg py-4 mx-auto" data-el-notebook-content>
|
||||
<div class="absolute md:fixed right-8 md:left-4 top-3 w-10 h-10">
|
||||
<.menu id="app-menu" position={:bottom_left}>
|
||||
<:toggle>
|
||||
<button class="flex items-center text-gray-900">
|
||||
<img src={~p"/images/logo.png"} height="40" width="40" alt="logo livebook" />
|
||||
<.remix_icon icon="arrow-down-s-line" />
|
||||
</button>
|
||||
</:toggle>
|
||||
<.menu_item>
|
||||
<.link navigate={~p"/"} role="menuitem">
|
||||
<.remix_icon icon="home-6-line" />
|
||||
<span>Home</span>
|
||||
</.link>
|
||||
</.menu_item>
|
||||
<.menu_item :if={@data_view.show_source}>
|
||||
<.link patch={~p"/apps/#{@data_view.slug}/source"} role="menuitem">
|
||||
<.remix_icon icon="code-line" />
|
||||
<span>View source</span>
|
||||
</.link>
|
||||
</.menu_item>
|
||||
</.menu>
|
||||
</div>
|
||||
<div data-el-js-view-iframes phx-update="ignore" id="js-view-iframes"></div>
|
||||
<div class="flex items-center pb-4 mb-2 space-x-4 border-b border-gray-200 pr-20 md:pr-0">
|
||||
<h1 class="text-3xl font-semibold text-gray-800">
|
||||
<%= @data_view.notebook_name %>
|
||||
</h1>
|
||||
</div>
|
||||
<div :if={@data_view.app_status == :booting} class="flex items-center space-x-2">
|
||||
<span class="relative flex h-3 w-3">
|
||||
<span class="animate-ping absolute inline-flex h-full w-full rounded-full bg-blue-400 opacity-75">
|
||||
</span>
|
||||
<span class="relative inline-flex rounded-full h-3 w-3 bg-blue-500"></span>
|
||||
</span>
|
||||
<div class="text-gray-700 font-medium">
|
||||
Booting
|
||||
</div>
|
||||
</div>
|
||||
<div :if={@data_view.app_status == :error} class="flex items-center space-x-2">
|
||||
<span class="relative flex h-3 w-3">
|
||||
<span class="relative inline-flex rounded-full h-3 w-3 bg-red-500"></span>
|
||||
</span>
|
||||
<div class="text-gray-700 font-medium">
|
||||
Error
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
:if={@data_view.app_status in [:running, :shutting_down]}
|
||||
class="pt-4 flex flex-col space-y-6"
|
||||
data-el-outputs-container
|
||||
id="outputs"
|
||||
>
|
||||
<div :for={output_view <- Enum.reverse(@data_view.output_views)}>
|
||||
<LivebookWeb.Output.outputs
|
||||
outputs={[output_view.output]}
|
||||
dom_id_map={%{}}
|
||||
session_id={@session.id}
|
||||
session_pid={@session.pid}
|
||||
client_id={@client_id}
|
||||
input_values={output_view.input_values}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div style="height: 80vh"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
|
|
|||
Loading…
Reference in a new issue