More consistent use of padding throughout

This commit is contained in:
José Valim 2022-08-31 23:53:23 +02:00
parent da8f830cd9
commit 905dce45ef
20 changed files with 84 additions and 84 deletions

View file

@ -29,7 +29,7 @@ defmodule LivebookWeb.ExploreLive do
current_user={@current_user}
saved_hubs={@saved_hubs}
>
<div class="px-4 sm:px-8 md:px-16 pt-4 sm:py-7 max-w-screen-lg mx-auto space-y-4">
<div class="p-4 sm:px-8 md:px-16 sm:py-7 max-w-screen-lg mx-auto space-y-4">
<div>
<PageHelpers.title text="Explore" />
<p class="mt-4 mb-8 text-gray-700">

View file

@ -50,7 +50,7 @@ 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="px-4 sm:px-8 md:px-16 pt-4 sm:py-7 max-w-screen-lg mx-auto space-y-4">
<div class="p-4 sm:px-8 md:px-16 sm:py-7 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">
@ -143,7 +143,7 @@ defmodule LivebookWeb.HomeLive do
<% end %>
<%= if @live_action == :import do %>
<.modal id="import-modal" show class="w-full max-w-xl" patch={@self_path}>
<.modal id="import-modal" show class="w-full max-w-4xl" patch={@self_path}>
<.live_component
module={LivebookWeb.HomeLive.ImportComponent}
id="import"

View file

@ -6,7 +6,7 @@ defmodule LivebookWeb.HomeLive.CloseSessionComponent do
@impl true
def render(assigns) do
~H"""
<div class="p-6 pb-4 flex flex-col space-y-8">
<div class="p-6 flex flex-col space-y-8">
<h3 class="text-2xl font-semibold text-gray-800">
Close session
</h3>

View file

@ -6,7 +6,7 @@ defmodule LivebookWeb.HomeLive.EditSessionsComponent do
@impl true
def render(assigns) do
~H"""
<div class="p-6 pb-4 flex flex-col space-y-8">
<div class="p-6 flex flex-col space-y-8">
<h3 class="text-2xl font-semibold text-gray-800">
<%= title(@action) %>
</h3>

View file

@ -4,7 +4,7 @@ defmodule LivebookWeb.HomeLive.ImportComponent do
@impl true
def render(assigns) do
~H"""
<div class="p-6 pb-4 flex flex-col space-y-8">
<div class="p-6 flex flex-col space-y-5">
<h3 class="text-2xl font-semibold text-gray-800">
Import notebook
</h3>

View file

@ -27,7 +27,7 @@ defmodule LivebookWeb.HomeLive.ImportUrlComponent do
</div>
<% end %>
<p class="text-gray-700" id="import-from-url">
Paste the URL to a .livemd file, to a GitHub file, or to a Gist to import it.
Paste the URL to a .livemd file, to a GitHub file, or to a Gist.
</p>
<.form
let={f}

View file

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

View file

@ -20,7 +20,7 @@ defmodule LivebookWeb.Hub.NewLive do
current_user={@current_user}
saved_hubs={@saved_hubs}
>
<div class="px-4 sm:px-8 md:px-16 pt-4 sm:py-7 max-w-screen-md mx-auto space-y-8">
<div class="p-4 sm:px-8 md:px-16 sm: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">

View file

@ -145,7 +145,7 @@ defmodule LivebookWeb.LayoutHelpers do
</button>
<% end %>
<button
class="mt-8 flex items-center group border-l-4 border-transparent"
class="mt-6 flex items-center group border-l-4 border-transparent"
aria_label="user profile"
phx-click={show_current_user_modal()}
>

View file

@ -95,7 +95,7 @@ defmodule LivebookWeb.LiveHelpers do
~H"""
<.modal id={@id} class="w-full max-w-xl" phx-hook="ConfirmModal" data-js-show={show_modal(@id)}>
<div id={"#{@id}-content"} class="p-6 pb-4 flex flex-col" phx-update="ignore">
<div id={"#{@id}-content"} class="p-6 flex flex-col" phx-update="ignore">
<h3 class="text-2xl font-semibold text-gray-800" data-title></h3>
<p class="mt-8 text-gray-700" data-description></p>
<label class="mt-6 text-gray-700 flex items-center" data-opt-out>

View file

@ -11,7 +11,7 @@ defmodule LivebookWeb.SessionLive.CellUploadComponent do
@impl true
def render(assigns) do
~H"""
<div class="p-6 pb-4 flex flex-col space-y-8">
<div class="p-6 flex flex-col space-y-8">
<h3 class="text-2xl font-semibold text-gray-800">
Insert image
</h3>

View file

@ -19,7 +19,7 @@ defmodule LivebookWeb.SessionLive.CodeCellSettingsComponent do
@impl true
def render(assigns) do
~H"""
<div class="p-6 pb-4 flex flex-col space-y-8">
<div class="p-6 flex flex-col space-y-8">
<h3 class="text-2xl font-semibold text-gray-800">
Cell settings
</h3>

View file

@ -4,7 +4,7 @@ defmodule LivebookWeb.SessionLive.DeleteSectionComponent do
@impl true
def render(assigns) do
~H"""
<div class="p-6 pb-4 flex flex-col space-y-8">
<div class="p-6 flex flex-col space-y-8">
<h3 class="text-2xl font-semibold text-gray-800">
Delete section
</h3>

View file

@ -26,7 +26,7 @@ defmodule LivebookWeb.SessionLive.PackageSearchLive do
@impl true
def render(assigns) do
~H"""
<div class="p-6 pb-4 flex flex-col space-y-8">
<div class="p-6 flex flex-col space-y-5">
<h3 class="text-2xl font-semibold text-gray-800">
Search packages
</h3>

View file

@ -44,7 +44,7 @@ defmodule LivebookWeb.SessionLive.PersistenceLive do
@impl true
def render(assigns) do
~H"""
<div class="p-6 pb-4 flex flex-col space-y-8">
<div class="p-6 flex flex-col space-y-8">
<h3 class="text-2xl font-semibold text-gray-800">
Save to file
</h3>

View file

@ -24,7 +24,7 @@ defmodule LivebookWeb.SessionLive.RuntimeComponent do
@impl true
def render(assigns) do
~H"""
<div class="p-6 pb-4 max-w-4xl flex flex-col space-y-5">
<div class="p-6 max-w-4xl flex flex-col space-y-5">
<h3 class="text-2xl font-semibold text-gray-800">
Runtime settings
</h3>

View file

@ -15,7 +15,7 @@ defmodule LivebookWeb.SessionLive.SecretsComponent do
@impl true
def render(assigns) do
~H"""
<div class="p-6 pb-4 max-w-4xl flex flex-col space-y-5">
<div class="p-6 max-w-4xl flex flex-col space-y-5">
<h3 class="text-2xl font-semibold text-gray-800">
Add secret
</h3>

View file

@ -145,7 +145,7 @@ defmodule LivebookWeb.SessionLive.ShortcutsComponent do
@impl true
def render(assigns) do
~H"""
<div class="p-6 flex flex-col space-y-3">
<div class="p-6 flex flex-col space-y-5">
<h3 class="text-2xl font-semibold text-gray-800">
Keyboard shortcuts
</h3>
@ -158,7 +158,7 @@ defmodule LivebookWeb.SessionLive.ShortcutsComponent do
you have editor focus and directly modify the given cell content.
</p>
<div class="flex">
<form class="mt-4" phx-change="settings" onsubmit="return false;" phx-target={@myself}>
<form class="my-2" phx-change="settings" onsubmit="return false;" phx-target={@myself}>
<.switch_checkbox
name="basic"
label="Basic view (essential shortcuts only)"
@ -200,15 +200,17 @@ defmodule LivebookWeb.SessionLive.ShortcutsComponent do
assigns = assign(assigns, left: left, right: right)
~H"""
<h3 class="text-lg font-medium text-gray-900 pt-4">
<%= @title %>
</h3>
<div class="mt-2 flex flex-col lg:flex-row lg:space-x-4">
<div class="lg:grow">
<.shortcuts_section_table shortcuts={@left} platform={@platform} />
</div>
<div class="lg:w-1/2">
<.shortcuts_section_table shortcuts={@right} platform={@platform} />
<div class="flex flex-col space-y-3">
<h3 class="text-lg font-medium text-gray-900">
<%= @title %>
</h3>
<div class="flex flex-col lg:flex-row lg:space-x-4">
<div class="lg:grow">
<.shortcuts_section_table shortcuts={@left} platform={@platform} />
</div>
<div class="lg:w-1/2">
<.shortcuts_section_table shortcuts={@right} platform={@platform} />
</div>
</div>
</div>
"""

View file

@ -28,7 +28,7 @@ defmodule LivebookWeb.SettingsLive do
current_user={@current_user}
saved_hubs={@saved_hubs}
>
<div class="px-4 sm:px-8 md:px-16 pt-4 sm:py-7 max-w-screen-md mx-auto space-y-8">
<div class="p-4 sm:px-8 md:px-16 sm:py-7 max-w-screen-md mx-auto space-y-16">
<!-- System settings section -->
<div class="flex flex-col space-y-10">
<div>

View file

@ -11,68 +11,66 @@ defmodule LivebookWeb.SettingsLive.AddFileSystemComponent do
@impl true
def render(assigns) do
~H"""
<div class="p-6 pb-4 max-w-4xl flex flex-col space-y-3">
<div class="p-6 flex flex-col space-y-5">
<h3 class="text-2xl font-semibold text-gray-800">
Add file system
</h3>
<div class="w-full flex-col space-y-5">
<p class="text-gray-700">
Configure an AWS S3 bucket as a Livebook file system.
Many storage services offer an S3-compatible API and
those work as well.
</p>
<%= if @error_message do %>
<div class="error-box">
<%= @error_message %>
<p class="text-gray-700">
Configure an AWS S3 bucket as a Livebook file system.
Many storage services offer an S3-compatible API and
those work as well.
</p>
<%= if @error_message do %>
<div class="error-box">
<%= @error_message %>
</div>
<% end %>
<.form
let={f}
for={:data}
phx-target={@myself}
phx-submit="add"
phx-change="validate"
autocomplete="off"
spellcheck="false"
>
<div class="flex flex-col space-y-4">
<div>
<div class="input-label">Bucket URL</div>
<%= text_input(f, :bucket_url,
value: @data["bucket_url"],
class: "input",
placeholder: "https://s3.[region].amazonaws.com/[bucket]"
) %>
</div>
<% end %>
<.form
let={f}
for={:data}
phx-target={@myself}
phx-submit="add"
phx-change="validate"
autocomplete="off"
spellcheck="false"
>
<div class="flex flex-col space-y-4">
<div>
<div class="input-label">Bucket URL</div>
<%= text_input(f, :bucket_url,
value: @data["bucket_url"],
<div>
<div class="input-label">Access Key ID</div>
<.with_password_toggle id="access-key-password-toggle">
<%= text_input(f, :access_key_id,
value: @data["access_key_id"],
class: "input",
placeholder: "https://s3.[region].amazonaws.com/[bucket]"
type: "password"
) %>
</div>
<div>
<div class="input-label">Access Key ID</div>
<.with_password_toggle id="access-key-password-toggle">
<%= text_input(f, :access_key_id,
value: @data["access_key_id"],
class: "input",
type: "password"
) %>
</.with_password_toggle>
</div>
<div>
<div class="input-label">Secret Access Key</div>
<.with_password_toggle id="secret-access-key-password-toggle">
<%= text_input(f, :secret_access_key,
value: @data["secret_access_key"],
class: "input",
type: "password"
) %>
</.with_password_toggle>
</div>
</.with_password_toggle>
</div>
<div class="mt-5 flex justify-end space-x-2">
<%= live_patch("Cancel", to: @return_to, class: "button-base button-outlined-gray") %>
<button class="button-base button-blue" type="submit" disabled={not data_valid?(@data)}>
Add
</button>
<div>
<div class="input-label">Secret Access Key</div>
<.with_password_toggle id="secret-access-key-password-toggle">
<%= text_input(f, :secret_access_key,
value: @data["secret_access_key"],
class: "input",
type: "password"
) %>
</.with_password_toggle>
</div>
</.form>
</div>
</div>
<div class="mt-5 flex space-x-2">
<button class="button-base button-blue" type="submit" disabled={not data_valid?(@data)}>
Add
</button>
<%= live_patch("Cancel", to: @return_to, class: "button-base button-outlined-gray") %>
</div>
</.form>
</div>
"""
end