livebook-dev/livebook
1
1
Fork 0
mirror of https://github.com/livebook-dev/livebook.git synced 2025-10-08 12:36:36 +08:00
Code Issues Projects Releases Packages Wiki Activity

Fix app menu overflowing on mobile (#2092)

Browse source
This commit is contained in:
Jonatan Kłosko 2023-07-19 12:14:24 +02:00 • committed by GitHub
parent 7ea0b9278a
commit 81cd85ef05
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
2 changed files with 23 additions and 2 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

21
lib/livebook_web/components/core_components.ex
View file

@ -254,6 +254,10 @@ defmodule LivebookWeb.CoreComponents do
default: :bottom_right,
values: [:top_left, :top_right, :bottom_left, :bottom_right]
attr :md_position, :atom,
default: nil,
values: [nil, :top_left, :top_right, :bottom_left, :bottom_right]
attr :distant, :boolean,
default: false,
doc: "whether the menu should be further from the anchor element"
@ -284,6 +288,7 @@ defmodule LivebookWeb.CoreComponents do
class={[
"absolute z-[100] rounded-lg bg-white flex flex-col py-2 shadow-[0_15px_99px_-0px_rgba(12,24,41,0.15)] hidden",
menu_position_class(@position),
@md_position && menu_md_position_class(@md_position),
@distant && menu_distant_class(@position)
]}
role="menu"
@ -310,6 +315,22 @@ defmodule LivebookWeb.CoreComponents do
defp menu_position_class(:bottom_left), do: "bottom-0 left-0 transform translate-y-full -mb-1"
defp menu_position_class(:bottom_right), do: "bottom-0 right-0 transform translate-y-full -mb-1"
defp menu_md_position_class(:top_left) do
"md:top-0 md:left-0 md:bottom-auto md:right-auto md:transform md:-translate-y-full md:-mt-1 md:mb-0"
end
defp menu_md_position_class(:top_right) do
"md:top-0 md:right-0 md:bottom-auto md:left-auto md:transform md:-translate-y-full md:-mt-1 md:mb-0"
end
defp menu_md_position_class(:bottom_left) do
"md:bottom-0 md:left-0 md:top-auto md:right-auto md:transform md:translate-y-full md:-mb-1 md:mt-0"
end
defp menu_md_position_class(:bottom_right) do
"md:bottom-0 md:right-0 md:top-auto md:left-auto md:transform md:translate-y-full md:-mb-1 md:mt-0"
end
defp menu_distant_class(position) when position in [:top_left, :top_right], do: "-mt-2"
defp menu_distant_class(position) when position in [:bottom_left, :bottom_right], do: "-mb-2"

4
lib/livebook_web/live/app_session_live.ex
View file

@ -98,8 +98,8 @@ defmodule LivebookWeb.AppSessionLive do
~H"""
<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}>
<div class="absolute md:fixed right-4 md:left-4 md:right-auto top-3">
<.menu id="app-menu" position={:bottom_right} md_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" />