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

Tiny adjustments to style and responsiveness based on feedback

Browse source
This commit is contained in:
José Valim 2022-10-11 19:06:18 +02:00
parent a6897223a1
commit 36ced79515
7 changed files with 21 additions and 21 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -50,10 +50,10 @@ defmodule LivebookWeb.HomeLive do
</:topbar_action>
<.update_notification version={@new_version} instructions_url={@update_instructions_url} />
<.memory_notification memory={@memory} app_service_url={@app_service_url} />
<div class="p-4 sm:px-8 md:px-16 sm:py-6 max-w-screen-lg mx-auto space-y-4">
<div class="p-4 md:px-12 md:py-6 max-w-screen-lg mx-auto space-y-4">
<div class="flex flex-row space-y-0 items-center pb-4 justify-between">
<PageHelpers.title text="Home" />
<div class="hidden sm:flex space-x-2" role="navigation" aria-label="new notebook">
<div class="hidden md:flex space-x-2" role="navigation" aria-label="new notebook">
<%= live_patch("Import",
to: Routes.home_path(@socket, :import, "url"),
class: "button-base button-outlined-gray whitespace-nowrap"

4
lib/livebook_web/live/home_live/session_list_component.ex
View file

@ -222,7 +222,7 @@ defmodule LivebookWeb.HomeLive.SessionListComponent do
assigns = assign(assigns, free: free, used: used, total: total, percentage: percentage)
~H"""
<div class="pr-4" role="group" aria-label="memory information">
<div class="pr-1 lg:pr-4" role="group" aria-label="memory information">
<span class="tooltip top" data-tooltip={"#{format_bytes(@free)} available"}>
<svg viewbox="-10 5 50 25" width="30" height="30" xmlns="http://www.w3.org/2000/svg">
<circle
@ -243,7 +243,7 @@ defmodule LivebookWeb.HomeLive.SessionListComponent do
fill="none"
/>
</svg>
<div class="hidden md:flex">
<div class="hidden sm:flex md:hidden lg:flex">
<span class="px-2 py-1 text-sm text-gray-500 font-medium">
<%= format_bytes(@used) %> / <%= format_bytes(@total) %>
<span class="sr-only"><%= @percentage %> percent used</span>

2
lib/livebook_web/live/hub/edit_live.ex
View file

@ -36,7 +36,7 @@ defmodule LivebookWeb.Hub.EditLive do
current_user={@current_user}
saved_hubs={@saved_hubs}
>
<div class="p-4 sm:px-8 md:px-16 sm:py-7 max-w-screen-md mx-auto space-y-8">
<div class="p-4 md:px-12 md:py-7 max-w-screen-md mx-auto space-y-8">
<div>
<PageHelpers.title text="Edit Hub" socket={@socket} />
</div>

4
lib/livebook_web/live/hub/new_live.ex
View file

@ -23,7 +23,7 @@ defmodule LivebookWeb.Hub.NewLive do
current_user={@current_user}
saved_hubs={@saved_hubs}
>
<div class="p-4 sm:px-8 md:px-16 sm:py-7 max-w-screen-md mx-auto space-y-8">
<div class="p-4 md:px-12 md:py-7 max-w-screen-md mx-auto space-y-8">
<div>
<PageHelpers.title text="Add Hub" socket={@socket} />
<p class="mt-4 text-gray-700">
@ -36,7 +36,7 @@ defmodule LivebookWeb.Hub.NewLive do
1. Select your Hub service
</h2>
<div class="grid grid-cols-1 md:grid-cols-2 gap-4">
<div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
<.card_item id="fly" selected={@selected_type} title="Fly">
<:logo>
<%= Phoenix.HTML.raw(File.read!("static/images/fly.svg")) %>

10
lib/livebook_web/live/layout_helpers.ex
View file

@ -15,7 +15,7 @@ defmodule LivebookWeb.LayoutHelpers do
~H"""
<div class="flex grow h-full">
<div class="absolute sm:static h-full z-[600]">
<div class="absolute md:static h-full z-[600]">
<.live_region role="alert" />
<.sidebar
socket={@socket}
@ -25,8 +25,8 @@ defmodule LivebookWeb.LayoutHelpers do
/>
</div>
<div class="grow overflow-y-auto">
<div class="sm:hidden sticky flex items-center justify-between h-14 px-4 top-0 left-0 z-[500] bg-white border-b border-gray-200">
<div class="text-2xl text-gray-400 hover:text-gray-600 focus:text-gray-600">
<div class="md:hidden sticky flex items-center justify-between h-14 px-4 top-0 left-0 z-[500] bg-white border-b border-gray-200">
<div class="pt-1 text-xl text-gray-400 hover:text-gray-600 focus:text-gray-600">
<button
data-el-toggle-sidebar
aria-label="show sidebar"
@ -61,12 +61,12 @@ defmodule LivebookWeb.LayoutHelpers do
defp sidebar(assigns) do
~H"""
<nav
class="hidden sm:flex w-[18rem] h-full py-2 sm:py-5 bg-gray-900"
class="hidden md:flex w-[16rem] h-full py-2 md:py-5 bg-gray-900"
aria-label="sidebar"
data-el-sidebar
>
<button
class="hidden text-2xl text-gray-300 hover:text-white focus:text-white absolute top-3 right-3"
class="hidden text-xl text-gray-300 hover:text-white focus:text-white absolute top-4 right-3"
aria-label="hide sidebar"
data-el-toggle-sidebar
phx-click={

10
lib/livebook_web/live/learn_live.ex
View file

@ -29,7 +29,7 @@ defmodule LivebookWeb.LearnLive do
current_user={@current_user}
saved_hubs={@saved_hubs}
>
<div class="p-4 sm:px-8 md:px-16 sm:py-7 max-w-screen-lg mx-auto space-y-4">
<div class="p-4 md:px-12 md:py-7 max-w-screen-lg mx-auto space-y-4">
<div>
<PageHelpers.title text="Learn" />
<p class="mt-4 mb-8 text-gray-700">
@ -57,7 +57,7 @@ defmodule LivebookWeb.LearnLive do
</div>
</div>
</div>
<div class="grid grid-cols-1 md:grid-cols-2 xl:grid-cols-3 gap-4">
<div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-1 lg:grid-cols-2 xl:grid-cols-3 gap-4">
<% # Note: it's fine to use stateless components in this comprehension,
# because @notebook_infos never change %>
<%= for info <- @notebook_infos do %>
@ -92,7 +92,7 @@ defmodule LivebookWeb.LearnLive do
<div class="mt-4">
<ul>
<%= for {notebook_info, number} <- Enum.with_index(@group_info.notebook_infos, 1) do %>
<li class="py-4 flex flex-col sm:flex-row items-start sm:items-center sm:space-x-5 border-b border-gray-200 last:border-b-0">
<li class="py-4 flex flex-row items-center space-x-5 border-b border-gray-200 last:border-b-0">
<div class="text-lg text-gray-400 font-semibold">
<%= number |> Integer.to_string() |> String.pad_leading(2, "0") %>
</div>
@ -100,8 +100,8 @@ defmodule LivebookWeb.LearnLive do
<%= notebook_info.title %>
</div>
<%= live_redirect to: Routes.learn_path(@socket, :notebook, notebook_info.slug),
class: "button-base button-outlined-gray mt-3 sm:mt-0" do %>
<.remix_icon icon="play-circle-line" class="align-middle mr-1" /> Open notebook
class: "button-base button-outlined-gray" do %>
<.remix_icon icon="play-circle-line" class="align-middle mr-1" /> Open
<% end %>
</li>
<% end %>

8
lib/livebook_web/live/settings_live.ex
View file

@ -34,7 +34,7 @@ defmodule LivebookWeb.SettingsLive do
current_user={@current_user}
saved_hubs={@saved_hubs}
>
<div id="settings-page" class="p-4 sm:px-8 md:px-16 sm:py-7 max-w-screen-md mx-auto space-y-16">
<div id="settings-page" class="p-4 md:px-12 md:py-7 max-w-screen-md mx-auto space-y-16">
<!-- System settings section -->
<div class="flex flex-col space-y-10">
<div>
@ -50,8 +50,8 @@ defmodule LivebookWeb.SettingsLive do
<h2 class="text-xl text-gray-800 font-medium">
About
</h2>
<div class="flex flex-col md:flex-row gap-4 md:gap-12 items-center justify-center md:justify-between border border-gray-200 rounded-lg p-4">
<div class="flex justify-center md:items-center space-x-12">
<div class="flex flex-col sm:flex-row gap-4 sm:gap-12 items-center justify-center sm:justify-between border border-gray-200 rounded-lg p-4">
<div class="flex justify-center sm:items-center space-x-12">
<%= if app_name = Livebook.Config.app_service_name() do %>
<.labeled_text label="Application">
<%= if app_url = Livebook.Config.app_service_url() do %>
@ -120,7 +120,7 @@ defmodule LivebookWeb.SettingsLive do
</div>
<!-- Environment variables configuration -->
<div class="flex flex-col space-y-4">
<h2 class="text-xl text-gray-800 font-semibold pb-2 border-b border-gray-200">
<h2 class="text-xl text-gray-800 font-medium pb-2 border-b border-gray-200">
Environment variables
</h2>
<p class="mt-4 text-gray-700">