bterkuile/fizzy
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Put profile boxes side-by-side

Browse Source
This commit is contained in:
Andy Smith
2025-10-31 15:24:28 -05:00
parent 4f29e3aa3a
commit 881946ae79
2 changed files with 57 additions and 35 deletions
Download Patch File Download Diff File Expand all files Collapse all files
app/assets/stylesheets/profile-layout.css
+16
View File
@@ -0,0 +1,16 @@
@layer components {
.profile-layout {
display: flex;
gap: var(--inline-space);
@media (min-width: 800px) {
align-items: stretch;
justify-content: center;
}
@media (max-width: 799px) {
align-items: center;
flex-direction: column;
}
}
}
app/views/users/show.html.erb
+41 -35
View File
@@ -4,48 +4,54 @@
<%= render "my/menus/menu" %>
<% end %>
<div class="panel shadow center txt-align-center margin-block-end-double" style="--panel-size: 45ch;">
<div class="flex flex-column gap position-relative">
<% if Current.user == @user %>
<%= link_to edit_user_path(@user), class: "user-edit-link btn" do %>
<%= icon_tag "pencil" %>
<span class="for-screen-reader">Edit</span>
<% end %>
<% end %>
<div class="avatar txt-xx-large center fill-white btn--circle hide-focus-ring">
<%= image_tag user_avatar_path(@user), alt: "Profile avatar for #{@user.name}" %>
</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
<div class="profile-layout">
<section class="panel shadow txt-align-center" style="--panel-size: 45ch;">
<div class="flex flex-column gap position-relative">
<% if Current.user == @user %>
<%= link_to edit_user_path(@user), class: "user-edit-link btn" do %>
<%= icon_tag "pencil" %>
<span class="for-screen-reader">Edit</span>
<% end %>
<% end %>
<div class="avatar txt-xx-large center fill-white btn--circle hide-focus-ring">
<%= image_tag user_avatar_path(@user), alt: "Profile avatar for #{@user.name}" %>
</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>
</div>
<div class="flex-inline center justify-center flex-wrap gap">
<%= link_to "Which cards are assigned to #{ Current.user == @user ? "me" : @user.first_name }?", cards_path(assignee_ids: [@user.id], sorted_by: "newest"), class: "btn", data: { turbo_frame: "_top" } %>
<%= link_to "Which cards were added by #{ Current.user == @user ? "me" : @user.first_name }?", cards_path(creator_ids: [@user.id], sorted_by: "newest"), class: "btn", data: { turbo_frame: "_top" } %>
</div>
</div>
</section>
<div class="flex-inline center justify-center flex-wrap gap">
<%= link_to "Which cards are assigned to #{ Current.user == @user ? "me" : @user.first_name }?", cards_path(assignee_ids: [@user.id], sorted_by: "newest"), class: "btn", data: { turbo_frame: "_top" } %>
<%= link_to "Which cards were added by #{ Current.user == @user ? "me" : @user.first_name }?", cards_path(creator_ids: [@user.id], sorted_by: "newest"), class: "btn", data: { turbo_frame: "_top" } %>
</div>
</div>
<% if Current.user == @user %>
<section class="panel shadow" style="--panel-size: 45ch;">
<%= render "users/transfer", user: @user %>
<div class="center margin-block-start-double">
<%= button_to session_url(script_name: nil), method: :delete, class: "btn btn--plain txt-link txt-small", data: { turbo: false } do %>
<span>Sign out</span>
<% end %>
</div>
</section>
<% end %>
</div>
<% if Current.user == @user %>
<div class="panel shadow center margin-block-double" style="--panel-size: 45ch;">
<%= render "users/transfer", user: @user %>
<div class="center margin-block-start-double">
<%= button_to session_url(script_name: nil), method: :delete, class: "btn btn--plain txt-link txt-small", data: { turbo: false } do %>
<span>Sign out</span>
<% end %>
</div>
</div>
<% end %>
<h1 class="font-weight-black txt-large margin-block-double"><%= "What #{ Current.user == @user ? "have you" : "has #{ @user.first_name }" } been up to?" %></h1>