Adjust mobile layout on the settings page (#1421)

Co-authored-by: José Valim <jose.valim@gmail.com>
Co-authored-by: Jonatan Kłosko <jonatanklosko@gmail.com>
This commit is contained in:
Paulo Valim 2022-09-19 20:24:05 +02:00 committed by GitHub
parent 620516eec2
commit 854fc203e0
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
2 changed files with 24 additions and 20 deletions

View file

@ -291,22 +291,24 @@ defmodule LivebookWeb.LiveHelpers do
)
~H"""
<div class="flex space-x-3 items-center justify-between">
<div class="flex items-center gap-1 justify-between">
<%= if @label do %>
<span class="text-gray-700"><%= @label %></span>
<% end %>
<label class={"switch-button #{if(@disabled, do: "switch-button--disabled")}"}>
<input type="hidden" value="false" name={@name} />
<input
type="checkbox"
value="true"
class={"switch-button__checkbox #{@class}"}
name={@name}
checked={@checked}
{@attrs}
/>
<div class="switch-button__bg"></div>
</label>
<div>
<label class={"switch-button #{if(@disabled, do: "switch-button--disabled")}"}>
<input type="hidden" value="false" name={@name} />
<input
type="checkbox"
value="true"
class={"switch-button__checkbox #{@class}"}
name={@name}
checked={@checked}
{@attrs}
/>
<div class="switch-button__bg"></div>
</label>
</div>
</div>
"""
end

View file

@ -50,8 +50,8 @@ defmodule LivebookWeb.SettingsLive do
<h2 class="text-xl text-gray-800 font-medium">
About
</h2>
<div class="flex items-center justify-between border border-gray-200 rounded-lg p-4">
<div class="flex items-center space-x-12">
<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">
<%= if app_name = Livebook.Config.app_service_name() do %>
<.labeled_text label="Application">
<%= if app_url = Livebook.Config.app_service_url() do %>
@ -71,11 +71,13 @@ defmodule LivebookWeb.SettingsLive do
</.labeled_text>
</div>
<%= live_redirect to: Routes.live_dashboard_path(@socket, :home),
class: "button-base button-outlined-gray" do %>
<.remix_icon icon="dashboard-2-line" class="align-middle mr-1" />
<span>Open dashboard</span>
<% end %>
<div class="self-center">
<%= live_redirect to: Routes.live_dashboard_path(@socket, :home),
class: "button-base button-outlined-gray" do %>
<.remix_icon icon="dashboard-2-line" class="align-middle mr-1" />
<span>Open dashboard</span>
<% end %>
</div>
</div>
</div>
<!-- Updates -->