Use a Turbo frame to avoid awkward navigation
This commit is contained in:
Jason Zimdars
@@ -9,56 +9,58 @@
|
||||
</nav>
|
||||
<% end %>
|
||||
|
||||
<div class="panel shadow center">
|
||||
<div class="flex flex-column gap txt-medium">
|
||||
<%= form_with model: @user, method: :patch, class: "flex flex-column gap", data: { controller: "form upload-preview" } do |form| %>
|
||||
<div class="align-center center avatar__form gap">
|
||||
<span class="btn btn--placeholder txt-small"></span>
|
||||
<%= turbo_frame_tag dom_id(@user) do %>
|
||||
<div class="panel shadow center">
|
||||
<div class="flex flex-column gap txt-medium">
|
||||
<%= form_with model: @user, method: :patch, class: "flex flex-column gap", data: { controller: "form upload-preview" } do |form| %>
|
||||
<div class="align-center center avatar__form gap">
|
||||
<span class="btn btn--placeholder txt-small"></span>
|
||||
|
||||
<label class="btn avatar input--file txt-xx-large center fill-white">
|
||||
<%= image_tag user_avatar_path(@user), aria: { hidden: "true" }, class: "avatar", size: 128, data: { upload_preview_target: "image" } %>
|
||||
<%= form.file_field :avatar, id: "file", class: "input", accept: "image/*",
|
||||
data: { upload_preview_target: "input", action: "upload-preview#previewImage" } %>
|
||||
<span class="for-screen-reader">Profile avatar for <%= @user.name %></span>
|
||||
</label>
|
||||
<label class="btn avatar input--file txt-xx-large center fill-white">
|
||||
<%= image_tag user_avatar_path(@user), aria: { hidden: "true" }, class: "avatar", size: 128, data: { upload_preview_target: "image" } %>
|
||||
<%= form.file_field :avatar, id: "file", class: "input", accept: "image/*",
|
||||
data: { upload_preview_target: "input", action: "upload-preview#previewImage" } %>
|
||||
<span class="for-screen-reader">Profile avatar for <%= @user.name %></span>
|
||||
</label>
|
||||
|
||||
<% if @user.avatar.attached? %>
|
||||
<%= tag.button type: :submit, form: "avatar-delete-form", class: "btn btn--negative txt-small", data: { turbo_confirm: "Are you sure you want to remove your avatar? This can't be undone." } do %>
|
||||
<%= image_tag "minus.svg", aria: { hidden: "true" }, size: 20 %>
|
||||
<span class="for-screen-reader">Delete avatar</span>
|
||||
<% if @user.avatar.attached? %>
|
||||
<%= tag.button type: :submit, form: "avatar-delete-form", class: "btn btn--negative txt-small", data: { turbo_confirm: "Are you sure you want to remove your avatar? This can't be undone." } do %>
|
||||
<%= image_tag "minus.svg", aria: { hidden: "true" }, size: 20 %>
|
||||
<span class="for-screen-reader">Delete avatar</span>
|
||||
<% end %>
|
||||
<% end %>
|
||||
<% end %>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="flex align-center gap">
|
||||
<%= translation_button :user_name %>
|
||||
<label class="flex align-center gap input input--actor">
|
||||
<%= form.text_field :name, class: "input full-width", autocomplete: "name", placeholder: "Name", autofocus: true, required: true, data: { "1p-ignore": true, action: "keydown.esc@document->form#cancel" } %>
|
||||
<%= image_tag "person.svg", aria: { hidden: "true" }, size: 30, class: "colorize--black" %>
|
||||
</label>
|
||||
</div>
|
||||
<div class="flex align-center gap">
|
||||
<%= translation_button :email_address %>
|
||||
<label class="flex align-center gap input input--actor">
|
||||
<%= form.email_field :email_address, class: "input full-width", autocomplete: "username", placeholder: "Email address", required: true %>
|
||||
<%= image_tag "email.svg", aria: { hidden: "true" }, size: 30, class: "colorize--black" %>
|
||||
</label>
|
||||
</div>
|
||||
<div class="flex align-center gap">
|
||||
<%= translation_button :password %>
|
||||
<label class="flex align-center gap input input--actor">
|
||||
<%= form.password_field :password, class: "input full-width", autocomplete: "new-password", placeholder: "Password", required: false, maxlength: 72 %>
|
||||
<%= image_tag "password.svg", aria: { hidden: "true" }, size: 30, class: "colorize--black" %>
|
||||
</label>
|
||||
</div>
|
||||
<button type="submit" id="log_in" class="btn btn--reversed center">
|
||||
<%= image_tag "check.svg", aria: { hidden: true }, size: 24 %>
|
||||
<span class="for-screen-reader">Sign in</span>
|
||||
</button>
|
||||
<div class="flex align-center gap">
|
||||
<%= translation_button :user_name %>
|
||||
<label class="flex align-center gap input input--actor">
|
||||
<%= form.text_field :name, class: "input full-width", autocomplete: "name", placeholder: "Name", autofocus: true, required: true, data: { "1p-ignore": true, action: "keydown.esc@document->form#cancel" } %>
|
||||
<%= image_tag "person.svg", aria: { hidden: "true" }, size: 30, class: "colorize--black" %>
|
||||
</label>
|
||||
</div>
|
||||
<div class="flex align-center gap">
|
||||
<%= translation_button :email_address %>
|
||||
<label class="flex align-center gap input input--actor">
|
||||
<%= form.email_field :email_address, class: "input full-width", autocomplete: "username", placeholder: "Email address", required: true %>
|
||||
<%= image_tag "email.svg", aria: { hidden: "true" }, size: 30, class: "colorize--black" %>
|
||||
</label>
|
||||
</div>
|
||||
<div class="flex align-center gap">
|
||||
<%= translation_button :password %>
|
||||
<label class="flex align-center gap input input--actor">
|
||||
<%= form.password_field :password, class: "input full-width", autocomplete: "new-password", placeholder: "Password", required: false, maxlength: 72 %>
|
||||
<%= image_tag "password.svg", aria: { hidden: "true" }, size: 30, class: "colorize--black" %>
|
||||
</label>
|
||||
</div>
|
||||
<button type="submit" id="log_in" class="btn btn--reversed center">
|
||||
<%= image_tag "check.svg", aria: { hidden: true }, size: 24 %>
|
||||
<span class="for-screen-reader">Sign in</span>
|
||||
</button>
|
||||
|
||||
<%= link_to "Cancel and go back", user_path(@user), data: { form_target: "cancel", turbo_frame: "_top" }, hidden: true %>
|
||||
<% end %>
|
||||
<%= link_to "Cancel and go back", user_path(@user), data: { form_target: "cancel", turbo_frame: "_top" }, hidden: true %>
|
||||
<% end %>
|
||||
|
||||
<%= form_with url: user_avatar_url(@user), method: :delete, id: "avatar-delete-form" %>
|
||||
<%= form_with url: user_avatar_url(@user), method: :delete, id: "avatar-delete-form" %>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<% end %>
|
||||
|
||||
@@ -8,7 +8,7 @@
|
||||
<% end %>
|
||||
|
||||
<% if Current.user == @user %>
|
||||
<%= link_to edit_user_path(@user), class: "btn flex-item-justify-end" do %>
|
||||
<%= link_to edit_user_path(@user), class: "btn flex-item-justify-end", data: { turbo_frame: dom_id(@user) } do %>
|
||||
<%= image_tag "pencil.svg", aria: { hidden: true }, size: 24 %>
|
||||
<span class="for-screen-reader">Edit</span>
|
||||
<% end %>
|
||||
@@ -16,24 +16,26 @@
|
||||
</nav>
|
||||
<% end %>
|
||||
|
||||
<div class="panel shadow center txt-align-center">
|
||||
<div class="flex flex-column gap">
|
||||
<div class="avatar txt-xx-large center fill-white">
|
||||
<%= image_tag user_avatar_path(@user), alt: "Profile avatar for #{@user.name}", class: "avatar", size: 128 %>
|
||||
</div>
|
||||
<%= turbo_frame_tag dom_id(@user) do %>
|
||||
<div class="panel shadow center txt-align-center">
|
||||
<div class="flex flex-column gap">
|
||||
<div class="avatar txt-xx-large center fill-white">
|
||||
<%= image_tag user_avatar_path(@user), alt: "Profile avatar for #{@user.name}", class: "avatar", size: 128 %>
|
||||
</div>
|
||||
|
||||
<div class="flex flex-column gap-half margin-block-end">
|
||||
<h1 class="txt-x-large margin-none"><%= @user.name %></h1>
|
||||
<div class="txt-medium">
|
||||
<% if @user.active? %>
|
||||
<%= mail_to @user.email_address %>
|
||||
<% else %>
|
||||
<%= @user.name %> is no longer on this account
|
||||
<% end %>
|
||||
<div class="flex flex-column gap-half margin-block-end">
|
||||
<h1 class="txt-x-large margin-none"><%= @user.name %></h1>
|
||||
<div class="txt-medium">
|
||||
<% if @user.active? %>
|
||||
<%= mail_to @user.email_address %>
|
||||
<% else %>
|
||||
<%= @user.name %> is no longer on this account
|
||||
<% end %>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<% end %>
|
||||
|
||||
<% if Current.user == @user %>
|
||||
<div class="panel shadow center margin-block-double">
|
||||
|
||||
Reference in New Issue
Block a user